@snapcall/stream-ui 1.18.1 → 1.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stream-ui.esm.js +1671 -849
- package/dist/stream-ui.js +1669 -847
- package/dist/stream-ui.umd.js +28 -208
- package/dist/types.d.ts +75 -11
- package/package.json +1 -1
package/dist/stream-ui.js
CHANGED
|
@@ -13,8 +13,8 @@ var $jQDcL$bowser = require("bowser");
|
|
|
13
13
|
var $jQDcL$reactstately = require("react-stately");
|
|
14
14
|
var $jQDcL$uuid = require("uuid");
|
|
15
15
|
var $jQDcL$protooclient = require("protoo-client");
|
|
16
|
-
var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
|
|
17
16
|
var $jQDcL$sentrybrowser = require("@sentry/browser");
|
|
17
|
+
var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
|
|
18
18
|
var $jQDcL$mediasoupclient = require("mediasoup-client");
|
|
19
19
|
var $jQDcL$mediapipeselfie_segmentation = require("@mediapipe/selfie_segmentation");
|
|
20
20
|
var $jQDcL$buffer = require("buffer");
|
|
@@ -389,6 +389,12 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
|
|
|
389
389
|
recordingStartText: "This call will be recorded shortly. If you\u2019d rather not be recorded, you\u2019re welcome to leave the call at this time.",
|
|
390
390
|
dismiss: "Dismiss"
|
|
391
391
|
},
|
|
392
|
+
requestAccess: {
|
|
393
|
+
wantToJoin: "<bold>{{name}}</bold> wants to join!",
|
|
394
|
+
deny: "Deny",
|
|
395
|
+
admit: "Admit",
|
|
396
|
+
defaultName: "An user"
|
|
397
|
+
},
|
|
392
398
|
endView: {
|
|
393
399
|
goBack: "Go back to call",
|
|
394
400
|
tooLate: "You arrived too late",
|
|
@@ -536,16 +542,42 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
|
|
|
536
542
|
you: "You",
|
|
537
543
|
cancel: "Cancel",
|
|
538
544
|
confirm: "Confirm",
|
|
539
|
-
remove: "Remove"
|
|
545
|
+
remove: "Remove",
|
|
546
|
+
proceed: "Proceed",
|
|
547
|
+
audio: "Audio"
|
|
540
548
|
},
|
|
541
549
|
greeting: {
|
|
542
550
|
mainTitle: "Welcome to SnapCall",
|
|
543
|
-
sideTitle: "
|
|
544
|
-
sideDescription: "
|
|
545
|
-
namePlaceholder: "
|
|
551
|
+
sideTitle: "Hold tight, you're next!",
|
|
552
|
+
sideDescription: "Please enter your name and adjust your camera and microphone",
|
|
553
|
+
namePlaceholder: "Eg. Lucy or Peter",
|
|
546
554
|
nameSubmit: "Join Conversation",
|
|
547
555
|
footerTitle: "Powered by SnapCall",
|
|
548
|
-
footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service."
|
|
556
|
+
footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service.",
|
|
557
|
+
cameraIs: "Camera is",
|
|
558
|
+
microphoneIs: "Microphone is",
|
|
559
|
+
on: "On",
|
|
560
|
+
off: "Off",
|
|
561
|
+
scheduleACall: "Schedule a call",
|
|
562
|
+
requestACall: "Request a call",
|
|
563
|
+
name: "Name",
|
|
564
|
+
nameDescription: "This name will be displayed to all participants in the call.",
|
|
565
|
+
setting: "Settings",
|
|
566
|
+
askToJoin: "Ask to join",
|
|
567
|
+
youWillJoinWhenSomeoneLetsYou: "You will join the call when someone from {{ companyName }} lets you in.",
|
|
568
|
+
cantJoinCall: "You can\u2019t join this call",
|
|
569
|
+
someoneDenied: "Someone in the call denied your request to join.",
|
|
570
|
+
askingLetIn: "Asking to be let in...",
|
|
571
|
+
takeFewMinute: "This may take a few minutes depending on the availability of the participants.",
|
|
572
|
+
cantWait: "Can't wait?",
|
|
573
|
+
whatYouCanDo: "Here\u2019s what you can do",
|
|
574
|
+
leaveMessage: "Leave a message",
|
|
575
|
+
cantWaitLeaveMessage: "Can\u2019t wait? You can leave a message and you will be contacted as soon as possible.",
|
|
576
|
+
recordVideo: "Record video",
|
|
577
|
+
recordVoice: "Record voice",
|
|
578
|
+
canceledCallRequest: "The call request will be canceled and you will be redirected to the call scheduling page.",
|
|
579
|
+
mediaDenied: "Microphone and camera access denied",
|
|
580
|
+
clickOnLock: "Click on the <1></1> lock icon in your browser's bar."
|
|
549
581
|
},
|
|
550
582
|
recorder: {
|
|
551
583
|
addMore: "Add more",
|
|
@@ -582,6 +614,7 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
|
|
|
582
614
|
photoInstructionsTitle: "Ready to snap a photo?",
|
|
583
615
|
videoInstructionsTitle: "Ready to record a video?",
|
|
584
616
|
screenShareInstructionsTitle: "Ready to share your screen?",
|
|
617
|
+
audioInstructionsTitle: "Ready to record a voice message?",
|
|
585
618
|
instructions: {
|
|
586
619
|
allowAccessOnPrompt: "When prompted, <bold>allow access</bold> to camera and microphone.",
|
|
587
620
|
multiplePhotos: "Take a <bold>photo or multiple</bold> for detail, then review.",
|
|
@@ -591,7 +624,10 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
|
|
|
591
624
|
tapStopVideoButton: "<bold>Tap stop</bold> when you are done.",
|
|
592
625
|
reviewAndSendVideos: "<bold>Review your videos</bold>, and they will be sent to us automatically.",
|
|
593
626
|
screenShareInstruction: "Select the screen or window you wish to record.",
|
|
594
|
-
privacyPolicy: "By proceeding, you agree to our <bold>Privacy Policy</bold>."
|
|
627
|
+
privacyPolicy: "By proceeding, you agree to our <bold>Privacy Policy</bold>.",
|
|
628
|
+
tapAudioButton: "<bold>Tap the record button</bold> to start recording your audio message.",
|
|
629
|
+
speakClearly: "<bold>Speak clearly</bold> and say what you need to convey.",
|
|
630
|
+
reviewAndSendAudios: "<bold>Review your audios</bold>, and they will be sent to us automatically."
|
|
595
631
|
},
|
|
596
632
|
switchToMobileTitle: "Switch to your mobile device",
|
|
597
633
|
switchToMobileDescription: "Experience greater convenience by using your phone to take photos and record videos.",
|
|
@@ -654,6 +690,12 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
|
|
|
654
690
|
connectedTo: "Connect\xe9 \xe0 {{name}}",
|
|
655
691
|
recording: "Enregistrement en cours"
|
|
656
692
|
},
|
|
693
|
+
requestAccess: {
|
|
694
|
+
wantToJoin: "{{name}} souhaite rejoindre!",
|
|
695
|
+
deny: "Refuser",
|
|
696
|
+
admit: "Accepter",
|
|
697
|
+
defaultName: "Un utilisateur"
|
|
698
|
+
},
|
|
657
699
|
recordingPopup: {
|
|
658
700
|
recordingStartTitle: "L'enregistrement va commencer.",
|
|
659
701
|
recordingStartText: "Cet appel sera enregistr\xe9 sous peu. Si vous pr\xe9f\xe9rez ne pas \xeatre enregistr\xe9, vous \xeates libre de quitter l'appel \xe0 tout moment.",
|
|
@@ -806,16 +848,42 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
|
|
|
806
848
|
you: "Vous",
|
|
807
849
|
cancel: "Annuler",
|
|
808
850
|
confirm: "Confirmer",
|
|
809
|
-
remove: "Enlever"
|
|
851
|
+
remove: "Enlever",
|
|
852
|
+
proceed: "Proc\xe9der",
|
|
853
|
+
audio: "Audio"
|
|
810
854
|
},
|
|
811
855
|
greeting: {
|
|
812
856
|
mainTitle: "Bienvenue sur SnapCall",
|
|
813
|
-
sideTitle: "
|
|
814
|
-
sideDescription: "
|
|
815
|
-
namePlaceholder: "
|
|
857
|
+
sideTitle: "Tenez bon, vous \xeates le prochain !",
|
|
858
|
+
sideDescription: "Veuillez entrer votre nom et r\xe9gler votre cam\xe9ra et votre microphone",
|
|
859
|
+
namePlaceholder: "Par exemple. Lucie ou Peter",
|
|
816
860
|
nameSubmit: "Rejoindre la conversation",
|
|
817
861
|
footerTitle: "Propuls\xe9 par SnapCall",
|
|
818
|
-
footerDescription: "D\xe9couvrez SnapCall, ajoutez de la vid\xe9o en temps r\xe9el \xe0 n'importe quelle plateforme, produit ou service."
|
|
862
|
+
footerDescription: "D\xe9couvrez SnapCall, ajoutez de la vid\xe9o en temps r\xe9el \xe0 n'importe quelle plateforme, produit ou service.",
|
|
863
|
+
cameraIs: "La cam\xe9ra est",
|
|
864
|
+
microphoneIs: "Le micro est",
|
|
865
|
+
on: "allum\xe9e",
|
|
866
|
+
off: "\xe9teinte",
|
|
867
|
+
scheduleACall: "Planifier un appel",
|
|
868
|
+
requestACall: "Demander un appel",
|
|
869
|
+
name: "Nom",
|
|
870
|
+
nameDescription: "Ce nom sera affich\xe9 \xe0 tous les participants \xe0 l'appel.",
|
|
871
|
+
setting: "Param\xe8tres",
|
|
872
|
+
askToJoin: "Demander \xe0 rejoindre",
|
|
873
|
+
youWillJoinWhenSomeoneLetsYou: "Vous rejoindrez l'appel lorsque quelqu'un de {{ companyName }} vous laissera entrer.",
|
|
874
|
+
cantJoinCall: "Vous ne pouvez pas rejoindre cet appel",
|
|
875
|
+
someoneDenied: "Quelqu'un lors de l'appel a refus\xe9 votre demande de participation.",
|
|
876
|
+
askingLetIn: "Demander \xe0 entrer...",
|
|
877
|
+
takeFewMinute: "Cela peut prendre quelques minutes selon la disponibilit\xe9 des participants.",
|
|
878
|
+
cantWait: "Je ne peux pas attendre?",
|
|
879
|
+
whatYouCanDo: "Voici ce que vous pouvez faire",
|
|
880
|
+
leaveMessage: "Laisser un message",
|
|
881
|
+
cantWaitLeaveMessage: "Vous ne pouvez pas attendre ? Vous pouvez laisser un message et vous serez contact\xe9 dans les plus brefs d\xe9lais.",
|
|
882
|
+
recordVideo: "Enregistrer une vid\xe9o",
|
|
883
|
+
recordVoice: "Enregistrer la voix",
|
|
884
|
+
canceledCallRequest: "La demande d'appel sera annul\xe9e et vous serez redirig\xe9 vers la page de planification des appels.",
|
|
885
|
+
mediaDenied: "Acc\xe8s au microphone et \xe0 la cam\xe9ra refus\xe9",
|
|
886
|
+
clickOnLock: "Cliquez sur l'ic\xf4ne de verrouillage <1></1> dans la barre de votre navigateur."
|
|
819
887
|
},
|
|
820
888
|
recorder: {
|
|
821
889
|
addMore: "Ajouter plus",
|
|
@@ -852,6 +920,7 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
|
|
|
852
920
|
photoInstructionsTitle: "Pr\xeat \xe0 prendre une photo ?",
|
|
853
921
|
videoInstructionsTitle: "Pr\xeat \xe0 enregistrer une vid\xe9o ?",
|
|
854
922
|
screenShareInstructionsTitle: "Pr\xeat \xe0 partager votre \xe9cran ?",
|
|
923
|
+
audioInstructionsTitle: "Pr\xeat \xe0 enregistrer un message vocal\xa0?",
|
|
855
924
|
instructions: {
|
|
856
925
|
allowAccessOnPrompt: "<bold>Autorisez l'acc\xe8s</bold> \xe0 la cam\xe9ra et au micro lorsque demand\xe9.",
|
|
857
926
|
multiplePhotos: "Prenez <bold>une ou plusieurs photos</bold> pour donner plus de d\xe9tails.",
|
|
@@ -861,7 +930,10 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
|
|
|
861
930
|
tapStopVideoButton: "<bold>Appuyez sur Arr\xeat</bold> lorsque vous avez termin\xe9.",
|
|
862
931
|
reviewAndSendVideos: "<bold>Validez vos vid\xe9os</bold>, et elles nous seront envoy\xe9es automatiquement.",
|
|
863
932
|
screenShareInstruction: "S\xe9lectionnez l'\xe9cran ou la fen\xeatre que vous souhaitez enregistrer.",
|
|
864
|
-
privacyPolicy: "En continuant, vous acceptez notre <bold>Politique de confidentialit\xe9</bold>."
|
|
933
|
+
privacyPolicy: "En continuant, vous acceptez notre <bold>Politique de confidentialit\xe9</bold>.",
|
|
934
|
+
tapAudioButton: "<bold>Appuyez sur le bouton d'enregistrement</bold> pour commencer \xe0 enregistrer votre message audio.",
|
|
935
|
+
speakClearly: "<bold>Parlez clairement</bold> et dites ce que vous devez transmettre.",
|
|
936
|
+
reviewAndSendAudios: "<bold>V\xe9rifiez vos audios</bold>, et ils seront envoy\xe9s automatiquement \xe0 nous."
|
|
865
937
|
},
|
|
866
938
|
switchToMobileTitle: "Passez sur votre mobile",
|
|
867
939
|
switchToMobileDescription: "Profitez d'une exp\xe9rience encore plus pratique en utilisant votre t\xe9l\xe9phone pour prendre des photos et enregistrer des vid\xe9os.",
|
|
@@ -924,6 +996,12 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
|
|
|
924
996
|
connectedTo: "Connesso a {{name}}",
|
|
925
997
|
recording: "Registrazione in corso"
|
|
926
998
|
},
|
|
999
|
+
requestAccess: {
|
|
1000
|
+
wantToJoin: "{{name}} vuole unirsi!",
|
|
1001
|
+
deny: "Negare",
|
|
1002
|
+
admit: "Ammettere",
|
|
1003
|
+
defaultName: "Un utente"
|
|
1004
|
+
},
|
|
927
1005
|
recordingPopup: {
|
|
928
1006
|
recordingStartTitle: "Registrazione in procinto di iniziare.",
|
|
929
1007
|
recordingStartText: "Questa chiamata verr\xe0 registrata a breve. Se preferisci non essere registrato, sei libero di lasciare la chiamata in questo momento.",
|
|
@@ -1076,16 +1154,42 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
|
|
|
1076
1154
|
you: "Voi",
|
|
1077
1155
|
cancel: "Annulla",
|
|
1078
1156
|
confirm: "Confermare",
|
|
1079
|
-
remove: "Rimuovere"
|
|
1157
|
+
remove: "Rimuovere",
|
|
1158
|
+
proceed: "Procedere",
|
|
1159
|
+
audio: "Audio"
|
|
1080
1160
|
},
|
|
1081
1161
|
greeting: {
|
|
1082
1162
|
mainTitle: "Benvenuto a SnapCall",
|
|
1083
|
-
sideTitle: "
|
|
1084
|
-
sideDescription: "
|
|
1085
|
-
namePlaceholder: "
|
|
1163
|
+
sideTitle: "Tieni duro, il prossimo sei tu!",
|
|
1164
|
+
sideDescription: "Inserisci il tuo nome e regola la fotocamera e il microfono",
|
|
1165
|
+
namePlaceholder: "Per esempio. Lucia o Pietro",
|
|
1086
1166
|
nameSubmit: "Partecipa alla conversazione",
|
|
1087
1167
|
footerTitle: "Offerto da SnapCall",
|
|
1088
|
-
footerDescription: "Incontrare SnapCall, il modo pi\xf9 semplice per aggiungere video in tempo reale a piattaforma, prodotto o servizio."
|
|
1168
|
+
footerDescription: "Incontrare SnapCall, il modo pi\xf9 semplice per aggiungere video in tempo reale a piattaforma, prodotto o servizio.",
|
|
1169
|
+
cameraIs: "La fotocamera \xe8",
|
|
1170
|
+
microphoneIs: "Il microfono \xe8",
|
|
1171
|
+
on: "acceso",
|
|
1172
|
+
off: "spento",
|
|
1173
|
+
scheduleACall: "Pianifica una chiamata",
|
|
1174
|
+
requestACall: "Richiedi una chiamata",
|
|
1175
|
+
name: "Nome",
|
|
1176
|
+
nameDescription: "Questo nome verr\xe0 visualizzato a tutti i partecipanti alla chiamata.",
|
|
1177
|
+
setting: "Impostazioni",
|
|
1178
|
+
askToJoin: "Chiedi di partecipare",
|
|
1179
|
+
youWillJoinWhenSomeoneLetsYou: "Parteciperai alla chiamata quando qualcuno di {{ companyName }} ti far\xe0 entrare.",
|
|
1180
|
+
cantJoinCall: "Non puoi partecipare a questa chiamata",
|
|
1181
|
+
someoneDenied: "Qualcuno nella chiamata ha rifiutato la tua richiesta di partecipazione.",
|
|
1182
|
+
askingLetIn: "Chiedo di essere fatto entrare...",
|
|
1183
|
+
takeFewMinute: "L'operazione potrebbe richiedere alcuni minuti a seconda della disponibilit\xe0 dei partecipanti.",
|
|
1184
|
+
cantWait: "Non vedo l'ora?",
|
|
1185
|
+
whatYouCanDo: "Ecco cosa puoi fare",
|
|
1186
|
+
leaveMessage: "Lascia un messaggio",
|
|
1187
|
+
cantWaitLeaveMessage: "Non vedi l'ora? Puoi lasciare un messaggio e sarai contattato il prima possibile.",
|
|
1188
|
+
recordVideo: "Registra video",
|
|
1189
|
+
recordVoice: "Registra voce",
|
|
1190
|
+
canceledCallRequest: "La richiesta di chiamata verr\xe0 annullata e verrai reindirizzato alla pagina di pianificazione delle chiamate",
|
|
1191
|
+
mediaDenied: "Accesso al microfono e alla fotocamera negato",
|
|
1192
|
+
clickOnLock: "Fai clic sull'icona del lucchetto <1></1> nella barra del browser."
|
|
1089
1193
|
},
|
|
1090
1194
|
recorder: {
|
|
1091
1195
|
addMore: "Aggiungere altro",
|
|
@@ -1122,6 +1226,7 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
|
|
|
1122
1226
|
photoInstructionsTitle: "Pronto a scattare una foto?",
|
|
1123
1227
|
videoInstructionsTitle: "Pronto a registrare un video?",
|
|
1124
1228
|
screenShareInstructionsTitle: "Pronto a condividere il tuo schermo?",
|
|
1229
|
+
audioInstructionsTitle: "Pronti per registrare un messaggio vocale?",
|
|
1125
1230
|
instructions: {
|
|
1126
1231
|
allowAccessOnPrompt: "<bold>Consenti l'accesso</bold> alla fotocamera e al microfono.",
|
|
1127
1232
|
multiplePhotos: "Scatta <bold>una foto o pi\xf9</bold> di una per i dettagli.",
|
|
@@ -1131,7 +1236,10 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
|
|
|
1131
1236
|
tapStopVideoButton: "<bold>Premi Stop</bold> quando hai finito.",
|
|
1132
1237
|
reviewAndSendVideos: "<bold>Convalida i tuoi video</bold> e verranno inviati automaticamente a noi.",
|
|
1133
1238
|
screenShareInstruction: "Seleziona lo schermo o la finestra che desideri registrare.",
|
|
1134
|
-
privacyPolicy: "Procedendo, accetti la nostra <bold>Politica sulla Privacy.</bold>"
|
|
1239
|
+
privacyPolicy: "Procedendo, accetti la nostra <bold>Politica sulla Privacy.</bold>",
|
|
1240
|
+
tapAudioButton: "<bold>Premi il pulsante di registrazione</bold> per iniziare a registrare il tuo messaggio vocale.",
|
|
1241
|
+
speakClearly: "<bold>Parla chiaramente</bold> e d\xec ci\xf2 che devi comunicare.",
|
|
1242
|
+
reviewAndSendAudios: "<bold>Rivedi i tuoi audio</bold> e verranno inviati automaticamente a noi."
|
|
1135
1243
|
},
|
|
1136
1244
|
switchToMobileTitle: "Passa al tuo dispositivo mobile",
|
|
1137
1245
|
switchToMobileDescription: "Goditi un'esperienza ancora pi\xf9 pratica utilizzando il tuo telefono per scattare foto e registrare video.",
|
|
@@ -1418,6 +1526,7 @@ class $1bfa11322d1d6377$var$AudioRenderer {
|
|
|
1418
1526
|
var $1bfa11322d1d6377$export$2e2bcd8739ae039 = $1bfa11322d1d6377$var$AudioRenderer;
|
|
1419
1527
|
|
|
1420
1528
|
|
|
1529
|
+
|
|
1421
1530
|
const $3575c8a563f2a1da$export$674c90a250a8b2c5 = async (video)=>{
|
|
1422
1531
|
const { videoWidth: videoWidth, videoHeight: videoHeight } = video;
|
|
1423
1532
|
const orientation = videoWidth > videoHeight ? "landscape" : "portrait";
|
|
@@ -1942,6 +2051,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
1942
2051
|
this.mediasoupTransport = {};
|
|
1943
2052
|
this.mediaPipeOption = $1dedebd5ff3002eb$var$defaultMediapipeOptions;
|
|
1944
2053
|
this.useVideoBackground = false;
|
|
2054
|
+
this.waitingRoomAccess = false;
|
|
1945
2055
|
this.pendingDeviceRequest = {};
|
|
1946
2056
|
this.joinOptions = {};
|
|
1947
2057
|
this.devicesList = [];
|
|
@@ -2021,7 +2131,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2021
2131
|
});
|
|
2022
2132
|
return {
|
|
2023
2133
|
roomId: this.roomId,
|
|
2134
|
+
waitingRoomAccess: this.waitingRoomAccess,
|
|
2024
2135
|
companyId: this.companyId,
|
|
2136
|
+
company: this.company,
|
|
2137
|
+
plan: this.plan,
|
|
2138
|
+
permissions: this.permissions,
|
|
2025
2139
|
peerId: this.peerId,
|
|
2026
2140
|
profile: this.profile,
|
|
2027
2141
|
joinOptions: this.joinOptions,
|
|
@@ -2078,7 +2192,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2078
2192
|
if (!this.peerId) this.peerId = (0, $jQDcL$uuid.v4)();
|
|
2079
2193
|
let url;
|
|
2080
2194
|
try {
|
|
2081
|
-
const { streamer_instance: instanceId, plan: { permissions: permissions, name: name }, recordings: recordings, company_id: company_id } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
|
|
2195
|
+
const { streamer_instance: instanceId, plan: { permissions: permissions, name: name }, recordings: recordings, company_id: company_id, company: company, defaultPublicPage: defaultPublicPage } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
|
|
2082
2196
|
method: "get",
|
|
2083
2197
|
headers: {
|
|
2084
2198
|
"Content-Type": "application/json"
|
|
@@ -2088,7 +2202,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2088
2202
|
throw new Error("Invalid room ID");
|
|
2089
2203
|
});
|
|
2090
2204
|
this.companyId = company_id;
|
|
2205
|
+
this.company = company;
|
|
2091
2206
|
this.permissions = permissions;
|
|
2207
|
+
this.defaultPublicPage = defaultPublicPage;
|
|
2092
2208
|
if (recordings?.headless === true) permissions.push("record_video_on_demand");
|
|
2093
2209
|
this.plan = name;
|
|
2094
2210
|
const searchParams = new URLSearchParams({
|
|
@@ -2097,7 +2213,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2097
2213
|
});
|
|
2098
2214
|
if (options.authKey) searchParams.append("authKey", options.authKey);
|
|
2099
2215
|
const recorderPath = this.joinOptions.recorder ? "/recorder" : "";
|
|
2100
|
-
url = `${this.config.streamerServer}/${instanceId}
|
|
2216
|
+
url = `${this.config.streamerServer}/${instanceId}/v2/${recorderPath}?${searchParams}`;
|
|
2101
2217
|
} catch (roomError) {
|
|
2102
2218
|
console.error("init", roomError);
|
|
2103
2219
|
const event = new $1dedebd5ff3002eb$var$SnapcallEvent("invalidRoom", {
|
|
@@ -2113,14 +2229,26 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2113
2229
|
}
|
|
2114
2230
|
});
|
|
2115
2231
|
this.protoo = new $jQDcL$protooclient.Peer(this.protooTransport);
|
|
2116
|
-
|
|
2232
|
+
let open = false;
|
|
2233
|
+
let err;
|
|
2234
|
+
let onOpen = (err)=>{};
|
|
2235
|
+
this.protoo.on("open", async ()=>{
|
|
2236
|
+
if (this.joinOptions.apiKey) await this.setAgentIdentity({
|
|
2237
|
+
apiKey: this.joinOptions.apiKey,
|
|
2238
|
+
email: this.joinOptions.email
|
|
2239
|
+
}).catch((err)=>{
|
|
2240
|
+
$1dedebd5ff3002eb$var$log.error("onOpen", "failed auth", err);
|
|
2241
|
+
});
|
|
2242
|
+
open = true;
|
|
2243
|
+
onOpen();
|
|
2117
2244
|
if (this.joinOptions.recorder) {
|
|
2118
|
-
this.joinRecorder();
|
|
2245
|
+
await this.joinRecorder();
|
|
2119
2246
|
return;
|
|
2120
2247
|
}
|
|
2121
|
-
this.joinRoom();
|
|
2122
2248
|
});
|
|
2123
2249
|
this.protoo.on("failed", ()=>{
|
|
2250
|
+
err = new Error("failure");
|
|
2251
|
+
onOpen(err);
|
|
2124
2252
|
$1dedebd5ff3002eb$var$log.error("protoo.on", "failed");
|
|
2125
2253
|
this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.SOCKET_LOST);
|
|
2126
2254
|
});
|
|
@@ -2249,6 +2377,22 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2249
2377
|
}
|
|
2250
2378
|
});
|
|
2251
2379
|
this.dispatchEvent(event);
|
|
2380
|
+
} else if (notification.method === "requestAccessResult") {
|
|
2381
|
+
if (notification.data.success) this.onEnterRoom();
|
|
2382
|
+
const event = new $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
|
|
2383
|
+
detail: notification.data
|
|
2384
|
+
});
|
|
2385
|
+
this.dispatchEvent(event);
|
|
2386
|
+
} else if (notification.method === "cancelAccessRequest") {
|
|
2387
|
+
const event = new $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
|
|
2388
|
+
detail: notification.data
|
|
2389
|
+
});
|
|
2390
|
+
this.dispatchEvent(event);
|
|
2391
|
+
} else if (notification.method === "accessRequest") {
|
|
2392
|
+
const event = new $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
|
|
2393
|
+
detail: notification.data
|
|
2394
|
+
});
|
|
2395
|
+
this.dispatchEvent(event);
|
|
2252
2396
|
} else if (notification.method === "requestDeviceResult") {
|
|
2253
2397
|
const event = new $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
|
|
2254
2398
|
detail: notification.data
|
|
@@ -2297,6 +2441,14 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2297
2441
|
}
|
|
2298
2442
|
}
|
|
2299
2443
|
});
|
|
2444
|
+
await new Promise((resolve, reject)=>{
|
|
2445
|
+
onOpen = (err)=>{
|
|
2446
|
+
onOpen = ()=>{};
|
|
2447
|
+
if (err) return reject(err);
|
|
2448
|
+
resolve();
|
|
2449
|
+
};
|
|
2450
|
+
if (open) onOpen(err);
|
|
2451
|
+
});
|
|
2300
2452
|
}
|
|
2301
2453
|
closeWebrtcTransport(key) {
|
|
2302
2454
|
const transport = this.mediasoupTransport[key];
|
|
@@ -2307,7 +2459,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2307
2459
|
}
|
|
2308
2460
|
}
|
|
2309
2461
|
async getTransport(kind, direction) {
|
|
2310
|
-
if (!this.streamerMediasoup) throw new Error("streamerMediasoup not initialized");
|
|
2462
|
+
if (!this.streamerMediasoup || !this.protoo) throw new Error("streamerMediasoup not initialized");
|
|
2311
2463
|
let transport = this.mediasoupTransport[`${kind}-${direction}`];
|
|
2312
2464
|
if (!transport) {
|
|
2313
2465
|
try {
|
|
@@ -2346,42 +2498,79 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2346
2498
|
}
|
|
2347
2499
|
});
|
|
2348
2500
|
}
|
|
2349
|
-
async setAgentIdentity() {
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
email
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
}
|
|
2373
|
-
})
|
|
2501
|
+
async setAgentIdentity({ apiKey: apiKey, email: email }) {
|
|
2502
|
+
if (apiKey) {
|
|
2503
|
+
this.joinOptions.apiKey = apiKey;
|
|
2504
|
+
this.joinOptions.email = email;
|
|
2505
|
+
try {
|
|
2506
|
+
if (apiKey && email) this.agentIdentity = await this.fetchAgentInfo({
|
|
2507
|
+
apiKey: apiKey,
|
|
2508
|
+
email: email
|
|
2509
|
+
});
|
|
2510
|
+
else if (apiKey) this.agentIdentity = await this.fetchUserInfo({
|
|
2511
|
+
apiKey: apiKey
|
|
2512
|
+
});
|
|
2513
|
+
await this.protoo?.request("authenticate", {
|
|
2514
|
+
apiKey: apiKey,
|
|
2515
|
+
email: email
|
|
2516
|
+
});
|
|
2517
|
+
if (this.agentIdentity) this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
|
|
2518
|
+
detail: {
|
|
2519
|
+
success: true,
|
|
2520
|
+
email: this.agentIdentity.email,
|
|
2521
|
+
name: this.agentIdentity.name,
|
|
2522
|
+
avatarUrl: this.agentIdentity.settings?.avatar_url
|
|
2523
|
+
}
|
|
2524
|
+
}));
|
|
2525
|
+
} catch (agentInfoError) {
|
|
2526
|
+
$1dedebd5ff3002eb$var$log.warn("setAgentIdentity", agentInfoError);
|
|
2527
|
+
this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
|
|
2528
|
+
detail: {
|
|
2529
|
+
success: false
|
|
2530
|
+
}
|
|
2531
|
+
}));
|
|
2532
|
+
}
|
|
2374
2533
|
}
|
|
2375
2534
|
}
|
|
2535
|
+
async acceptAccessRequest(id) {
|
|
2536
|
+
if (!this.protoo) throw new Error("not connected");
|
|
2537
|
+
await this.protoo.request("acceptAccessRequest", {
|
|
2538
|
+
id: id
|
|
2539
|
+
});
|
|
2540
|
+
}
|
|
2541
|
+
async denyAccessRequest(id) {
|
|
2542
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2543
|
+
await this.protoo.request("denyAccessRequest", {
|
|
2544
|
+
id: id
|
|
2545
|
+
});
|
|
2546
|
+
}
|
|
2547
|
+
async requestRoomAccess() {
|
|
2548
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2549
|
+
await this.protoo.request("requestAccess");
|
|
2550
|
+
this.waitingRoomAccess = true;
|
|
2551
|
+
}
|
|
2376
2552
|
async joinRoom() {
|
|
2553
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2554
|
+
await this.protoo.request("join");
|
|
2555
|
+
await this.onEnterRoom();
|
|
2556
|
+
if (this.agentIdentity) this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
|
|
2557
|
+
detail: {
|
|
2558
|
+
success: true,
|
|
2559
|
+
email: this.agentIdentity.email,
|
|
2560
|
+
name: this.agentIdentity.name,
|
|
2561
|
+
avatarUrl: this.agentIdentity.settings?.avatar_url
|
|
2562
|
+
}
|
|
2563
|
+
}));
|
|
2564
|
+
}
|
|
2565
|
+
async getRoomPeers() {
|
|
2566
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2567
|
+
return await this.protoo.request("getRoomPeers");
|
|
2568
|
+
}
|
|
2569
|
+
async onEnterRoom() {
|
|
2570
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2377
2571
|
this.streamerMediasoup = await (0, $a62e7f17be5cf3a0$export$2e2bcd8739ae039).create(this.protoo, this.config);
|
|
2378
2572
|
// now we join
|
|
2379
|
-
const {
|
|
2380
|
-
await this.setAgentIdentity();
|
|
2381
|
-
const { peers: peers, videoRecordStarted: videoRecordStarted, videoRecording: videoRecording } = await this.protoo.request("getRoomPeers", {
|
|
2382
|
-
apiKey: apiKey,
|
|
2383
|
-
email: email
|
|
2384
|
-
});
|
|
2573
|
+
const { peers: peers, videoRecordStarted: videoRecordStarted, videoRecording: videoRecording, waitingRequests: waitingRequests } = await this.protoo.request("getRoomPeers");
|
|
2385
2574
|
this.peers = new Map(peers.map((peer)=>[
|
|
2386
2575
|
peer.id || peer.peerId,
|
|
2387
2576
|
{
|
|
@@ -2392,6 +2581,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2392
2581
|
const callId = await this.getCallId();
|
|
2393
2582
|
this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("enterRoom", {
|
|
2394
2583
|
detail: {
|
|
2584
|
+
waitingRequests: waitingRequests,
|
|
2395
2585
|
videoRecording: videoRecording,
|
|
2396
2586
|
videoRecordStarted: videoRecordStarted,
|
|
2397
2587
|
peerId: this.peerId,
|
|
@@ -2418,11 +2608,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2418
2608
|
});
|
|
2419
2609
|
}
|
|
2420
2610
|
async joinRecorder() {
|
|
2611
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2421
2612
|
this.streamerMediasoup = await (0, $a62e7f17be5cf3a0$export$2e2bcd8739ae039).create(this.protoo, this.config);
|
|
2422
2613
|
const callId = await this.getCallId();
|
|
2423
|
-
if (this.joinOptions.apiKey) this.
|
|
2614
|
+
if (this.joinOptions.apiKey) this.setAgentIdentity({
|
|
2424
2615
|
apiKey: this.joinOptions.apiKey
|
|
2425
|
-
})
|
|
2616
|
+
});
|
|
2426
2617
|
this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("enterRoom", {
|
|
2427
2618
|
detail: {
|
|
2428
2619
|
videoRecording: {
|
|
@@ -2434,7 +2625,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2434
2625
|
peers: [],
|
|
2435
2626
|
callId: callId,
|
|
2436
2627
|
plan: this.plan,
|
|
2437
|
-
permissions: this.permissions
|
|
2628
|
+
permissions: this.permissions,
|
|
2629
|
+
waitingRequests: []
|
|
2438
2630
|
}
|
|
2439
2631
|
}));
|
|
2440
2632
|
}
|
|
@@ -2477,7 +2669,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2477
2669
|
detail: {}
|
|
2478
2670
|
});
|
|
2479
2671
|
this.dispatchEvent(event);
|
|
2480
|
-
if (this.protoo
|
|
2672
|
+
if (this.protoo?.connected) await this.protoo.request("closeProducer", {
|
|
2481
2673
|
producerId: producerId
|
|
2482
2674
|
});
|
|
2483
2675
|
}
|
|
@@ -2523,10 +2715,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2523
2715
|
}
|
|
2524
2716
|
}
|
|
2525
2717
|
}
|
|
2526
|
-
async enableMicrophone() {
|
|
2718
|
+
async enableMicrophone({ deviceId: deviceId } = {}) {
|
|
2527
2719
|
if (!this.micProducer || this.micProducer?.closed) {
|
|
2528
2720
|
const stream = await this.handleGetUserMediaError("microphone", navigator.mediaDevices.getUserMedia({
|
|
2529
2721
|
audio: {
|
|
2722
|
+
deviceId: deviceId,
|
|
2530
2723
|
noiseSuppression: true,
|
|
2531
2724
|
echoCancellation: true
|
|
2532
2725
|
}
|
|
@@ -2573,7 +2766,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2573
2766
|
this.micProducer.pause();
|
|
2574
2767
|
this.muted = true;
|
|
2575
2768
|
const device = "microphone";
|
|
2576
|
-
this.protoo
|
|
2769
|
+
this.protoo?.notify("mute", {
|
|
2577
2770
|
device: device
|
|
2578
2771
|
});
|
|
2579
2772
|
const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneMute", {
|
|
@@ -2588,7 +2781,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2588
2781
|
this.resolvePendingDeviceRequest("microphone", true);
|
|
2589
2782
|
this.muted = false;
|
|
2590
2783
|
const device = "microphone";
|
|
2591
|
-
this.protoo
|
|
2784
|
+
this.protoo?.notify("unmute", {
|
|
2592
2785
|
device: device
|
|
2593
2786
|
});
|
|
2594
2787
|
const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneUnmute", {
|
|
@@ -2621,8 +2814,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2621
2814
|
this.audioMedia = undefined;
|
|
2622
2815
|
this.webcamTrack?.stop();
|
|
2623
2816
|
this.webcamTrack = null;
|
|
2624
|
-
this.protooTransport
|
|
2625
|
-
this.protoo
|
|
2817
|
+
this.protooTransport?.close();
|
|
2818
|
+
this.protoo?.close();
|
|
2626
2819
|
this.micProducer?.close();
|
|
2627
2820
|
this.screenshareVideoProducer?.close();
|
|
2628
2821
|
this.webcamProducer?.close();
|
|
@@ -2642,6 +2835,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2642
2835
|
window.dispatchEvent(deprecatedEvent);
|
|
2643
2836
|
}
|
|
2644
2837
|
terminateRoom() {
|
|
2838
|
+
if (!this.protoo) throw new Error("stream client not initiated");
|
|
2645
2839
|
this.protoo.request("terminateRoom");
|
|
2646
2840
|
}
|
|
2647
2841
|
async updateWebcams() {
|
|
@@ -2668,7 +2862,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2668
2862
|
const data = this.pendingDeviceRequest[key];
|
|
2669
2863
|
if (deviceType === data.deviceType) {
|
|
2670
2864
|
delete this.pendingDeviceRequest[key];
|
|
2671
|
-
this.protoo
|
|
2865
|
+
this.protoo?.notify("requestDeviceResult", {
|
|
2672
2866
|
result: Boolean(result),
|
|
2673
2867
|
failure: failure,
|
|
2674
2868
|
...data
|
|
@@ -2691,7 +2885,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2691
2885
|
}
|
|
2692
2886
|
async restartIce(transport) {
|
|
2693
2887
|
$1dedebd5ff3002eb$var$log.log("restartIce", transport.connectionState, transport.closed);
|
|
2694
|
-
if (transport.connectionState === "disconnected" && !transport.closed) try {
|
|
2888
|
+
if (transport.connectionState === "disconnected" && !transport.closed && this.protoo) try {
|
|
2695
2889
|
const iceParameters = await this.protoo.request("restartIce", {
|
|
2696
2890
|
transportId: transport.id
|
|
2697
2891
|
});
|
|
@@ -2961,7 +3155,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
2961
3155
|
async disableVideo() {
|
|
2962
3156
|
if (!this.webcamProducer) return;
|
|
2963
3157
|
this.webcamProducer.close();
|
|
2964
|
-
if (this.protoo
|
|
3158
|
+
if (this.protoo?.connected) await this.protoo.request("closeProducer", {
|
|
2965
3159
|
producerId: this.webcamProducer.id
|
|
2966
3160
|
});
|
|
2967
3161
|
this.webcamProducer = null;
|
|
@@ -3034,7 +3228,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3034
3228
|
async disableScreenshare() {
|
|
3035
3229
|
if (this.screenshareVideoProducer) {
|
|
3036
3230
|
this.screenshareVideoProducer.close();
|
|
3037
|
-
if (this.protoo
|
|
3231
|
+
if (this.protoo?.connected) await this.protoo.request("closeProducer", {
|
|
3038
3232
|
producerId: this.screenshareVideoProducer.id
|
|
3039
3233
|
});
|
|
3040
3234
|
this.screenshareVideoProducer = undefined;
|
|
@@ -3042,7 +3236,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3042
3236
|
this.audioMedia?.removeTrack("screen");
|
|
3043
3237
|
if (this.screenshareAudioProducer) {
|
|
3044
3238
|
this.screenshareAudioProducer.close();
|
|
3045
|
-
if (this.protoo
|
|
3239
|
+
if (this.protoo?.connected) await this.protoo.request("closeProducer", {
|
|
3046
3240
|
producerId: this.screenshareAudioProducer.id
|
|
3047
3241
|
});
|
|
3048
3242
|
this.screenshareAudioProducer = undefined;
|
|
@@ -3095,7 +3289,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3095
3289
|
});
|
|
3096
3290
|
}
|
|
3097
3291
|
async deleteCapture(assetId) {
|
|
3098
|
-
const res = await this.protoo
|
|
3292
|
+
const res = await this.protoo?.request("deleteCapture", {
|
|
3099
3293
|
assetId: assetId
|
|
3100
3294
|
});
|
|
3101
3295
|
return res;
|
|
@@ -3142,7 +3336,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3142
3336
|
try {
|
|
3143
3337
|
const mediaKind = deviceType === "microphone" ? "audio" : "video";
|
|
3144
3338
|
const transport = await this.getTransport(mediaKind, "recv");
|
|
3145
|
-
const data = await this.protoo
|
|
3339
|
+
const data = await this.protoo?.request("consume", {
|
|
3146
3340
|
peerId: peerId,
|
|
3147
3341
|
producerId: producerId,
|
|
3148
3342
|
transportId: transport.id,
|
|
@@ -3189,7 +3383,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3189
3383
|
audioRenderer.setSource(mediaStream);
|
|
3190
3384
|
audioRenderer.play();
|
|
3191
3385
|
}
|
|
3192
|
-
if (consumer.kind === "video") await this.protoo
|
|
3386
|
+
if (consumer.kind === "video") await this.protoo?.request("resumeConsumer", {
|
|
3193
3387
|
consumerId: consumer.id
|
|
3194
3388
|
});
|
|
3195
3389
|
} catch (error) {
|
|
@@ -3211,7 +3405,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3211
3405
|
this.dispatchEvent(event);
|
|
3212
3406
|
}
|
|
3213
3407
|
async setProfile(profile) {
|
|
3214
|
-
const newProfile = await this.protoo
|
|
3408
|
+
const newProfile = await this.protoo?.request("setProfile", profile);
|
|
3409
|
+
this.joinOptions.profile = profile;
|
|
3215
3410
|
this.profile = {
|
|
3216
3411
|
...newProfile
|
|
3217
3412
|
};
|
|
@@ -3225,7 +3420,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3225
3420
|
}
|
|
3226
3421
|
async requestPeerDevice(remotePeerId, deviceType) {
|
|
3227
3422
|
if (!this.permissions.find((permission)=>permission === "request_input")) throw new Error("feature not allowed");
|
|
3228
|
-
return this.protoo
|
|
3423
|
+
return this.protoo?.request("requestPeerDevice", {
|
|
3229
3424
|
remotePeerId: remotePeerId,
|
|
3230
3425
|
deviceType: deviceType
|
|
3231
3426
|
});
|
|
@@ -3235,7 +3430,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3235
3430
|
}
|
|
3236
3431
|
async getCallId() {
|
|
3237
3432
|
try {
|
|
3238
|
-
const { callId: callId } = await this.protoo
|
|
3433
|
+
const { callId: callId } = await this.protoo?.request("getCallId");
|
|
3239
3434
|
return callId;
|
|
3240
3435
|
} catch (err) {
|
|
3241
3436
|
$1dedebd5ff3002eb$var$log.error("getCallId", "Failed to get callId");
|
|
@@ -3273,7 +3468,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3273
3468
|
const messageId = (0, $jQDcL$uuid.v4)();
|
|
3274
3469
|
const chunks = this.getCustomMessageEventChunks(event);
|
|
3275
3470
|
const chunksPromises = chunks.map((chunk, index)=>{
|
|
3276
|
-
return this.protoo
|
|
3471
|
+
return this.protoo?.notify("customMessageToAllPeers", {
|
|
3277
3472
|
messageId: messageId,
|
|
3278
3473
|
chunkIndex: index,
|
|
3279
3474
|
chunk: chunk,
|
|
@@ -3286,7 +3481,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3286
3481
|
const messageId = (0, $jQDcL$uuid.v4)();
|
|
3287
3482
|
const chunks = this.getCustomMessageEventChunks(event);
|
|
3288
3483
|
const chunksPromises = chunks.map((chunk, index)=>{
|
|
3289
|
-
return this.protoo
|
|
3484
|
+
return this.protoo?.notify("customMessageToPeer", {
|
|
3290
3485
|
peerId: peerId,
|
|
3291
3486
|
event: {
|
|
3292
3487
|
messageId: messageId,
|
|
@@ -3397,10 +3592,18 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
|
|
|
3397
3592
|
return this.permissions;
|
|
3398
3593
|
}
|
|
3399
3594
|
async startRecord() {
|
|
3400
|
-
await this.protoo
|
|
3595
|
+
await this.protoo?.request("startRecord");
|
|
3401
3596
|
}
|
|
3402
3597
|
async stopRecord() {
|
|
3403
|
-
await this.protoo
|
|
3598
|
+
await this.protoo?.request("stopRecord");
|
|
3599
|
+
}
|
|
3600
|
+
async getPublicPage(token) {
|
|
3601
|
+
return (await fetch(`${this.config.apiUrl}/public/public-pages/${token}`, {
|
|
3602
|
+
method: "get",
|
|
3603
|
+
headers: {
|
|
3604
|
+
"Content-Type": "application/json"
|
|
3605
|
+
}
|
|
3606
|
+
})).json();
|
|
3404
3607
|
}
|
|
3405
3608
|
}
|
|
3406
3609
|
|
|
@@ -8257,7 +8460,7 @@ var $537dcc6df507dc4a$export$2e2bcd8739ae039 = $537dcc6df507dc4a$var$tooltip;
|
|
|
8257
8460
|
|
|
8258
8461
|
|
|
8259
8462
|
const $88b23a8428e67b66$var$Video = ()=>{
|
|
8260
|
-
const { headless: headless, selfPeerId: selfPeerId, videosContainerRef: videosContainerRef, remoteTilesContainerRef: remoteTilesContainerRef, options: options, muted: selfMuted, profile: profile, orientation: orientation
|
|
8463
|
+
const { headless: headless, selfPeerId: selfPeerId, videosContainerRef: videosContainerRef, remoteTilesContainerRef: remoteTilesContainerRef, options: options, muted: selfMuted, profile: profile, orientation: orientation } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
|
|
8261
8464
|
const [tileSize, setTileSize] = (0, $jQDcL$react.useState)({
|
|
8262
8465
|
width: 0,
|
|
8263
8466
|
height: 0
|
|
@@ -8296,21 +8499,6 @@ const $88b23a8428e67b66$var$Video = ()=>{
|
|
|
8296
8499
|
streams.length,
|
|
8297
8500
|
highlightedTile
|
|
8298
8501
|
]);
|
|
8299
|
-
(0, $jQDcL$react.useEffect)(()=>{
|
|
8300
|
-
if (userInteractionTriggered && !headless) {
|
|
8301
|
-
if (options.controls?.microphone?.enabled) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone().catch((error)=>{
|
|
8302
|
-
console.error("enable microphone", error);
|
|
8303
|
-
});
|
|
8304
|
-
if (options.controls?.camera?.enabled && !options.audioTiles) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo().catch((error)=>{
|
|
8305
|
-
console.error("enable video", error);
|
|
8306
|
-
});
|
|
8307
|
-
}
|
|
8308
|
-
}, [
|
|
8309
|
-
options.controls,
|
|
8310
|
-
options.audioTiles,
|
|
8311
|
-
userInteractionTriggered,
|
|
8312
|
-
headless
|
|
8313
|
-
]);
|
|
8314
8502
|
(0, $jQDcL$react.useEffect)(()=>{
|
|
8315
8503
|
const onNewPeer = (event)=>{
|
|
8316
8504
|
const { peerId: peerId, profile: profile } = event.detail;
|
|
@@ -8784,7 +8972,8 @@ const $a21b2aa064cb6c32$var$ControlBar = ()=>{
|
|
|
8784
8972
|
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).terminateRoom();
|
|
8785
8973
|
};
|
|
8786
8974
|
const onLeaveClick = ()=>{
|
|
8787
|
-
|
|
8975
|
+
const { company: company } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
8976
|
+
if (isAgent && company?.terminate_enabled) setIsLeaveMenuOpen((previousValue)=>!previousValue);
|
|
8788
8977
|
else leaveCall();
|
|
8789
8978
|
};
|
|
8790
8979
|
const onNewWebcamCount = (event)=>{
|
|
@@ -10894,7 +11083,7 @@ const $bbe4b943c376008e$export$3a4deda42b6182b7 = (0, ($parcel$interopDefault($j
|
|
|
10894
11083
|
|
|
10895
11084
|
const $3d1bfd8f074b99b1$var$EndView = ()=>{
|
|
10896
11085
|
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
10897
|
-
const { streamState: streamState, setStreamState: setStreamState } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
|
|
11086
|
+
const { streamState: streamState, setStreamState: setStreamState, options: options } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
|
|
10898
11087
|
const ended = streamState === "ended";
|
|
10899
11088
|
const terminated = streamState === "terminated";
|
|
10900
11089
|
const expired = streamState === "expired";
|
|
@@ -10903,6 +11092,13 @@ const $3d1bfd8f074b99b1$var$EndView = ()=>{
|
|
|
10903
11092
|
try {
|
|
10904
11093
|
setStreamState("loading");
|
|
10905
11094
|
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).init();
|
|
11095
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).joinRoom();
|
|
11096
|
+
if (options.controls?.microphone?.enabled) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone().catch((error)=>{
|
|
11097
|
+
console.error("enable microphone", error);
|
|
11098
|
+
});
|
|
11099
|
+
if (options.controls?.camera?.enabled && !options.audioTiles) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo().catch((error)=>{
|
|
11100
|
+
console.error("enable video", error);
|
|
11101
|
+
});
|
|
10906
11102
|
} catch (e) {
|
|
10907
11103
|
console.error("init error", e);
|
|
10908
11104
|
setStreamState("terminated");
|
|
@@ -13309,10 +13505,12 @@ const $863e583213b323a1$export$6e881e165967cb08 = {
|
|
|
13309
13505
|
};
|
|
13310
13506
|
|
|
13311
13507
|
|
|
13508
|
+
const $52e751d204780518$var$audioLevelThreshold = 20;
|
|
13312
13509
|
function $52e751d204780518$export$c74cd098b7a410cb({ mode: mode = "photo", requestedMedia: requestedMedia = "camera", permissionBlockedModalState: permissionBlockedModalState, captureThumbnail: captureThumbnail }) {
|
|
13313
13510
|
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
13314
13511
|
const [currentMode, setMode] = (0, $jQDcL$react.useState)(mode);
|
|
13315
13512
|
const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
|
|
13513
|
+
const [isSpeaking, setIsSpeaking] = (0, $jQDcL$react.useState)(false);
|
|
13316
13514
|
const [currentRequestedMedia, setRequestedMedia] = (0, $jQDcL$react.useState)(requestedMedia);
|
|
13317
13515
|
const [startRecordTime, setStartRecordTime] = (0, $jQDcL$react.useState)(undefined);
|
|
13318
13516
|
const [timer, setTimer] = (0, $jQDcL$react.useState)(0);
|
|
@@ -13328,6 +13526,8 @@ function $52e751d204780518$export$c74cd098b7a410cb({ mode: mode = "photo", reque
|
|
|
13328
13526
|
const [flow, setFlow] = (0, $jQDcL$react.useState)();
|
|
13329
13527
|
const updateAudioLevel = (0, $jQDcL$react.useCallback)((event)=>{
|
|
13330
13528
|
const { audioLevel: audioLevel } = event.detail;
|
|
13529
|
+
if (audioLevel > $52e751d204780518$var$audioLevelThreshold) setIsSpeaking(true);
|
|
13530
|
+
else setIsSpeaking(false);
|
|
13331
13531
|
if (timer !== 0 && streaming) setAverageAudioLevel((prev)=>((prev || 0) * (Math.floor(timer) - 1) + audioLevel) / timer);
|
|
13332
13532
|
}, [
|
|
13333
13533
|
timer,
|
|
@@ -13421,7 +13621,8 @@ function $52e751d204780518$export$c74cd098b7a410cb({ mode: mode = "photo", reque
|
|
|
13421
13621
|
captureThumbnail: captureThumbnail,
|
|
13422
13622
|
lastRecordingAudioLevel: averageAudioLevel || 0,
|
|
13423
13623
|
flow: flow,
|
|
13424
|
-
setFlow: setFlow
|
|
13624
|
+
setFlow: setFlow,
|
|
13625
|
+
isSpeaking: isSpeaking
|
|
13425
13626
|
};
|
|
13426
13627
|
}
|
|
13427
13628
|
|
|
@@ -14100,7 +14301,7 @@ const $9a3d89191e7070cd$export$53819c0e58f98d49 = (props)=>{
|
|
|
14100
14301
|
if (countdown === undefined) return;
|
|
14101
14302
|
const t = setTimeout(()=>{
|
|
14102
14303
|
if (countdown === 1) props.onFinish();
|
|
14103
|
-
setCountdown(countdown - 1);
|
|
14304
|
+
else setCountdown(countdown - 1);
|
|
14104
14305
|
}, 1000);
|
|
14105
14306
|
return ()=>clearTimeout(t);
|
|
14106
14307
|
}, [
|
|
@@ -14134,7 +14335,7 @@ const $9999b4145d63cb7f$export$f9da3144ae2525a3 = (props)=>{
|
|
|
14134
14335
|
}, {
|
|
14135
14336
|
"bg-[#ff0000]": !isPhoto
|
|
14136
14337
|
}, {
|
|
14137
|
-
"w-[24px] h-[24px] border-0 !rounded-md": isStreaming && !isScreenRecordRequest
|
|
14338
|
+
"!w-[24px] !h-[24px] !border-0 !rounded-md": isStreaming && !isScreenRecordRequest
|
|
14138
14339
|
}, {
|
|
14139
14340
|
"!bg-transparent border-transparent border-b-red-700 border-l-red-700 border-[4px] duration-1000 animate-spin": isScreenRecordRequest
|
|
14140
14341
|
})
|
|
@@ -14145,24 +14346,19 @@ const $9999b4145d63cb7f$export$f9da3144ae2525a3 = (props)=>{
|
|
|
14145
14346
|
|
|
14146
14347
|
|
|
14147
14348
|
|
|
14148
|
-
|
|
14149
14349
|
const $4f0bbf6285c74007$var$browser = (0, ($parcel$interopDefault($jQDcL$bowser))).parse(window.navigator.userAgent);
|
|
14150
14350
|
const $4f0bbf6285c74007$export$11a6fe490bbc4873 = (props)=>{
|
|
14151
14351
|
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
14152
14352
|
const isDesktop = $4f0bbf6285c74007$var$browser.platform.type === "desktop";
|
|
14153
|
-
const [currentMode, setCurrentMode] = (0, $jQDcL$react.useState)(props.defaultSelected);
|
|
14154
14353
|
const onSelectMode = (selected)=>{
|
|
14155
|
-
if (!props.state.streaming)
|
|
14156
|
-
setCurrentMode(selected);
|
|
14157
|
-
props.onSelect(selected);
|
|
14158
|
-
}
|
|
14354
|
+
if (!props.state.streaming) props.onSelect(selected);
|
|
14159
14355
|
};
|
|
14160
14356
|
const tabTriggerClassName = "text-sm grow shrink font-medium text-gray-100 hover:bg-[#292929] data-[state=active]:text-gray-1000 data-[state=active]:font-semibold";
|
|
14161
14357
|
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
14162
14358
|
className: "flex flex-col h-[150px] w-full max-w-[500px] gap-2.5",
|
|
14163
14359
|
children: [
|
|
14164
14360
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Tabs), {
|
|
14165
|
-
value: currentMode,
|
|
14361
|
+
value: props.currentMode,
|
|
14166
14362
|
onValueChange: (val)=>{
|
|
14167
14363
|
onSelectMode(val);
|
|
14168
14364
|
},
|
|
@@ -14179,6 +14375,11 @@ const $4f0bbf6285c74007$export$11a6fe490bbc4873 = (props)=>{
|
|
|
14179
14375
|
value: "video",
|
|
14180
14376
|
children: t("misc.video")
|
|
14181
14377
|
}),
|
|
14378
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TabsTrigger), {
|
|
14379
|
+
className: tabTriggerClassName,
|
|
14380
|
+
value: "audio",
|
|
14381
|
+
children: t("misc.audio")
|
|
14382
|
+
}),
|
|
14182
14383
|
isDesktop && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.TabsTrigger), {
|
|
14183
14384
|
className: tabTriggerClassName,
|
|
14184
14385
|
value: "screen",
|
|
@@ -14218,12 +14419,13 @@ const $4f0bbf6285c74007$export$11a6fe490bbc4873 = (props)=>{
|
|
|
14218
14419
|
|
|
14219
14420
|
|
|
14220
14421
|
|
|
14422
|
+
|
|
14221
14423
|
const $8e2ec13f9d254ce9$export$1cd1efc78cb52ca5 = ({ asset: asset, onClick: onClick, size: size = 60, className: className })=>{
|
|
14222
14424
|
if (!asset) return null;
|
|
14223
14425
|
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
14224
14426
|
className: (0, ($parcel$interopDefault($jQDcL$classnames)))("cursor-pointer relative overflow-hidden rounded-lg", className),
|
|
14225
14427
|
onClick: onClick,
|
|
14226
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
|
|
14428
|
+
children: asset.type !== "audio" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
|
|
14227
14429
|
className: "object-cover",
|
|
14228
14430
|
style: {
|
|
14229
14431
|
width: size,
|
|
@@ -14232,6 +14434,17 @@ const $8e2ec13f9d254ce9$export$1cd1efc78cb52ca5 = ({ asset: asset, onClick: onCl
|
|
|
14232
14434
|
},
|
|
14233
14435
|
src: asset.thumbnailURL || asset.objectUrl,
|
|
14234
14436
|
alt: "last shot"
|
|
14437
|
+
}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
14438
|
+
style: {
|
|
14439
|
+
width: size,
|
|
14440
|
+
height: size,
|
|
14441
|
+
maxWidth: size
|
|
14442
|
+
},
|
|
14443
|
+
className: "flex items-center justify-center w-full h-full bg-gray-1000",
|
|
14444
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Recording2Icon), {
|
|
14445
|
+
size: 24,
|
|
14446
|
+
className: "text-white"
|
|
14447
|
+
})
|
|
14235
14448
|
})
|
|
14236
14449
|
});
|
|
14237
14450
|
};
|
|
@@ -14365,7 +14578,6 @@ const $47755bb1d707f6f6$export$788cb893d96254c8 = ({ state: state, mode: mode, p
|
|
|
14365
14578
|
const { orientation: orientation } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
|
|
14366
14579
|
const device = orientation === "landscape" ? "desktop" : "mobile";
|
|
14367
14580
|
const videoLength = permissionsState === "granted" ? "short" : "full";
|
|
14368
|
-
const title = mode === "photo" ? t("recorder.photoInstructionsTitle") : t("recorder.videoInstructionsTitle");
|
|
14369
14581
|
const instructionPhoto = [
|
|
14370
14582
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
|
|
14371
14583
|
i18nKey: "recorder.instructions.allowAccessOnPrompt",
|
|
@@ -14406,7 +14618,38 @@ const $47755bb1d707f6f6$export$788cb893d96254c8 = ({ state: state, mode: mode, p
|
|
|
14406
14618
|
}
|
|
14407
14619
|
})
|
|
14408
14620
|
];
|
|
14409
|
-
const
|
|
14621
|
+
const instructionsAudio = [
|
|
14622
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
|
|
14623
|
+
i18nKey: "recorder.instructions.tapAudioButton",
|
|
14624
|
+
components: {
|
|
14625
|
+
bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
|
|
14626
|
+
}
|
|
14627
|
+
}),
|
|
14628
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
|
|
14629
|
+
i18nKey: "recorder.instructions.speakClearly",
|
|
14630
|
+
components: {
|
|
14631
|
+
bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
|
|
14632
|
+
}
|
|
14633
|
+
}),
|
|
14634
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
|
|
14635
|
+
i18nKey: "recorder.instructions.reviewAndSendAudios",
|
|
14636
|
+
components: {
|
|
14637
|
+
bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($47755bb1d707f6f6$var$Bold, {})
|
|
14638
|
+
}
|
|
14639
|
+
})
|
|
14640
|
+
];
|
|
14641
|
+
let title;
|
|
14642
|
+
let instructions;
|
|
14643
|
+
if (mode === "photo") {
|
|
14644
|
+
title = t("recorder.photoInstructionsTitle");
|
|
14645
|
+
instructions = instructionPhoto;
|
|
14646
|
+
} else if (mode === "audio") {
|
|
14647
|
+
title = t("recorder.audioInstructionsTitle");
|
|
14648
|
+
instructions = instructionsAudio;
|
|
14649
|
+
} else {
|
|
14650
|
+
title = t("recorder.videoInstructionsTitle");
|
|
14651
|
+
instructions = instructionVideo;
|
|
14652
|
+
}
|
|
14410
14653
|
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialog), {
|
|
14411
14654
|
open: state.isOpen,
|
|
14412
14655
|
onOpenChange: (open)=>{
|
|
@@ -14418,13 +14661,19 @@ const $47755bb1d707f6f6$export$788cb893d96254c8 = ({ state: state, mode: mode, p
|
|
|
14418
14661
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
14419
14662
|
className: "relative rounded-xl",
|
|
14420
14663
|
children: [
|
|
14421
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
|
|
14664
|
+
mode !== "audio" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
|
|
14422
14665
|
className: "w-full rounded-[inherit]",
|
|
14423
14666
|
src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${mode}-${videoLength}.mp4`,
|
|
14424
14667
|
playsInline: true,
|
|
14425
14668
|
autoPlay: true,
|
|
14426
14669
|
muted: true,
|
|
14427
14670
|
loop: true
|
|
14671
|
+
}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
14672
|
+
className: "flex items-center justify-center w-full h-[200px] rounded-[inherit] bg-blue-100 border border-blue-200",
|
|
14673
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Recording2Icon), {
|
|
14674
|
+
size: 64,
|
|
14675
|
+
className: "text-blue-700"
|
|
14676
|
+
})
|
|
14428
14677
|
}),
|
|
14429
14678
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
14430
14679
|
className: "absolute inset-0 ring-2 ring-inset ring-white/20 rounded-[inherit]"
|
|
@@ -14767,8 +15016,9 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14767
15016
|
const skipOnboarding = options.recorder?.skipOnboarding;
|
|
14768
15017
|
const getUserMediaMutation = (0, $f341dd104b321776$export$d791e41b9a4de1f2)({
|
|
14769
15018
|
audio: true,
|
|
14770
|
-
video:
|
|
15019
|
+
video: recorderState.mode !== "audio"
|
|
14771
15020
|
});
|
|
15021
|
+
const [isMediaLoading, setMediaLoading] = (0, $jQDcL$react.useState)(true);
|
|
14772
15022
|
const [countdownVisible, setCountdownVisible] = (0, $jQDcL$react.useState)(false);
|
|
14773
15023
|
const videoElementRef = (0, $jQDcL$react.useRef)(null);
|
|
14774
15024
|
const isDesktop = $674454a6d2a40e95$var$browser.platform.type === "desktop";
|
|
@@ -14777,6 +15027,7 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14777
15027
|
});
|
|
14778
15028
|
const [isInstructionVideoDisplayed, setInstructionVideoDisplayed] = (0, $jQDcL$react.useState)(skipOnboarding);
|
|
14779
15029
|
const [isInstructionPhotoDisplayed, setInstructionPhotoDisplayed] = (0, $jQDcL$react.useState)(skipOnboarding);
|
|
15030
|
+
const [isInstructionAudioDisplayed, setInstructionAudioDisplayed] = (0, $jQDcL$react.useState)(skipOnboarding);
|
|
14780
15031
|
const qrCodeModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
|
|
14781
15032
|
defaultOpen: isDesktop
|
|
14782
15033
|
});
|
|
@@ -14789,7 +15040,8 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14789
15040
|
dismissToast();
|
|
14790
15041
|
recorderState.setStreaming(false);
|
|
14791
15042
|
}, [
|
|
14792
|
-
recorderState
|
|
15043
|
+
recorderState,
|
|
15044
|
+
dismissToast
|
|
14793
15045
|
]);
|
|
14794
15046
|
const onPhotoCapture = async (videoElement)=>{
|
|
14795
15047
|
const timestamp = Date.now();
|
|
@@ -14814,11 +15066,11 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14814
15066
|
onSettled: ()=>undefined,
|
|
14815
15067
|
onSuccess: async ()=>{
|
|
14816
15068
|
instructionModalState.close();
|
|
14817
|
-
const { deviceState: deviceState } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
14818
|
-
getUserMediaMutation.reset();
|
|
14819
15069
|
try {
|
|
15070
|
+
const { deviceState: deviceState } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
15071
|
+
getUserMediaMutation.reset();
|
|
14820
15072
|
if (!deviceState.microphone.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
|
|
14821
|
-
if (!deviceState.camera.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
|
|
15073
|
+
if (!deviceState.camera.enabled && recorderState.mode !== "audio") await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
|
|
14822
15074
|
resolution: "vga",
|
|
14823
15075
|
frameRate: 20,
|
|
14824
15076
|
facingMode: "environment"
|
|
@@ -14826,11 +15078,12 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14826
15078
|
} catch (e) {
|
|
14827
15079
|
console.error("failed enable media", e);
|
|
14828
15080
|
}
|
|
15081
|
+
setMediaLoading(false);
|
|
14829
15082
|
}
|
|
14830
15083
|
}), [
|
|
14831
15084
|
getUserMediaMutation,
|
|
14832
15085
|
instructionModalState,
|
|
14833
|
-
recorderState
|
|
15086
|
+
recorderState
|
|
14834
15087
|
]);
|
|
14835
15088
|
(0, $jQDcL$react.useEffect)(()=>{
|
|
14836
15089
|
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("recordStopped", exitStreaming);
|
|
@@ -14848,7 +15101,9 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14848
15101
|
isDesktop,
|
|
14849
15102
|
getUserMediaMutationOptions
|
|
14850
15103
|
]);
|
|
14851
|
-
const onSwitchModalClick = isAgent ? ()=>
|
|
15104
|
+
const onSwitchModalClick = isAgent ? ()=>{
|
|
15105
|
+
getUserMediaMutation.mutate(undefined, getUserMediaMutationOptions);
|
|
15106
|
+
} : instructionModalState.open;
|
|
14852
15107
|
const showReminderToast = ()=>{
|
|
14853
15108
|
toast({
|
|
14854
15109
|
title: t("recorder.audioLevelToast.rememberSpeaking"),
|
|
@@ -14915,7 +15170,7 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14915
15170
|
dismissToast();
|
|
14916
15171
|
recorderState.setStartRecordTime(Date.now());
|
|
14917
15172
|
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).startRecord().then(()=>{
|
|
14918
|
-
if (videoElementRef.current) recorderState.captureThumbnail(videoElementRef.current);
|
|
15173
|
+
if (videoElementRef.current && recorderState.mode !== "audio") recorderState.captureThumbnail(videoElementRef.current);
|
|
14919
15174
|
});
|
|
14920
15175
|
}
|
|
14921
15176
|
}),
|
|
@@ -14928,7 +15183,7 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14928
15183
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
14929
15184
|
className: "relative w-full h-full",
|
|
14930
15185
|
children: [
|
|
14931
|
-
(recorderState.mode === "video" || recorderState.streaming) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
15186
|
+
(recorderState.mode === "video" || recorderState.mode === "audio" || recorderState.streaming) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
14932
15187
|
className: "absolute flex gap-1 transition-all items-center z-10 top-2 left-1/2 -translate-x-1/2 text-white text-center bg-gray-1000 text-md rounded-lg font-medium py-2.5 pr-3.5 pl-2.5",
|
|
14933
15188
|
children: [
|
|
14934
15189
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$lottiefilesreactlottieplayer.Player), {
|
|
@@ -14943,7 +15198,27 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14943
15198
|
})
|
|
14944
15199
|
]
|
|
14945
15200
|
}),
|
|
14946
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)(
|
|
15201
|
+
recorderState.mode === "audio" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
15202
|
+
className: "flex items-center justify-center w-full h-full object-cover rounded-[8px] bg-[#1C1C1C] border-2 border-[#292929]",
|
|
15203
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
15204
|
+
className: "flex items-center justify-center w-[40px] h-[40px]",
|
|
15205
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a23856e34e9e346d$export$a7844d10127ab172), {
|
|
15206
|
+
size: 40,
|
|
15207
|
+
backgroundClassName: (0, ($parcel$interopDefault($jQDcL$classnames)))({
|
|
15208
|
+
"text-blue-700": recorderState.isSpeaking,
|
|
15209
|
+
"text-gray-800": !recorderState.isSpeaking
|
|
15210
|
+
}),
|
|
15211
|
+
icon: recorderState.isSpeaking ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$lottiefilesreactlottieplayer.Player), {
|
|
15212
|
+
src: (0, $863e583213b323a1$export$6e881e165967cb08),
|
|
15213
|
+
autoplay: recorderState.isSpeaking,
|
|
15214
|
+
loop: true,
|
|
15215
|
+
className: "w-10 h-10"
|
|
15216
|
+
}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DotsHorizontalIcon), {
|
|
15217
|
+
size: 30
|
|
15218
|
+
})
|
|
15219
|
+
})
|
|
15220
|
+
})
|
|
15221
|
+
}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b758582ffbe79e9a$export$287f8fcc69caf433), {
|
|
14947
15222
|
ref: videoElementRef
|
|
14948
15223
|
}),
|
|
14949
15224
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Toaster), {
|
|
@@ -14959,22 +15234,41 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14959
15234
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
14960
15235
|
className: "z-10 flex justify-center",
|
|
14961
15236
|
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4f0bbf6285c74007$export$11a6fe490bbc4873), {
|
|
14962
|
-
|
|
15237
|
+
currentMode: recorderState.mode,
|
|
14963
15238
|
state: recorderState,
|
|
14964
15239
|
onSelect: async (mode)=>{
|
|
14965
|
-
if (
|
|
14966
|
-
|
|
14967
|
-
|
|
14968
|
-
|
|
14969
|
-
|
|
14970
|
-
|
|
14971
|
-
|
|
14972
|
-
|
|
14973
|
-
|
|
14974
|
-
|
|
14975
|
-
|
|
14976
|
-
|
|
14977
|
-
|
|
15240
|
+
if (isMediaLoading) return;
|
|
15241
|
+
setMediaLoading(true);
|
|
15242
|
+
try {
|
|
15243
|
+
if (mode === "screen") {
|
|
15244
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableVideo();
|
|
15245
|
+
recorderState.setRequestedMedia(mode);
|
|
15246
|
+
return;
|
|
15247
|
+
}
|
|
15248
|
+
recorderState.setMode(mode);
|
|
15249
|
+
if (mode === "audio") {
|
|
15250
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableVideo();
|
|
15251
|
+
recorderState.setRequestedMedia("microphone");
|
|
15252
|
+
}
|
|
15253
|
+
if (mode === "photo" && !isInstructionPhotoDisplayed && !isAgent) {
|
|
15254
|
+
setInstructionPhotoDisplayed(true);
|
|
15255
|
+
instructionModalState.open();
|
|
15256
|
+
}
|
|
15257
|
+
if (mode === "video" && !isInstructionVideoDisplayed && !isAgent) {
|
|
15258
|
+
setInstructionVideoDisplayed(true);
|
|
15259
|
+
instructionModalState.open();
|
|
15260
|
+
}
|
|
15261
|
+
if (mode === "audio" && !isInstructionAudioDisplayed && !isAgent) {
|
|
15262
|
+
setInstructionAudioDisplayed(true);
|
|
15263
|
+
instructionModalState.open();
|
|
15264
|
+
}
|
|
15265
|
+
const { deviceState: deviceState } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
15266
|
+
if ((mode === "photo" || mode === "video") && !deviceState.camera.enabled) {
|
|
15267
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo();
|
|
15268
|
+
recorderState.setRequestedMedia("camera");
|
|
15269
|
+
}
|
|
15270
|
+
} catch (error) {} finally{
|
|
15271
|
+
setMediaLoading(false);
|
|
14978
15272
|
}
|
|
14979
15273
|
},
|
|
14980
15274
|
thumbnail: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8e2ec13f9d254ce9$export$1cd1efc78cb52ca5), {
|
|
@@ -14982,9 +15276,9 @@ const $674454a6d2a40e95$export$5b8e641151f8011d = ({ recorderState: recorderStat
|
|
|
14982
15276
|
asset: recorderState.assets[recorderState.assets.length - 1],
|
|
14983
15277
|
onClick: recorderState.assetsPopupState.open
|
|
14984
15278
|
}),
|
|
14985
|
-
onSwitch: ()=>{
|
|
15279
|
+
onSwitch: recorderState.mode !== "audio" ? ()=>{
|
|
14986
15280
|
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).rotateVideo();
|
|
14987
|
-
},
|
|
15281
|
+
} : undefined,
|
|
14988
15282
|
onCapturePress: ()=>{
|
|
14989
15283
|
if (recorderState.mode === "photo" && videoElementRef.current) {
|
|
14990
15284
|
onPhotoCapture(videoElementRef.current);
|
|
@@ -15188,7 +15482,7 @@ const $1be61d90bb5f5865$export$2d78fbe400238869 = ({ recorderState: recorderStat
|
|
|
15188
15482
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
15189
15483
|
className: "z-10 flex justify-center",
|
|
15190
15484
|
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4f0bbf6285c74007$export$11a6fe490bbc4873), {
|
|
15191
|
-
|
|
15485
|
+
currentMode: "screen",
|
|
15192
15486
|
state: recorderState,
|
|
15193
15487
|
screenRecordingState: state,
|
|
15194
15488
|
onSelect: async (mode)=>{
|
|
@@ -15198,6 +15492,11 @@ const $1be61d90bb5f5865$export$2d78fbe400238869 = ({ recorderState: recorderStat
|
|
|
15198
15492
|
recorderState.setRequestedMedia("camera");
|
|
15199
15493
|
return;
|
|
15200
15494
|
}
|
|
15495
|
+
if (mode === "audio") {
|
|
15496
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).disableScreenshare();
|
|
15497
|
+
recorderState.setMode(mode);
|
|
15498
|
+
recorderState.setRequestedMedia("microphone");
|
|
15499
|
+
}
|
|
15201
15500
|
},
|
|
15202
15501
|
thumbnail: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8e2ec13f9d254ce9$export$1cd1efc78cb52ca5), {
|
|
15203
15502
|
size: 48,
|
|
@@ -15378,6 +15677,11 @@ const $73f0764a988d9270$export$f56b3b5841ad32ae = ({ asset: asset, state: state
|
|
|
15378
15677
|
autoPlay: true,
|
|
15379
15678
|
controls: true,
|
|
15380
15679
|
className: "flex-1 rounded-[10px] min-w-full max-h-[90%] max-w-[90%] pb-[9px]"
|
|
15680
|
+
}),
|
|
15681
|
+
asset.type === "audio" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("audio", {
|
|
15682
|
+
src: asset.objectUrl,
|
|
15683
|
+
controls: true,
|
|
15684
|
+
className: "text-center w-full sm:w-1/2"
|
|
15381
15685
|
})
|
|
15382
15686
|
]
|
|
15383
15687
|
}),
|
|
@@ -15453,6 +15757,10 @@ const $c18ef86e21d607bc$export$c9169049516d8bcf = ({ asset: asset, index: index,
|
|
|
15453
15757
|
const confirmRemovalModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
|
|
15454
15758
|
const previewAssetModalProps = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
|
|
15455
15759
|
const assetMediaLength = asset.timestamp && asset.startRecordingTimestamp && (asset.timestamp - asset.startRecordingTimestamp) / 1000;
|
|
15760
|
+
let assetTypeDisplayName;
|
|
15761
|
+
if (asset.type === "photo") assetTypeDisplayName = t("misc.screenshot");
|
|
15762
|
+
else if (asset.type === "audio") assetTypeDisplayName = t("misc.audio");
|
|
15763
|
+
else assetTypeDisplayName = t("misc.video");
|
|
15456
15764
|
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
15457
15765
|
className: "flex flex-col w-full gap-2",
|
|
15458
15766
|
children: [
|
|
@@ -15482,11 +15790,10 @@ const $c18ef86e21d607bc$export$c9169049516d8bcf = ({ asset: asset, index: index,
|
|
|
15482
15790
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
|
|
15483
15791
|
className: "w-full font-medium truncate text-md text-gray-1000",
|
|
15484
15792
|
children: [
|
|
15485
|
-
|
|
15793
|
+
assetTypeDisplayName,
|
|
15486
15794
|
" ",
|
|
15487
15795
|
index + 1,
|
|
15488
|
-
" \xb7",
|
|
15489
|
-
" ",
|
|
15796
|
+
" \xb7 ",
|
|
15490
15797
|
(0, $1b7ebf084d46efa9$export$3ae94a2503e890a1)(new Date(asset.timestamp))
|
|
15491
15798
|
]
|
|
15492
15799
|
}),
|
|
@@ -15806,7 +16113,7 @@ const $b939cb69b1cbeb59$export$336a011955157f9a = ()=>{
|
|
|
15806
16113
|
recorderState.setAssets([
|
|
15807
16114
|
...recorderState.assets,
|
|
15808
16115
|
{
|
|
15809
|
-
type:
|
|
16116
|
+
type: recorderState.mode,
|
|
15810
16117
|
timestamp: Date.now(),
|
|
15811
16118
|
startRecordingTimestamp: recorderState.startRecordTime,
|
|
15812
16119
|
objectUrl: url,
|
|
@@ -15858,7 +16165,7 @@ const $b939cb69b1cbeb59$export$336a011955157f9a = ()=>{
|
|
|
15858
16165
|
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48ac80173d63a751$export$aa00db7a33d4c484), {
|
|
15859
16166
|
className: "shrink-0"
|
|
15860
16167
|
}),
|
|
15861
|
-
recorderState.requestedMedia === "camera" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $674454a6d2a40e95$export$5b8e641151f8011d), {
|
|
16168
|
+
(recorderState.requestedMedia === "camera" || recorderState.requestedMedia === "microphone") && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $674454a6d2a40e95$export$5b8e641151f8011d), {
|
|
15862
16169
|
recorderState: recorderState
|
|
15863
16170
|
}),
|
|
15864
16171
|
recorderState.requestedMedia === "screen" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1be61d90bb5f5865$export$2d78fbe400238869), {
|
|
@@ -15940,753 +16247,1258 @@ const $7ce296d839195d38$export$669f6ea7d267feaf = ()=>{
|
|
|
15940
16247
|
|
|
15941
16248
|
|
|
15942
16249
|
|
|
15943
|
-
|
|
15944
|
-
|
|
15945
|
-
|
|
15946
|
-
|
|
15947
|
-
|
|
16250
|
+
|
|
16251
|
+
|
|
16252
|
+
|
|
16253
|
+
|
|
16254
|
+
|
|
16255
|
+
|
|
16256
|
+
|
|
16257
|
+
|
|
16258
|
+
|
|
16259
|
+
const $d2c20674130d0e96$export$9ea2b4f70e201d7f = ()=>{
|
|
16260
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
|
|
16261
|
+
width: "112",
|
|
16262
|
+
height: "24",
|
|
16263
|
+
viewBox: "0 0 635 136",
|
|
16264
|
+
fill: "none",
|
|
16265
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16266
|
+
children: [
|
|
16267
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16268
|
+
fillRule: "evenodd",
|
|
16269
|
+
clipRule: "evenodd",
|
|
16270
|
+
d: "M0 68C0 16.943 10.943 6 62 6C113.057 6 124 16.943 124 68C124 119.057 113.057 130 62 130C10.943 130 0 119.057 0 68ZM75.3269 97.0277C75.3269 100.889 78.3163 104.12 81.7719 102.998C85.0672 101.929 88.0982 100.045 90.5849 97.4664C94.6315 93.2704 96.9049 87.5796 96.9049 81.6457C96.9049 75.7117 94.6315 70.0209 90.5849 65.825C88.0982 63.2466 85.0672 61.3626 81.7719 60.2931C78.3163 59.1716 75.3269 62.4022 75.3269 66.2636V97.0277ZM53.9744 39.5401C52.8529 36.0845 56.0835 33.0951 59.945 33.0951L90.709 33.0951C94.5705 33.0951 97.801 36.0845 96.6796 39.5401C95.6101 42.8354 93.726 45.8665 91.1477 48.3531C86.9518 52.3998 81.2609 54.6731 75.327 54.6731C69.3931 54.6731 63.7022 52.3998 59.5063 48.3531C56.928 45.8665 55.0439 42.8354 53.9744 39.5401ZM48.3543 39.2911C48.3543 35.4297 45.3649 32.1991 41.9093 33.3206C38.614 34.3901 35.583 36.2741 33.0963 38.8524C29.0497 43.0484 26.7763 48.7392 26.7763 54.6731C26.7763 60.6071 29.0497 66.2979 33.0963 70.4938C35.583 73.0722 38.614 74.9562 41.9093 76.0257C45.3649 77.1472 48.3543 73.9166 48.3543 70.0552V39.2911ZM69.7073 96.7787C70.8288 100.234 67.5982 103.224 63.7368 103.224H32.9727C29.1113 103.224 25.8807 100.234 27.0022 96.7787C28.0717 93.4834 29.9557 90.4523 32.5341 87.9657C36.73 83.919 42.4208 81.6456 48.3548 81.6456C54.2887 81.6456 59.9795 83.919 64.1754 87.9657C66.7538 90.4523 68.6378 93.4834 69.7073 96.7787Z",
|
|
16271
|
+
fill: "black"
|
|
16272
|
+
}),
|
|
16273
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16274
|
+
d: "M206.518 27C206.845 27.0453 207.171 27.113 207.501 27.1324C212.045 27.4052 216.502 28.0998 220.792 29.7028C225.535 31.4757 229.663 34.2131 233.367 37.6249C233.979 38.1885 234.446 38.8579 234.581 39.6972C234.798 41.0461 234.356 42.1574 233.281 42.9974C232.885 43.307 232.451 43.5661 232.032 43.8454C230.117 45.123 228.203 46.4006 226.286 47.6747C225.622 48.1152 224.928 48.4981 224.116 48.5751C222.878 48.6932 221.876 48.1901 221.014 47.3479C220.551 46.8959 220.105 46.4244 219.623 45.994C216.846 43.5128 213.563 42.0739 209.93 41.4182C206.383 40.7783 202.822 40.7711 199.266 41.3851C196.893 41.7947 194.76 42.7376 193.003 44.3946C191.123 46.1681 190.424 48.3902 190.872 50.9296C191.135 52.4174 192.017 53.5432 193.216 54.43C194.948 55.7105 196.86 56.6685 198.886 57.3502C201.904 58.3665 204.952 59.3001 208.005 60.2085C211.679 61.3018 215.384 62.2894 219.052 63.4022C222.526 64.456 225.848 65.8797 228.946 67.7973C234.361 71.1486 237.476 76.085 238.807 82.209C239.311 84.5289 239.156 86.8862 238.758 89.2169C238.144 92.813 236.835 96.1385 234.691 99.1004C232.876 101.608 230.486 103.479 227.849 105.06C224.724 106.934 221.329 108.058 217.764 108.708C212.948 109.584 208.092 109.717 203.215 109.475C199.469 109.288 195.765 108.821 192.137 107.851C184.81 105.892 178.77 101.954 174.036 96.0276C173.558 95.4295 173.13 94.7889 172.713 94.1468C171.418 92.1566 171.979 90.0605 173.66 88.8059C175.755 87.2433 177.841 85.6691 179.934 84.1035C181.163 83.1836 182.722 83.1419 183.946 84.0675C184.434 84.4361 184.895 84.8982 185.223 85.4114C188.558 90.6378 193.372 93.6933 199.341 95.0185C203.857 96.0212 208.418 96.1824 212.993 95.4518C215.302 95.0833 217.514 94.3843 219.58 93.2636C222.2 91.8435 223.53 89.6517 223.545 86.6667C223.549 85.8008 223.491 84.945 223.242 84.1071C222.899 82.9497 222.282 81.9729 221.371 81.1804C220.109 80.0835 218.656 79.3025 217.143 78.6187C214.886 77.5987 212.515 76.9106 210.149 76.2066C205.304 74.7649 200.448 73.3606 195.615 71.8807C192.078 70.7981 188.66 69.4096 185.44 67.5691C183.539 66.4815 181.732 65.2557 180.221 63.6563C177.597 60.8793 176.022 57.5567 175.292 53.8304C174.445 49.5102 175.359 45.4627 177.236 41.56C179.227 37.4183 182.292 34.2685 186.082 31.7492C190.023 29.1306 194.375 27.7248 199.061 27.2663C199.821 27.1922 200.578 27.0893 201.337 27C203.063 27 204.791 27 206.518 27Z",
|
|
16275
|
+
fill: "black"
|
|
16276
|
+
}),
|
|
16277
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16278
|
+
d: "M374.475 130.579C374.253 130.503 374.033 130.423 373.809 130.353C372.295 129.882 371.373 128.703 371.288 127.122C371.274 126.859 371.277 126.595 371.277 126.331C371.277 102.357 371.277 78.3833 371.281 54.4091C371.281 53.9319 371.277 53.4417 371.376 52.9789C371.721 51.3557 373.042 50.2595 374.867 50.2077C377.144 50.1429 379.425 50.1465 381.702 50.2062C383.449 50.2523 384.718 51.3342 385.202 53.0098C385.235 53.1243 385.266 53.2395 385.314 53.4129C385.488 53.3086 385.649 53.2301 385.791 53.1257C389.096 50.6748 392.837 49.3885 396.905 48.9955C400.535 48.645 404.137 48.8523 407.702 49.629C412.512 50.6763 416.445 53.1682 419.705 56.8219C422.629 60.0998 424.482 63.9039 425.558 68.1342C426.623 72.3191 427.173 76.5594 426.983 80.876C426.767 85.7691 425.911 90.5464 423.994 95.0775C422.276 99.1379 419.54 102.447 416.085 105.153C413.546 107.142 410.608 108.304 407.474 108.949C403.425 109.783 399.345 109.974 395.248 109.305C391.834 108.747 388.697 107.508 385.895 105.459C385.779 105.374 385.663 105.289 385.541 105.212C385.506 105.19 385.452 105.194 385.302 105.168V105.933C385.302 112.646 385.302 119.359 385.302 126.072C385.302 126.335 385.304 126.6 385.296 126.863C385.239 128.665 384.169 129.993 382.421 130.44C382.31 130.468 382.21 130.531 382.105 130.577H374.477L374.475 130.579ZM398.929 96.8648C399.883 96.7835 400.845 96.7511 401.791 96.6107C405.161 96.1112 407.879 94.5542 409.768 91.6463C410.928 89.8612 411.805 87.9602 412.347 85.903C413.301 82.2781 413.408 78.6101 412.84 74.9211C412.368 71.8462 411.286 69.0022 409.472 66.4499C408.151 64.5913 406.427 63.2698 404.275 62.5356C401.296 61.52 398.255 61.4401 395.193 62.0836C392.092 62.7357 389.731 64.4315 388.122 67.1754C387.157 68.8216 386.444 70.5671 385.992 72.417C385.034 76.3384 384.982 80.2973 385.604 84.2662C386.02 86.9172 386.886 89.4235 388.299 91.7219C389.522 93.7106 391.225 95.1207 393.416 95.9413C395.193 96.6064 397.04 96.8238 398.928 96.8648H398.929Z",
|
|
16279
|
+
fill: "black"
|
|
16280
|
+
}),
|
|
16281
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16282
|
+
d: "M618.999 105.259C618.908 105.548 618.839 105.847 618.721 106.126C618.192 107.382 617.233 108.089 615.89 108.274C615.63 108.31 615.363 108.31 615.1 108.311C612.846 108.314 610.592 108.316 608.339 108.309C607.981 108.307 607.615 108.295 607.266 108.222C605.601 107.872 604.612 106.728 604.476 105.017C604.452 104.707 604.458 104.395 604.458 104.083C604.458 80.213 604.458 56.3432 604.46 32.4741C604.46 32.0911 604.452 31.7024 604.514 31.3274C604.812 29.5207 606.222 28.3324 608.163 28.3072C610.536 28.2762 612.91 28.2993 615.284 28.2993C615.38 28.2993 615.476 28.3014 615.571 28.3108C616.972 28.4425 618 29.1457 618.651 30.378C618.825 30.7084 618.887 31.0978 619 31.4599V105.259H618.999Z",
|
|
16283
|
+
fill: "black"
|
|
16284
|
+
}),
|
|
16285
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16286
|
+
d: "M431.849 68.3522C431.892 62.231 432.759 56.2553 435.069 50.5603C439.901 38.6477 448.667 31.2784 461.139 28.3078C465.836 27.1892 470.617 26.9496 475.432 27.2475C479.791 27.5175 484.045 28.2927 488.122 29.877C495.87 32.8871 501.979 37.8732 506.235 45.0524C506.536 45.5591 506.773 46.1285 506.915 46.7C507.229 47.9625 506.828 49.0494 505.796 49.8153C505.27 50.2047 504.634 50.5092 504.001 50.6783C501.386 51.3772 498.755 52.0186 496.127 52.665C494.323 53.1083 492.697 52.426 491.691 50.7899C490.732 49.2301 489.632 47.7855 488.317 46.5093C485.777 44.0461 482.76 42.4331 479.34 41.5959C474.676 40.4543 469.976 40.396 465.301 41.4743C458.869 42.9578 454.264 46.8454 451.212 52.6059C449.271 56.269 448.256 60.2257 447.838 64.3436C447.385 68.797 447.643 73.2 448.744 77.5425C449.592 80.8896 450.852 84.0653 452.924 86.8624C456.469 91.6498 461.145 94.606 467.077 95.5014C471.473 96.165 475.829 96.0441 480.107 94.7643C486.767 92.7719 491.318 88.5259 493.649 81.9491C493.769 81.6108 493.881 81.2682 494.021 80.9385C494.776 79.1671 496.143 78.3249 498.06 78.489C499.038 78.5725 500.011 78.7223 500.985 78.8482C502.673 79.067 504.359 79.2952 506.046 79.5104C506.768 79.6026 507.462 79.7732 508.08 80.169C509.149 80.8536 509.639 81.839 509.511 83.0979C509.463 83.5701 509.365 84.0523 509.195 84.4943C507.232 89.6221 504.558 94.326 500.813 98.3799C496.418 103.138 491.056 106.292 484.821 107.991C479.752 109.373 474.581 109.763 469.355 109.522C464.681 109.307 460.103 108.522 455.74 106.791C445.169 102.595 438.047 95.0861 434.366 84.3309C433.024 80.4102 432.277 76.3664 432.027 72.2326C431.949 70.9413 431.907 69.6478 431.85 68.355L431.849 68.3522Z",
|
|
16287
|
+
fill: "black"
|
|
16288
|
+
}),
|
|
16289
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16290
|
+
d: "M553.976 102.807C553.473 103.359 553.074 103.877 552.596 104.308C550.117 106.542 547.178 107.898 543.969 108.698C540.381 109.592 536.732 109.829 533.046 109.63C530.618 109.499 528.23 109.157 525.905 108.428C522.631 107.403 519.817 105.632 517.457 103.155C515.258 100.848 514.006 98.038 513.377 94.9587C512.01 88.2668 514.956 80.2001 522.426 76.2174C525.011 74.839 527.767 73.9868 530.639 73.47C534.3 72.8106 537.996 72.4464 541.701 72.1463C544.615 71.9102 547.523 71.5971 550.434 71.3178C550.554 71.3063 550.672 71.2919 550.791 71.2732C551.129 71.2199 551.303 71.0299 551.26 70.6801C551.203 70.205 551.157 69.727 551.07 69.257C550.8 67.7814 550.289 66.3987 549.478 65.1261C548.364 63.377 546.811 62.257 544.776 61.851C541.013 61.1003 537.38 61.471 533.926 63.2035C532.097 64.1206 530.839 65.5961 529.903 67.3805C529.647 67.8671 529.399 68.3681 529.067 68.8014C528.108 70.0531 526.816 70.4886 525.3 70.0934C523.052 69.5075 520.817 68.8647 518.579 68.24C518.326 68.1694 518.079 68.0701 517.839 67.9635C516.206 67.2445 515.189 65.6357 515.947 63.6527C516.331 62.6507 516.794 61.6653 517.339 60.7418C520.395 55.5651 524.915 52.2331 530.605 50.4617C534.609 49.215 538.734 48.8955 542.908 49.102C546.292 49.2698 549.561 49.9485 552.67 51.3111C555.285 52.4563 557.668 53.9657 559.691 55.9926C562.447 58.7531 563.964 62.1332 564.603 65.9474C564.986 68.232 564.917 70.5368 564.948 72.8344C565.025 78.4675 565.048 84.1014 565.105 89.7345C565.119 91.0819 565.325 92.4027 565.72 93.6977C565.974 94.5297 566.469 95.138 567.224 95.5346C567.668 95.7678 568.141 95.9441 568.593 96.1644C569.107 96.4149 569.642 96.6402 570.113 96.9583C571.265 97.7372 571.71 99.1048 571.288 100.446C571.188 100.764 571.052 101.074 570.903 101.373C569.913 103.343 568.924 105.313 567.92 107.275C566.981 109.109 565.454 109.794 563.432 109.335C561.452 108.885 559.576 108.193 557.88 107.053C556.488 106.116 555.337 104.946 554.44 103.526C554.327 103.345 554.209 103.167 553.977 102.807H553.976ZM551.086 83.1563C550.907 83.1563 550.813 83.1483 550.722 83.1577C549.125 83.3233 547.528 83.5068 545.929 83.6536C542.515 83.9668 539.114 84.3763 535.736 84.9737C533.356 85.3948 531.083 86.0844 528.991 87.3318C527.179 88.4122 526.121 89.9878 526.563 92.7655C526.783 94.1483 527.53 95.148 528.771 95.7656C529.284 96.0204 529.822 96.2393 530.369 96.4106C533.743 97.4679 537.149 97.8804 540.629 96.9094C545.107 95.6598 548.267 92.9311 550.003 88.6073C550.613 87.0878 550.947 85.492 551.115 83.8638C551.138 83.6414 551.098 83.4125 551.087 83.1563H551.086Z",
|
|
16291
|
+
fill: "black"
|
|
16292
|
+
}),
|
|
16293
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16294
|
+
d: "M347.494 103.01C346.355 103.946 345.329 104.891 344.203 105.695C341.825 107.393 339.125 108.387 336.28 108.952C331.359 109.932 326.422 109.995 321.49 109.003C318.059 108.312 315.015 106.823 312.332 104.575C309.194 101.947 307.413 98.5412 306.699 94.5751C305.502 87.9256 308.528 80.0878 315.848 76.2038C318.437 74.8304 321.193 73.9825 324.066 73.4671C327.752 72.8056 331.471 72.4421 335.2 72.1412C338.09 71.908 340.974 71.5935 343.861 71.3156C343.908 71.3113 343.957 71.3084 344.004 71.3005C344.637 71.199 344.739 71.0932 344.659 70.4468C344.477 68.9648 344.143 67.5209 343.463 66.1785C343.269 65.7948 343.049 65.4219 342.819 65.057C341.711 63.2971 340.119 62.2289 338.087 61.833C334.396 61.1147 330.832 61.4825 327.434 63.1445C325.573 64.0543 324.277 65.5263 323.328 67.3359C323.117 67.739 322.92 68.1528 322.669 68.53C321.694 69.9984 320.25 70.5231 318.542 70.0517C316.417 69.4658 314.288 68.8914 312.171 68.2817C311.647 68.1305 311.122 67.9196 310.658 67.6382C309.371 66.8587 308.815 65.4939 309.236 64.045C309.468 63.2467 309.805 62.4657 310.191 61.7272C313.017 56.3201 317.448 52.7766 323.135 50.7388C325.792 49.7866 328.559 49.3504 331.369 49.1481C333.792 48.9732 336.21 48.9919 338.621 49.3021C343.972 49.9903 348.754 51.9611 352.738 55.6644C355.404 58.1427 356.988 61.2421 357.773 64.7713C358.166 66.5347 358.305 68.3249 358.322 70.1258C358.383 76.5982 358.439 83.0706 358.492 89.5437C358.503 90.8948 358.707 92.2113 359.057 93.5156C359.324 94.5132 359.913 95.2143 360.828 95.6541C361.238 95.8513 361.675 95.9909 362.078 96.2004C362.649 96.4969 363.256 96.764 363.744 97.1685C364.765 98.0128 365.064 99.1314 364.691 100.408C364.598 100.727 364.462 101.038 364.312 101.337C363.325 103.308 362.328 105.274 361.334 107.241C361.301 107.305 361.269 107.369 361.234 107.433C360.385 108.998 358.971 109.749 357.219 109.414C354.419 108.877 351.829 107.831 349.744 105.818C349.026 105.125 348.453 104.282 347.821 103.502C347.689 103.339 347.587 103.153 347.495 103.012L347.494 103.01ZM344.514 83.1771C344.269 83.1771 344.129 83.1649 343.993 83.1793C342.418 83.3376 340.846 83.5147 339.27 83.658C335.592 83.9934 331.929 84.4317 328.3 85.1321C326.092 85.5582 324.002 86.296 322.097 87.5182C321.022 88.2085 320.25 89.1212 319.986 90.3909C319.794 91.3159 319.813 92.248 320.042 93.1715C320.297 94.2008 320.862 95.0199 321.781 95.5353C322.404 95.8844 323.07 96.181 323.749 96.3991C326.924 97.4183 330.151 97.8581 333.449 97.0533C338.608 95.7937 342.115 92.7007 343.733 87.6032C344.1 86.4457 344.268 85.2235 344.505 84.0265C344.558 83.7623 344.513 83.4787 344.513 83.1764L344.514 83.1771Z",
|
|
16295
|
+
fill: "black"
|
|
16296
|
+
}),
|
|
16297
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16298
|
+
d: "M261.068 54.62C261.364 54.389 261.658 54.1557 261.955 53.9261C264.88 51.6725 268.103 50.0443 271.727 49.2381C273.645 48.8113 275.58 48.7609 277.522 48.9099C282.258 49.2741 286.574 50.8504 290.565 53.4136C293.888 55.5478 295.993 58.553 297.191 62.257C298.023 64.8317 298.386 67.4849 298.468 70.1777C298.517 71.7828 298.494 73.3894 298.494 74.996C298.496 84.7053 298.497 94.4146 298.49 104.123C298.49 104.599 298.47 105.088 298.363 105.548C297.977 107.205 296.733 108.24 295.027 108.293C293.541 108.338 292.053 108.31 290.566 108.312C289.655 108.314 288.744 108.318 287.832 108.31C287.498 108.307 287.157 108.302 286.829 108.243C285.1 107.929 284.054 106.736 283.943 104.971C283.924 104.66 283.929 104.348 283.929 104.037C283.929 94.0641 283.937 84.0913 283.923 74.1178C283.92 71.9419 283.536 69.8271 282.653 67.8211C282.066 66.4866 281.234 65.3226 280.166 64.3315C278.756 63.0222 277.067 62.3463 275.158 62.2506C271.579 62.0713 268.518 63.3547 265.95 65.7668C263.29 68.2659 261.803 71.4143 261.211 75.0003C261.007 76.2326 260.916 77.4692 260.919 78.7202C260.932 87.1828 260.927 95.6455 260.921 104.108C260.921 104.537 260.914 104.976 260.83 105.394C260.475 107.159 259.198 108.25 257.402 108.3C256.084 108.337 254.764 108.312 253.445 108.313C252.366 108.314 251.286 108.322 250.207 108.308C249.826 108.303 249.436 108.283 249.066 108.198C247.443 107.824 246.514 106.727 246.381 105.063C246.358 104.776 246.36 104.487 246.36 104.2C246.36 87.5866 246.36 70.973 246.36 54.3594C246.36 54.2637 246.363 54.1673 246.36 54.0715C246.271 51.6624 247.99 50.2041 250.219 50.189C252.137 50.176 254.056 50.1789 255.975 50.189C256.596 50.1926 257.227 50.1825 257.837 50.2804C259.629 50.5683 260.852 51.9992 260.921 53.8182C260.93 54.0564 260.922 54.2947 260.922 54.5329L261.068 54.62H261.068Z",
|
|
16299
|
+
fill: "black"
|
|
16300
|
+
}),
|
|
16301
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16302
|
+
d: "M577.855 68.286C577.855 56.3698 577.855 44.4543 577.858 32.5381C577.858 32.1789 577.852 31.8154 577.904 31.4627C578.178 29.6244 579.501 28.3626 581.362 28.3187C583.88 28.2597 586.4 28.2589 588.917 28.3208C590.809 28.3676 592.243 29.8173 592.411 31.6952C592.442 32.0285 592.445 32.3654 592.445 32.7008C592.446 56.4368 592.447 80.1727 592.442 103.908C592.442 104.433 592.434 104.97 592.333 105.482C592.01 107.11 590.721 108.225 589.041 108.287C587.579 108.341 586.115 108.309 584.652 108.312C583.692 108.314 582.733 108.319 581.773 108.308C581.415 108.304 581.049 108.297 580.7 108.227C578.971 107.878 577.979 106.678 577.863 104.824C577.847 104.562 577.856 104.297 577.856 104.033C577.856 92.117 577.856 80.2015 577.856 68.2853L577.855 68.286Z",
|
|
16303
|
+
fill: "black"
|
|
16304
|
+
})
|
|
16305
|
+
]
|
|
16306
|
+
});
|
|
16307
|
+
};
|
|
16308
|
+
|
|
16309
|
+
|
|
16310
|
+
|
|
16311
|
+
|
|
16312
|
+
|
|
16313
|
+
|
|
16314
|
+
|
|
16315
|
+
const $4b42d15ba6792d99$export$8d6498a96ae0e73f = ({ className: className, type: type, state: state, onClick: onClick })=>{
|
|
15948
16316
|
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
15949
|
-
const
|
|
15950
|
-
const
|
|
15951
|
-
const
|
|
15952
|
-
|
|
15953
|
-
|
|
15954
|
-
|
|
15955
|
-
|
|
15956
|
-
|
|
15957
|
-
|
|
15958
|
-
|
|
15959
|
-
|
|
15960
|
-
|
|
15961
|
-
|
|
15962
|
-
|
|
15963
|
-
|
|
15964
|
-
|
|
15965
|
-
|
|
15966
|
-
|
|
15967
|
-
|
|
15968
|
-
|
|
15969
|
-
|
|
15970
|
-
|
|
15971
|
-
|
|
15972
|
-
|
|
16317
|
+
const iconEl = type === "camera" ? state === "on" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderIcon), {}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderOffIcon), {}) : state === "on" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Microphone1Icon), {}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.MicrophoneOff1Icon), {});
|
|
16318
|
+
const mediaLabel = type === "camera" ? t("greeting.cameraIs") : t("greeting.microphoneIs");
|
|
16319
|
+
const statusLabel = state === "on" ? t("greeting.on") : t("greeting.off");
|
|
16320
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16321
|
+
onClick: onClick,
|
|
16322
|
+
className: (0, ($parcel$interopDefault($jQDcL$classnames)))("cursor-pointer py-1 px-2 border bg-white border-gray-200 flex justify-center items-center rounded-md gap-2", {
|
|
16323
|
+
"border-blue-700 text-blue-700 bg-blue-100": state === "on"
|
|
16324
|
+
}, {
|
|
16325
|
+
"text-red-700": state === "blocked"
|
|
16326
|
+
}, className),
|
|
16327
|
+
children: [
|
|
16328
|
+
/*#__PURE__*/ (0, $jQDcL$react.cloneElement)(iconEl, {
|
|
16329
|
+
duotone: true,
|
|
16330
|
+
size: 16,
|
|
16331
|
+
className: (0, ($parcel$interopDefault($jQDcL$classnames)))({
|
|
16332
|
+
"text-blue-700": state === "on"
|
|
16333
|
+
})
|
|
16334
|
+
}),
|
|
16335
|
+
" ",
|
|
16336
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
|
|
16337
|
+
className: (0, ($parcel$interopDefault($jQDcL$classnames)))("text-sm font-medium"),
|
|
16338
|
+
children: [
|
|
16339
|
+
mediaLabel,
|
|
16340
|
+
" ",
|
|
16341
|
+
statusLabel
|
|
16342
|
+
]
|
|
16343
|
+
}),
|
|
16344
|
+
state === "blocked" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertCircleIcon), {
|
|
16345
|
+
className: "text-red-700",
|
|
16346
|
+
duotone: true,
|
|
16347
|
+
size: 16
|
|
16348
|
+
})
|
|
16349
|
+
]
|
|
15973
16350
|
});
|
|
15974
|
-
|
|
15975
|
-
|
|
15976
|
-
|
|
15977
|
-
|
|
15978
|
-
|
|
15979
|
-
|
|
15980
|
-
|
|
15981
|
-
|
|
15982
|
-
};
|
|
15983
|
-
const
|
|
15984
|
-
|
|
15985
|
-
|
|
15986
|
-
|
|
15987
|
-
|
|
15988
|
-
|
|
15989
|
-
|
|
15990
|
-
|
|
15991
|
-
|
|
15992
|
-
|
|
15993
|
-
|
|
15994
|
-
|
|
15995
|
-
|
|
15996
|
-
|
|
15997
|
-
|
|
15998
|
-
|
|
15999
|
-
|
|
16000
|
-
|
|
16001
|
-
|
|
16002
|
-
|
|
16003
|
-
|
|
16004
|
-
|
|
16005
|
-
|
|
16006
|
-
|
|
16007
|
-
|
|
16008
|
-
|
|
16009
|
-
|
|
16010
|
-
|
|
16011
|
-
|
|
16012
|
-
|
|
16013
|
-
|
|
16014
|
-
}
|
|
16015
|
-
|
|
16016
|
-
}
|
|
16017
|
-
|
|
16018
|
-
|
|
16019
|
-
|
|
16020
|
-
|
|
16021
|
-
|
|
16022
|
-
|
|
16023
|
-
|
|
16024
|
-
|
|
16025
|
-
|
|
16026
|
-
|
|
16027
|
-
|
|
16028
|
-
|
|
16029
|
-
|
|
16030
|
-
|
|
16031
|
-
|
|
16032
|
-
|
|
16033
|
-
|
|
16034
|
-
|
|
16035
|
-
|
|
16036
|
-
|
|
16037
|
-
|
|
16038
|
-
|
|
16039
|
-
|
|
16040
|
-
|
|
16041
|
-
|
|
16042
|
-
(0, $
|
|
16043
|
-
|
|
16044
|
-
|
|
16045
|
-
|
|
16046
|
-
|
|
16047
|
-
|
|
16048
|
-
|
|
16049
|
-
|
|
16050
|
-
|
|
16051
|
-
|
|
16052
|
-
|
|
16053
|
-
|
|
16054
|
-
|
|
16055
|
-
|
|
16056
|
-
|
|
16057
|
-
|
|
16058
|
-
|
|
16059
|
-
|
|
16060
|
-
|
|
16061
|
-
|
|
16062
|
-
|
|
16063
|
-
|
|
16064
|
-
|
|
16065
|
-
|
|
16066
|
-
|
|
16067
|
-
|
|
16068
|
-
|
|
16069
|
-
|
|
16070
|
-
|
|
16071
|
-
|
|
16072
|
-
|
|
16073
|
-
|
|
16074
|
-
|
|
16075
|
-
|
|
16076
|
-
|
|
16077
|
-
|
|
16078
|
-
|
|
16079
|
-
|
|
16080
|
-
|
|
16081
|
-
|
|
16082
|
-
|
|
16083
|
-
|
|
16084
|
-
|
|
16085
|
-
|
|
16086
|
-
|
|
16087
|
-
|
|
16088
|
-
|
|
16089
|
-
|
|
16090
|
-
|
|
16091
|
-
|
|
16092
|
-
|
|
16093
|
-
|
|
16094
|
-
|
|
16095
|
-
|
|
16096
|
-
|
|
16097
|
-
|
|
16098
|
-
|
|
16351
|
+
};
|
|
16352
|
+
|
|
16353
|
+
|
|
16354
|
+
|
|
16355
|
+
|
|
16356
|
+
|
|
16357
|
+
|
|
16358
|
+
const $6c9648feb0ecae65$export$ef27f94e204e44a9 = ()=>{
|
|
16359
|
+
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
16360
|
+
const state = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
16361
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16362
|
+
className: "flex flex-col items-center gap-8",
|
|
16363
|
+
children: [
|
|
16364
|
+
state.company?.avatar_url && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Avatar), {
|
|
16365
|
+
className: "w-[54px] h-[54px]",
|
|
16366
|
+
name: state.company?.company_name || "",
|
|
16367
|
+
image: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
|
|
16368
|
+
className: "object-cover bg-white",
|
|
16369
|
+
alt: `Avatar for ${state.company?.name}`,
|
|
16370
|
+
src: state.company?.avatar_url,
|
|
16371
|
+
referrerPolicy: "no-referrer"
|
|
16372
|
+
}),
|
|
16373
|
+
size: "xl"
|
|
16374
|
+
}),
|
|
16375
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16376
|
+
className: "flex flex-col items-center gap-2 text-center",
|
|
16377
|
+
children: [
|
|
16378
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16379
|
+
className: "text-sm font-normal text-blue-700 min-h-[20px]",
|
|
16380
|
+
children: t("greeting.requestACall")
|
|
16381
|
+
}),
|
|
16382
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h2", {
|
|
16383
|
+
className: "text-4xl font-semibold text-gray-1000 min-h-[44px]",
|
|
16384
|
+
children: t("greeting.sideTitle")
|
|
16385
|
+
}),
|
|
16386
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
|
|
16387
|
+
className: "font-normal text-gray-700 text-md",
|
|
16388
|
+
children: t("greeting.sideDescription")
|
|
16389
|
+
})
|
|
16390
|
+
]
|
|
16391
|
+
})
|
|
16392
|
+
]
|
|
16393
|
+
});
|
|
16394
|
+
};
|
|
16395
|
+
|
|
16396
|
+
|
|
16397
|
+
|
|
16398
|
+
|
|
16399
|
+
|
|
16400
|
+
const $1f8698b1ab0751d9$var$StepContainer = ({ step: step, text: text })=>{
|
|
16401
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16402
|
+
className: "flex items-center gap-1.5",
|
|
16403
|
+
children: [
|
|
16404
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16405
|
+
className: "flex justify-center items-center w-6 h-6 bg-gray-300 rounded-full font-semibold text-xs",
|
|
16406
|
+
children: step
|
|
16407
|
+
}),
|
|
16408
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
16409
|
+
className: "text-sm",
|
|
16410
|
+
children: text
|
|
16411
|
+
})
|
|
16412
|
+
]
|
|
16413
|
+
});
|
|
16414
|
+
};
|
|
16415
|
+
const $1f8698b1ab0751d9$export$954efd801bad2f4e = (props)=>{
|
|
16416
|
+
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
16417
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Dialog), {
|
|
16418
|
+
...props,
|
|
16419
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.DialogContent), {
|
|
16420
|
+
children: [
|
|
16421
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogHeader), {
|
|
16422
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.DialogTitle), {
|
|
16423
|
+
className: "flex items-center gap-2 max-w-[315px]",
|
|
16424
|
+
children: [
|
|
16425
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Lock1Icon), {
|
|
16426
|
+
size: 18,
|
|
16427
|
+
className: "text-blue-700",
|
|
16428
|
+
duotone: true
|
|
16429
|
+
}),
|
|
16430
|
+
t("greeting.mediaDenied")
|
|
16431
|
+
]
|
|
16432
|
+
})
|
|
16433
|
+
}),
|
|
16434
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16435
|
+
className: "flex flex-col gap-4",
|
|
16436
|
+
children: [
|
|
16437
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
|
|
16438
|
+
src: "https://cdn.snapcall.io/stream/permissions.png",
|
|
16439
|
+
alt: ""
|
|
16440
|
+
}),
|
|
16441
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($1f8698b1ab0751d9$var$StepContainer, {
|
|
16442
|
+
step: 1,
|
|
16443
|
+
text: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
|
|
16444
|
+
className: "flex items-center",
|
|
16445
|
+
children: [
|
|
16446
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reacti18next.Trans), {
|
|
16447
|
+
i18nKey: "greeting.clickOnLock",
|
|
16448
|
+
children: [
|
|
16449
|
+
"Click on the ",
|
|
16450
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Lock3Icon), {
|
|
16451
|
+
size: 16,
|
|
16452
|
+
className: "text-gray-1000"
|
|
16453
|
+
}),
|
|
16454
|
+
" lock icon in your browser's bar."
|
|
16455
|
+
]
|
|
16456
|
+
}),
|
|
16457
|
+
","
|
|
16458
|
+
]
|
|
16459
|
+
})
|
|
16460
|
+
}),
|
|
16461
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($1f8698b1ab0751d9$var$StepContainer, {
|
|
16462
|
+
step: 2,
|
|
16463
|
+
text: "Turn on microphone and camera."
|
|
16464
|
+
})
|
|
16465
|
+
]
|
|
16466
|
+
})
|
|
16467
|
+
]
|
|
16468
|
+
})
|
|
16469
|
+
});
|
|
16470
|
+
};
|
|
16471
|
+
|
|
16472
|
+
|
|
16473
|
+
|
|
16474
|
+
|
|
16475
|
+
|
|
16476
|
+
|
|
16477
|
+
|
|
16478
|
+
const $70b378965f512b9e$export$9d55f406abb38536 = (props)=>{
|
|
16479
|
+
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
16480
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Dialog), {
|
|
16481
|
+
...props,
|
|
16482
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.DialogContent), {
|
|
16483
|
+
children: [
|
|
16484
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogHeader), {
|
|
16485
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogTitle), {
|
|
16486
|
+
className: "flex items-center gap-2 max-w-[315px]",
|
|
16487
|
+
children: t("greeting.scheduleACall")
|
|
16488
|
+
})
|
|
16489
|
+
}),
|
|
16490
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogDescription), {
|
|
16491
|
+
children: t("greeting.canceledCallRequest")
|
|
16492
|
+
}),
|
|
16493
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16494
|
+
className: "flex items-end justify-end gap-2",
|
|
16495
|
+
children: [
|
|
16496
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16497
|
+
variant: "outline",
|
|
16498
|
+
onClick: ()=>props.onOpenChange?.(false),
|
|
16499
|
+
children: t("misc.cancel")
|
|
16500
|
+
}),
|
|
16501
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16502
|
+
onClick: ()=>{
|
|
16503
|
+
const urlParams = new URLSearchParams(window.location.href);
|
|
16504
|
+
const customerEmail = urlParams.get("customerEmail");
|
|
16505
|
+
window.location.assign(`${"https://app.snapcall.io"}/${(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token}/schedule/?customerEmail=${customerEmail}`);
|
|
16506
|
+
},
|
|
16507
|
+
children: t("misc.proceed")
|
|
16508
|
+
})
|
|
16509
|
+
]
|
|
16510
|
+
})
|
|
16511
|
+
]
|
|
16512
|
+
})
|
|
16513
|
+
});
|
|
16514
|
+
};
|
|
16515
|
+
|
|
16516
|
+
|
|
16517
|
+
|
|
16518
|
+
|
|
16519
|
+
|
|
16520
|
+
const $d16aad3eee34025b$export$4b510b9db1095d90 = (props)=>{
|
|
16521
|
+
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
16522
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Dialog), {
|
|
16523
|
+
...props,
|
|
16524
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.DialogContent), {
|
|
16525
|
+
children: [
|
|
16526
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.DialogHeader), {
|
|
16527
|
+
children: [
|
|
16528
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogTitle), {
|
|
16529
|
+
className: "flex items-center gap-2 max-w-[315px]",
|
|
16530
|
+
children: t("greeting.leaveMessage")
|
|
16531
|
+
}),
|
|
16532
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.DialogDescription), {
|
|
16533
|
+
children: t("greeting.cantWaitLeaveMessage")
|
|
16534
|
+
})
|
|
16535
|
+
]
|
|
16536
|
+
}),
|
|
16537
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16538
|
+
className: "flex flex-col justify-center gap-4 w-full",
|
|
16539
|
+
children: [
|
|
16540
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16541
|
+
variant: "outline",
|
|
16542
|
+
onClick: ()=>{
|
|
16543
|
+
window.location.assign(`${window.location}&recorder=1`);
|
|
16544
|
+
},
|
|
16545
|
+
children: [
|
|
16546
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderIcon), {
|
|
16547
|
+
size: "18",
|
|
16548
|
+
className: "text-blue-700"
|
|
16549
|
+
}),
|
|
16550
|
+
t("greeting.recordVideo")
|
|
16551
|
+
]
|
|
16552
|
+
}),
|
|
16553
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16554
|
+
variant: "outline",
|
|
16555
|
+
onClick: ()=>{
|
|
16556
|
+
window.location.assign(`${window.location}&recorder=1&voice=1`);
|
|
16557
|
+
},
|
|
16558
|
+
children: [
|
|
16559
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VoicemailIcon), {
|
|
16560
|
+
size: "18",
|
|
16561
|
+
className: "text-blue-700"
|
|
16562
|
+
}),
|
|
16563
|
+
t("greeting.recordVoice")
|
|
16564
|
+
]
|
|
16565
|
+
})
|
|
16566
|
+
]
|
|
16567
|
+
})
|
|
16568
|
+
]
|
|
16569
|
+
})
|
|
16570
|
+
});
|
|
16571
|
+
};
|
|
16572
|
+
|
|
16573
|
+
|
|
16574
|
+
const $317aa81f07421dfd$var$GreetingView = ()=>{
|
|
16575
|
+
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
16576
|
+
const { setStreamState: setStreamState } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
|
|
16577
|
+
const formContext = (0, $jQDcL$reacthookform.useForm)({
|
|
16578
|
+
defaultValues: {
|
|
16579
|
+
name: ""
|
|
16099
16580
|
}
|
|
16100
|
-
}
|
|
16101
|
-
|
|
16102
|
-
|
|
16103
|
-
(0, $
|
|
16104
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).
|
|
16105
|
-
|
|
16106
|
-
|
|
16107
|
-
|
|
16108
|
-
|
|
16109
|
-
|
|
16110
|
-
|
|
16111
|
-
|
|
16112
|
-
|
|
16113
|
-
|
|
16114
|
-
|
|
16115
|
-
|
|
16116
|
-
|
|
16117
|
-
|
|
16118
|
-
|
|
16119
|
-
|
|
16120
|
-
|
|
16121
|
-
|
|
16122
|
-
|
|
16123
|
-
|
|
16124
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareUpdate);
|
|
16125
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", onScreenshareUpdate);
|
|
16126
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onMicrophoneUpdate);
|
|
16127
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneMute", onMicrophoneUpdate);
|
|
16128
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneUnmute", onMicrophoneUpdate);
|
|
16129
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
|
|
16130
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("selfProfileUpdate", onSelfProfileUpdate);
|
|
16131
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("terminateRoom", onCallTerminated);
|
|
16132
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onCallEnd);
|
|
16133
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("invalidRoom", onInvalidRoom);
|
|
16134
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("agentIdentity", onAgentIdentity);
|
|
16135
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("criticalError", onCriticalError);
|
|
16136
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("videoRecordingStarted", onVideoRecordingStarted);
|
|
16137
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("videoRecordingStopped", onVideoRecordingStopped);
|
|
16138
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("videoRecordingRequested", onVideoRecordingRequested);
|
|
16139
|
-
};
|
|
16140
|
-
}, [
|
|
16141
|
-
onVideoRecordingRequested
|
|
16142
|
-
]);
|
|
16581
|
+
});
|
|
16582
|
+
const publicPage = (0, $jQDcL$reactquery.useQuery)([
|
|
16583
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token
|
|
16584
|
+
], ()=>(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getPublicPage((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token || ""), {
|
|
16585
|
+
enabled: Boolean((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).defaultPublicPage?.token),
|
|
16586
|
+
staleTime: Infinity
|
|
16587
|
+
});
|
|
16588
|
+
const videoRef = (0, $jQDcL$react.useRef)(null);
|
|
16589
|
+
const [videoTrack, setVideoTrack] = (0, $jQDcL$react.useState)(undefined);
|
|
16590
|
+
const [micEnabled, setMicEnabled] = (0, $jQDcL$react.useState)(false);
|
|
16591
|
+
const [joining, setJoining] = (0, $jQDcL$react.useState)(false);
|
|
16592
|
+
const [denied, setDenied] = (0, $jQDcL$react.useState)(false);
|
|
16593
|
+
const [permissionsDenied, setPermissionsDenied] = (0, $jQDcL$react.useState)(false);
|
|
16594
|
+
const [devices, setDevices] = (0, $jQDcL$react.useState)({
|
|
16595
|
+
audioInput: [],
|
|
16596
|
+
audioOutput: [],
|
|
16597
|
+
videoInput: []
|
|
16598
|
+
});
|
|
16599
|
+
const [selectedAudio, setSelectedAudio] = (0, $jQDcL$react.useState)("0");
|
|
16600
|
+
const [selectedVideo, setSelectedVideo] = (0, $jQDcL$react.useState)("0");
|
|
16601
|
+
const permissionDeniedModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
|
|
16602
|
+
const openScheduledModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
|
|
16603
|
+
const openRecorderModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
|
|
16604
|
+
const state = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
16143
16605
|
(0, $jQDcL$react.useEffect)(()=>{
|
|
16144
|
-
const
|
|
16145
|
-
|
|
16146
|
-
|
|
16147
|
-
|
|
16148
|
-
|
|
16149
|
-
|
|
16150
|
-
|
|
16151
|
-
|
|
16152
|
-
|
|
16153
|
-
|
|
16154
|
-
|
|
16155
|
-
|
|
16156
|
-
messageStyle: {
|
|
16157
|
-
fontWeight: 600
|
|
16158
|
-
}
|
|
16159
|
-
});
|
|
16160
|
-
if (!options.recorder?.enabled) try {
|
|
16161
|
-
if (!options.headless) await (0, $c3d5253d9d597eb5$export$494039379563c94d)(options);
|
|
16162
|
-
setUserInteractionTriggered(true);
|
|
16163
|
-
} catch (userInteractionError) {
|
|
16164
|
-
setBlockedDevicesPopupOpen(true);
|
|
16165
|
-
console.error("User interaction trigger failed", userInteractionError);
|
|
16166
|
-
} finally{
|
|
16167
|
-
setStreamState("streaming");
|
|
16606
|
+
const onRequestAccessResult = (data)=>{
|
|
16607
|
+
if (!data.detail.success) setDenied(true);
|
|
16608
|
+
else {
|
|
16609
|
+
const cameraEnabled = Boolean(videoTrack);
|
|
16610
|
+
videoTrack?.stop();
|
|
16611
|
+
setStreamState("loading");
|
|
16612
|
+
if (micEnabled) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone({
|
|
16613
|
+
deviceId: devices.audioInput[Number(selectedAudio)]?.deviceId
|
|
16614
|
+
});
|
|
16615
|
+
if (cameraEnabled) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
|
|
16616
|
+
device: devices.videoInput[Number(selectedVideo)]
|
|
16617
|
+
});
|
|
16168
16618
|
}
|
|
16169
16619
|
};
|
|
16170
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("
|
|
16620
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("requestAccessResult", onRequestAccessResult);
|
|
16171
16621
|
return ()=>{
|
|
16172
|
-
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("
|
|
16622
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("requestAccessResult", onRequestAccessResult);
|
|
16173
16623
|
};
|
|
16624
|
+
});
|
|
16625
|
+
const onSubmit = async ()=>{
|
|
16626
|
+
const { name: name } = formContext.getValues();
|
|
16627
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setProfile({
|
|
16628
|
+
name: name
|
|
16629
|
+
});
|
|
16630
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestRoomAccess();
|
|
16631
|
+
setJoining(true);
|
|
16632
|
+
};
|
|
16633
|
+
const getUserMedia = (0, $jQDcL$react.useCallback)(async (opt)=>{
|
|
16634
|
+
try {
|
|
16635
|
+
if (videoTrack && opt.video) videoTrack.stop();
|
|
16636
|
+
const stream = await navigator.mediaDevices.getUserMedia(opt);
|
|
16637
|
+
const newVideoTrack = stream.getVideoTracks()[0];
|
|
16638
|
+
const newAudioTrack = stream.getAudioTracks()[0];
|
|
16639
|
+
if (newVideoTrack) setVideoTrack(newVideoTrack);
|
|
16640
|
+
if (newAudioTrack) setMicEnabled(true);
|
|
16641
|
+
newAudioTrack?.stop();
|
|
16642
|
+
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
16643
|
+
const devicesParam = {
|
|
16644
|
+
audioInput: [],
|
|
16645
|
+
audioOutput: [],
|
|
16646
|
+
videoInput: []
|
|
16647
|
+
};
|
|
16648
|
+
devices.forEach((device)=>{
|
|
16649
|
+
if (device.kind === "audiooutput" && device.deviceId === "default") devicesParam.audioOutput.push(device);
|
|
16650
|
+
if (device.kind === "videoinput") devicesParam.videoInput.push(device);
|
|
16651
|
+
if (device.kind === "audioinput") devicesParam.audioInput.push(device);
|
|
16652
|
+
});
|
|
16653
|
+
setDevices(devicesParam);
|
|
16654
|
+
} catch (err) {
|
|
16655
|
+
setPermissionsDenied(true);
|
|
16656
|
+
permissionDeniedModalState.open();
|
|
16657
|
+
console.error("Get User Media Failed: ", err);
|
|
16658
|
+
}
|
|
16174
16659
|
}, [
|
|
16175
|
-
|
|
16176
|
-
|
|
16660
|
+
permissionDeniedModalState,
|
|
16661
|
+
videoTrack
|
|
16177
16662
|
]);
|
|
16178
|
-
|
|
16179
|
-
|
|
16180
|
-
|
|
16181
|
-
|
|
16182
|
-
|
|
16183
|
-
|
|
16184
|
-
|
|
16185
|
-
|
|
16186
|
-
|
|
16187
|
-
|
|
16188
|
-
|
|
16189
|
-
|
|
16190
|
-
|
|
16191
|
-
|
|
16192
|
-
|
|
16193
|
-
|
|
16194
|
-
|
|
16195
|
-
|
|
16196
|
-
|
|
16197
|
-
|
|
16198
|
-
|
|
16199
|
-
|
|
16200
|
-
|
|
16201
|
-
|
|
16202
|
-
|
|
16203
|
-
|
|
16204
|
-
|
|
16205
|
-
|
|
16206
|
-
|
|
16207
|
-
|
|
16208
|
-
|
|
16209
|
-
|
|
16210
|
-
|
|
16211
|
-
|
|
16212
|
-
|
|
16213
|
-
|
|
16214
|
-
|
|
16215
|
-
|
|
16216
|
-
|
|
16217
|
-
|
|
16218
|
-
|
|
16219
|
-
|
|
16220
|
-
|
|
16221
|
-
|
|
16663
|
+
const onCameraClick = (0, $jQDcL$react.useCallback)(async ()=>{
|
|
16664
|
+
if (!videoTrack) await getUserMedia({
|
|
16665
|
+
video: true
|
|
16666
|
+
});
|
|
16667
|
+
else {
|
|
16668
|
+
videoTrack.stop();
|
|
16669
|
+
setVideoTrack(undefined);
|
|
16670
|
+
}
|
|
16671
|
+
}, [
|
|
16672
|
+
getUserMedia,
|
|
16673
|
+
videoTrack
|
|
16674
|
+
]);
|
|
16675
|
+
const onMicrophoneClick = (0, $jQDcL$react.useCallback)(async ()=>{
|
|
16676
|
+
if (!micEnabled) await getUserMedia({
|
|
16677
|
+
audio: true
|
|
16678
|
+
});
|
|
16679
|
+
else setMicEnabled(false);
|
|
16680
|
+
}, [
|
|
16681
|
+
getUserMedia,
|
|
16682
|
+
micEnabled
|
|
16683
|
+
]);
|
|
16684
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
16685
|
+
if (videoRef.current) {
|
|
16686
|
+
if (videoTrack) videoRef.current.srcObject = new MediaStream([
|
|
16687
|
+
videoTrack
|
|
16688
|
+
]);
|
|
16689
|
+
else videoRef.current.srcObject = null;
|
|
16690
|
+
}
|
|
16691
|
+
}, [
|
|
16692
|
+
videoRef,
|
|
16693
|
+
videoTrack
|
|
16694
|
+
]);
|
|
16695
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
16696
|
+
getUserMedia({
|
|
16697
|
+
audio: true,
|
|
16698
|
+
video: true
|
|
16699
|
+
});
|
|
16700
|
+
}, []);
|
|
16701
|
+
const webcamEnabled = Boolean(videoTrack);
|
|
16702
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16703
|
+
className: "flex flex-col w-full min-h-screen gap-12 p-8 overflow-y-auto public-page-bg",
|
|
16704
|
+
children: [
|
|
16705
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1f8698b1ab0751d9$export$954efd801bad2f4e), {
|
|
16706
|
+
open: permissionDeniedModalState.isOpen,
|
|
16707
|
+
onOpenChange: permissionDeniedModalState.setOpen
|
|
16708
|
+
}),
|
|
16709
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6c9648feb0ecae65$export$ef27f94e204e44a9), {}),
|
|
16710
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16711
|
+
className: "flex items-stretch justify-center gap-8",
|
|
16222
16712
|
children: [
|
|
16223
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.
|
|
16224
|
-
|
|
16225
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6), {
|
|
16226
|
-
ref: streamUIContainerRef,
|
|
16713
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16714
|
+
className: "flex flex-col gap-4",
|
|
16227
16715
|
children: [
|
|
16228
|
-
|
|
16229
|
-
|
|
16230
|
-
|
|
16231
|
-
|
|
16232
|
-
|
|
16233
|
-
|
|
16234
|
-
|
|
16235
|
-
|
|
16236
|
-
|
|
16237
|
-
|
|
16238
|
-
|
|
16239
|
-
|
|
16716
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16717
|
+
className: "w-[400px] h-[400px] bg-gray-1000 rounded-lg overflow-hidden relative",
|
|
16718
|
+
children: [
|
|
16719
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
|
|
16720
|
+
className: "-scale-x-[1] w-full h-full object-cover",
|
|
16721
|
+
ref: videoRef,
|
|
16722
|
+
autoPlay: true
|
|
16723
|
+
}),
|
|
16724
|
+
!webcamEnabled && formContext.watch("name") && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Avatar), {
|
|
16725
|
+
size: "lg",
|
|
16726
|
+
className: "absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2",
|
|
16727
|
+
name: formContext.watch("name")
|
|
16728
|
+
}),
|
|
16729
|
+
formContext.watch("name") && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
|
|
16730
|
+
className: "absolute flex items-center gap-1 p-1 text-xs font-bold text-white rounded-md bg-[#292929] bottom-2 left-2",
|
|
16731
|
+
children: [
|
|
16732
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Avatar), {
|
|
16733
|
+
size: "xs",
|
|
16734
|
+
name: formContext.watch("name")
|
|
16735
|
+
}),
|
|
16736
|
+
" ",
|
|
16737
|
+
formContext.watch("name")
|
|
16738
|
+
]
|
|
16739
|
+
})
|
|
16740
|
+
]
|
|
16240
16741
|
}),
|
|
16241
|
-
|
|
16242
|
-
|
|
16243
|
-
children:
|
|
16742
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16743
|
+
className: "grid grid-cols-2 gap-4",
|
|
16744
|
+
children: [
|
|
16745
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4b42d15ba6792d99$export$8d6498a96ae0e73f), {
|
|
16746
|
+
onClick: ()=>{
|
|
16747
|
+
onCameraClick();
|
|
16748
|
+
},
|
|
16749
|
+
className: "",
|
|
16750
|
+
type: "camera",
|
|
16751
|
+
state: permissionsDenied ? "blocked" : webcamEnabled ? "on" : "off"
|
|
16752
|
+
}),
|
|
16753
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4b42d15ba6792d99$export$8d6498a96ae0e73f), {
|
|
16754
|
+
onClick: ()=>{
|
|
16755
|
+
onMicrophoneClick();
|
|
16756
|
+
},
|
|
16757
|
+
className: "",
|
|
16758
|
+
type: "audio",
|
|
16759
|
+
state: permissionsDenied ? "blocked" : micEnabled ? "on" : "off"
|
|
16760
|
+
})
|
|
16761
|
+
]
|
|
16762
|
+
})
|
|
16763
|
+
]
|
|
16764
|
+
}),
|
|
16765
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
16766
|
+
className: "w-[400px] min-h-[400px] p-6 bg-white border border-gray-200 rounded-lg",
|
|
16767
|
+
children: joining || denied ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16768
|
+
className: "flex flex-col h-full",
|
|
16769
|
+
children: [
|
|
16770
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
16771
|
+
className: "flex flex-col items-center justify-center flex-grow gap-4",
|
|
16772
|
+
children: denied ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
|
|
16773
|
+
children: [
|
|
16774
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SlashCircle1Icon), {
|
|
16775
|
+
size: 32,
|
|
16776
|
+
className: "text-red-700"
|
|
16777
|
+
}),
|
|
16778
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16779
|
+
className: "flex flex-col items-center",
|
|
16780
|
+
children: [
|
|
16781
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16782
|
+
className: "font-medium text-md",
|
|
16783
|
+
children: t("greeting.cantJoinCall")
|
|
16784
|
+
}),
|
|
16785
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16786
|
+
className: "text-sm text-center text-gray-700",
|
|
16787
|
+
children: t("greeting.someoneDenied")
|
|
16788
|
+
})
|
|
16789
|
+
]
|
|
16790
|
+
})
|
|
16791
|
+
]
|
|
16792
|
+
}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
|
|
16793
|
+
children: [
|
|
16794
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SpinnerIcon), {
|
|
16795
|
+
size: 32,
|
|
16796
|
+
className: "text-blue-700 animate-spin"
|
|
16797
|
+
}),
|
|
16798
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16799
|
+
className: "flex flex-col items-center",
|
|
16800
|
+
children: [
|
|
16801
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16802
|
+
className: "font-medium text-md",
|
|
16803
|
+
children: t("greeting.askingLetIn")
|
|
16804
|
+
}),
|
|
16805
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16806
|
+
className: "text-sm text-center text-gray-700",
|
|
16807
|
+
children: t("greeting.takeFewMinute")
|
|
16808
|
+
})
|
|
16809
|
+
]
|
|
16810
|
+
})
|
|
16811
|
+
]
|
|
16812
|
+
})
|
|
16813
|
+
}),
|
|
16814
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $70b378965f512b9e$export$9d55f406abb38536), {
|
|
16815
|
+
open: openScheduledModalState.isOpen,
|
|
16816
|
+
onOpenChange: openScheduledModalState.setOpen
|
|
16817
|
+
}),
|
|
16818
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $d16aad3eee34025b$export$4b510b9db1095d90), {
|
|
16819
|
+
open: openRecorderModalState.isOpen,
|
|
16820
|
+
onOpenChange: openRecorderModalState.setOpen
|
|
16821
|
+
}),
|
|
16822
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16823
|
+
className: "flex flex-col gap-2",
|
|
16244
16824
|
children: [
|
|
16245
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)(
|
|
16246
|
-
|
|
16247
|
-
|
|
16248
|
-
|
|
16825
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
|
|
16826
|
+
className: "text-sm text-center text-gray-700",
|
|
16827
|
+
children: denied ? t("greeting.whatYouCanDo") : t("greeting.cantWait")
|
|
16828
|
+
}),
|
|
16829
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16830
|
+
className: "w-full",
|
|
16831
|
+
variant: "secondary",
|
|
16832
|
+
onClick: ()=>{
|
|
16833
|
+
openRecorderModalState.setOpen(true);
|
|
16834
|
+
},
|
|
16835
|
+
children: t("greeting.leaveMessage")
|
|
16836
|
+
}),
|
|
16837
|
+
publicPage.data?.data.links.find((pp)=>pp.id === "scheduleCall")?.active && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16838
|
+
className: "w-full",
|
|
16839
|
+
variant: "outline",
|
|
16840
|
+
onClick: ()=>{
|
|
16841
|
+
openScheduledModalState.open();
|
|
16842
|
+
},
|
|
16843
|
+
children: [
|
|
16844
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.CalendarIcon), {
|
|
16845
|
+
duotone: true,
|
|
16846
|
+
size: 18
|
|
16847
|
+
}),
|
|
16848
|
+
" ",
|
|
16849
|
+
t("greeting.scheduleACall")
|
|
16850
|
+
]
|
|
16851
|
+
})
|
|
16249
16852
|
]
|
|
16250
16853
|
})
|
|
16251
|
-
|
|
16252
|
-
|
|
16253
|
-
|
|
16854
|
+
]
|
|
16855
|
+
}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Form), {
|
|
16856
|
+
...formContext,
|
|
16857
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("form", {
|
|
16858
|
+
onSubmit: formContext.handleSubmit(onSubmit),
|
|
16859
|
+
className: "flex flex-col justify-between h-full",
|
|
16860
|
+
children: [
|
|
16861
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16862
|
+
className: "space-y-6",
|
|
16863
|
+
children: [
|
|
16864
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormField), {
|
|
16865
|
+
control: formContext.control,
|
|
16866
|
+
name: "name",
|
|
16867
|
+
render: ({ field: field })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.FormItem), {
|
|
16868
|
+
children: [
|
|
16869
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormLabel), {
|
|
16870
|
+
children: t("greeting.name")
|
|
16871
|
+
}),
|
|
16872
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormControl), {
|
|
16873
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Input), {
|
|
16874
|
+
autoFocus: true,
|
|
16875
|
+
placeholder: t("greeting.namePlaceholder"),
|
|
16876
|
+
...field
|
|
16877
|
+
})
|
|
16878
|
+
}),
|
|
16879
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormMessage), {
|
|
16880
|
+
children: t("greeting.nameDescription")
|
|
16881
|
+
})
|
|
16882
|
+
]
|
|
16883
|
+
})
|
|
16884
|
+
}),
|
|
16885
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16886
|
+
className: "flex flex-col gap-1.5",
|
|
16887
|
+
children: [
|
|
16888
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.FormLabel), {
|
|
16889
|
+
children: t("greeting.setting")
|
|
16890
|
+
}),
|
|
16891
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16892
|
+
className: "flex items-center gap-4",
|
|
16893
|
+
children: [
|
|
16894
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VideoRecorderIcon), {
|
|
16895
|
+
duotone: true,
|
|
16896
|
+
size: 18
|
|
16897
|
+
}),
|
|
16898
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Select), {
|
|
16899
|
+
value: selectedVideo,
|
|
16900
|
+
onValueChange: (value)=>{
|
|
16901
|
+
setSelectedVideo(value);
|
|
16902
|
+
getUserMedia({
|
|
16903
|
+
video: devices.videoInput[Number(value)]
|
|
16904
|
+
});
|
|
16905
|
+
},
|
|
16906
|
+
children: [
|
|
16907
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectTrigger), {
|
|
16908
|
+
className: "flex-grow",
|
|
16909
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectValue), {})
|
|
16910
|
+
}),
|
|
16911
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectContent), {
|
|
16912
|
+
children: devices.videoInput.map((device, i)=>{
|
|
16913
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectItem), {
|
|
16914
|
+
value: `${i}`,
|
|
16915
|
+
children: device.label
|
|
16916
|
+
}, `${i}`);
|
|
16917
|
+
})
|
|
16918
|
+
})
|
|
16919
|
+
]
|
|
16920
|
+
})
|
|
16921
|
+
]
|
|
16922
|
+
}),
|
|
16923
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16924
|
+
className: "flex items-center gap-4",
|
|
16925
|
+
children: [
|
|
16926
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Microphone1Icon), {
|
|
16927
|
+
duotone: true,
|
|
16928
|
+
size: 18
|
|
16929
|
+
}),
|
|
16930
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Select), {
|
|
16931
|
+
value: selectedAudio,
|
|
16932
|
+
onValueChange: (value)=>{
|
|
16933
|
+
getUserMedia({
|
|
16934
|
+
audio: devices.audioInput[Number(value)]
|
|
16935
|
+
});
|
|
16936
|
+
setSelectedAudio(value);
|
|
16937
|
+
},
|
|
16938
|
+
children: [
|
|
16939
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectTrigger), {
|
|
16940
|
+
className: "flex-grow",
|
|
16941
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectValue), {})
|
|
16942
|
+
}),
|
|
16943
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectContent), {
|
|
16944
|
+
children: devices.audioInput.map((device, i)=>{
|
|
16945
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectItem), {
|
|
16946
|
+
value: `${i}`,
|
|
16947
|
+
children: device.label
|
|
16948
|
+
}, `${i}`);
|
|
16949
|
+
})
|
|
16950
|
+
})
|
|
16951
|
+
]
|
|
16952
|
+
})
|
|
16953
|
+
]
|
|
16954
|
+
}),
|
|
16955
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16956
|
+
className: "flex items-center gap-4",
|
|
16957
|
+
children: [
|
|
16958
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.VolumeMaxIcon), {
|
|
16959
|
+
duotone: true,
|
|
16960
|
+
size: 18
|
|
16961
|
+
}),
|
|
16962
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.Select), {
|
|
16963
|
+
value: "0",
|
|
16964
|
+
children: [
|
|
16965
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectTrigger), {
|
|
16966
|
+
className: "flex-grow",
|
|
16967
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectValue), {})
|
|
16968
|
+
}),
|
|
16969
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectContent), {
|
|
16970
|
+
children: devices.audioOutput.map((device, i)=>{
|
|
16971
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.SelectItem), {
|
|
16972
|
+
value: `${i}`,
|
|
16973
|
+
children: device.label
|
|
16974
|
+
}, `${i}`);
|
|
16975
|
+
})
|
|
16976
|
+
})
|
|
16977
|
+
]
|
|
16978
|
+
})
|
|
16979
|
+
]
|
|
16980
|
+
})
|
|
16981
|
+
]
|
|
16982
|
+
})
|
|
16983
|
+
]
|
|
16984
|
+
}),
|
|
16985
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
16986
|
+
className: "flex flex-col flex-end gap-2",
|
|
16987
|
+
children: [
|
|
16988
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Button), {
|
|
16989
|
+
type: "submit",
|
|
16990
|
+
children: t("greeting.askToJoin")
|
|
16991
|
+
}),
|
|
16992
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
16993
|
+
className: "text-sm text-center text-gray-700",
|
|
16994
|
+
children: t("greeting.youWillJoinWhenSomeoneLetsYou", {
|
|
16995
|
+
companyName: state.company?.company_name
|
|
16996
|
+
})
|
|
16997
|
+
})
|
|
16998
|
+
]
|
|
16999
|
+
})
|
|
17000
|
+
]
|
|
17001
|
+
})
|
|
17002
|
+
})
|
|
16254
17003
|
})
|
|
16255
17004
|
]
|
|
17005
|
+
}),
|
|
17006
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
17007
|
+
className: "flex flex-col items-center gap-2 pt-10 border-t border-gray-200 w-full max-w-[800px] mx-auto",
|
|
17008
|
+
children: [
|
|
17009
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
17010
|
+
className: "text-sm text-gray-700",
|
|
17011
|
+
children: t("shareLink.poweredBy")
|
|
17012
|
+
}),
|
|
17013
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $d2c20674130d0e96$export$9ea2b4f70e201d7f), {})
|
|
17014
|
+
]
|
|
16256
17015
|
})
|
|
16257
|
-
|
|
16258
|
-
});
|
|
16259
|
-
};
|
|
16260
|
-
var $ee8cb448c2c74888$export$2e2bcd8739ae039 = $ee8cb448c2c74888$var$StreamUI;
|
|
16261
|
-
|
|
16262
|
-
|
|
16263
|
-
|
|
16264
|
-
// https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference#01G2A279ZXW4JT60NKXKX69G49
|
|
16265
|
-
// prettier-ignore
|
|
16266
|
-
// @ts-ignore
|
|
16267
|
-
window.hj = window.hj || function() {
|
|
16268
|
-
(hj.q = hj.q || []).push(arguments);
|
|
16269
|
-
};
|
|
16270
|
-
|
|
16271
|
-
|
|
16272
|
-
|
|
16273
|
-
|
|
16274
|
-
|
|
16275
|
-
|
|
16276
|
-
|
|
16277
|
-
const $d9d258dccafa26ef$var$GreetingSnapcallLogo = ()=>{
|
|
16278
|
-
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
|
|
16279
|
-
width: "72",
|
|
16280
|
-
height: "72",
|
|
16281
|
-
viewBox: "0 0 72 72",
|
|
16282
|
-
fill: "none",
|
|
16283
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
16284
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("g", {
|
|
16285
|
-
clipPath: "url(#greetingSnapcallLogo)",
|
|
16286
|
-
children: [
|
|
16287
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16288
|
-
d: "M0 36C0 6.354 6.354 0 36 0s36 6.354 36 36-6.354 36-36 36S0 65.646 0 36Z",
|
|
16289
|
-
fill: "#000"
|
|
16290
|
-
}),
|
|
16291
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
|
|
16292
|
-
d: "M36.225 57.428c2.367 0 4.35-1.964 3.62-4.215a13.38 13.38 0 0 0-3.133-5.203c-2.432-2.498-5.73-3.902-9.17-3.902-3.44 0-6.74 1.404-9.172 3.902a13.381 13.381 0 0 0-3.132 5.203c-.731 2.25 1.252 4.215 3.62 4.215h17.367ZM35.775 14.572c-2.367 0-4.35 1.965-3.62 4.216a13.381 13.381 0 0 0 3.133 5.203c2.432 2.498 5.73 3.901 9.17 3.901 3.44 0 6.74-1.403 9.172-3.901a13.375 13.375 0 0 0 3.132-5.203c.731-2.252-1.252-4.216-3.62-4.216H35.776ZM44.459 53.143c0 2.367 1.971 4.352 4.204 3.566a12.924 12.924 0 0 0 4.967-3.182c2.432-2.498 3.799-5.886 3.799-9.419 0-3.533-1.367-6.921-3.8-9.42a12.923 12.923 0 0 0-4.966-3.181c-2.233-.786-4.204 1.2-4.204 3.566v18.07ZM27.541 18.857c0-2.367-1.971-4.352-4.204-3.566a12.923 12.923 0 0 0-4.967 3.182c-2.432 2.498-3.799 5.886-3.799 9.42 0 3.532 1.367 6.92 3.8 9.418a12.923 12.923 0 0 0 4.966 3.182c2.233.786 4.204-1.2 4.204-3.566v-18.07Z",
|
|
16293
|
-
fill: "#fff"
|
|
16294
|
-
})
|
|
16295
|
-
]
|
|
16296
|
-
})
|
|
17016
|
+
]
|
|
16297
17017
|
});
|
|
16298
|
-
};
|
|
16299
|
-
var $
|
|
16300
|
-
|
|
16301
|
-
|
|
16302
|
-
|
|
16303
|
-
|
|
16304
|
-
const $5fd6e456b33aeaa7$export$d653589df987fd93 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16305
|
-
height: 100%;
|
|
16306
|
-
display: flex;
|
|
16307
|
-
flex-direction: column;
|
|
16308
|
-
align-items: center;
|
|
16309
|
-
color: #1d1c20;
|
|
16310
|
-
padding-top: 76px;
|
|
16311
|
-
font-family: Lato;
|
|
16312
|
-
box-sizing: border-box;
|
|
16313
|
-
`;
|
|
16314
|
-
const $5fd6e456b33aeaa7$export$d43ffeaaec0b2a58 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16315
|
-
display: flex;
|
|
16316
|
-
align-items: center;
|
|
16317
|
-
justify-content: center;
|
|
16318
|
-
width: 72px;
|
|
16319
|
-
height: 72px;
|
|
16320
|
-
svg {
|
|
16321
|
-
width: 50px;
|
|
16322
|
-
height: 50px;
|
|
16323
|
-
}
|
|
16324
|
-
background-color: black;
|
|
16325
|
-
border-radius: 25px;
|
|
16326
|
-
box-sizing: border-box;
|
|
16327
|
-
`;
|
|
16328
|
-
const $5fd6e456b33aeaa7$export$873b7756313e36bb = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h1`
|
|
16329
|
-
font-size: 32px;
|
|
16330
|
-
line-height: 39px;
|
|
16331
|
-
font-weight: 700;
|
|
16332
|
-
font-family: Gazpacho;
|
|
16333
|
-
text-align: center;
|
|
16334
|
-
`;
|
|
16335
|
-
const $5fd6e456b33aeaa7$export$b7a7fefc0b349825 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16336
|
-
display: flex;
|
|
16337
|
-
align-items: center;
|
|
16338
|
-
gap: 10px;
|
|
16339
|
-
`;
|
|
16340
|
-
const $5fd6e456b33aeaa7$export$b302ef9d8310f71 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16341
|
-
position: relative;
|
|
16342
|
-
width: 350px;
|
|
16343
|
-
height: 350px;
|
|
16344
|
-
display: flex;
|
|
16345
|
-
align-items: center;
|
|
16346
|
-
justify-content: center;
|
|
16347
|
-
`;
|
|
16348
|
-
const $5fd6e456b33aeaa7$export$ae01dedf5c052bb = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).video`
|
|
16349
|
-
width: 300px;
|
|
16350
|
-
height: 300px;
|
|
16351
|
-
background-color: black;
|
|
16352
|
-
border-radius: 15px;
|
|
16353
|
-
object-fit: cover;
|
|
16354
|
-
transform: scale(-1, 1);
|
|
16355
|
-
`;
|
|
16356
|
-
const $5fd6e456b33aeaa7$export$778ed67917f5eacf = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16357
|
-
display: flex;
|
|
16358
|
-
position: absolute;
|
|
16359
|
-
top: 8px;
|
|
16360
|
-
left: 8px;
|
|
16361
|
-
gap: 8px;
|
|
16362
|
-
z-index: 15;
|
|
16363
|
-
`;
|
|
16364
|
-
const $5fd6e456b33aeaa7$export$92fe811838849d7d = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16365
|
-
display: flex;
|
|
16366
|
-
justify-content: center;
|
|
16367
|
-
align-items: center;
|
|
16368
|
-
width: 26px;
|
|
16369
|
-
height: 26px;
|
|
16370
|
-
border-radius: 50%;
|
|
16371
|
-
background-color: rgba(28, 32, 36, 0.25);
|
|
16372
|
-
z-index: 2;
|
|
16373
|
-
`;
|
|
16374
|
-
const $5fd6e456b33aeaa7$export$65550b47dde6d016 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16375
|
-
position: absolute;
|
|
16376
|
-
width: 300px;
|
|
16377
|
-
height: 300px;
|
|
16378
|
-
background-color: black;
|
|
16379
|
-
border-radius: 15px;
|
|
16380
|
-
z-index: 1;
|
|
16381
|
-
display: ${({ webcamEnabled: webcamEnabled })=>webcamEnabled ? "none" : "flex"};
|
|
16382
|
-
align-items: center;
|
|
16383
|
-
justify-content: center;
|
|
16384
|
-
`;
|
|
16385
|
-
const $5fd6e456b33aeaa7$export$48377ae1c677702b = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16386
|
-
position: absolute;
|
|
16387
|
-
bottom: 45px;
|
|
16388
|
-
display: flex;
|
|
16389
|
-
width: 100%;
|
|
16390
|
-
justify-content: center;
|
|
16391
|
-
gap: 13px;
|
|
16392
|
-
z-index: 2;
|
|
16393
|
-
`;
|
|
16394
|
-
const $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
|
|
16395
|
-
display: flex;
|
|
16396
|
-
align-items: center;
|
|
16397
|
-
justify-content: center;
|
|
16398
|
-
min-width: 48px;
|
|
16399
|
-
min-height: 48px;
|
|
16400
|
-
background-color: ${({ danger: danger })=>danger ? "#d84949" : "#2d2d2d"};
|
|
16401
|
-
border: none;
|
|
16402
|
-
border-radius: 15px;
|
|
16403
|
-
padding: 0 8px;
|
|
16404
|
-
gap: 8px;
|
|
16405
|
-
cursor: pointer;
|
|
16406
|
-
|
|
16407
|
-
p {
|
|
16408
|
-
color: white;
|
|
16409
|
-
font-size: 14px;
|
|
16410
|
-
font-weight: 600;
|
|
16411
|
-
margin: 0;
|
|
16412
|
-
}
|
|
17018
|
+
};
|
|
17019
|
+
var $317aa81f07421dfd$export$2e2bcd8739ae039 = $317aa81f07421dfd$var$GreetingView;
|
|
16413
17020
|
|
|
16414
|
-
&:hover {
|
|
16415
|
-
border: 2px solid ${({ danger: danger })=>danger ? "#fc7d7d" : "#8d8d8d"};
|
|
16416
|
-
}
|
|
16417
17021
|
|
|
16418
|
-
svg {
|
|
16419
|
-
width: 24px;
|
|
16420
|
-
height: 24px;
|
|
16421
|
-
}
|
|
16422
|
-
`;
|
|
16423
|
-
const $5fd6e456b33aeaa7$export$c7a6f02121c3b3b5 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16424
|
-
display: flex;
|
|
16425
|
-
flex-direction: column;
|
|
16426
|
-
align-items: flex-start;
|
|
16427
|
-
width: 350px;
|
|
16428
17022
|
|
|
16429
|
-
h3 {
|
|
16430
|
-
margin: 0;
|
|
16431
|
-
}
|
|
16432
|
-
`;
|
|
16433
|
-
const $5fd6e456b33aeaa7$export$916d4667067f956a = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h3`
|
|
16434
|
-
font-size: 20px;
|
|
16435
|
-
line-height: 24px;
|
|
16436
|
-
font-weight: 700;
|
|
16437
|
-
margin: 0;
|
|
16438
|
-
font-family: Gazpacho;
|
|
16439
|
-
`;
|
|
16440
|
-
const $5fd6e456b33aeaa7$export$190947c3048e2d5d = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
|
|
16441
|
-
font-size: 16px;
|
|
16442
|
-
line-height: 22px;
|
|
16443
|
-
font-weight: 400;
|
|
16444
|
-
`;
|
|
16445
|
-
const $5fd6e456b33aeaa7$export$f5b8910cec6cf069 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).input`
|
|
16446
|
-
width: 100%;
|
|
16447
|
-
border: 1px solid #c9c9ca;
|
|
16448
|
-
border-radius: 8px;
|
|
16449
|
-
height: 50px;
|
|
16450
|
-
padding: 14px 12px;
|
|
16451
|
-
box-sizing: border-box;
|
|
16452
|
-
margin-top: 40px;
|
|
16453
|
-
font-size: 16px;
|
|
16454
|
-
`;
|
|
16455
|
-
const $5fd6e456b33aeaa7$export$353f5b6fc5456de1 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
|
|
16456
|
-
width: 100%;
|
|
16457
|
-
background-color: #1d1c20;
|
|
16458
|
-
color: white;
|
|
16459
|
-
padding: 0;
|
|
16460
|
-
outline: inherit;
|
|
16461
|
-
height: 50px;
|
|
16462
|
-
border: 0;
|
|
16463
|
-
border-radius: 8px;
|
|
16464
|
-
margin-top: 15px;
|
|
16465
|
-
font-size: 16px;
|
|
16466
|
-
line-height: 19px;
|
|
16467
|
-
font-weight: 500;
|
|
16468
|
-
cursor: pointer;
|
|
16469
|
-
`;
|
|
16470
|
-
const $5fd6e456b33aeaa7$export$a06f1c675e846f6f = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).footer`
|
|
16471
|
-
display: flex;
|
|
16472
|
-
flex: 1;
|
|
16473
|
-
justify-content: flex-end;
|
|
16474
|
-
flex-direction: column;
|
|
16475
|
-
margin-bottom: 30px;
|
|
16476
|
-
align-items: center;
|
|
16477
|
-
text-align: center;
|
|
16478
|
-
width: 300px;
|
|
16479
|
-
`;
|
|
16480
|
-
const $5fd6e456b33aeaa7$export$53e4a0ea45e729a2 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h5`
|
|
16481
|
-
font-weight: 700;
|
|
16482
|
-
font-size: 16px;
|
|
16483
|
-
line-height: 19px;
|
|
16484
|
-
margin: 0;
|
|
16485
|
-
font-family: Gazpacho;
|
|
16486
|
-
`;
|
|
16487
|
-
const $5fd6e456b33aeaa7$export$eb20cbaff2d739a5 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
|
|
16488
|
-
font-weight: 400;
|
|
16489
|
-
font-size: 12px;
|
|
16490
|
-
line-height: 14px;
|
|
16491
|
-
color: black;
|
|
16492
|
-
margin-bottom: 0;
|
|
16493
|
-
margin-top: 10px;
|
|
16494
|
-
`;
|
|
16495
|
-
const $5fd6e456b33aeaa7$export$d4a1a815e49dfefd = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
|
|
16496
|
-
display: flex;
|
|
16497
|
-
flex-direction: column;
|
|
16498
|
-
align-items: center;
|
|
16499
|
-
justify-content: center;
|
|
16500
|
-
background-color: #fff;
|
|
16501
|
-
color: #1d1c20;
|
|
16502
|
-
height: 100%;
|
|
16503
|
-
`;
|
|
16504
17023
|
|
|
16505
17024
|
|
|
16506
17025
|
|
|
16507
17026
|
|
|
16508
17027
|
|
|
17028
|
+
const $151f85d85248cda3$var$Bold = ({ children: children })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
17029
|
+
className: "font-medium text-primary",
|
|
17030
|
+
children: children
|
|
17031
|
+
});
|
|
17032
|
+
const $151f85d85248cda3$export$ed71079a84f20635 = ()=>{
|
|
17033
|
+
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
17034
|
+
const modalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
|
|
17035
|
+
const [requests, setRequests] = (0, $jQDcL$react.useState)([]);
|
|
17036
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17037
|
+
modalState.setOpen(requests.length !== 0);
|
|
17038
|
+
}, [
|
|
17039
|
+
modalState,
|
|
17040
|
+
requests.length
|
|
17041
|
+
]);
|
|
17042
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17043
|
+
const onAccessRequest = (event)=>{
|
|
17044
|
+
setRequests([
|
|
17045
|
+
...requests,
|
|
17046
|
+
event.detail
|
|
17047
|
+
]);
|
|
17048
|
+
};
|
|
17049
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("accessRequest", onAccessRequest);
|
|
17050
|
+
return ()=>{
|
|
17051
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("accessRequest", onAccessRequest);
|
|
17052
|
+
};
|
|
17053
|
+
}, [
|
|
17054
|
+
setRequests,
|
|
17055
|
+
modalState,
|
|
17056
|
+
requests
|
|
17057
|
+
]);
|
|
17058
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17059
|
+
const onAgentIdentity = async ()=>{
|
|
17060
|
+
const requests = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getRoomPeers();
|
|
17061
|
+
setRequests(requests.waitingRequests);
|
|
17062
|
+
};
|
|
17063
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("agentIdentity", onAgentIdentity);
|
|
17064
|
+
return ()=>{
|
|
17065
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("agentIdentity", onAgentIdentity);
|
|
17066
|
+
};
|
|
17067
|
+
}, [
|
|
17068
|
+
modalState
|
|
17069
|
+
]);
|
|
17070
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17071
|
+
const onEnterRoom = async (event)=>{
|
|
17072
|
+
setRequests(event.detail.waitingRequests);
|
|
17073
|
+
};
|
|
17074
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
|
|
17075
|
+
return ()=>{
|
|
17076
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
|
|
17077
|
+
};
|
|
17078
|
+
}, [
|
|
17079
|
+
modalState
|
|
17080
|
+
]);
|
|
17081
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17082
|
+
const onCancelAccessRequest = async (event)=>{
|
|
17083
|
+
const id = event.detail.id;
|
|
17084
|
+
const removeCanceled = requests.filter((rq)=>{
|
|
17085
|
+
return id !== rq.id;
|
|
17086
|
+
});
|
|
17087
|
+
setRequests(removeCanceled);
|
|
17088
|
+
};
|
|
17089
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("cancelAccessRequest", onCancelAccessRequest);
|
|
17090
|
+
return ()=>{
|
|
17091
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("cancelAccessRequest", onCancelAccessRequest);
|
|
17092
|
+
};
|
|
17093
|
+
}, [
|
|
17094
|
+
modalState,
|
|
17095
|
+
requests
|
|
17096
|
+
]);
|
|
17097
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialog), {
|
|
17098
|
+
open: modalState.isOpen,
|
|
17099
|
+
onOpenChange: (open)=>{
|
|
17100
|
+
modalState.setOpen(open);
|
|
17101
|
+
},
|
|
17102
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogContent), {
|
|
17103
|
+
children: [
|
|
17104
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogHeader), {
|
|
17105
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
|
|
17106
|
+
className: "flex flex-col align-items items-center gap-6 mb-6",
|
|
17107
|
+
children: [
|
|
17108
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Avatar), {
|
|
17109
|
+
className: "w-[54px] h-[54px] text-3xl font-semibold",
|
|
17110
|
+
name: requests[0]?.profile?.name || t("requestAccess.defaultName")
|
|
17111
|
+
}),
|
|
17112
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
|
|
17113
|
+
className: "w-full text-center text-lg font-normal",
|
|
17114
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacti18next.Trans), {
|
|
17115
|
+
i18nKey: "requestAccess.wantToJoin",
|
|
17116
|
+
values: {
|
|
17117
|
+
name: requests[0]?.profile?.name || t("requestAccess.defaultName")
|
|
17118
|
+
},
|
|
17119
|
+
components: {
|
|
17120
|
+
bold: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($151f85d85248cda3$var$Bold, {})
|
|
17121
|
+
}
|
|
17122
|
+
})
|
|
17123
|
+
})
|
|
17124
|
+
]
|
|
17125
|
+
})
|
|
17126
|
+
}),
|
|
17127
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$snapcalldesignsystem.AlertDialogFooter), {
|
|
17128
|
+
className: "w-full",
|
|
17129
|
+
children: [
|
|
17130
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogCancel), {
|
|
17131
|
+
className: "w-full",
|
|
17132
|
+
onClick: ()=>{
|
|
17133
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).denyAccessRequest(requests[0]?.id);
|
|
17134
|
+
requests.shift();
|
|
17135
|
+
setRequests(requests);
|
|
17136
|
+
},
|
|
17137
|
+
children: t("requestAccess.deny")
|
|
17138
|
+
}),
|
|
17139
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.AlertDialogAction), {
|
|
17140
|
+
className: "w-full",
|
|
17141
|
+
onClick: ()=>{
|
|
17142
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).acceptAccessRequest(requests[0]?.id);
|
|
17143
|
+
requests.shift();
|
|
17144
|
+
setRequests(requests);
|
|
17145
|
+
},
|
|
17146
|
+
variant: "primary",
|
|
17147
|
+
children: t("requestAccess.admit")
|
|
17148
|
+
})
|
|
17149
|
+
]
|
|
17150
|
+
})
|
|
17151
|
+
]
|
|
17152
|
+
})
|
|
17153
|
+
});
|
|
17154
|
+
};
|
|
17155
|
+
|
|
16509
17156
|
|
|
16510
|
-
const $
|
|
17157
|
+
const $ee8cb448c2c74888$var$currentTheme = (0, $9295e87e6b93e693$export$3bfd0d5209a8006a)();
|
|
17158
|
+
const $ee8cb448c2c74888$var$currentLanguage = (0, $393bda1b33846dfc$export$604ba5624273df44)();
|
|
17159
|
+
const $ee8cb448c2c74888$var$queryClient = new (0, $jQDcL$reactquery.QueryClient)();
|
|
17160
|
+
let $ee8cb448c2c74888$var$timestampCriticalError = -1;
|
|
17161
|
+
const $ee8cb448c2c74888$var$StreamUI = ({ options: options })=>{
|
|
16511
17162
|
const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
|
|
16512
|
-
const [
|
|
16513
|
-
const
|
|
16514
|
-
const
|
|
16515
|
-
const
|
|
16516
|
-
const [
|
|
16517
|
-
const [
|
|
16518
|
-
const
|
|
16519
|
-
const
|
|
16520
|
-
|
|
16521
|
-
|
|
16522
|
-
|
|
16523
|
-
|
|
16524
|
-
|
|
16525
|
-
|
|
16526
|
-
|
|
16527
|
-
|
|
16528
|
-
|
|
17163
|
+
const [selfPeerId, setSelfPeerId] = (0, $jQDcL$react.useState)(undefined);
|
|
17164
|
+
const streamUIContainerRef = (0, $jQDcL$react.useRef)(null);
|
|
17165
|
+
const videosContainerRef = (0, $jQDcL$react.useRef)(null);
|
|
17166
|
+
const remoteTilesContainerRef = (0, $jQDcL$react.useRef)(null);
|
|
17167
|
+
const [streamState, setStreamState] = (0, $jQDcL$react.useState)(options.recorder?.enabled ? "recorder" : options.greeting ? "greeting" : "loading");
|
|
17168
|
+
const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $jQDcL$react.useState)(false);
|
|
17169
|
+
const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $jQDcL$react.useState)(false);
|
|
17170
|
+
const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $jQDcL$react.useState)(false);
|
|
17171
|
+
const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $jQDcL$react.useState)(false);
|
|
17172
|
+
const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $jQDcL$react.useState)(false);
|
|
17173
|
+
const [theme, setTheme] = (0, $jQDcL$react.useState)($ee8cb448c2c74888$var$currentTheme);
|
|
17174
|
+
const [language, setLanguage] = (0, $jQDcL$react.useState)(options.language || $ee8cb448c2c74888$var$currentLanguage);
|
|
17175
|
+
const [profile, setProfile] = (0, $jQDcL$react.useState)({});
|
|
17176
|
+
const [muted, setMuted] = (0, $jQDcL$react.useState)(true);
|
|
17177
|
+
const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
|
|
17178
|
+
const [screensharing, setScreensharing] = (0, $jQDcL$react.useState)(false);
|
|
17179
|
+
const [isAgent, setIsAgent] = (0, $jQDcL$react.useState)(false);
|
|
17180
|
+
const [userInteractionTriggered, setUserInteractionTriggered] = (0, $jQDcL$react.useState)(false);
|
|
17181
|
+
const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(streamUIContainerRef.current);
|
|
17182
|
+
const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $jQDcL$react.useState)(false);
|
|
17183
|
+
const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $jQDcL$react.useState)(false);
|
|
17184
|
+
const [videoRecording, setVideoRecording] = (0, $jQDcL$react.useState)({
|
|
17185
|
+
requested: false,
|
|
17186
|
+
started: false
|
|
17187
|
+
});
|
|
17188
|
+
const [isRecordingStartPopupOpen, setRecordingStartPopupOpen] = (0, $jQDcL$react.useState)(false);
|
|
17189
|
+
const [permissions, setPermissions] = (0, $jQDcL$react.useState)([]);
|
|
17190
|
+
const [plan, setPlan] = (0, $jQDcL$react.useState)(undefined);
|
|
17191
|
+
const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
|
|
17192
|
+
const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
|
|
17193
|
+
const onWebcamUpdate = (event)=>{
|
|
17194
|
+
if (event.type === "localVideoAvailable") setStreaming(true);
|
|
17195
|
+
else setStreaming(false);
|
|
17196
|
+
};
|
|
17197
|
+
const onScreenshareUpdate = (event)=>{
|
|
17198
|
+
if (event.type === "screenshareEnabled") setScreensharing(true);
|
|
17199
|
+
else setScreensharing(false);
|
|
17200
|
+
};
|
|
17201
|
+
const onMicrophoneUpdate = (event)=>{
|
|
17202
|
+
if (event.type === "microphoneMute") setMuted(true);
|
|
17203
|
+
else setMuted(false);
|
|
17204
|
+
};
|
|
17205
|
+
const onVideoRecordingStarted = ()=>{
|
|
17206
|
+
setVideoRecording({
|
|
17207
|
+
requested: true,
|
|
17208
|
+
started: true
|
|
17209
|
+
});
|
|
17210
|
+
};
|
|
17211
|
+
const onVideoRecordingStopped = ()=>{
|
|
17212
|
+
setVideoRecording({
|
|
17213
|
+
requested: false,
|
|
17214
|
+
started: false
|
|
17215
|
+
});
|
|
17216
|
+
};
|
|
17217
|
+
const onVideoRecordingRequested = (0, $jQDcL$react.useCallback)(()=>{
|
|
17218
|
+
setVideoRecording({
|
|
17219
|
+
requested: true,
|
|
17220
|
+
started: false
|
|
17221
|
+
});
|
|
17222
|
+
setRecordingStartPopupOpen(true);
|
|
17223
|
+
(0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("notifications.recording"), {
|
|
17224
|
+
duration: 10000,
|
|
17225
|
+
icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $24108d3063533819$export$d9f09da0f8d1c822), {}),
|
|
17226
|
+
messageStyle: {
|
|
17227
|
+
fontWeight: 600
|
|
17228
|
+
}
|
|
17229
|
+
});
|
|
17230
|
+
}, [
|
|
17231
|
+
t
|
|
17232
|
+
]);
|
|
17233
|
+
const onDefaultAudioDeviceChange = (event)=>{
|
|
17234
|
+
const micro = event.detail.label;
|
|
17235
|
+
(0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${micro}`, {
|
|
17236
|
+
duration: 3000,
|
|
17237
|
+
icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {}),
|
|
17238
|
+
messageStyle: {
|
|
17239
|
+
fontWeight: 600
|
|
17240
|
+
}
|
|
17241
|
+
});
|
|
17242
|
+
};
|
|
17243
|
+
const onSelfProfileUpdate = (event)=>{
|
|
17244
|
+
const { profile: profile } = event.detail;
|
|
17245
|
+
setProfile(profile);
|
|
17246
|
+
};
|
|
17247
|
+
const onCallEnd = ()=>{
|
|
17248
|
+
(0, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
|
|
17249
|
+
setStreamState("ended");
|
|
17250
|
+
setMuted(true);
|
|
17251
|
+
setStreaming(false);
|
|
17252
|
+
setScreensharing(false);
|
|
17253
|
+
setUserInteractionTriggered(false);
|
|
17254
|
+
};
|
|
17255
|
+
const onCallTerminated = ()=>{
|
|
17256
|
+
(0, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
|
|
17257
|
+
setStreamState("terminated");
|
|
17258
|
+
};
|
|
17259
|
+
const onInvalidRoom = ()=>{
|
|
17260
|
+
setStreamState("expired");
|
|
17261
|
+
};
|
|
17262
|
+
const onAgentIdentity = (event)=>{
|
|
17263
|
+
const { success: success, email: email, name: name, avatarUrl: avatarUrl } = event.detail;
|
|
17264
|
+
if (success) {
|
|
17265
|
+
setIsAgent(true);
|
|
17266
|
+
setProfile({
|
|
17267
|
+
email: email,
|
|
17268
|
+
name: name,
|
|
17269
|
+
avatarUrl: avatarUrl
|
|
17270
|
+
});
|
|
17271
|
+
if (email) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).identify(null, {
|
|
17272
|
+
email: email
|
|
16529
17273
|
});
|
|
16530
|
-
},
|
|
17274
|
+
} else (0, ($parcel$interopDefault($jQDcL$reacthottoast)))("An error occured while trying to join the room as an agent", {
|
|
17275
|
+
className: "error"
|
|
17276
|
+
});
|
|
16531
17277
|
};
|
|
16532
|
-
const
|
|
16533
|
-
|
|
16534
|
-
|
|
16535
|
-
|
|
16536
|
-
|
|
16537
|
-
|
|
16538
|
-
if (audioTrack) setMicEnabled(true);
|
|
16539
|
-
audioTrack?.stop();
|
|
16540
|
-
} catch (err) {
|
|
16541
|
-
console.error("Get User Media Failed: ", err);
|
|
17278
|
+
const onCriticalError = (event)=>{
|
|
17279
|
+
const duration = 20000;
|
|
17280
|
+
const now = Date.now();
|
|
17281
|
+
if (event.detail.code === "USERLIMIT") {
|
|
17282
|
+
setStreamState("full");
|
|
17283
|
+
return;
|
|
16542
17284
|
}
|
|
16543
|
-
|
|
16544
|
-
|
|
16545
|
-
|
|
16546
|
-
|
|
17285
|
+
if ($ee8cb448c2c74888$var$timestampCriticalError !== -1 && $ee8cb448c2c74888$var$timestampCriticalError + duration > now) return;
|
|
17286
|
+
$ee8cb448c2c74888$var$timestampCriticalError = now;
|
|
17287
|
+
(0, $84c6cbcbb594d072$export$3a57e165650c636f)(`A critical error has occurred (error ${event.detail.code}).`, {
|
|
17288
|
+
icon: (0, $e8ac63718934c648$export$c7df1b15b59b1df2),
|
|
17289
|
+
button: {
|
|
17290
|
+
text: "Reload",
|
|
17291
|
+
action: ()=>{
|
|
17292
|
+
window.location.reload();
|
|
17293
|
+
}
|
|
17294
|
+
},
|
|
17295
|
+
duration: duration
|
|
16547
17296
|
});
|
|
16548
|
-
|
|
16549
|
-
|
|
16550
|
-
|
|
17297
|
+
};
|
|
17298
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17299
|
+
try {
|
|
17300
|
+
localStorage.setItem("stream_ui_theme", theme);
|
|
17301
|
+
} catch (localStorageError) {
|
|
17302
|
+
console.warn(localStorageError);
|
|
16551
17303
|
}
|
|
16552
17304
|
}, [
|
|
16553
|
-
|
|
17305
|
+
theme
|
|
16554
17306
|
]);
|
|
16555
|
-
|
|
16556
|
-
|
|
16557
|
-
|
|
16558
|
-
|
|
16559
|
-
|
|
17307
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17308
|
+
try {
|
|
17309
|
+
localStorage.setItem("stream_ui_language", language);
|
|
17310
|
+
(0, $b45c0bcc142f0b5e$export$2e2bcd8739ae039).changeLanguage(language);
|
|
17311
|
+
} catch (localStorageError) {
|
|
17312
|
+
console.warn(localStorageError);
|
|
17313
|
+
}
|
|
16560
17314
|
}, [
|
|
16561
|
-
|
|
17315
|
+
language
|
|
16562
17316
|
]);
|
|
16563
17317
|
(0, $jQDcL$react.useEffect)(()=>{
|
|
16564
|
-
|
|
16565
|
-
|
|
16566
|
-
|
|
16567
|
-
|
|
16568
|
-
|
|
16569
|
-
|
|
17318
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onWebcamUpdate);
|
|
17319
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoUnavailable", onWebcamUpdate);
|
|
17320
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareUpdate);
|
|
17321
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("screenshareDisabled", onScreenshareUpdate);
|
|
17322
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onMicrophoneUpdate);
|
|
17323
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneMute", onMicrophoneUpdate);
|
|
17324
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneUnmute", onMicrophoneUpdate);
|
|
17325
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
|
|
17326
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("selfProfileUpdate", onSelfProfileUpdate);
|
|
17327
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("terminateRoom", onCallTerminated);
|
|
17328
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("leaveRoom", onCallEnd);
|
|
17329
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("invalidRoom", onInvalidRoom);
|
|
17330
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("agentIdentity", onAgentIdentity);
|
|
17331
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("criticalError", onCriticalError);
|
|
17332
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("videoRecordingStarted", onVideoRecordingStarted);
|
|
17333
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("videoRecordingStopped", onVideoRecordingStopped);
|
|
17334
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("videoRecordingRequested", onVideoRecordingRequested);
|
|
17335
|
+
return ()=>{
|
|
17336
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onWebcamUpdate);
|
|
17337
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoUnavailable", onWebcamUpdate);
|
|
17338
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareUpdate);
|
|
17339
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", onScreenshareUpdate);
|
|
17340
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onMicrophoneUpdate);
|
|
17341
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneMute", onMicrophoneUpdate);
|
|
17342
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneUnmute", onMicrophoneUpdate);
|
|
17343
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
|
|
17344
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("selfProfileUpdate", onSelfProfileUpdate);
|
|
17345
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("terminateRoom", onCallTerminated);
|
|
17346
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onCallEnd);
|
|
17347
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("invalidRoom", onInvalidRoom);
|
|
17348
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("agentIdentity", onAgentIdentity);
|
|
17349
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("criticalError", onCriticalError);
|
|
17350
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("videoRecordingStarted", onVideoRecordingStarted);
|
|
17351
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("videoRecordingStopped", onVideoRecordingStopped);
|
|
17352
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("videoRecordingRequested", onVideoRecordingRequested);
|
|
17353
|
+
};
|
|
16570
17354
|
}, [
|
|
16571
|
-
|
|
16572
|
-
videoTrack,
|
|
16573
|
-
width,
|
|
16574
|
-
height
|
|
17355
|
+
onVideoRecordingRequested
|
|
16575
17356
|
]);
|
|
16576
17357
|
(0, $jQDcL$react.useEffect)(()=>{
|
|
16577
|
-
|
|
16578
|
-
|
|
16579
|
-
|
|
16580
|
-
|
|
17358
|
+
const startStreaming = async ()=>{
|
|
17359
|
+
if (!options.greeting && !options.recorder?.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).joinRoom();
|
|
17360
|
+
const state = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState();
|
|
17361
|
+
const peerId = state.peerId;
|
|
17362
|
+
setPlan(state.plan);
|
|
17363
|
+
setPermissions(state.permissions);
|
|
17364
|
+
setSelfPeerId(peerId);
|
|
17365
|
+
if (!options.recorder?.enabled && !options.greeting) try {
|
|
17366
|
+
if (!options.headless) await (0, $c3d5253d9d597eb5$export$494039379563c94d)(options);
|
|
17367
|
+
if (options.controls?.microphone?.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
|
|
17368
|
+
if (options.controls?.camera?.enabled) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo();
|
|
17369
|
+
setUserInteractionTriggered(true);
|
|
17370
|
+
} catch (userInteractionError) {
|
|
17371
|
+
setBlockedDevicesPopupOpen(true);
|
|
17372
|
+
console.error("User interaction trigger failed", userInteractionError);
|
|
17373
|
+
} finally{
|
|
17374
|
+
setStreamState("streaming");
|
|
17375
|
+
}
|
|
17376
|
+
};
|
|
17377
|
+
startStreaming();
|
|
16581
17378
|
}, []);
|
|
16582
|
-
|
|
16583
|
-
|
|
16584
|
-
|
|
16585
|
-
|
|
16586
|
-
|
|
16587
|
-
|
|
16588
|
-
|
|
16589
|
-
|
|
16590
|
-
|
|
16591
|
-
|
|
16592
|
-
|
|
16593
|
-
|
|
16594
|
-
|
|
16595
|
-
|
|
16596
|
-
|
|
16597
|
-
|
|
16598
|
-
|
|
17379
|
+
(0, $jQDcL$react.useEffect)(()=>{
|
|
17380
|
+
const onEnterRoom = async (event)=>{
|
|
17381
|
+
setVideoRecording(event.detail.videoRecording || {
|
|
17382
|
+
requested: false,
|
|
17383
|
+
started: false
|
|
17384
|
+
});
|
|
17385
|
+
if (event.detail.videoRecording?.requested) (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("notifications.recording"), {
|
|
17386
|
+
duration: 11000,
|
|
17387
|
+
icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $24108d3063533819$export$d9f09da0f8d1c822), {}),
|
|
17388
|
+
messageStyle: {
|
|
17389
|
+
fontWeight: 600
|
|
17390
|
+
}
|
|
17391
|
+
});
|
|
17392
|
+
if (!options.recorder?.enabled) setStreamState("streaming");
|
|
17393
|
+
};
|
|
17394
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
|
|
17395
|
+
return ()=>{
|
|
17396
|
+
(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
|
|
17397
|
+
};
|
|
17398
|
+
}, [
|
|
17399
|
+
options,
|
|
17400
|
+
t
|
|
17401
|
+
]);
|
|
17402
|
+
return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactquery.QueryClientProvider), {
|
|
17403
|
+
client: $ee8cb448c2c74888$var$queryClient,
|
|
17404
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8b39f32976a7698a$export$2e2bcd8739ae039).Provider, {
|
|
17405
|
+
value: {
|
|
17406
|
+
token: options.token || "",
|
|
17407
|
+
videoRecording: videoRecording,
|
|
17408
|
+
setVideoRecording: setVideoRecording,
|
|
17409
|
+
headless: Boolean(options.headless),
|
|
17410
|
+
plan: plan,
|
|
17411
|
+
permissions: permissions,
|
|
17412
|
+
selfPeerId: selfPeerId,
|
|
17413
|
+
streamUIContainerRef: streamUIContainerRef,
|
|
17414
|
+
videosContainerRef: videosContainerRef,
|
|
17415
|
+
remoteTilesContainerRef: remoteTilesContainerRef,
|
|
17416
|
+
streamState: streamState,
|
|
17417
|
+
setStreamState: setStreamState,
|
|
17418
|
+
isQuickConnectPopupVisible: isQuickConnectPopupVisible,
|
|
17419
|
+
setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible,
|
|
17420
|
+
isSettingsMenuVisible: isSettingsMenuVisible,
|
|
17421
|
+
setIsSettingsMenuVisible: setIsSettingsMenuVisible,
|
|
17422
|
+
isYoutubePopupVisible: isYoutubePopupVisible,
|
|
17423
|
+
setIsYoutubePopupVisible: setIsYoutubePopupVisible,
|
|
17424
|
+
isLinksharePopupVisible: isLinksharePopupVisible,
|
|
17425
|
+
setIsLinksharePopupVisible: setIsLinksharePopupVisible,
|
|
17426
|
+
isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
|
|
17427
|
+
setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
|
|
17428
|
+
isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
|
|
17429
|
+
setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
|
|
17430
|
+
isRecordingStartPopupOpen: isRecordingStartPopupOpen,
|
|
17431
|
+
setRecordingStartPopupOpen: setRecordingStartPopupOpen,
|
|
17432
|
+
theme: theme,
|
|
17433
|
+
setTheme: setTheme,
|
|
17434
|
+
language: language,
|
|
17435
|
+
setLanguage: setLanguage,
|
|
17436
|
+
options: options,
|
|
17437
|
+
profile: profile,
|
|
17438
|
+
muted: muted,
|
|
17439
|
+
streaming: streaming,
|
|
17440
|
+
screensharing: screensharing,
|
|
17441
|
+
isAgent: isAgent,
|
|
17442
|
+
userInteractionTriggered: userInteractionTriggered,
|
|
17443
|
+
orientation: orientation
|
|
17444
|
+
},
|
|
17445
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$styledcomponents.ThemeProvider), {
|
|
17446
|
+
theme: styledTheme,
|
|
16599
17447
|
children: [
|
|
16600
|
-
|
|
16601
|
-
|
|
16602
|
-
|
|
16603
|
-
|
|
16604
|
-
ref: videoRef,
|
|
16605
|
-
autoPlay: true
|
|
16606
|
-
}),
|
|
16607
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$65550b47dde6d016), {
|
|
16608
|
-
webcamEnabled: webcamEnabled,
|
|
16609
|
-
children: [
|
|
16610
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$778ed67917f5eacf), {
|
|
16611
|
-
children: [
|
|
16612
|
-
!micEnabled && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$92fe811838849d7d), {
|
|
16613
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {
|
|
16614
|
-
status: !micEnabled
|
|
16615
|
-
})
|
|
16616
|
-
}),
|
|
16617
|
-
!webcamEnabled && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$92fe811838849d7d), {
|
|
16618
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ab00aedf8a706bfe$export$2e2bcd8739ae039), {
|
|
16619
|
-
status: !webcamEnabled
|
|
16620
|
-
})
|
|
16621
|
-
})
|
|
16622
|
-
]
|
|
16623
|
-
}),
|
|
16624
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77), {
|
|
16625
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
|
|
16626
|
-
})
|
|
16627
|
-
]
|
|
16628
|
-
}),
|
|
16629
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$48377ae1c677702b), {
|
|
16630
|
-
children: [
|
|
16631
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77), {
|
|
16632
|
-
onClick: onMicrophoneClick,
|
|
16633
|
-
danger: !micEnabled,
|
|
16634
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {
|
|
16635
|
-
status: !micEnabled
|
|
16636
|
-
})
|
|
16637
|
-
}),
|
|
16638
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77), {
|
|
16639
|
-
onClick: onCameraClick,
|
|
16640
|
-
danger: !webcamEnabled,
|
|
16641
|
-
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ab00aedf8a706bfe$export$2e2bcd8739ae039), {
|
|
16642
|
-
status: !webcamEnabled
|
|
16643
|
-
})
|
|
16644
|
-
})
|
|
16645
|
-
]
|
|
16646
|
-
})
|
|
16647
|
-
]
|
|
16648
|
-
}),
|
|
16649
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$c7a6f02121c3b3b5), {
|
|
17448
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e3bb2c5d0e5b45b5$export$20f257fc407da7a3), {}),
|
|
17449
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e41262de25602ed2$export$2e2bcd8739ae039), {}),
|
|
17450
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6), {
|
|
17451
|
+
ref: streamUIContainerRef,
|
|
16650
17452
|
children: [
|
|
16651
|
-
|
|
16652
|
-
|
|
17453
|
+
streamState === "loading" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {}),
|
|
17454
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
|
|
17455
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$snapcalldesignsystem.Toaster), {
|
|
17456
|
+
duration: 3000,
|
|
17457
|
+
className: "gap-2"
|
|
16653
17458
|
}),
|
|
16654
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $
|
|
16655
|
-
|
|
17459
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dcd9e6925c7037c$export$2e2bcd8739ae039), {}),
|
|
17460
|
+
isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $77862aeb490f36a3$export$2e2bcd8739ae039), {
|
|
17461
|
+
close: ()=>{
|
|
17462
|
+
setUserInteractionTriggered(true);
|
|
17463
|
+
setBlockedDevicesPopupOpen(false);
|
|
17464
|
+
}
|
|
16656
17465
|
}),
|
|
16657
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $
|
|
16658
|
-
|
|
16659
|
-
|
|
16660
|
-
|
|
16661
|
-
|
|
16662
|
-
|
|
17466
|
+
streamState === "greeting" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $317aa81f07421dfd$export$2e2bcd8739ae039), {}),
|
|
17467
|
+
streamState === "recorder" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b939cb69b1cbeb59$export$336a011955157f9a), {}),
|
|
17468
|
+
(streamState === "streaming" || streamState === "loading") && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
|
|
17469
|
+
children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $3f6e908c45fcc5b3$export$74636703cfe1eecf), {
|
|
17470
|
+
children: [
|
|
17471
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $151f85d85248cda3$export$ed71079a84f20635), {}),
|
|
17472
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e1930b467e7d8845$export$2e2bcd8739ae039), {}),
|
|
17473
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $88b23a8428e67b66$export$2e2bcd8739ae039), {}),
|
|
17474
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $a21b2aa064cb6c32$export$2e2bcd8739ae039), {}),
|
|
17475
|
+
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f509eaff0d9c05a$export$2e2bcd8739ae039), {})
|
|
17476
|
+
]
|
|
17477
|
+
})
|
|
16663
17478
|
}),
|
|
16664
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $
|
|
16665
|
-
onClick: onSubmit,
|
|
16666
|
-
children: t("greeting.nameSubmit")
|
|
16667
|
-
})
|
|
17479
|
+
(streamState === "ended" || streamState === "terminated" || streamState === "full" || streamState === "expired") && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3d1bfd8f074b99b1$export$2e2bcd8739ae039), {})
|
|
16668
17480
|
]
|
|
16669
17481
|
})
|
|
16670
17482
|
]
|
|
16671
|
-
}),
|
|
16672
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$a06f1c675e846f6f), {
|
|
16673
|
-
children: [
|
|
16674
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$53e4a0ea45e729a2), {
|
|
16675
|
-
children: t("greeting.footerTitle")
|
|
16676
|
-
}),
|
|
16677
|
-
/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$eb20cbaff2d739a5), {
|
|
16678
|
-
children: t("greeting.footerDescription")
|
|
16679
|
-
})
|
|
16680
|
-
]
|
|
16681
17483
|
})
|
|
16682
|
-
|
|
17484
|
+
})
|
|
16683
17485
|
});
|
|
16684
17486
|
};
|
|
16685
|
-
var $
|
|
17487
|
+
var $ee8cb448c2c74888$export$2e2bcd8739ae039 = $ee8cb448c2c74888$var$StreamUI;
|
|
17488
|
+
|
|
17489
|
+
|
|
17490
|
+
|
|
17491
|
+
// https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference#01G2A279ZXW4JT60NKXKX69G49
|
|
17492
|
+
// prettier-ignore
|
|
17493
|
+
// @ts-ignore
|
|
17494
|
+
window.hj = window.hj || function() {
|
|
17495
|
+
(hj.q = hj.q || []).push(arguments);
|
|
17496
|
+
};
|
|
17497
|
+
|
|
16686
17498
|
|
|
16687
17499
|
|
|
16688
17500
|
var $54541b0286afc2de$exports = {};
|
|
16689
|
-
$54541b0286afc2de$exports = "*, :before, :after, ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\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 clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\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.bottom-0 {\n bottom: 0;\n}\n\n.bottom-2 {\n bottom: .5rem;\n}\n\n.bottom-4 {\n bottom: 1rem;\n}\n\n.left-1 {\n left: .25rem;\n}\n\n.left-1\\/2, .left-\\[50\\%\\] {\n left: 50%;\n}\n\n.right-0 {\n right: 0;\n}\n\n.right-1 {\n right: .25rem;\n}\n\n.right-2 {\n right: .5rem;\n}\n\n.right-6 {\n right: 1.5rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.top-2 {\n top: .5rem;\n}\n\n.top-6 {\n top: 1.5rem;\n}\n\n.top-8 {\n top: 2rem;\n}\n\n.top-\\[50\\%\\] {\n top: 50%;\n}\n\n.top-auto {\n top: auto;\n}\n\n.z-10 {\n z-index: 10;\n}\n\n.z-50 {\n z-index: 50;\n}\n\n.z-\\[100\\] {\n z-index: 100;\n}\n\n.z-\\[150\\] {\n z-index: 150;\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.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.my-1 {\n margin-top: .25rem;\n margin-bottom: .25rem;\n}\n\n.-mr-2 {\n margin-right: -.5rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mb-\\[9px\\] {\n margin-bottom: 9px;\n}\n\n.ml-1 {\n margin-left: .25rem;\n}\n\n.mr-2 {\n margin-right: .5rem;\n}\n\n.mr-2\\.5 {\n margin-right: .625rem;\n}\n\n.mt-1 {\n margin-top: .25rem;\n}\n\n.mt-2 {\n margin-top: .5rem;\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-1\\/3 {\n height: 33.3333%;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-14 {\n height: 3.5rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-3 {\n height: .75rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-5 {\n height: 1.25rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-9 {\n height: 2.25rem;\n}\n\n.h-\\[100px\\] {\n height: 100px;\n}\n\n.h-\\[150px\\] {\n height: 150px;\n}\n\n.h-\\[16px\\] {\n height: 16px;\n}\n\n.h-\\[1px\\] {\n height: 1px;\n}\n\n.h-\\[200px\\] {\n height: 200px;\n}\n\n.h-\\[24px\\] {\n height: 24px;\n}\n\n.h-\\[36px\\] {\n height: 36px;\n}\n\n.h-\\[384px\\] {\n height: 384px;\n}\n\n.h-\\[40px\\] {\n height: 40px;\n}\n\n.h-\\[45px\\] {\n height: 45px;\n}\n\n.h-\\[72px\\] {\n height: 72px;\n}\n\n.h-\\[8px\\] {\n height: 8px;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-px {\n height: 1px;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.max-h-\\[180px\\] {\n max-height: 180px;\n}\n\n.max-h-\\[300px\\] {\n max-height: 300px;\n}\n\n.max-h-\\[70px\\] {\n max-height: 70px;\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-full {\n max-height: 100%;\n}\n\n.max-h-screen {\n max-height: 100vh;\n}\n\n.min-h-0 {\n min-height: 0;\n}\n\n.min-h-9 {\n min-height: 2.25rem;\n}\n\n.min-h-\\[80px\\] {\n min-height: 80px;\n}\n\n.w-0 {\n width: 0;\n}\n\n.w-1\\/3 {\n width: 33.3333%;\n}\n\n.w-12 {\n width: 3rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-3 {\n width: .75rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-5 {\n width: 1.25rem;\n}\n\n.w-72 {\n width: 18rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-\\[100px\\] {\n width: 100px;\n}\n\n.w-\\[130px\\] {\n width: 130px;\n}\n\n.w-\\[16px\\] {\n width: 16px;\n}\n\n.w-\\[1px\\] {\n width: 1px;\n}\n\n.w-\\[24px\\] {\n width: 24px;\n}\n\n.w-\\[334px\\] {\n width: 334px;\n}\n\n.w-\\[36px\\] {\n width: 36px;\n}\n\n.w-\\[42px\\] {\n width: 42px;\n}\n\n.w-\\[45px\\] {\n width: 45px;\n}\n\n.w-\\[50\\%\\] {\n width: 50%;\n}\n\n.w-\\[72px\\] {\n width: 72px;\n}\n\n.w-\\[8px\\] {\n width: 8px;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-max {\n width: max-content;\n}\n\n.min-w-0 {\n min-width: 0;\n}\n\n.min-w-\\[120px\\] {\n min-width: 120px;\n}\n\n.min-w-\\[144px\\] {\n min-width: 144px;\n}\n\n.min-w-\\[24px\\] {\n min-width: 24px;\n}\n\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n\n.min-w-full {\n min-width: 100%;\n}\n\n.max-w-\\[1110px\\] {\n max-width: 1110px;\n}\n\n.max-w-\\[350px\\] {\n max-width: 350px;\n}\n\n.max-w-\\[400px\\] {\n max-width: 400px;\n}\n\n.max-w-\\[500px\\] {\n max-width: 500px;\n}\n\n.max-w-\\[70px\\] {\n max-width: 70px;\n}\n\n.max-w-\\[90\\%\\] {\n max-width: 90%;\n}\n\n.max-w-full {\n max-width: 100%;\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.caption-bottom {\n caption-side: bottom;\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-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.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-\\[-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-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[-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.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-default {\n cursor: default;\n}\n\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n\n.cursor-pointer {\n cursor: pointer;\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-1 {\n gap: .25rem;\n}\n\n.gap-1\\.5 {\n gap: .375rem;\n}\n\n.gap-2 {\n gap: .5rem;\n}\n\n.gap-2\\.5 {\n gap: .625rem;\n}\n\n.gap-3 {\n gap: .75rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.gap-\\[10px\\] {\n gap: 10px;\n}\n\n.gap-\\[20px\\] {\n gap: 20px;\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.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-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.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-md {\n border-radius: .375rem !important;\n}\n\n.rounded {\n border-radius: .25rem;\n}\n\n.rounded-2xl {\n border-radius: 1rem;\n}\n\n.rounded-\\[10px\\] {\n border-radius: 10px;\n}\n\n.rounded-\\[3px\\] {\n border-radius: 3px;\n}\n\n.rounded-\\[4px\\] {\n border-radius: 4px;\n}\n\n.rounded-\\[50\\%\\] {\n border-radius: 50%;\n}\n\n.rounded-\\[64px\\] {\n border-radius: 64px;\n}\n\n.rounded-\\[6px\\] {\n border-radius: 6px;\n}\n\n.rounded-\\[8px\\] {\n border-radius: 8px;\n}\n\n.rounded-\\[inherit\\] {\n border-radius: inherit;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-lg {\n border-radius: .5rem;\n}\n\n.rounded-md {\n border-radius: .375rem;\n}\n\n.rounded-xl {\n border-radius: .75rem;\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-0 {\n border-width: 0;\n}\n\n.border-2, .border-\\[2px\\] {\n border-width: 2px;\n}\n\n.border-\\[3px\\] {\n border-width: 3px;\n}\n\n.border-\\[4px\\] {\n border-width: 4px;\n}\n\n.border-\\[5px\\] {\n border-width: 5px;\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-\\[white\\] {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / 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-gray-1000 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-gray-1000) / var(--tw-border-opacity));\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-gray-600 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-gray-600) / 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-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-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-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-\\[\\#242424\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(36 36 36 / 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-amber-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-amber-100) / var(--tw-bg-opacity));\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-amber-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-amber-700) / var(--tw-bg-opacity));\n}\n\n.bg-black\\/25 {\n background-color: #00000040;\n}\n\n.bg-black\\/\\[\\.6\\] {\n background-color: #0009;\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-blue-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-300) / 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-bronze-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-bronze-300) / 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-brown-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-brown-300) / 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-crimson-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-crimson-100) / 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-crimson-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-crimson-700) / 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-cyan-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-cyan-300) / 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-gold-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gold-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-gray-1000 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-1000) / 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-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-200) / 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-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-300) / 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-gray-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-600) / 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-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-green-100) / 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-green-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-green-700) / 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-lime-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-lime-300) / 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-orange-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-orange-700) / 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-purple-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-purple-300) / 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-red-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-300) / var(--tw-bg-opacity));\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-teal-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-teal-100) / 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-teal-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-teal-700) / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: #0000;\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-violet-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-violet-300) / 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-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / 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-\\[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-0 {\n padding: 0;\n}\n\n.p-1 {\n padding: .25rem;\n}\n\n.p-1\\.5 {\n padding: .375rem;\n}\n\n.p-2 {\n padding: .5rem;\n}\n\n.p-2\\.5 {\n padding: .625rem;\n}\n\n.p-3 {\n padding: .75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-\\[11px\\] {\n padding: 11px;\n}\n\n.px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n\n.px-2\\.5 {\n padding-left: .625rem;\n padding-right: .625rem;\n}\n\n.px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n\n.px-3\\.5 {\n padding-left: .875rem;\n padding-right: .875rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.px-\\[60px\\] {\n padding-left: 60px;\n padding-right: 60px;\n}\n\n.py-0 {\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.py-0\\.5 {\n padding-top: .125rem;\n padding-bottom: .125rem;\n}\n\n.py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n\n.py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n\n.py-12 {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n\n.py-2\\.5 {\n padding-top: .625rem;\n padding-bottom: .625rem;\n}\n\n.py-3 {\n padding-top: .75rem;\n padding-bottom: .75rem;\n}\n\n.pb-2 {\n padding-bottom: .5rem;\n}\n\n.pb-\\[20px\\] {\n padding-bottom: 20px;\n}\n\n.pb-\\[9px\\] {\n padding-bottom: 9px;\n}\n\n.pl-2 {\n padding-left: .5rem;\n}\n\n.pl-2\\.5 {\n padding-left: .625rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.pr-2 {\n padding-right: .5rem;\n}\n\n.pr-3 {\n padding-right: .75rem;\n}\n\n.pr-3\\.5 {\n padding-right: .875rem;\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-\\[10px\\] {\n font-size: 10px;\n}\n\n.text-\\[112px\\] {\n font-size: 112px;\n}\n\n.text-\\[30px\\] {\n font-size: 30px;\n}\n\n.text-lg {\n letter-spacing: -.02em;\n font-size: 18px;\n line-height: 22px;\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-xs {\n letter-spacing: -.02em;\n font-size: 12px;\n line-height: 16px;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.leading-\\[20px\\] {\n line-height: 20px;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.text-\\[\\#707070\\] {\n --tw-text-opacity: 1;\n color: rgb(112 112 112 / 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-blue-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-blue-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-brown-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-brown-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-current {\n color: currentColor;\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-gold-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gold-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-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-100) / var(--tw-text-opacity));\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-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-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-green-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-green-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-lime-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-lime-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.text-plum-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-plum-700) / 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-purple-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-purple-700) / 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-teal-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-teal-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-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-white\\/80 {\n color: #fffc;\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.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-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-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-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-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-inset {\n --tw-ring-inset: inset;\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-blue-700 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-blue-700) / 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-crimson-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-crimson-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-gray-200 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-gray-200) / 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-orange-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-orange-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-teal-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-teal-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-white {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.ring-white\\/20 {\n --tw-ring-color: #fff3;\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 {\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-all {\n transition-property: all;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-transform {\n transition-property: transform;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-1000 {\n transition-duration: 1s;\n}\n\n.duration-200 {\n transition-duration: .2s;\n}\n\n.duration-300 {\n transition-duration: .3s;\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, .fade-in-0 {\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-1000 {\n animation-duration: 1s;\n}\n\n.duration-200 {\n animation-duration: .2s;\n}\n\n.duration-300 {\n animation-duration: .3s;\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-700::placeholder {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-700) / var(--tw-text-opacity));\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.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-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-50) / 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\\: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-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-red-800:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-800) / 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-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-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-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-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-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-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-200:active {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-200) / 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-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-100) / 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-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-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-red-900:active {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-900) / 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-\\[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-\\[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-\\[size\\=xxs\\]\\:bg-amber-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-amber-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-blue-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-bronze-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-bronze-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-brown-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-brown-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-crimson-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-crimson-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-cyan-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-cyan-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-gold-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gold-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-grass-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-grass-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-gray-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-green-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-green-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-indigo-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-indigo-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-lime-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-lime-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-plum-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-plum-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-purple-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-purple-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-red-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-teal-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-teal-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-violet-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-violet-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-yellow-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-yellow-700) / 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\\=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\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-50) / 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\\]\\:font-semibold[data-state=\"active\"] {\n font-weight: 600;\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-\\[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-\\[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[data-state=\"closed\"], .data-\\[state\\=closed\\]\\:fade-out-0[data-state=\"closed\"] {\n --tw-exit-opacity: 0;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out-80[data-state=\"closed\"] {\n --tw-exit-opacity: .8;\n}\n\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=\"open\"] {\n --tw-enter-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-\\[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\\=closed\\]\\:slide-out-to-bottom-\\[100\\%\\][data-state=\"closed\"] {\n --tw-exit-translate-y: 100%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=\"closed\"], .data-\\[state\\=closed\\]\\:slide-out-to-left-\\[50\\%\\][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-bottom-\\[100\\%\\][data-state=\"open\"] {\n --tw-enter-translate-y: 100%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=\"open\"], .data-\\[state\\=open\\]\\:slide-in-from-left-\\[50\\%\\][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-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 (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 (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 .data-\\[state\\=open\\]\\:sm\\:slide-in-from-bottom-full[data-state=\"open\"] {\n --tw-enter-translate-y: 100%;\n }\n}\n\n@media (width >= 768px) {\n .md\\:w-\\[334px\\] {\n width: 334px;\n }\n\n .md\\:w-full {\n width: 100%;\n }\n\n .md\\:w-screen {\n width: 100vw;\n }\n\n .md\\:max-w-\\[420px\\] {\n max-width: 420px;\n }\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.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=\"checkbox\"]) {\n padding-right: 0;\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.\\[\\&\\>\\[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.\\[\\&\\>svg\\]\\:h-\\[18px\\] > svg {\n height: 18px;\n}\n\n.\\[\\&\\>svg\\]\\:w-\\[18px\\] > svg {\n width: 18px;\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\\: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.\\[\\&_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\\:last-child\\]\\:border-0 tr:last-child {\n border-width: 0;\n}\n\n.\\[\\&_tr\\]\\:border-b tr {\n border-bottom-width: 1px;\n}\n\n";
|
|
17501
|
+
$54541b0286afc2de$exports = "*, :before, :after, ::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\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 clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\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.bottom-0 {\n bottom: 0;\n}\n\n.bottom-2 {\n bottom: .5rem;\n}\n\n.bottom-4 {\n bottom: 1rem;\n}\n\n.left-1 {\n left: .25rem;\n}\n\n.left-1\\/2 {\n left: 50%;\n}\n\n.left-2 {\n left: .5rem;\n}\n\n.left-\\[50\\%\\] {\n left: 50%;\n}\n\n.right-0 {\n right: 0;\n}\n\n.right-1 {\n right: .25rem;\n}\n\n.right-2 {\n right: .5rem;\n}\n\n.right-6 {\n right: 1.5rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.top-2 {\n top: .5rem;\n}\n\n.top-6 {\n top: 1.5rem;\n}\n\n.top-8 {\n top: 2rem;\n}\n\n.top-\\[50\\%\\] {\n top: 50%;\n}\n\n.top-auto {\n top: auto;\n}\n\n.z-10 {\n z-index: 10;\n}\n\n.z-50 {\n z-index: 50;\n}\n\n.z-\\[100\\] {\n z-index: 100;\n}\n\n.z-\\[150\\] {\n z-index: 150;\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.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.my-1 {\n margin-top: .25rem;\n margin-bottom: .25rem;\n}\n\n.-mr-2 {\n margin-right: -.5rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n\n.mb-\\[9px\\] {\n margin-bottom: 9px;\n}\n\n.ml-1 {\n margin-left: .25rem;\n}\n\n.mr-2 {\n margin-right: .5rem;\n}\n\n.mr-2\\.5 {\n margin-right: .625rem;\n}\n\n.mt-1 {\n margin-top: .25rem;\n}\n\n.mt-2 {\n margin-top: .5rem;\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-\\[24px\\] {\n height: 24px !important;\n}\n\n.h-1\\/3 {\n height: 33.3333%;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-14 {\n height: 3.5rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-3 {\n height: .75rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-5 {\n height: 1.25rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-9 {\n height: 2.25rem;\n}\n\n.h-\\[100px\\] {\n height: 100px;\n}\n\n.h-\\[150px\\] {\n height: 150px;\n}\n\n.h-\\[16px\\] {\n height: 16px;\n}\n\n.h-\\[1px\\] {\n height: 1px;\n}\n\n.h-\\[200px\\] {\n height: 200px;\n}\n\n.h-\\[24px\\] {\n height: 24px;\n}\n\n.h-\\[36px\\] {\n height: 36px;\n}\n\n.h-\\[384px\\] {\n height: 384px;\n}\n\n.h-\\[400px\\] {\n height: 400px;\n}\n\n.h-\\[40px\\] {\n height: 40px;\n}\n\n.h-\\[45px\\] {\n height: 45px;\n}\n\n.h-\\[54px\\] {\n height: 54px;\n}\n\n.h-\\[72px\\] {\n height: 72px;\n}\n\n.h-\\[8px\\] {\n height: 8px;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-px {\n height: 1px;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.max-h-\\[180px\\] {\n max-height: 180px;\n}\n\n.max-h-\\[300px\\] {\n max-height: 300px;\n}\n\n.max-h-\\[70px\\] {\n max-height: 70px;\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-full {\n max-height: 100%;\n}\n\n.max-h-screen {\n max-height: 100vh;\n}\n\n.min-h-0 {\n min-height: 0;\n}\n\n.min-h-9 {\n min-height: 2.25rem;\n}\n\n.min-h-\\[20px\\] {\n min-height: 20px;\n}\n\n.min-h-\\[400px\\] {\n min-height: 400px;\n}\n\n.min-h-\\[44px\\] {\n min-height: 44px;\n}\n\n.min-h-\\[80px\\] {\n min-height: 80px;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.\\!w-\\[24px\\] {\n width: 24px !important;\n}\n\n.w-0 {\n width: 0;\n}\n\n.w-1\\/3 {\n width: 33.3333%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-12 {\n width: 3rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-3 {\n width: .75rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-5 {\n width: 1.25rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-72 {\n width: 18rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-\\[100px\\] {\n width: 100px;\n}\n\n.w-\\[130px\\] {\n width: 130px;\n}\n\n.w-\\[16px\\] {\n width: 16px;\n}\n\n.w-\\[1px\\] {\n width: 1px;\n}\n\n.w-\\[24px\\] {\n width: 24px;\n}\n\n.w-\\[334px\\] {\n width: 334px;\n}\n\n.w-\\[36px\\] {\n width: 36px;\n}\n\n.w-\\[400px\\] {\n width: 400px;\n}\n\n.w-\\[40px\\] {\n width: 40px;\n}\n\n.w-\\[42px\\] {\n width: 42px;\n}\n\n.w-\\[45px\\] {\n width: 45px;\n}\n\n.w-\\[50\\%\\] {\n width: 50%;\n}\n\n.w-\\[54px\\] {\n width: 54px;\n}\n\n.w-\\[72px\\] {\n width: 72px;\n}\n\n.w-\\[8px\\] {\n width: 8px;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-max {\n width: max-content;\n}\n\n.min-w-0 {\n min-width: 0;\n}\n\n.min-w-\\[120px\\] {\n min-width: 120px;\n}\n\n.min-w-\\[144px\\] {\n min-width: 144px;\n}\n\n.min-w-\\[24px\\] {\n min-width: 24px;\n}\n\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n\n.min-w-full {\n min-width: 100%;\n}\n\n.max-w-\\[1110px\\] {\n max-width: 1110px;\n}\n\n.max-w-\\[315px\\] {\n max-width: 315px;\n}\n\n.max-w-\\[350px\\] {\n max-width: 350px;\n}\n\n.max-w-\\[400px\\] {\n max-width: 400px;\n}\n\n.max-w-\\[500px\\] {\n max-width: 500px;\n}\n\n.max-w-\\[70px\\] {\n max-width: 70px;\n}\n\n.max-w-\\[800px\\] {\n max-width: 800px;\n}\n\n.max-w-\\[90\\%\\] {\n max-width: 90%;\n}\n\n.max-w-full {\n max-width: 100%;\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.caption-bottom {\n caption-side: bottom;\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-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.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-\\[-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-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[-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.-scale-x-\\[1\\], .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-default {\n cursor: default;\n}\n\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n\n.cursor-pointer {\n cursor: pointer;\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.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\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.items-stretch {\n align-items: stretch;\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-1 {\n gap: .25rem;\n}\n\n.gap-1\\.5 {\n gap: .375rem;\n}\n\n.gap-12 {\n gap: 3rem;\n}\n\n.gap-2 {\n gap: .5rem;\n}\n\n.gap-2\\.5 {\n gap: .625rem;\n}\n\n.gap-3 {\n gap: .75rem;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-6 {\n gap: 1.5rem;\n}\n\n.gap-8 {\n gap: 2rem;\n}\n\n.gap-\\[10px\\] {\n gap: 10px;\n}\n\n.gap-\\[20px\\] {\n gap: 20px;\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.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-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-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * 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-md {\n border-radius: .375rem !important;\n}\n\n.rounded {\n border-radius: .25rem;\n}\n\n.rounded-2xl {\n border-radius: 1rem;\n}\n\n.rounded-\\[10px\\] {\n border-radius: 10px;\n}\n\n.rounded-\\[3px\\] {\n border-radius: 3px;\n}\n\n.rounded-\\[4px\\] {\n border-radius: 4px;\n}\n\n.rounded-\\[50\\%\\] {\n border-radius: 50%;\n}\n\n.rounded-\\[64px\\] {\n border-radius: 64px;\n}\n\n.rounded-\\[6px\\] {\n border-radius: 6px;\n}\n\n.rounded-\\[8px\\] {\n border-radius: 8px;\n}\n\n.rounded-\\[inherit\\] {\n border-radius: inherit;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-lg {\n border-radius: .5rem;\n}\n\n.rounded-md {\n border-radius: .375rem;\n}\n\n.rounded-xl {\n border-radius: .75rem;\n}\n\n.rounded-t-3xl {\n border-top-left-radius: 1.5rem;\n border-top-right-radius: 1.5rem;\n}\n\n.\\!border-0 {\n border-width: 0 !important;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2, .border-\\[2px\\] {\n border-width: 2px;\n}\n\n.border-\\[3px\\] {\n border-width: 3px;\n}\n\n.border-\\[4px\\] {\n border-width: 4px;\n}\n\n.border-\\[5px\\] {\n border-width: 5px;\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-t {\n border-top-width: 1px;\n}\n\n.border-\\[\\#292929\\] {\n --tw-border-opacity: 1;\n border-color: rgb(41 41 41 / 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-amber-700 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-amber-700) / var(--tw-border-opacity));\n}\n\n.border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-blue-200) / var(--tw-border-opacity));\n}\n\n.border-blue-700 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-blue-700) / 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-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-gray-200) / 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-red-700 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--color-red-700) / 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-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-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-\\[\\#1C1C1C\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(28 28 28 / var(--tw-bg-opacity));\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-\\[\\#292929\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(41 41 41 / 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-amber-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-amber-100) / var(--tw-bg-opacity));\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-amber-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-amber-700) / var(--tw-bg-opacity));\n}\n\n.bg-black\\/25 {\n background-color: #00000040;\n}\n\n.bg-black\\/\\[\\.6\\] {\n background-color: #0009;\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-blue-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-300) / 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-bronze-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-bronze-300) / 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-brown-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-brown-300) / 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-crimson-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-crimson-100) / 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-crimson-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-crimson-700) / 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-cyan-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-cyan-300) / 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-gold-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gold-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-gray-1000 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-1000) / 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-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-200) / 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-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-300) / 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-gray-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-600) / 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-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-green-100) / 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-green-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-green-700) / 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-lime-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-lime-300) / 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-orange-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-orange-700) / 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-purple-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-purple-300) / 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-red-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-300) / var(--tw-bg-opacity));\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-teal-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-teal-100) / 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-teal-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-teal-700) / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n background-color: #0000;\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-violet-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-violet-300) / 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-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / 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-\\[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-0 {\n padding: 0;\n}\n\n.p-1 {\n padding: .25rem;\n}\n\n.p-1\\.5 {\n padding: .375rem;\n}\n\n.p-2 {\n padding: .5rem;\n}\n\n.p-2\\.5 {\n padding: .625rem;\n}\n\n.p-3 {\n padding: .75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-6 {\n padding: 1.5rem;\n}\n\n.p-8 {\n padding: 2rem;\n}\n\n.p-\\[11px\\] {\n padding: 11px;\n}\n\n.px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n\n.px-2\\.5 {\n padding-left: .625rem;\n padding-right: .625rem;\n}\n\n.px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n\n.px-3\\.5 {\n padding-left: .875rem;\n padding-right: .875rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.px-\\[60px\\] {\n padding-left: 60px;\n padding-right: 60px;\n}\n\n.py-0 {\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.py-0\\.5 {\n padding-top: .125rem;\n padding-bottom: .125rem;\n}\n\n.py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n\n.py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n\n.py-12 {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n\n.py-2\\.5 {\n padding-top: .625rem;\n padding-bottom: .625rem;\n}\n\n.py-3 {\n padding-top: .75rem;\n padding-bottom: .75rem;\n}\n\n.pb-2 {\n padding-bottom: .5rem;\n}\n\n.pb-\\[20px\\] {\n padding-bottom: 20px;\n}\n\n.pb-\\[9px\\] {\n padding-bottom: 9px;\n}\n\n.pl-2 {\n padding-left: .5rem;\n}\n\n.pl-2\\.5 {\n padding-left: .625rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.pr-2 {\n padding-right: .5rem;\n}\n\n.pr-3 {\n padding-right: .75rem;\n}\n\n.pr-3\\.5 {\n padding-right: .875rem;\n}\n\n.pt-1 {\n padding-top: .25rem;\n}\n\n.pt-10 {\n padding-top: 2.5rem;\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-3xl {\n letter-spacing: -.02em;\n font-size: 30px;\n line-height: 38px;\n}\n\n.text-4xl {\n letter-spacing: -.02em;\n font-size: 36px;\n line-height: 44px;\n}\n\n.text-\\[10px\\] {\n font-size: 10px;\n}\n\n.text-\\[112px\\] {\n font-size: 112px;\n}\n\n.text-\\[30px\\] {\n font-size: 30px;\n}\n\n.text-lg {\n letter-spacing: -.02em;\n font-size: 18px;\n line-height: 22px;\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-xs {\n letter-spacing: -.02em;\n font-size: 12px;\n line-height: 16px;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.leading-\\[20px\\] {\n line-height: 20px;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.text-\\[\\#707070\\] {\n --tw-text-opacity: 1;\n color: rgb(112 112 112 / 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-blue-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-blue-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-brown-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-brown-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-current {\n color: currentColor;\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-gold-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gold-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-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-100) / var(--tw-text-opacity));\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-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-700) / var(--tw-text-opacity));\n}\n\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-800) / 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-indigo-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-indigo-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-orange-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-orange-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-primary {\n --tw-text-opacity: 1;\n color: rgb(29 28 32 / 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-red-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-red-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-violet-700 {\n --tw-text-opacity: 1;\n color: rgb(var(--color-violet-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-white\\/80 {\n color: #fffc;\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.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-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-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-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-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-inset {\n --tw-ring-inset: inset;\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-blue-700 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-blue-700) / 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-crimson-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-crimson-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-gray-200 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-gray-200) / 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-orange-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-orange-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-teal-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(var(--color-teal-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-white {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.ring-white\\/20 {\n --tw-ring-color: #fff3;\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 {\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-all {\n transition-property: all;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-transform {\n transition-property: transform;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-1000 {\n transition-duration: 1s;\n}\n\n.duration-200 {\n transition-duration: .2s;\n}\n\n.duration-300 {\n transition-duration: .3s;\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, .fade-in-0 {\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-1000 {\n animation-duration: 1s;\n}\n\n.duration-200 {\n animation-duration: .2s;\n}\n\n.duration-300 {\n animation-duration: .3s;\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.public-page-bg {\n background-image: radial-gradient(50% 50%, #006aff33 0%, #006aff00 100%), linear-gradient(#0000 0%, #fff 100%), linear-gradient(0deg, #0000 0%, #ffffffbf 100%), url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 40V41H41V40H40ZM39 0V40H41V0H39ZM40 39H0V41H40V39Z' fill='%23E8E8E8' mask='url(%23path-1-inside-1_124_242)'/%3E%3C/svg%3E\");\n background-position: 50% calc(50vh - 185px), center, center, center;\n background-repeat: no-repeat, repeat, repeat, repeat;\n background-size: 700px 350px, auto, auto, auto;\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.placeholder\\:text-gray-900::placeholder {\n --tw-text-opacity: 1;\n color: rgb(var(--color-gray-900) / 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-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-50) / 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\\: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-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-red-800:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-800) / 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-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-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-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-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-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-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-200:active {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-200) / 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-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-100) / 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-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-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-red-900:active {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-900) / 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-\\[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-\\[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-\\[size\\=xxs\\]\\:bg-amber-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-amber-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-blue-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-blue-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-bronze-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-bronze-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-brown-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-brown-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-crimson-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-crimson-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-cyan-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-cyan-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-gold-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gold-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-grass-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-grass-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-gray-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-green-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-green-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-indigo-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-indigo-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-lime-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-lime-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-plum-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-plum-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-purple-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-purple-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-red-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-red-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-teal-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-teal-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-violet-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-violet-700) / var(--tw-bg-opacity));\n}\n\n.data-\\[size\\=xxs\\]\\:bg-yellow-700[data-size=\"xxs\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-yellow-700) / 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\\=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\"] {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--color-gray-50) / 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\\]\\:font-semibold[data-state=\"active\"] {\n font-weight: 600;\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-\\[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-\\[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[data-state=\"closed\"], .data-\\[state\\=closed\\]\\:fade-out-0[data-state=\"closed\"] {\n --tw-exit-opacity: 0;\n}\n\n.data-\\[state\\=closed\\]\\:fade-out-80[data-state=\"closed\"] {\n --tw-exit-opacity: .8;\n}\n\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=\"open\"] {\n --tw-enter-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-\\[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\\=closed\\]\\:slide-out-to-bottom-\\[100\\%\\][data-state=\"closed\"] {\n --tw-exit-translate-y: 100%;\n}\n\n.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=\"closed\"], .data-\\[state\\=closed\\]\\:slide-out-to-left-\\[50\\%\\][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-bottom-\\[100\\%\\][data-state=\"open\"] {\n --tw-enter-translate-y: 100%;\n}\n\n.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=\"open\"], .data-\\[state\\=open\\]\\:slide-in-from-left-\\[50\\%\\][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-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 (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 (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 .data-\\[state\\=open\\]\\:sm\\:slide-in-from-bottom-full[data-state=\"open\"] {\n --tw-enter-translate-y: 100%;\n }\n}\n\n@media (width >= 768px) {\n .md\\:w-\\[334px\\] {\n width: 334px;\n }\n\n .md\\:w-full {\n width: 100%;\n }\n\n .md\\:w-screen {\n width: 100vw;\n }\n\n .md\\:max-w-\\[420px\\] {\n max-width: 420px;\n }\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.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=\"checkbox\"]) {\n padding-right: 0;\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.\\[\\&\\>\\[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.\\[\\&\\>svg\\]\\:h-\\[18px\\] > svg {\n height: 18px;\n}\n\n.\\[\\&\\>svg\\]\\:w-\\[18px\\] > svg {\n width: 18px;\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\\: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.\\[\\&_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\\:last-child\\]\\:border-0 tr:last-child {\n border-width: 0;\n}\n\n.\\[\\&_tr\\]\\:border-b tr {\n border-bottom-width: 1px;\n}\n\n";
|
|
16690
17502
|
|
|
16691
17503
|
|
|
16692
17504
|
var $3243e6167f48b6be$exports = {};
|
|
@@ -16732,16 +17544,37 @@ const $e68207026aca356b$var$defaultOptions = {
|
|
|
16732
17544
|
},
|
|
16733
17545
|
streamApiURL: String("https://apistream.snapcall.io"),
|
|
16734
17546
|
apiUrl: String("https://api.snapcall.io/v2"),
|
|
16735
|
-
tracking: false
|
|
17547
|
+
tracking: false,
|
|
17548
|
+
token: undefined,
|
|
17549
|
+
profile: undefined,
|
|
17550
|
+
apiKey: undefined
|
|
16736
17551
|
};
|
|
17552
|
+
let $e68207026aca356b$var$streamUIOption = {};
|
|
16737
17553
|
const $e68207026aca356b$export$3f94917203ab7078 = {
|
|
16738
|
-
init: (
|
|
17554
|
+
init: (option)=>{
|
|
17555
|
+
$e68207026aca356b$var$streamUIOption = option;
|
|
17556
|
+
},
|
|
17557
|
+
joinRoom: async (token, option)=>{
|
|
17558
|
+
return $e68207026aca356b$export$3f94917203ab7078.initV2({
|
|
17559
|
+
...$e68207026aca356b$var$streamUIOption,
|
|
17560
|
+
...option,
|
|
17561
|
+
token: token
|
|
17562
|
+
});
|
|
17563
|
+
},
|
|
17564
|
+
initV2: async ({ element: element, ...options })=>{
|
|
16739
17565
|
if (typeof options.recorder === "boolean") options.recorder = {
|
|
16740
17566
|
enabled: options.recorder,
|
|
16741
17567
|
defaultMode: "photo",
|
|
16742
17568
|
defaultMedia: "camera",
|
|
16743
17569
|
skipOnboarding: false
|
|
16744
17570
|
};
|
|
17571
|
+
await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).init(options.token, {
|
|
17572
|
+
recorder: options.recorder?.enabled,
|
|
17573
|
+
apiKey: options.apiKey,
|
|
17574
|
+
email: options.email,
|
|
17575
|
+
profile: options.profile,
|
|
17576
|
+
authKey: options.authKey
|
|
17577
|
+
});
|
|
16745
17578
|
if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
|
|
16746
17579
|
const mergedOptions = (0, $6b4cf4c12c735fdf$export$6969335ea1e4e77c)($e68207026aca356b$var$defaultOptions, options);
|
|
16747
17580
|
const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
|
|
@@ -16778,13 +17611,6 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
|
|
|
16778
17611
|
if (mergedOptions.tracking) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).init(3111933, 6);
|
|
16779
17612
|
(0, $57b7750d9786bf6f$export$1cbfb36c1655a9a)(rootElement, element);
|
|
16780
17613
|
},
|
|
16781
|
-
initGreeting: (element, onGreetingDone)=>{
|
|
16782
|
-
const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
|
|
16783
|
-
rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3305ca02e86dabd1$export$2e2bcd8739ae039), {
|
|
16784
|
-
onGreetingDone: onGreetingDone
|
|
16785
|
-
}));
|
|
16786
|
-
(0, $57b7750d9786bf6f$export$1cbfb36c1655a9a)(rootElement, element);
|
|
16787
|
-
},
|
|
16788
17614
|
setExtraSettingsOptions: (extraOptions)=>{
|
|
16789
17615
|
const event = new CustomEvent("streamUISetExtraSettingsOptions", {
|
|
16790
17616
|
detail: {
|
|
@@ -16793,10 +17619,10 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
|
|
|
16793
17619
|
});
|
|
16794
17620
|
window.dispatchEvent(event);
|
|
16795
17621
|
},
|
|
17622
|
+
setAgentIdentity: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setAgentIdentity.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
16796
17623
|
startRecord: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).startRecord.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
16797
17624
|
stopRecord: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).stopRecord.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
16798
17625
|
sendNotification: $84c6cbcbb594d072$export$3a57e165650c636f,
|
|
16799
|
-
joinRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).init.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
16800
17626
|
leaveRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).endCall.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
16801
17627
|
terminateRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).terminateRoom.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
16802
17628
|
generateToken: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).generateToken.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
|
|
@@ -16813,10 +17639,6 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
|
|
|
16813
17639
|
window.streamUI = $e68207026aca356b$export$3f94917203ab7078;
|
|
16814
17640
|
// Backward compatibility
|
|
16815
17641
|
window.snapcallAPI = window.snapcallAPI || {
|
|
16816
|
-
join: (...args)=>{
|
|
16817
|
-
console.warn("snapcallAPI.join is deprecated, please use streamUI.joinRoom instead!");
|
|
16818
|
-
return $e68207026aca356b$export$3f94917203ab7078.joinRoom(...args);
|
|
16819
|
-
},
|
|
16820
17642
|
endCall: (...args)=>{
|
|
16821
17643
|
console.warn("snapcallAPI.endCall is deprecated, please use streamUI.leaveRoom instead!");
|
|
16822
17644
|
return $e68207026aca356b$export$3f94917203ab7078.leaveRoom(...args);
|