@snapcall/stream-ui 1.10.0 → 1.11.0

package/dist/stream-ui.esm.js

@@ -1,9 +1,9 @@
 import {jsx as $3Sbms$jsx, jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment} from "react/jsx-runtime";
-import {render as $3Sbms$render, createPortal as $3Sbms$createPortal} from "react-dom";
+import {createRoot as $3Sbms$createRoot} from "react-dom/client";
 import $3Sbms$hotjarbrowser from "@hotjar/browser";
 import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
 import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, css as $3Sbms$css, ThemeContext as $3Sbms$ThemeContext, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
-import {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, useCallback as $3Sbms$useCallback} from "react";
+import $3Sbms$react, {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, useCallback as $3Sbms$useCallback, forwardRef as $3Sbms$forwardRef} from "react";
 import "inobounce";
 import $3Sbms$i18next from "i18next";
 import {initReactI18next as $3Sbms$initReactI18next, useTranslation as $3Sbms$useTranslation} from "react-i18next";
@@ -14,11 +14,24 @@ import {captureException as $3Sbms$captureException, addBreadcrumb as $3Sbms$add
 import {Producer as $3Sbms$Producer} from "mediasoup-client/lib/Producer";
 import {Device as $3Sbms$Device} from "mediasoup-client";
 import {SelfieSegmentation as $3Sbms$SelfieSegmentation} from "@mediapipe/selfie_segmentation";
+import {createPortal as $3Sbms$createPortal} from "react-dom";
 import {toCanvas as $3Sbms$toCanvas} from "qrcode";
+import {useOverlayTriggerState as $3Sbms$useOverlayTriggerState, useToggleState as $3Sbms$useToggleState} from "react-stately";
+import $3Sbms$classnames from "classnames";
+import {useToggleButton as $3Sbms$useToggleButton, useFocusRing as $3Sbms$useFocusRing, useButton as $3Sbms$useButton} from "react-aria";
+import {useModalOverlay as $3Sbms$useModalOverlay, Overlay as $3Sbms$Overlay} from "@react-aria/overlays";
+import {useViewportSize as $3Sbms$useViewportSize} from "@react-aria/utils";
+import {CSSTransition as $3Sbms$CSSTransition} from "react-transition-group";
+import {useHover as $3Sbms$useHover} from "@react-aria/interactions";
+import $3Sbms$reactcontentloader from "react-content-loader";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
 
 
 
-
+// https://github.com/voodoocreation/ts-deepmerge/blob/master/src/index.ts
 const $365e765f9890497b$var$isObject = (obj)=>{
     if (typeof obj === "object" && obj !== null) {
         if (typeof Object.getPrototypeOf === "function") {
@@ -805,7 +818,7 @@ var $384d985bb9605c35$export$2e2bcd8739ae039 = (0, $3Sbms$i18next);
 
 
 
-
+/* eslint-disable no-console */ 
 const $0f65a9eaf4a1e910$var$LogLevel = {
     error: 1,
     warn: 2,
@@ -972,8 +985,8 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
         });
         try {
             this.audioStreamSource.disconnect(this.analyser);
-        } catch (err1) {
-            $67e45b2e30dcc030$var$log.error("release", "audioStreamSource failed to disconnect", err1);
+        } catch (err) {
+            $67e45b2e30dcc030$var$log.error("release", "audioStreamSource failed to disconnect", err);
         }
         this.audioContext.close().catch((err)=>{
             $67e45b2e30dcc030$var$log.error("release", "audioContext failed to close", err);
@@ -1227,7 +1240,7 @@ class $0148b6fd862a22e8$export$2e2bcd8739ae039 {
     live = false;
     fps = 24;
     blurLevel = 10;
-    timerWorker = new Worker(new URL("timer.370d0e5a.js", import.meta.url), {
+    timerWorker = new Worker(new URL("timer.7144fe82.js", import.meta.url), {
         name: "VirtualBackgroundTimerWorker"
     });
     constructor(stream, options){
@@ -1359,7 +1372,7 @@ class $0148b6fd862a22e8$export$2e2bcd8739ae039 {
 
 
 const $c31e3fb4360572af$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("StreamerClient");
-const $c31e3fb4360572af$export$818d60b2e626da0c = {
+const $c31e3fb4360572af$export$103bedf43ba882db = {
     WEBRTC_FAILED: "WRTC1",
     WEBRTC_RECOVER_ERROR: "WRTC2",
     CREATE_TRANSPORT_FAILED: "TRANS1",
@@ -1408,7 +1421,7 @@ const $c31e3fb4360572af$var$WEBCAM_SIMULCAST_ENCODINGS = [
     {
         scaleResolutionDownBy: 1,
         maxBitrate: 5000000
-    }, 
+    }
 ];
 const $c31e3fb4360572af$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
     {
@@ -1418,7 +1431,7 @@ const $c31e3fb4360572af$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
     {
         dtx: true,
         maxBitrate: 6000000
-    }, 
+    }
 ];
 class $c31e3fb4360572af$var$SnapcallEvent extends CustomEvent {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
@@ -1446,6 +1459,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         super();
         navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
         this.config = {
+            streamApiURL: String("https://apistream.snapcall.io"),
             apiUrl: String("https://api.snapcall.io/v2"),
             streamerServer: String("wss://g.snapcall.io/stream"),
             streamerApi: String("https://g.snapcall.io/stream"),
@@ -1455,7 +1469,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     username: "test",
                     credential: "test",
                     credentialType: "password"
-                }, 
+                }
             ]
         };
         this.peers = new Map();
@@ -1496,10 +1510,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 }
             };
             peer.producersData.forEach((producer)=>{
-                if (producer.deviceType === "microphone") {
-                    deviceState.microphone.enabled = true;
-                    deviceState.microphone.muted = producer.paused;
-                } else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
+                if (producer.deviceType === "microphone") deviceState.microphone.enabled = true;
+                else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
                 else if (producer.deviceType === "webcam") deviceState.camera.enabled = true;
             });
             peers.push({
@@ -1565,7 +1577,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         if (!this.peerId) this.peerId = (0, $3Sbms$v4)();
         let url;
         try {
-            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  } ,  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
+            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  }  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -1576,7 +1588,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
             this.permissions = permissions;
             this.plan = name;
-            url = `${this.config.streamerServer}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
+            url = `${this.config.streamerServer}/${instanceId}${this.joinOptions.recorder ? "/recorder" : ""}?roomId=${room}&peerId=${this.peerId}`;
         } catch (roomError) {
             const event = new $c31e3fb4360572af$var$SnapcallEvent("invalidRoom", {
                 detail: {}
@@ -1592,34 +1604,40 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         });
         this.protoo = new $3Sbms$Peer(this.protooTransport);
         this.protoo.on("open", ()=>{
+            if (this.joinOptions.recorder) {
+                this.joinRecorder();
+                return;
+            }
             this.joinRoom();
         });
         this.protoo.on("failed", ()=>{
             $c31e3fb4360572af$var$log.error("protoo.on", "failed");
-            this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.SOCKET_LOST);
+            this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.SOCKET_LOST);
         });
         this.protoo.on("disconnected", ()=>{
             $c31e3fb4360572af$var$log.error("protoo.on", "disconnected");
-            this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.SOCKET_LOST);
+            this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.SOCKET_LOST);
         });
         this.protoo.on("close", ()=>$c31e3fb4360572af$var$log.log("protoo.on", "close :("));
         this.protoo.on("notification", async (notification)=>{
             $c31e3fb4360572af$var$log.log("notification", notification);
             if (notification.method === "error") {
-                if (notification.data?.reason === "reached user limit") this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.USER_LIMIT);
+                if (notification.data?.reason === "reached user limit") this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.USER_LIMIT);
             } else if (notification.method === "newPeer") {
-                const { id: id , profile: profile  } = notification.data;
+                const { id: id , profile: profile , muted: muted  } = notification.data;
                 this.peers.set(id, {
                     id: id,
                     peerId: id,
                     profile: profile,
+                    muted: muted,
                     producersData: []
                 });
                 const event = new $c31e3fb4360572af$var$SnapcallEvent("newPeer", {
                     detail: {
                         peerId: id,
                         displayName: profile.name,
-                        profile: profile
+                        profile: profile,
+                        muted: muted
                     }
                 });
                 this.dispatchEvent(event);
@@ -1650,7 +1668,10 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 this.onConsumerClose({
                     consumerId: consumerId
                 });
-            } else if (notification.method === "displayName") {
+            } else if (notification.method === "recordStopped") this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("recordStopped", {
+                detail: notification.data
+            }));
+            else if (notification.method === "displayName") {
                 const { peerId: peerId , displayName: displayName  } = notification.data;
                 const event = new $c31e3fb4360572af$var$SnapcallEvent("displayName", {
                     detail: {
@@ -1698,6 +1719,26 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     }
                 });
                 this.dispatchEvent(event);
+            } else if (notification.method === "mute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaPause", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: true
+                    }
+                });
+                this.dispatchEvent(event);
+            } else if (notification.method === "unmute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaResume", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: false
+                    }
+                });
+                this.dispatchEvent(event);
             } else if (notification.method === "requestDeviceResult") {
                 const event = new $c31e3fb4360572af$var$SnapcallEvent(notification.method, {
                     detail: notification.data
@@ -1710,17 +1751,17 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 });
                 this.dispatchEvent(event);
             } else if (notification.method === "customMessage") {
-                const { messageId: messageId , chunk: chunk1 , chunkIndex: chunkIndex , totalChunks: totalChunks  } = notification.data.event;
+                const { messageId: messageId , chunk: chunk , chunkIndex: chunkIndex , totalChunks: totalChunks  } = notification.data.event;
                 const existingMessage = this.customMessages.get(messageId);
                 if (existingMessage) existingMessage.chunks.push({
                     index: chunkIndex,
-                    data: chunk1
+                    data: chunk
                 });
                 else this.customMessages.set(messageId, {
                     chunks: [
                         {
                             index: chunkIndex,
-                            data: chunk1
+                            data: chunk
                         }
                     ],
                     totalChunks: totalChunks
@@ -1765,7 +1806,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 transport.transport = await promise;
                 if (transport.transport) this.listenWebRTCTransportStates(transport);
             } catch (err) {
-                this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.CREATE_TRANSPORT_FAILED);
+                this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.CREATE_TRANSPORT_FAILED);
                 throw err;
             }
             return transport.transport;
@@ -1792,7 +1833,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                         }
                     });
                     $c31e3fb4360572af$var$log.error("listenWebRTCTransportStats", "webrtc stat failed", err);
-                    this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.WEBRTC_FAILED);
+                    this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.WEBRTC_FAILED);
                 }
             }
         });
@@ -1833,7 +1874,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 {
                     ...peer,
                     peerId: peer.id || peer.peerId
-                }, 
+                }
             ]));
         const callId = await this.getCallId();
         this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("enterRoom", {
@@ -1861,6 +1902,19 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
         });
     }
+    async joinRecorder() {
+        this.streamerMediasoup = await (0, $a2f0e3c29b11c88e$export$2e2bcd8739ae039).create(this.protoo, this.config);
+        const callId = await this.getCallId();
+        this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("enterRoom", {
+            detail: {
+                peerId: this.peerId,
+                peers: [],
+                callId: callId,
+                plan: this.plan,
+                permissions: this.permissions
+            }
+        }));
+    }
     async switchMicrophone(deviceId) {
         try {
             $c31e3fb4360572af$var$log.log("switchMicrophone", "switching Microphone");
@@ -1985,28 +2039,30 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.dispatchEvent(event);
         }
     }
-    async muteMicrophone() {
+    muteMicrophone() {
         if (this.micProducer) {
             this.onStopSpeak();
-            this.micProducer?.pause();
-            await this.protoo.request("pauseProducer", {
-                producerId: this.micProducer?.id
-            });
+            this.micProducer.pause();
             this.muted = true;
+            const device = "microphone";
+            this.protoo.notify("mute", {
+                device: device
+            });
             const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneMute", {
                 detail: {}
             });
             this.dispatchEvent(event);
         }
     }
-    async unMuteMicrophone() {
+    unMuteMicrophone() {
         if (this.micProducer) {
             this.micProducer.resume();
             this.resolvePendingDeviceRequest("microphone", true);
-            await this.protoo.request("resumeProducer", {
-                producerId: this.micProducer.id
-            });
             this.muted = false;
+            const device = "microphone";
+            this.protoo.notify("unmute", {
+                device: device
+            });
             const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneUnmute", {
                 detail: {}
             });
@@ -2114,7 +2170,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 iceParameters: iceParameters
             });
         } catch (err) {
-            this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.WEBRTC_RECOVER_ERROR);
+            this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.WEBRTC_RECOVER_ERROR);
             $c31e3fb4360572af$var$log.log("restartIce", "restartIceFailed", err);
             $3Sbms$captureException(err, {
                 extra: {
@@ -2181,20 +2237,39 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         if (!this.webcamProducer || this.webcamProducer.closed) return;
         await this.switchWebcam({});
     }
-    async switchWebcam({ device: device , resolution: resolution , rotate: rotate  }) {
+    async switchWebcam({ device: device , resolution: resolution , rotate: rotate , frameRate: frameRate , facingMode: facingMode  }) {
         if (!this.webcam.device) throw new Error("no webcam devices");
+        const optionalParam = {};
         if (rotate) {
-            const webcams = Array.from(this.webcams.keys());
-            const deviceId = this.webcam?.device?.deviceId || "unknow";
-            let newWebcamIndex = webcams.indexOf(deviceId);
-            if (newWebcamIndex < webcams.length - 1) newWebcamIndex++;
-            else newWebcamIndex = 0;
-            const newWebcamDevice = this.webcams.get(webcams[newWebcamIndex]);
-            if (!newWebcamDevice) throw new Error("no webcam device");
-            this.webcam.device = newWebcamDevice;
-            this.webcam.resolution = "hd";
+            if (this.webcam.facingMode) {
+                console.log("switch by facing mod");
+                this.webcam.facingMode = this.webcam.facingMode === "user" ? "environment" : "user";
+                optionalParam.facingMode = this.webcam.facingMode;
+            } else {
+                const webcams = Array.from(this.webcams.keys());
+                const deviceId = this.webcam?.device?.deviceId || "unknow";
+                let newWebcamIndex = webcams.indexOf(deviceId);
+                if (newWebcamIndex < webcams.length - 1) newWebcamIndex++;
+                else newWebcamIndex = 0;
+                const newWebcamDevice = this.webcams.get(webcams[newWebcamIndex]);
+                if (!newWebcamDevice) throw new Error("no webcam device");
+                this.webcam.device = newWebcamDevice;
+                this.webcam.resolution = "hd";
+                optionalParam.deviceId = {
+                    ideal: this.webcam.device?.deviceId
+                };
+            }
         } else {
-            if (device) this.webcam.device = device;
+            if (facingMode) {
+                this.webcam.facingMode = facingMode;
+                optionalParam.facingMode = this.webcam.facingMode;
+            } else if (device) {
+                this.webcam.device = device;
+                this.webcam.facingMode = undefined;
+                optionalParam.deviceId = {
+                    ideal: this.webcam.device.deviceId
+                };
+            }
             if (resolution) this.webcam.resolution = resolution;
         }
         let usedResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution];
@@ -2207,11 +2282,15 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             },
             qualityIndex: 2
         };
+        await this.webcamProducer?.replaceTrack?.({
+            track: null
+        }).catch((err)=>{
+            $c31e3fb4360572af$var$log.error("switchCamera", "clean track failed", err);
+        });
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
-                deviceId: {
-                    ideal: this.webcam.device.deviceId
-                },
+                frameRate: frameRate,
+                ...optionalParam,
                 ...usedResolution
             }
         }));
@@ -2241,7 +2320,16 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     async enableVideo(config) {
         await this.updateWebcams();
-        if (config?.device) this.webcam.device = config.device;
+        const optionalParam = {};
+        if (config?.facingMode) {
+            optionalParam.facingMode = config.facingMode;
+            this.webcam.facingMode = config.facingMode;
+        } else {
+            if (config?.device) this.webcam.device = config.device;
+            optionalParam.deviceId = {
+                ideal: this.webcam.device?.deviceId
+            };
+        }
         if (!this.webcam.device) throw new Error("no webcam devices");
         let usedResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution];
         if (this.useVideoBackground) usedResolution = {
@@ -2255,12 +2343,18 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         };
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
-                deviceId: {
-                    ideal: this.webcam.device.deviceId
-                },
+                frameRate: config?.frameRate,
+                ...optionalParam,
                 ...usedResolution
             }
         }));
+        if (config?.facingMode) try {
+            const capabilities = mediaStream.getVideoTracks()[0].getCapabilities();
+            if (!capabilities?.facingMode || capabilities.facingMode.length === 0) throw new Error("no facing mod");
+        } catch  {
+            this.webcam.device = this.webcams.values().next().value;
+            this.webcam.facingMode = undefined;
+        }
         if (this.useVideoBackground) {
             if (this.mediaPipe) await this.mediaPipe.clean();
             this.mediaPipe = new (0, $0148b6fd862a22e8$export$2e2bcd8739ae039)(mediaStream, this.mediaPipeOption);
@@ -2316,7 +2410,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             advanced: [
                 {
                     zoom: this.webcamZoom.min * 2
-                }, 
+                }
             ]
         });
     }
@@ -2327,7 +2421,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             advanced: [
                 {
                     zoom: this.webcamZoom.min
-                }, 
+                }
             ]
         });
     }
@@ -2436,6 +2530,27 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             element.srcObject = mediaStream;
         } else $c31e3fb4360572af$var$log.error("requestVideo", `Video consumer ${consumer} not found`);
     }
+    async saveCapture(base64Image) {
+        const { objectUrl: objectUrl  } = await fetch(`${this.config.streamApiURL}/uploadSnapshot`, {
+            method: "POST",
+            body: JSON.stringify({
+                file: base64Image
+            })
+        }).then((rawResponse)=>rawResponse.json());
+        const res = await this.protoo.request("addCapture", {
+            url: objectUrl
+        });
+        return {
+            url: objectUrl,
+            assetId: res.assetId
+        };
+    }
+    async deleteCapture(assetId) {
+        const res = await this.protoo.request("deleteCapture", {
+            assetId: assetId
+        });
+        return res;
+    }
     async captureVideo(videoElement) {
         if (this.permissions.find((permission)=>permission === "instant_picture")) {
             let image;
@@ -2509,6 +2624,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 deviceType: deviceType
             });
             this.scaleVideoEncodingsParameter();
+            const paused = peer ? peer.muted : false;
             const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaStart", {
                 detail: {
                     peerId: peerId,
@@ -2529,7 +2645,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 consumerId: consumer.id
             });
         } catch (error) {
-            this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.CONSUME_ERROR);
+            this.onCriticalError($c31e3fb4360572af$export$103bedf43ba882db.CONSUME_ERROR);
             $c31e3fb4360572af$var$log.error("consumeProducer", "newConsumer request failed", error);
             throw error;
         }
@@ -2733,6 +2849,12 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     getPermissions() {
         return this.permissions;
     }
+    async startRecord() {
+        await this.protoo.request("startRecord");
+    }
+    async stopRecord() {
+        await this.protoo.request("stopRecord");
+    }
 }
 
 
@@ -2747,17 +2869,17 @@ var $5f30d8bf4f04621e$export$2e2bcd8739ae039 = $5f30d8bf4f04621e$var$StreamUICon
 
 
 let $2884da8a64948e35$export$96a9662a3eda31f6;
-(function(StreamsReducerActionTypes1) {
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAMS"] = 0] = "SET_STREAMS";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["ADD_STREAM"] = 1] = "ADD_STREAM";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["REMOVE_STREAM"] = 2] = "REMOVE_STREAM";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["DEVICE_UPDATE"] = 3] = "DEVICE_UPDATE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["MUTE"] = 4] = "MUTE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["UNMUTE"] = 5] = "UNMUTE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_HIGHLIGHTED_TILE"] = 6] = "SET_HIGHLIGHTED_TILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["UNSET_HIGHLIGHTED_TILE"] = 7] = "UNSET_HIGHLIGHTED_TILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_PROFILE"] = 8] = "SET_STREAM_PROFILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_SPEAKING"] = 9] = "SET_STREAM_SPEAKING";
+(function(StreamsReducerActionTypes) {
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_STREAMS"] = 0] = "SET_STREAMS";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["ADD_STREAM"] = 1] = "ADD_STREAM";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["REMOVE_STREAM"] = 2] = "REMOVE_STREAM";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["DEVICE_UPDATE"] = 3] = "DEVICE_UPDATE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["MUTE"] = 4] = "MUTE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["UNMUTE"] = 5] = "UNMUTE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_HIGHLIGHTED_TILE"] = 6] = "SET_HIGHLIGHTED_TILE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["UNSET_HIGHLIGHTED_TILE"] = 7] = "UNSET_HIGHLIGHTED_TILE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_STREAM_PROFILE"] = 8] = "SET_STREAM_PROFILE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_STREAM_SPEAKING"] = 9] = "SET_STREAM_SPEAKING";
 })($2884da8a64948e35$export$96a9662a3eda31f6 || ($2884da8a64948e35$export$96a9662a3eda31f6 = {}));
 const $2884da8a64948e35$export$7fc21eab2c971c9c = {
     streams: [],
@@ -2968,6 +3090,52 @@ const $a1ac29d50bdaa837$var$SnapcallLogoMedium = ()=>{
         })
     });
 };
+const $a1ac29d50bdaa837$export$3741e4ac43f04ca2 = ()=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsxs)("g", {
+                clipPath: "url(#clip0_243_300)",
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        d: "M0 24C0 4.236 4.236 0 24 0C43.764 0 48 4.236 48 24C48 43.764 43.764 48 24 48C4.236 48 0 43.764 0 24Z",
+                        fill: "black"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        d: "M24.15 38.2856C25.7279 38.2856 27.0502 36.9758 26.5626 35.4753C26.1419 34.1801 25.4321 32.9898 24.4746 32.0064C22.853 30.341 20.6537 29.4053 18.3605 29.4053C16.0673 29.4053 13.8679 30.341 12.2464 32.0064C11.2888 32.9898 10.5791 34.1801 10.1583 35.4753C9.67078 36.9758 10.9931 38.2856 12.571 38.2856H24.15Z",
+                        fill: "white"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        d: "M23.8494 9.71436C22.2714 9.71436 20.9491 11.0242 21.4367 12.5249C21.8574 13.8199 22.5672 15.0102 23.5248 15.9937C25.1463 17.6591 27.3456 18.5947 29.6389 18.5947C31.932 18.5947 34.1314 17.6591 35.7529 15.9937C36.7106 15.0102 37.4203 13.8199 37.8409 12.5249C38.3286 11.0242 37.0063 9.71436 35.4283 9.71436H23.8494Z",
+                        fill: "white"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        d: "M29.6387 35.4287C29.6387 37.0067 30.953 38.3301 32.4415 37.8064C33.6767 37.3715 34.8118 36.6509 35.7527 35.6847C37.3744 34.0195 38.2852 31.7606 38.2852 29.4055C38.2852 27.0502 37.3744 24.7915 35.7527 23.1261C34.8118 22.1599 33.6767 21.4393 32.4415 21.0046C30.953 20.4807 29.6387 21.8043 29.6387 23.3823V35.4287Z",
+                        fill: "white"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        d: "M18.3605 12.5712C18.3605 10.9933 17.0461 9.66972 15.5576 10.1936C14.3224 10.6283 13.1872 11.3489 12.2464 12.3151C10.6248 13.9804 9.71387 16.2392 9.71387 18.5944C9.71387 20.9496 10.6248 23.2083 12.2464 24.8737C13.1872 25.8399 14.3224 26.5605 15.5576 26.9952C17.0461 27.5191 18.3605 26.1955 18.3605 24.6176V12.5712Z",
+                        fill: "white"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("defs", {
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)("clipPath", {
+                    id: "clip0_243_300",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
+                        width: "48",
+                        height: "48",
+                        fill: "white"
+                    })
+                })
+            })
+        ]
+    });
+};
 var $a1ac29d50bdaa837$export$2e2bcd8739ae039 = $a1ac29d50bdaa837$var$SnapcallLogo;
 
 
@@ -3076,8 +3244,9 @@ const $2da9626742e3560b$export$d5424e4dfe4be076 = ({ color: color  })=>/*#__PURE
 
 const $e1413aacdaa5a03e$export$71b2224f1ce5e08e = (ref, action)=>{
     (0, $3Sbms$useEffect)(()=>{
+        const effectTimestamp = performance.now();
         const onWindowClick = (event)=>{
-            if (!ref?.current?.contains(event.target)) action();
+            if (!ref?.current?.contains(event.target) && event.timeStamp > effectTimestamp) action();
         };
         if (ref?.current) {
             window.addEventListener("click", onWindowClick);
@@ -3166,7 +3335,9 @@ const $59d1053cd71d481a$var$Menu = ({ categories: categories  })=>{
                         children: category.title
                     }),
                     category.items.map((item)=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4ee077ee5e6fe3e7$export$44020656de05f2b4), {
-                            onClick: item.action,
+                            onClick: ()=>{
+                                item.action();
+                            },
                             danger: item.danger,
                             children: [
                                 item.jsxIcon && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4ee077ee5e6fe3e7$export$5912a8d3f489e1c1), {
@@ -3325,7 +3496,7 @@ const $ae6e25be45301335$var$HeaderSettings = ({ baseCategories: baseCategories ,
                     items: [
                         ...baseCategory.items
                     ]
-                })), 
+                }))
         ];
         extraCategories?.forEach((extraCategory)=>{
             const existingCategory = mergedCategories.find((category)=>category.id === extraCategory.id);
@@ -3465,7 +3636,7 @@ const $e96d119a19ed0c6c$var$getLayout = ({ width: width , cellAspectRatio: cellA
                     width: roundedWidth,
                     height: height
                 }
-            }, 
+            }
         ],
         tileCount: tileCount
     };
@@ -3587,7 +3758,7 @@ const $f235befa4cdc42d6$var$multiPiP = new (0, $e96d119a19ed0c6c$export$45fabd1c
 const $f235befa4cdc42d6$var$browser = $3Sbms$parse(window.navigator.userAgent);
 const $f235befa4cdc42d6$var$Header = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $3Sbms$useState)(options.extraSettingsOptions || []);
     const onSetExtraSettingsOptions = (event)=>{
@@ -3656,7 +3827,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                         title: t("menu.openNewTab"),
                         jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$6546b255bd3a2004), {}),
                         action: onOpenInNewTabClick
-                    }, 
+                    }
                 ]
             },
             {
@@ -3673,7 +3844,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                         title: t("quickConnect.title"),
                         jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$6470d09a29d34d08), {}),
                         action: onScanQuickConnectClick
-                    }, 
+                    }
                 ]
             },
             {
@@ -3684,9 +3855,9 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                         title: t("settings.title"),
                         jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$1095c93890fce526), {}),
                         action: onSettingsMenuClick
-                    }, 
+                    }
                 ]
-            }, 
+            }
         ];
         if ($f235befa4cdc42d6$var$browser.platform.type === "desktop" && $f235befa4cdc42d6$var$browser.engine.name === "Blink") computedCategories[2].items.unshift({
             id: "virtualBackground",
@@ -3710,7 +3881,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
         setIsQuickConnectPopupVisible,
         setBlockedFeaturePopupOpen,
         setIsSettingsMenuVisible,
-        setIsVirtualBackgroundPopupVisible, 
+        setIsVirtualBackgroundPopupVisible
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$1e86fd0e1db89578), {
         children: [
@@ -4867,7 +5038,7 @@ var $f260365f66cb6a6f$export$2e2bcd8739ae039 = $f260365f66cb6a6f$var$Reduce;
 
 
 
-const $57ab7b9a012d9acd$var$Cross = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+const $57ab7b9a012d9acd$var$Cross = ({ color: color = "#fff"  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -4875,7 +5046,7 @@ const $57ab7b9a012d9acd$var$Cross = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
             d: "m13.41 12 6.3-6.29a1.004 1.004 0 0 0-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 1 0-1.42 1.42l6.3 6.29-6.3 6.29a.999.999 0 0 0 0 1.42 1 1 0 0 0 1.42 0l6.29-6.3 6.29 6.3a1.001 1.001 0 0 0 1.639-.325 1 1 0 0 0-.22-1.095L13.41 12Z",
-            fill: "#fff"
+            fill: color
         })
     });
 var $57ab7b9a012d9acd$export$2e2bcd8739ae039 = $57ab7b9a012d9acd$var$Cross;
@@ -5224,7 +5395,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const videoElementRef = (0, $3Sbms$useRef)(null);
     const videoMediaProviderRef = (0, $3Sbms$useRef)(null);
     const SelfTileRef = (0, $3Sbms$useRef)(null);
-    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(videosContainerRef.current);
     const cursor = streaming && !extended ? "pointer" : "default";
@@ -5638,7 +5809,7 @@ const $f81bfa56534026c2$export$e9785ae652b3a722 = (item)=>{
                     {
                         ...item,
                         id: 0
-                    }, 
+                    }
                 ]);
                 localStorage.setItem(key, stringifiedHistory);
             }
@@ -5746,7 +5917,7 @@ const $5e2ac34f2c3f1b42$export$405a29439cf92237 = "youtube_pause";
 const $5e2ac34f2c3f1b42$export$649698d6e35b1ef3 = "youtube_stop";
 const $5e2ac34f2c3f1b42$var$YoutubeTile = (tile)=>{
     const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
-    const [player1, setPlayer] = (0, $3Sbms$useState)(null);
+    const [player, setPlayer] = (0, $3Sbms$useState)(null);
     const isSelf = tile.peerId === selfPeerId;
     const onVideoStateChange = (event)=>{
         const time = event.target.getCurrentTime();
@@ -5814,15 +5985,15 @@ const $5e2ac34f2c3f1b42$var$YoutubeTile = (tile)=>{
         isSelf
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        if (!isSelf && player1) {
+        if (!isSelf && player) {
             const onCustomMessage = (event)=>{
                 const { type: type , time: time  } = event.detail.event;
                 if (type === $5e2ac34f2c3f1b42$export$405a29439cf92237) {
-                    player1.pauseVideo();
-                    player1.seekTo(time, true);
+                    player.pauseVideo();
+                    player.seekTo(time, true);
                 } else if (type === $5e2ac34f2c3f1b42$export$1712c056f28ddd33) {
-                    player1.playVideo();
-                    player1.seekTo(time, true);
+                    player.playVideo();
+                    player.seekTo(time, true);
                 }
             };
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
@@ -5830,10 +6001,10 @@ const $5e2ac34f2c3f1b42$var$YoutubeTile = (tile)=>{
                 (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
             };
         }
-        if (isSelf && player1) {
+        if (isSelf && player) {
             const onNewPeer = (event)=>{
                 const { peerId: peerId  } = event.detail;
-                const time = player1.getCurrentTime();
+                const time = player.getCurrentTime();
                 (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessage(peerId, {
                     type: $5e2ac34f2c3f1b42$export$8bd7ff36223ef5c1,
                     videoId: tile.data.videoId,
@@ -5848,7 +6019,7 @@ const $5e2ac34f2c3f1b42$var$YoutubeTile = (tile)=>{
     }, [
         tile.data,
         isSelf,
-        player1
+        player
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $34a6fb3d684caabd$export$f4a8a05247f8d4c), {
         children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $34a6fb3d684caabd$export$b0da35797f3be127), {
@@ -6422,7 +6593,7 @@ var $b8963bf62cf5b984$export$2e2bcd8739ae039 = $b8963bf62cf5b984$var$tooltip;
 
 
 const $cdab47bb8796991e$var$Video = ()=>{
-    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , profile: profile1 , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , profile: profile , orientation: orientation , userInteractionTriggered: userInteractionTriggered  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const [tileSize, setTileSize] = (0, $3Sbms$useState)({
         width: 0,
         height: 0
@@ -6516,7 +6687,8 @@ const $cdab47bb8796991e$var$Video = ()=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
                     id: peer.peerId,
-                    profile: peer.profile
+                    profile: peer.profile,
+                    muted: peer.muted
                 }));
             dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_STREAMS,
@@ -6601,7 +6773,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
                         stream: {
                             id: String(selfPeerId),
                             muted: selfMuted,
-                            profile: profile1
+                            profile: profile
                         }
                     }),
                     streams.map((stream)=>{
@@ -6662,6 +6834,18 @@ const $58d405d56c1abe95$var$Rotate = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
             fill: "#F7F7F7"
         })
     });
+const $58d405d56c1abe95$export$aefffb14595958fe = ()=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "32",
+        height: "32",
+        fill: "none",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            fill: "#fff",
+            d: "M26.547 20.68h-6.04a1.333 1.333 0 1 0 0 2.666h3.2A10.667 10.667 0 0 1 5.334 16a1.333 1.333 0 0 0-2.667 0 13.333 13.333 0 0 0 22.507 9.64V28a1.333 1.333 0 1 0 2.666 0v-6a1.333 1.333 0 0 0-1.293-1.32ZM16 2.666A13.333 13.333 0 0 0 6.827 6.36V4A1.333 1.333 0 1 0 4.16 4v6a1.333 1.333 0 0 0 1.334 1.333h6a1.333 1.333 0 0 0 0-2.667h-3.2A10.667 10.667 0 0 1 26.667 16a1.333 1.333 0 1 0 2.667 0A13.333 13.333 0 0 0 16 2.666Z"
+        })
+    });
+};
 var $58d405d56c1abe95$export$2e2bcd8739ae039 = $58d405d56c1abe95$var$Rotate;
 
 
@@ -6845,7 +7029,7 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
     const highlightMenuRef = (0, $3Sbms$useRef)(null);
     const [isHighlightMenuOpen, setIsHighlightMenuOpen] = (0, $3Sbms$useState)(false);
-    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const isPresenting = Boolean(highlightedTile?.isGlobal && highlightedTile?.peerId === selfPeerId);
     (0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(highlightMenuRef, ()=>setIsHighlightMenuOpen(false));
@@ -6898,9 +7082,9 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
                     title: t("youtube.title"),
                     jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a2d206a438475087$export$2e2bcd8739ae039), {}),
                     action: onYoutubeClick
-                }, 
+                }
             ]
-        }, 
+        }
     ];
     if ($db92fac48417791a$var$isScreenshareSupported) menuCategories.push({
         id: "2",
@@ -6910,7 +7094,7 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
                 title: t("menu.screenSharing"),
                 jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ca024917df8f7bc$export$2e2bcd8739ae039), {}),
                 action: onScreenshareClick
-            }, 
+            }
         ]
     });
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
@@ -7055,9 +7239,9 @@ const $69a9c49ece80e773$var$ControlBar = ()=>{
                                             jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$e57aa6aff2e1f414), {}),
                                             action: terminateCall,
                                             danger: true
-                                        }, 
+                                        }
                                     ]
-                                }, 
+                                }
                             ]
                         })
                     }),
@@ -7238,7 +7422,7 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
     const themeContext = (0, $3Sbms$useContext)((0, $3Sbms$ThemeContext));
     const QuickConnectContainerRef = (0, $3Sbms$useRef)(null);
     const QuickConnectRef = (0, $3Sbms$useRef)(null);
-    const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     (0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(QuickConnectContainerRef, ()=>{
         if (isQuickConnectPopupVisible) setIsQuickConnectPopupVisible(false);
     });
@@ -9092,7 +9276,7 @@ const $d493afe60dcea711$var$backgroundOptions = [
         title: "Blurred",
         value: "blurred",
         id: "background-blurred"
-    }, 
+    }
 ];
 const $d493afe60dcea711$var$VirtualBackgroundPopup = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
@@ -9365,7 +9549,7 @@ const $e1c48a389d8ac959$export$8376625f8bb18347 = (0, $3Sbms$styledcomponents).d
 
 
 const $01986a58bfba8001$var$Settings = ()=>{
-    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isBlockedFeaturePopupOpen || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $e1c48a389d8ac959$export$8376625f8bb18347), {
         open: open,
@@ -10143,8 +10327,8 @@ const $15a01b611391c1e7$var$audioSource = new Blob([
         170,
         170,
         170,
-        170, 
-    ]), 
+        170
+    ])
 ], {
     type: "audio/mpeg"
 });
@@ -10245,117 +10429,1292 @@ const $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).d
 
 
 
-const $26ed036cbc17809a$var$currentTheme = (0, $52580db2e49cdd90$export$3bfd0d5209a8006a)();
-const $26ed036cbc17809a$var$currentLanguage = (0, $a3e657fb86ae23f3$export$604ba5624273df44)();
-let $26ed036cbc17809a$var$timestampCriticalError = -1;
-const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
-    const [selfPeerId, setSelfPeerId] = (0, $3Sbms$useState)(undefined);
-    const streamUIContainerRef = (0, $3Sbms$useRef)(null);
-    const videosContainerRef = (0, $3Sbms$useRef)(null);
-    const remoteTilesContainerRef = (0, $3Sbms$useRef)(null);
-    const [streamState, setStreamState] = (0, $3Sbms$useState)("streaming");
-    const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $3Sbms$useState)(false);
-    const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $3Sbms$useState)(false);
-    const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $3Sbms$useState)(false);
-    const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $3Sbms$useState)(false);
-    const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $3Sbms$useState)(false);
-    const [theme, setTheme] = (0, $3Sbms$useState)($26ed036cbc17809a$var$currentTheme);
-    const [language, setLanguage] = (0, $3Sbms$useState)(options.language || $26ed036cbc17809a$var$currentLanguage);
-    const [profile1, setProfile] = (0, $3Sbms$useState)({});
-    const [muted, setMuted] = (0, $3Sbms$useState)(true);
-    const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
-    const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
-    const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
-    const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
-    const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(streamUIContainerRef.current);
-    const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $3Sbms$useState)(false);
-    const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $3Sbms$useState)(false);
-    const [permissions, setPermissions] = (0, $3Sbms$useState)([]);
-    const [plan, setPlan] = (0, $3Sbms$useState)(undefined);
-    const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
-    const styledTheme = theme === "dark" ? (0, $52580db2e49cdd90$export$3e936a8db52a10a0) : (0, $52580db2e49cdd90$export$f30cb9bc4f736419);
-    const onWebcamUpdate = (event)=>{
-        if (event.type === "localVideoAvailable") setStreaming(true);
-        else setStreaming(false);
-    };
-    const onScreenshareUpdate = (event)=>{
-        if (event.type === "screenshareEnabled") setScreensharing(true);
-        else setScreensharing(false);
-    };
-    const onMicrophoneUpdate = (event)=>{
-        if (event.type === "microphoneMute") setMuted(true);
-        else setMuted(false);
-    };
-    const onDefaultAudioDeviceChange = (event)=>{
-        const micro = event.detail.label;
-        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${micro}`, {
-            duration: 3000,
-            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {}),
-            messageStyle: {
-                fontWeight: 600
-            }
-        });
-    };
-    const onSelfProfileUpdate = (event)=>{
-        const { profile: profile  } = event.detail;
-        setProfile(profile);
-    };
-    const onCallEnd = ()=>{
-        (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
-        setStreamState("ended");
-        setMuted(true);
-        setStreaming(false);
-        setScreensharing(false);
-        setUserInteractionTriggered(false);
-    };
-    const onCallTerminated = ()=>{
-        (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
-        setStreamState("terminated");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $5a48b7481979330f$export$61dc559f8a0b9bcf(ref) {
+    const innerRef = (0, $3Sbms$useRef)(null);
+    (0, $3Sbms$useEffect)(()=>{
+        if (!ref) return;
+        if (typeof ref === "function") ref(innerRef.current);
+        else ref.current = innerRef.current;
+    });
+    return innerRef;
+}
+const $5a48b7481979330f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwardRef)(function Button({ children: children , ...otherProps }, forwardedRef) {
+    const ref = $5a48b7481979330f$export$61dc559f8a0b9bcf(forwardedRef);
+    let state = (0, $3Sbms$useToggleState)(otherProps);
+    const { buttonProps: buttonProps  } = (0, $3Sbms$useToggleButton)(otherProps, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $3Sbms$useFocusRing)();
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("button", {
+        className: (0, $3Sbms$classnames)("w-[76px] h-[40px]", otherProps.isSelected ? "bg-[#FFFFFF]" : "bg-[#FFFFFF] opacity-[0.4]", "rounded-full", "text-black", "flex items-center justify-center gap-[5px]", "text-base font-medium", "transition-colors ease-in-out", "focus:outline-none", {
+            "ring-[3px] ring-cta": isFocusVisible,
+            "cursor-not-allowed": buttonProps.disabled
+        }),
+        ...buttonProps,
+        ...focusProps,
+        ref: ref,
+        children: children
+    });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $0590ee3141e14968$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $3Sbms$forwardRef)(function Button({ children: children , variant: variant = "primary" , size: size = "medium" , fullWidth: fullWidth = false , form: form , className: className , ...otherProps }, forwardedRef) {
+    const ref = (0, $5a48b7481979330f$export$61dc559f8a0b9bcf)(forwardedRef);
+    const { buttonProps: buttonProps , isPressed: isPressed  } = (0, $3Sbms$useButton)(otherProps, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $3Sbms$useFocusRing)();
+    const { hoverProps: hoverProps , isHovered: isHovered  } = (0, $3Sbms$useHover)({
+        isDisabled: buttonProps.disabled
+    });
+    const isActive = isHovered || isFocusVisible || isPressed;
+    const variantStyle = {
+        primary: (0, $3Sbms$classnames)(isActive ? "bg-primaryLight" : "bg-primary", "text-white disabled:bg-secondaryLight"),
+        secondary: (0, $3Sbms$classnames)(isActive ? "bg-graySelected" : "bg-transparent", "text-primary border border-secondaryLight disabled:text-secondaryLight disabled:bg-graySelected"),
+        basic: (0, $3Sbms$classnames)(isActive ? "bg-graySelected" : "bg-white", "text-primary disabled:text-secondaryLight disabled:bg-graySelected"),
+        custom: ""
     };
-    const onInvalidRoom = ()=>{
-        setStreamState("expired");
+    const sizeStyle = {
+        large: "py-3 px-4 text-base rounded-lg",
+        medium: "py-[9px] px-3.5 text-base rounded-lg",
+        small: "py-2 px-3 text-sm rounded-lg",
+        extraSmall: "py-1.5 px-2.5 text-xs rounded-md",
+        custom: ""
     };
-    const onAgentIdentity = (event)=>{
-        const { success: success , email: email  } = event.detail;
-        if (success) {
-            setIsAgent(true);
-            if (email) (0, $3Sbms$hotjarbrowser).identify(null, {
-                email: email
-            });
-        } else (0, $3Sbms$reacthottoast)("An error occured while trying to join the room as an agent", {
-            className: "error"
-        });
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("button", {
+        className: (0, $3Sbms$classnames)(sizeStyle[size], variantStyle[variant], "flex items-center justify-center gap-[5px] font-medium", "transition-colors ease-in-out", "focus:outline-none", {
+            "ring-[3px] ring-cta": isFocusVisible,
+            "cursor-not-allowed": buttonProps.disabled,
+            "w-full": fullWidth
+        }, className),
+        ...buttonProps,
+        ...focusProps,
+        ...hoverProps,
+        form: form,
+        ref: ref,
+        children: children
+    });
+});
+
+
+function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
+    const { children: children , state: state , size: size = "small" , title: title , description: description , primaryAction: primaryAction , secondaryAction: secondaryAction , centered: centered = false  } = props;
+    const ref = (0, $3Sbms$react).useRef(null);
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $3Sbms$useModalOverlay)({
+        isDismissable: true,
+        ...props
+    }, state, ref);
+    const [exited, setExited] = (0, $3Sbms$useState)(!state.isOpen);
+    const viewport = (0, $3Sbms$useViewportSize)();
+    const maxHeight = viewport.height - 64;
+    const modalSize = {
+        small: "max-w-[400px] mx-[20px]",
+        medium: "max-w-[600px]",
+        large: "max-w-[800px]"
     };
-    const onCriticalError = (event)=>{
-        const duration = 20000;
-        const now = Date.now();
-        if (event.detail.code === "USERLIMIT") {
-            setStreamState("full");
-            return;
-        }
-        if ($26ed036cbc17809a$var$timestampCriticalError !== -1 && $26ed036cbc17809a$var$timestampCriticalError + duration > now) return;
-        $26ed036cbc17809a$var$timestampCriticalError = now;
-        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`A critical error has occurred (error ${event.detail.code}).`, {
-            icon: (0, $93a0377c243d965e$export$c7df1b15b59b1df2),
-            button: {
-                text: "Reload",
-                action: ()=>{
-                    window.location.reload();
-                }
+    // Don't render anything if the modal is not open and we're not animating out.
+    if (!(state.isOpen || !exited)) return null;
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Overlay), {
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
+            in: state.isOpen,
+            appear: true,
+            onEntered: ()=>setExited(false),
+            onExited: ()=>setExited(true),
+            timeout: {
+                enter: 0,
+                exit: 300
             },
-            duration: duration
-        });
-    };
-    (0, $3Sbms$useEffect)(()=>{
-        try {
-            localStorage.setItem("stream_ui_theme", theme);
-        } catch (localStorageError) {
-            console.warn(localStorageError);
-        }
-    }, [
-        theme
-    ]);
-    (0, $3Sbms$useEffect)(()=>{
+            classNames: {
+                enter: "opacity-0",
+                enterDone: "opacity-1 transition ease-in",
+                exit: "opacity-0 transition ease-out"
+            },
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center",
+                ...underlayProps,
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
+                    in: state.isOpen,
+                    appear: true,
+                    nodeRef: ref,
+                    timeout: {
+                        enter: 0,
+                        exit: 300
+                    },
+                    classNames: {
+                        appear: "translate-y-2",
+                        appearDone: "translate-y-0 transition ease-in",
+                        exit: "translate-y-2 transition ease-out"
+                    },
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        ...modalProps,
+                        ref: ref,
+                        className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-auto focus:outline-none", modalSize[size]),
+                        style: {
+                            maxHeight: `${maxHeight}px`
+                        },
+                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "flex flex-col gap-5 px-5 py-[25px]",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                                    className: (0, $3Sbms$classnames)("flex flex-col gap-[5px]", {
+                                        "text-center": centered
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("h2", {
+                                            className: "text-xl font-medium",
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                                            className: "text-sm text-secondary",
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                children,
+                                (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                                    className: (0, $3Sbms$classnames)("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
+                                    children: [
+                                        typeof secondaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                                            variant: "secondary",
+                                            onPress: state.close,
+                                            fullWidth: centered,
+                                            children: secondaryAction
+                                        }),
+                                        typeof secondaryAction === "function" && secondaryAction({
+                                            close: state.close
+                                        }),
+                                        typeof primaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                                            onPress: state.close,
+                                            fullWidth: centered,
+                                            children: primaryAction
+                                        }),
+                                        typeof primaryAction === "function" && primaryAction({
+                                            close: state.close
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                })
+            })
+        })
+    });
+}
+
+
+
+
+const $444e1dd9fa8f6883$export$f9da3144ae2525a3 = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+        width: "20",
+        height: "21",
+        viewBox: "0 0 20 21",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            display: "inline"
+        },
+        transform: "translate(0 -1)",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M10 2.167a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
+                fill: "#1D1C20"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M6.76 5.65a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
+                fill: "#F12828"
+            })
+        ]
+    });
+const $444e1dd9fa8f6883$export$c6a849fd9d9d93a2 = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            display: "inline"
+        },
+        transform: "translate(0 -1)",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
+                fill: "#1D1C20"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M7.5 6.667h5a.833.833 0 0 1 .833.833v5a.833.833 0 0 1-.834.834h-5a.833.833 0 0 1-.833-.834v-5a.833.833 0 0 1 .833-.833Z",
+                fill: "#F12828"
+            })
+        ]
+    });
+const $444e1dd9fa8f6883$export$dce36e07153365d = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            display: "inline"
+        },
+        transform: "translate(0 -1)",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.666 6.666 0 1 1 0-13.333 6.666 6.666 0 0 1 0 13.333Z",
+                fill: "#1D1C20"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M6.76 5.15a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
+                fill: "#1D1C20"
+            })
+        ]
+    });
+
+
+
+
+
+const $f4e9ebfd4b02cf09$var$Text = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+        className: "w-full text-base text-primaryLight font-normal leading-[20px]",
+        children: children
+    });
+const $f4e9ebfd4b02cf09$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+        className: "text-primary font-medium",
+        children: children
+    });
+const $f4e9ebfd4b02cf09$var$InstructionRow = ({ children: children , index: index  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "flex flex-row justify-center gap-[5px]",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex items-center justify-center min-w-[24px] h-[24px] rounded-[50%] bg-secondaryVLight",
+                children: index
+            }),
+            children
+        ]
+    });
+const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type  })=>{
+    const [permissionsState, setPermissionsState] = (0, $3Sbms$useState)("idle");
+    const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const device = orientation === "landscape" ? "desktop" : "mobile";
+    const videoLength = permissionsState === "granted" ? "short" : "full";
+    const videoType = type === "picture" ? "photo" : "video";
+    const onDeviceEnabled = ()=>setPermissionsState("granted");
+    const ref = (0, $3Sbms$useRef)(null);
+    const title = (0, $3Sbms$useMemo)(()=>{
+        if (permissionsState === "refused") return "Something went wrong!";
+        if (type === "picture") return "Ready to take a shot?";
+        return "Ready to record a video?";
+    }, [
+        permissionsState,
+        type
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onDeviceEnabled);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onDeviceEnabled);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onDeviceEnabled);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onDeviceEnabled);
+        };
+    }, []);
+    const permissionsInstructionIndex = Number(permissionsState !== "granted");
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+        title: title,
+        state: state,
+        centered: permissionsState !== "refused",
+        isDismissable: false,
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+            className: "flex flex-col gap-[20px]",
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                    className: "flex flex-col gap-[10px]",
+                    ref: ref,
+                    children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Text, {
+                        children: "Without camera and microphone access, you can't take photos or videos to share with the support team. Please grant access in your browser settings."
+                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                        children: [
+                            permissionsState !== "granted" && /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                index: 1,
+                                children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                    children: [
+                                        "When prompted, ",
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                            children: "allow access"
+                                        }),
+                                        " to camera and microphone."
+                                    ]
+                                })
+                            }),
+                            type === "picture" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 1 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: [
+                                                "Tap the ",
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                    children: " Camera button"
+                                                }),
+                                                " to take a photo."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 2 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: "Don't hesitate to take multiple photos for more detail."
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 3 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: [
+                                                "You can review your photo and then ",
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                    children: "send it when you're done."
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            type === "video" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 1 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: [
+                                                "Tap the ",
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                    children: " Record button"
+                                                }),
+                                                " to start a recording."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 2 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: [
+                                                "You can ",
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                    children: "speak during"
+                                                }),
+                                                " the recording for added detail."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 3 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: [
+                                                "When you're finished, tap the ",
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                    children: " Stop button"
+                                                }),
+                                                "."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                        index: 4 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                            children: [
+                                                "You can review your video and then ",
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                    children: "send it when you're done"
+                                                }),
+                                                "."
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                permissionsState !== "refused" && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                    className: "flex items-center justify-center rounded-[8px] overflow-hidden",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+                        src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${videoType}-${videoLength}.mp4`,
+                        playsInline: true,
+                        autoPlay: true,
+                        muted: true,
+                        loop: true
+                    })
+                }),
+                permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                    onPress: ()=>window.location.reload(),
+                    children: "Allow access"
+                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
+                    children: permissionsState === "granted" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                        onPress: state.close,
+                        children: "Okay"
+                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                        isDisabled: permissionsState === "requesting",
+                        onPress: async ()=>{
+                            setPermissionsState("requesting");
+                            try {
+                                const mediaResult = await navigator.mediaDevices.getUserMedia({
+                                    audio: true,
+                                    video: true
+                                });
+                                mediaResult.getTracks().forEach((track)=>track.stop());
+                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
+                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
+                                    resolution: "vga",
+                                    frameRate: 20,
+                                    facingMode: "environment"
+                                });
+                            } catch  {
+                                setPermissionsState("refused");
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {}),
+                            "Allow access to cam/mic"
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+
+function $a94f21ef9007b90a$export$bd7b6af6aa16550c({ photo: photo = true  }) {
+    const [isPhoto, setPhoto] = (0, $3Sbms$useState)(photo);
+    const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
+    return {
+        photo: isPhoto,
+        setPhoto: setPhoto,
+        streaming: streaming,
+        setStreaming: setStreaming
+    };
+}
+const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
+    const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $3Sbms$useState)(props.state.photo);
+    const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $3Sbms$useState)(!props.state.photo);
+    const photoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
+        isOpen: isPhotoInstructionsModalOpen,
+        onOpenChange: setIsPhotoInstructionsModalOpen
+    });
+    const videoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
+        isOpen: isVideoInstructionsModalOpen,
+        onOpenChange: setIsVideoInstructionsModalOpen
+    });
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "flex flex-col bg-primary h-[150px] w-full max-w-[400px] rounded-[15px] p-2.5 gap-2.5",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f4e9ebfd4b02cf09$export$788cb893d96254c8), {
+                state: photoInstructionsModalState,
+                type: "picture"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f4e9ebfd4b02cf09$export$788cb893d96254c8), {
+                state: videoInstructionsModalState,
+                type: "video"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                className: "flex flex-1 flex-row px-[10px] w-full",
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                        className: "flex flex-row flex-auto items-center gap-[10px]",
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a1ac29d50bdaa837$export$3741e4ac43f04ca2), {}),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                className: " text-white text-base font-medium",
+                                children: "SnapCall"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                        className: "flex flex-row justify-end flex-auto items-center gap-[10px] ",
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
+                                onPress: ()=>{
+                                    if (!props.state.streaming) {
+                                        props.state.setPhoto(true);
+                                        photoInstructionsModalState.open();
+                                    }
+                                },
+                                isSelected: props.state.photo,
+                                children: "Photo"
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
+                                onPress: ()=>{
+                                    if (!props.state.streaming) {
+                                        props.state.setPhoto(false);
+                                        videoInstructionsModalState.open();
+                                    }
+                                },
+                                isSelected: !props.state.photo,
+                                children: "Video"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                className: "flex flex-row flex-1 items-center justify-between w-full ",
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        className: "w-[60px] h-[60px]",
+                        children: props.thumbnail
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        className: "bg-white rounded-full w-[72px] h-[72px] p-[3px]",
+                        onClick: ()=>props.onCapturePress(),
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                            className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                className: (0, $3Sbms$classnames)("w-full h-full transition-[transform,border-radius] duration-300", props.state.photo ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        onClick: props.onSwitch,
+                        className: "bg-[#565656] rounded-full w-[56px] h-[56px] flex items-center justify-center cursor-pointer",
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $58d405d56c1abe95$export$aefffb14595958fe), {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
+    const { children: children , state: state  } = props;
+    const ref = (0, $3Sbms$react).useRef(null);
+    const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $3Sbms$useModalOverlay)(props, state, ref);
+    const [exited, setExited] = (0, $3Sbms$useState)(!state.isOpen);
+    const viewport = (0, $3Sbms$useViewportSize)();
+    const maxHeight = viewport.height - 64;
+    const desktop = orientation === "landscape";
+    // Don't render anything if the modal is not open and we're not animating out.
+    if (!(state.isOpen || !exited)) return null;
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Overlay), {
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
+            in: state.isOpen,
+            appear: true,
+            onEntered: ()=>setExited(false),
+            onExited: ()=>setExited(true),
+            timeout: {
+                enter: 0,
+                exit: 300
+            },
+            classNames: {
+                enter: "opacity-0",
+                enterDone: "opacity-1 transition ease-in",
+                exit: "opacity-0 transition ease-out"
+            },
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: (0, $3Sbms$classnames)("fixed z-[100] inset-0 bg-underlay flex justify-center", desktop ? "items-center" : "items-end"),
+                ...underlayProps,
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
+                    in: state.isOpen,
+                    appear: true,
+                    nodeRef: ref,
+                    timeout: {
+                        enter: 0,
+                        exit: 300
+                    },
+                    classNames: {
+                        appear: desktop ? "translate-y-[200%]" : "translate-y-full",
+                        appearDone: "translate-y-0 transition duration-300 ease-out",
+                        exit: (0, $3Sbms$classnames)("transition ease-out", desktop ? "translate-y-[200%]" : "translate-y-full")
+                    },
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        ...modalProps,
+                        ref: ref,
+                        className: (0, $3Sbms$classnames)("bg-white z-[1] overflow-auto focus:outline-none", desktop ? "translate-y-[200%] rounded-[15px]" : "translate-y-full rounded-t-[15px]"),
+                        style: {
+                            maxHeight: `${maxHeight}px`
+                        },
+                        children: children
+                    })
+                })
+            })
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+const $4425c0dfad3f82bb$export$480db61f4dcd7727 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "12",
+        height: "15",
+        viewBox: "0 0 12 15",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M11.103 5.747 2.677.272A1.614 1.614 0 0 0 1.773 0a1.62 1.62 0 0 0-.9.288 1.886 1.886 0 0 0-.64.733A2.235 2.235 0 0 0 0 2.025v10.95c0 .352.08.699.233 1.004.154.305.375.558.64.733.273.186.584.285.9.288.317.003.63-.091.904-.272l8.426-5.475c.272-.173.498-.427.656-.736.158-.308.241-.66.241-1.017a2.24 2.24 0 0 0-.24-1.017 1.884 1.884 0 0 0-.657-.736Z",
+            fill: "#fff"
+        })
+    });
+
+
+const $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5 = ({ asset: asset , onClick: onClick  })=>{
+    if (!asset) return null;
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "flex items-center justify-center w-[60px] h-[60px] rounded-[8px] cursor-pointer bg-white relative overflow-hidden",
+        onClick: onClick,
+        children: [
+            asset?.type === "picture" && /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+                className: "cursor-pointer bg-white",
+                src: asset.objectUrl,
+                alt: "last shot"
+            }),
+            asset?.type === "video" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+                        src: asset.objectUrl,
+                        className: "min-w-[100%] min-h-[100%] object-cover"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        className: "absolute left-0 top-0 flex items-center justify-center w-[60px] h-[60px] bg-primary opacity-50",
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4425c0dfad3f82bb$export$480db61f4dcd7727), {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+
+
+
+const $a879d6bc7f43b0c5$export$28e1ba20e0688eb7 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "18",
+        height: "19",
+        viewBox: "0 0 18 19",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M7.5 14a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 .75.75ZM15 5h-3v-.75A2.25 2.25 0 0 0 9.75 2h-1.5A2.25 2.25 0 0 0 6 4.25V5H3a.75.75 0 0 0 0 1.5h.75v8.25A2.25 2.25 0 0 0 6 17h6a2.25 2.25 0 0 0 2.25-2.25V6.5H15A.75.75 0 1 0 15 5Zm-7.5-.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75V5h-3v-.75Zm5.25 10.5a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V6.5h7.5v8.25ZM10.5 14a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 1 0-1.5 0v4.5a.75.75 0 0 0 .75.75Z",
+            fill: "#fff"
+        })
+    });
+
+
+const $77fb06ba253d6f7c$var$dateFormat = new Intl.DateTimeFormat("default", {
+    dateStyle: "short"
+});
+const $77fb06ba253d6f7c$var$timeFormat = new Intl.DateTimeFormat("default", {
+    hour: "numeric",
+    minute: "2-digit"
+});
+function $77fb06ba253d6f7c$var$formatDate(date) {
+    const ampm = date.getHours() % 12 >= 12 ? "PM" : "AM";
+    return `${$77fb06ba253d6f7c$var$dateFormat.format(date)} at ${$77fb06ba253d6f7c$var$timeFormat.format(date)} ${ampm}`;
+}
+const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset  })=>{
+    const confirmRemovalModalState = (0, $3Sbms$useOverlayTriggerState)({});
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "flex flex-row justify-between items-center",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+                title: "Confirm removal",
+                state: confirmRemovalModalState,
+                description: "Are you sure you want to remove this photo/video? This action cannot be undone.",
+                primaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                        onPress: async ()=>{
+                            await removeAsset(asset);
+                            close();
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a879d6bc7f43b0c5$export$28e1ba20e0688eb7), {}),
+                            "Confirm"
+                        ]
+                    }),
+                secondaryAction: "Cancel"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                className: "flex flex-row gap-[10px] items-center",
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
+                        asset: asset
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                        className: "text-sm",
+                        style: {
+                            hyphens: "manual"
+                        },
+                        children: [
+                            asset.type === "picture" ? "Photo" : "Video",
+                            " ",
+                            index + 1,
+                            " \xb7",
+                            " ",
+                            $77fb06ba253d6f7c$var$formatDate(new Date(asset.timestamp))
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                className: "text-xs font-bold underline cursor-pointer ml-[10px]",
+                onClick: confirmRemovalModalState.open,
+                children: "Remove"
+            })
+        ]
+    }, asset.assetId);
+};
+
+
+
+
+const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "w-screen max-w-[400px] h-[235px] px-[20px] py-[25px] gap-[10px]",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "w-[360px] h-[93px]",
+                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$reactcontentloader), {
+                    width: 360,
+                    height: 93,
+                    foregroundColor: "#EBEBEB",
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
+                            x: 0,
+                            y: 0,
+                            rx: 8,
+                            ry: 8,
+                            width: 230,
+                            height: 16
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
+                            x: 0,
+                            y: 33,
+                            rx: 8,
+                            ry: 8,
+                            width: 60,
+                            height: 60
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
+                            x: 70,
+                            y: 56,
+                            rx: 7,
+                            ry: 7,
+                            width: 180,
+                            height: 14
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] border border-primaryLight mt-[10px]",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$reactcontentloader), {
+                    width: 120,
+                    height: 14,
+                    foregroundColor: "#EBEBEB",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
+                        x: 0,
+                        y: 0,
+                        rx: 7,
+                        ry: 7,
+                        width: 120,
+                        height: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] bg-primary mt-[10px]",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$reactcontentloader), {
+                    width: 120,
+                    height: 14,
+                    foregroundColor: "#EBEBEB",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
+                        x: 0,
+                        y: 0,
+                        rx: 7,
+                        ry: 7,
+                        width: 120,
+                        height: 14
+                    })
+                })
+            })
+        ]
+    });
+
+
+const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading  })=>{
+    const ref = (0, $3Sbms$useRef)(null);
+    const [assetKind, setAssetKind] = (0, $3Sbms$useState)(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
+    const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const desktop = orientation === "landscape";
+    (0, $3Sbms$useEffect)(()=>{
+        if (assets.length < 1) return;
+        setAssetKind(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
+    }, [
+        assets
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
+                in: state.isOpen,
+                appear: true,
+                timeout: {
+                    enter: 0,
+                    exit: 300
+                },
+                classNames: {
+                    enter: "opacity-0",
+                    enterDone: "opacity-90 transition ease-in",
+                    exit: "opacity-0 transition ease-out"
+                },
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                    className: (0, $3Sbms$classnames)("fixed justify-center w-screen h-screen top-0 left-0 bg-black z-[1]", state.isOpen ? "flex" : "hidden"),
+                    children: loading && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                        className: (0, $3Sbms$classnames)("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[400px]" : "flex-col items-center text-center w-[320px]"),
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                className: "w-[24px] h-[24px] m-[10px]",
+                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8b7bd174d29d9a1f$export$2e2bcd8739ae039), {})
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                                className: "text-sm text-white",
+                                children: [
+                                    "Please wait a moment while your ",
+                                    loading,
+                                    " is being processed...",
+                                    loading === "video" ? " It may take up to 15 seconds for a video to be ready." : ""
+                                ]
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $38cdd553fb158eaa$export$4589ed81930b555c), {
+                state: {
+                    ...state,
+                    close: loading ? ()=>{} : state.close
+                },
+                children: loading ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7436fc0a14c16764$export$4fa52f68b1c78fbf), {}) : /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    ref: ref,
+                    className: "flex flex-col w-screen max-w-[400px] text-primary",
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "flex flex-row justify-between p-[12px]",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsxs)("h1", {
+                                    className: "text-lg first-letter:capitalize",
+                                    children: [
+                                        assetKind,
+                                        " successfully captured"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                    className: "flex justify-center items-center rounded-full bg-[#f3f3f3] h-[30px] w-[30px] cursor-pointer",
+                                    onClick: state.close,
+                                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {
+                                        color: "#565656"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "flex flex-col px-[20px] pb-[25px] gap-[10px]",
+                            children: [
+                                assets.map((asset, index)=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $77fb06ba253d6f7c$export$c9169049516d8bcf), {
+                                        asset: asset,
+                                        index: index,
+                                        removeAsset: removeAsset
+                                    }, asset.assetId)),
+                                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                                    variant: "secondary",
+                                    onPress: state.close,
+                                    children: [
+                                        "Take new ",
+                                        assetKind
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                                    onPress: ()=>{
+                                        onSendAssets();
+                                        state.close();
+                                    },
+                                    children: [
+                                        "Send ",
+                                        assets.length > 1 ? `${assets.length} elements` : assetKind
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+
+
+
+
+
+
+const $db82628e5503d51b$export$53819c0e58f98d49 = (props)=>{
+    const [countdown, setCountdown] = (0, $3Sbms$useState)(props.initialValue);
+    (0, $3Sbms$useEffect)(()=>{
+        if (countdown === undefined) return;
+        const t = setTimeout(()=>{
+            if (countdown === 1) props.onFinish();
+            setCountdown(countdown - 1);
+        }, 1000);
+        return ()=>clearTimeout(t);
+    }, [
+        countdown,
+        props
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+        children: countdown
+    });
+};
+
+
+const $92672d57809ea9d3$var$timerText = (delta)=>{
+    const d = [
+        Math.floor(delta / 60),
+        Math.round(delta % 60)
+    ].map((n)=>`${n < 10 ? "0" : ""}${n}`);
+    return d.join(":");
+};
+const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
+    const [startRecordTime, setStartRecordTime] = (0, $3Sbms$useState)(undefined);
+    const [timer, setTimer] = (0, $3Sbms$useState)(0);
+    const [countdownVisible, setCountdownVisible] = (0, $3Sbms$useState)(false);
+    const videoElementRef = (0, $3Sbms$useRef)(null);
+    const [assets, setAssets] = (0, $3Sbms$useState)([]);
+    const [assetLoading, setAssetLoading] = (0, $3Sbms$useState)(null);
+    const [isAssetsPopupStateOpen, setIsAssetsPopupStateOpen] = (0, $3Sbms$useState)(false);
+    const assetsPopupState = (0, $3Sbms$useOverlayTriggerState)({
+        isOpen: isAssetsPopupStateOpen,
+        onOpenChange: setIsAssetsPopupStateOpen
+    });
+    const sendAssetsModalState = (0, $3Sbms$useOverlayTriggerState)({});
+    const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
+    const menuBarState = (0, $a94f21ef9007b90a$export$bd7b6af6aa16550c)({});
+    const exitStreaming = (0, $3Sbms$useCallback)(()=>{
+        menuBarState.setStreaming(false);
+        setStartRecordTime(undefined);
+        setCountdownVisible(false);
+        setTimer(0);
+    }, [
+        menuBarState
+    ]);
+    const onLocalVideoChange = (event)=>{
+        if (!event.detail?.camera?.device || !videoElementRef.current) return;
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
+    };
+    const onStopRecord = (0, $3Sbms$useCallback)((event)=>{
+        const { url: url , assetId: assetId  } = event.detail;
+        exitStreaming();
+        setAssetLoading(null);
+        setAssets([
+            ...assets,
+            {
+                type: "video",
+                timestamp: Date.now(),
+                objectUrl: url,
+                assetId: assetId
+            }
+        ]);
+    }, [
+        assets,
+        exitStreaming
+    ]);
+    const onPhotoCapture = async (videoElement)=>{
+        const timestamp = Date.now();
+        setAssetLoading("picture");
+        const image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElement);
+        const { url: url , assetId: assetId  } = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(image);
+        setAssetLoading(null);
+        setAssets([
+            ...assets,
+            {
+                type: "picture",
+                timestamp: timestamp,
+                objectUrl: url,
+                assetId: assetId
+            }
+        ]);
+    };
+    const removeAsset = (0, $3Sbms$useCallback)(async (asset)=>{
+        if (!asset.assetId) return;
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).deleteCapture(asset.assetId);
+        const newAssets = assets.filter((item)=>item.assetId !== asset.assetId);
+        setAssets(newAssets);
+        if (newAssets.length < 1) setIsAssetsPopupStateOpen(false);
+    }, [
+        assets
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        if (startRecordTime === undefined) return;
+        const interval = setInterval(()=>{
+            const delta = (Date.now() - startRecordTime) / 1000;
+            setTimer(delta);
+        }, 1000);
+        return ()=>clearInterval(interval);
+    }, [
+        startRecordTime
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("recordStopped", onStopRecord);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
+        };
+    }, [
+        onStopRecord
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased",
+        children: [
+            !menuBarState.photo && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "text-base text-white text-center font-medium pt-2.5",
+                children: $92672d57809ea9d3$var$timerText(timer)
+            }),
+            countdownVisible && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "absolute z-50 top-0 bottom-[160px] left-0 right-0 text-[100px] flex items-center justify-center text-center text-white bg-[#000000] opacity-[0.6] ",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $db82628e5503d51b$export$53819c0e58f98d49), {
+                    initialValue: 3,
+                    onFinish: ()=>{
+                        setCountdownVisible(false);
+                        setStartRecordTime(Date.now());
+                        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord();
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                className: "relative flex-1 min-h-0 px-2.5 pt-2.5",
+                children: [
+                    flashAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
+                        onAnimationEnd: ()=>{
+                            setFlashAnimation(false);
+                            assetsPopupState.open();
+                        }
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+                        autoPlay: true,
+                        muted: true,
+                        playsInline: true,
+                        ref: videoElementRef,
+                        className: "w-full h-full object-cover rounded-[10px]"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex justify-center p-2.5",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a94f21ef9007b90a$export$11a6fe490bbc4873), {
+                    state: menuBarState,
+                    thumbnail: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
+                        asset: assets[assets.length - 1],
+                        onClick: assetsPopupState.open
+                    }),
+                    onSwitch: ()=>{
+                        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).rotateVideo();
+                    },
+                    onCapturePress: ()=>{
+                        if (menuBarState.photo && videoElementRef.current) {
+                            onPhotoCapture(videoElementRef.current);
+                            setFlashAnimation(true);
+                            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
+                        }
+                        if (!menuBarState.photo && !menuBarState.streaming) {
+                            menuBarState.setStreaming(true);
+                            setTimer(0);
+                            setCountdownVisible(true);
+                        }
+                        if (!menuBarState.photo && menuBarState.streaming) {
+                            exitStreaming();
+                            if (startRecordTime) {
+                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopRecord();
+                                setAssetLoading("video");
+                                assetsPopupState.open();
+                            }
+                        }
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d4d374dc7955cc18$export$5c334f209b1aa661), {
+                assets: assets,
+                state: assetsPopupState,
+                onSendAssets: sendAssetsModalState.open,
+                removeAsset: removeAsset,
+                loading: assetLoading
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+                title: "Thank you for your submission!",
+                state: sendAssetsModalState,
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                    className: "text-base text-primaryLight",
+                    children: "Your photo/video has been successfully sent. We will review it and get back to you soon."
+                })
+            })
+        ]
+    });
+};
+
+
+const $26ed036cbc17809a$var$currentTheme = (0, $52580db2e49cdd90$export$3bfd0d5209a8006a)();
+const $26ed036cbc17809a$var$currentLanguage = (0, $a3e657fb86ae23f3$export$604ba5624273df44)();
+let $26ed036cbc17809a$var$timestampCriticalError = -1;
+const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
+    const [selfPeerId, setSelfPeerId] = (0, $3Sbms$useState)(undefined);
+    const streamUIContainerRef = (0, $3Sbms$useRef)(null);
+    const videosContainerRef = (0, $3Sbms$useRef)(null);
+    const remoteTilesContainerRef = (0, $3Sbms$useRef)(null);
+    const [streamState, setStreamState] = (0, $3Sbms$useState)(options.recorder ? "recorder" : "streaming");
+    const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $3Sbms$useState)(false);
+    const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $3Sbms$useState)(false);
+    const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $3Sbms$useState)(false);
+    const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $3Sbms$useState)(false);
+    const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $3Sbms$useState)(false);
+    const [theme, setTheme] = (0, $3Sbms$useState)($26ed036cbc17809a$var$currentTheme);
+    const [language, setLanguage] = (0, $3Sbms$useState)(options.language || $26ed036cbc17809a$var$currentLanguage);
+    const [profile, setProfile] = (0, $3Sbms$useState)({});
+    const [muted, setMuted] = (0, $3Sbms$useState)(true);
+    const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
+    const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
+    const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
+    const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
+    const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(streamUIContainerRef.current);
+    const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $3Sbms$useState)(false);
+    const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $3Sbms$useState)(false);
+    const [permissions, setPermissions] = (0, $3Sbms$useState)([]);
+    const [plan, setPlan] = (0, $3Sbms$useState)(undefined);
+    const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
+    const styledTheme = theme === "dark" ? (0, $52580db2e49cdd90$export$3e936a8db52a10a0) : (0, $52580db2e49cdd90$export$f30cb9bc4f736419);
+    const onWebcamUpdate = (event)=>{
+        if (event.type === "localVideoAvailable") setStreaming(true);
+        else setStreaming(false);
+    };
+    const onScreenshareUpdate = (event)=>{
+        if (event.type === "screenshareEnabled") setScreensharing(true);
+        else setScreensharing(false);
+    };
+    const onMicrophoneUpdate = (event)=>{
+        if (event.type === "microphoneMute") setMuted(true);
+        else setMuted(false);
+    };
+    const onDefaultAudioDeviceChange = (event)=>{
+        const micro = event.detail.label;
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${micro}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
+    };
+    const onSelfProfileUpdate = (event)=>{
+        const { profile: profile  } = event.detail;
+        setProfile(profile);
+    };
+    const onCallEnd = ()=>{
+        (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
+        setStreamState("ended");
+        setMuted(true);
+        setStreaming(false);
+        setScreensharing(false);
+        setUserInteractionTriggered(false);
+    };
+    const onCallTerminated = ()=>{
+        (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
+        setStreamState("terminated");
+    };
+    const onInvalidRoom = ()=>{
+        setStreamState("expired");
+    };
+    const onAgentIdentity = (event)=>{
+        const { success: success , email: email  } = event.detail;
+        if (success) {
+            setIsAgent(true);
+            if (email) (0, $3Sbms$hotjarbrowser).identify(null, {
+                email: email
+            });
+        } else (0, $3Sbms$reacthottoast)("An error occured while trying to join the room as an agent", {
+            className: "error"
+        });
+    };
+    const onCriticalError = (event)=>{
+        const duration = 20000;
+        const now = Date.now();
+        if (event.detail.code === "USERLIMIT") {
+            setStreamState("full");
+            return;
+        }
+        if ($26ed036cbc17809a$var$timestampCriticalError !== -1 && $26ed036cbc17809a$var$timestampCriticalError + duration > now) return;
+        $26ed036cbc17809a$var$timestampCriticalError = now;
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`A critical error has occurred (error ${event.detail.code}).`, {
+            icon: (0, $93a0377c243d965e$export$c7df1b15b59b1df2),
+            button: {
+                text: "Reload",
+                action: ()=>{
+                    window.location.reload();
+                }
+            },
+            duration: duration
+        });
+    };
+    (0, $3Sbms$useEffect)(()=>{
+        try {
+            localStorage.setItem("stream_ui_theme", theme);
+        } catch (localStorageError) {
+            console.warn(localStorageError);
+        }
+    }, [
+        theme
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
         try {
             localStorage.setItem("stream_ui_language", language);
             (0, $384d985bb9605c35$export$2e2bcd8739ae039).changeLanguage(language);
@@ -10404,7 +11763,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             setPermissions(event.detail.permissions);
             console.log(event.detail.permissions);
             setSelfPeerId(peerId);
-            try {
+            if (!options.recorder) try {
                 await (0, $15a01b611391c1e7$export$494039379563c94d)(options);
                 setUserInteractionTriggered(true);
             } catch (userInteractionError) {
@@ -10446,7 +11805,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             language: language,
             setLanguage: setLanguage,
             options: options,
-            profile: profile1,
+            profile: profile,
             muted: muted,
             streaming: streaming,
             screensharing: screensharing,
@@ -10470,6 +11829,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
                                 setBlockedDevicesPopupOpen(false);
                             }
                         }),
+                        streamState === "recorder" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $92672d57809ea9d3$export$336a011955157f9a), {}),
                         streamState === "streaming" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
                             children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $cce9fd41d8a55a18$export$74636703cfe1eecf), {
                                 children: [
@@ -10741,14 +12101,14 @@ const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
     const [mainContainerRef, { width: width , height: height  }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();
     const inputRef = (0, $3Sbms$useRef)(null);
     const videoRef = (0, $3Sbms$useRef)(null);
-    const [videoTrack1, setVideoTrack] = (0, $3Sbms$useState)(undefined);
+    const [videoTrack, setVideoTrack] = (0, $3Sbms$useState)(undefined);
     const [micEnabled, setMicEnabled] = (0, $3Sbms$useState)(false);
     const [joining, setJoining] = (0, $3Sbms$useState)(false);
     const desktop = width >= height;
     const onSubmit = ()=>{
         const displayName = inputRef.current?.value;
-        const cameraEnabled = Boolean(videoTrack1);
-        videoTrack1?.stop();
+        const cameraEnabled = Boolean(videoTrack);
+        videoTrack?.stop();
         setJoining(true);
         setTimeout(()=>{
             onGreetingDone({
@@ -10771,15 +12131,15 @@ const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
         }
     };
     const onCameraClick = (0, $3Sbms$useCallback)(async ()=>{
-        if (!videoTrack1) await getUserMedia({
+        if (!videoTrack) await getUserMedia({
             video: true
         });
         else {
-            videoTrack1.stop();
+            videoTrack.stop();
             setVideoTrack(undefined);
         }
     }, [
-        videoTrack1
+        videoTrack
     ]);
     const onMicrophoneClick = (0, $3Sbms$useCallback)(async ()=>{
         if (!micEnabled) await getUserMedia({
@@ -10791,14 +12151,14 @@ const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
     ]);
     (0, $3Sbms$useEffect)(()=>{
         if (videoRef.current) {
-            if (videoTrack1) videoRef.current.srcObject = new MediaStream([
-                videoTrack1
+            if (videoTrack) videoRef.current.srcObject = new MediaStream([
+                videoTrack
             ]);
             else videoRef.current.srcObject = null;
         }
     }, [
         videoRef,
-        videoTrack1,
+        videoTrack,
         width,
         height
     ]);
@@ -10815,7 +12175,7 @@ const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
             height: 40
         })
     });
-    const webcamEnabled = Boolean(videoTrack1);
+    const webcamEnabled = Boolean(videoTrack);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$d653589df987fd93), {
         ref: mainContainerRef,
         children: [
@@ -10914,10 +12274,15 @@ const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
 var $f8d57e3d223f5089$export$2e2bcd8739ae039 = $f8d57e3d223f5089$var$GreetingView;
 
 
+var $1e2747ca72d0ab49$exports = {};
+$1e2747ca72d0ab49$exports = "*, :before, :after {\n  box-sizing: border-box;\n  border: 0 solid #e5e7eb;\n}\n\n:before, :after {\n  --tw-content: \"\";\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  tab-size: 4;\n  font-feature-settings: normal;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.5;\n}\n\nbody {\n  line-height: inherit;\n  margin: 0;\n}\n\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\nb, strong {\n  font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 1em;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nsup {\n  top: -.5em;\n}\n\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\nbutton, input, optgroup, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\n  -webkit-appearance: button;\n  background-color: #0000;\n  background-image: none;\n}\n\n:-moz-focusring {\n  outline: auto;\n}\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\nsummary {\n  display: list-item;\n}\n\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol, ul, menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::placeholder, textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\n\n:disabled {\n  cursor: default;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n  vertical-align: middle;\n  display: block;\n}\n\nimg, video {\n  max-width: 100%;\n  height: auto;\n}\n\n[hidden] {\n  display: none;\n}\n\n*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #3b82f680;\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.bottom-\\[160px\\] {\n  bottom: 160px;\n}\n\n.left-0 {\n  left: 0;\n}\n\n.right-0 {\n  right: 0;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.m-\\[10px\\] {\n  margin: 10px;\n}\n\n.mx-\\[20px\\] {\n  margin-left: 20px;\n  margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n  margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n  margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n  margin-top: 50px;\n}\n\n.block {\n  display: block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-\\[60px\\] {\n  height: 60px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-\\[235px\\] {\n  height: 235px;\n}\n\n.h-\\[93px\\] {\n  height: 93px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n  min-height: 100%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[400px\\] {\n  width: 400px;\n}\n\n.w-\\[320px\\] {\n  width: 320px;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[30px\\] {\n  width: 30px;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n  max-width: 800px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-auto {\n  flex: auto;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.translate-y-2 {\n  --tw-translate-y: .5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n  --tw-translate-y: 200%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n  --tw-scale-x: .4;\n  --tw-scale-y: .4;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-\\[5px\\] {\n  gap: 5px;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.rounded-lg {\n  border-radius: .5rem;\n}\n\n.rounded-md {\n  border-radius: .375rem;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[15px\\] {\n  border-radius: 15px;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n  border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n  border-radius: 60px;\n}\n\n.rounded-\\[10px\\] {\n  border-radius: 10px;\n}\n\n.rounded-t-\\[15px\\] {\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-secondaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-primaryLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#f12828\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#565656\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-black, .bg-\\[\\#000\\], .bg-\\[\\#000000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n  background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n  --tw-bg-opacity: .9;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-\\[3px\\] {\n  padding: 3px;\n}\n\n.p-\\[12px\\] {\n  padding: 12px;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n  padding-top: 9px;\n  padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n  padding-left: .875rem;\n  padding-right: .875rem;\n}\n\n.px-3 {\n  padding-left: .75rem;\n  padding-right: .75rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n  padding-top: 25px;\n  padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n.pt-2\\.5 {\n  padding-top: .625rem;\n}\n\n.pt-2 {\n  padding-top: .5rem;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-base {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 19px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 17px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.text-\\[100px\\] {\n  font-size: 100px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n  --tw-text-opacity: 1;\n  color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n  text-decoration-line: underline;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-\\[0\\.6\\] {\n  opacity: .6;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n  opacity: .4;\n}\n\n.opacity-90 {\n  opacity: .9;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n  transition-property: transform, border-radius;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n  transition-duration: .3s;\n}\n\n.ease-in-out {\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.ease-in {\n  transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.first-letter\\:capitalize:first-letter {\n  text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n";
+
+
 const $24075a5d702d64b3$var$currentURL = new URL(window.location.href);
 const $24075a5d702d64b3$var$microphoneEnabled = $24075a5d702d64b3$var$currentURL.searchParams.get("microphone-enabled") !== "0";
 const $24075a5d702d64b3$var$cameraEnabled = $24075a5d702d64b3$var$currentURL.searchParams.get("camera-enabled") === "1";
 const $24075a5d702d64b3$var$defaultOptions = {
+    recorder: false,
     sharedURL: window.location.href,
     showMenuButton: true,
     settingsShortcuts: [
@@ -10946,15 +12311,26 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $365e765f9890497b$export$6969335ea1e4e77c)($24075a5d702d64b3$var$defaultOptions, options);
-        (0, $3Sbms$render)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
-            options: mergedOptions
-        }), element);
+        const rootElement = (0, $3Sbms$createRoot)(element);
+        let styleElement = null;
+        styleElement = /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
+            children: (0, (/*@__PURE__*/$parcel$interopDefault($1e2747ca72d0ab49$exports)))
+        });
+        rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+            children: [
+                styleElement,
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
+                    options: mergedOptions
+                })
+            ]
+        }));
         if (mergedOptions.tracking) (0, $3Sbms$hotjarbrowser).init(3111933, 6);
     },
     initGreeting: (element, onGreetingDone)=>{
-        (0, $3Sbms$render)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
+        const rootElement = (0, $3Sbms$createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
             onGreetingDone: onGreetingDone
-        }), element);
+        }));
     },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {
@@ -10964,12 +12340,15 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
         });
         window.dispatchEvent(event);
     },
+    startRecord: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    stopRecord: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopRecord.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     sendNotification: $a5146f9062d7bf28$export$3a57e165650c636f,
     joinRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).init.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     leaveRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).endCall.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     terminateRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).terminateRoom.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     generateToken: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).generateToken.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     addEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    removeEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     dispatchEvent: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     getState: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     setProfile: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setProfile.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),