@snapcall/stream-ui 1.16.0 → 1.17.0

package/dist/stream-ui.js

@@ -5,11 +5,13 @@ var $jQDcL$bundletextsnapcalldesignsystemdiststylecss = require("bundle-text:@sn
 var $jQDcL$reacthottoast = require("react-hot-toast");
 var $jQDcL$styledcomponents = require("styled-components");
 var $jQDcL$react = require("react");
+var $jQDcL$snapcalldesignsystem = require("@snapcall/design-system");
 require("inobounce");
 var $jQDcL$reactquery = require("react-query");
 var $jQDcL$reacti18next = require("react-i18next");
 var $jQDcL$i18next = require("i18next");
 var $jQDcL$bowser = require("bowser");
+var $jQDcL$reactstately = require("react-stately");
 var $jQDcL$uuid = require("uuid");
 var $jQDcL$protooclient = require("protoo-client");
 var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
@@ -17,10 +19,9 @@ var $jQDcL$sentrybrowser = require("@sentry/browser");
 var $jQDcL$mediasoupclient = require("mediasoup-client");
 var $jQDcL$mediapipeselfie_segmentation = require("@mediapipe/selfie_segmentation");
 var $jQDcL$buffer = require("buffer");
+var $jQDcL$reacthookform = require("react-hook-form");
 var $jQDcL$reactdom = require("react-dom");
 var $jQDcL$qrcode = require("qrcode");
-var $jQDcL$reactstately = require("react-stately");
-var $jQDcL$snapcalldesignsystem = require("@snapcall/design-system");
 var $jQDcL$lottiefilesreactlottieplayer = require("@lottiefiles/react-lottie-player");
 var $jQDcL$classnames = require("classnames");
 
@@ -345,6 +346,7 @@ const $57b7750d9786bf6f$export$1cbfb36c1655a9a = (root, element)=>{
 
 
 
+
 const $393bda1b33846dfc$export$604ba5624273df44 = ()=>{
     try {
         const storedTheme = localStorage.getItem("stream_ui_language");
@@ -417,7 +419,8 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             title: "Copy link",
             description: "Copy link into clipboard",
             error: "An error occured when trying to copy to clipboard",
-            copied: "Link copied to clipboard"
+            copied: "Link copied to clipboard",
+            copy: "Copy"
         },
         quickConnect: {
             title: "Quick Connect",
@@ -457,6 +460,28 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             invoice: "{{user}} sent you an invoice.",
             pay: "Pay"
         },
+        invitePeople: {
+            inviteRecordClip: "Invite to record clip",
+            copyCallLinkDescription: "Copy this link and send it to anyone you wish to invite to join the call.",
+            copyClipLinkDescription: "Copy this link and send it to anyone you wish to invite to record a clip.",
+            inviteCall: "Invite to join call",
+            sharePublicLink: "Share public link",
+            inviteByEmail: "Invite by email",
+            addEmailToInvite: "Add an email to invite.",
+            email: "Email",
+            emailPlaceholder: "Eg. john@acme.com",
+            invite: "Invite",
+            linkToJoinCall: "Link to join the call",
+            linkToRecordAClip: "Link to record a clip",
+            invalidEmail: "Invalid email format.",
+            addEmails: "Add emails...",
+            invitationSentTo_one: "Sent to {{ name }}",
+            invitationSentTo_other: "Sent to {{ name }} and {{ otherEmailsCount }}+",
+            error: "Failed to send, please try again later.",
+            inviteCallDefaultMessage: "Hey! You're invited to join our video call. Click the link to connect instantly.",
+            inviteClipDefaultMessage: "Hey! Please record your video clip now and provide us with more context to assist you better.",
+            message: "Message"
+        },
         youtube: {
             title: "Watch Together",
             url: "YOUTUBE URL",
@@ -549,7 +574,7 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             attachElements_other: "Attach {{ count }} elements",
             allowAccess: "Allow access",
             okay: "Okay",
-            allowCamMicAccess: "Allow access to camera and microphone",
+            allowCamMicAccess: "Allow access to cam/mic",
             allowScreenShareAccess: "Allow access to screen sharing",
             permissionDeniedTitle: "Something went wrong!",
             permissionDeniedDescription: "Without access to the camera and microphone, you won't be able to capture photos or videos to share with the support team. Please grant access in your browser settings.",
@@ -557,19 +582,15 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             videoInstructionsTitle: "Ready to record a video?",
             screenShareInstructionsTitle: "Ready to share your screen?",
             instructions: {
-                allowAccessOnPrompt: "When prompted, <1>allow access</1> to the camera and microphone.",
-                tapPhotoButton: "Tap the <1 /><2>Camera button</2> to take a photo.",
-                multiplePhotos: "Feel free to take multiple photos for more details.",
-                reviewAndSendPhotos: "Review your photo and <1>send it when you're satisfied.</1>",
-                reviewAndSendScreenShare: "Review your video and <1>send it when you're satisfied.</1>",
-                tapVideoButton: "Tap the <1 /><2>Record button</2> to start recording.",
-                videoSpeech: "You can <1>talk during</1> the recording to provide additional information.",
-                tapStopVideoButton: "When you're done, tap the <1 /><2>Stop button</2>.",
-                reviewAndSendVideos: "Review your video and <1>send it when you're satisfied</1>.",
-                tapScreenShareButton: "Tap <1>Record my screen</1> to begin recording.",
-                tapStopScreenShareButton: "When you're done, tap <1>Stop recording</1>.",
+                allowAccessOnPrompt: "When prompted, <bold>allow access</bold> to camera and microphone.",
+                multiplePhotos: "Take a <bold>photo or multiple</bold> for detail, then review.",
+                reviewAndSendPhotos: "<bold>Validate your photos</bold>, and they will be sent to us automatically.",
+                tapVideoButton: "<bold>Tap the record button</bold> to begin and feel free to provide commentary.",
+                videoSpeech: "You can <bold>talk during</bold> the recording to provide additional information.",
+                tapStopVideoButton: "<bold>Tap stop</bold> when you are done.",
+                reviewAndSendVideos: "<bold>Review your videos</bold>, and they will be sent to us automatically.",
                 screenShareInstruction: "Select the screen or window you wish to record.",
-                privacyPolicy: "By proceeding, you agree to our <1>Privacy Policy</1>."
+                privacyPolicy: "By proceeding, you agree to our <bold>Privacy Policy</bold>."
             },
             switchToMobileTitle: "Switch to your mobile device",
             switchToMobileDescription: "Experience greater convenience by using your phone to take photos and record videos.",
@@ -668,7 +689,8 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             title: "Copier le lien",
             description: "Copier le lien dans le presse-papiers",
             error: "Une erreur est survenue pendant la copie du lien dans le presse-papier",
-            copied: "Lien copi\xe9 dans le presse-papier"
+            copied: "Lien copi\xe9 dans le presse-papier",
+            copy: "Copier"
         },
         quickConnect: {
             title: "Quick Connect",
@@ -708,6 +730,28 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             invoice: "{{user}} vous a envoy\xe9 une facture.",
             pay: "Payer"
         },
+        invitePeople: {
+            inviteRecordClip: "Inviter \xe0 enregistrer un clip",
+            copyCallLinkDescription: "Copiez ce lien et envoyez-le \xe0 toute personne que vous souhaitez inviter \xe0 rejoindre l'appel.",
+            copyClipLinkDescription: "Copiez ce lien et envoyez-le \xe0 toute personne que vous souhaitez inviter \xe0 enregistrer un clip.",
+            inviteCall: "Inviter \xe0 rejoindre l'appel",
+            sharePublicLink: "Partager le lien public",
+            inviteByEmail: "Inviter par email",
+            addEmailToInvite: "Ajoutez un e-mail pour inviter.",
+            email: "Email",
+            emailPlaceholder: "Ex. jean@acme.com",
+            invite: "Inviter",
+            linkToJoinCall: "Lien pour rejoindre l'appel",
+            linkToRecordAClip: "Lien pour enregistrer un clip",
+            invalidEmail: "Format d'email invalide.",
+            addEmails: "Ajouter des e-mails...",
+            invitationSentTo_one: "Envoy\xe9 \xe0 {{ name }}",
+            invitationSentTo_other: "Envoy\xe9 \xe0 {{ name }} et {{ otherEmailsCount }}+",
+            error: "\xc9chec de l'envoi, veuillez r\xe9essayer plus tard.",
+            inviteCallDefaultMessage: "Vous \xeates invit\xe9 \xe0 rejoindre notre appel vid\xe9o. Cliquez sur le lien pour vous connecter instantan\xe9ment.",
+            inviteClipDefaultMessage: "Veuillez enregistrer votre clip vid\xe9o maintenant et nous fournir plus de contexte pour mieux vous aider.",
+            message: "Message"
+        },
         youtube: {
             title: "Regardons Ensemble",
             url: "URL YOUTUBE",
@@ -795,32 +839,28 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             sendElements_one: "Envoyer la {{ type }}",
             sendElements_other: "Envoyer {{ count }} \xe9l\xe9ments",
             attachElements_one: "Joindre {{ type }} au ticket",
-            attachElements_other: "Joindre {{ count }}\xa0\xe9l\xe9ments",
+            attachElements_other: "Joindre {{ count }} \xe9l\xe9ments",
             clipCount_one: "{{ count }} clip",
             clipCount_other: "{{ count }} clips",
             allowAccess: "Autoriser l'acc\xe8s",
             okay: "D'accord",
-            allowCamMicAccess: "Autoriser l'acc\xe8s \xe0 la cam\xe9ra et au micro",
+            allowCamMicAccess: "Autoriser acc\xe8s cam\xe9ra/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(e) \xe0 prendre une photo ?",
-            videoInstructionsTitle: "Pr\xeat(e) \xe0 enregistrer une vid\xe9o ?",
-            screenShareInstructionsTitle: "Pr\xeat(e) \xe0 partager votre \xe9cran ?",
+            photoInstructionsTitle: "Pr\xeat \xe0 prendre une photo ?",
+            videoInstructionsTitle: "Pr\xeat \xe0 enregistrer une vid\xe9o ?",
+            screenShareInstructionsTitle: "Pr\xeat \xe0 partager votre \xe9cran ?",
             instructions: {
-                allowAccessOnPrompt: "Lorsque vous y \xeates invit\xe9(e), <1>autorisez l'acc\xe8s</1> \xe0 la cam\xe9ra et au microphone.",
-                tapPhotoButton: "Appuyez sur le <1 /><2>bouton Appareil photo</2> pour prendre une photo.",
-                multiplePhotos: "N'h\xe9sitez pas \xe0 prendre plusieurs photos pour plus de d\xe9tails.",
-                reviewAndSendPhotos: "Vous pouvez revoir votre photo, puis <1>l'envoyer lorsque vous avez termin\xe9.</1>",
-                tapVideoButton: "Appuyez sur le <1 /><2>bouton d'enregistrement</2> pour d\xe9marrer un enregistrement.",
+                allowAccessOnPrompt: "<bold>Autorisez l'acc\xe8s</bold> \xe0 la cam\xe9ra et au micro lorsque demand\xe9.",
+                multiplePhotos: "Prenez <bold>une ou plusieurs photos</bold> pour donner plus de d\xe9tails.",
+                reviewAndSendPhotos: "<bold>Validez vos photos</bold>, et elles nous seront envoy\xe9es automatiquement.",
+                tapVideoButton: "<bold>Appuyez sur Enregistrer</bold>. Pensez \xe0 commenter.",
                 videoSpeech: "Vous pouvez <1>parler pendant</1> l'enregistrement pour ajouter des d\xe9tails.",
-                tapStopVideoButton: "Lorsque vous avez termin\xe9, appuyez sur le <1 /><2>bouton Arr\xeater</2>.",
-                reviewAndSendVideos: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9</2>.",
-                tapScreenShareButton: "Appuyez sur <1>Enregistrer \xe9cran</1> pour d\xe9marrer un enregistrement.",
-                tapStopScreenShareButton: "Lorsque vous avez termin\xe9, appuyez sur <1>Stop enregistrement</1>.",
-                reviewAndSendScreenShare: "Vous pouvez revoir votre vid\xe9o, puis <1>l'envoyer lorsque vous avez termin\xe9.</1>",
+                tapStopVideoButton: "<bold>Appuyez sur Arr\xeat</bold> lorsque vous avez termin\xe9.",
+                reviewAndSendVideos: "<bold>Validez vos vid\xe9os</bold>, et elles nous seront envoy\xe9es automatiquement.",
                 screenShareInstruction: "S\xe9lectionnez l'\xe9cran ou la fen\xeatre que vous souhaitez enregistrer.",
-                privacyPolicy: "En poursuivant, vous acceptez notre <1>Politique de confidentialit\xe9</1>."
+                privacyPolicy: "En continuant, vous acceptez notre <bold>Politique de confidentialit\xe9</bold>."
             },
             switchToMobileTitle: "Passez sur votre mobile",
             switchToMobileDescription: "Profitez d'une exp\xe9rience encore plus pratique en utilisant votre t\xe9l\xe9phone pour prendre des photos et enregistrer des vid\xe9os.",
@@ -919,7 +959,8 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             title: "Copia il link",
             description: "Copia il link negli appunti",
             error: "Si \xe8 verificato un errore durante la copia negli Appunti",
-            copied: "Link copiato negli Appunti"
+            copied: "Link copiato negli Appunti",
+            copy: "Copia"
         },
         quickConnect: {
             title: "Connessione Rapida",
@@ -959,6 +1000,28 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             invoice: "{{User}} ti ha inviato una fattura.",
             pay: "Paga"
         },
+        invitePeople: {
+            inviteRecordClip: "Invita a registrare la clip",
+            copyCallLinkDescription: "Copia questo link e invialo a chiunque desideri invitare a partecipare alla chiamata.",
+            copyClipLinkDescription: "Copia questo collegamento e invialo a chiunque desideri invitare a registrare una clip.",
+            inviteCall: "Invita a partecipare alla chiamata",
+            sharePublicLink: "Condividi link",
+            inviteByEmail: "Invita via email",
+            addEmailToInvite: "Aggiungi un'e-mail per invitare.",
+            email: "Email",
+            emailPlaceholder: "Es. giovanni@acme.com",
+            invite: "Invita",
+            linkToJoinCall: "Link per partecipare alla chiamata",
+            linkToRecordAClip: "Collegamento per registrare una clip",
+            invalidEmail: "Formato email non valido.",
+            addEmails: "Aggiungi email...",
+            invitationSentTo_one: "Inviato a {{ name }}",
+            invitationSentTo_other: "Inviato a {{ name }} e {{ otherEmailsCount }}+",
+            error: "Impossibile inviare, riprova pi\xf9 tardi.",
+            inviteCallDefaultMessage: "Sei invitato a partecipare alla nostra videochiamata. Fare clic sul collegamento per connettersi immediatamente.",
+            inviteClipDefaultMessage: "Registra subito il tuo videoclip e forniscici pi\xf9 contesto per assisterti meglio.",
+            message: "Messaggio"
+        },
         youtube: {
             title: "Vedere Assieme",
             url: "URL YOUTUBE",
@@ -1051,7 +1114,7 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             clipCount_other: "{{ count }} clips",
             allowAccess: "Consenti accesso",
             okay: "Okay",
-            allowCamMicAccess: "Consenti accesso a fotocamera e microfono",
+            allowCamMicAccess: "Consenti l'accesso a cam/mic",
             allowScreenShareAccess: "Consenti accesso alla condivisione dello schermo",
             permissionDeniedTitle: "Qualcosa \xe8 andato storto!",
             permissionDeniedDescription: "Senza l'accesso alla fotocamera e al microfono, non \xe8 possibile scattare foto o registrare video da condividere con il team di supporto. Si prega di concedere l'accesso nelle impostazioni del browser.",
@@ -1059,19 +1122,15 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             videoInstructionsTitle: "Pronto a registrare un video?",
             screenShareInstructionsTitle: "Pronto a condividere il tuo schermo?",
             instructions: {
-                allowAccessOnPrompt: "Quando richiesto, <1>consenti l'accesso</1> a fotocamera e microfono.",
-                tapPhotoButton: "Tocca il pulsante <1 /><2>Fotocamera</2> per scattare una foto.",
-                multiplePhotos: "Non esitare a scattare pi\xf9 foto per maggiori dettagli.",
-                reviewAndSendPhotos: "Puoi rivedere la tua foto e poi <1>inviarla quando hai finito.</1>",
-                tapVideoButton: "Tocca il pulsante <1 /><2>Registra</2> per avviare una registrazione.",
+                allowAccessOnPrompt: "<bold>Consenti l'accesso</bold> alla fotocamera e al microfono.",
+                multiplePhotos: "Scatta <bold>una foto o pi\xf9</bold> di una per i dettagli.",
+                reviewAndSendPhotos: "<bold>Convalida le tue foto</bold> e verranno inviate automaticamente a noi.",
+                tapVideoButton: "<bold>Premi Registra</bold>. Ricordati di commentare.",
                 videoSpeech: "Puoi <1>parlare durante</1> la registrazione per aggiungere dettagli.",
-                tapStopVideoButton: "Quando hai finito, tocca il pulsante <1 /><2>Ferma</2>.",
-                reviewAndSendVideos: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito</1>.",
-                tapScreenShareButton: "Tocca <1>Registra il mio schermo</1> per avviare una registrazione.",
-                tapStopScreenShareButton: "Quando hai finito, tocca <1>Ferma registrazione</1>.",
-                reviewAndSendScreenShare: "Puoi rivedere il tuo video e poi <1>inviarlo quando hai finito.</1>",
+                tapStopVideoButton: "<bold>Premi Stop</bold> quando hai finito.",
+                reviewAndSendVideos: "<bold>Convalida i tuoi video</bold> e verranno inviati automaticamente a noi.",
                 screenShareInstruction: "Seleziona lo schermo o la finestra che desideri registrare.",
-                privacyPolicy: "Procedendo, l'utente accetta la nostra <1>Privacy Policy</1>."
+                privacyPolicy: "Procedendo, accetti la nostra <bold>Politica sulla Privacy.</bold>"
             },
             switchToMobileTitle: "Passa al tuo dispositivo mobile",
             switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 pratica utilizzando il tuo telefono per scattare foto e registrare video.",
@@ -1136,6 +1195,8 @@ var $b45c0bcc142f0b5e$export$2e2bcd8739ae039 = (0, ($parcel$interopDefault($jQDc
 
 
 
+
+
 /* eslint-disable no-console */ 
 const $d0c6baf97675ab49$var$LogLevel = {
     error: 1,
@@ -1967,6 +2028,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         };
         this.muted = false;
         this.roomId = "";
+        this.companyId = 0;
         this.peerId = "";
         this.webcamProducer = null;
         this.customMessages = new Map();
@@ -2001,6 +2063,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         });
         return {
             roomId: this.roomId,
+            companyId: this.companyId,
             peerId: this.peerId,
             profile: this.profile,
             joinOptions: this.joinOptions,
@@ -2067,7 +2130,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         if (!this.peerId) this.peerId = (0, $jQDcL$uuid.v4)();
         let url;
         try {
-            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  } , recordings: recordings  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
+            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  } , recordings: recordings , company_id: company_id  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -2076,6 +2139,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 if (response.ok) return response.json();
                 throw new Error("Invalid room ID");
             });
+            this.companyId = company_id;
             this.permissions = permissions;
             if (recordings?.headless === true) permissions.push("record_video_on_demand");
             this.plan = name;
@@ -5218,6 +5282,328 @@ const $5dcd9e6925c7037c$var$Sounds = ()=>{
 var $5dcd9e6925c7037c$export$2e2bcd8739ae039 = $5dcd9e6925c7037c$var$Sounds;
 
 
+
+
+
+
+
+
+
+
+const $bdd080364d556ec5$var$validateEmail = (email)=>{
+    return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+};
+const $bdd080364d556ec5$var$getTexts = (type, t)=>({
+        instant: {
+            title: t("invitePeople.inviteCall"),
+            description: t("invitePeople.copyCallLinkDescription"),
+            defaultMessage: t("invitePeople.inviteCallDefaultMessage")
+        },
+        assist: {
+            title: t("invitePeople.inviteRecordClip"),
+            description: t("invitePeople.copyClipLinkDescription"),
+            defaultMessage: t("invitePeople.inviteClipDefaultMessage")
+        }
+    })[type];
+const $bdd080364d556ec5$export$1712c8fcb05f49a6 = ({ modalState: modalState , ...props })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const { toast: toast  } = (0, $jQDcL$snapcalldesignsystem.useToast)();
+    const { options: options , isAgent: isAgent , language: language  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const [type, setType] = (0, $jQDcL$react.useState)("instant");
+    const [selectedKey, setSelectedKey] = (0, $jQDcL$react.useState)("public");
+    const formContext = (0, $jQDcL$reacthookform.useForm)({
+        defaultValues: {
+            emails: [],
+            message: ""
+        }
+    });
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (!modalState.isOpen) formContext.reset();
+    }, [
+        modalState.isOpen,
+        formContext
+    ]);
+    const texts = (0, $jQDcL$react.useMemo)(()=>{
+        return $bdd080364d556ec5$var$getTexts(type, t);
+    }, [
+        t,
+        type
+    ]);
+    const streamURL = (0, $jQDcL$react.useMemo)(()=>{
+        const url = new URL(options.sharedURL || window.location.href);
+        if (type === "assist") url.searchParams.set("recorder", "1");
+        return url.href;
+    }, [
+        type,
+        options.sharedURL
+    ]);
+    const sendPublicInvite = (emails)=>{
+        const { roomId: roomId  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
+        return fetch(`${options.apiUrl}/public/streams/${roomId}/invite`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                type: type,
+                emails: emails,
+                lang: language
+            })
+        });
+    };
+    const sendAuthInvite = (emails, message)=>{
+        const { roomId: roomId , companyId: companyId , joinOptions: joinOptions  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
+        return fetch(`${options.apiUrl}/companies/${companyId}/streams/${roomId}/invite`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${joinOptions.apiKey}`
+            },
+            body: JSON.stringify({
+                type: type,
+                emails: emails,
+                text: message || texts.defaultMessage
+            })
+        });
+    };
+    const copyStreamUrl = async (url)=>{
+        try {
+            await (0, $0bea101d3ef852fb$export$2e2bcd8739ae039)(url);
+            toast({
+                title: t("copyLink.copied"),
+                icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Copy5Icon), {})
+            });
+        } catch (err) {
+            console.warn(err);
+            toast({
+                title: t("copyLink.error"),
+                icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Copy5Icon), {})
+            });
+        }
+    };
+    const onSubmit = formContext.handleSubmit(async (data)=>{
+        let result;
+        if (isAgent) result = await sendAuthInvite(data.emails, data.message);
+        else result = await sendPublicInvite(data.emails);
+        if (result.ok) {
+            const [firstInvited, ...emails] = data.emails;
+            toast({
+                title: t("invitePeople.invitationSentTo", {
+                    name: firstInvited,
+                    count: emails.length + 1,
+                    otherEmailsCount: emails.length
+                }),
+                icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CheckIcon), {})
+            });
+            formContext.reset();
+            modalState.close();
+        } else toast({
+            title: t("invitePeople.error"),
+            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertTriangleIcon), {})
+        });
+    });
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Dialog), {
+        open: modalState.isOpen,
+        onOpenChange: (open)=>{
+            !open && modalState.close();
+        },
+        ...props,
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.DialogContent), {
+            className: "outline-none",
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogHeader), {
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogTitle), {
+                        children: texts.title
+                    })
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Tabs), {
+                    defaultValue: selectedKey,
+                    onValueChange: (key)=>setSelectedKey(String(key)),
+                    className: "w-full",
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.TabsList), {
+                            className: "w-full mb-4",
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TabsTrigger), {
+                                    className: "w-full",
+                                    value: "public",
+                                    children: t("invitePeople.sharePublicLink")
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TabsTrigger), {
+                                    className: "w-full",
+                                    value: "invitePeople",
+                                    children: t("invitePeople.inviteByEmail")
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TabsContent), {
+                            value: "public",
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                                className: "flex flex-col max-w-full gap-4 overflow-hidden",
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                                        className: "flex items-center gap-2 py-2 pl-4 pr-2 border border-gray-200 rounded-md bg-gray-25",
+                                        children: [
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("input", {
+                                                readOnly: true,
+                                                onChange: ()=>{},
+                                                className: "text-gray-700 truncate text-md grow focus-visible:outline-none",
+                                                value: streamURL
+                                            }),
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
+                                                className: "shrink-0",
+                                                onClick: ()=>copyStreamUrl(streamURL),
+                                                size: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CopyIcon), {
+                                                        className: "text-white",
+                                                        size: 16
+                                                    }),
+                                                    t("copyLink.copy")
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                        className: "text-sm text-gray-700",
+                                        children: texts.description
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TabsContent), {
+                            value: "invitePeople",
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Form), {
+                                ...formContext,
+                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("form", {
+                                    className: "flex flex-col gap-4",
+                                    onSubmit: (e)=>{
+                                        e.preventDefault();
+                                        onSubmit();
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormField), {
+                                            control: formContext.control,
+                                            name: "emails",
+                                            rules: {
+                                                required: t("invitePeople.addEmailToInvite"),
+                                                validate: {
+                                                    allEmails: (value)=>{
+                                                        if (!value.every($bdd080364d556ec5$var$validateEmail)) return t("invitePeople.invalidEmail");
+                                                    }
+                                                }
+                                            },
+                                            render: ({ field: field  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.FormItem), {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormLabel), {
+                                                            children: t("invitePeople.inviteByEmail")
+                                                        }),
+                                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormControl), {
+                                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CreatableSelect), {
+                                                                placeholder: t("invitePeople.emailPlaceholder"),
+                                                                newLabel: `${t("invitePeople.email")}: `,
+                                                                value: field.value,
+                                                                onValueChanged: (v)=>{
+                                                                    field.onChange(v);
+                                                                },
+                                                                multiple: true
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormMessage), {})
+                                                    ]
+                                                })
+                                        }),
+                                        isAgent && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormField), {
+                                            control: formContext.control,
+                                            name: "message",
+                                            render: ({ field: field  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.FormItem), {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormLabel), {
+                                                            children: t("invitePeople.message")
+                                                        }),
+                                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormControl), {
+                                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Textarea), {
+                                                                placeholder: texts.defaultMessage,
+                                                                ...field
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormMessage), {})
+                                                    ]
+                                                })
+                                        }),
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                            className: "flex justify-end",
+                                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
+                                                size: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Send3Icon), {
+                                                        size: 16,
+                                                        className: "text-white"
+                                                    }),
+                                                    t("invitePeople.invite")
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("input", {
+                                            className: "hidden",
+                                            type: "submit"
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("hr", {
+                    className: "w-full h-[1px] bg-gray-200"
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Select), {
+                    defaultValue: type,
+                    onValueChange: (v)=>{
+                        const selectedType = v;
+                        setType(selectedType);
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.SelectTrigger), {
+                            className: "w-full",
+                            children: [
+                                type === "instant" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.PhoneCall1Icon), {
+                                    size: 18,
+                                    duotone: true,
+                                    className: "text-blue-700"
+                                }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderIcon), {
+                                    size: 18,
+                                    duotone: true,
+                                    className: "text-blue-700"
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                    className: "flex-grow pl-2 text-left",
+                                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectValue), {})
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectContent), {
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.SelectGroup), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectItem), {
+                                        value: "instant",
+                                        children: t("invitePeople.linkToJoinCall")
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectItem), {
+                                        value: "assist",
+                                        children: t("invitePeople.linkToRecordAClip")
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+
 const $e1930b467e7d8845$var$multiPiP = new (0, $21395e477f83709c$export$45fabd1ce5e673de)();
 const $e1930b467e7d8845$var$browser = $jQDcL$bowser.parse(window.navigator.userAgent);
 const $e1930b467e7d8845$var$Header = ()=>{
@@ -5225,6 +5611,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
     const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen , isAgent: isAgent , videoRecording: videoRecording , setVideoRecording: setVideoRecording  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $jQDcL$react.useState)(options.extraSettingsOptions || []);
+    const inviteModal = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
     const onSetExtraSettingsOptions = (event)=>{
         const { extraOptions: newExtraOptions  } = event.detail;
         setExtraOptions(newExtraOptions);
@@ -5308,6 +5695,15 @@ const $e1930b467e7d8845$var$Header = ()=>{
                         title: t("quickConnect.title"),
                         jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$6470d09a29d34d08), {}),
                         action: onScanQuickConnectClick
+                    },
+                    {
+                        id: "invite",
+                        title: t("invitePeople.invite"),
+                        jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.UserPlus1Icon), {
+                            size: 24,
+                            className: "text-white"
+                        }),
+                        action: ()=>inviteModal.setOpen(true)
                     }
                 ]
             },
@@ -5372,6 +5768,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
         options.sharedURL,
         muted,
         streaming,
+        inviteModal,
         setIsQuickConnectPopupVisible,
         setBlockedFeaturePopupOpen,
         setIsSettingsMenuVisible,
@@ -5380,6 +5777,9 @@ const $e1930b467e7d8845$var$Header = ()=>{
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$1e86fd0e1db89578), {
         children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bdd080364d556ec5$export$1712c8fcb05f49a6), {
+                modalState: inviteModal
+            }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$d43ffeaaec0b2a58), {
                 children: [
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6d8b37b4bd2444ef$export$2e2bcd8739ae039), {
@@ -12984,6 +13384,7 @@ function $52e751d204780518$export$c74cd098b7a410cb({ mode: mode = "photo" , requ
     });
     const [noSoundToastId, setNoSoundToastId] = (0, $jQDcL$react.useState)(null);
     const [continueSpeakingToastId, setContinueSpeakingToastId] = (0, $jQDcL$react.useState)(null);
+    const [flow, setFlow] = (0, $jQDcL$react.useState)();
     const updateAudioLevel = (0, $jQDcL$react.useCallback)((event)=>{
         const { audioLevel: audioLevel  } = event.detail;
         if (timer !== 0 && streaming) setAverageAudioLevel((prev)=>((prev || 0) * (Math.floor(timer) - 1) + audioLevel) / timer);
@@ -13077,7 +13478,9 @@ function $52e751d204780518$export$c74cd098b7a410cb({ mode: mode = "photo" , requ
         assetLoading: assetLoading,
         setAssetLoading: setAssetLoading,
         captureThumbnail: captureThumbnail,
-        lastRecordingAudioLevel: averageAudioLevel || 0
+        lastRecordingAudioLevel: averageAudioLevel || 0,
+        flow: flow,
+        setFlow: setFlow
     };
 }
 
@@ -13969,72 +14372,6 @@ const $b758582ffbe79e9a$export$287f8fcc69caf433 = /*#__PURE__*/ (0, $jQDcL$react
 
 
 
-const $bec7bca3a7448591$export$f9da3144ae2525a3 = ({ sideColor: sideColor , mainColor: mainColor  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
-        width: "20",
-        height: "21",
-        viewBox: "0 0 20 21",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-            display: "inline"
-        },
-        transform: "translate(0 -1)",
-        children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-                d: "M10 2.167a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
-                fill: sideColor || "#1D1C20"
-            }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-                d: "M6.76 5.65a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
-                fill: mainColor || "#F12828"
-            })
-        ]
-    });
-const $bec7bca3a7448591$export$c6a849fd9d9d93a2 = ({ sideColor: sideColor , mainColor: mainColor  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-            display: "inline"
-        },
-        transform: "translate(0 -1)",
-        children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
-                fill: sideColor || "#1D1C20"
-            }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-                d: "M7.5 6.667h5a.833.833 0 0 1 .833.833v5a.833.833 0 0 1-.834.834h-5a.833.833 0 0 1-.833-.834v-5a.833.833 0 0 1 .833-.833Z",
-                fill: mainColor || "#F12828"
-            })
-        ]
-    });
-const $bec7bca3a7448591$export$dce36e07153365d = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-            display: "inline"
-        },
-        transform: "translate(0 -1)",
-        children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.666 6.666 0 1 1 0-13.333 6.666 6.666 0 0 1 0 13.333Z",
-                fill: "#1D1C20"
-            }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-                d: "M6.76 5.15a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
-                fill: "#1D1C20"
-            })
-        ]
-    });
-
-
-
 
 const $f341dd104b321776$var$savedPermissions = {
     audio: false,
@@ -14071,7 +14408,7 @@ const $47755bb1d707f6f6$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0,
     });
 const $47755bb1d707f6f6$export$788cb893d96254c8 = ({ state: state , mode: mode , primaryAction: primaryAction  })=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const getUserMediaMutation = (0, $f341dd104b321776$export$d791e41b9a4de1f2)({
+    (0, $f341dd104b321776$export$d791e41b9a4de1f2)({
         audio: true,
         video: true
     });
@@ -14087,155 +14424,205 @@ const $47755bb1d707f6f6$export$788cb893d96254c8 = ({ state: state , mode: mode ,
     const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const device = orientation === "landscape" ? "desktop" : "mobile";
     const videoLength = permissionsState === "granted" ? "short" : "full";
-    const ref = (0, $jQDcL$react.useRef)(null);
     const title = mode === "photo" ? t("recorder.photoInstructionsTitle") : t("recorder.videoInstructionsTitle");
-    const mediaInstruction = [
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
-            i18nKey: "recorder.instructions.allowAccessOnPrompt",
-            children: [
-                "When prompted, ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {
-                    children: "allow access"
-                }),
-                " to camera and microphone."
-            ]
-        })
-    ];
     const instructionPhoto = [
-        /*#__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)($47755bb1d707f6f6$var$Bold, {
-                    children: " Camera button"
-                }),
-                " to take a photo."
-            ]
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
+            i18nKey: "recorder.instructions.allowAccessOnPrompt",
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
+            }
+        }),
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
+            i18nKey: "recorder.instructions.multiplePhotos",
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
+            }
         }),
-        t("recorder.instructions.multiplePhotos"),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.reviewAndSendPhotos",
-            children: [
-                "You can review your photo and then ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {
-                    children: "send it when you're done."
-                })
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
+            }
         })
     ];
     const instructionVideo = [
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((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)($47755bb1d707f6f6$var$Bold, {
-                    children: " Record button"
-                }),
-                " to start a recording."
-            ]
-        }),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
-            i18nKey: "recorder.instructions.videoSpeech",
-            children: [
-                "You can ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {
-                    children: "speak during"
-                }),
-                " the recording for added detail."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((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)($47755bb1d707f6f6$var$Bold, {
-                    children: " Stop button"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.reviewAndSendVideos",
-            children: [
-                "You can review your video and then ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {
-                    children: "send it when you're done"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
+            }
         })
     ];
-    const instructions = [];
-    if (!getUserMediaMutation.savedPermissions.audio) instructions.push(...mediaInstruction);
-    instructions.push(...mode === "photo" ? instructionPhoto : instructionVideo);
+    const instructions = mode === "photo" ? instructionPhoto : instructionVideo;
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialog), {
         open: state.isOpen,
         onOpenChange: (open)=>{
             !open && state.close();
         },
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
-            className: "max-h-screen overflow-y-auto",
+            className: "max-h-screen rounded-xl overflow-y-auto md:w-[334px] w-[334px]",
             children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                    className: "relative rounded-xl",
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                            className: "w-full rounded-[inherit]",
+                            src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${mode}-${videoLength}.mp4`,
+                            playsInline: true,
+                            autoPlay: true,
+                            muted: true,
+                            loop: true
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                            className: "absolute inset-0 ring-2 ring-inset ring-white/20 rounded-[inherit]"
+                        })
+                    ]
+                }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogHeader), {
                     children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogTitle), {
                         children: title
                     })
                 }),
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                    className: "flex flex-col gap-[20px]",
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: "flex flex-col gap-3",
+                    children: instructions.map((value, index)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                            className: "flex items-center gap-2 p-2 bg-gray-50 rounded-lg",
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                    className: "flex items-center justify-center w-5 h-5 rounded-md bg-gray-200 text-xs font-semibold",
+                                    children: index + 1
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                    className: "w-[1px] h-full bg-gray-200"
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                    className: "flex-1 text-sm text-gray-900",
+                                    children: value
+                                })
+                            ]
+                        }, index))
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogFooter), {
+                    children: primaryAction()
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
+                    className: "text-xs text-gray-900 text-center",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
+                        i18nKey: "recorder.instructions.privacyPolicy",
+                        components: {
+                            bold: // eslint-disable-next-line jsx-a11y/anchor-has-content
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("a", {
+                                className: "font-semibold text-gray-1000 underline",
+                                href: "https://www.snapcall.io/privacy-policy",
+                                target: "_blank",
+                                rel: "noreferrer"
+                            })
+                        }
+                    })
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+const $6913097552ba508e$export$b916fa2db97921a4 = ({ state: state , flow: flow , primaryAction: primaryAction  })=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialog), {
+        open: state.isOpen,
+        onOpenChange: (open)=>{
+            !open && state.close();
+        },
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
+            className: "w-[334px] md:w-[334px] rounded-xl max-h-screen overflow-y-auto",
+            children: [
+                flow.image_url ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                    className: "relative rounded-xl",
                     children: [
-                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                            className: "flex flex-col gap-[10px]",
-                            ref: ref,
-                            children: instructions.map((value, index)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
-                                    className: "flex flex-row justify-center gap-[5px]",
-                                    children: [
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                                            className: "flex items-center justify-center min-w-[24px] h-[24px] rounded-[50%] bg-secondaryVLight",
-                                            children: index + 1
-                                        }),
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                                            className: "w-full text-base text-primaryLight font-normal leading-[20px]",
-                                            children: value
-                                        })
-                                    ]
-                                }, index))
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+                            className: "w-full h-[200px] object-cover rounded-[inherit]",
+                            src: flow.image_url,
+                            alt: ""
                         }),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
-                            className: "flex items-center justify-center rounded-[8px] overflow-hidden",
-                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
-                                src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${mode}-${videoLength}.mp4`,
-                                playsInline: true,
-                                autoPlay: true,
-                                muted: true,
-                                loop: true
-                            })
+                            className: "absolute inset-0 ring-2 ring-inset ring-white/20 rounded-[inherit]"
                         }),
-                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
-                            className: "text-xs text-[#707070] text-center",
-                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
-                                i18nKey: "recorder.instructions.privacyPolicy",
-                                children: [
-                                    "By proceeding, you agree to our",
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("a", {
-                                        className: "font-semibold text-black",
-                                        href: "https://www.snapcall.io/privacy-policy",
-                                        target: "_blank",
-                                        rel: "noreferrer",
-                                        children: "privacy policy"
-                                    }),
-                                    "."
-                                ]
-                            })
+                        flow.logo_url && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                            className: "absolute bottom-2 right-2 rounded-lg",
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+                                    className: "w-8 h-8 object-cover rounded-[inherit]",
+                                    src: flow.logo_url,
+                                    alt: ""
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                    className: "absolute inset-0 ring-2 ring-inset ring-white/20 rounded-[inherit]"
+                                })
+                            ]
                         })
                     ]
+                }) : flow.logo_url ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: "h-[200px] bg-cover bg-center rounded-xl",
+                    style: {
+                        backgroundImage: `url(${flow.logo_url})`
+                    },
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        className: "flex justify-center items-center w-full h-full backdrop-blur-[30px] rounded-[inherit]",
+                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                            className: "absolute rounded-2xl",
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+                                    className: "w-[100px] h-[100px] object-cover rounded-[inherit]",
+                                    src: flow.logo_url,
+                                    alt: ""
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                    className: "absolute inset-0 ring-4 ring-inset ring-white/20 rounded-[inherit]"
+                                })
+                            ]
+                        })
+                    })
+                }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {}),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogHeader), {
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogTitle), {
+                        children: flow.title
+                    })
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
+                    className: "text-sm text-gray-700 whitespace-pre-line",
+                    children: flow.text
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogFooter), {
                     children: primaryAction()
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
+                    className: "text-xs text-[#707070] text-center",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
+                        i18nKey: "recorder.instructions.privacyPolicy",
+                        components: {
+                            bold: // eslint-disable-next-line jsx-a11y/anchor-has-content
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("a", {
+                                className: "font-semibold text-gray-1000 underline",
+                                href: "https://www.snapcall.io/privacy-policy",
+                                target: "_blank",
+                                rel: "noreferrer"
+                            })
+                        }
+                    })
                 })
             ]
         })
@@ -14248,6 +14635,47 @@ const $47755bb1d707f6f6$export$788cb893d96254c8 = ({ state: state , mode: mode ,
 
 
 
+const $898fb6529f10b70f$export$a530fe7a272dd531 = ({ state: state , recorderState: recorderState  })=>{
+    const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    (0, $jQDcL$react.useEffect)(()=>{
+        const fetchFlow = async ()=>{
+            const { roomId: roomId  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
+            const language = navigator.language.slice(0, 2);
+            const result = await fetch(`${options.apiUrl}/streams/${roomId}/flow?lang=${language}`);
+            if (result.ok) {
+                const flow = await result.json();
+                recorderState.setFlow(flow);
+            } else recorderState.setFlow(null);
+        };
+        fetchFlow();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        options.apiUrl
+    ]);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialog), {
+        open: state.isOpen,
+        onOpenChange: (open)=>{
+            !open && state.close();
+        },
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
+            className: "max-h-screen overflow-y-auto w-[334px] md:w-[334px] rounded-xl",
+            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "flex items-center justify-center h-[200px]",
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SpinnerIcon), {
+                    className: "text-blue-700 animate-spin",
+                    size: 64
+                })
+            })
+        })
+    });
+};
+
+
+
+
+
+
+
 
 
 
@@ -14472,8 +14900,7 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
         exitStreaming
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
-        if (getUserMediaMutation.savedPermissions.audio) return;
-        if (isAgent && !isDesktop) getUserMediaMutation.mutate(undefined, getUserMediaMutationOptions);
+        if (isAgent && !isDesktop && !getUserMediaMutation.savedPermissions.audio && getUserMediaMutation.isIdle) getUserMediaMutation.mutate(undefined, getUserMediaMutationOptions);
     }, [
         getUserMediaMutation,
         isAgent,
@@ -14497,31 +14924,39 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
             })
         });
     };
+    const modalsButton = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
+            size: "sm",
+            className: "w-full",
+            disabled: !selfPeerId || getUserMediaMutation.isLoading,
+            onClick: ()=>{
+                const { deviceState: deviceState  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
+                if (!getUserMediaMutation.savedPermissions.audio || !getUserMediaMutation.savedPermissions.video || !deviceState.camera.enabled) return getUserMediaMutation.mutate(undefined, getUserMediaMutationOptions);
+                instructionModalState.close();
+            },
+            children: !getUserMediaMutation.savedPermissions.audio || !getUserMediaMutation.savedPermissions.video ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CheckCircleIcon), {
+                        size: 18,
+                        className: "text-white"
+                    }),
+                    t("recorder.allowCamMicAccess")
+                ]
+            }) : t("recorder.okay")
+        });
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
         className: "flex flex-col justify-center min-h-0 gap-6 antialiased shrink grow inter",
         children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $47755bb1d707f6f6$export$788cb893d96254c8), {
+            typeof recorderState.flow === "undefined" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $898fb6529f10b70f$export$a530fe7a272dd531), {
+                state: instructionModalState,
+                recorderState: recorderState
+            }) : recorderState.flow ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6913097552ba508e$export$b916fa2db97921a4), {
+                state: instructionModalState,
+                flow: recorderState.flow,
+                primaryAction: modalsButton
+            }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $47755bb1d707f6f6$export$788cb893d96254c8), {
                 state: instructionModalState,
                 mode: recorderState.mode,
-                primaryAction: ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
-                        size: "sm",
-                        className: "w-full",
-                        disabled: !selfPeerId || getUserMediaMutation.isLoading,
-                        onClick: ()=>{
-                            const { deviceState: deviceState  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
-                            if (!getUserMediaMutation.savedPermissions.audio || !getUserMediaMutation.savedPermissions.video || !deviceState.camera.enabled) return getUserMediaMutation.mutate(undefined, getUserMediaMutationOptions);
-                            instructionModalState.close();
-                        },
-                        children: !getUserMediaMutation.savedPermissions.audio || !getUserMediaMutation.savedPermissions.video ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
-                            children: [
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CheckIcon), {
-                                    size: 18,
-                                    className: "text-white"
-                                }),
-                                t("recorder.allowCamMicAccess")
-                            ]
-                        }) : t("recorder.okay")
-                    })
+                primaryAction: modalsButton
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1edfa10ad1e88512$export$f9d8408fefd786da), {
                 state: qrCodeModalState,
@@ -14645,7 +15080,6 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
 
 
 
-
 const $62f98fb6dc42877d$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
         className: "font-medium text-white",
         children: children
@@ -14653,56 +15087,32 @@ const $62f98fb6dc42877d$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0,
 const $62f98fb6dc42877d$export$f361d4ae234b90f4 = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const instructions = [
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.tapVideoButton",
-            children: [
-                "Tap the ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$f9da3144ae2525a3), {
-                    sideColor: "#FFFFFF",
-                    mainColor: "#E5484D"
-                }),
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {
-                    children: " Record button"
-                }),
-                " to start a recording."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {})
+            }
         }),
         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.screenShareInstruction"
         }),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.videoSpeech",
-            children: [
-                "You can ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {
-                    children: "speak during"
-                }),
-                " the recording for added detail."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.tapStopVideoButton",
-            children: [
-                "When you're finished, tap the ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$c6a849fd9d9d93a2), {
-                    sideColor: "#FFFFFF",
-                    mainColor: "#E5484D"
-                }),
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {
-                    children: " Stop button"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
+        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
             i18nKey: "recorder.instructions.reviewAndSendVideos",
-            children: [
-                "You can review your video and then ",
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {
-                    children: "send it when you're done"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($62f98fb6dc42877d$var$Bold, {})
+            }
         })
     ];
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
@@ -14902,6 +15312,7 @@ const $2256a219b427127c$export$c31ece446899894 = ({ state: state  })=>{
             !open && state.close();
         },
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
+            className: "rounded-xl",
             children: [
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogHeader), {
                     children: [
@@ -15056,6 +15467,7 @@ const $4dfa3a33e9391c56$export$863486d455ab61f3 = ({ modalState: modalState , on
             !open && modalState.close();
         },
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
+            className: "rounded-xl",
             children: [
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogHeader), {
                     children: [
@@ -15879,6 +16291,10 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
                         children: [
                             streamState === "loading" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {}),
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Toaster), {
+                                duration: 3000,
+                                className: "gap-2"
+                            }),
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dcd9e6925c7037c$export$2e2bcd8739ae039), {}),
                             isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $77862aeb490f36a3$export$2e2bcd8739ae039), {
                                 close: ()=>{
@@ -16334,7 +16750,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: #93c5fd80;\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.sr-only {\n  width: 1px;\n  height: 1px;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.pointer-events-auto {\n  pointer-events: auto;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.top-2 {\n  top: .5rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.top-auto {\n  top: auto;\n}\n\n.bottom-4 {\n  bottom: 1rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n\n.bottom-0 {\n  bottom: 0;\n}\n\n.right-0 {\n  right: 0;\n}\n\n.left-1 {\n  left: .25rem;\n}\n\n.right-1 {\n  right: .25rem;\n}\n\n.right-6 {\n  right: 1.5rem;\n}\n\n.top-6 {\n  top: 1.5rem;\n}\n\n.top-8 {\n  top: 2rem;\n}\n\n.z-10 {\n  z-index: 10;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[150\\] {\n  z-index: 150;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-mx-1 {\n  margin-left: -.25rem;\n  margin-right: -.25rem;\n}\n\n.mx-1 {\n  margin-left: .25rem;\n  margin-right: .25rem;\n}\n\n.my-1 {\n  margin-top: .25rem;\n  margin-bottom: .25rem;\n}\n\n.mb-\\[9px\\] {\n  margin-bottom: 9px;\n}\n\n.mt-1 {\n  margin-top: .25rem;\n}\n\n.mr-2\\.5 {\n  margin-right: .625rem;\n}\n\n.mr-2 {\n  margin-right: .5rem;\n}\n\n.mt-2 {\n  margin-top: .5rem;\n}\n\n.-mr-2 {\n  margin-right: -.5rem;\n}\n\n.ml-1 {\n  margin-left: .25rem;\n}\n\n.box-border {\n  box-sizing: border-box;\n}\n\n.block {\n  display: block;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-5 {\n  height: 1.25rem;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-4 {\n  height: 1rem;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-12 {\n  height: 3rem;\n}\n\n.h-16 {\n  height: 4rem;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-\\[384px\\] {\n  height: 384px;\n}\n\n.h-1\\/3 {\n  height: 33.3333%;\n}\n\n.h-\\[16px\\] {\n  height: 16px;\n}\n\n.h-\\[36px\\] {\n  height: 36px;\n}\n\n.h-\\[45px\\] {\n  height: 45px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-8 {\n  height: 2rem;\n}\n\n.h-3 {\n  height: .75rem;\n}\n\n.h-px {\n  height: 1px;\n}\n\n.h-9 {\n  height: 2.25rem;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-6 {\n  height: 1.5rem;\n}\n\n.h-14 {\n  height: 3.5rem;\n}\n\n.max-h-full {\n  max-height: 100%;\n}\n\n.max-h-screen {\n  max-height: 100vh;\n}\n\n.max-h-\\[90\\%\\] {\n  max-height: 90%;\n}\n\n.max-h-\\[90vh\\] {\n  max-height: 90vh;\n}\n\n.max-h-\\[70px\\] {\n  max-height: 70px;\n}\n\n.max-h-\\[300px\\] {\n  max-height: 300px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[80px\\] {\n  min-height: 80px;\n}\n\n.w-5 {\n  width: 1.25rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-4 {\n  width: 1rem;\n}\n\n.w-0 {\n  width: 0;\n}\n\n.w-\\[42px\\] {\n  width: 42px;\n}\n\n.w-max {\n  width: max-content;\n}\n\n.w-\\[130px\\] {\n  width: 130px;\n}\n\n.w-12 {\n  width: 3rem;\n}\n\n.w-16 {\n  width: 4rem;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[50\\%\\] {\n  width: 50%;\n}\n\n.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.w-\\[16px\\] {\n  width: 16px;\n}\n\n.w-\\[36px\\] {\n  width: 36px;\n}\n\n.w-\\[45px\\] {\n  width: 45px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-8 {\n  width: 2rem;\n}\n\n.w-3 {\n  width: .75rem;\n}\n\n.w-72 {\n  width: 18rem;\n}\n\n.min-w-0 {\n  min-width: 0;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.min-w-full {\n  min-width: 100%;\n}\n\n.min-w-\\[144px\\] {\n  min-width: 144px;\n}\n\n.min-w-\\[120px\\] {\n  min-width: 120px;\n}\n\n.min-w-\\[250px\\] {\n  min-width: 250px;\n}\n\n.max-w-\\[1110px\\] {\n  max-width: 1110px;\n}\n\n.max-w-\\[500px\\] {\n  max-width: 500px;\n}\n\n.max-w-full {\n  max-width: 100%;\n}\n\n.max-w-\\[90\\%\\] {\n  max-width: 90%;\n}\n\n.max-w-\\[70px\\] {\n  max-width: 70px;\n}\n\n.max-w-\\[350px\\] {\n  max-width: 350px;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n\n.shrink {\n  flex-shrink: 1;\n}\n\n.shrink-0 {\n  flex-shrink: 0;\n}\n\n.flex-grow, .grow {\n  flex-grow: 1;\n}\n\n.grow-0 {\n  flex-grow: 0;\n}\n\n.border-collapse {\n  border-collapse: collapse;\n}\n\n.-translate-x-1\\/2 {\n  --tw-translate-x: -50%;\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-1\\/2 {\n  --tw-translate-y: -50%;\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-x-\\[-50\\%\\] {\n  --tw-translate-x: -50%;\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-\\[-50\\%\\] {\n  --tw-translate-y: -50%;\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-x-0\\.5 {\n  --tw-translate-x: .125rem;\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-x-0 {\n  --tw-translate-x: 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.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin {\n  animation: 1s linear infinite spin;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-default {\n  cursor: default;\n}\n\n.select-none {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.resize {\n  resize: both;\n}\n\n.appearance-none {\n  appearance: none;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-start {\n  align-items: flex-start;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-6 {\n  gap: 1.5rem;\n}\n\n.gap-1 {\n  gap: .25rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-\\[5px\\] {\n  gap: 5px;\n}\n\n.gap-4 {\n  gap: 1rem;\n}\n\n.gap-1\\.5 {\n  gap: .375rem;\n}\n\n.space-y-5 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));\n}\n\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(.25rem * var(--tw-space-x-reverse));\n  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(.25rem * var(--tw-space-y-reverse));\n}\n\n.space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(.375rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(.375rem * var(--tw-space-y-reverse));\n}\n\n.self-center {\n  align-self: center;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-visible {\n  overflow: visible;\n}\n\n.overflow-y-auto {\n  overflow-y: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.truncate {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.whitespace-nowrap {\n  white-space: nowrap;\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-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[64px\\] {\n  border-radius: 64px;\n}\n\n.\\!rounded-md {\n  border-radius: .375rem !important;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-\\[3px\\] {\n  border-radius: 3px;\n}\n\n.rounded-\\[4px\\] {\n  border-radius: 4px;\n}\n\n.rounded-\\[6px\\] {\n  border-radius: 6px;\n}\n\n.rounded {\n  border-radius: .25rem;\n}\n\n.rounded-t-3xl {\n  border-top-left-radius: 1.5rem;\n  border-top-right-radius: 1.5rem;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[3px\\] {\n  border-width: 3px;\n}\n\n.border-\\[5px\\] {\n  border-width: 5px;\n}\n\n.border-0 {\n  border-width: 0;\n}\n\n.border-\\[4px\\] {\n  border-width: 4px;\n}\n\n.border-\\[2px\\], .border-2 {\n  border-width: 2px;\n}\n\n.border-b {\n  border-bottom-width: 1px;\n}\n\n.border-l {\n  border-left-width: 1px;\n}\n\n.border-r {\n  border-right-width: 1px;\n}\n\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-200) / var(--tw-border-opacity));\n}\n\n.border-amber-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-amber-700) / 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-gray-1000 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-1000) / var(--tw-border-opacity));\n}\n\n.border-transparent {\n  border-color: #0000;\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-red-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-red-700) / var(--tw-border-opacity));\n}\n\n.border-gray-600 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-600) / var(--tw-border-opacity));\n}\n\n.border-b-red-700 {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(var(--color-red-700) / var(--tw-border-opacity));\n}\n\n.border-l-red-700 {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(var(--color-red-700) / var(--tw-border-opacity));\n}\n\n.bg-gray-1000 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-1000) / var(--tw-bg-opacity));\n}\n\n.bg-amber-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-amber-100) / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\n}\n\n.bg-\\[\\#242424\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(36 36 36 / var(--tw-bg-opacity));\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-\\[\\#ff0000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 0 0 / var(--tw-bg-opacity));\n}\n\n.\\!bg-transparent {\n  background-color: #0000 !important;\n}\n\n.bg-\\[\\#171717\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-red-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-700) / var(--tw-bg-opacity));\n}\n\n.bg-black\\/25 {\n  background-color: #00000040;\n}\n\n.bg-amber-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-amber-200) / var(--tw-bg-opacity));\n}\n\n.bg-red-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-300) / var(--tw-bg-opacity));\n}\n\n.bg-green-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-green-300) / var(--tw-bg-opacity));\n}\n\n.bg-plum-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-plum-300) / var(--tw-bg-opacity));\n}\n\n.bg-crimson-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-crimson-300) / var(--tw-bg-opacity));\n}\n\n.bg-blue-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-300) / var(--tw-bg-opacity));\n}\n\n.bg-purple-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-purple-300) / var(--tw-bg-opacity));\n}\n\n.bg-violet-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-violet-300) / var(--tw-bg-opacity));\n}\n\n.bg-indigo-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-indigo-300) / var(--tw-bg-opacity));\n}\n\n.bg-cyan-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-cyan-300) / var(--tw-bg-opacity));\n}\n\n.bg-teal-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-teal-300) / var(--tw-bg-opacity));\n}\n\n.bg-grass-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-grass-300) / var(--tw-bg-opacity));\n}\n\n.bg-brown-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-brown-300) / var(--tw-bg-opacity));\n}\n\n.bg-lime-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-lime-300) / var(--tw-bg-opacity));\n}\n\n.bg-yellow-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-yellow-300) / var(--tw-bg-opacity));\n}\n\n.bg-gold-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gold-300) / var(--tw-bg-opacity));\n}\n\n.bg-bronze-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-bronze-300) / var(--tw-bg-opacity));\n}\n\n.bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-300) / var(--tw-bg-opacity));\n}\n\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-green-100) / var(--tw-bg-opacity));\n}\n\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-100) / var(--tw-bg-opacity));\n}\n\n.bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.bg-crimson-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-crimson-100) / var(--tw-bg-opacity));\n}\n\n.bg-violet-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-violet-100) / var(--tw-bg-opacity));\n}\n\n.bg-cyan-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-cyan-100) / var(--tw-bg-opacity));\n}\n\n.bg-teal-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-teal-100) / var(--tw-bg-opacity));\n}\n\n.bg-brown-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-brown-100) / var(--tw-bg-opacity));\n}\n\n.bg-orange-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-orange-100) / var(--tw-bg-opacity));\n}\n\n.bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-900) / var(--tw-bg-opacity));\n}\n\n.bg-green-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-green-700) / var(--tw-bg-opacity));\n}\n\n.bg-amber-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-amber-700) / var(--tw-bg-opacity));\n}\n\n.bg-crimson-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-crimson-700) / var(--tw-bg-opacity));\n}\n\n.bg-violet-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-violet-700) / var(--tw-bg-opacity));\n}\n\n.bg-cyan-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-cyan-700) / var(--tw-bg-opacity));\n}\n\n.bg-teal-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-teal-700) / var(--tw-bg-opacity));\n}\n\n.bg-brown-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-brown-700) / var(--tw-bg-opacity));\n}\n\n.bg-orange-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-orange-700) / var(--tw-bg-opacity));\n}\n\n.bg-gray-1000\\/25 {\n  background-color: rgb(var(--color-gray-1000) / .25);\n}\n\n.bg-gray-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-600) / var(--tw-bg-opacity));\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-contain {\n  object-fit: contain;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-6 {\n  padding: 1.5rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-4 {\n  padding: 1rem;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-\\[11px\\] {\n  padding: 11px;\n}\n\n.p-3 {\n  padding: .75rem;\n}\n\n.p-0 {\n  padding: 0;\n}\n\n.p-1 {\n  padding: .25rem;\n}\n\n.p-1\\.5 {\n  padding: .375rem;\n}\n\n.py-2\\.5 {\n  padding-top: .625rem;\n  padding-bottom: .625rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\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.px-\\[60px\\] {\n  padding-left: 60px;\n  padding-right: 60px;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.py-0\\.5 {\n  padding-top: .125rem;\n  padding-bottom: .125rem;\n}\n\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.py-12 {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.pr-3\\.5 {\n  padding-right: .875rem;\n}\n\n.pl-2\\.5 {\n  padding-left: .625rem;\n}\n\n.pr-3 {\n  padding-right: .75rem;\n}\n\n.pl-2 {\n  padding-left: .5rem;\n}\n\n.pb-\\[20px\\] {\n  padding-bottom: 20px;\n}\n\n.pb-\\[9px\\] {\n  padding-bottom: 9px;\n}\n\n.pb-2 {\n  padding-bottom: .5rem;\n}\n\n.pt-1 {\n  padding-top: .25rem;\n}\n\n.text-left {\n  text-align: left;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.align-middle {\n  vertical-align: middle;\n}\n\n.text-md {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 20px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.text-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n\n.text-\\[30px\\] {\n  font-size: 30px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-semibold {\n  font-weight: 600;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.leading-none {\n  line-height: 1;\n}\n\n.text-gray-1000 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-1000) / var(--tw-text-opacity));\n}\n\n.text-blue-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-red-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-red-700) / var(--tw-text-opacity));\n}\n\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-700) / var(--tw-text-opacity));\n}\n\n.text-amber-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-amber-700) / var(--tw-text-opacity));\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-white\\/80 {\n  color: #fffc;\n}\n\n.text-gray-100 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-100) / var(--tw-text-opacity));\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n  --tw-text-opacity: 1;\n  color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-\\[\\#707070\\] {\n  --tw-text-opacity: 1;\n  color: rgb(112 112 112 / var(--tw-text-opacity));\n}\n\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-green-700) / var(--tw-text-opacity));\n}\n\n.text-plum-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-plum-700) / var(--tw-text-opacity));\n}\n\n.text-crimson-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-crimson-700) / var(--tw-text-opacity));\n}\n\n.text-purple-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-purple-700) / var(--tw-text-opacity));\n}\n\n.text-violet-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-violet-700) / var(--tw-text-opacity));\n}\n\n.text-indigo-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-indigo-700) / var(--tw-text-opacity));\n}\n\n.text-cyan-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-cyan-700) / var(--tw-text-opacity));\n}\n\n.text-teal-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-teal-700) / var(--tw-text-opacity));\n}\n\n.text-grass-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-grass-700) / var(--tw-text-opacity));\n}\n\n.text-brown-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-brown-700) / var(--tw-text-opacity));\n}\n\n.text-lime-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-lime-700) / var(--tw-text-opacity));\n}\n\n.text-yellow-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-yellow-700) / var(--tw-text-opacity));\n}\n\n.text-gold-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gold-700) / var(--tw-text-opacity));\n}\n\n.text-bronze-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-bronze-700) / var(--tw-text-opacity));\n}\n\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-900) / var(--tw-text-opacity));\n}\n\n.text-orange-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-orange-700) / var(--tw-text-opacity));\n}\n\n.underline-offset-8 {\n  text-underline-offset: 8px;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-dropdown-sm {\n  --tw-shadow: 0px 1px 2px 0px #1018280f, 0px 1px 3px 0px #1018281a;\n  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color), 0px 1px 3px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 #0000000d;\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline-none {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-1 {\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(1px + 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-inset {\n  --tw-ring-inset: inset;\n}\n\n.ring-gray-200 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-gray-200) / var(--tw-ring-opacity));\n}\n\n.ring-blue-700 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-700) / var(--tw-ring-opacity));\n}\n\n.ring-white {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.ring-green-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-green-300) / var(--tw-ring-opacity));\n}\n\n.ring-red-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-red-300) / var(--tw-ring-opacity));\n}\n\n.ring-amber-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-amber-300) / var(--tw-ring-opacity));\n}\n\n.ring-blue-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-300) / var(--tw-ring-opacity));\n}\n\n.ring-crimson-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-crimson-300) / var(--tw-ring-opacity));\n}\n\n.ring-violet-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-violet-300) / var(--tw-ring-opacity));\n}\n\n.ring-cyan-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-cyan-300) / var(--tw-ring-opacity));\n}\n\n.ring-teal-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-teal-300) / var(--tw-ring-opacity));\n}\n\n.ring-brown-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-brown-300) / var(--tw-ring-opacity));\n}\n\n.ring-orange-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-orange-300) / var(--tw-ring-opacity));\n}\n\n.ring-offset-0 {\n  --tw-ring-offset-width: 0px;\n}\n\n.ring-offset-white {\n  --tw-ring-offset-color: #fff;\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.backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n.transition-all {\n  transition-property: all;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\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-transform {\n  transition-property: transform;\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.duration-300 {\n  transition-duration: .3s;\n}\n\n.duration-1000 {\n  transition-duration: 1s;\n}\n\n.duration-200 {\n  transition-duration: .2s;\n}\n\n.ease-linear {\n  transition-timing-function: linear;\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.will-change-transform {\n  will-change: transform;\n}\n\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n\n.animate-in {\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n  animation-name: enter;\n  animation-duration: .15s;\n}\n\n.fade-in-0, .fade-in {\n  --tw-enter-opacity: 0;\n}\n\n.fade-out {\n  --tw-exit-opacity: 0;\n}\n\n.zoom-in-95 {\n  --tw-enter-scale: .95;\n}\n\n.duration-300 {\n  animation-duration: .3s;\n}\n\n.duration-1000 {\n  animation-duration: 1s;\n}\n\n.duration-200 {\n  animation-duration: .2s;\n}\n\n.ease-linear {\n  animation-timing-function: linear;\n}\n\n.ease-out {\n  animation-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.paused {\n  animation-play-state: paused;\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.placeholder\\:text-gray-900::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-900) / var(--tw-text-opacity));\n}\n\n.placeholder\\:text-gray-700::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-700) / var(--tw-text-opacity));\n}\n\n.focus-within\\:relative:focus-within {\n  position: relative;\n}\n\n.focus-within\\:z-20:focus-within {\n  z-index: 20;\n}\n\n.focus-within\\:border-gray-200:focus-within {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-200) / var(--tw-border-opacity));\n}\n\n.focus-within\\:bg-gray-100:focus-within {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.focus-within\\:outline:focus-within {\n  outline-style: solid;\n}\n\n.focus-within\\:outline-\\[2px\\]:focus-within {\n  outline-width: 2px;\n}\n\n.focus-within\\:outline-offset-\\[2px\\]:focus-within {\n  outline-offset: 2px;\n}\n\n.focus-within\\:outline-blue-300:focus-within {\n  outline-color: rgb(var(--color-blue-300) / 1);\n}\n\n.focus-within\\:outline-red-700:focus-within {\n  outline-color: rgb(var(--color-red-700) / 1);\n}\n\n.hover\\:bg-\\[\\#292929\\]:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(41 41 41 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-800:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-800) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-50) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-red-800:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-800) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-red-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-100) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.hover\\:text-blue-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n\n.focus\\:bg-gray-100:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.focus\\:ring-2:focus {\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(2px + 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.focus\\:ring-1:focus {\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(1px + 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.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n\n.focus-visible\\:outline-none:focus-visible {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.focus-visible\\:ring-2:focus-visible {\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(2px + 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.focus-visible\\:ring-blue-1000:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-1000) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-gray-1000:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-gray-1000) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-blue-700:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-700) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-red-1000:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-red-1000) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-red-700:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-red-700) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n\n.active\\:bg-\\[\\#292929\\]:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(41 41 41 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-blue-900:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-900) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-500:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-500) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-blue-200:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-200) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-200:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-200) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-red-900:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-900) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-red-200:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-200) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-100:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.active\\:text-blue-700:active {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.active\\:text-blue-900:active {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-900) / var(--tw-text-opacity));\n}\n\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:opacity-40:disabled {\n  opacity: .4;\n}\n\n.disabled\\:opacity-50:disabled {\n  opacity: .5;\n}\n\n.group:focus-within .group-focus-within\\:bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.group:hover .group-hover\\:bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.group:active .group-active\\:bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: .7;\n}\n\n.aria-selected\\:bg-blue-100[aria-selected=\"true\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.aria-selected\\:text-blue-700[aria-selected=\"true\"] {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.aria-selected\\:opacity-100[aria-selected=\"true\"] {\n  opacity: 1;\n}\n\n.data-\\[disabled\\]\\:pointer-events-none[data-disabled] {\n  pointer-events: none;\n}\n\n.data-\\[side\\=bottom\\]\\:translate-y-1[data-side=\"bottom\"] {\n  --tw-translate-y: .25rem;\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.data-\\[side\\=left\\]\\:-translate-x-1[data-side=\"left\"] {\n  --tw-translate-x: -.25rem;\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.data-\\[side\\=right\\]\\:translate-x-1[data-side=\"right\"] {\n  --tw-translate-x: .25rem;\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.data-\\[side\\=top\\]\\:-translate-y-1[data-side=\"top\"] {\n  --tw-translate-y: -.25rem;\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.data-\\[state\\=checked\\]\\:translate-x-5[data-state=\"checked\"] {\n  --tw-translate-x: 1.25rem;\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.data-\\[swipe\\=cancel\\]\\:translate-x-0[data-swipe=\"cancel\"] {\n  --tw-translate-x: 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.data-\\[swipe\\=end\\]\\:translate-x-\\[var\\(--radix-toast-swipe-end-x\\)\\][data-swipe=\"end\"] {\n  --tw-translate-x: var(--radix-toast-swipe-end-x);\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.data-\\[swipe\\=move\\]\\:translate-x-\\[var\\(--radix-toast-swipe-move-x\\)\\][data-swipe=\"move\"] {\n  --tw-translate-x: var(--radix-toast-swipe-move-x);\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n\n  to {\n    height: 0;\n  }\n}\n\n.data-\\[state\\=closed\\]\\:animate-accordion-up[data-state=\"closed\"] {\n  animation: .2s ease-out accordion-up;\n}\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n.data-\\[state\\=open\\]\\:animate-accordion-down[data-state=\"open\"] {\n  animation: .2s ease-out accordion-down;\n}\n\n.data-\\[disabled\\]\\:cursor-not-allowed[data-disabled] {\n  cursor: not-allowed;\n}\n\n.data-\\[state\\=checked\\]\\:border-blue-700[data-state=\"checked\"] {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-blue-700) / var(--tw-border-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-blue-700[data-state=\"checked\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-gray-50[data-state=\"checked\"], .data-\\[selected\\=true\\]\\:bg-gray-50[data-selected=\"true\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.data-\\[disabled\\]\\:data-\\[state\\=unchecked\\]\\:bg-gray-300[data-state=\"unchecked\"][data-disabled] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-300) / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-white[data-state=\"checked\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=selected\\]\\:bg-gray-50[data-state=\"selected\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=active\\]\\:bg-white[data-state=\"active\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=active\\]\\:font-semibold[data-state=\"active\"] {\n  font-weight: 600;\n}\n\n.data-\\[state\\=active\\]\\:text-gray-1000[data-state=\"active\"] {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-1000) / var(--tw-text-opacity));\n}\n\n.data-\\[state\\=active\\]\\:text-blue-700[data-state=\"active\"] {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.data-\\[disabled\\]\\:opacity-40[data-disabled] {\n  opacity: .4;\n}\n\n.data-\\[disabled\\]\\:opacity-50[data-disabled] {\n  opacity: .5;\n}\n\n.data-\\[state\\=active\\]\\:shadow-sm[data-state=\"active\"] {\n  --tw-shadow: 0 1px 2px 0 #0000000d;\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.data-\\[swipe\\=move\\]\\:transition-none[data-swipe=\"move\"] {\n  transition-property: none;\n}\n\n.data-\\[state\\=open\\]\\:animate-in[data-state=\"open\"] {\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n  animation-name: enter;\n  animation-duration: .15s;\n}\n\n.data-\\[state\\=closed\\]\\:animate-out[data-state=\"closed\"], .data-\\[swipe\\=end\\]\\:animate-out[data-swipe=\"end\"] {\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n  animation-name: exit;\n  animation-duration: .15s;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=\"closed\"] {\n  --tw-exit-opacity: 0;\n}\n\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=\"open\"] {\n  --tw-enter-opacity: 0;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out-80[data-state=\"closed\"] {\n  --tw-exit-opacity: .8;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out[data-state=\"closed\"] {\n  --tw-exit-opacity: 0;\n}\n\n.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=\"closed\"] {\n  --tw-exit-scale: .95;\n}\n\n.data-\\[state\\=open\\]\\:zoom-in-95[data-state=\"open\"] {\n  --tw-enter-scale: .95;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=\"closed\"] {\n  --tw-exit-translate-x: -50%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=\"closed\"] {\n  --tw-exit-translate-y: -48%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=\"open\"] {\n  --tw-enter-translate-x: -50%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=\"open\"] {\n  --tw-enter-translate-y: -48%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-bottom-\\[100\\%\\][data-state=\"open\"] {\n  --tw-enter-translate-y: 100%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-bottom-\\[100\\%\\][data-state=\"closed\"] {\n  --tw-exit-translate-y: 100%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-left-\\[50\\%\\][data-state=\"open\"] {\n  --tw-enter-translate-x: -50%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-left-\\[50\\%\\][data-state=\"closed\"] {\n  --tw-exit-translate-x: -50%;\n}\n\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=\"bottom\"] {\n  --tw-enter-translate-y: -.5rem;\n}\n\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=\"left\"] {\n  --tw-enter-translate-x: .5rem;\n}\n\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=\"right\"] {\n  --tw-enter-translate-x: -.5rem;\n}\n\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=\"top\"] {\n  --tw-enter-translate-y: .5rem;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-top-full[data-state=\"open\"] {\n  --tw-enter-translate-y: -100%;\n}\n\n.group[data-state=\"open\"] .group-data-\\[state\\=open\\]\\:rotate-180 {\n  --tw-rotate: 180deg;\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.group[data-disabled] .group-data-\\[disabled\\]\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.group[data-state=\"checked\"] .group-data-\\[state\\=checked\\]\\:bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.group[data-disabled] .group-data-\\[disabled\\]\\:opacity-50 {\n  opacity: .5;\n}\n\n@media not all and (min-width: 640px) {\n  .max-sm\\:gap-4 {\n    gap: 1rem;\n  }\n\n  .max-sm\\:p-4 {\n    padding: 1rem;\n  }\n}\n\n@media (min-width: 640px) {\n  .sm\\:mt-0 {\n    margin-top: 0;\n  }\n\n  .sm\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:flex-col {\n    flex-direction: column;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:justify-center {\n    justify-content: center;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(1rem * var(--tw-space-x-reverse));\n    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-y-reverse: 0;\n    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n    margin-bottom: calc(0px * var(--tw-space-y-reverse));\n  }\n\n  .sm\\:rounded-xl {\n    border-radius: .75rem;\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n\n  .data-\\[state\\=open\\]\\:sm\\:slide-in-from-bottom-full[data-state=\"open\"] {\n    --tw-enter-translate-y: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .md\\:w-screen {\n    width: 100vw;\n  }\n\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:max-w-\\[420px\\] {\n    max-width: 420px;\n  }\n}\n\n.\\[\\&\\>svg\\]\\:h-\\[18px\\] > svg {\n  height: 18px;\n}\n\n.\\[\\&\\>svg\\]\\:w-\\[18px\\] > svg {\n  width: 18px;\n}\n\n.\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:bg-blue-100:has([aria-selected]) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.first\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-l-md:has([aria-selected]):first-child {\n  border-top-left-radius: .375rem;\n  border-bottom-left-radius: .375rem;\n}\n\n.last\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-r-md:has([aria-selected]):last-child {\n  border-top-right-radius: .375rem;\n  border-bottom-right-radius: .375rem;\n}\n\n.\\[\\&\\:not\\(\\[aria-selected\\]\\)\\]\\:hover\\:bg-gray-100:hover:not([aria-selected]) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 [cmdk-group-heading] {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 [cmdk-group-heading] {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-sm [cmdk-group-heading] {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium [cmdk-group-heading] {\n  font-weight: 500;\n}\n\n.\\[\\&_tr\\]\\:border-b tr {\n  border-bottom-width: 1px;\n}\n\n.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n  border-width: 0;\n}\n\n.\\[\\&_tr\\:hover\\]\\:bg-gray-25 tr:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-25) / var(--tw-bg-opacity));\n}\n\n.\\[\\&_tr\\:active\\]\\:bg-gray-50 tr:active, .\\[\\&_tr\\:hover\\:active\\]\\:bg-gray-50 tr:hover:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=\"checkbox\"]) {\n  padding-right: 0;\n}\n\n.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\] > [role=\"checkbox\"] {\n  --tw-translate-y: 2px;\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";
+$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: #93c5fd80;\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.sr-only {\n  width: 1px;\n  height: 1px;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.pointer-events-auto {\n  pointer-events: auto;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.top-2 {\n  top: .5rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.top-auto {\n  top: auto;\n}\n\n.bottom-4 {\n  bottom: 1rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n.bottom-2 {\n  bottom: .5rem;\n}\n\n.right-2 {\n  right: .5rem;\n}\n\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n\n.bottom-0 {\n  bottom: 0;\n}\n\n.right-0 {\n  right: 0;\n}\n\n.left-1 {\n  left: .25rem;\n}\n\n.right-1 {\n  right: .25rem;\n}\n\n.right-6 {\n  right: 1.5rem;\n}\n\n.top-6 {\n  top: 1.5rem;\n}\n\n.top-8 {\n  top: 2rem;\n}\n\n.z-10 {\n  z-index: 10;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[150\\] {\n  z-index: 150;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-mx-1 {\n  margin-left: -.25rem;\n  margin-right: -.25rem;\n}\n\n.mx-1 {\n  margin-left: .25rem;\n  margin-right: .25rem;\n}\n\n.my-1 {\n  margin-top: .25rem;\n  margin-bottom: .25rem;\n}\n\n.mb-4 {\n  margin-bottom: 1rem;\n}\n\n.mb-\\[9px\\] {\n  margin-bottom: 9px;\n}\n\n.mt-1 {\n  margin-top: .25rem;\n}\n\n.mr-2\\.5 {\n  margin-right: .625rem;\n}\n\n.mr-2 {\n  margin-right: .5rem;\n}\n\n.mt-2 {\n  margin-top: .5rem;\n}\n\n.-mr-2 {\n  margin-right: -.5rem;\n}\n\n.ml-1 {\n  margin-left: .25rem;\n}\n\n.box-border {\n  box-sizing: border-box;\n}\n\n.block {\n  display: block;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-5 {\n  height: 1.25rem;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-4 {\n  height: 1rem;\n}\n\n.h-\\[1px\\] {\n  height: 1px;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-12 {\n  height: 3rem;\n}\n\n.h-16 {\n  height: 4rem;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-\\[200px\\] {\n  height: 200px;\n}\n\n.h-8 {\n  height: 2rem;\n}\n\n.h-\\[100px\\] {\n  height: 100px;\n}\n\n.h-\\[384px\\] {\n  height: 384px;\n}\n\n.h-1\\/3 {\n  height: 33.3333%;\n}\n\n.h-\\[16px\\] {\n  height: 16px;\n}\n\n.h-\\[36px\\] {\n  height: 36px;\n}\n\n.h-\\[45px\\] {\n  height: 45px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-3 {\n  height: .75rem;\n}\n\n.h-px {\n  height: 1px;\n}\n\n.h-9 {\n  height: 2.25rem;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-6 {\n  height: 1.5rem;\n}\n\n.h-14 {\n  height: 3.5rem;\n}\n\n.max-h-full {\n  max-height: 100%;\n}\n\n.max-h-screen {\n  max-height: 100vh;\n}\n\n.max-h-\\[90\\%\\] {\n  max-height: 90%;\n}\n\n.max-h-\\[90vh\\] {\n  max-height: 90vh;\n}\n\n.max-h-\\[70px\\] {\n  max-height: 70px;\n}\n\n.max-h-\\[300px\\] {\n  max-height: 300px;\n}\n\n.max-h-\\[180px\\] {\n  max-height: 180px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[80px\\] {\n  min-height: 80px;\n}\n\n.w-5 {\n  width: 1.25rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-4 {\n  width: 1rem;\n}\n\n.w-0 {\n  width: 0;\n}\n\n.w-\\[42px\\] {\n  width: 42px;\n}\n\n.w-max {\n  width: max-content;\n}\n\n.w-\\[130px\\] {\n  width: 130px;\n}\n\n.w-12 {\n  width: 3rem;\n}\n\n.w-16 {\n  width: 4rem;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[50\\%\\] {\n  width: 50%;\n}\n\n.w-\\[334px\\] {\n  width: 334px;\n}\n\n.w-8 {\n  width: 2rem;\n}\n\n.w-\\[100px\\] {\n  width: 100px;\n}\n\n.w-\\[1px\\] {\n  width: 1px;\n}\n\n.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.w-\\[16px\\] {\n  width: 16px;\n}\n\n.w-\\[36px\\] {\n  width: 36px;\n}\n\n.w-\\[45px\\] {\n  width: 45px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-3 {\n  width: .75rem;\n}\n\n.w-72 {\n  width: 18rem;\n}\n\n.min-w-0 {\n  min-width: 0;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.min-w-full {\n  min-width: 100%;\n}\n\n.min-w-\\[144px\\] {\n  min-width: 144px;\n}\n\n.min-w-\\[120px\\] {\n  min-width: 120px;\n}\n\n.min-w-\\[250px\\] {\n  min-width: 250px;\n}\n\n.max-w-\\[1110px\\] {\n  max-width: 1110px;\n}\n\n.max-w-full {\n  max-width: 100%;\n}\n\n.max-w-\\[500px\\] {\n  max-width: 500px;\n}\n\n.max-w-\\[90\\%\\] {\n  max-width: 90%;\n}\n\n.max-w-\\[70px\\] {\n  max-width: 70px;\n}\n\n.max-w-\\[350px\\] {\n  max-width: 350px;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n\n.shrink {\n  flex-shrink: 1;\n}\n\n.shrink-0 {\n  flex-shrink: 0;\n}\n\n.flex-grow, .grow {\n  flex-grow: 1;\n}\n\n.grow-0 {\n  flex-grow: 0;\n}\n\n.border-collapse {\n  border-collapse: collapse;\n}\n\n.-translate-x-1\\/2 {\n  --tw-translate-x: -50%;\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-1\\/2 {\n  --tw-translate-y: -50%;\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-x-\\[-50\\%\\] {\n  --tw-translate-x: -50%;\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-\\[-50\\%\\] {\n  --tw-translate-y: -50%;\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-x-0\\.5 {\n  --tw-translate-x: .125rem;\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-x-0 {\n  --tw-translate-x: 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.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin {\n  animation: 1s linear infinite spin;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-default {\n  cursor: default;\n}\n\n.select-none {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.resize {\n  resize: both;\n}\n\n.appearance-none {\n  appearance: none;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-start {\n  align-items: flex-start;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-6 {\n  gap: 1.5rem;\n}\n\n.gap-1 {\n  gap: .25rem;\n}\n\n.gap-4 {\n  gap: 1rem;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-3 {\n  gap: .75rem;\n}\n\n.gap-1\\.5 {\n  gap: .375rem;\n}\n\n.space-y-5 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));\n}\n\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(.25rem * var(--tw-space-x-reverse));\n  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(.25rem * var(--tw-space-y-reverse));\n}\n\n.space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(.375rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(.375rem * var(--tw-space-y-reverse));\n}\n\n.self-center {\n  align-self: center;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-visible {\n  overflow: visible;\n}\n\n.overflow-y-auto {\n  overflow-y: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.truncate {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.whitespace-pre-line {\n  white-space: pre-line;\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-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[64px\\] {\n  border-radius: 64px;\n}\n\n.\\!rounded-md {\n  border-radius: .375rem !important;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-xl {\n  border-radius: .75rem;\n}\n\n.rounded-2xl {\n  border-radius: 1rem;\n}\n\n.rounded-\\[3px\\] {\n  border-radius: 3px;\n}\n\n.rounded-\\[4px\\] {\n  border-radius: 4px;\n}\n\n.rounded-\\[6px\\] {\n  border-radius: 6px;\n}\n\n.rounded {\n  border-radius: .25rem;\n}\n\n.rounded-t-3xl {\n  border-top-left-radius: 1.5rem;\n  border-top-right-radius: 1.5rem;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[3px\\] {\n  border-width: 3px;\n}\n\n.border-\\[5px\\] {\n  border-width: 5px;\n}\n\n.border-0 {\n  border-width: 0;\n}\n\n.border-\\[4px\\] {\n  border-width: 4px;\n}\n\n.border-\\[2px\\], .border-2 {\n  border-width: 2px;\n}\n\n.border-b {\n  border-bottom-width: 1px;\n}\n\n.border-l {\n  border-left-width: 1px;\n}\n\n.border-r {\n  border-right-width: 1px;\n}\n\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-200) / var(--tw-border-opacity));\n}\n\n.border-amber-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-amber-700) / 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-gray-1000 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-1000) / var(--tw-border-opacity));\n}\n\n.border-transparent {\n  border-color: #0000;\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-red-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-red-700) / var(--tw-border-opacity));\n}\n\n.border-gray-600 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-600) / var(--tw-border-opacity));\n}\n\n.border-b-red-700 {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(var(--color-red-700) / var(--tw-border-opacity));\n}\n\n.border-l-red-700 {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(var(--color-red-700) / var(--tw-border-opacity));\n}\n\n.bg-gray-1000 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-1000) / var(--tw-bg-opacity));\n}\n\n.bg-gray-25 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-25) / var(--tw-bg-opacity));\n}\n\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-200) / var(--tw-bg-opacity));\n}\n\n.bg-amber-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-amber-100) / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\n}\n\n.bg-\\[\\#242424\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(36 36 36 / var(--tw-bg-opacity));\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-\\[\\#ff0000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 0 0 / var(--tw-bg-opacity));\n}\n\n.\\!bg-transparent {\n  background-color: #0000 !important;\n}\n\n.bg-\\[\\#171717\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n}\n\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.bg-blue-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-red-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-700) / var(--tw-bg-opacity));\n}\n\n.bg-black\\/25 {\n  background-color: #00000040;\n}\n\n.bg-amber-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-amber-200) / var(--tw-bg-opacity));\n}\n\n.bg-red-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-300) / var(--tw-bg-opacity));\n}\n\n.bg-green-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-green-300) / var(--tw-bg-opacity));\n}\n\n.bg-plum-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-plum-300) / var(--tw-bg-opacity));\n}\n\n.bg-crimson-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-crimson-300) / var(--tw-bg-opacity));\n}\n\n.bg-blue-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-300) / var(--tw-bg-opacity));\n}\n\n.bg-purple-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-purple-300) / var(--tw-bg-opacity));\n}\n\n.bg-violet-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-violet-300) / var(--tw-bg-opacity));\n}\n\n.bg-indigo-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-indigo-300) / var(--tw-bg-opacity));\n}\n\n.bg-cyan-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-cyan-300) / var(--tw-bg-opacity));\n}\n\n.bg-teal-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-teal-300) / var(--tw-bg-opacity));\n}\n\n.bg-grass-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-grass-300) / var(--tw-bg-opacity));\n}\n\n.bg-brown-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-brown-300) / var(--tw-bg-opacity));\n}\n\n.bg-lime-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-lime-300) / var(--tw-bg-opacity));\n}\n\n.bg-yellow-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-yellow-300) / var(--tw-bg-opacity));\n}\n\n.bg-gold-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gold-300) / var(--tw-bg-opacity));\n}\n\n.bg-bronze-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-bronze-300) / var(--tw-bg-opacity));\n}\n\n.bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-300) / var(--tw-bg-opacity));\n}\n\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-green-100) / var(--tw-bg-opacity));\n}\n\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-100) / var(--tw-bg-opacity));\n}\n\n.bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.bg-crimson-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-crimson-100) / var(--tw-bg-opacity));\n}\n\n.bg-violet-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-violet-100) / var(--tw-bg-opacity));\n}\n\n.bg-cyan-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-cyan-100) / var(--tw-bg-opacity));\n}\n\n.bg-teal-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-teal-100) / var(--tw-bg-opacity));\n}\n\n.bg-brown-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-brown-100) / var(--tw-bg-opacity));\n}\n\n.bg-orange-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-orange-100) / var(--tw-bg-opacity));\n}\n\n.bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-900) / var(--tw-bg-opacity));\n}\n\n.bg-green-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-green-700) / var(--tw-bg-opacity));\n}\n\n.bg-amber-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-amber-700) / var(--tw-bg-opacity));\n}\n\n.bg-crimson-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-crimson-700) / var(--tw-bg-opacity));\n}\n\n.bg-violet-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-violet-700) / var(--tw-bg-opacity));\n}\n\n.bg-cyan-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-cyan-700) / var(--tw-bg-opacity));\n}\n\n.bg-teal-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-teal-700) / var(--tw-bg-opacity));\n}\n\n.bg-brown-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-brown-700) / var(--tw-bg-opacity));\n}\n\n.bg-orange-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-orange-700) / var(--tw-bg-opacity));\n}\n\n.bg-gray-1000\\/25 {\n  background-color: rgb(var(--color-gray-1000) / .25);\n}\n\n.bg-gray-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-600) / var(--tw-bg-opacity));\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.bg-center {\n  background-position: center;\n}\n\n.object-contain {\n  object-fit: contain;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-6 {\n  padding: 1.5rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-4 {\n  padding: 1rem;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-\\[11px\\] {\n  padding: 11px;\n}\n\n.p-3 {\n  padding: .75rem;\n}\n\n.p-0 {\n  padding: 0;\n}\n\n.p-1 {\n  padding: .25rem;\n}\n\n.p-1\\.5 {\n  padding: .375rem;\n}\n\n.py-2\\.5 {\n  padding-top: .625rem;\n  padding-bottom: .625rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\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.px-\\[60px\\] {\n  padding-left: 60px;\n  padding-right: 60px;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.py-0\\.5 {\n  padding-top: .125rem;\n  padding-bottom: .125rem;\n}\n\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.py-12 {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.pr-3\\.5 {\n  padding-right: .875rem;\n}\n\n.pl-2\\.5 {\n  padding-left: .625rem;\n}\n\n.pr-3 {\n  padding-right: .75rem;\n}\n\n.pl-2 {\n  padding-left: .5rem;\n}\n\n.pl-4 {\n  padding-left: 1rem;\n}\n\n.pr-2 {\n  padding-right: .5rem;\n}\n\n.pb-\\[20px\\] {\n  padding-bottom: 20px;\n}\n\n.pb-\\[9px\\] {\n  padding-bottom: 9px;\n}\n\n.pb-2 {\n  padding-bottom: .5rem;\n}\n\n.pt-1 {\n  padding-top: .25rem;\n}\n\n.text-left {\n  text-align: left;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.align-middle {\n  vertical-align: middle;\n}\n\n.text-md {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 20px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.text-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n\n.text-\\[30px\\] {\n  font-size: 30px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-semibold {\n  font-weight: 600;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.leading-none {\n  line-height: 1;\n}\n\n.text-gray-1000 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-1000) / var(--tw-text-opacity));\n}\n\n.text-blue-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-red-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-red-700) / var(--tw-text-opacity));\n}\n\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-700) / var(--tw-text-opacity));\n}\n\n.text-amber-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-amber-700) / var(--tw-text-opacity));\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-white\\/80 {\n  color: #fffc;\n}\n\n.text-gray-100 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-100) / var(--tw-text-opacity));\n}\n\n.text-\\[\\#707070\\] {\n  --tw-text-opacity: 1;\n  color: rgb(112 112 112 / 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-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-900) / var(--tw-text-opacity));\n}\n\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-green-700) / var(--tw-text-opacity));\n}\n\n.text-plum-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-plum-700) / var(--tw-text-opacity));\n}\n\n.text-crimson-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-crimson-700) / var(--tw-text-opacity));\n}\n\n.text-purple-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-purple-700) / var(--tw-text-opacity));\n}\n\n.text-violet-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-violet-700) / var(--tw-text-opacity));\n}\n\n.text-indigo-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-indigo-700) / var(--tw-text-opacity));\n}\n\n.text-cyan-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-cyan-700) / var(--tw-text-opacity));\n}\n\n.text-teal-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-teal-700) / var(--tw-text-opacity));\n}\n\n.text-grass-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-grass-700) / var(--tw-text-opacity));\n}\n\n.text-brown-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-brown-700) / var(--tw-text-opacity));\n}\n\n.text-lime-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-lime-700) / var(--tw-text-opacity));\n}\n\n.text-yellow-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-yellow-700) / var(--tw-text-opacity));\n}\n\n.text-gold-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gold-700) / var(--tw-text-opacity));\n}\n\n.text-bronze-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-bronze-700) / var(--tw-text-opacity));\n}\n\n.text-orange-700 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-orange-700) / var(--tw-text-opacity));\n}\n\n.underline {\n  text-decoration-line: underline;\n}\n\n.underline-offset-8 {\n  text-underline-offset: 8px;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-dropdown-sm {\n  --tw-shadow: 0px 1px 2px 0px #1018280f, 0px 1px 3px 0px #1018281a;\n  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color), 0px 1px 3px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 #0000000d;\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline-none {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-2 {\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(2px + 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-4 {\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(4px + 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-1 {\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(1px + 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-inset {\n  --tw-ring-inset: inset;\n}\n\n.ring-white\\/20 {\n  --tw-ring-color: #fff3;\n}\n\n.ring-gray-200 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-gray-200) / var(--tw-ring-opacity));\n}\n\n.ring-blue-700 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-700) / var(--tw-ring-opacity));\n}\n\n.ring-white {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.ring-green-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-green-300) / var(--tw-ring-opacity));\n}\n\n.ring-red-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-red-300) / var(--tw-ring-opacity));\n}\n\n.ring-amber-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-amber-300) / var(--tw-ring-opacity));\n}\n\n.ring-blue-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-300) / var(--tw-ring-opacity));\n}\n\n.ring-crimson-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-crimson-300) / var(--tw-ring-opacity));\n}\n\n.ring-violet-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-violet-300) / var(--tw-ring-opacity));\n}\n\n.ring-cyan-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-cyan-300) / var(--tw-ring-opacity));\n}\n\n.ring-teal-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-teal-300) / var(--tw-ring-opacity));\n}\n\n.ring-brown-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-brown-300) / var(--tw-ring-opacity));\n}\n\n.ring-orange-300 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-orange-300) / var(--tw-ring-opacity));\n}\n\n.ring-offset-0 {\n  --tw-ring-offset-width: 0px;\n}\n\n.ring-offset-white {\n  --tw-ring-offset-color: #fff;\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.backdrop-blur-\\[30px\\] {\n  --tw-backdrop-blur: blur(30px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n.backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n.transition-all {\n  transition-property: all;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\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-transform {\n  transition-property: transform;\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.duration-300 {\n  transition-duration: .3s;\n}\n\n.duration-1000 {\n  transition-duration: 1s;\n}\n\n.duration-200 {\n  transition-duration: .2s;\n}\n\n.ease-linear {\n  transition-timing-function: linear;\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.will-change-transform {\n  will-change: transform;\n}\n\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n\n.animate-in {\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n  animation-name: enter;\n  animation-duration: .15s;\n}\n\n.fade-in-0, .fade-in {\n  --tw-enter-opacity: 0;\n}\n\n.fade-out {\n  --tw-exit-opacity: 0;\n}\n\n.zoom-in-95 {\n  --tw-enter-scale: .95;\n}\n\n.duration-300 {\n  animation-duration: .3s;\n}\n\n.duration-1000 {\n  animation-duration: 1s;\n}\n\n.duration-200 {\n  animation-duration: .2s;\n}\n\n.ease-linear {\n  animation-timing-function: linear;\n}\n\n.ease-out {\n  animation-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.paused {\n  animation-play-state: paused;\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.placeholder\\:text-gray-900::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-900) / var(--tw-text-opacity));\n}\n\n.placeholder\\:text-gray-700::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-700) / var(--tw-text-opacity));\n}\n\n.focus-within\\:relative:focus-within {\n  position: relative;\n}\n\n.focus-within\\:z-20:focus-within {\n  z-index: 20;\n}\n\n.focus-within\\:border-gray-200:focus-within {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-gray-200) / var(--tw-border-opacity));\n}\n\n.focus-within\\:bg-gray-100:focus-within {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.focus-within\\:outline:focus-within {\n  outline-style: solid;\n}\n\n.focus-within\\:outline-\\[2px\\]:focus-within {\n  outline-width: 2px;\n}\n\n.focus-within\\:outline-offset-\\[2px\\]:focus-within {\n  outline-offset: 2px;\n}\n\n.focus-within\\:outline-blue-300:focus-within {\n  outline-color: rgb(var(--color-blue-300) / 1);\n}\n\n.focus-within\\:outline-red-700:focus-within {\n  outline-color: rgb(var(--color-red-700) / 1);\n}\n\n.hover\\:bg-\\[\\#292929\\]:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(41 41 41 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-800:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-800) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-50) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-red-800:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-800) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-red-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-100) / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.hover\\:text-blue-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n\n.focus\\:bg-gray-100:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.focus\\:ring-2:focus {\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(2px + 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.focus\\:ring-1:focus {\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(1px + 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.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n\n.focus-visible\\:outline-none:focus-visible {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.focus-visible\\:ring-2:focus-visible {\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(2px + 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.focus-visible\\:ring-blue-1000:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-1000) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-gray-1000:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-gray-1000) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-blue-700:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-blue-700) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-red-1000:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-red-1000) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-red-700:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(var(--color-red-700) / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n\n.active\\:bg-\\[\\#292929\\]:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(41 41 41 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-blue-900:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-900) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-500:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-500) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-blue-200:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-200) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-200:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-200) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-red-900:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-900) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-red-200:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-red-200) / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-100:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.active\\:text-blue-700:active {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.active\\:text-blue-900:active {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-900) / var(--tw-text-opacity));\n}\n\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:opacity-40:disabled {\n  opacity: .4;\n}\n\n.disabled\\:opacity-50:disabled {\n  opacity: .5;\n}\n\n.group:focus-within .group-focus-within\\:bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.group:hover .group-hover\\:bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.group:active .group-active\\:bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: .7;\n}\n\n.aria-selected\\:bg-blue-100[aria-selected=\"true\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.aria-selected\\:text-blue-700[aria-selected=\"true\"] {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.aria-selected\\:opacity-100[aria-selected=\"true\"] {\n  opacity: 1;\n}\n\n.data-\\[disabled\\]\\:pointer-events-none[data-disabled] {\n  pointer-events: none;\n}\n\n.data-\\[side\\=bottom\\]\\:translate-y-1[data-side=\"bottom\"] {\n  --tw-translate-y: .25rem;\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.data-\\[side\\=left\\]\\:-translate-x-1[data-side=\"left\"] {\n  --tw-translate-x: -.25rem;\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.data-\\[side\\=right\\]\\:translate-x-1[data-side=\"right\"] {\n  --tw-translate-x: .25rem;\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.data-\\[side\\=top\\]\\:-translate-y-1[data-side=\"top\"] {\n  --tw-translate-y: -.25rem;\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.data-\\[state\\=checked\\]\\:translate-x-5[data-state=\"checked\"] {\n  --tw-translate-x: 1.25rem;\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.data-\\[swipe\\=cancel\\]\\:translate-x-0[data-swipe=\"cancel\"] {\n  --tw-translate-x: 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.data-\\[swipe\\=end\\]\\:translate-x-\\[var\\(--radix-toast-swipe-end-x\\)\\][data-swipe=\"end\"] {\n  --tw-translate-x: var(--radix-toast-swipe-end-x);\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.data-\\[swipe\\=move\\]\\:translate-x-\\[var\\(--radix-toast-swipe-move-x\\)\\][data-swipe=\"move\"] {\n  --tw-translate-x: var(--radix-toast-swipe-move-x);\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n\n  to {\n    height: 0;\n  }\n}\n\n.data-\\[state\\=closed\\]\\:animate-accordion-up[data-state=\"closed\"] {\n  animation: .2s ease-out accordion-up;\n}\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n.data-\\[state\\=open\\]\\:animate-accordion-down[data-state=\"open\"] {\n  animation: .2s ease-out accordion-down;\n}\n\n.data-\\[disabled\\]\\:cursor-not-allowed[data-disabled] {\n  cursor: not-allowed;\n}\n\n.data-\\[state\\=checked\\]\\:border-blue-700[data-state=\"checked\"] {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--color-blue-700) / var(--tw-border-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-blue-700[data-state=\"checked\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-gray-50[data-state=\"checked\"], .data-\\[selected\\=true\\]\\:bg-gray-50[data-selected=\"true\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.data-\\[disabled\\]\\:data-\\[state\\=unchecked\\]\\:bg-gray-300[data-state=\"unchecked\"][data-disabled] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-300) / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=checked\\]\\:bg-white[data-state=\"checked\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=selected\\]\\:bg-gray-50[data-state=\"selected\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=active\\]\\:bg-white[data-state=\"active\"] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.data-\\[state\\=active\\]\\:font-semibold[data-state=\"active\"] {\n  font-weight: 600;\n}\n\n.data-\\[state\\=active\\]\\:text-gray-1000[data-state=\"active\"] {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-gray-1000) / var(--tw-text-opacity));\n}\n\n.data-\\[state\\=active\\]\\:text-blue-700[data-state=\"active\"] {\n  --tw-text-opacity: 1;\n  color: rgb(var(--color-blue-700) / var(--tw-text-opacity));\n}\n\n.data-\\[disabled\\]\\:opacity-40[data-disabled] {\n  opacity: .4;\n}\n\n.data-\\[disabled\\]\\:opacity-50[data-disabled] {\n  opacity: .5;\n}\n\n.data-\\[state\\=active\\]\\:shadow-sm[data-state=\"active\"] {\n  --tw-shadow: 0 1px 2px 0 #0000000d;\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.data-\\[swipe\\=move\\]\\:transition-none[data-swipe=\"move\"] {\n  transition-property: none;\n}\n\n.data-\\[state\\=open\\]\\:animate-in[data-state=\"open\"] {\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n  animation-name: enter;\n  animation-duration: .15s;\n}\n\n.data-\\[state\\=closed\\]\\:animate-out[data-state=\"closed\"], .data-\\[swipe\\=end\\]\\:animate-out[data-swipe=\"end\"] {\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n  animation-name: exit;\n  animation-duration: .15s;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=\"closed\"] {\n  --tw-exit-opacity: 0;\n}\n\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=\"open\"] {\n  --tw-enter-opacity: 0;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out-80[data-state=\"closed\"] {\n  --tw-exit-opacity: .8;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out[data-state=\"closed\"] {\n  --tw-exit-opacity: 0;\n}\n\n.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=\"closed\"] {\n  --tw-exit-scale: .95;\n}\n\n.data-\\[state\\=open\\]\\:zoom-in-95[data-state=\"open\"] {\n  --tw-enter-scale: .95;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=\"closed\"] {\n  --tw-exit-translate-x: -50%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=\"closed\"] {\n  --tw-exit-translate-y: -48%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=\"open\"] {\n  --tw-enter-translate-x: -50%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=\"open\"] {\n  --tw-enter-translate-y: -48%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-bottom-\\[100\\%\\][data-state=\"open\"] {\n  --tw-enter-translate-y: 100%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-bottom-\\[100\\%\\][data-state=\"closed\"] {\n  --tw-exit-translate-y: 100%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-left-\\[50\\%\\][data-state=\"open\"] {\n  --tw-enter-translate-x: -50%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-left-\\[50\\%\\][data-state=\"closed\"] {\n  --tw-exit-translate-x: -50%;\n}\n\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=\"bottom\"] {\n  --tw-enter-translate-y: -.5rem;\n}\n\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=\"left\"] {\n  --tw-enter-translate-x: .5rem;\n}\n\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=\"right\"] {\n  --tw-enter-translate-x: -.5rem;\n}\n\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=\"top\"] {\n  --tw-enter-translate-y: .5rem;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-top-full[data-state=\"open\"] {\n  --tw-enter-translate-y: -100%;\n}\n\n.group[data-state=\"open\"] .group-data-\\[state\\=open\\]\\:rotate-180 {\n  --tw-rotate: 180deg;\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.group[data-disabled] .group-data-\\[disabled\\]\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.group[data-state=\"checked\"] .group-data-\\[state\\=checked\\]\\:bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.group[data-disabled] .group-data-\\[disabled\\]\\:opacity-50 {\n  opacity: .5;\n}\n\n@media not all and (min-width: 640px) {\n  .max-sm\\:gap-4 {\n    gap: 1rem;\n  }\n\n  .max-sm\\:p-4 {\n    padding: 1rem;\n  }\n}\n\n@media (min-width: 640px) {\n  .sm\\:mt-0 {\n    margin-top: 0;\n  }\n\n  .sm\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:flex-col {\n    flex-direction: column;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:justify-center {\n    justify-content: center;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(1rem * var(--tw-space-x-reverse));\n    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-y-reverse: 0;\n    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));\n    margin-bottom: calc(0px * var(--tw-space-y-reverse));\n  }\n\n  .sm\\:rounded-xl {\n    border-radius: .75rem;\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n\n  .data-\\[state\\=open\\]\\:sm\\:slide-in-from-bottom-full[data-state=\"open\"] {\n    --tw-enter-translate-y: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .md\\:w-screen {\n    width: 100vw;\n  }\n\n  .md\\:w-\\[334px\\] {\n    width: 334px;\n  }\n\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:max-w-\\[420px\\] {\n    max-width: 420px;\n  }\n}\n\n.\\[\\&\\>svg\\]\\:h-\\[18px\\] > svg {\n  height: 18px;\n}\n\n.\\[\\&\\>svg\\]\\:w-\\[18px\\] > svg {\n  width: 18px;\n}\n\n.\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:bg-blue-100:has([aria-selected]) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));\n}\n\n.first\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-l-md:has([aria-selected]):first-child {\n  border-top-left-radius: .375rem;\n  border-bottom-left-radius: .375rem;\n}\n\n.last\\:\\[\\&\\:has\\(\\[aria-selected\\]\\)\\]\\:rounded-r-md:has([aria-selected]):last-child {\n  border-top-right-radius: .375rem;\n  border-bottom-right-radius: .375rem;\n}\n\n.\\[\\&\\:not\\(\\[aria-selected\\]\\)\\]\\:hover\\:bg-gray-100:hover:not([aria-selected]) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-100) / var(--tw-bg-opacity));\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 [cmdk-group-heading] {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 [cmdk-group-heading] {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-sm [cmdk-group-heading] {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium [cmdk-group-heading] {\n  font-weight: 500;\n}\n\n.\\[\\&_tr\\]\\:border-b tr {\n  border-bottom-width: 1px;\n}\n\n.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n  border-width: 0;\n}\n\n.\\[\\&_tr\\:hover\\]\\:bg-gray-25 tr:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-25) / var(--tw-bg-opacity));\n}\n\n.\\[\\&_tr\\:active\\]\\:bg-gray-50 tr:active, .\\[\\&_tr\\:hover\\:active\\]\\:bg-gray-50 tr:hover:active {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity));\n}\n\n.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=\"checkbox\"]) {\n  padding-right: 0;\n}\n\n.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\] > [role=\"checkbox\"] {\n  --tw-translate-y: 2px;\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";
 
 
 
@@ -16356,6 +16772,10 @@ const $e68207026aca356b$var$defaultOptions = {
         {
             id: "pip",
             displayType: "icon"
+        },
+        {
+            id: "invite",
+            displayType: "full"
         }
     ],
     controls: {
@@ -16389,7 +16809,7 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
         let styleElement = null;
         styleElement = /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
             children: [
-                options.recorder?.enabled && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {
                     children: (0, (/*@__PURE__*/$parcel$interopDefault($9833f4335ab609cd$exports)))
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {