@snapcall/stream-ui 1.16.0 → 1.17.0

package/dist/stream-ui.esm.js

@@ -2,14 +2,16 @@ import {jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment, jsx as $3Sbms$jsx} fro
 import {createRoot as $3Sbms$createRoot} from "react-dom/client";
 import $3Sbms$hotjarbrowser from "@hotjar/browser";
 import $3Sbms$bundletextsnapcalldesignsystemdiststylecss from "bundle-text:@snapcall/design-system/dist/style.css";
-import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
+import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster1, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
 import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, ThemeContext as $3Sbms$ThemeContext, css as $3Sbms$css, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
 import {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useCallback as $3Sbms$useCallback, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, cloneElement as $3Sbms$cloneElement, forwardRef as $3Sbms$forwardRef} from "react";
+import {Toaster as $3Sbms$Toaster, UserPlus1Icon as $3Sbms$UserPlus1Icon, useToast as $3Sbms$useToast, Copy5Icon as $3Sbms$Copy5Icon, CheckIcon as $3Sbms$CheckIcon, AlertTriangleIcon as $3Sbms$AlertTriangleIcon, Dialog as $3Sbms$Dialog, DialogContent as $3Sbms$DialogContent, DialogHeader as $3Sbms$DialogHeader, DialogTitle as $3Sbms$DialogTitle, Tabs as $3Sbms$Tabs, TabsList as $3Sbms$TabsList, TabsTrigger as $3Sbms$TabsTrigger, TabsContent as $3Sbms$TabsContent, Button as $3Sbms$Button, CopyIcon as $3Sbms$CopyIcon, Form as $3Sbms$Form, FormField as $3Sbms$FormField, FormItem as $3Sbms$FormItem, FormLabel as $3Sbms$FormLabel, FormControl as $3Sbms$FormControl, CreatableSelect as $3Sbms$CreatableSelect, FormMessage as $3Sbms$FormMessage, Textarea as $3Sbms$Textarea, Send3Icon as $3Sbms$Send3Icon, Select as $3Sbms$Select, SelectTrigger as $3Sbms$SelectTrigger, PhoneCall1Icon as $3Sbms$PhoneCall1Icon, VideoRecorderIcon as $3Sbms$VideoRecorderIcon, SelectValue as $3Sbms$SelectValue, SelectContent as $3Sbms$SelectContent, SelectGroup as $3Sbms$SelectGroup, SelectItem as $3Sbms$SelectItem, MicrophoneOffIcon as $3Sbms$MicrophoneOffIcon, CheckCircleIcon as $3Sbms$CheckCircleIcon, RotateCcwIcon as $3Sbms$RotateCcwIcon, AlertDialog as $3Sbms$AlertDialog, AlertDialogContent as $3Sbms$AlertDialogContent, AlertDialogHeader as $3Sbms$AlertDialogHeader, AlertDialogTitle as $3Sbms$AlertDialogTitle, AlertDialogFooter as $3Sbms$AlertDialogFooter, SpinnerIcon as $3Sbms$SpinnerIcon, QrCodeIcon as $3Sbms$QrCodeIcon, AlertDialogDescription as $3Sbms$AlertDialogDescription, Avatar as $3Sbms$Avatar, PlusCircleIcon as $3Sbms$PlusCircleIcon, DialogFooter as $3Sbms$DialogFooter, SendIcon as $3Sbms$SendIcon, TrashIcon as $3Sbms$TrashIcon, Hourglass3Icon as $3Sbms$Hourglass3Icon, InfoCircleIcon as $3Sbms$InfoCircleIcon, AlertDialogCancel as $3Sbms$AlertDialogCancel, AlertDialogAction as $3Sbms$AlertDialogAction, DialogDescription as $3Sbms$DialogDescription, ShareArrowIcon as $3Sbms$ShareArrowIcon} from "@snapcall/design-system";
 import "inobounce";
 import {QueryClient as $3Sbms$QueryClient, QueryClientProvider as $3Sbms$QueryClientProvider, useMutation as $3Sbms$useMutation} from "react-query";
 import {useTranslation as $3Sbms$useTranslation, initReactI18next as $3Sbms$initReactI18next, Trans as $3Sbms$Trans} from "react-i18next";
 import $3Sbms$i18next from "i18next";
 import $3Sbms$bowser, {parse as $3Sbms$parse, getParser as $3Sbms$getParser} from "bowser";
+import {useOverlayTriggerState as $3Sbms$useOverlayTriggerState} from "react-stately";
 import {v4 as $3Sbms$v4} from "uuid";
 import {WebSocketTransport as $3Sbms$WebSocketTransport, Peer as $3Sbms$Peer} from "protoo-client";
 import {Producer as $3Sbms$Producer} from "mediasoup-client/lib/Producer";
@@ -17,10 +19,9 @@ import {addBreadcrumb as $3Sbms$addBreadcrumb, setTag as $3Sbms$setTag} from "@s
 import {Device as $3Sbms$Device} from "mediasoup-client";
 import {SelfieSegmentation as $3Sbms$SelfieSegmentation} from "@mediapipe/selfie_segmentation";
 import {Buffer as $3Sbms$Buffer} from "buffer";
+import {useForm as $3Sbms$useForm} from "react-hook-form";
 import {createPortal as $3Sbms$createPortal} from "react-dom";
 import {toCanvas as $3Sbms$toCanvas} from "qrcode";
-import {useOverlayTriggerState as $3Sbms$useOverlayTriggerState} from "react-stately";
-import {useToast as $3Sbms$useToast, MicrophoneOffIcon as $3Sbms$MicrophoneOffIcon, Button as $3Sbms$Button, CheckIcon as $3Sbms$CheckIcon, Toaster as $3Sbms$Toaster1, Tabs as $3Sbms$Tabs, TabsList as $3Sbms$TabsList, TabsTrigger as $3Sbms$TabsTrigger, RotateCcwIcon as $3Sbms$RotateCcwIcon, AlertDialog as $3Sbms$AlertDialog, AlertDialogContent as $3Sbms$AlertDialogContent, AlertDialogHeader as $3Sbms$AlertDialogHeader, AlertDialogTitle as $3Sbms$AlertDialogTitle, AlertDialogFooter as $3Sbms$AlertDialogFooter, QrCodeIcon as $3Sbms$QrCodeIcon, AlertDialogDescription as $3Sbms$AlertDialogDescription, Avatar as $3Sbms$Avatar, Dialog as $3Sbms$Dialog, DialogContent as $3Sbms$DialogContent, DialogHeader as $3Sbms$DialogHeader, DialogTitle as $3Sbms$DialogTitle, SpinnerIcon as $3Sbms$SpinnerIcon, PlusCircleIcon as $3Sbms$PlusCircleIcon, DialogFooter as $3Sbms$DialogFooter, SendIcon as $3Sbms$SendIcon, TrashIcon as $3Sbms$TrashIcon, Hourglass3Icon as $3Sbms$Hourglass3Icon, AlertTriangleIcon as $3Sbms$AlertTriangleIcon, InfoCircleIcon as $3Sbms$InfoCircleIcon, AlertDialogCancel as $3Sbms$AlertDialogCancel, AlertDialogAction as $3Sbms$AlertDialogAction, DialogDescription as $3Sbms$DialogDescription, ShareArrowIcon as $3Sbms$ShareArrowIcon} from "@snapcall/design-system";
 import {Player as $3Sbms$Player} from "@lottiefiles/react-lottie-player";
 import $3Sbms$classnames from "classnames";
 
@@ -340,6 +341,7 @@ const $35b37252690084e8$export$1cbfb36c1655a9a = (root, element)=>{
 
 
 
+
 const $a3e657fb86ae23f3$export$604ba5624273df44 = ()=>{
     try {
         const storedTheme = localStorage.getItem("stream_ui_language");
@@ -412,7 +414,8 @@ const $18fb8799f38eb407$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",
@@ -452,6 +455,28 @@ const $18fb8799f38eb407$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",
@@ -544,7 +569,7 @@ const $18fb8799f38eb407$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.",
@@ -552,19 +577,15 @@ const $18fb8799f38eb407$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.",
@@ -663,7 +684,8 @@ const $c5472fb74fa04782$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",
@@ -703,6 +725,28 @@ const $c5472fb74fa04782$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",
@@ -790,32 +834,28 @@ const $c5472fb74fa04782$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.",
@@ -914,7 +954,8 @@ const $b7790fb9e48df5c4$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",
@@ -954,6 +995,28 @@ const $b7790fb9e48df5c4$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",
@@ -1046,7 +1109,7 @@ const $b7790fb9e48df5c4$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.",
@@ -1054,19 +1117,15 @@ const $b7790fb9e48df5c4$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.",
@@ -1131,6 +1190,8 @@ var $384d985bb9605c35$export$2e2bcd8739ae039 = (0, $3Sbms$i18next);
 
 
 
+
+
 /* eslint-disable no-console */ 
 const $0f65a9eaf4a1e910$var$LogLevel = {
     error: 1,
@@ -1962,6 +2023,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         };
         this.muted = false;
         this.roomId = "";
+        this.companyId = 0;
         this.peerId = "";
         this.webcamProducer = null;
         this.customMessages = new Map();
@@ -1996,6 +2058,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         });
         return {
             roomId: this.roomId,
+            companyId: this.companyId,
             peerId: this.peerId,
             profile: this.profile,
             joinOptions: this.joinOptions,
@@ -2062,7 +2125,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         if (!this.peerId) this.peerId = (0, $3Sbms$v4)();
         let url;
         try {
-            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  } , 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"
@@ -2071,6 +2134,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$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;
@@ -5213,6 +5277,328 @@ const $805d92fa41e6e1b0$var$Sounds = ()=>{
 var $805d92fa41e6e1b0$export$2e2bcd8739ae039 = $805d92fa41e6e1b0$var$Sounds;
 
 
+
+
+
+
+
+
+
+
+const $379a4f4f561a4720$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 $379a4f4f561a4720$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 $379a4f4f561a4720$export$1712c8fcb05f49a6 = ({ modalState: modalState , ...props })=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    const { toast: toast  } = (0, $3Sbms$useToast)();
+    const { options: options , isAgent: isAgent , language: language  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const [type, setType] = (0, $3Sbms$useState)("instant");
+    const [selectedKey, setSelectedKey] = (0, $3Sbms$useState)("public");
+    const formContext = (0, $3Sbms$useForm)({
+        defaultValues: {
+            emails: [],
+            message: ""
+        }
+    });
+    (0, $3Sbms$useEffect)(()=>{
+        if (!modalState.isOpen) formContext.reset();
+    }, [
+        modalState.isOpen,
+        formContext
+    ]);
+    const texts = (0, $3Sbms$useMemo)(()=>{
+        return $379a4f4f561a4720$var$getTexts(type, t);
+    }, [
+        t,
+        type
+    ]);
+    const streamURL = (0, $3Sbms$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, $c9e496369b59be7a$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, $c9e496369b59be7a$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, $57162bcada7d6f66$export$2e2bcd8739ae039)(url);
+            toast({
+                title: t("copyLink.copied"),
+                icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Copy5Icon), {})
+            });
+        } catch (err) {
+            console.warn(err);
+            toast({
+                title: t("copyLink.error"),
+                icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$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, $3Sbms$jsx)((0, $3Sbms$CheckIcon), {})
+            });
+            formContext.reset();
+            modalState.close();
+        } else toast({
+            title: t("invitePeople.error"),
+            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertTriangleIcon), {})
+        });
+    });
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Dialog), {
+        open: modalState.isOpen,
+        onOpenChange: (open)=>{
+            !open && modalState.close();
+        },
+        ...props,
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$DialogContent), {
+            className: "outline-none",
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$DialogHeader), {
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$DialogTitle), {
+                        children: texts.title
+                    })
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Tabs), {
+                    defaultValue: selectedKey,
+                    onValueChange: (key)=>setSelectedKey(String(key)),
+                    className: "w-full",
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$TabsList), {
+                            className: "w-full mb-4",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TabsTrigger), {
+                                    className: "w-full",
+                                    value: "public",
+                                    children: t("invitePeople.sharePublicLink")
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TabsTrigger), {
+                                    className: "w-full",
+                                    value: "invitePeople",
+                                    children: t("invitePeople.inviteByEmail")
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TabsContent), {
+                            value: "public",
+                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                                className: "flex flex-col max-w-full gap-4 overflow-hidden",
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$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, $3Sbms$jsx)("input", {
+                                                readOnly: true,
+                                                onChange: ()=>{},
+                                                className: "text-gray-700 truncate text-md grow focus-visible:outline-none",
+                                                value: streamURL
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Button), {
+                                                className: "shrink-0",
+                                                onClick: ()=>copyStreamUrl(streamURL),
+                                                size: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CopyIcon), {
+                                                        className: "text-white",
+                                                        size: 16
+                                                    }),
+                                                    t("copyLink.copy")
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                        className: "text-sm text-gray-700",
+                                        children: texts.description
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$TabsContent), {
+                            value: "invitePeople",
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Form), {
+                                ...formContext,
+                                children: /*#__PURE__*/ (0, $3Sbms$jsxs)("form", {
+                                    className: "flex flex-col gap-4",
+                                    onSubmit: (e)=>{
+                                        e.preventDefault();
+                                        onSubmit();
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormField), {
+                                            control: formContext.control,
+                                            name: "emails",
+                                            rules: {
+                                                required: t("invitePeople.addEmailToInvite"),
+                                                validate: {
+                                                    allEmails: (value)=>{
+                                                        if (!value.every($379a4f4f561a4720$var$validateEmail)) return t("invitePeople.invalidEmail");
+                                                    }
+                                                }
+                                            },
+                                            render: ({ field: field  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$FormItem), {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormLabel), {
+                                                            children: t("invitePeople.inviteByEmail")
+                                                        }),
+                                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormControl), {
+                                                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CreatableSelect), {
+                                                                placeholder: t("invitePeople.emailPlaceholder"),
+                                                                newLabel: `${t("invitePeople.email")}: `,
+                                                                value: field.value,
+                                                                onValueChanged: (v)=>{
+                                                                    field.onChange(v);
+                                                                },
+                                                                multiple: true
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormMessage), {})
+                                                    ]
+                                                })
+                                        }),
+                                        isAgent && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormField), {
+                                            control: formContext.control,
+                                            name: "message",
+                                            render: ({ field: field  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$FormItem), {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormLabel), {
+                                                            children: t("invitePeople.message")
+                                                        }),
+                                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormControl), {
+                                                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Textarea), {
+                                                                placeholder: texts.defaultMessage,
+                                                                ...field
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$FormMessage), {})
+                                                    ]
+                                                })
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                            className: "flex justify-end",
+                                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Button), {
+                                                size: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Send3Icon), {
+                                                        size: 16,
+                                                        className: "text-white"
+                                                    }),
+                                                    t("invitePeople.invite")
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("input", {
+                                            className: "hidden",
+                                            type: "submit"
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("hr", {
+                    className: "w-full h-[1px] bg-gray-200"
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Select), {
+                    defaultValue: type,
+                    onValueChange: (v)=>{
+                        const selectedType = v;
+                        setType(selectedType);
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$SelectTrigger), {
+                            className: "w-full",
+                            children: [
+                                type === "instant" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$PhoneCall1Icon), {
+                                    size: 18,
+                                    duotone: true,
+                                    className: "text-blue-700"
+                                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$VideoRecorderIcon), {
+                                    size: 18,
+                                    duotone: true,
+                                    className: "text-blue-700"
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                    className: "flex-grow pl-2 text-left",
+                                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$SelectValue), {})
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$SelectContent), {
+                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$SelectGroup), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$SelectItem), {
+                                        value: "instant",
+                                        children: t("invitePeople.linkToJoinCall")
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$SelectItem), {
+                                        value: "assist",
+                                        children: t("invitePeople.linkToRecordAClip")
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+
 const $f235befa4cdc42d6$var$multiPiP = new (0, $e96d119a19ed0c6c$export$45fabd1ce5e673de)();
 const $f235befa4cdc42d6$var$browser = $3Sbms$parse(window.navigator.userAgent);
 const $f235befa4cdc42d6$var$Header = ()=>{
@@ -5220,6 +5606,7 @@ const $f235befa4cdc42d6$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, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $3Sbms$useState)(options.extraSettingsOptions || []);
+    const inviteModal = (0, $3Sbms$useOverlayTriggerState)({});
     const onSetExtraSettingsOptions = (event)=>{
         const { extraOptions: newExtraOptions  } = event.detail;
         setExtraOptions(newExtraOptions);
@@ -5303,6 +5690,15 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                         title: t("quickConnect.title"),
                         jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$6470d09a29d34d08), {}),
                         action: onScanQuickConnectClick
+                    },
+                    {
+                        id: "invite",
+                        title: t("invitePeople.invite"),
+                        jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$UserPlus1Icon), {
+                            size: 24,
+                            className: "text-white"
+                        }),
+                        action: ()=>inviteModal.setOpen(true)
                     }
                 ]
             },
@@ -5367,6 +5763,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
         options.sharedURL,
         muted,
         streaming,
+        inviteModal,
         setIsQuickConnectPopupVisible,
         setBlockedFeaturePopupOpen,
         setIsSettingsMenuVisible,
@@ -5375,6 +5772,9 @@ const $f235befa4cdc42d6$var$Header = ()=>{
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$1e86fd0e1db89578), {
         children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $379a4f4f561a4720$export$1712c8fcb05f49a6), {
+                modalState: inviteModal
+            }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$d43ffeaaec0b2a58), {
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a1ac29d50bdaa837$export$2e2bcd8739ae039), {
@@ -10662,7 +11062,7 @@ const $3a42b2ef7646d035$var$IconContainer = (0, $3Sbms$styledcomponents).div`
 const $3a42b2ef7646d035$var$CustomToaster = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsx)($3a42b2ef7646d035$var$AnimationsStyle, {}),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Toaster), {
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Toaster1), {
                 toastOptions: $3a42b2ef7646d035$var$toastOptions,
                 containerStyle: $3a42b2ef7646d035$var$toastContainerStyle,
                 gutter: 20,
@@ -12979,6 +13379,7 @@ function $448b01a7ea61a08a$export$c74cd098b7a410cb({ mode: mode = "photo" , requ
     });
     const [noSoundToastId, setNoSoundToastId] = (0, $3Sbms$useState)(null);
     const [continueSpeakingToastId, setContinueSpeakingToastId] = (0, $3Sbms$useState)(null);
+    const [flow, setFlow] = (0, $3Sbms$useState)();
     const updateAudioLevel = (0, $3Sbms$useCallback)((event)=>{
         const { audioLevel: audioLevel  } = event.detail;
         if (timer !== 0 && streaming) setAverageAudioLevel((prev)=>((prev || 0) * (Math.floor(timer) - 1) + audioLevel) / timer);
@@ -13072,7 +13473,9 @@ function $448b01a7ea61a08a$export$c74cd098b7a410cb({ mode: mode = "photo" , requ
         assetLoading: assetLoading,
         setAssetLoading: setAssetLoading,
         captureThumbnail: captureThumbnail,
-        lastRecordingAudioLevel: averageAudioLevel || 0
+        lastRecordingAudioLevel: averageAudioLevel || 0,
+        flow: flow,
+        setFlow: setFlow
     };
 }
 
@@ -13964,72 +14367,6 @@ const $7dc8075008cdffc1$export$287f8fcc69caf433 = /*#__PURE__*/ (0, $3Sbms$forwa
 
 
 
-const $444e1dd9fa8f6883$export$f9da3144ae2525a3 = ({ sideColor: sideColor , mainColor: mainColor  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-        width: "20",
-        height: "21",
-        viewBox: "0 0 20 21",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-            display: "inline"
-        },
-        transform: "translate(0 -1)",
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M10 2.167a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
-                fill: sideColor || "#1D1C20"
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M6.76 5.65a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
-                fill: mainColor || "#F12828"
-            })
-        ]
-    });
-const $444e1dd9fa8f6883$export$c6a849fd9d9d93a2 = ({ sideColor: sideColor , mainColor: mainColor  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-            display: "inline"
-        },
-        transform: "translate(0 -1)",
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
-                fill: sideColor || "#1D1C20"
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M7.5 6.667h5a.833.833 0 0 1 .833.833v5a.833.833 0 0 1-.834.834h-5a.833.833 0 0 1-.833-.834v-5a.833.833 0 0 1 .833-.833Z",
-                fill: mainColor || "#F12828"
-            })
-        ]
-    });
-const $444e1dd9fa8f6883$export$dce36e07153365d = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-            display: "inline"
-        },
-        transform: "translate(0 -1)",
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.666 6.666 0 1 1 0-13.333 6.666 6.666 0 0 1 0 13.333Z",
-                fill: "#1D1C20"
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M6.76 5.15a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
-                fill: "#1D1C20"
-            })
-        ]
-    });
-
-
-
 
 const $d775b8f941514ed9$var$savedPermissions = {
     audio: false,
@@ -14066,7 +14403,7 @@ const $8fe8c7100159474e$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0,
     });
 const $8fe8c7100159474e$export$788cb893d96254c8 = ({ state: state , mode: mode , primaryAction: primaryAction  })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    const getUserMediaMutation = (0, $d775b8f941514ed9$export$d791e41b9a4de1f2)({
+    (0, $d775b8f941514ed9$export$d791e41b9a4de1f2)({
         audio: true,
         video: true
     });
@@ -14082,155 +14419,205 @@ const $8fe8c7100159474e$export$788cb893d96254c8 = ({ state: state , mode: mode ,
     const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const device = orientation === "landscape" ? "desktop" : "mobile";
     const videoLength = permissionsState === "granted" ? "short" : "full";
-    const ref = (0, $3Sbms$useRef)(null);
     const title = mode === "photo" ? t("recorder.photoInstructionsTitle") : t("recorder.videoInstructionsTitle");
-    const mediaInstruction = [
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-            i18nKey: "recorder.instructions.allowAccessOnPrompt",
-            children: [
-                "When prompted, ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: "allow access"
-                }),
-                " to camera and microphone."
-            ]
-        })
-    ];
     const instructionPhoto = [
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-            i18nKey: "recorder.instructions.tapPhotoButton",
-            com: true,
-            children: [
-                "Tap the ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: " Camera button"
-                }),
-                " to take a photo."
-            ]
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.allowAccessOnPrompt",
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {})
+            }
+        }),
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
+            i18nKey: "recorder.instructions.multiplePhotos",
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {})
+            }
         }),
-        t("recorder.instructions.multiplePhotos"),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.reviewAndSendPhotos",
-            children: [
-                "You can review your photo and then ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: "send it when you're done."
-                })
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {})
+            }
         })
     ];
     const instructionVideo = [
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.tapVideoButton",
-            children: [
-                "Tap the ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: " Record button"
-                }),
-                " to start a recording."
-            ]
-        }),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-            i18nKey: "recorder.instructions.videoSpeech",
-            children: [
-                "You can ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: "speak during"
-                }),
-                " the recording for added detail."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.tapStopVideoButton",
-            children: [
-                "When you're finished, tap the ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: " Stop button"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.reviewAndSendVideos",
-            children: [
-                "You can review your video and then ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$var$Bold, {
-                    children: "send it when you're done"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($8fe8c7100159474e$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, $3Sbms$jsx)((0, $3Sbms$AlertDialog), {
         open: state.isOpen,
         onOpenChange: (open)=>{
             !open && state.close();
         },
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$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, $3Sbms$jsxs)("div", {
+                    className: "relative rounded-xl",
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$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, $3Sbms$jsx)("div", {
+                            className: "absolute inset-0 ring-2 ring-inset ring-white/20 rounded-[inherit]"
+                        })
+                    ]
+                }),
                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogHeader), {
                     children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogTitle), {
                         children: title
                     })
                 }),
-                /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                    className: "flex flex-col gap-[20px]",
+                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                    className: "flex flex-col gap-3",
+                    children: instructions.map((value, index)=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "flex items-center gap-2 p-2 bg-gray-50 rounded-lg",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$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, $3Sbms$jsx)("span", {
+                                    className: "w-[1px] h-full bg-gray-200"
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                    className: "flex-1 text-sm text-gray-900",
+                                    children: value
+                                })
+                            ]
+                        }, index))
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogFooter), {
+                    children: primaryAction()
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                    className: "text-xs text-gray-900 text-center",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
+                        i18nKey: "recorder.instructions.privacyPolicy",
+                        components: {
+                            bold: // eslint-disable-next-line jsx-a11y/anchor-has-content
+                            /*#__PURE__*/ (0, $3Sbms$jsx)("a", {
+                                className: "font-semibold text-gray-1000 underline",
+                                href: "https://www.snapcall.io/privacy-policy",
+                                target: "_blank",
+                                rel: "noreferrer"
+                            })
+                        }
+                    })
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+const $1878286c044cb80b$export$b916fa2db97921a4 = ({ state: state , flow: flow , primaryAction: primaryAction  })=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialog), {
+        open: state.isOpen,
+        onOpenChange: (open)=>{
+            !open && state.close();
+        },
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$AlertDialogContent), {
+            className: "w-[334px] md:w-[334px] rounded-xl max-h-screen overflow-y-auto",
+            children: [
+                flow.image_url ? /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    className: "relative rounded-xl",
                     children: [
-                        /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                            className: "flex flex-col gap-[10px]",
-                            ref: ref,
-                            children: instructions.map((value, index)=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                                    className: "flex flex-row justify-center gap-[5px]",
-                                    children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                                            className: "flex items-center justify-center min-w-[24px] h-[24px] rounded-[50%] bg-secondaryVLight",
-                                            children: index + 1
-                                        }),
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                            className: "w-full text-base text-primaryLight font-normal leading-[20px]",
-                                            children: value
-                                        })
-                                    ]
-                                }, index))
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+                            className: "w-full h-[200px] object-cover rounded-[inherit]",
+                            src: flow.image_url,
+                            alt: ""
                         }),
                         /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                            className: "flex items-center justify-center rounded-[8px] overflow-hidden",
-                            children: /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
-                                src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${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, $3Sbms$jsx)("p", {
-                            className: "text-xs text-[#707070] text-center",
-                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
-                                i18nKey: "recorder.instructions.privacyPolicy",
-                                children: [
-                                    "By proceeding, you agree to our",
-                                    /*#__PURE__*/ (0, $3Sbms$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, $3Sbms$jsxs)("div", {
+                            className: "absolute bottom-2 right-2 rounded-lg",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+                                    className: "w-8 h-8 object-cover rounded-[inherit]",
+                                    src: flow.logo_url,
+                                    alt: ""
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                    className: "absolute inset-0 ring-2 ring-inset ring-white/20 rounded-[inherit]"
+                                })
+                            ]
                         })
                     ]
+                }) : flow.logo_url ? /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                    className: "h-[200px] bg-cover bg-center rounded-xl",
+                    style: {
+                        backgroundImage: `url(${flow.logo_url})`
+                    },
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                        className: "flex justify-center items-center w-full h-full backdrop-blur-[30px] rounded-[inherit]",
+                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                            className: "absolute rounded-2xl",
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+                                    className: "w-[100px] h-[100px] object-cover rounded-[inherit]",
+                                    src: flow.logo_url,
+                                    alt: ""
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                                    className: "absolute inset-0 ring-4 ring-inset ring-white/20 rounded-[inherit]"
+                                })
+                            ]
+                        })
+                    })
+                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {}),
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogHeader), {
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogTitle), {
+                        children: flow.title
+                    })
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                    className: "text-sm text-gray-700 whitespace-pre-line",
+                    children: flow.text
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogFooter), {
                     children: primaryAction()
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                    className: "text-xs text-[#707070] text-center",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
+                        i18nKey: "recorder.instructions.privacyPolicy",
+                        components: {
+                            bold: // eslint-disable-next-line jsx-a11y/anchor-has-content
+                            /*#__PURE__*/ (0, $3Sbms$jsx)("a", {
+                                className: "font-semibold text-gray-1000 underline",
+                                href: "https://www.snapcall.io/privacy-policy",
+                                target: "_blank",
+                                rel: "noreferrer"
+                            })
+                        }
+                    })
                 })
             ]
         })
@@ -14243,6 +14630,47 @@ const $8fe8c7100159474e$export$788cb893d96254c8 = ({ state: state , mode: mode ,
 
 
 
+const $b61c94408ce5f147$export$a530fe7a272dd531 = ({ state: state , recorderState: recorderState  })=>{
+    const { options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    (0, $3Sbms$useEffect)(()=>{
+        const fetchFlow = async ()=>{
+            const { roomId: roomId  } = (0, $c9e496369b59be7a$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, $3Sbms$jsx)((0, $3Sbms$AlertDialog), {
+        open: state.isOpen,
+        onOpenChange: (open)=>{
+            !open && state.close();
+        },
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$AlertDialogContent), {
+            className: "max-h-screen overflow-y-auto w-[334px] md:w-[334px] rounded-xl",
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex items-center justify-center h-[200px]",
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$SpinnerIcon), {
+                    className: "text-blue-700 animate-spin",
+                    size: 64
+                })
+            })
+        })
+    });
+};
+
+
+
+
+
+
+
 
 
 
@@ -14467,8 +14895,7 @@ const $c9e5583d5dd9328d$export$5b8e641151f8011d = ({ recorderState: recorderStat
         exitStreaming
     ]);
     (0, $3Sbms$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,
@@ -14492,31 +14919,39 @@ const $c9e5583d5dd9328d$export$5b8e641151f8011d = ({ recorderState: recorderStat
             })
         });
     };
+    const modalsButton = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Button), {
+            size: "sm",
+            className: "w-full",
+            disabled: !selfPeerId || getUserMediaMutation.isLoading,
+            onClick: ()=>{
+                const { deviceState: deviceState  } = (0, $c9e496369b59be7a$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, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CheckCircleIcon), {
+                        size: 18,
+                        className: "text-white"
+                    }),
+                    t("recorder.allowCamMicAccess")
+                ]
+            }) : t("recorder.okay")
+        });
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
         className: "flex flex-col justify-center min-h-0 gap-6 antialiased shrink grow inter",
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8fe8c7100159474e$export$788cb893d96254c8), {
+            typeof recorderState.flow === "undefined" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b61c94408ce5f147$export$a530fe7a272dd531), {
+                state: instructionModalState,
+                recorderState: recorderState
+            }) : recorderState.flow ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1878286c044cb80b$export$b916fa2db97921a4), {
+                state: instructionModalState,
+                flow: recorderState.flow,
+                primaryAction: modalsButton
+            }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8fe8c7100159474e$export$788cb893d96254c8), {
                 state: instructionModalState,
                 mode: recorderState.mode,
-                primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Button), {
-                        size: "sm",
-                        className: "w-full",
-                        disabled: !selfPeerId || getUserMediaMutation.isLoading,
-                        onClick: ()=>{
-                            const { deviceState: deviceState  } = (0, $c9e496369b59be7a$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, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
-                            children: [
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CheckIcon), {
-                                    size: 18,
-                                    className: "text-white"
-                                }),
-                                t("recorder.allowCamMicAccess")
-                            ]
-                        }) : t("recorder.okay")
-                    })
+                primaryAction: modalsButton
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $dcecc67f51a66b8d$export$f9d8408fefd786da), {
                 state: qrCodeModalState,
@@ -14565,7 +15000,7 @@ const $c9e5583d5dd9328d$export$5b8e641151f8011d = ({ recorderState: recorderStat
                                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7dc8075008cdffc1$export$287f8fcc69caf433), {
                                     ref: videoElementRef
                                 }),
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Toaster1), {
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Toaster), {
                                     className: "absolute top-auto bottom-4",
                                     toasterId: "cameraRecorder",
                                     duration: Infinity
@@ -14640,7 +15075,6 @@ const $c9e5583d5dd9328d$export$5b8e641151f8011d = ({ recorderState: recorderStat
 
 
 
-
 const $ad3ba5899eb05ecf$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
         className: "font-medium text-white",
         children: children
@@ -14648,56 +15082,32 @@ const $ad3ba5899eb05ecf$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0,
 const $ad3ba5899eb05ecf$export$f361d4ae234b90f4 = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
     const instructions = [
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.tapVideoButton",
-            children: [
-                "Tap the ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {
-                    sideColor: "#FFFFFF",
-                    mainColor: "#E5484D"
-                }),
-                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
-                    children: " Record button"
-                }),
-                " to start a recording."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {})
+            }
         }),
         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.screenShareInstruction"
         }),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.videoSpeech",
-            children: [
-                "You can ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
-                    children: "speak during"
-                }),
-                " the recording for added detail."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.tapStopVideoButton",
-            children: [
-                "When you're finished, tap the ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {
-                    sideColor: "#FFFFFF",
-                    mainColor: "#E5484D"
-                }),
-                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
-                    children: " Stop button"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {})
+            }
         }),
-        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Trans), {
+        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Trans), {
             i18nKey: "recorder.instructions.reviewAndSendVideos",
-            children: [
-                "You can review your video and then ",
-                /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {
-                    children: "send it when you're done"
-                }),
-                "."
-            ]
+            components: {
+                bold: /*#__PURE__*/ (0, $3Sbms$jsx)($ad3ba5899eb05ecf$var$Bold, {})
+            }
         })
     ];
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
@@ -14897,6 +15307,7 @@ const $99a415196205cb06$export$c31ece446899894 = ({ state: state  })=>{
             !open && state.close();
         },
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$AlertDialogContent), {
+            className: "rounded-xl",
             children: [
                 /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$AlertDialogHeader), {
                     children: [
@@ -15051,6 +15462,7 @@ const $cc9cfb2e118dc0d3$export$863486d455ab61f3 = ({ modalState: modalState , on
             !open && modalState.close();
         },
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$AlertDialogContent), {
+            className: "rounded-xl",
             children: [
                 /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$AlertDialogHeader), {
                     children: [
@@ -15874,6 +16286,10 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
                         children: [
                             streamState === "loading" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91d20ee7d2ade85c$export$669f6ea7d267feaf), {}),
                             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a42b2ef7646d035$export$2e2bcd8739ae039), {}),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Toaster), {
+                                duration: 3000,
+                                className: "gap-2"
+                            }),
                             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $805d92fa41e6e1b0$export$2e2bcd8739ae039), {}),
                             isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6aca0f707e80bf63$export$2e2bcd8739ae039), {
                                 close: ()=>{
@@ -16329,7 +16745,7 @@ var $f8d57e3d223f5089$export$2e2bcd8739ae039 = $f8d57e3d223f5089$var$GreetingVie
 
 
 var $1e2747ca72d0ab49$exports = {};
-$1e2747ca72d0ab49$exports = "*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #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";
+$1e2747ca72d0ab49$exports = "*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #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";
 
 
 
@@ -16351,6 +16767,10 @@ const $24075a5d702d64b3$var$defaultOptions = {
         {
             id: "pip",
             displayType: "icon"
+        },
+        {
+            id: "invite",
+            displayType: "full"
         }
     ],
     controls: {
@@ -16384,7 +16804,7 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
         let styleElement = null;
         styleElement = /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
             children: [
-                options.recorder?.enabled && /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
+                /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
                     children: (0, (/*@__PURE__*/$parcel$interopDefault($e02c50a47b475960$exports)))
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsx)("style", {