@snapcall/stream-ui 1.11.1 → 1.11.3

package/dist/stream-ui.esm.js

@@ -1110,6 +1110,16 @@ const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src)=>{
 
 
 const $a2f0e3c29b11c88e$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("StreamerMediasoup");
+const $a2f0e3c29b11c88e$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
+    {
+        dtx: true,
+        maxBitrate: 1500000
+    },
+    {
+        dtx: true,
+        maxBitrate: 6000000
+    }
+];
 function $a2f0e3c29b11c88e$var$deviceAutoDetection() {
     try {
         const ua = navigator.userAgent;
@@ -1226,6 +1236,30 @@ class $a2f0e3c29b11c88e$export$2e2bcd8739ae039 {
         if (direction === "send") return await this.createSendTransport(server);
         else return await this.createRecvTransport(server);
     }
+    async produceAudio(transport, track, appData) {
+        const producer = await transport.produce({
+            track: track,
+            codecOptions: {
+                opusStereo: true,
+                opusDtx: true
+            },
+            appData: appData
+        });
+        return producer;
+    }
+    async produceVideo(transport, track, appData) {
+        const encodings = undefined;
+        const codecOptions = {
+            videoGoogleStartBitrate: 1000
+        };
+        const producer = await transport.produce({
+            track: track,
+            encodings: encodings,
+            codecOptions: codecOptions,
+            appData: appData
+        });
+        return producer;
+    }
 }
 
 
@@ -1432,16 +1466,6 @@ const $c31e3fb4360572af$var$WEBCAM_SIMULCAST_ENCODINGS = [
         maxBitrate: 5000000
     }
 ];
-const $c31e3fb4360572af$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
-    {
-        dtx: true,
-        maxBitrate: 1500000
-    },
-    {
-        dtx: true,
-        maxBitrate: 6000000
-    }
-];
 class $c31e3fb4360572af$var$SnapcallEvent extends CustomEvent {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(name, data){
@@ -1498,7 +1522,6 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.roomId = "";
         this.peerId = "";
         this.webcamProducer = null;
-        this.screenshareProducer = null;
         this.customMessages = new Map();
         this.audioRenderers = {};
         this.profile = {};
@@ -1960,7 +1983,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             detail: {}
         });
         this.dispatchEvent(event);
-        await this.protoo.request("closeProducer", {
+        if (this.protoo.connected) await this.protoo.request("closeProducer", {
             producerId: producerId
         });
     }
@@ -2103,7 +2126,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.protooTransport.close();
         this.protoo.close();
         this.micProducer?.close();
-        this.screenshareProducer?.close();
+        this.screenshareVideoProducer?.close();
         this.webcamProducer?.close();
         this.consumers.forEach((consumer)=>{
             consumer.mediaSoupConsumer.close();
@@ -2205,7 +2228,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.consumers.forEach((consumer)=>{
                 if (consumer.mediaSoupConsumer.kind === "video") videoCount++;
             });
-            if (this.screenshareProducer && !this.screenshareProducer.closed) videoCount++;
+            if (this.screenshareVideoProducer && !this.screenshareVideoProducer.closed) videoCount++;
             let scale = {
                 scaleResolutionDownBy: 1
             };
@@ -2437,7 +2460,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     async disableVideo() {
         if (!this.webcamProducer) return;
         this.webcamProducer.close();
-        await this.protoo.request("closeProducer", {
+        if (this.protoo.connected) await this.protoo.request("closeProducer", {
             producerId: this.webcamProducer.id
         });
         this.webcamProducer = null;
@@ -2449,7 +2472,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     async enableScreenshare() {
         if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
         const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
-            audio: false,
+            audio: true,
             video: {
                 displaySurface: "monitor",
                 logicalSurface: true,
@@ -2465,26 +2488,28 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             }
         }));
         if (!stream) return;
-        const transport = await this.getTransport("video", "send");
-        const track = stream.getVideoTracks()[0];
-        const encodings = undefined;
-        const codecOptions = {
-            videoGoogleStartBitrate: 1000
-        };
-        let deviceType = "screen";
-        this.screenshareProducer = await transport.produce({
-            track: track,
-            encodings: encodings,
-            codecOptions: codecOptions,
-            appData: {
+        const deviceType = "screen";
+        const audioTransport = await this.getTransport("audio", "send");
+        const audioTrack = stream.getAudioTracks()[0];
+        if (audioTrack) {
+            this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
                 deviceType: deviceType,
                 share: true
-            }
+            });
+            this.screenshareVideoProducer?.on("transportclose", ()=>{
+                this.screenshareVideoProducer = undefined;
+            });
+        }
+        const track = stream.getVideoTracks()[0];
+        const videoTransport = await this.getTransport("video", "send");
+        this.screenshareVideoProducer = await this.streamerMediasoup?.produceVideo(videoTransport, track, {
+            deviceType: deviceType,
+            share: true
         });
-        this.screenshareProducer.on("transportclose", ()=>{
-            this.screenshareProducer = null;
+        this.screenshareVideoProducer?.on("transportclose", ()=>{
+            this.screenshareVideoProducer = undefined;
         });
-        this.screenshareProducer.on("trackended", ()=>{
+        this.screenshareVideoProducer?.on("trackended", ()=>{
             this.disableScreenshare().catch(()=>{});
         });
         const event = new $c31e3fb4360572af$var$SnapcallEvent("screenshareEnabled", {
@@ -2493,12 +2518,19 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.dispatchEvent(event);
     }
     async disableScreenshare() {
-        if (this.screenshareProducer) {
-            this.screenshareProducer.close();
-            await this.protoo.request("closeProducer", {
-                producerId: this.screenshareProducer.id
+        if (this.screenshareVideoProducer) {
+            this.screenshareVideoProducer.close();
+            if (this.protoo.connected) await this.protoo.request("closeProducer", {
+                producerId: this.screenshareVideoProducer.id
+            });
+            this.screenshareVideoProducer = undefined;
+        }
+        if (this.screenshareAudioProducer) {
+            this.screenshareAudioProducer.close();
+            if (this.protoo.connected) await this.protoo.request("closeProducer", {
+                producerId: this.screenshareAudioProducer.id
             });
-            this.screenshareProducer = null;
+            this.screenshareAudioProducer = undefined;
         }
         const event = new $c31e3fb4360572af$var$SnapcallEvent("screenshareDisabled", {
             detail: {}
@@ -2582,9 +2614,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         } else throw new Error("webcam producer not available yet");
     }
     requestLocalScreenshare(element) {
-        if (this.screenshareProducer) {
+        if (this.screenshareVideoProducer) {
             const mediaStream = new MediaStream();
-            mediaStream.addTrack(this.screenshareProducer.track);
+            mediaStream.addTrack(this.screenshareVideoProducer.track);
             element.srcObject = mediaStream;
         } else $c31e3fb4360572af$var$log.log("requestLocalScreenshare", "screenshare producer not available yet");
     }
@@ -2710,7 +2742,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     getDevicesState() {
         const microphoneEnabled = this.micProducer ? !this.micProducer.closed : false;
         const cameraEnabled = this.webcamProducer ? !this.webcamProducer.closed : false;
-        const screenshareEnabled = this.screenshareProducer ? !this.screenshareProducer.closed : false;
+        const screenshareEnabled = this.screenshareVideoProducer ? !this.screenshareVideoProducer.closed : false;
         return {
             microphone: {
                 enabled: microphoneEnabled,
@@ -10586,29 +10618,34 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
                     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]),
+                        className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-x-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]",
+                            className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
                             children: [
                                 /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                                    className: (0, $3Sbms$classnames)("flex flex-col gap-[5px]", {
-                                        "text-center": centered
-                                    }),
+                                    className: "flex flex-col gap-5 overflow-auto",
                                     children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("h2", {
-                                            className: "text-xl font-medium",
-                                            children: title
+                                        /*#__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
+                                                })
+                                            ]
                                         }),
-                                        description && /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
-                                            className: "text-sm text-secondary",
-                                            children: description
-                                        })
+                                        children
                                     ]
                                 }),
-                                children,
                                 (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
                                     className: (0, $3Sbms$classnames)("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
                                     children: [
@@ -10766,6 +10803,44 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
         state: state,
         centered: permissionsState !== "refused",
         isDismissable: false,
+        primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
+                children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                    fullWidth: true,
+                    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), {
+                        fullWidth: true,
+                        onPress: state.close,
+                        children: "Okay"
+                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                        fullWidth: true,
+                        isDisabled: permissionsState === "requesting" || isRoomReady === false,
+                        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"
+                        ]
+                    })
+                })
+            }),
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
             className: "flex flex-col gap-[20px]",
             children: [
@@ -10888,39 +10963,6 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
                         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" || isRoomReady === false,
-                        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"
-                        ]
-                    })
                 })
             ]
         })
@@ -10934,48 +10976,59 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
 
 
 
+
+
 const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
     const QRCodeRef = (0, $3Sbms$useRef)(null);
+    const { options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const [QRCodeContainerRef, { width: QRCodeContainerWidth  }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();
     (0, $3Sbms$useEffect)(()=>{
-        $3Sbms$toCanvas(QRCodeRef.current, window.location.href, {
-            errorCorrectionLevel: "M"
+        const url = options.sharedURL || window.location.href;
+        $3Sbms$toCanvas(QRCodeRef.current, url, {
+            width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
+            errorCorrectionLevel: "Q",
+            margin: 0
         });
-    }, []);
-    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+    }, [
+        QRCodeContainerWidth,
+        options.sharedURL
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
         centered: true,
         title: "Switch to your mobile",
         description: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
+        isDismissable: false,
         state: state,
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                className: "pb-[20px]",
-                children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                        className: "flex flex-1 items-center justify-center relative",
-                        children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                                className: "absolute w-[70px] h-[70px]",
-                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $16d11fc0880587fd$export$2e2bcd8739ae039), {})
-                            }),
-                            /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
-                                ref: QRCodeRef
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
-                        className: "flex items-center justify-center text-xs text-primaryLight",
-                        children: "Scan this QR code with a compatible device."
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+        primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                fullWidth: true,
                 onPress: ()=>{
                     setReady(true);
                     state.close();
                 },
                 children: "Use desktop version"
-            })
-        ]
+            }),
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+            className: "flex flex-col gap-[20px]",
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    ref: QRCodeContainerRef,
+                    className: "flex flex-1 items-center justify-center relative",
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                            className: "absolute w-1/3 h-1/3 max-w-[70px] max-h-[70px] flex items-center justify-center",
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $16d11fc0880587fd$export$2e2bcd8739ae039), {})
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
+                            ref: QRCodeRef
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                    className: "flex items-center justify-center text-xs text-primaryLight text-center",
+                    children: "Scan this QR code with a compatible device."
+                })
+            ]
+        })
     });
 };
 
@@ -11536,6 +11589,7 @@ const $db82628e5503d51b$export$53819c0e58f98d49 = (props)=>{
 };
 
 
+
 const $92672d57809ea9d3$var$timerText = (delta)=>{
     const d = [
         Math.floor(delta / 60),
@@ -11544,6 +11598,7 @@ const $92672d57809ea9d3$var$timerText = (delta)=>{
     return d.join(":");
 };
 const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
+    const { options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const [startRecordTime, setStartRecordTime] = (0, $3Sbms$useState)(undefined);
     const [timer, setTimer] = (0, $3Sbms$useState)(0);
     const [countdownVisible, setCountdownVisible] = (0, $3Sbms$useState)(false);
@@ -11558,7 +11613,9 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
     });
     const sendAssetsModalState = (0, $3Sbms$useOverlayTriggerState)({});
     const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
-    const menuBarState = (0, $a94f21ef9007b90a$export$bd7b6af6aa16550c)({});
+    const menuBarState = (0, $a94f21ef9007b90a$export$bd7b6af6aa16550c)({
+        photo: options?.recorder?.defaultState !== "video"
+    });
     const exitStreaming = (0, $3Sbms$useCallback)(()=>{
         menuBarState.setStreaming(false);
         setStartRecordTime(undefined);
@@ -11805,7 +11862,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     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 [streamState, setStreamState] = (0, $3Sbms$useState)(options.recorder?.enabled ? "recorder" : "streaming");
     const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $3Sbms$useState)(false);
     const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $3Sbms$useState)(false);
     const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $3Sbms$useState)(false);
@@ -11957,7 +12014,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             setPermissions(event.detail.permissions);
             console.log(event.detail.permissions);
             setSelfPeerId(peerId);
-            if (!options.recorder) try {
+            if (!options.recorder?.enabled) try {
                 await (0, $15a01b611391c1e7$export$494039379563c94d)(options);
                 setUserInteractionTriggered(true);
             } catch (userInteractionError) {
@@ -12473,18 +12530,18 @@ var $f8d57e3d223f5089$export$2e2bcd8739ae039 = $f8d57e3d223f5089$var$GreetingVie
 
 
 var $1e2747ca72d0ab49$exports = {};
-$1e2747ca72d0ab49$exports = "*, :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.left-0 {\n  left: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\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-full {\n  height: 100%;\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-\\[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-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.h-\\[70px\\] {\n  height: 70px;\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.w-\\[70px\\] {\n  width: 70px;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\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.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\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-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\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-\\[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-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\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-black\\/\\[\\.6\\] {\n  background-color: #0009;\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\\] {\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-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / 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-2\\.5 {\n  padding-bottom: .625rem;\n}\n\n.pb-2 {\n  padding-bottom: .5rem;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.pb-\\[20px\\] {\n  padding-bottom: 20px;\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-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\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-bold {\n  font-weight: 700;\n}\n\n.font-normal {\n  font-weight: 400;\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-white\\/80 {\n  color: #fffc;\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / 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-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-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.inter {\n  font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n  .inter {\n    font-family: Inter var, sans-serif;\n  }\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";
+$1e2747ca72d0ab49$exports = "*, :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.left-0 {\n  left: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\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-full {\n  height: 100%;\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-\\[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-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.h-1\\/3 {\n  height: 33.3333%;\n}\n\n.max-h-\\[inherit\\] {\n  max-height: inherit;\n}\n\n.max-h-\\[70px\\] {\n  max-height: 70px;\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.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\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.max-w-\\[70px\\] {\n  max-width: 70px;\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.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\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-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.rounded-lg {\n  border-radius: .5rem;\n}\n\n.rounded-md {\n  border-radius: .375rem;\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-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\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-black\\/\\[\\.6\\] {\n  background-color: #0009;\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\\] {\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-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / 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-2\\.5 {\n  padding-bottom: .625rem;\n}\n\n.pb-2 {\n  padding-bottom: .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-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\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-bold {\n  font-weight: 700;\n}\n\n.font-normal {\n  font-weight: 400;\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-white\\/80 {\n  color: #fffc;\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / 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-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-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.inter {\n  font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n  .inter {\n    font-family: Inter var, sans-serif;\n  }\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";
 
 
 var $e02c50a47b475960$exports = {};
 $e02c50a47b475960$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";
 
 
-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,
+    recorder: {
+        enabled: false,
+        defaultState: "photo"
+    },
     sharedURL: window.location.href,
     showMenuButton: true,
     settingsShortcuts: [
@@ -12496,11 +12553,11 @@ const $24075a5d702d64b3$var$defaultOptions = {
     controls: {
         microphone: {
             available: true,
-            enabled: $24075a5d702d64b3$var$microphoneEnabled
+            enabled: true
         },
         camera: {
             available: true,
-            enabled: $24075a5d702d64b3$var$cameraEnabled
+            enabled: false
         },
         screenshare: {
             available: true