@snapcall/stream-ui 1.12.0 → 1.13.0

package/dist/stream-ui.esm.js

@@ -5,9 +5,10 @@ import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster,
 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 $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 {QueryClient as $3Sbms$QueryClient, QueryClientProvider as $3Sbms$QueryClientProvider, useMutation as $3Sbms$useMutation} from "react-query";
 import $3Sbms$i18next from "i18next";
 import {initReactI18next as $3Sbms$initReactI18next, useTranslation as $3Sbms$useTranslation, Trans as $3Sbms$Trans} from "react-i18next";
-import {parse as $3Sbms$parse, getParser as $3Sbms$getParser} from "bowser";
+import $3Sbms$bowser, {parse as $3Sbms$parse, getParser as $3Sbms$getParser} from "bowser";
 import {v4 as $3Sbms$v4} from "uuid";
 import {WebSocketTransport as $3Sbms$WebSocketTransport, Peer as $3Sbms$Peer} from "protoo-client";
 import {captureException as $3Sbms$captureException, addBreadcrumb as $3Sbms$addBreadcrumb, setTag as $3Sbms$setTag} from "@sentry/browser";
@@ -18,10 +19,10 @@ 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, useModalOverlay as $3Sbms$useModalOverlay, Overlay as $3Sbms$Overlay, useButton as $3Sbms$useButton} from "react-aria";
+import {useToggleButton as $3Sbms$useToggleButton, useFocusRing as $3Sbms$useFocusRing, useButton as $3Sbms$useButton, useModalOverlay as $3Sbms$useModalOverlay, Overlay as $3Sbms$Overlay} from "react-aria";
+import {useHover as $3Sbms$useHover} from "@react-aria/interactions";
 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 {useModalOverlay as $3Sbms$useModalOverlay1, Overlay as $3Sbms$Overlay1} from "@react-aria/overlays";
 import $3Sbms$reactcontentloader from "react-content-loader";
 
@@ -315,6 +316,24 @@ const $a5146f9062d7bf28$export$3a57e165650c636f = (message, options = {})=>{
 };
 
 
+const $35b37252690084e8$export$1cbfb36c1655a9a = (root, element)=>{
+    const mutationObserver = new MutationObserver((mutationRecords)=>{
+        mutationRecords.forEach((record)=>{
+            record.removedNodes.forEach((node)=>{
+                if (node.contains(element)) {
+                    root.unmount();
+                    mutationObserver.disconnect();
+                }
+            });
+        });
+    });
+    mutationObserver.observe(document.documentElement, {
+        childList: true,
+        subtree: true
+    });
+};
+
+
 
 
 
@@ -491,44 +510,47 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
             footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service."
         },
         recorder: {
+            limit: "Video recording limited to 5 min.",
             submissionTitle: "Thank you for your submission!",
-            submissionDescription: "Your photo/video has been successfully sent. We will review it and get back to you soon.",
-            confirmRemovalTitle: "Confirm removal",
-            confirmRemovalDescription: "Are you sure you want to remove this photo/video? This action cannot be undone.",
-            elementBeingProcessed: "Please wait a moment while your {{ type }} is being processed...",
-            waitVideo: "It may take up to 15 seconds for a video to be ready.",
-            elementCaptureSuccess: "{{ type }} successfully captured",
-            takeNewElement: "Take new {{ type }}",
+            submissionDescription: "Your photo/video has been successfully submitted. We will review it and get back to you shortly.",
+            confirmRemovalTitle: "Confirm deletion",
+            confirmRemovalDescription: "Are you sure you want to delete this photo/video? This action cannot be undone.",
+            elementBeingProcessed: "Please wait while your {{ type }} is being processed...",
+            waitVideo: "A video may take up to 15 seconds to be ready.",
+            elementCaptureSuccess: "{{ type }} captured successfully",
+            takeNewElement: "Capture a new {{ type }}",
             sendElement: "Send {{ type }}",
             sendElements: "Send {{ count }} elements",
             allowAccess: "Allow access",
             okay: "Okay",
-            allowCamMicAccess: "Allow access to cam/mic",
+            allowCamMicAccess: "Allow access to camera and microphone",
             allowScreenShareAccess: "Allow access to screen sharing",
             permissionDeniedTitle: "Something went wrong!",
-            permissionDeniedDescription: "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.",
-            photoInstructionsTitle: "Ready to take a shot?",
+            permissionDeniedDescription: "Without access to the camera and microphone, you won't be able to capture photos or videos to share with the support team. Please grant access in your browser settings.",
+            photoInstructionsTitle: "Ready to snap a photo?",
             videoInstructionsTitle: "Ready to record a video?",
-            screenShareInstructionsTitle: "Ready to capture your screen?",
+            screenShareInstructionsTitle: "Ready to share your screen?",
             instructions: {
-                allowAccessOnPrompt: "When prompted, <1>allow access</1> to camera and microphone.",
-                tapPhotoButton: "Tap the <1 /><2> Camera button</2> to take a photo.",
-                multiplePhotos: "Don't hesitate to take multiple photos for more detail.",
-                reviewAndSendPhotos: "You can review your photo and then <1>send it when you're done.</1>",
-                tapVideoButton: "Tap the <1 /><2> Record button</2> to start a recording.",
-                videoSpeech: "You can <1>speak during</1> the recording for added detail.",
-                tapStopVideoButton: "When you're finished, tap the <1 /><2> Stop button</2>.",
-                reviewAndSendVideos: "You can review your video and then <1>send it when you're done</2>.",
-                tapScreenShareButton: "Tap on <1> Record my screen</1> to start a recording.",
-                tapStopScreenShareButton: "When you're finished, tap on <1>Stop recording</1>.",
-                reviewAnsSendScreenShare: "You can review your video and then <1>send it when you're done</1>."
+                allowAccessOnPrompt: "When prompted, <1>allow access</1> to the camera and microphone.",
+                tapPhotoButton: "Tap the <1 /><2>Camera button</2> to take a photo.",
+                multiplePhotos: "Feel free to take multiple photos for more details.",
+                reviewAndSendPhotos: "Review your photo and <1>send it when you're satisfied.</1>",
+                reviewAndSendScreenShare: "Review your video and <1>send it when you're satisfied.</1>",
+                tapVideoButton: "Tap the <1 /><2>Record button</2> to start recording.",
+                videoSpeech: "You can <1>talk during</1> the recording to provide additional information.",
+                tapStopVideoButton: "When you're done, tap the <1 /><2>Stop button</2>.",
+                reviewAndSendVideos: "Review your video and <1>send it when you're satisfied</1>.",
+                tapScreenShareButton: "Tap <1>Record my screen</1> to begin recording.",
+                tapStopScreenShareButton: "When you're done, tap <1>Stop recording</1>.",
+                screenShareInstruction: "Select the screen or window you wish to record."
             },
-            switchToMobileTitle: "Switch to your mobile",
-            switchToMobileDescription: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
-            useDesktopVersion: "Use desktop version",
+            switchToMobileTitle: "Switch to your mobile device",
+            switchToMobileDescription: "Experience greater convenience by using your phone to take photos and record videos.",
+            useDesktopVersion: "Use the desktop version",
             scanQRCode: "Scan this QR code with a compatible device.",
             startScreenShareButton: "Record my screen",
-            stopScreenShareButton: "Stop recording"
+            stopScreenShareButton: "Stop recording",
+            screenTitle: "Ready to capture your screen?"
         }
     }
 };
@@ -690,44 +712,47 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
             footerDescription: "D\xe9couvrez SnapCall, ajoutez de la vid\xe9o en temps r\xe9el \xe0 n'importe quelle plateforme, produit ou service."
         },
         recorder: {
-            submissionTitle: "Merci pour votre soumission!",
+            limit: "Enregistrement vid\xe9o limit\xe9 \xe0 5 min.",
+            submissionTitle: "Merci pour votre soumission !",
             submissionDescription: "Votre photo/vid\xe9o a \xe9t\xe9 envoy\xe9e avec succ\xe8s. Nous l'examinerons et reviendrons vers vous bient\xf4t.",
             confirmRemovalTitle: "Confirmer la suppression",
-            confirmRemovalDescription: "Voulez-vous vraiment supprimer cette photo/vid\xe9o? Cette action ne peut pas \xeatre annul\xe9e.",
+            confirmRemovalDescription: "Voulez-vous vraiment supprimer cette photo/vid\xe9o ? Cette action ne peut pas \xeatre annul\xe9e.",
             elementBeingProcessed: "Veuillez patienter un moment pendant que votre {{ type }} est en cours de traitement...",
             waitVideo: "Cela peut prendre jusqu'\xe0 15 secondes pour qu'une vid\xe9o soit pr\xeate.",
-            elementCaptureSuccess: "{{ type }} captur\xe9e avec succ\xe8s",
+            elementCaptureSuccess: "{{ type }} captur\xe9(e) avec succ\xe8s",
             takeNewElement: "Prendre une nouvelle {{ type }}",
-            sendElement: "Envoyer une {{ type }}",
+            sendElement: "Envoyer la {{ type }}",
             sendElements: "Envoyer {{ count }} \xe9l\xe9ments",
-            allowAccess: "Permettre l'acc\xe8s",
+            allowAccess: "Autoriser l'acc\xe8s",
             okay: "D'accord",
-            allowCamMicAccess: "Autoriser l'acc\xe8s \xe0 la cam\xe9ra/au micro",
+            allowCamMicAccess: "Autoriser l'acc\xe8s \xe0 la cam\xe9ra et au micro",
             allowScreenShareAccess: "Autoriser l'acc\xe8s au partage d'\xe9cran",
-            permissionDeniedTitle: "Quelque chose s'est mal pass\xe9!",
+            permissionDeniedTitle: "Quelque chose s'est mal pass\xe9 !",
             permissionDeniedDescription: "Sans acc\xe8s \xe0 la cam\xe9ra et au microphone, vous ne pouvez pas prendre de photos ou de vid\xe9os \xe0 partager avec l'\xe9quipe d'assistance. Veuillez accorder l'acc\xe8s dans les param\xe8tres de votre navigateur.",
-            photoInstructionsTitle: "Pr\xeat \xe0 prendre une photo?",
-            videoInstructionsTitle: "Pr\xeat \xe0 enregistrer une vid\xe9o?",
-            screenShareInstructionsTitle: "Pr\xeat \xe0 capturer votre \xe9cran?",
+            photoInstructionsTitle: "Pr\xeat(e) \xe0 prendre une photo ?",
+            videoInstructionsTitle: "Pr\xeat(e) \xe0 enregistrer une vid\xe9o ?",
+            screenShareInstructionsTitle: "Pr\xeat(e) \xe0 partager votre \xe9cran ?",
             instructions: {
-                allowAccessOnPrompt: "Lorsque vous y \xeates invit\xe9, <1>autorisez l'acc\xe8s</1> \xe0 la cam\xe9ra et au microphone.",
+                allowAccessOnPrompt: "Lorsque vous y \xeates invit\xe9(e), <1>autorisez l'acc\xe8s</1> \xe0 la cam\xe9ra et au microphone.",
                 tapPhotoButton: "Appuyez sur le <1 /><2>bouton Appareil photo</2> pour prendre une photo.",
                 multiplePhotos: "N'h\xe9sitez pas \xe0 prendre plusieurs photos pour plus de d\xe9tails.",
                 reviewAndSendPhotos: "Vous pouvez revoir votre photo, puis <1>l'envoyer lorsque vous avez termin\xe9.</1>",
                 tapVideoButton: "Appuyez sur le <1 /><2>bouton d'enregistrement</2> pour d\xe9marrer un enregistrement.",
-                videoSpeech: "Vous pouvez <1>parler pendant</1> l'enregistrement pour plus de d\xe9tails.",
+                videoSpeech: "Vous pouvez <1>parler pendant</1> l'enregistrement pour ajouter des d\xe9tails.",
                 tapStopVideoButton: "Lorsque vous avez termin\xe9, appuyez sur le <1 /><2>bouton Arr\xeater</2>.",
                 reviewAndSendVideos: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</2>.",
-                tapScreenShareButton: "Appuyez sur <1>Enregistrer mon \xe9cran</1> pour d\xe9marrer un enregistrement.",
-                tapStopScreenShareButton: "Lorsque vous avez termin\xe9, appuyez sur <1>Arr\xeater l'enregistrement</1>.",
-                reviewAnsSendScreenShare: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</1>."
+                tapScreenShareButton: "Appuyez sur <1>Enregistrer \xe9cran</1> pour d\xe9marrer un enregistrement.",
+                tapStopScreenShareButton: "Lorsque vous avez termin\xe9, appuyez sur <1>Stop enregistrement</1>.",
+                reviewAndSendScreenShare: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9.</1>",
+                screenShareInstruction: "S\xe9lectionnez l'\xe9cran ou la fen\xeatre que vous souhaitez enregistrer."
             },
-            switchToMobileTitle: "Basculez vers votre mobile",
+            switchToMobileTitle: "Passez sur votre mobile",
             switchToMobileDescription: "Profitez d'une exp\xe9rience encore plus pratique en utilisant votre t\xe9l\xe9phone pour prendre des photos et enregistrer des vid\xe9os.",
-            useDesktopVersion: "Utiliser la version de bureau",
+            useDesktopVersion: "Continuer",
             scanQRCode: "Scannez ce code QR avec un appareil compatible.",
-            startScreenShareButton: "Enregistrer mon \xe9cran",
-            stopScreenShareButton: "Arr\xeater d'enregistrer"
+            startScreenShareButton: "Enregistrer \xe9cran",
+            stopScreenShareButton: "Stop enregistrement",
+            screenTitle: "Pr\xeat \xe0 capturer votre \xe9cran ?"
         }
     }
 };
@@ -893,44 +918,47 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
             footerDescription: "Incontrare SnapCall, il modo pi\xf9 semplice per aggiungere video in tempo reale a piattaforma, prodotto o servizio."
         },
         recorder: {
-            submissionTitle: "Grazie per la vostra presentazione!",
-            submissionDescription: "La tua foto/video \xe8 stato inviato con successo. Lo esamineremo e ti ricontatteremo presto.",
-            confirmRemovalTitle: "Conferma la rimozione",
+            limit: "Registrazione video limitata a 5 min.",
+            submissionTitle: "Grazie per il tuo invio!",
+            submissionDescription: "La tua foto/video \xe8 stata inviata con successo. La esamineremo e ti risponderemo al pi\xf9 presto.",
+            confirmRemovalTitle: "Conferma rimozione",
             confirmRemovalDescription: "Sei sicuro di voler rimuovere questa foto/video? Questa azione non pu\xf2 essere annullata.",
-            elementBeingProcessed: "Attendi un momento mentre la tua {{ type }} \xe8 in fase di elaborazione...",
-            waitVideo: "Potrebbero essere necessari fino a 15 secondi prima che un video sia pronto.",
+            elementBeingProcessed: "Attendi un momento mentre il tuo {{ type }} viene elaborato...",
+            waitVideo: "Potrebbero essere necessari fino a 15 secondi affinch\xe9 un video sia pronto.",
             elementCaptureSuccess: "{{ type }} catturato con successo",
-            takeNewElement: "Scatta una nuova {{ type }}",
-            sendElement: "Invia una {{ type }}",
+            takeNewElement: "Cattura un nuovo {{ type }}",
+            sendElement: "Invia {{ type }}",
             sendElements: "Invia {{ count }} elementi",
-            allowAccess: "Consentire l'accesso",
-            okay: "Va bene",
-            allowCamMicAccess: "Consenti l'accesso a cam/microfono",
-            allowScreenShareAccess: "Consenti l'accesso alla condivisione dello schermo",
+            allowAccess: "Consenti accesso",
+            okay: "Okay",
+            allowCamMicAccess: "Consenti accesso a fotocamera e microfono",
+            allowScreenShareAccess: "Consenti accesso alla condivisione dello schermo",
             permissionDeniedTitle: "Qualcosa \xe8 andato storto!",
-            permissionDeniedDescription: "Senza l'accesso alla fotocamera e al microfono, non puoi scattare foto o registrare video da condividere con il team di supporto. Concedi l'accesso nelle impostazioni del tuo browser.",
-            photoInstructionsTitle: "Pronto a fare un tentativo?",
+            permissionDeniedDescription: "Senza l'accesso alla fotocamera e al microfono, non \xe8 possibile scattare foto o registrare video da condividere con il team di supporto. Si prega di concedere l'accesso nelle impostazioni del browser.",
+            photoInstructionsTitle: "Pronto a scattare una foto?",
             videoInstructionsTitle: "Pronto a registrare un video?",
-            screenShareInstructionsTitle: "Pronto a catturare il tuo schermo?",
+            screenShareInstructionsTitle: "Pronto a condividere il tuo schermo?",
             instructions: {
-                allowAccessOnPrompt: "Quando richiesto, <1>consenti l'accesso</1> alla videocamera e al microfono.",
-                tapPhotoButton: "Tocca il <1 /><2> pulsante Fotocamera</2> per scattare una foto.",
-                multiplePhotos: "Non esitate a scattare pi\xf9 foto per maggiori dettagli.",
+                allowAccessOnPrompt: "Quando richiesto, <1>consenti l'accesso</1> a fotocamera e microfono.",
+                tapPhotoButton: "Tocca il pulsante <1 /><2>Fotocamera</2> per scattare una foto.",
+                multiplePhotos: "Non esitare a scattare pi\xf9 foto per maggiori dettagli.",
                 reviewAndSendPhotos: "Puoi rivedere la tua foto e poi <1>inviarla quando hai finito.</1>",
-                tapVideoButton: "Tocca il <1 /><2> pulsante Registra</2> per avviare una registrazione.",
-                videoSpeech: "Puoi <1>parlare durante</1> la registrazione per ulteriori dettagli.",
-                tapStopVideoButton: "Al termine, tocca il <1 /><2> pulsante Interrompi</2>.",
-                reviewAndSendVideos: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</2>.",
-                tapScreenShareButton: "Tocca <1> Registra il mio schermo</1> per avviare una registrazione.",
-                tapStopScreenShareButton: "Al termine, tocca <1>Interrompi registrazione</1>.",
-                reviewAnsSendScreenShare: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</1>."
+                tapVideoButton: "Tocca il pulsante <1 /><2>Registra</2> per avviare una registrazione.",
+                videoSpeech: "Puoi <1>parlare durante</1> la registrazione per aggiungere dettagli.",
+                tapStopVideoButton: "Quando hai finito, tocca il pulsante <1 /><2>Ferma</2>.",
+                reviewAndSendVideos: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</1>.",
+                tapScreenShareButton: "Tocca <1>Registra il mio schermo</1> per avviare una registrazione.",
+                tapStopScreenShareButton: "Quando hai finito, tocca <1>Ferma registrazione</1>.",
+                reviewAndSendScreenShare: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito.</1>",
+                screenShareInstruction: "Seleziona lo schermo o la finestra che desideri registrare."
             },
-            switchToMobileTitle: "Passa al tuo cellulare",
-            switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 comoda utilizzando il telefono per scattare foto e registrare video.",
+            switchToMobileTitle: "Passa al tuo dispositivo mobile",
+            switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 pratica utilizzando il tuo telefono per scattare foto e registrare video.",
             useDesktopVersion: "Usa la versione desktop",
             scanQRCode: "Scansiona questo codice QR con un dispositivo compatibile.",
             startScreenShareButton: "Registra il mio schermo",
-            stopScreenShareButton: "Interrompi la registrazione"
+            stopScreenShareButton: "Ferma registrazione",
+            screenTitle: "Pronto a catturare il tuo schermo?"
         }
     }
 };
@@ -1219,6 +1247,11 @@ const $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas = (canvas, dpr = 1)=
             resolve(canvas);
         };
         watermarkImage.src = blobUrl;
+        if (context) {
+            context.fillStyle = "#00000064";
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            context.restore();
+        }
     });
 const $15ddac3121cc3a5d$export$674c90a250a8b2c5 = async (video, options = {
     addPlayWatermark: false
@@ -1229,15 +1262,15 @@ const $15ddac3121cc3a5d$export$674c90a250a8b2c5 = async (video, options = {
     const sourceHeight = orientation === "landscape" ? videoHeight : videoWidth;
     const sourceX = orientation === "landscape" ? (videoWidth - sourceWidth) / 2 : 0;
     const sourceY = orientation === "portrait" ? (videoHeight - sourceHeight) / 2 : 0;
-    const canvas = document.createElement("canvas");
+    let canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     const dpr = window.devicePixelRatio || 1;
     canvas.width = sourceWidth * dpr;
     canvas.height = sourceHeight * dpr;
     ctx?.scale(dpr, dpr);
     ctx?.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width / dpr, canvas.height / dpr);
+    if (options.addPlayWatermark) canvas = await $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas(canvas, window.devicePixelRatio);
     const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas, window.devicePixelRatio);
-    if (options.addPlayWatermark) return (await $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas(canvas, window.devicePixelRatio)).toDataURL("image/jpeg");
     return watermarkedCanvas.toDataURL("image/jpeg");
 };
 const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src, options = {
@@ -1252,13 +1285,13 @@ const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src, options = {
     video.width = settings.width || 0;
     video.height = settings.height || 0;
     await video.play();
-    const canvas = document.createElement("canvas");
+    let canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     canvas.height = video.height;
     canvas.width = video.width;
     ctx?.drawImage(video, 0, 0);
+    if (options.addPlayWatermark) canvas = await $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas(canvas);
     const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas);
-    if (options.addPlayWatermark) return (await $15ddac3121cc3a5d$var$addVideoPlayerWatermarkedCanvas(canvas)).toDataURL("image/jpeg");
     return watermarkedCanvas.toDataURL("image/jpeg");
 };
 
@@ -2330,6 +2363,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.mediaPipe = undefined;
         }
         this.audioMedia?.removeAll();
+        this.audioMedia = undefined;
         this.webcamTrack?.stop();
         this.webcamTrack = null;
         this.protooTransport.close();
@@ -2488,14 +2522,13 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 optionalParam.facingMode = this.webcam.facingMode;
             } else {
                 const webcams = Array.from(this.webcams.keys());
-                const deviceId = this.webcam?.device?.deviceId || "unknow";
+                const deviceId = this.webcam?.device?.deviceId || "unknown";
                 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
                 };
@@ -2511,8 +2544,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     ideal: this.webcam.device.deviceId
                 };
             }
-            if (resolution) this.webcam.resolution = resolution;
         }
+        this.webcam.resolution = resolution || this.webcam.resolution || "hd";
+        this.webcam.framerate = frameRate || this.webcam.framerate;
         let usedResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution];
         if (this.useVideoBackground) usedResolution = {
             width: {
@@ -2530,7 +2564,6 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         });
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
-                frameRate: frameRate,
                 ...optionalParam,
                 ...usedResolution
             }
@@ -2572,6 +2605,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             };
         }
         if (!this.webcam.device) throw new Error("no webcam devices");
+        this.webcam.resolution = config?.resolution || this.webcam.resolution || "hd";
+        this.webcam.framerate = config?.frameRate || this.webcam.framerate;
         let usedResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution];
         if (this.useVideoBackground) usedResolution = {
             width: {
@@ -9897,7 +9932,7 @@ const $df41bfe6da05853a$var$EndView = ()=>{
     const full = streamState === "full";
     const onGoBackClick = ()=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).init();
-        setStreamState("streaming");
+        setStreamState("loading");
     };
     (0, $3Sbms$useEffect)(()=>{
         if (document.pictureInPictureElement) document.exitPictureInPicture();
@@ -10712,6 +10747,50 @@ const $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).d
 
 
 
+function $448b01a7ea61a08a$export$c74cd098b7a410cb({ mode: mode = "photo" , requestedMedia: requestedMedia = "camera" , permissionBlockedModalState: permissionBlockedModalState , captureThumbnail: captureThumbnail  }) {
+    const [currentMode, setMode] = (0, $3Sbms$useState)(mode);
+    const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
+    const [currentRequestedMedia] = (0, $3Sbms$useState)(requestedMedia);
+    const [startRecordTime, setStartRecordTime] = (0, $3Sbms$useState)(undefined);
+    const [timer, setTimer] = (0, $3Sbms$useState)(0);
+    const [assets, setAssets] = (0, $3Sbms$useState)([]);
+    const assetsPopupState = (0, $3Sbms$useOverlayTriggerState)({});
+    const [assetLoading, setAssetLoading] = (0, $3Sbms$useState)(false);
+    (0, $3Sbms$useEffect)(()=>{
+        if (startRecordTime) {
+            const interval = setInterval(()=>{
+                const delta = (Date.now() - startRecordTime) / 1000;
+                setTimer(delta);
+            }, 1000);
+            return ()=>clearInterval(interval);
+        } else setTimer(0);
+    }, [
+        startRecordTime,
+        setTimer
+    ]);
+    return {
+        requestedMedia: currentRequestedMedia,
+        mode: currentMode,
+        setMode: setMode,
+        streaming: streaming,
+        setStreaming: setStreaming,
+        permissionBlockedModalState: permissionBlockedModalState,
+        startRecordTime: startRecordTime,
+        setStartRecordTime: setStartRecordTime,
+        timer: timer,
+        assetsPopupState: assetsPopupState,
+        assets: assets,
+        setAssets: setAssets,
+        assetLoading: assetLoading,
+        setAssetLoading: setAssetLoading,
+        captureThumbnail: captureThumbnail
+    };
+}
+
+
+
+
+
 
 
 
@@ -10724,7 +10803,7 @@ const $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).d
 
 
 
-function $5a48b7481979330f$export$61dc559f8a0b9bcf(ref) {
+function $f9059e11662133b7$export$61dc559f8a0b9bcf(ref) {
     const innerRef = (0, $3Sbms$useRef)(null);
     (0, $3Sbms$useEffect)(()=>{
         if (!ref) return;
@@ -10733,8 +10812,8 @@ function $5a48b7481979330f$export$61dc559f8a0b9bcf(ref) {
     });
     return innerRef;
 }
-const $5a48b7481979330f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwardRef)(function Button({ children: children , ...otherProps }, forwardedRef) {
-    const ref = $5a48b7481979330f$export$61dc559f8a0b9bcf(forwardedRef);
+const $f9059e11662133b7$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwardRef)(function Button({ children: children , ...otherProps }, forwardedRef) {
+    const ref = $f9059e11662133b7$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)();
@@ -10755,6 +10834,218 @@ const $5a48b7481979330f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwa
 
 
 
+const $f3d9f6a4bbe7f552$export$4e594bceac139abd = (props)=>{
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    if (props.state === "request") return /*#__PURE__*/ (0, $3Sbms$jsx)("button", {
+        className: (0, $3Sbms$classnames)("bg-white rounded-full w-[86px] h-[86px] flex items-center justify-center"),
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+            className: (0, $3Sbms$classnames)("border-[7px] border-white border-b-[#E5484D] border-b-[7px] rounded-[50%] w-[64px] h-[64px] animate-spin")
+        })
+    });
+    if (props.state === "live") return /*#__PURE__*/ (0, $3Sbms$jsx)("button", {
+        className: (0, $3Sbms$classnames)("bg-white rounded-full w-[86px] h-[86px] flex items-center justify-center"),
+        onClick: ()=>{
+            props.onCapturePress();
+        },
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+            className: "bg-white border-[4px] border-[#E5484D] w-[72px] h-[72px] rounded-full flex items-center justify-center",
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "bg-[#E5484D] w-[24px] h-[24px] rounded-[8px] "
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("button", {
+        className: (0, $3Sbms$classnames)("bg-white rounded-full w-[86px] h-[86px] flex items-center justify-center"),
+        onClick: ()=>{
+            if (selfPeerId) props.onCapturePress();
+        },
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+            className: "bg-[#E5484D] w-[70px] h-[70px] rounded-full flex items-center justify-center",
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "bg-[#E5484D] w-[62px] h-[62px] rounded-full border-[3px] border-[#FFFFF]"
+            })
+        })
+    });
+};
+const $f3d9f6a4bbe7f552$export$f9da3144ae2525a3 = (props)=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+        className: (0, $3Sbms$classnames)("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.mode === "photo" ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
+            })
+        })
+    });
+};
+
+
+const $a180b95972399d58$export$11a6fe490bbc4873 = (props)=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "flex flex-col bg-primary h-[150px] w-full max-w-[500px] rounded-[15px] p-2.5 gap-2.5",
+        children: [
+            /*#__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, $f9059e11662133b7$export$d2b052e7b4be1756), {
+                                isSelected: props.state.mode === "photo",
+                                onPress: ()=>{
+                                    if (!props.state.streaming) props.changeMode("photo");
+                                },
+                                children: t("misc.photo")
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f9059e11662133b7$export$d2b052e7b4be1756), {
+                                isSelected: props.state.mode === "video",
+                                onPress: ()=>{
+                                    if (!props.state.streaming) props.changeMode("video");
+                                },
+                                children: t("misc.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)((0, $f3d9f6a4bbe7f552$export$f9da3144ae2525a3), {
+                        ...props
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        onClick: props.onSwitch,
+                        className: "rounded-full w-[56px] h-[56px] flex items-center justify-center bg-[#565656] cursor-pointer",
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $58d405d56c1abe95$export$aefffb14595958fe), {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+
+
+
+
+const $209863c2c7a7b6c0$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", {
+        className: "absolute w-full h-full flex justify-center items-center bg-black/[.6] z-50",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+            className: "text-white/80 text-[112px] font-medium",
+            children: countdown
+        })
+    });
+};
+
+
+
+
+
+
+
+
+const $7dc8075008cdffc1$export$8c410456846722ea = /*#__PURE__*/ (0, $3Sbms$forwardRef)((props, forwardedRef)=>{
+    const ref = (0, $f9059e11662133b7$export$61dc559f8a0b9bcf)(forwardedRef);
+    (0, $3Sbms$useEffect)(()=>{
+        const onScreenshareEnabled = ()=>{
+            if (!ref?.current) return;
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalScreenshare(ref.current);
+        };
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareEnabled);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareEnabled);
+        };
+    }, [
+        ref
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+        autoPlay: true,
+        muted: true,
+        playsInline: true,
+        ref: ref,
+        className: "rounded-[10px] max-w-[100%] max-h-[100%] object-fit ",
+        children: props.children
+    });
+});
+const $7dc8075008cdffc1$export$287f8fcc69caf433 = /*#__PURE__*/ (0, $3Sbms$forwardRef)((_, forwardedRef)=>{
+    const ref = (0, $f9059e11662133b7$export$61dc559f8a0b9bcf)(forwardedRef);
+    const [facingMode, setFacingMode] = (0, $3Sbms$useState)("user");
+    (0, $3Sbms$useEffect)(()=>{
+        const onLocalVideoChange = (event)=>{
+            if (!event.detail?.camera?.device || !ref.current) return;
+            const { facingMode: newFacingMode  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(ref?.current);
+            setFacingMode(newFacingMode);
+        };
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
+        };
+    }, [
+        ref
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+        autoPlay: true,
+        muted: true,
+        playsInline: true,
+        ref: ref,
+        className: (0, $3Sbms$classnames)("w-full h-full object-cover rounded-[inherit]", {
+            "scale-x-[-1]": facingMode === "user"
+        })
+    });
+});
+
+
+
+const $7227f0300555e42c$export$1cd1efc78cb52ca5 = ({ asset: asset , onClick: onClick  })=>{
+    if (!asset) return null;
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+        className: "flex items-center justify-center w-[60px] h-[60px] cursor-pointer relative overflow-hidden",
+        onClick: onClick,
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+            className: "cursor-pointer rounded-[8px] w-[60px] h-[60px] object-cover",
+            src: asset.thumbnailURL || asset.objectUrl,
+            alt: "last shot"
+        })
+    });
+};
+
+
+
+
+
+
 
 
 
@@ -10762,11 +11053,54 @@ const $5a48b7481979330f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwa
 
 
 
+const $a6ff3d37cbdeb3a3$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, $f9059e11662133b7$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"),
+        tertiary: (0, $3Sbms$classnames)(isActive ? "bg-tertiarySelected" : "bg-tertiary", "text-mainBlue disabled:opacity-50"),
+        blue: (0, $3Sbms$classnames)(isActive ? "bg-mainBlueSelected" : "bg-mainBlue", "text-white disabled:opacity-50"),
+        custom: ""
+    };
+    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: ""
+    };
+    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
+    });
+});
+
+
+
+
+
+
 
 
 
 
-const $91e337bf8187124b$export$a703eb468fcf7e69 = (props)=>{
+const $08835f3b5a72d418$export$a703eb468fcf7e69 = (props)=>{
     const { state: state , children: children  } = props;
     const ref = (0, $3Sbms$useRef)(null);
     const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $3Sbms$useModalOverlay)({
@@ -10819,60 +11153,18 @@ const $91e337bf8187124b$export$a703eb468fcf7e69 = (props)=>{
 
 
 
-
-
-
-
-
-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"),
-        tertiary: (0, $3Sbms$classnames)(isActive ? "bg-tertiarySelected" : "bg-tertiary", "text-mainBlue disabled:opacity-50"),
-        custom: ""
-    };
-    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: ""
+function $4381ee6dfabb36f4$export$2b77a92f1a5ad772(props) {
+    const { children: children , state: state , size: size = "small" , title: title , description: description , primaryAction: primaryAction , secondaryAction: secondaryAction , centered: centered = false , ...otherProps } = props;
+    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]"
     };
-    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 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]"
-    };
-    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91e337bf8187124b$export$a703eb468fcf7e69), {
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $08835f3b5a72d418$export$a703eb468fcf7e69), {
         state: state,
+        ...otherProps,
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
             className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
             style: {
@@ -10905,7 +11197,7 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
                     (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), {
+                            typeof secondaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
                                 variant: "secondary",
                                 onPress: state.close,
                                 fullWidth: centered,
@@ -10914,7 +11206,7 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
                             typeof secondaryAction === "function" && secondaryAction({
                                 close: state.close
                             }),
-                            typeof primaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                            typeof primaryAction === "string" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
                                 onPress: state.close,
                                 fullWidth: centered,
                                 children: primaryAction
@@ -10933,7 +11225,70 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
 
 
 
-const $444e1dd9fa8f6883$export$f9da3144ae2525a3 = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+
+const $dcecc67f51a66b8d$export$f9d8408fefd786da = ({ state: state , onClose: onClose  })=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    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)(()=>{
+        const url = options.sharedURL || window.location.href;
+        $3Sbms$toCanvas(QRCodeRef.current, url, {
+            width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
+            errorCorrectionLevel: "Q",
+            margin: 0
+        });
+    }, [
+        QRCodeContainerWidth,
+        options.sharedURL
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4381ee6dfabb36f4$export$2b77a92f1a5ad772), {
+        centered: true,
+        title: t("recorder.switchToMobileTitle"),
+        description: t("recorder.switchToMobileDescription"),
+        isDismissable: false,
+        state: state,
+        primaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                fullWidth: true,
+                variant: "blue",
+                onPress: ()=>{
+                    close();
+                    onClose();
+                },
+                children: t("recorder.useDesktopVersion")
+            }),
+        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: t("recorder.scanQRCode")
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
+
+const $444e1dd9fa8f6883$export$f9da3144ae2525a3 = ({ sideColor: sideColor , mainColor: mainColor  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
         width: "20",
         height: "21",
         viewBox: "0 0 20 21",
@@ -10946,15 +11301,15 @@ const $444e1dd9fa8f6883$export$f9da3144ae2525a3 = ()=>/*#__PURE__*/ (0, $3Sbms$j
         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"
+                fill: sideColor || "#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"
+                fill: mainColor || "#F12828"
             })
         ]
     });
-const $444e1dd9fa8f6883$export$c6a849fd9d9d93a2 = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+const $444e1dd9fa8f6883$export$c6a849fd9d9d93a2 = ({ sideColor: sideColor , mainColor: mainColor  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
         width: "20",
         height: "20",
         viewBox: "0 0 20 20",
@@ -10967,11 +11322,11 @@ const $444e1dd9fa8f6883$export$c6a849fd9d9d93a2 = ()=>/*#__PURE__*/ (0, $3Sbms$j
         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"
+                fill: sideColor || "#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"
+                fill: mainColor || "#F12828"
             })
         ]
     });
@@ -11001,323 +11356,173 @@ const $444e1dd9fa8f6883$export$dce36e07153365d = ()=>/*#__PURE__*/ (0, $3Sbms$js
 
 
 
-const $96999d2514f71e51$var$Text = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-        className: "w-full text-base text-primaryLight font-normal leading-[20px]",
-        children: children
+
+const $d775b8f941514ed9$var$savedPermissions = {
+    audio: false,
+    video: false
+};
+const $d775b8f941514ed9$export$d791e41b9a4de1f2 = (constraints)=>{
+    const [media, setMedia] = (0, $3Sbms$useState)();
+    const state = (0, $3Sbms$useMutation)([
+        constraints
+    ], async ()=>{
+        const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+        setMedia(mediaStream);
+        if (constraints.audio && !$d775b8f941514ed9$var$savedPermissions.audio) $d775b8f941514ed9$var$savedPermissions.audio = true;
+        if (constraints.video && !$d775b8f941514ed9$var$savedPermissions.video) $d775b8f941514ed9$var$savedPermissions.video = true;
+        return {
+            media: media,
+            savedPermissions: $d775b8f941514ed9$var$savedPermissions
+        };
+    });
+    if (state.data == null) media?.getTracks().forEach((track)=>{
+        track.stop();
+        media?.removeTrack(track);
     });
-const $96999d2514f71e51$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+    return {
+        ...state,
+        savedPermissions: $d775b8f941514ed9$var$savedPermissions
+    };
+};
+
+
+const $8fe8c7100159474e$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
         className: "text-primary font-medium",
         children: children
     });
-const $96999d2514f71e51$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 $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type  })=>{
+const $8fe8c7100159474e$export$788cb893d96254c8 = ({ state: state , mode: mode , ...props })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
+    const getUserMediaMutation = (0, $d775b8f941514ed9$export$d791e41b9a4de1f2)({
+        audio: true,
+        video: true
+    });
     const [permissionsState, setPermissionsState] = (0, $3Sbms$useState)("idle");
     (0, $3Sbms$useEffect)(()=>{
         const { deviceState: deviceState  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
-        if (deviceState.screenshare.enabled && type === "screen") return setPermissionsState("granted");
-        if (deviceState.camera.enabled && type !== "screen") return setPermissionsState("granted");
+        if (deviceState.screenshare.enabled) return setPermissionsState("granted");
+        if (deviceState.camera.enabled) return setPermissionsState("granted");
         setPermissionsState("idle");
     }, [
-        type
+        mode
     ]);
-    const { deviceState: deviceState  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
-    const [isRoomReady, setRoomReady] = (0, $3Sbms$useState)(false);
     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 === "photo" ? "photo" : "video";
-    const onEnterRoom = ()=>setRoomReady(true);
-    const onLeaveRoom = ()=>setRoomReady(false);
     const ref = (0, $3Sbms$useRef)(null);
-    const title = (0, $3Sbms$useMemo)(()=>{
-        if (permissionsState === "refused") return t("recorder.permissionDeniedTitle");
-        if (type === "photo") return t("recorder.photoInstructionsTitle");
-        else if (type === "video") return t("recorder.videoInstructionsTitle");
-        else return t("recorder.screenShareInstructionsTitle");
-    }, [
-        permissionsState,
-        type,
-        t
-    ]);
-    (0, $3Sbms$useEffect)(()=>{
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
-        return ()=>{
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
-        };
-    }, []);
-    const permissionsInstructionIndex = Number(permissionsState !== "granted");
-    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+    const title = mode === "photo" ? t("recorder.photoInstructionsTitle") : t("recorder.videoInstructionsTitle");
+    const mediaInstruction = [
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.allowAccessOnPrompt",
+            children: [
+                "When prompted, ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: "allow access"
+                }),
+                " to camera and microphone."
+            ]
+        })
+    ];
+    const instructionPhoto = [
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.tapPhotoButton",
+            com: true,
+            children: [
+                "Tap the ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: " Camera button"
+                }),
+                " to take a photo."
+            ]
+        }),
+        t("recorder.instructions.multiplePhotos"),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.reviewAndSendPhotos",
+            children: [
+                "You can review your photo and then ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: "send it when you're done."
+                })
+            ]
+        })
+    ];
+    const instructionVideo = [
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.tapVideoButton",
+            children: [
+                "Tap the ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: " Record button"
+                }),
+                " to start a recording."
+            ]
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.videoSpeech",
+            children: [
+                "You can ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: "speak during"
+                }),
+                " the recording for added detail."
+            ]
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.tapStopVideoButton",
+            children: [
+                "When you're finished, tap the ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: " Stop button"
+                }),
+                "."
+            ]
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.reviewAndSendVideos",
+            children: [
+                "You can review your video and then ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
+                    children: "send it when you're done"
+                }),
+                "."
+            ]
+        })
+    ];
+    const instructions = [];
+    if (!getUserMediaMutation.savedPermissions.audio) instructions.push(...mediaInstruction);
+    instructions.push(...mode === "photo" ? instructionPhoto : instructionVideo);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4381ee6dfabb36f4$export$2b77a92f1a5ad772), {
         title: title,
         state: state,
-        centered: permissionsState !== "refused",
+        centered: true,
         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: t("recorder.allowAccess")
-                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
-                    children: permissionsState === "granted" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                        fullWidth: true,
-                        onPress: state.close,
-                        children: t("recorder.okay")
-                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                        fullWidth: true,
-                        isDisabled: permissionsState === "requesting" || isRoomReady === false,
-                        onPress: async ()=>{
-                            setPermissionsState("requesting");
-                            try {
-                                if (!deviceState.microphone.enabled) {
-                                    const mediaResult = await navigator.mediaDevices.getUserMedia({
-                                        audio: true,
-                                        video: type !== "screen"
-                                    });
-                                    mediaResult.getTracks().forEach((track)=>track.stop());
-                                }
-                                if (!deviceState.microphone.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
-                                if (!deviceState.camera.enabled && type !== "screen") {
-                                    await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableScreenshare();
-                                    await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
-                                        resolution: "vga",
-                                        frameRate: 20,
-                                        facingMode: "environment"
-                                    });
-                                }
-                                if (!deviceState.screenshare.enabled && type === "screen") {
-                                    await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableVideo();
-                                    await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableScreenshare({
-                                        audioTransportOption: "mix"
-                                    });
-                                }
-                                setPermissionsState("granted");
-                                state.close();
-                            } catch (error) {
-                                console.log("error", error);
-                                setPermissionsState("refused");
-                            }
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {}),
-                            type !== "screen" ? t("recorder.allowCamMicAccess") : t("recorder.allowScreenShareAccess")
-                        ]
-                    })
-                })
-            }),
+        ...props,
         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)($96999d2514f71e51$var$Text, {
-                        children: t("recorder.permissionDeniedDescription")
-                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-                        children: [
-                            permissionsState !== "granted" && /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                index: 1,
-                                children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                    children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                        i18nKey: "recorder.instructions.allowAccessOnPrompt",
-                                        children: [
-                                            "When prompted, ",
-                                            /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                children: "allow access"
-                                            }),
-                                            " to camera and microphone."
-                                        ]
-                                    })
+                    children: instructions.map((value, 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 + 1
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                    className: "w-full text-base text-primaryLight font-normal leading-[20px]",
+                                    children: value
                                 })
-                            }),
-                            type === "photo" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-                                children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.tapPhotoButton",
-                                                com: true,
-                                                children: [
-                                                    "Tap the ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: " Camera button"
-                                                    }),
-                                                    " to take a photo."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 2 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: t("recorder.instructions.multiplePhotos")
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.reviewAndSendPhotos",
-                                                children: [
-                                                    "You can review your photo and then ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: "send it when you're done."
-                                                    })
-                                                ]
-                                            })
-                                        })
-                                    })
-                                ]
-                            }),
-                            type === "video" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-                                children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.tapVideoButton",
-                                                children: [
-                                                    "Tap the ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: " Record button"
-                                                    }),
-                                                    " to start a recording."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 2 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.videoSpeech",
-                                                children: [
-                                                    "You can ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: "speak during"
-                                                    }),
-                                                    " the recording for added detail."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.tapStopVideoButton",
-                                                children: [
-                                                    "When you're finished, tap the ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: " Stop button"
-                                                    }),
-                                                    "."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 4 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.reviewAndSendVideos",
-                                                children: [
-                                                    "You can review your video and then ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: "send it when you're done"
-                                                    }),
-                                                    "."
-                                                ]
-                                            })
-                                        })
-                                    })
-                                ]
-                            }),
-                            type === "screen" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-                                children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.tapScreenShareButton",
-                                                children: [
-                                                    "Tap on",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: " Record my screen"
-                                                    }),
-                                                    " to start a recording."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 2 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.videoSpeech",
-                                                children: [
-                                                    "You can ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: "speak during"
-                                                    }),
-                                                    " the recording for added detail."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.tapStopScreenShareButton",
-                                                children: [
-                                                    "When you're finished, tap on ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: "Stop recording"
-                                                    }),
-                                                    "."
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
-                                        index: 4 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
-                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                                i18nKey: "recorder.instructions.reviewAnsSendScreenShare",
-                                                children: [
-                                                    "You can review your video and then ",
-                                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
-                                                        children: "send it when you're done"
-                                                    }),
-                                                    "."
-                                                ]
-                                            })
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    })
+                            ]
+                        }, index))
                 }),
-                permissionsState !== "refused" && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                /*#__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`,
+                        src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${mode}-${videoLength}.mp4`,
                         playsInline: true,
                         autoPlay: true,
                         muted: true,
@@ -11330,108 +11535,192 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
 };
 
 
+const $1e6ffcfc059a8789$export$cc010f6d61e5dce8 = (delta)=>{
+    const d = [
+        Math.floor(delta / 60),
+        Math.round(delta % 60)
+    ].map((n)=>`${n < 10 ? "0" : ""}${n}`);
+    return d.join(":");
+};
+function $1e6ffcfc059a8789$export$3ae94a2503e890a1(date) {
+    const dateFormat = new Intl.DateTimeFormat("default", {
+        dateStyle: "short"
+    });
+    const timeFormat = new Intl.DateTimeFormat("default", {
+        hour: "numeric",
+        minute: "2-digit"
+    });
+    return `${dateFormat.format(date)} at ${timeFormat.format(date)}`;
+}
 
 
 
 
 
-
-
-
-
-const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
+const $c9e5583d5dd9328d$var$browser = (0, $3Sbms$bowser).parse(window.navigator.userAgent);
+const $c9e5583d5dd9328d$export$5b8e641151f8011d = ({ recorderState: recorderState  })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    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)(()=>{
-        const url = options.sharedURL || window.location.href;
-        $3Sbms$toCanvas(QRCodeRef.current, url, {
-            width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
-            errorCorrectionLevel: "Q",
-            margin: 0
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const getUserMediaMutation = (0, $d775b8f941514ed9$export$d791e41b9a4de1f2)({
+        audio: true,
+        video: true
+    });
+    const [countdownVisible, setCountdownVisible] = (0, $3Sbms$useState)(false);
+    const videoElementRef = (0, $3Sbms$useRef)(null);
+    const isDesktop = $c9e5583d5dd9328d$var$browser.platform.type === "desktop";
+    const instructionModalState = (0, $3Sbms$useOverlayTriggerState)({
+        defaultOpen: !isDesktop
+    });
+    const [isInstructionVideoDisplayed, setInstructionVideoDisplayed] = (0, $3Sbms$useState)(false);
+    const [isInstructionPhotoDisplayed, setInstructionPhotoDisplayed] = (0, $3Sbms$useState)(false);
+    const qrCodeModalState = (0, $3Sbms$useOverlayTriggerState)({
+        defaultOpen: isDesktop
+    });
+    const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
+    const exitStreaming = (0, $3Sbms$useCallback)(()=>{
+        setCountdownVisible(false);
+    }, []);
+    const onPhotoCapture = async (videoElement)=>{
+        const timestamp = Date.now();
+        recorderState.setAssetLoading(true);
+        const image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElement);
+        const { url: url , assetId: assetId  } = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(image);
+        recorderState.setAssetLoading(false);
+        recorderState.setAssets([
+            ...recorderState.assets,
+            {
+                type: "photo",
+                timestamp: timestamp,
+                objectUrl: url,
+                assetId: assetId
+            }
+        ]);
+    };
+    const enableMedia = async ()=>{
+        getUserMediaMutation.mutate(undefined, {
+            onError: ()=>{
+                recorderState.permissionBlockedModalState.setOpen(true);
+            },
+            onSettled: ()=>undefined,
+            onSuccess: async ()=>{
+                instructionModalState.close();
+                const { deviceState: deviceState  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
+                getUserMediaMutation.reset();
+                if (!deviceState.microphone.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
+                if (!deviceState.camera.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
+                    resolution: "vga",
+                    frameRate: 20,
+                    facingMode: "environment"
+                });
+            }
         });
+    };
+    (0, $3Sbms$useEffect)(()=>{
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("recordStopped", exitStreaming);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("recordStopped", exitStreaming);
+        };
     }, [
-        QRCodeContainerWidth,
-        options.sharedURL
+        exitStreaming
     ]);
-    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
-        centered: true,
-        title: t("recorder.switchToMobileTitle"),
-        description: t("recorder.switchToMobileDescription"),
-        isDismissable: false,
-        state: state,
-        primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                fullWidth: true,
-                onPress: ()=>{
-                    setReady(true);
-                    state.close();
-                },
-                children: t("recorder.useDesktopVersion")
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: (0, $3Sbms$classnames)("bg-[#000] w-full h-full justify-center flex flex-col antialiased inter", {}),
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8fe8c7100159474e$export$788cb893d96254c8), {
+                state: instructionModalState,
+                mode: recorderState.mode,
+                primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                        fullWidth: true,
+                        variant: "blue",
+                        isDisabled: !selfPeerId || getUserMediaMutation.isLoading,
+                        onPress: ()=>{
+                            if (!getUserMediaMutation.savedPermissions.audio) return enableMedia();
+                            instructionModalState.close();
+                        },
+                        children: !getUserMediaMutation?.savedPermissions.audio ? /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {}),
+                                t("recorder.allowCamMicAccess")
+                            ]
+                        }) : t("recorder.okay")
+                    })
             }),
-        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",
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $dcecc67f51a66b8d$export$f9d8408fefd786da), {
+                state: qrCodeModalState,
+                onClose: instructionModalState.open
+            }),
+            (recorderState.mode === "video" || recorderState.streaming) && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "text-base text-white text-center font-medium pt-2.5",
+                children: (0, $1e6ffcfc059a8789$export$cc010f6d61e5dce8)(recorderState.timer)
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex-1 min-h-0 p-2.5 ",
+                children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    className: "relative w-full h-full rounded-[10px] ",
                     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), {})
+                        countdownVisible && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $209863c2c7a7b6c0$export$53819c0e58f98d49), {
+                            initialValue: 3,
+                            onFinish: ()=>{
+                                setCountdownVisible(false);
+                                recorderState.setStartRecordTime(Date.now());
+                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord().then(()=>{
+                                    if (videoElementRef.current) recorderState.captureThumbnail(videoElementRef.current);
+                                });
+                            }
                         }),
-                        /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
-                            ref: QRCodeRef
+                        flashAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
+                            onAnimationEnd: ()=>{
+                                setFlashAnimation(false);
+                                recorderState.assetsPopupState.open();
+                            }
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7dc8075008cdffc1$export$287f8fcc69caf433), {
+                            ref: videoElementRef
                         })
                     ]
-                }),
-                /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
-                    className: "flex items-center justify-center text-xs text-primaryLight text-center",
-                    children: t("recorder.scanQRCode")
                 })
-            ]
-        })
-    });
-};
-
-
-function $d48329960b5b412c$export$fc3bf4634b488af8({ mode: mode  }) {
-    const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
-    const desktop = orientation === "landscape";
-    const [ready, setReady] = (0, $3Sbms$useState)(mode === "screen" || !desktop);
-    const [isInstructionsModalOpen, setIsInstructionsModalOpen] = (0, $3Sbms$useState)(ready);
-    const modalState = (0, $3Sbms$useOverlayTriggerState)({
-        isOpen: isInstructionsModalOpen && ready,
-        onOpenChange: setIsInstructionsModalOpen
-    });
-    (0, $3Sbms$useEffect)(()=>{
-        setIsInstructionsModalOpen(true);
-    }, [
-        ready,
-        mode
-    ]);
-    return {
-        mode: mode,
-        modalState: modalState,
-        ready: ready,
-        setReady: setReady
-    };
-}
-const $d48329960b5b412c$export$bee10e8ab511933f = ({ state: state  })=>{
-    const [isSwitchToMobileModalOpen, setIsSwitchToMobileOpen] = (0, $3Sbms$useState)(!state.ready);
-    const switchToMobileModalState = (0, $3Sbms$useOverlayTriggerState)({
-        isOpen: isSwitchToMobileModalOpen,
-        onOpenChange: setIsSwitchToMobileOpen
-    });
-    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $96999d2514f71e51$export$788cb893d96254c8), {
-                state: state.modalState,
-                type: state.mode
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1c8fc500105e5c78$export$f9d8408fefd786da), {
-                state: switchToMobileModalState,
-                setReady: state.setReady
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex justify-center px-2.5 pb-2.5 z-10",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a180b95972399d58$export$11a6fe490bbc4873), {
+                    state: recorderState,
+                    changeMode: (mode)=>{
+                        recorderState.setMode(mode);
+                        if (mode === "photo" && !isInstructionPhotoDisplayed) {
+                            setInstructionPhotoDisplayed(true);
+                            instructionModalState.open();
+                        }
+                        if (mode === "video" && !isInstructionVideoDisplayed) {
+                            setInstructionVideoDisplayed(true);
+                            instructionModalState.open();
+                        }
+                    },
+                    thumbnail: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7227f0300555e42c$export$1cd1efc78cb52ca5), {
+                        asset: recorderState.assets[recorderState.assets.length - 1],
+                        onClick: recorderState.assetsPopupState.open
+                    }),
+                    onSwitch: ()=>{
+                        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).rotateVideo();
+                    },
+                    onCapturePress: ()=>{
+                        if (recorderState.mode === "photo" && videoElementRef.current) {
+                            onPhotoCapture(videoElementRef.current);
+                            setFlashAnimation(true);
+                        }
+                        if (recorderState.mode !== "photo" && !recorderState.streaming) {
+                            recorderState.setStreaming(true);
+                            setCountdownVisible(true);
+                        }
+                        if (recorderState.mode !== "photo" && recorderState.streaming) {
+                            exitStreaming();
+                            if (recorderState.startRecordTime) {
+                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopRecord();
+                                recorderState.setAssetLoading(true);
+                                recorderState.assetsPopupState.open();
+                            }
+                        }
+                    }
+                })
             })
         ]
     });
@@ -11441,128 +11730,232 @@ const $d48329960b5b412c$export$bee10e8ab511933f = ({ state: state  })=>{
 
 
 
-const $39932392769664d0$export$4e594bceac139abd = (props)=>{
+
+
+
+
+
+
+
+
+
+const $ad3ba5899eb05ecf$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+        className: "text-white font-medium",
+        children: children
+    });
+const $ad3ba5899eb05ecf$export$f361d4ae234b90f4 = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-        className: (0, $3Sbms$classnames)("flex rounded-full  h-[40px] p-[10px] border-2 border-white text-white justify-center items-center align-middle", "font-semibold", "cursor-pointer", {
-            "bg-[#f12828]": !props.state.streaming
+    const instructions = [
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.tapVideoButton",
+            children: [
+                "Tap the ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {
+                    sideColor: "#FFFFFF",
+                    mainColor: "#E5484D"
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
+                    children: " Record button"
+                }),
+                " to start a recording."
+            ]
         }),
-        onClick: ()=>props.onCapturePress(),
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-            children: props.state.streaming ? t("recorder.stopScreenShareButton") : t("recorder.startScreenShareButton")
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.screenShareInstruction"
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.videoSpeech",
+            children: [
+                "You can ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
+                    children: "speak during"
+                }),
+                " the recording for added detail."
+            ]
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.tapStopVideoButton",
+            children: [
+                "When you're finished, tap the ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {
+                    sideColor: "#FFFFFF",
+                    mainColor: "#E5484D"
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
+                    children: " Stop button"
+                }),
+                "."
+            ]
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.reviewAndSendVideos",
+            children: [
+                "You can review your video and then ",
+                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
+                    children: "send it when you're done"
+                }),
+                "."
+            ]
         })
-    });
-};
-const $39932392769664d0$export$f9da3144ae2525a3 = (props)=>{
-    return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-        className: (0, $3Sbms$classnames)("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.mode === "photo" ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
+    ];
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+        className: "flex flex-row gap-[20px] w-full justify-between px-[60px]",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                className: "flex flex-col gap-[10px] w-[50%] items-start justify-center",
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                        className: " text-white font-semibold text-lg pb-[20px]",
+                        children: t("recorder.screenTitle")
+                    }),
+                    instructions.map((value, index)=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "flex flex-row items-center justify-center gap-[20px]",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                    className: "flex items-center justify-center min-w-[24px] h-[24px] rounded-[50%] bg-[#171717] text-white",
+                                    children: index + 1
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                    className: "w-full text-base text-white font-normal leading-[20px]",
+                                    children: value
+                                })
+                            ]
+                        }, index))
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex items-center justify-center overflow-hidden w-[50%] box-border",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+                    src: `${"https://stream-assets.snapcall.io"}/animations/desktop-assist-onboarding-screen.mp4`,
+                    playsInline: true,
+                    autoPlay: true,
+                    muted: true,
+                    loop: true,
+                    className: "object-fit border-[white] border-[2px] rounded-[8px]"
+                })
             })
-        })
+        ]
     });
 };
 
 
-function $a94f21ef9007b90a$export$bd7b6af6aa16550c({ state: state = "photo"  }) {
-    const [currentMode, setMode] = (0, $3Sbms$useState)(state);
-    const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
-    return {
-        mode: currentMode,
-        setMode: (mode)=>{
-            setMode(mode);
-        },
-        streaming: streaming,
-        setStreaming: setStreaming
-    };
-}
-const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
+const $a3830e399ecc7fc4$export$2d78fbe400238869 = ({ recorderState: recorderState  })=>{
+    const videoElementRef = (0, $3Sbms$useRef)(null);
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    const setupModalsState = (0, $d48329960b5b412c$export$fc3bf4634b488af8)({
-        mode: props.state.mode
+    const getUserMediaMutation = (0, $d775b8f941514ed9$export$d791e41b9a4de1f2)({
+        audio: true
     });
+    const [state, setState] = (0, $3Sbms$useState)("base");
+    (0, $3Sbms$useEffect)(()=>{
+        if (recorderState.mode !== "video") recorderState.setMode("video");
+    }, [
+        recorderState
+    ]);
+    const screenshareDisabled = (0, $3Sbms$useCallback)(()=>{
+        recorderState.assetsPopupState.setOpen(true);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopRecord();
+        setState("base");
+    }, [
+        recorderState
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareDisabled", screenshareDisabled);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", screenshareDisabled);
+        };
+    }, [
+        screenshareDisabled
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        const onStopRecord = ()=>{
+            recorderState.assetsPopupState.setOpen(true);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableScreenshare();
+            setState("base");
+        };
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("recordStopped", onStopRecord);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
+        };
+    }, [
+        recorderState.assetsPopupState
+    ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-        className: "flex flex-col bg-primary h-[150px] w-full max-w-[500px] rounded-[15px] p-2.5 gap-2.5",
+        className: "w-full h-full bg-black flex flex-col items-center justify-center py-[125px]",
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d48329960b5b412c$export$bee10e8ab511933f), {
-                state: setupModalsState
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                className: "flex flex-1 flex-row px-[10px] w-full",
+            state !== "live" && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                className: "relative bg-cover box-border rounded-[8px] w-full h-full max-w-[1116px] bg-[url('https://cdn.snapcall.io/img/assist/gradient-bg.jpg')] flex flex-col items-center justify-center ",
                 children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ad3ba5899eb05ecf$export$f361d4ae234b90f4), {}),
                     /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                        className: "flex flex-row flex-auto items-center gap-[10px]",
+                        className: "absolute w-[486px] bottom-[-85px] left-[calc(50%-243px)] flex flex-col gap-[7px] items-center justify-center",
                         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: [
-                            props.state.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-                                children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
-                                        onPress: ()=>{
-                                            if (!props.state.streaming) {
-                                                props.state.setMode("photo");
-                                                setupModalsState.modalState.open();
-                                            }
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f3d9f6a4bbe7f552$export$4e594bceac139abd), {
+                                state: state,
+                                onCapturePress: ()=>{
+                                    setState("request");
+                                    recorderState.setStreaming(true);
+                                    getUserMediaMutation.mutate(undefined, {
+                                        onError: ()=>{
+                                            recorderState.permissionBlockedModalState.setOpen(true);
                                         },
-                                        isSelected: props.state.mode === "photo",
-                                        children: t("misc.photo")
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
-                                        onPress: ()=>{
-                                            if (!props.state.streaming) {
-                                                props.state.setMode("video");
-                                                setupModalsState.modalState.open();
+                                        onSuccess: async ()=>{
+                                            try {
+                                                const { deviceState: deviceState  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
+                                                getUserMediaMutation.reset();
+                                                if (!deviceState.microphone.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
+                                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableScreenshare({
+                                                    audioTransportOption: "mix"
+                                                });
+                                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord().then(()=>{
+                                                    setTimeout(()=>{
+                                                        if (videoElementRef.current) recorderState.captureThumbnail(videoElementRef.current);
+                                                    }, 1000);
+                                                });
+                                                setState("live");
+                                                recorderState.setStartRecordTime(Date.now());
+                                            } catch (err) {
+                                                console.log(err);
+                                                recorderState.permissionBlockedModalState.setOpen(true);
                                             }
-                                        },
-                                        isSelected: props.state.mode === "video",
-                                        children: t("misc.video")
-                                    })
-                                ]
+                                        }
+                                    });
+                                }
                             }),
-                            props.state.mode === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5a48b7481979330f$export$d2b052e7b4be1756), {
-                                onPress: ()=>{
-                                    if (!props.state.streaming) {
-                                        props.state.setMode("screen");
-                                        setupModalsState.modalState.open();
-                                    }
-                                },
-                                isSelected: props.state.mode === "screen",
-                                children: t("misc.screen")
+                            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                className: "text-white text-center font-small text-sm overflow-visible",
+                                children: t("recorder.limit")
                             })
                         ]
                     })
                 ]
             }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                className: "flex flex-row flex-1 items-center justify-between w-full ",
+                className: (0, $3Sbms$classnames)("relative", {
+                    "w-0 h-0": state !== "live",
+                    "min-w-[200px] max-h-[100%]": state === "live"
+                }),
                 children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                        className: "w-[60px] h-[60px]",
-                        children: props.thumbnail
-                    }),
-                    props.state.mode === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $39932392769664d0$export$4e594bceac139abd), {
-                        ...props
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7dc8075008cdffc1$export$8c410456846722ea), {
+                        ref: videoElementRef
                     }),
-                    props.state.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $39932392769664d0$export$f9da3144ae2525a3), {
-                        ...props
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                        onClick: props.onSwitch,
-                        className: (0, $3Sbms$classnames)("rounded-full w-[56px] h-[56px] flex items-center justify-center", {
-                            "bg-[#565656] cursor-pointer": props.state.mode !== "screen"
-                        }),
-                        children: props.state.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $58d405d56c1abe95$export$aefffb14595958fe), {})
+                    state === "live" && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                        className: "absolute w-[86px] h-[86px] bottom-[-65px] left-[calc(50%-43px)]",
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f3d9f6a4bbe7f552$export$4e594bceac139abd), {
+                                onCapturePress: ()=>{
+                                    recorderState.setAssetLoading(true);
+                                    (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableScreenshare();
+                                },
+                                state: state
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                                className: "text-white font-small text-sm text-center pt-[14px]",
+                                children: [
+                                    (0, $1e6ffcfc059a8789$export$cc010f6d61e5dce8)(recorderState.timer),
+                                    " / 05:00"
+                                ]
+                            })
+                        ]
                     })
                 ]
             })
@@ -11576,6 +11969,34 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
 
 
 
+const $99a415196205cb06$export$c31ece446899894 = ({ state: state  })=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4381ee6dfabb36f4$export$2b77a92f1a5ad772), {
+        title: t("recorder.permissionDeniedTitle"),
+        state: state,
+        centered: false,
+        isDismissable: false,
+        primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                variant: "blue",
+                fullWidth: true,
+                onPress: ()=>window.location.reload(),
+                children: t("recorder.allowAccess")
+            }),
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+            className: "flex flex-col gap-[20px]",
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex flex-col gap-[10px]",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                    className: "w-full text-base text-primaryLight font-normal leading-[20px]",
+                    children: t("recorder.permissionDeniedDescription")
+                })
+            })
+        })
+    });
+};
+
+
+
 
 
 
@@ -11583,7 +12004,12 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
 
 
 
-function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
+
+
+
+
+
+function $7f25a3e9cee224b0$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));
@@ -11591,7 +12017,7 @@ function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
     const [exited, setExited] = (0, $3Sbms$useState)(!state.isOpen);
     const viewport = (0, $3Sbms$useViewportSize)();
     const maxHeight = viewport.height - 64;
-    const desktop = orientation === "landscape";
+    const [desktop] = (0, $3Sbms$useState)(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$Overlay1), {
@@ -11610,7 +12036,7 @@ function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
                 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 inter", desktop ? "items-center" : "items-end"),
+                className: (0, $3Sbms$classnames)("fixed z-[100] inset-0 bg-underlay flex justify-center inter", desktop ? "items-center" : "items-end h-full"),
                 ...underlayProps,
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
                     in: state.isOpen,
@@ -11652,49 +12078,6 @@ function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
 
 
 
-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",
@@ -11711,40 +12094,30 @@ const $a879d6bc7f43b0c5$export$28e1ba20e0688eb7 = ()=>/*#__PURE__*/ (0, $3Sbms$j
 
 
 
-const $a4b1c68ef470f35c$export$f56b3b5841ad32ae = ({ asset: asset , state: state  })=>{
-    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91e337bf8187124b$export$a703eb468fcf7e69), {
+const $c22caa553a50352e$export$f56b3b5841ad32ae = ({ asset: asset , state: state  })=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $08835f3b5a72d418$export$a703eb468fcf7e69), {
         state: state,
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-            className: "flex flex-col items-center w-screen h-screen p-[15px] gap-[10px]",
+            className: "flex flex-col items-center justify-center w-screen h-screen p-[15px] gap-[10px]",
             children: [
-                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                    className: "flex items-center max-w-[400px] w-full h-full",
-                    children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                        className: "min-w-full rounded-[10px] overflow-hidden",
-                        children: [
-                            asset.type === "picture" && /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
-                                src: asset.objectUrl,
-                                alt: `Asset-${asset.assetId}`,
-                                className: "object-fill"
-                            }),
-                            asset.type === "video" && /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
-                                src: asset.objectUrl,
-                                playsInline: true,
-                                autoPlay: true,
-                                controls: true
-                            })
-                        ]
-                    })
+                asset.type === "photo" && /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+                    src: asset.objectUrl,
+                    alt: `Asset-${asset.assetId}`,
+                    className: "flex-1 object-cover rounded-[10px] max-h-[90%] max-w-[90%] mb-[9px]"
+                }),
+                asset.type === "video" && /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+                    src: asset.objectUrl,
+                    playsInline: true,
+                    autoPlay: true,
+                    controls: true,
+                    className: "flex-1 rounded-[10px] min-w-full max-h-[90%] max-w-[90%] pb-[9px]"
                 }),
-                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                    className: "max-w-[135px] w-1/3",
-                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                        onPress: state.close,
-                        variant: "tertiary",
-                        size: "large",
-                        fullWidth: true,
-                        children: "Close"
-                    })
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                    onPress: state.close,
+                    variant: "tertiary",
+                    size: "large",
+                    className: "w-[135px]",
+                    children: "Close"
                 })
             ]
         })
@@ -11752,20 +12125,23 @@ const $a4b1c68ef470f35c$export$f56b3b5841ad32ae = ({ asset: asset , state: state
 };
 
 
-const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset  })=>{
+
+const $fb723e1b00f53002$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset  })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
     const confirmRemovalModalState = (0, $3Sbms$useOverlayTriggerState)({});
     const previewAssetModalProps = (0, $3Sbms$useOverlayTriggerState)({});
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-        className: "flex flex-row justify-between items-center",
+        className: "flex flex-row justify-between items-center ",
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4381ee6dfabb36f4$export$2b77a92f1a5ad772), {
                 title: t("recorder.confirmRemovalTitle"),
                 state: confirmRemovalModalState,
                 description: t("recorder.confirmRemovalDescription"),
-                primaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                primaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                        fullWidth: true,
+                        variant: "blue",
                         onPress: async ()=>{
-                            await removeAsset(asset);
+                            await removeAsset?.(asset);
                             close();
                         },
                         children: [
@@ -11773,16 +12149,20 @@ const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index
                             t("misc.confirm")
                         ]
                     }),
-                secondaryAction: t("misc.cancel")
+                secondaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                        fullWidth: true,
+                        variant: "tertiary",
+                        children: t("misc.cancel")
+                    })
             }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                className: "flex flex-row gap-[10px] items-center",
+                className: "flex flex-row gap-[10px] items-center justify-between",
                 children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a4b1c68ef470f35c$export$f56b3b5841ad32ae), {
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c22caa553a50352e$export$f56b3b5841ad32ae), {
                         state: previewAssetModalProps,
                         asset: asset
                     }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7227f0300555e42c$export$1cd1efc78cb52ca5), {
                         asset: asset,
                         onClick: previewAssetModalProps.open
                     }),
@@ -11792,17 +12172,17 @@ const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index
                             hyphens: "manual"
                         },
                         children: [
-                            asset.type === "picture" ? t("misc.photo") : t("misc.video"),
+                            asset.type === "photo" ? t("misc.photo") : t("misc.video"),
                             " ",
                             index + 1,
                             " \xb7",
                             " ",
-                            (0, $92672d57809ea9d3$export$3ae94a2503e890a1)(new Date(asset.timestamp))
+                            (0, $1e6ffcfc059a8789$export$3ae94a2503e890a1)(new Date(asset.timestamp))
                         ]
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+            removeAsset && /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
                 className: "text-xs font-bold underline cursor-pointer ml-[10px]",
                 onClick: confirmRemovalModalState.open,
                 children: t("misc.remove")
@@ -11814,7 +12194,7 @@ const $77fb06ba253d6f7c$export$c9169049516d8bcf = ({ asset: asset , index: index
 
 
 
-const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+const $6749624e70bad8a6$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", {
@@ -11822,7 +12202,7 @@ const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$j
                 children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$reactcontentloader), {
                     width: 360,
                     height: 93,
-                    foregroundColor: "#EBEBEB",
+                    foregroundColor: "#C7DEFF",
                     children: [
                         /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
                             x: 0,
@@ -11852,11 +12232,11 @@ const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$j
                 })
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] border border-primaryLight mt-[10px]",
+                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] bg-[#F7F7F7] mt-[10px]",
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$reactcontentloader), {
                     width: 120,
                     height: 14,
-                    foregroundColor: "#EBEBEB",
+                    foregroundColor: "#C7DEFF",
                     children: /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
                         x: 0,
                         y: 0,
@@ -11868,11 +12248,11 @@ const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$j
                 })
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] bg-primary mt-[10px]",
+                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] bg-[#C7DEFF] mt-[10px]",
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$reactcontentloader), {
                     width: 120,
                     height: 14,
-                    foregroundColor: "#EBEBEB",
+                    foregroundColor: "#C7DEFF",
                     children: /*#__PURE__*/ (0, $3Sbms$jsx)("rect", {
                         x: 0,
                         y: 0,
@@ -11887,35 +12267,28 @@ const $7436fc0a14c16764$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $3Sbms$j
     });
 
 
-const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading  })=>{
+const $ec9697affdd50464$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading , recorderState: recorderState  })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    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", {
+    const [desktop] = (0, $3Sbms$useState)(orientation === "landscape");
+    const mode = recorderState.mode;
+    const assetTitle = mode === "photo" ? t("misc.photo") : t("misc.video");
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
+            in: state.isOpen,
+            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$jsxs)("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-[450px]" : "flex-col items-center text-center w-[320px]"),
                         children: [
                             /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
@@ -11926,74 +12299,75 @@ const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: sta
                                 className: "text-sm text-white",
                                 children: [
                                     t("recorder.elementBeingProcessed", {
-                                        type: loading === "picture" ? t("misc.photo").toLocaleLowerCase() : t("misc.video").toLocaleLowerCase()
+                                        type: assetTitle.toLocaleLowerCase()
                                     }),
-                                    loading === "video" && t("recorder.waitVideo")
+                                    " ",
+                                    mode === "video" && t("recorder.waitVideo")
                                 ]
                             })
                         ]
-                    })
-                })
-            }),
-            /*#__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$jsx)("h1", {
-                                    className: "text-lg first-letter:capitalize",
-                                    children: t("recorder.elementCaptureSuccess", {
-                                        type: t(`misc.${assetKind}`)
-                                    })
-                                }),
-                                /*#__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]",
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7f25a3e9cee224b0$export$4589ed81930b555c), {
+                        state: {
+                            ...state,
+                            close: loading ? ()=>{} : state.close
+                        },
+                        children: loading ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6749624e70bad8a6$export$4fa52f68b1c78fbf), {}) : /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "flex flex-col max-w-[400px] text-primary",
                             children: [
-                                assets.map((asset, index)=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $77fb06ba253d6f7c$export$c9169049516d8bcf), {
-                                        asset: asset,
-                                        index: index,
-                                        removeAsset: removeAsset
-                                    }, asset.assetId)),
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                                    variant: "secondary",
-                                    onPress: state.close,
-                                    children: t("recorder.takeNewElement", {
-                                        type: t(`misc.${assetKind}`).toLocaleLowerCase()
-                                    })
+                                /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                                    className: "flex flex-row justify-between p-[12px]",
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("h1", {
+                                            className: "text-lg first-letter:capitalize",
+                                            children: t("recorder.elementCaptureSuccess", {
+                                                type: assetTitle
+                                            })
+                                        }),
+                                        /*#__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$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                                    onPress: ()=>{
-                                        onSendAssets();
-                                        state.close();
-                                    },
-                                    children: assets.length > 1 ? t("recorder.sendElements", {
-                                        count: assets.length
-                                    }) : t("recorder.sendElement", {
-                                        type: t(`misc.${assetKind}`).toLocaleLowerCase()
-                                    })
+                                /*#__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, $fb723e1b00f53002$export$c9169049516d8bcf), {
+                                                asset: asset,
+                                                index: index,
+                                                removeAsset: removeAsset
+                                            }, asset.assetId)),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                                            variant: "tertiary",
+                                            onPress: state.close,
+                                            children: t("recorder.takeNewElement", {
+                                                type: assetTitle.toLocaleLowerCase()
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a6ff3d37cbdeb3a3$export$353f5b6fc5456de1), {
+                                            variant: "blue",
+                                            onPress: ()=>{
+                                                onSendAssets();
+                                                state.close();
+                                            },
+                                            children: assets.length > 1 ? t("recorder.sendElements", {
+                                                count: assets.length
+                                            }) : t("recorder.sendElement", {
+                                                type: assetTitle.toLocaleLowerCase()
+                                            })
+                                        })
+                                    ]
                                 })
                             ]
                         })
-                    ]
-                })
+                    })
+                ]
             })
-        ]
+        })
     });
 };
 
@@ -12002,118 +12376,35 @@ const $d4d374dc7955cc18$export$5c334f209b1aa661 = ({ assets: assets , state: sta
 
 
 
-
-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", {
-        className: "absolute w-full h-full flex justify-center items-center bg-black/[.6] z-50",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-            className: "text-white/80 text-[112px] font-medium",
-            children: countdown
-        })
+const $a8756e233448261f$export$3646917cb6200e2e = ({ state: state , assets: assets  })=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4381ee6dfabb36f4$export$2b77a92f1a5ad772), {
+        title: t("recorder.submissionTitle"),
+        state: state,
+        isDismissable: false,
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                className: "text-base text-primaryLight",
+                children: t("recorder.submissionDescription")
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex flex-col gap-[20px] border-t border-secondaryVLight pt-[20px]",
+                children: assets.map((asset, index)=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $fb723e1b00f53002$export$c9169049516d8bcf), {
+                        asset: asset,
+                        index: index,
+                        removeAsset: undefined
+                    }, asset.assetId))
+            })
+        ]
     });
 };
 
 
-
-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$var$dateFormat = new Intl.DateTimeFormat("default", {
-    dateStyle: "short"
-});
-const $92672d57809ea9d3$var$timeFormat = new Intl.DateTimeFormat("default", {
-    hour: "numeric",
-    minute: "2-digit"
-});
-function $92672d57809ea9d3$export$3ae94a2503e890a1(date) {
-    return `${$92672d57809ea9d3$var$dateFormat.format(date)} at ${$92672d57809ea9d3$var$timeFormat.format(date)}`;
-}
-const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
-    const { t: t  } = (0, $3Sbms$useTranslation)();
+const $b76354b532370976$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);
-    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 [facingMode, setFacingMode] = (0, $3Sbms$useState)("user");
-    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)({
-        state: options?.recorder?.defaultState || "photo"
-    });
-    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;
-        const { facingMode: newFacingMode  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
-        setFacingMode(newFacingMode);
-    };
-    const onScreenshareEnabled = (event)=>{
-        if (!videoElementRef.current) return;
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalScreenshare(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 submitAssetsModalState = (0, $3Sbms$useOverlayTriggerState)({});
+    const permissionBlockedModalState = (0, $3Sbms$useOverlayTriggerState)({});
+    const [thumbnailURL, setLastThumbnailURL] = (0, $3Sbms$useState)(undefined);
     const captureThumbnail = async (videoElement)=>{
         let image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(undefined, {
             addPlayWatermark: true
@@ -12121,173 +12412,83 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
         if (!image) image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElement, {
             addPlayWatermark: true
         });
-        await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveThumbnail(image);
+        const { url: url  } = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveThumbnail(image);
+        setLastThumbnailURL(url);
     };
+    const recorderState = (0, $448b01a7ea61a08a$export$c74cd098b7a410cb)({
+        mode: options?.recorder?.defaultMode || "photo",
+        requestedMedia: options?.recorder?.defaultMedia || "camera",
+        permissionBlockedModalState: permissionBlockedModalState,
+        captureThumbnail: captureThumbnail
+    });
     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);
+        const newAssets = recorderState.assets.filter((item)=>item.assetId !== asset.assetId);
+        recorderState.setAssets(newAssets);
+        if (newAssets.length < 1) recorderState.assetsPopupState.close();
     }, [
-        assets
+        recorderState
     ]);
-    (0, $3Sbms$useEffect)(()=>{
-        if (startRecordTime === undefined) return;
-        const interval = setInterval(()=>{
-            const delta = (Date.now() - startRecordTime) / 1000;
-            setTimer(delta);
-        }, 1000);
-        return ()=>clearInterval(interval);
+    const exitStreaming = (0, $3Sbms$useCallback)(()=>{
+        recorderState.setStreaming(false);
+        recorderState.setStartRecordTime(undefined);
+    }, [
+        recorderState
+    ]);
+    const onStopRecord = (0, $3Sbms$useCallback)((event)=>{
+        const { url: url , assetId: assetId  } = event.detail;
+        exitStreaming();
+        recorderState.setAssetLoading(false);
+        recorderState.setAssets([
+            ...recorderState.assets,
+            {
+                type: "video",
+                timestamp: Date.now(),
+                objectUrl: url,
+                assetId: assetId,
+                thumbnailURL: thumbnailURL
+            }
+        ]);
     }, [
-        startRecordTime
+        exitStreaming,
+        recorderState,
+        thumbnailURL
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareEnabled);
-        (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("screenshareEnabled", onScreenshareEnabled);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
         };
     }, [
         onStopRecord
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-        className: (0, $3Sbms$classnames)("bg-[#000] w-full h-full justify-center flex flex-col antialiased inter", {
-            "bg-[url('https://cdn.snapcall.io/img/assist/gradient-bg.jpg')] bg-cover": menuBarState.mode === "screen"
-        }),
+        className: "w-full h-full ",
         children: [
-            (menuBarState.mode === "video" || menuBarState.mode === "screen" && menuBarState.streaming) && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "text-base text-white text-center font-medium pt-2.5",
-                children: $92672d57809ea9d3$var$timerText(timer)
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $99a415196205cb06$export$c31ece446899894), {
+                state: permissionBlockedModalState
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "flex-1 min-h-0 p-2.5 ",
-                children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                    className: "relative w-full h-full rounded-[10px] ",
-                    children: [
-                        countdownVisible && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $db82628e5503d51b$export$53819c0e58f98d49), {
-                            initialValue: 3,
-                            onFinish: ()=>{
-                                setCountdownVisible(false);
-                                setStartRecordTime(Date.now());
-                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord().then(()=>{
-                                    if (videoElementRef.current) captureThumbnail(videoElementRef.current);
-                                });
-                            }
-                        }),
-                        flashAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
-                            onAnimationEnd: ()=>{
-                                setFlashAnimation(false);
-                                assetsPopupState.open();
-                            }
-                        }),
-                        menuBarState.mode === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                            className: "object-fit h-full",
-                            children: /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
-                                autoPlay: true,
-                                muted: true,
-                                playsInline: true,
-                                ref: videoElementRef,
-                                className: (0, $3Sbms$classnames)("w-full h-full rounded-[inherit]", {
-                                    "scale-x-[-1]": facingMode === "user" && menuBarState.mode !== "screen",
-                                    "max-w-[screen]": menuBarState.mode === "screen"
-                                })
-                            })
-                        }),
-                        menuBarState.mode !== "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
-                            autoPlay: true,
-                            muted: true,
-                            playsInline: true,
-                            ref: videoElementRef,
-                            className: (0, $3Sbms$classnames)("w-full h-full object-cover rounded-[inherit]", {
-                                "scale-x-[-1]": facingMode === "user"
-                            })
-                        })
-                    ]
-                })
+            recorderState.requestedMedia === "camera" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c9e5583d5dd9328d$export$5b8e641151f8011d), {
+                recorderState: recorderState
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "flex justify-center px-2.5 pb-2.5 z-10",
-                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.mode === "photo" && videoElementRef.current) {
-                            onPhotoCapture(videoElementRef.current);
-                            setFlashAnimation(true);
-                        }
-                        if (menuBarState.mode !== "photo" && !menuBarState.streaming) {
-                            menuBarState.setStreaming(true);
-                            setTimer(0);
-                            setCountdownVisible(true);
-                        }
-                        if (menuBarState.mode !== "photo" && menuBarState.streaming) {
-                            exitStreaming();
-                            if (startRecordTime) {
-                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopRecord();
-                                setAssetLoading("video");
-                                assetsPopupState.open();
-                            }
-                        }
-                    }
-                })
+            recorderState.requestedMedia === "screen" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a3830e399ecc7fc4$export$2d78fbe400238869), {
+                recorderState: recorderState
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d4d374dc7955cc18$export$5c334f209b1aa661), {
-                assets: assets,
-                state: assetsPopupState,
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ec9697affdd50464$export$5c334f209b1aa661), {
+                assets: recorderState.assets,
+                state: recorderState.assetsPopupState,
                 onSendAssets: ()=>{
                     (0, $c9e496369b59be7a$export$2f377c2162fd02b2).release();
-                    sendAssetsModalState.open();
+                    submitAssetsModalState.open();
                 },
                 removeAsset: removeAsset,
-                loading: assetLoading
+                loading: recorderState.assetLoading,
+                recorderState: recorderState
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
-                title: t("recorder.submissionTitle"),
-                state: sendAssetsModalState,
-                isDismissable: false,
-                children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                        className: "text-base text-primaryLight",
-                        children: t("recorder.submissionDescription")
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                        className: "flex flex-col gap-[20px] border-t border-secondaryVLight pt-[20px]",
-                        children: assets.map((asset, index)=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                                className: "flex flex-row items-center gap-[10px]",
-                                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",
-                                            " ",
-                                            $92672d57809ea9d3$export$3ae94a2503e890a1(new Date(asset.timestamp))
-                                        ]
-                                    })
-                                ]
-                            }))
-                    })
-                ]
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a8756e233448261f$export$3646917cb6200e2e), {
+                state: submitAssetsModalState,
+                assets: recorderState.assets
             })
         ]
     });
@@ -12360,15 +12561,17 @@ const $91d20ee7d2ade85c$export$669f6ea7d267feaf = ()=>{
 };
 
 
+
 const $26ed036cbc17809a$var$currentTheme = (0, $52580db2e49cdd90$export$3bfd0d5209a8006a)();
 const $26ed036cbc17809a$var$currentLanguage = (0, $a3e657fb86ae23f3$export$604ba5624273df44)();
+const $26ed036cbc17809a$var$queryClient = new (0, $3Sbms$QueryClient)();
 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?.enabled ? "recorder" : "streaming");
+    const [streamState, setStreamState] = (0, $3Sbms$useState)(options.recorder?.enabled ? "recorder" : "loading");
     const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $3Sbms$useState)(false);
     const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $3Sbms$useState)(false);
     const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $3Sbms$useState)(false);
@@ -12379,7 +12582,6 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const [profile, setProfile] = (0, $3Sbms$useState)({});
     const [muted, setMuted] = (0, $3Sbms$useState)(true);
     const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
-    const [isLoading, setLoading] = (0, $3Sbms$useState)(!options.recorder?.enabled);
     const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
     const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
@@ -12527,7 +12729,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
                 setBlockedDevicesPopupOpen(true);
                 console.error("User interaction trigger failed", userInteractionError);
             } finally{
-                setLoading(false);
+                setStreamState("streaming");
             }
         };
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
@@ -12537,73 +12739,76 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     }, [
         options
     ]);
-    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039).Provider, {
-        value: {
-            plan: plan,
-            permissions: permissions,
-            selfPeerId: selfPeerId,
-            streamUIContainerRef: streamUIContainerRef,
-            videosContainerRef: videosContainerRef,
-            remoteTilesContainerRef: remoteTilesContainerRef,
-            streamState: streamState,
-            setStreamState: setStreamState,
-            isQuickConnectPopupVisible: isQuickConnectPopupVisible,
-            setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible,
-            isSettingsMenuVisible: isSettingsMenuVisible,
-            setIsSettingsMenuVisible: setIsSettingsMenuVisible,
-            isYoutubePopupVisible: isYoutubePopupVisible,
-            setIsYoutubePopupVisible: setIsYoutubePopupVisible,
-            isLinksharePopupVisible: isLinksharePopupVisible,
-            setIsLinksharePopupVisible: setIsLinksharePopupVisible,
-            isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
-            setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
-            isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
-            setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
-            theme: theme,
-            setTheme: setTheme,
-            language: language,
-            setLanguage: setLanguage,
-            options: options,
-            profile: profile,
-            muted: muted,
-            streaming: streaming,
-            screensharing: screensharing,
-            isAgent: isAgent,
-            userInteractionTriggered: userInteractionTriggered,
-            orientation: orientation
-        },
-        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$ThemeProvider), {
-            theme: styledTheme,
-            children: [
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4fb4815baa04b470$export$20f257fc407da7a3), {}),
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d6008ea114507578$export$2e2bcd8739ae039), {}),
-                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4fb4815baa04b470$export$914ddf2021ea8ee6), {
-                    ref: streamUIContainerRef,
-                    children: [
-                        isLoading && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91d20ee7d2ade85c$export$669f6ea7d267feaf), {}),
-                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a42b2ef7646d035$export$2e2bcd8739ae039), {}),
-                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $805d92fa41e6e1b0$export$2e2bcd8739ae039), {}),
-                        isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6aca0f707e80bf63$export$2e2bcd8739ae039), {
-                            close: ()=>{
-                                setUserInteractionTriggered(true);
-                                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: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f235befa4cdc42d6$export$2e2bcd8739ae039), {}),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $cdab47bb8796991e$export$2e2bcd8739ae039), {}),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $69a9c49ece80e773$export$2e2bcd8739ae039), {}),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $01986a58bfba8001$export$2e2bcd8739ae039), {})
-                                ]
-                            })
-                        }),
-                        (streamState === "ended" || streamState === "terminated" || streamState === "full" || streamState === "expired") && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $df41bfe6da05853a$export$2e2bcd8739ae039), {})
-                    ]
-                })
-            ]
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$QueryClientProvider), {
+        client: $26ed036cbc17809a$var$queryClient,
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039).Provider, {
+            value: {
+                plan: plan,
+                permissions: permissions,
+                selfPeerId: selfPeerId,
+                streamUIContainerRef: streamUIContainerRef,
+                videosContainerRef: videosContainerRef,
+                remoteTilesContainerRef: remoteTilesContainerRef,
+                streamState: streamState,
+                setStreamState: setStreamState,
+                isQuickConnectPopupVisible: isQuickConnectPopupVisible,
+                setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible,
+                isSettingsMenuVisible: isSettingsMenuVisible,
+                setIsSettingsMenuVisible: setIsSettingsMenuVisible,
+                isYoutubePopupVisible: isYoutubePopupVisible,
+                setIsYoutubePopupVisible: setIsYoutubePopupVisible,
+                isLinksharePopupVisible: isLinksharePopupVisible,
+                setIsLinksharePopupVisible: setIsLinksharePopupVisible,
+                isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
+                setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
+                isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
+                setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
+                theme: theme,
+                setTheme: setTheme,
+                language: language,
+                setLanguage: setLanguage,
+                options: options,
+                profile: profile,
+                muted: muted,
+                streaming: streaming,
+                screensharing: screensharing,
+                isAgent: isAgent,
+                userInteractionTriggered: userInteractionTriggered,
+                orientation: orientation
+            },
+            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$ThemeProvider), {
+                theme: styledTheme,
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4fb4815baa04b470$export$20f257fc407da7a3), {}),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d6008ea114507578$export$2e2bcd8739ae039), {}),
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4fb4815baa04b470$export$914ddf2021ea8ee6), {
+                        ref: streamUIContainerRef,
+                        children: [
+                            streamState === "loading" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91d20ee7d2ade85c$export$669f6ea7d267feaf), {}),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a42b2ef7646d035$export$2e2bcd8739ae039), {}),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $805d92fa41e6e1b0$export$2e2bcd8739ae039), {}),
+                            isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6aca0f707e80bf63$export$2e2bcd8739ae039), {
+                                close: ()=>{
+                                    setUserInteractionTriggered(true);
+                                    setBlockedDevicesPopupOpen(false);
+                                }
+                            }),
+                            streamState === "recorder" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b76354b532370976$export$336a011955157f9a), {}),
+                            (streamState === "streaming" || streamState === "loading") && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
+                                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $cce9fd41d8a55a18$export$74636703cfe1eecf), {
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f235befa4cdc42d6$export$2e2bcd8739ae039), {}),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $cdab47bb8796991e$export$2e2bcd8739ae039), {}),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $69a9c49ece80e773$export$2e2bcd8739ae039), {}),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $01986a58bfba8001$export$2e2bcd8739ae039), {})
+                                    ]
+                                })
+                            }),
+                            (streamState === "ended" || streamState === "terminated" || streamState === "full" || streamState === "expired") && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $df41bfe6da05853a$export$2e2bcd8739ae039), {})
+                        ]
+                    })
+                ]
+            })
         })
     });
 };
@@ -13036,7 +13241,7 @@ 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-\\[100\\] {\n  z-index: 100;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.z-10 {\n  z-index: 10;\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-screen {\n  height: 100vh;\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-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-\\[235px\\] {\n  height: 235px;\n}\n\n.h-\\[93px\\] {\n  height: 93px;\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-screen {\n  width: 100vw;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[450px\\] {\n  width: 450px;\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-full, .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-\\[135px\\] {\n  max-width: 135px;\n}\n\n.max-w-\\[500px\\] {\n  max-width: 500px;\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-\\[screen\\] {\n  max-width: screen;\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-\\[10px\\] {\n  gap: 10px;\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-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-\\[10px\\] {\n  border-radius: 10px;\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-\\[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-2 {\n  border-width: 2px;\n}\n\n.border-t {\n  border-top-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-white {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.border-secondaryVLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(235 235 235 / 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-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-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-tertiarySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(216 216 216 / var(--tw-bg-opacity));\n}\n\n.bg-tertiary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\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-\\[\\#f12828\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.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.bg-\\[url\\(\\'https\\:\\/\\/cdn\\.snapcall\\.io\\/img\\/assist\\/gradient-bg\\.jpg\\'\\)\\] {\n  background-image: url(\"https://cdn.snapcall.io/img/assist/gradient-bg.jpg\");\n}\n\n.bg-cover {\n  background-size: cover;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.object-fill {\n  object-fit: fill;\n}\n\n.p-\\[15px\\] {\n  padding: 15px;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-\\[10px\\] {\n  padding: 10px;\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.pt-\\[20px\\] {\n  padding-top: 20px;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.align-middle {\n  vertical-align: middle;\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-semibold {\n  font-weight: 600;\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-mainBlue {\n  --tw-text-opacity: 1;\n  color: rgb(0 106 255 / 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 {\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.ease-in-out {\n  transition-timing-function: cubic-bezier(.4, 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.disabled\\:opacity-50:disabled {\n  opacity: .5;\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.bottom-\\[-85px\\] {\n  bottom: -85px;\n}\n\n.left-\\[calc\\(50\\%-243px\\)\\] {\n  left: calc(50% - 243px);\n}\n\n.bottom-\\[-65px\\] {\n  bottom: -65px;\n}\n\n.left-\\[calc\\(50\\%-43px\\)\\] {\n  left: calc(50% - 43px);\n}\n\n.top-0 {\n  top: 0;\n}\n\n.left-0 {\n  left: 0;\n}\n\n.z-10 {\n  z-index: 10;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\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.mb-\\[9px\\] {\n  margin-bottom: 9px;\n}\n\n.box-border {\n  box-sizing: border-box;\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-0 {\n  height: 0;\n}\n\n.h-\\[86px\\] {\n  height: 86px;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-\\[60px\\] {\n  height: 60px;\n}\n\n.h-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[64px\\] {\n  height: 64px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[70px\\] {\n  height: 70px;\n}\n\n.h-\\[62px\\] {\n  height: 62px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-1\\/3 {\n  height: 33.3333%;\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.max-h-\\[100\\%\\] {\n  max-height: 100%;\n}\n\n.max-h-\\[inherit\\] {\n  max-height: inherit;\n}\n\n.max-h-\\[70px\\] {\n  max-height: 70px;\n}\n\n.max-h-\\[90\\%\\] {\n  max-height: 90%;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-\\[486px\\] {\n  width: 486px;\n}\n\n.w-0 {\n  width: 0;\n}\n\n.w-\\[86px\\] {\n  width: 86px;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[64px\\] {\n  width: 64px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[70px\\] {\n  width: 70px;\n}\n\n.w-\\[62px\\] {\n  width: 62px;\n}\n\n.w-\\[50\\%\\] {\n  width: 50%;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[450px\\] {\n  width: 450px;\n}\n\n.w-\\[320px\\] {\n  width: 320px;\n}\n\n.w-\\[30px\\] {\n  width: 30px;\n}\n\n.w-\\[135px\\] {\n  width: 135px;\n}\n\n.min-w-\\[200px\\] {\n  min-width: 200px;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.min-w-full {\n  min-width: 100%;\n}\n\n.max-w-\\[1116px\\] {\n  max-width: 1116px;\n}\n\n.max-w-\\[500px\\] {\n  max-width: 500px;\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-\\[100\\%\\] {\n  max-width: 100%;\n}\n\n.max-w-\\[70px\\] {\n  max-width: 70px;\n}\n\n.max-w-\\[90\\%\\] {\n  max-width: 90%;\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-\\[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.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-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.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@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin {\n  animation: 1s linear infinite spin;\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-start {\n  align-items: flex-start;\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-\\[7px\\] {\n  gap: 7px;\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-visible {\n  overflow: visible;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.rounded-\\[10px\\] {\n  border-radius: 10px;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\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-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-\\[5px\\] {\n  border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n  border-radius: 60px;\n}\n\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\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-\\[7px\\] {\n  border-width: 7px;\n}\n\n.border-\\[4px\\] {\n  border-width: 4px;\n}\n\n.border-\\[3px\\] {\n  border-width: 3px;\n}\n\n.border-\\[2px\\] {\n  border-width: 2px;\n}\n\n.border-b-\\[7px\\] {\n  border-bottom-width: 7px;\n}\n\n.border-t {\n  border-top-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-white {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#E5484D\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 72 77 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#FFFFF\\] {\n  border-color: #FFFFF;\n}\n\n.border-\\[white\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.border-secondaryVLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(235 235 235 / var(--tw-border-opacity));\n}\n\n.border-b-\\[\\#E5484D\\] {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(229 72 77 / var(--tw-border-opacity));\n}\n\n.bg-\\[\\#000\\], .bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-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-tertiarySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(216 216 216 / var(--tw-bg-opacity));\n}\n\n.bg-tertiary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-mainBlueSelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 90 218 / var(--tw-bg-opacity));\n}\n\n.bg-mainBlue {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 106 255 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\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-\\[\\#E5484D\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 72 77 / 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-\\[\\#171717\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(23 23 23 / 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-\\[\\#F7F7F7\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(247 247 247 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#C7DEFF\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(199 222 255 / var(--tw-bg-opacity));\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.bg-\\[url\\(\\'https\\:\\/\\/cdn\\.snapcall\\.io\\/img\\/assist\\/gradient-bg\\.jpg\\'\\)\\] {\n  background-image: url(\"https://cdn.snapcall.io/img/assist/gradient-bg.jpg\");\n}\n\n.bg-cover {\n  background-size: cover;\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.p-\\[15px\\] {\n  padding: 15px;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.py-\\[125px\\] {\n  padding-top: 125px;\n  padding-bottom: 125px;\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.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\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-\\[60px\\] {\n  padding-left: 60px;\n  padding-right: 60px;\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.pt-\\[14px\\] {\n  padding-top: 14px;\n}\n\n.pb-\\[20px\\] {\n  padding-bottom: 20px;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.pb-\\[9px\\] {\n  padding-bottom: 9px;\n}\n\n.pt-\\[20px\\] {\n  padding-top: 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-semibold {\n  font-weight: 600;\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-mainBlue {\n  --tw-text-opacity: 1;\n  color: rgb(0 106 255 / 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-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / 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.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\\.4\\] {\n  opacity: .4;\n}\n\n.opacity-0 {\n  opacity: 0;\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.disabled\\:opacity-50:disabled {\n  opacity: .5;\n}\n\n";
 
 
 var $e02c50a47b475960$exports = {};
@@ -13046,7 +13251,8 @@ $e02c50a47b475960$exports = "*, :before, :after {\n  box-sizing: border-box;\n
 const $24075a5d702d64b3$var$defaultOptions = {
     recorder: {
         enabled: false,
-        defaultState: "photo"
+        defaultMode: "photo",
+        defaultMedia: "camera"
     },
     sharedURL: window.location.href,
     showMenuButton: true,
@@ -13076,7 +13282,8 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
         if (typeof options.recorder === "boolean") options.recorder = {
             enabled: options.recorder,
-            defaultState: "photo"
+            defaultMode: "photo",
+            defaultMedia: "camera"
         };
         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);
@@ -13109,12 +13316,14 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
             ]
         }));
         if (mergedOptions.tracking) (0, $3Sbms$hotjarbrowser).init(3111933, 6);
+        (0, $35b37252690084e8$export$1cbfb36c1655a9a)(rootElement, element);
     },
     initGreeting: (element, onGreetingDone)=>{
         const rootElement = (0, $3Sbms$createRoot)(element);
         rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
             onGreetingDone: onGreetingDone
         }));
+        (0, $35b37252690084e8$export$1cbfb36c1655a9a)(rootElement, element);
     },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {