@snapcall/stream-ui 1.11.5 → 1.12.0

package/dist/stream-ui.js

@@ -19,10 +19,10 @@ var $jQDcL$qrcode = require("qrcode");
 var $jQDcL$reactstately = require("react-stately");
 var $jQDcL$classnames = require("classnames");
 var $jQDcL$reactaria = require("react-aria");
-var $jQDcL$reactariaoverlays = require("@react-aria/overlays");
 var $jQDcL$reactariautils = require("@react-aria/utils");
 var $jQDcL$reacttransitiongroup = require("react-transition-group");
 var $jQDcL$reactariainteractions = require("@react-aria/interactions");
+var $jQDcL$reactariaoverlays = require("@react-aria/overlays");
 var $jQDcL$reactcontentloader = require("react-content-loader");
 
 function $parcel$interopDefault(a) {
@@ -472,6 +472,8 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             someone: "Someone",
             camera: "Camera",
             microphone: "Microphone",
+            photo: "Photo",
+            video: "Video",
             screen: "Screen",
             speaker: "Speaker",
             user: "User",
@@ -479,7 +481,10 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             from: "From",
             accept: "Accept",
             decline: "Decline",
-            you: "You"
+            you: "You",
+            cancel: "Cancel",
+            confirm: "Confirm",
+            remove: "Remove"
         },
         greeting: {
             mainTitle: "Welcome to SnapCall",
@@ -489,6 +494,46 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             nameSubmit: "Join Conversation",
             footerTitle: "Powered by SnapCall",
             footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service."
+        },
+        recorder: {
+            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 }}",
+            sendElement: "Send {{ type }}",
+            sendElements: "Send {{ count }} elements",
+            allowAccess: "Allow access",
+            okay: "Okay",
+            allowCamMicAccess: "Allow access to cam/mic",
+            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?",
+            videoInstructionsTitle: "Ready to record a video?",
+            screenShareInstructionsTitle: "Ready to capture 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>."
+            },
+            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",
+            scanQRCode: "Scan this QR code with a compatible device.",
+            startScreenShareButton: "Record my screen",
+            stopScreenShareButton: "Stop recording"
         }
     }
 };
@@ -626,6 +671,8 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             someone: "Quelqu'un",
             camera: "Cam\xe9ra",
             microphone: "Micro",
+            photo: "Photo",
+            video: "Vid\xe9o",
             screen: "\xc9cran",
             speaker: "Haut-parleur",
             user: "Utilisateur",
@@ -633,7 +680,10 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             from: "Depuis",
             accept: "Accepter",
             decline: "D\xe9cliner",
-            you: "Vous"
+            you: "Vous",
+            cancel: "Annuler",
+            confirm: "Confirmer",
+            remove: "Enlever"
         },
         greeting: {
             mainTitle: "Bienvenue sur SnapCall",
@@ -643,6 +693,46 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             nameSubmit: "Rejoindre la conversation",
             footerTitle: "Propuls\xe9 par SnapCall",
             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!",
+            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.",
+            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",
+            takeNewElement: "Prendre une nouvelle {{ type }}",
+            sendElement: "Envoyer une {{ type }}",
+            sendElements: "Envoyer {{ count }} \xe9l\xe9ments",
+            allowAccess: "Permettre l'acc\xe8s",
+            okay: "D'accord",
+            allowCamMicAccess: "Autoriser l'acc\xe8s \xe0 la cam\xe9ra/au micro",
+            allowScreenShareAccess: "Autoriser l'acc\xe8s au partage d'\xe9cran",
+            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?",
+            instructions: {
+                allowAccessOnPrompt: "Lorsque vous y \xeates invit\xe9, <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.",
+                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>."
+            },
+            switchToMobileTitle: "Basculez vers 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",
+            scanQRCode: "Scannez ce code QR avec un appareil compatible.",
+            startScreenShareButton: "Enregistrer mon \xe9cran",
+            stopScreenShareButton: "Arr\xeater d'enregistrer"
         }
     }
 };
@@ -784,6 +874,8 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             someone: "Qualcuno",
             camera: "Telecamera",
             microphone: "Microfono",
+            photo: "Foto",
+            video: "Video",
             screen: "Schermo",
             speaker: "Altoparlante",
             user: "Utente",
@@ -791,7 +883,10 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             from: "Da",
             accept: "Accettare",
             decline: "Declinare",
-            you: "Voi"
+            you: "Voi",
+            cancel: "Annulla",
+            confirm: "Confermare",
+            remove: "Rimuovere"
         },
         greeting: {
             mainTitle: "Benvenuto a SnapCall",
@@ -801,6 +896,46 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             nameSubmit: "Partecipa alla conversazione",
             footerTitle: "Offerto da SnapCall",
             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",
+            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.",
+            elementCaptureSuccess: "{{ type }} catturato con successo",
+            takeNewElement: "Scatta una nuova {{ type }}",
+            sendElement: "Invia una {{ 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",
+            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?",
+            videoInstructionsTitle: "Pronto a registrare un video?",
+            screenShareInstructionsTitle: "Pronto a catturare 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.",
+                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>."
+            },
+            switchToMobileTitle: "Passa al tuo cellulare",
+            switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 comoda utilizzando il 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"
         }
     }
 };
@@ -1444,6 +1579,49 @@ class $cb913ea078a876a6$export$2e2bcd8739ae039 {
 }
 
 
+const $93041e14f6aa3f24$var$audioContextConstructor = window.AudioContext || window.webkitAudioContext;
+class $93041e14f6aa3f24$export$22ddc20344c01547 {
+    audioSources = {};
+    tracks = {};
+    constructor(){
+        this.audioContext = new $93041e14f6aa3f24$var$audioContextConstructor();
+        this.audioDestination = this.audioContext.createMediaStreamDestination();
+    }
+    getSetting(identifier) {
+        return this.tracks[identifier]?.getSettings();
+    }
+    removeTrack(identifier) {
+        const track = this.tracks[identifier];
+        if (track) {
+            this.audioSources[identifier]?.disconnect();
+            delete this.tracks[identifier];
+            delete this.audioSources[identifier];
+            track.stop();
+        }
+    }
+    addTrack(identifier, track) {
+        if (track.kind === "audio") {
+            this.removeTrack(identifier);
+            const stream = new MediaStream([
+                track
+            ]);
+            const audioSource = this.audioContext.createMediaStreamSource(stream);
+            this.audioSources[identifier] = audioSource;
+            this.tracks[identifier] = track;
+            if (this.audioDestination) audioSource.connect(this.audioDestination);
+        }
+    }
+    getFinalTrack() {
+        return this.audioDestination.stream.getTracks()[0];
+    }
+    removeAll() {
+        Object.keys(this.tracks).forEach((identifier)=>{
+            this.removeTrack(identifier);
+        });
+    }
+}
+
+
 const $1dedebd5ff3002eb$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("StreamerClient");
 const $1dedebd5ff3002eb$export$103bedf43ba882db = {
     WEBRTC_FAILED: "WRTC1",
@@ -1983,6 +2161,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.audioLevel?.release();
             this.audioLevel = undefined;
             if (this.micProducer && this.micProducer.track) {
+                this.audioMedia?.removeTrack("mic");
                 this.micProducer?.track?.stop();
                 $1dedebd5ff3002eb$var$log.log("switchMicrophone", "stopping previous track");
             }
@@ -1995,7 +2174,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             }));
             this.audioLevel = new (0, $6a90fae7e584afd4$export$ea669869acd8f177)(stream, this);
             // this.audioLevel.analyse();
+            this.audioMedia = this.audioMedia || new (0, $93041e14f6aa3f24$export$22ddc20344c01547)();
             const track = stream.getAudioTracks()[0];
+            this.audioMedia.addTrack("mic", track);
             await this.micProducer?.replaceTrack({
                 track: track
             });
@@ -2071,10 +2252,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             const transport = await this.getTransport("audio", "send");
             this.audioLevel = new (0, $6a90fae7e584afd4$export$ea669869acd8f177)(stream, this);
             // this.audioLevel.analyse();
+            this.audioMedia = this.audioMedia || new (0, $93041e14f6aa3f24$export$22ddc20344c01547)();
             const track = stream.getAudioTracks()[0];
+            this.audioMedia.addTrack("mic", track);
             const deviceType = "microphone";
             const micProducer = await transport.produce({
-                track: track,
+                track: this.audioMedia.getFinalTrack(),
                 codecOptions: {
                     opusStereo: true,
                     opusDtx: true
@@ -2151,6 +2334,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.mediaPipe.clean();
             this.mediaPipe = undefined;
         }
+        this.audioMedia?.removeAll();
         this.webcamTrack?.stop();
         this.webcamTrack = null;
         this.protooTransport.close();
@@ -2499,10 +2683,13 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         });
         this.dispatchEvent(event);
     }
-    async enableScreenshare() {
+    async enableScreenshare(option = {
+        audioTransportOption: "classic"
+    }) {
         if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
+        if (option.audioTransportOption === "mix" && !this.micProducer) throw new Error("microphone not activated and audio mix transport requested");
         const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
-            audio: true,
+            audio: option.audioTransportOption !== "none",
             video: {
                 displaySurface: "monitor",
                 logicalSurface: true,
@@ -2522,13 +2709,23 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         const audioTransport = await this.getTransport("audio", "send");
         const audioTrack = stream.getAudioTracks()[0];
         if (audioTrack) {
-            this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
-                deviceType: deviceType,
-                share: true
-            });
-            this.screenshareVideoProducer?.on("transportclose", ()=>{
-                this.screenshareVideoProducer = undefined;
-            });
+            if (option.audioTransportOption === "classic") {
+                this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
+                    deviceType: deviceType,
+                    share: true
+                });
+                this.screenshareVideoProducer?.on("transportclose", ()=>{
+                    this.screenshareVideoProducer = undefined;
+                });
+            } else if (option.audioTransportOption === "mix") {
+                this.audioMedia = this.audioMedia || new (0, $93041e14f6aa3f24$export$22ddc20344c01547)();
+                this.audioMedia.addTrack("screen", audioTrack);
+                const finalTracks = this.audioMedia.getFinalTrack();
+                // currently microphone producer has to be enabled before.
+                if (finalTracks && this.micProducer) this.micProducer.replaceTrack({
+                    track: finalTracks
+                });
+            }
         }
         const track = stream.getVideoTracks()[0];
         const videoTransport = await this.getTransport("video", "send");
@@ -2555,6 +2752,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
             this.screenshareVideoProducer = undefined;
         }
+        this.audioMedia?.removeTrack("screen");
         if (this.screenshareAudioProducer) {
             this.screenshareAudioProducer.close();
             if (this.protoo.connected) await this.protoo.request("closeProducer", {
@@ -2852,7 +3050,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         return this.webcam;
     }
     getCurrentMicrophoneId() {
-        return this.micProducer?.track?.getSettings().deviceId;
+        return this.audioMedia?.getSetting("mic") || this.micProducer?.track?.getSettings().deviceId;
     }
     getCurrentSpeakerId() {
         const audioRendererKeys = Object.keys(this.audioRenderers);
@@ -10526,6 +10724,8 @@ const $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6 = (0, ($parcel$interopDefault($j
 
 
 
+
+
 
 
 
@@ -10571,6 +10771,61 @@ const $6e29654b44f114e1$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $jQDcL$react
 
 
 
+const $6fa093aef38ba660$export$a703eb468fcf7e69 = (props)=>{
+    const { state: state , children: children  } = props;
+    const ref = (0, $jQDcL$react.useRef)(null);
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $jQDcL$reactaria.useModalOverlay)({
+        isDismissable: true,
+        ...props
+    }, state, ref);
+    const [exited, setExited] = (0, $jQDcL$react.useState)(!state.isOpen);
+    if (!(state.isOpen || !exited)) return null;
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactaria.Overlay), {
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+            in: state.isOpen,
+            appear: true,
+            onEntered: ()=>setExited(false),
+            onExited: ()=>setExited(true),
+            timeout: {
+                enter: 0,
+                exit: 300
+            },
+            classNames: {
+                enter: "opacity-0",
+                enterDone: "opacity-1 transition ease-in",
+                exit: "opacity-0 transition ease-out"
+            },
+            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
+                ...underlayProps,
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+                    in: state.isOpen,
+                    appear: true,
+                    nodeRef: ref,
+                    timeout: {
+                        enter: 0,
+                        exit: 300
+                    },
+                    classNames: {
+                        appear: "translate-y-2",
+                        appearDone: "translate-y-0 transition ease-in",
+                        exit: "translate-y-2 transition ease-out"
+                    },
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        ...modalProps,
+                        ref: ref,
+                        children: children
+                    })
+                })
+            })
+        })
+    });
+};
+
+
+
+
+
 
 
 
@@ -10586,6 +10841,7 @@ const $f98f91fb267f52c8$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $jQDcL$react
         primary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-primaryLight" : "bg-primary", "text-white disabled:bg-secondaryLight"),
         secondary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-graySelected" : "bg-transparent", "text-primary border border-secondaryLight disabled:text-secondaryLight disabled:bg-graySelected"),
         basic: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-graySelected" : "bg-white", "text-primary disabled:text-secondaryLight disabled:bg-graySelected"),
+        tertiary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-tertiarySelected" : "bg-tertiary", "text-mainBlue disabled:opacity-50"),
         custom: ""
     };
     const sizeStyle = {
@@ -10613,12 +10869,6 @@ const $f98f91fb267f52c8$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $jQDcL$react
 
 function $48c2553f62767e40$export$2b77a92f1a5ad772(props) {
     const { children: children , state: state , size: size = "small" , title: title , description: description , primaryAction: primaryAction , secondaryAction: secondaryAction , centered: centered = false  } = props;
-    const ref = (0, ($parcel$interopDefault($jQDcL$react))).useRef(null);
-    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $jQDcL$reactariaoverlays.useModalOverlay)({
-        isDismissable: true,
-        ...props
-    }, state, ref);
-    const [exited, setExited] = (0, $jQDcL$react.useState)(!state.isOpen);
     const viewport = (0, $jQDcL$reactariautils.useViewportSize)();
     const maxHeight = viewport.height - 64;
     const modalSize = {
@@ -10626,96 +10876,60 @@ function $48c2553f62767e40$export$2b77a92f1a5ad772(props) {
         medium: "max-w-[600px]",
         large: "max-w-[800px]"
     };
-    // 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, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactariaoverlays.Overlay), {
-        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
-            in: state.isOpen,
-            appear: true,
-            onEntered: ()=>setExited(false),
-            onExited: ()=>setExited(true),
-            timeout: {
-                enter: 0,
-                exit: 300
-            },
-            classNames: {
-                enter: "opacity-0",
-                enterDone: "opacity-1 transition ease-in",
-                exit: "opacity-0 transition ease-out"
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6fa093aef38ba660$export$a703eb468fcf7e69), {
+        state: state,
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+            className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
+            style: {
+                maxHeight: `${maxHeight}px`
             },
-            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
-                ...underlayProps,
-                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
-                    in: state.isOpen,
-                    appear: true,
-                    nodeRef: ref,
-                    timeout: {
-                        enter: 0,
-                        exit: 300
-                    },
-                    classNames: {
-                        appear: "translate-y-2",
-                        appearDone: "translate-y-0 transition ease-in",
-                        exit: "translate-y-2 transition ease-out"
-                    },
-                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                        ...modalProps,
-                        ref: ref,
-                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
-                        style: {
-                            maxHeight: `${maxHeight}px`
-                        },
-                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                            className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
-                            children: [
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                                    className: "flex flex-col gap-5 overflow-auto",
-                                    children: [
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                                            className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex flex-col gap-[5px]", {
-                                                "text-center": centered
-                                            }),
-                                            children: [
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h2", {
-                                                    className: "text-xl font-medium",
-                                                    children: title
-                                                }),
-                                                description && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
-                                                    className: "text-sm text-secondary",
-                                                    children: description
-                                                })
-                                            ]
-                                        }),
-                                        children
-                                    ]
+            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: "flex flex-col gap-5 overflow-auto",
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                                className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex flex-col gap-[5px]", {
+                                    "text-center": centered
                                 }),
-                                (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                                    className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
-                                    children: [
-                                        typeof secondaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
-                                            variant: "secondary",
-                                            onPress: state.close,
-                                            fullWidth: centered,
-                                            children: secondaryAction
-                                        }),
-                                        typeof secondaryAction === "function" && secondaryAction({
-                                            close: state.close
-                                        }),
-                                        typeof primaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
-                                            onPress: state.close,
-                                            fullWidth: centered,
-                                            children: primaryAction
-                                        }),
-                                        typeof primaryAction === "function" && primaryAction({
-                                            close: state.close
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h2", {
+                                        className: "text-xl font-medium",
+                                        children: title
+                                    }),
+                                    description && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
+                                        className: "text-sm text-secondary",
+                                        children: description
+                                    })
+                                ]
+                            }),
+                            children
+                        ]
+                    }),
+                    (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
+                        children: [
+                            typeof secondaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                variant: "secondary",
+                                onPress: state.close,
+                                fullWidth: centered,
+                                children: secondaryAction
+                            }),
+                            typeof secondaryAction === "function" && secondaryAction({
+                                close: state.close
+                            }),
+                            typeof primaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                onPress: state.close,
+                                fullWidth: centered,
+                                children: primaryAction
+                            }),
+                            typeof primaryAction === "function" && primaryAction({
+                                close: state.close
+                            })
+                        ]
                     })
-                })
+                ]
             })
         })
     });
@@ -10811,32 +11025,39 @@ const $b46da51ab7ae33e7$var$InstructionRow = ({ children: children , index: inde
         ]
     });
 const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type  })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const [permissionsState, setPermissionsState] = (0, $jQDcL$react.useState)("idle");
+    (0, $jQDcL$react.useEffect)(()=>{
+        const { deviceState: deviceState  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
+        if (deviceState.screenshare.enabled && type === "screen") return setPermissionsState("granted");
+        if (deviceState.camera.enabled && type !== "screen") return setPermissionsState("granted");
+        setPermissionsState("idle");
+    }, [
+        type
+    ]);
+    const { deviceState: deviceState  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
     const [isRoomReady, setRoomReady] = (0, $jQDcL$react.useState)(false);
     const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const device = orientation === "landscape" ? "desktop" : "mobile";
     const videoLength = permissionsState === "granted" ? "short" : "full";
-    const videoType = type === "picture" ? "photo" : "video";
-    const onDeviceEnabled = ()=>setPermissionsState("granted");
+    const videoType = type === "photo" ? "photo" : "video";
     const onEnterRoom = ()=>setRoomReady(true);
     const onLeaveRoom = ()=>setRoomReady(false);
     const ref = (0, $jQDcL$react.useRef)(null);
     const title = (0, $jQDcL$react.useMemo)(()=>{
-        if (permissionsState === "refused") return "Something went wrong!";
-        if (type === "picture") return "Ready to take a shot?";
-        return "Ready to record a video?";
+        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
+        type,
+        t
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onDeviceEnabled);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onDeviceEnabled);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
         return ()=>{
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onDeviceEnabled);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onDeviceEnabled);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
         };
@@ -10851,36 +11072,50 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
                 children: permissionsState === "refused" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
                     fullWidth: true,
                     onPress: ()=>window.location.reload(),
-                    children: "Allow access"
+                    children: t("recorder.allowAccess")
                 }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
                     children: permissionsState === "granted" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
                         fullWidth: true,
                         onPress: state.close,
-                        children: "Okay"
+                        children: t("recorder.okay")
                     }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
                         fullWidth: true,
                         isDisabled: permissionsState === "requesting" || isRoomReady === false,
                         onPress: async ()=>{
                             setPermissionsState("requesting");
                             try {
-                                const mediaResult = await navigator.mediaDevices.getUserMedia({
-                                    audio: true,
-                                    video: true
-                                });
-                                mediaResult.getTracks().forEach((track)=>track.stop());
-                                await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
-                                await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
-                                    resolution: "vga",
-                                    frameRate: 20,
-                                    facingMode: "environment"
-                                });
-                            } catch  {
+                                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, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
+                                if (!deviceState.camera.enabled && type !== "screen") {
+                                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableScreenshare();
+                                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
+                                        resolution: "vga",
+                                        frameRate: 20,
+                                        facingMode: "environment"
+                                    });
+                                }
+                                if (!deviceState.screenshare.enabled && type === "screen") {
+                                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableVideo();
+                                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableScreenshare({
+                                        audioTransportOption: "mix"
+                                    });
+                                }
+                                setPermissionsState("granted");
+                                state.close();
+                            } catch (error) {
+                                console.log("error", error);
                                 setPermissionsState("refused");
                             }
                         },
                         children: [
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {}),
-                            "Allow access to cam/mic"
+                            type !== "screen" ? t("recorder.allowCamMicAccess") : t("recorder.allowScreenShareAccess")
                         ]
                     })
                 })
@@ -10892,51 +11127,61 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
                     className: "flex flex-col gap-[10px]",
                     ref: ref,
                     children: permissionsState === "refused" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
-                        children: "Without camera and microphone access, you can't take photos or videos to share with the support team. Please grant access in your browser settings."
+                        children: t("recorder.permissionDeniedDescription")
                     }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
                         children: [
                             permissionsState !== "granted" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                 index: 1,
-                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                    children: [
-                                        "When prompted, ",
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                            children: "allow access"
-                                        }),
-                                        " to camera and microphone."
-                                    ]
+                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                        i18nKey: "recorder.instructions.allowAccessOnPrompt",
+                                        children: [
+                                            "When prompted, ",
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                children: "allow access"
+                                            }),
+                                            " to camera and microphone."
+                                        ]
+                                    })
                                 })
                             }),
-                            type === "picture" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                            type === "photo" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
                                 children: [
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                            children: [
-                                                "Tap the ",
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$dce36e07153365d), {}),
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                                    children: " Camera button"
-                                                }),
-                                                " to take a photo."
-                                            ]
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.tapPhotoButton",
+                                                com: true,
+                                                children: [
+                                                    "Tap the ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$dce36e07153365d), {}),
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: " Camera button"
+                                                    }),
+                                                    " to take a photo."
+                                                ]
+                                            })
                                         })
                                     }),
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 2 + permissionsInstructionIndex,
                                         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
-                                            children: "Don't hesitate to take multiple photos for more detail."
+                                            children: t("recorder.instructions.multiplePhotos")
                                         })
                                     }),
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                            children: [
-                                                "You can review your photo and then ",
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                                    children: "send it when you're done."
-                                                })
-                                            ]
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.reviewAndSendPhotos",
+                                                children: [
+                                                    "You can review your photo and then ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: "send it when you're done."
+                                                    })
+                                                ]
+                                            })
                                         })
                                     })
                                 ]
@@ -10945,52 +11190,128 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
                                 children: [
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                            children: [
-                                                "Tap the ",
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$f9da3144ae2525a3), {}),
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                                    children: " Record button"
-                                                }),
-                                                " to start a recording."
-                                            ]
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.tapVideoButton",
+                                                children: [
+                                                    "Tap the ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$f9da3144ae2525a3), {}),
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: " Record button"
+                                                    }),
+                                                    " to start a recording."
+                                                ]
+                                            })
                                         })
                                     }),
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 2 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                            children: [
-                                                "You can ",
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                                    children: "speak during"
-                                                }),
-                                                " the recording for added detail."
-                                            ]
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.videoSpeech",
+                                                children: [
+                                                    "You can ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: "speak during"
+                                                    }),
+                                                    " the recording for added detail."
+                                                ]
+                                            })
                                         })
                                     }),
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                            children: [
-                                                "When you're finished, tap the ",
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$c6a849fd9d9d93a2), {}),
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                                    children: " Stop button"
-                                                }),
-                                                "."
-                                            ]
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.tapStopVideoButton",
+                                                children: [
+                                                    "When you're finished, tap the ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$c6a849fd9d9d93a2), {}),
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: " Stop button"
+                                                    }),
+                                                    "."
+                                                ]
+                                            })
                                         })
                                     }),
                                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
                                         index: 4 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
-                                            children: [
-                                                "You can review your video and then ",
-                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
-                                                    children: "send it when you're done"
-                                                }),
-                                                "."
-                                            ]
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.reviewAndSendVideos",
+                                                children: [
+                                                    "You can review your video and then ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: "send it when you're done"
+                                                    }),
+                                                    "."
+                                                ]
+                                            })
+                                        })
+                                    })
+                                ]
+                            }),
+                            type === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 1 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.tapScreenShareButton",
+                                                children: [
+                                                    "Tap on",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: " Record my screen"
+                                                    }),
+                                                    " to start a recording."
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 2 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.videoSpeech",
+                                                children: [
+                                                    "You can ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: "speak during"
+                                                    }),
+                                                    " the recording for added detail."
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 3 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.tapStopScreenShareButton",
+                                                children: [
+                                                    "When you're finished, tap on ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: "Stop recording"
+                                                    }),
+                                                    "."
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 4 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+                                                i18nKey: "recorder.instructions.reviewAnsSendScreenShare",
+                                                children: [
+                                                    "You can review your video and then ",
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                        children: "send it when you're done"
+                                                    }),
+                                                    "."
+                                                ]
+                                            })
                                         })
                                     })
                                 ]
@@ -11022,7 +11343,9 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
 
 
 
+
 const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const QRCodeRef = (0, $jQDcL$react.useRef)(null);
     const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const [QRCodeContainerRef, { width: QRCodeContainerWidth  }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
@@ -11039,8 +11362,8 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
         centered: true,
-        title: "Switch to your mobile",
-        description: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
+        title: t("recorder.switchToMobileTitle"),
+        description: t("recorder.switchToMobileDescription"),
         isDismissable: false,
         state: state,
         primaryAction: ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
@@ -11049,7 +11372,7 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
                     setReady(true);
                     state.close();
                 },
-                children: "Use desktop version"
+                children: t("recorder.useDesktopVersion")
             }),
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
             className: "flex flex-col gap-[20px]",
@@ -11069,7 +11392,7 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
                     className: "flex items-center justify-center text-xs text-primaryLight text-center",
-                    children: "Scan this QR code with a compatible device."
+                    children: t("recorder.scanQRCode")
                 })
             ]
         })
@@ -11080,29 +11403,21 @@ const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: se
 function $d7eacc710221ffb1$export$fc3bf4634b488af8({ mode: mode  }) {
     const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const desktop = orientation === "landscape";
-    const [ready, setReady] = (0, $jQDcL$react.useState)(!desktop);
+    const [ready, setReady] = (0, $jQDcL$react.useState)(mode === "screen" || !desktop);
+    const [isInstructionsModalOpen, setIsInstructionsModalOpen] = (0, $jQDcL$react.useState)(ready);
+    const modalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
+        isOpen: isInstructionsModalOpen && ready,
+        onOpenChange: setIsInstructionsModalOpen
+    });
     (0, $jQDcL$react.useEffect)(()=>{
-        if (ready) {
-            setIsPhotoInstructionsModalOpen(mode === "photo" && ready);
-            setIsVideoInstructionsModalOpen(mode === "video" && ready);
-        }
+        setIsInstructionsModalOpen(true);
     }, [
         ready,
         mode
     ]);
-    const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $jQDcL$react.useState)(mode === "photo" && ready);
-    const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $jQDcL$react.useState)(mode === "video" && ready);
-    const photoInstructionsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
-        isOpen: isPhotoInstructionsModalOpen,
-        onOpenChange: setIsPhotoInstructionsModalOpen
-    });
-    const videoInstructionsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
-        isOpen: isVideoInstructionsModalOpen,
-        onOpenChange: setIsVideoInstructionsModalOpen
-    });
     return {
-        photoInstructionsModalState: photoInstructionsModalState,
-        videoInstructionsModalState: videoInstructionsModalState,
+        mode: mode,
+        modalState: modalState,
         ready: ready,
         setReady: setReady
     };
@@ -11116,12 +11431,8 @@ const $d7eacc710221ffb1$export$bee10e8ab511933f = ({ state: state  })=>{
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b46da51ab7ae33e7$export$788cb893d96254c8), {
-                state: state.photoInstructionsModalState,
-                type: "picture"
-            }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b46da51ab7ae33e7$export$788cb893d96254c8), {
-                state: state.videoInstructionsModalState,
-                type: "video"
+                state: state.modalState,
+                type: state.mode
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4dac51e936eb334f$export$f9d8408fefd786da), {
                 state: switchToMobileModalState,
@@ -11132,22 +11443,54 @@ const $d7eacc710221ffb1$export$bee10e8ab511933f = ({ state: state  })=>{
 };
 
 
-function $6f223c293b335d40$export$bd7b6af6aa16550c({ photo: photo = true  }) {
-    const [isPhoto, setPhoto] = (0, $jQDcL$react.useState)(photo);
+
+
+
+const $a55fb1fbe863b99c$export$4e594bceac139abd = (props)=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+        className: (0, ($parcel$interopDefault($jQDcL$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
+        }),
+        onClick: ()=>props.onCapturePress(),
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+            children: props.state.streaming ? t("recorder.stopScreenShareButton") : t("recorder.startScreenShareButton")
+        })
+    });
+};
+const $a55fb1fbe863b99c$export$f9da3144ae2525a3 = (props)=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-full w-[72px] h-[72px] p-[3px]"),
+        onClick: ()=>props.onCapturePress(),
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+            className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
+            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: (0, ($parcel$interopDefault($jQDcL$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]")
+            })
+        })
+    });
+};
+
+
+function $6f223c293b335d40$export$bd7b6af6aa16550c({ state: state = "photo"  }) {
+    const [currentMode, setMode] = (0, $jQDcL$react.useState)(state);
     const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
     return {
-        photo: isPhoto,
-        setPhoto: setPhoto,
+        mode: currentMode,
+        setMode: (mode)=>{
+            setMode(mode);
+        },
         streaming: streaming,
         setStreaming: setStreaming
     };
 }
 const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const setupModalsState = (0, $d7eacc710221ffb1$export$fc3bf4634b488af8)({
-        mode: props.state.photo ? "photo" : "video"
+        mode: props.state.mode
     });
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-        className: "flex flex-col bg-primary h-[150px] w-full max-w-[400px] rounded-[15px] p-2.5 gap-2.5",
+        className: "flex flex-col bg-primary h-[150px] w-full max-w-[500px] rounded-[15px] p-2.5 gap-2.5",
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $d7eacc710221ffb1$export$bee10e8ab511933f), {
                 state: setupModalsState
@@ -11168,25 +11511,39 @@ const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
                         className: "flex flex-row justify-end flex-auto items-center gap-[10px] ",
                         children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
-                                onPress: ()=>{
-                                    if (!props.state.streaming) {
-                                        props.state.setPhoto(true);
-                                        setupModalsState.photoInstructionsModalState.open();
-                                    }
-                                },
-                                isSelected: props.state.photo,
-                                children: "Photo"
+                            props.state.mode !== "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
+                                        onPress: ()=>{
+                                            if (!props.state.streaming) {
+                                                props.state.setMode("photo");
+                                                setupModalsState.modalState.open();
+                                            }
+                                        },
+                                        isSelected: props.state.mode === "photo",
+                                        children: t("misc.photo")
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
+                                        onPress: ()=>{
+                                            if (!props.state.streaming) {
+                                                props.state.setMode("video");
+                                                setupModalsState.modalState.open();
+                                            }
+                                        },
+                                        isSelected: props.state.mode === "video",
+                                        children: t("misc.video")
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
+                            props.state.mode === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
                                 onPress: ()=>{
                                     if (!props.state.streaming) {
-                                        props.state.setPhoto(false);
-                                        setupModalsState.videoInstructionsModalState.open();
+                                        props.state.setMode("screen");
+                                        setupModalsState.modalState.open();
                                     }
                                 },
-                                isSelected: !props.state.photo,
-                                children: "Video"
+                                isSelected: props.state.mode === "screen",
+                                children: t("misc.screen")
                             })
                         ]
                     })
@@ -11199,20 +11556,18 @@ const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
                         className: "w-[60px] h-[60px]",
                         children: props.thumbnail
                     }),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                        className: "bg-white rounded-full w-[72px] h-[72px] p-[3px]",
-                        onClick: ()=>props.onCapturePress(),
-                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                            className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
-                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                                className: (0, ($parcel$interopDefault($jQDcL$classnames)))("w-full h-full transition-[transform,border-radius] duration-300", props.state.photo ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
-                            })
-                        })
+                    props.state.mode === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a55fb1fbe863b99c$export$4e594bceac139abd), {
+                        ...props
+                    }),
+                    props.state.mode !== "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a55fb1fbe863b99c$export$f9da3144ae2525a3), {
+                        ...props
                     }),
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
                         onClick: props.onSwitch,
-                        className: "bg-[#565656] rounded-full w-[56px] h-[56px] flex items-center justify-center cursor-pointer",
-                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ec8eb252693ca260$export$aefffb14595958fe), {})
+                        className: (0, ($parcel$interopDefault($jQDcL$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, $jQDcL$reactjsxruntime.jsx)((0, $ec8eb252693ca260$export$aefffb14595958fe), {})
                     })
                 ]
             })
@@ -11232,6 +11587,7 @@ const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
 
 
 
+
 function $14fb55a0ce44e022$export$4589ed81930b555c(props) {
     const { children: children , state: state  } = props;
     const ref = (0, ($parcel$interopDefault($jQDcL$react))).useRef(null);
@@ -11299,6 +11655,8 @@ function $14fb55a0ce44e022$export$4589ed81930b555c(props) {
 
 
 
+
+
 const $f4dfc8739f142557$export$480db61f4dcd7727 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
         width: "12",
         height: "15",
@@ -11355,26 +11713,61 @@ const $b0f41bfff6a6128d$export$28e1ba20e0688eb7 = ()=>/*#__PURE__*/ (0, $jQDcL$r
     });
 
 
-const $1571ff3dce984dbd$var$dateFormat = new Intl.DateTimeFormat("default", {
-    dateStyle: "short"
-});
-const $1571ff3dce984dbd$var$timeFormat = new Intl.DateTimeFormat("default", {
-    hour: "numeric",
-    minute: "2-digit"
-});
-function $1571ff3dce984dbd$var$formatDate(date) {
-    const ampm = date.getHours() % 12 >= 12 ? "PM" : "AM";
-    return `${$1571ff3dce984dbd$var$dateFormat.format(date)} at ${$1571ff3dce984dbd$var$timeFormat.format(date)} ${ampm}`;
-}
+
+
+
+const $af5bf6f1b1afdb63$export$f56b3b5841ad32ae = ({ asset: asset , state: state  })=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6fa093aef38ba660$export$a703eb468fcf7e69), {
+        state: state,
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+            className: "flex flex-col items-center w-screen h-screen p-[15px] gap-[10px]",
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: "flex items-center max-w-[400px] w-full h-full",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: "min-w-full rounded-[10px] overflow-hidden",
+                        children: [
+                            asset.type === "picture" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+                                src: asset.objectUrl,
+                                alt: `Asset-${asset.assetId}`,
+                                className: "object-fill"
+                            }),
+                            asset.type === "video" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                                src: asset.objectUrl,
+                                playsInline: true,
+                                autoPlay: true,
+                                controls: true
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: "max-w-[135px] w-1/3",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                        onPress: state.close,
+                        variant: "tertiary",
+                        size: "large",
+                        fullWidth: true,
+                        children: "Close"
+                    })
+                })
+            ]
+        })
+    });
+};
+
+
 const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset  })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const confirmRemovalModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
+    const previewAssetModalProps = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
         className: "flex flex-row justify-between items-center",
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
-                title: "Confirm removal",
+                title: t("recorder.confirmRemovalTitle"),
                 state: confirmRemovalModalState,
-                description: "Are you sure you want to remove this photo/video? This action cannot be undone.",
+                description: t("recorder.confirmRemovalDescription"),
                 primaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
                         onPress: async ()=>{
                             await removeAsset(asset);
@@ -11382,29 +11775,34 @@ const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index
                         },
                         children: [
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b0f41bfff6a6128d$export$28e1ba20e0688eb7), {}),
-                            "Confirm"
+                            t("misc.confirm")
                         ]
                     }),
-                secondaryAction: "Cancel"
+                secondaryAction: t("misc.cancel")
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
                 className: "flex flex-row gap-[10px] items-center",
                 children: [
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $af5bf6f1b1afdb63$export$f56b3b5841ad32ae), {
+                        state: previewAssetModalProps,
                         asset: asset
                     }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
+                        asset: asset,
+                        onClick: previewAssetModalProps.open
+                    }),
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
                         className: "text-sm",
                         style: {
                             hyphens: "manual"
                         },
                         children: [
-                            asset.type === "picture" ? "Photo" : "Video",
+                            asset.type === "picture" ? t("misc.photo") : t("misc.video"),
                             " ",
                             index + 1,
                             " \xb7",
                             " ",
-                            $1571ff3dce984dbd$var$formatDate(new Date(asset.timestamp))
+                            (0, $7925c01e7577d264$export$3ae94a2503e890a1)(new Date(asset.timestamp))
                         ]
                     })
                 ]
@@ -11412,7 +11810,7 @@ const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
                 className: "text-xs font-bold underline cursor-pointer ml-[10px]",
                 onClick: confirmRemovalModalState.open,
-                children: "Remove"
+                children: t("misc.remove")
             })
         ]
     }, asset.assetId);
@@ -11495,6 +11893,7 @@ const $aaab1e39040d455b$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $jQDcL$r
 
 
 const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading  })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const ref = (0, $jQDcL$react.useRef)(null);
     const [assetKind, setAssetKind] = (0, $jQDcL$react.useState)(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
     const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
@@ -11522,7 +11921,7 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
                 children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
                     className: (0, ($parcel$interopDefault($jQDcL$classnames)))("fixed justify-center w-screen h-screen top-0 left-0 bg-black z-[1]", state.isOpen ? "flex" : "hidden"),
                     children: loading && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[400px]" : "flex-col items-center text-center w-[320px]"),
+                        className: (0, ($parcel$interopDefault($jQDcL$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, $jQDcL$reactjsxruntime.jsx)("div", {
                                 className: "w-[24px] h-[24px] m-[10px]",
@@ -11531,10 +11930,10 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
                                 className: "text-sm text-white",
                                 children: [
-                                    "Please wait a moment while your ",
-                                    loading,
-                                    " is being processed...",
-                                    loading === "video" ? " It may take up to 15 seconds for a video to be ready." : ""
+                                    t("recorder.elementBeingProcessed", {
+                                        type: loading === "picture" ? t("misc.photo").toLocaleLowerCase() : t("misc.video").toLocaleLowerCase()
+                                    }),
+                                    loading === "video" && t("recorder.waitVideo")
                                 ]
                             })
                         ]
@@ -11553,12 +11952,11 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
                             className: "flex flex-row justify-between p-[12px]",
                             children: [
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("h1", {
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h1", {
                                     className: "text-lg first-letter:capitalize",
-                                    children: [
-                                        assetKind,
-                                        " successfully captured"
-                                    ]
+                                    children: t("recorder.elementCaptureSuccess", {
+                                        type: t(`misc.${assetKind}`)
+                                    })
                                 }),
                                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
                                     className: "flex justify-center items-center rounded-full bg-[#f3f3f3] h-[30px] w-[30px] cursor-pointer",
@@ -11577,23 +11975,23 @@ const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: sta
                                         index: index,
                                         removeAsset: removeAsset
                                     }, asset.assetId)),
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
                                     variant: "secondary",
                                     onPress: state.close,
-                                    children: [
-                                        "Take new ",
-                                        assetKind
-                                    ]
+                                    children: t("recorder.takeNewElement", {
+                                        type: t(`misc.${assetKind}`).toLocaleLowerCase()
+                                    })
                                 }),
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
                                     onPress: ()=>{
                                         onSendAssets();
                                         state.close();
                                     },
-                                    children: [
-                                        "Send ",
-                                        assets.length > 1 ? `${assets.length} elements` : assetKind
-                                    ]
+                                    children: assets.length > 1 ? t("recorder.sendElements", {
+                                        count: assets.length
+                                    }) : t("recorder.sendElement", {
+                                        type: t(`misc.${assetKind}`).toLocaleLowerCase()
+                                    })
                                 })
                             ]
                         })
@@ -11641,7 +12039,18 @@ const $7925c01e7577d264$var$timerText = (delta)=>{
     ].map((n)=>`${n < 10 ? "0" : ""}${n}`);
     return d.join(":");
 };
+const $7925c01e7577d264$var$dateFormat = new Intl.DateTimeFormat("default", {
+    dateStyle: "short"
+});
+const $7925c01e7577d264$var$timeFormat = new Intl.DateTimeFormat("default", {
+    hour: "numeric",
+    minute: "2-digit"
+});
+function $7925c01e7577d264$export$3ae94a2503e890a1(date) {
+    return `${$7925c01e7577d264$var$dateFormat.format(date)} at ${$7925c01e7577d264$var$timeFormat.format(date)}`;
+}
 const $7925c01e7577d264$export$336a011955157f9a = ()=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const [startRecordTime, setStartRecordTime] = (0, $jQDcL$react.useState)(undefined);
     const [timer, setTimer] = (0, $jQDcL$react.useState)(0);
@@ -11658,7 +12067,7 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
     const sendAssetsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
     const [flashAnimation, setFlashAnimation] = (0, $jQDcL$react.useState)(false);
     const menuBarState = (0, $6f223c293b335d40$export$bd7b6af6aa16550c)({
-        photo: options?.recorder?.defaultState !== "video"
+        state: options?.recorder?.defaultState || "photo"
     });
     const exitStreaming = (0, $jQDcL$react.useCallback)(()=>{
         menuBarState.setStreaming(false);
@@ -11673,6 +12082,10 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
         const { facingMode: newFacingMode  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
         setFacingMode(newFacingMode);
     };
+    const onScreenshareEnabled = (event)=>{
+        if (!videoElementRef.current) return;
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestLocalScreenshare(videoElementRef.current);
+    };
     const onStopRecord = (0, $jQDcL$react.useCallback)((event)=>{
         const { url: url , assetId: assetId  } = event.detail;
         exitStreaming();
@@ -11736,10 +12149,12 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareEnabled);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("recordStopped", onStopRecord);
         return ()=>{
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareEnabled);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
         };
@@ -11747,16 +12162,18 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
         onStopRecord
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-        className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased inter",
+        className: (0, ($parcel$interopDefault($jQDcL$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"
+        }),
         children: [
-            !menuBarState.photo && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+            (menuBarState.mode === "video" || menuBarState.mode === "screen" && menuBarState.streaming) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
                 className: "text-base text-white text-center font-medium pt-2.5",
                 children: $7925c01e7577d264$var$timerText(timer)
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                className: "flex-1 min-h-0 p-2.5",
+                className: "flex-1 min-h-0 p-2.5 ",
                 children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                    className: "relative w-full h-full rounded-[10px]",
+                    className: "relative w-full h-full rounded-[10px] ",
                     children: [
                         countdownVisible && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $47dee8347993fb81$export$53819c0e58f98d49), {
                             initialValue: 3,
@@ -11774,7 +12191,20 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
                                 assetsPopupState.open();
                             }
                         }),
-                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                        menuBarState.mode === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                            className: "object-fit h-full",
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                                autoPlay: true,
+                                muted: true,
+                                playsInline: true,
+                                ref: videoElementRef,
+                                className: (0, ($parcel$interopDefault($jQDcL$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, $jQDcL$reactjsxruntime.jsx)("video", {
                             autoPlay: true,
                             muted: true,
                             playsInline: true,
@@ -11787,7 +12217,7 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
                 })
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                className: "flex justify-center px-2.5 pb-2.5",
+                className: "flex justify-center px-2.5 pb-2.5 z-10",
                 children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f223c293b335d40$export$11a6fe490bbc4873), {
                     state: menuBarState,
                     thumbnail: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
@@ -11798,16 +12228,16 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
                         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).rotateVideo();
                     },
                     onCapturePress: ()=>{
-                        if (menuBarState.photo && videoElementRef.current) {
+                        if (menuBarState.mode === "photo" && videoElementRef.current) {
                             onPhotoCapture(videoElementRef.current);
                             setFlashAnimation(true);
                         }
-                        if (!menuBarState.photo && !menuBarState.streaming) {
+                        if (menuBarState.mode !== "photo" && !menuBarState.streaming) {
                             menuBarState.setStreaming(true);
                             setTimer(0);
                             setCountdownVisible(true);
                         }
-                        if (!menuBarState.photo && menuBarState.streaming) {
+                        if (menuBarState.mode !== "photo" && menuBarState.streaming) {
                             exitStreaming();
                             if (startRecordTime) {
                                 (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).stopRecord();
@@ -11828,14 +12258,41 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
                 removeAsset: removeAsset,
                 loading: assetLoading
             }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
-                title: "Thank you for your submission!",
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
+                title: t("recorder.submissionTitle"),
                 state: sendAssetsModalState,
                 isDismissable: false,
-                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                    className: "text-base text-primaryLight",
-                    children: "Your photo/video has been successfully sent. We will review it and get back to you soon."
-                })
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                        className: "text-base text-primaryLight",
+                        children: t("recorder.submissionDescription")
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        className: "flex flex-col gap-[20px] border-t border-secondaryVLight pt-[20px]",
+                        children: assets.map((asset, index)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                                className: "flex flex-row items-center gap-[10px]",
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
+                                        asset: asset
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
+                                        className: "text-sm",
+                                        style: {
+                                            hyphens: "manual"
+                                        },
+                                        children: [
+                                            asset.type === "picture" ? "Photo" : "Video",
+                                            " ",
+                                            index + 1,
+                                            " \xb7",
+                                            " ",
+                                            $7925c01e7577d264$export$3ae94a2503e890a1(new Date(asset.timestamp))
+                                        ]
+                                    })
+                                ]
+                            }))
+                    })
+                ]
             })
         ]
     });
@@ -12584,7 +13041,7 @@ var $3305ca02e86dabd1$export$2e2bcd8739ae039 = $3305ca02e86dabd1$var$GreetingVie
 
 
 var $54541b0286afc2de$exports = {};
-$54541b0286afc2de$exports = "*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #3b82f680;\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.left-0 {\n  left: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.m-\\[10px\\] {\n  margin: 10px;\n}\n\n.mx-\\[20px\\] {\n  margin-left: 20px;\n  margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n  margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n  margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n  margin-top: 50px;\n}\n\n.block {\n  display: block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-\\[60px\\] {\n  height: 60px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-\\[235px\\] {\n  height: 235px;\n}\n\n.h-\\[93px\\] {\n  height: 93px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.h-1\\/3 {\n  height: 33.3333%;\n}\n\n.max-h-\\[inherit\\] {\n  max-height: inherit;\n}\n\n.max-h-\\[70px\\] {\n  max-height: 70px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n  min-height: 100%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[400px\\] {\n  width: 400px;\n}\n\n.w-\\[320px\\] {\n  width: 320px;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[30px\\] {\n  width: 30px;\n}\n\n.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n  max-width: 800px;\n}\n\n.max-w-\\[70px\\] {\n  max-width: 70px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-auto {\n  flex: auto;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.translate-y-2 {\n  --tw-translate-y: .5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n  --tw-translate-y: 200%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n  --tw-scale-x: .4;\n  --tw-scale-y: .4;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-\\[5px\\] {\n  gap: 5px;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.rounded-lg {\n  border-radius: .5rem;\n}\n\n.rounded-md {\n  border-radius: .375rem;\n}\n\n.rounded-\\[15px\\] {\n  border-radius: 15px;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n  border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n  border-radius: 60px;\n}\n\n.rounded-\\[10px\\] {\n  border-radius: 10px;\n}\n\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-t-\\[15px\\] {\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-secondaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-primaryLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\n}\n\n.bg-\\[\\#f12828\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#565656\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-black, .bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n  background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n  --tw-bg-opacity: .9;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-\\[3px\\] {\n  padding: 3px;\n}\n\n.p-\\[12px\\] {\n  padding: 12px;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n  padding-top: 9px;\n  padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n  padding-left: .875rem;\n  padding-right: .875rem;\n}\n\n.px-3 {\n  padding-left: .75rem;\n  padding-right: .75rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n  padding-top: 25px;\n  padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n.pt-2\\.5 {\n  padding-top: .625rem;\n}\n\n.pt-2 {\n  padding-top: .5rem;\n}\n\n.pb-2\\.5 {\n  padding-bottom: .625rem;\n}\n\n.pb-2 {\n  padding-bottom: .5rem;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-base {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 19px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 17px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.text-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-white\\/80 {\n  color: #fffc;\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n  --tw-text-opacity: 1;\n  color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n  text-decoration-line: underline;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n  opacity: .4;\n}\n\n.opacity-90 {\n  opacity: .9;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n  transition-property: transform, border-radius;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n  transition-duration: .3s;\n}\n\n.ease-in-out {\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.ease-in {\n  transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.inter {\n  font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n  .inter {\n    font-family: Inter var, sans-serif;\n  }\n}\n\n.first-letter\\:capitalize:first-letter {\n  text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n";
+$54541b0286afc2de$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";
 
 
 var $9833f4335ab609cd$exports = {};