@snapcall/stream-ui 1.11.0 → 1.11.2

package/dist/stream-ui.esm.js

@@ -1,4 +1,4 @@
-import {jsx as $3Sbms$jsx, jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment} from "react/jsx-runtime";
+import {jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment, jsx as $3Sbms$jsx} from "react/jsx-runtime";
 import {createRoot as $3Sbms$createRoot} from "react-dom/client";
 import $3Sbms$hotjarbrowser from "@hotjar/browser";
 import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
@@ -341,6 +341,9 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
         header: {
             free: "Free version"
         },
+        loader: {
+            connection: "Connecting..."
+        },
         notifications: {
             screensharingError: "An error occured when trying to toggle screensharing",
             microphoneError: "An error occured when trying to toggle the microphone",
@@ -492,6 +495,9 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
         header: {
             free: "Version gratuite"
         },
+        loader: {
+            connection: "Connexion..."
+        },
         notifications: {
             screensharingError: "Une erreur est survenue pendant l'activation du partage d'\xe9cran",
             microphoneError: "Une erreur est survenue pendant l'activation du micro",
@@ -643,6 +649,9 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
         header: {
             free: "Versione gratuita"
         },
+        loader: {
+            connection: "Connessione..."
+        },
         notifications: {
             screensharingError: "Si \xe8 verificato un errore durante l'attivazione della condivisione dello schermo",
             microphoneError: "Si \xe8 verificato un errore durante l'attivazione del microfono",
@@ -4679,9 +4688,9 @@ const $6efc75079651494a$export$2b501aee548bae06 = (0, $3Sbms$styledcomponents).d
   width: 100%;
   height: 100%;
   background-color: #fff;
-  border-radius: 20px;
+  border-radius: inherit;
   z-index: 20;
-  animation: ${$6efc75079651494a$var$Flash} 0.8s;
+  animation: ${$6efc75079651494a$var$Flash} 0.8s forwards;
 `;
 const $6efc75079651494a$export$75b79d6244558c9c = (0, $3Sbms$styledcomponents).img`
   width: 88px;
@@ -5640,7 +5649,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     }), remoteTilesContainerRef.current);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6efc75079651494a$export$98d9314e6a208b24), {
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$98d9314e6a208b24), {
                 ref: SelfTileRef,
                 style: {
                     width: tileWidth,
@@ -5650,16 +5659,16 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                 onClick: onSelfTileClick,
                 onMouseDown: onSelfTileMouseDown,
                 onTouchStart: onSelfTileMouseDown,
-                children: [
-                    snapshotAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
-                        onAnimationEnd: ()=>setSnapshotAnimation(false)
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$ba5a75b023bcdce2), {
-                        orientation: orientation,
-                        border: !streaming && !deviceRequest,
-                        children: content
-                    })
-                ]
+                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6efc75079651494a$export$ba5a75b023bcdce2), {
+                    orientation: orientation,
+                    border: !streaming && !deviceRequest,
+                    children: [
+                        snapshotAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
+                            onAnimationEnd: ()=>setSnapshotAnimation(false)
+                        }),
+                        content
+                    ]
+                })
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$9e533c08c30af08), {
                 show: extended
@@ -10485,6 +10494,10 @@ const $5a48b7481979330f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3Sbms$forwa
 
 
 
+
+
+
+
 const $0590ee3141e14968$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $3Sbms$forwardRef)(function Button({ children: children , variant: variant = "primary" , size: size = "medium" , fullWidth: fullWidth = false , form: form , className: className , ...otherProps }, forwardedRef) {
     const ref = (0, $5a48b7481979330f$export$61dc559f8a0b9bcf)(forwardedRef);
     const { buttonProps: buttonProps , isPressed: isPressed  } = (0, $3Sbms$useButton)(otherProps, ref);
@@ -10555,7 +10568,7 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
                 exit: "opacity-0 transition ease-out"
             },
             children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center",
+                className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
                 ...underlayProps,
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
                     in: state.isOpen,
@@ -10573,29 +10586,34 @@ function $c0bb66c3d546ed81$export$2b77a92f1a5ad772(props) {
                     children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
                         ...modalProps,
                         ref: ref,
-                        className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-auto focus:outline-none", modalSize[size]),
+                        className: (0, $3Sbms$classnames)("bg-white rounded-[10px] z-[1] overflow-x-auto focus:outline-none", modalSize[size]),
                         style: {
                             maxHeight: `${maxHeight}px`
                         },
                         children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                            className: "flex flex-col gap-5 px-5 py-[25px]",
+                            className: "flex flex-col gap-5 px-5 py-[25px] max-h-[inherit]",
                             children: [
                                 /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                                    className: (0, $3Sbms$classnames)("flex flex-col gap-[5px]", {
-                                        "text-center": centered
-                                    }),
+                                    className: "flex flex-col gap-5 overflow-auto",
                                     children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("h2", {
-                                            className: "text-xl font-medium",
-                                            children: title
+                                        /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                                            className: (0, $3Sbms$classnames)("flex flex-col gap-[5px]", {
+                                                "text-center": centered
+                                            }),
+                                            children: [
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)("h2", {
+                                                    className: "text-xl font-medium",
+                                                    children: title
+                                                }),
+                                                description && /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                                                    className: "text-sm text-secondary",
+                                                    children: description
+                                                })
+                                            ]
                                         }),
-                                        description && /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
-                                            className: "text-sm text-secondary",
-                                            children: description
-                                        })
+                                        children
                                     ]
                                 }),
-                                children,
                                 (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
                                     className: (0, $3Sbms$classnames)("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
                                     children: [
@@ -10698,15 +10716,15 @@ const $444e1dd9fa8f6883$export$dce36e07153365d = ()=>/*#__PURE__*/ (0, $3Sbms$js
 
 
 
-const $f4e9ebfd4b02cf09$var$Text = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+const $96999d2514f71e51$var$Text = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
         className: "w-full text-base text-primaryLight font-normal leading-[20px]",
         children: children
     });
-const $f4e9ebfd4b02cf09$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+const $96999d2514f71e51$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("span", {
         className: "text-primary font-medium",
         children: children
     });
-const $f4e9ebfd4b02cf09$var$InstructionRow = ({ children: children , index: index  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+const $96999d2514f71e51$var$InstructionRow = ({ children: children , index: index  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
         className: "flex flex-row justify-center gap-[5px]",
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
@@ -10716,13 +10734,16 @@ const $f4e9ebfd4b02cf09$var$InstructionRow = ({ children: children , index: inde
             children
         ]
     });
-const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type  })=>{
+const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type  })=>{
     const [permissionsState, setPermissionsState] = (0, $3Sbms$useState)("idle");
+    const [isRoomReady, setRoomReady] = (0, $3Sbms$useState)(false);
     const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const device = orientation === "landscape" ? "desktop" : "mobile";
     const videoLength = permissionsState === "granted" ? "short" : "full";
     const videoType = type === "picture" ? "photo" : "video";
     const onDeviceEnabled = ()=>setPermissionsState("granted");
+    const onEnterRoom = ()=>setRoomReady(true);
+    const onLeaveRoom = ()=>setRoomReady(false);
     const ref = (0, $3Sbms$useRef)(null);
     const title = (0, $3Sbms$useMemo)(()=>{
         if (permissionsState === "refused") return "Something went wrong!";
@@ -10735,9 +10756,13 @@ const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type
     (0, $3Sbms$useEffect)(()=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onDeviceEnabled);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onDeviceEnabled);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
         return ()=>{
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onDeviceEnabled);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onDeviceEnabled);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
         };
     }, []);
     const permissionsInstructionIndex = Number(permissionsState !== "granted");
@@ -10746,22 +10771,60 @@ const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type
         state: state,
         centered: permissionsState !== "refused",
         isDismissable: false,
+        primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
+                children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                    fullWidth: true,
+                    onPress: ()=>window.location.reload(),
+                    children: "Allow access"
+                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
+                    children: permissionsState === "granted" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                        fullWidth: true,
+                        onPress: state.close,
+                        children: "Okay"
+                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                        fullWidth: true,
+                        isDisabled: permissionsState === "requesting" || isRoomReady === false,
+                        onPress: async ()=>{
+                            setPermissionsState("requesting");
+                            try {
+                                const mediaResult = await navigator.mediaDevices.getUserMedia({
+                                    audio: true,
+                                    video: true
+                                });
+                                mediaResult.getTracks().forEach((track)=>track.stop());
+                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
+                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
+                                    resolution: "vga",
+                                    frameRate: 20,
+                                    facingMode: "environment"
+                                });
+                            } catch  {
+                                setPermissionsState("refused");
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {}),
+                            "Allow access to cam/mic"
+                        ]
+                    })
+                })
+            }),
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
             className: "flex flex-col gap-[20px]",
             children: [
                 /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
                     className: "flex flex-col gap-[10px]",
                     ref: ref,
-                    children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Text, {
+                    children: permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
                         children: "Without camera and microphone access, you can't take photos or videos to share with the support team. Please grant access in your browser settings."
                     }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
                         children: [
-                            permissionsState !== "granted" && /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                            permissionsState !== "granted" && /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                 index: 1,
-                                children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                     children: [
                                         "When prompted, ",
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                             children: "allow access"
                                         }),
                                         " to camera and microphone."
@@ -10770,31 +10833,31 @@ const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type
                             }),
                             type === "picture" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
                                 children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                             children: [
                                                 "Tap the ",
                                                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$dce36e07153365d), {}),
-                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                                     children: " Camera button"
                                                 }),
                                                 " to take a photo."
                                             ]
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 2 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Text, {
                                             children: "Don't hesitate to take multiple photos for more detail."
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                             children: [
                                                 "You can review your photo and then ",
-                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                                     children: "send it when you're done."
                                                 })
                                             ]
@@ -10804,50 +10867,50 @@ const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type
                             }),
                             type === "video" && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
                                 children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 1 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                             children: [
                                                 "Tap the ",
                                                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$f9da3144ae2525a3), {}),
-                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                                     children: " Record button"
                                                 }),
                                                 " to start a recording."
                                             ]
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 2 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                             children: [
                                                 "You can ",
-                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                                     children: "speak during"
                                                 }),
                                                 " the recording for added detail."
                                             ]
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 3 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                             children: [
                                                 "When you're finished, tap the ",
                                                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $444e1dd9fa8f6883$export$c6a849fd9d9d93a2), {}),
-                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                                     children: " Stop button"
                                                 }),
                                                 "."
                                             ]
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$InstructionRow, {
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$InstructionRow, {
                                         index: 4 + permissionsInstructionIndex,
-                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($f4e9ebfd4b02cf09$var$Text, {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsxs)($96999d2514f71e51$var$Text, {
                                             children: [
                                                 "You can review your video and then ",
-                                                /*#__PURE__*/ (0, $3Sbms$jsx)($f4e9ebfd4b02cf09$var$Bold, {
+                                                /*#__PURE__*/ (0, $3Sbms$jsx)($96999d2514f71e51$var$Bold, {
                                                     children: "send it when you're done"
                                                 }),
                                                 "."
@@ -10868,39 +10931,66 @@ const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type
                         muted: true,
                         loop: true
                     })
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
+
+
+
+const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
+    const QRCodeRef = (0, $3Sbms$useRef)(null);
+    const QRCodeContainerRef = (0, $3Sbms$useRef)(null);
+    const [QRCodeContainerWidth] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(QRCodeContainerRef.current);
+    (0, $3Sbms$useEffect)(()=>{
+        $3Sbms$toCanvas(QRCodeRef.current, window.location.href, {
+            width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
+            errorCorrectionLevel: "Q",
+            margin: 0
+        });
+    }, [
+        QRCodeContainerWidth
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
+        centered: true,
+        title: "Switch to your mobile",
+        description: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
+        isDismissable: false,
+        state: state,
+        primaryAction: ()=>/*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
+                fullWidth: true,
+                onPress: ()=>{
+                    setReady(true);
+                    state.close();
+                },
+                children: "Use desktop version"
+            }),
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+            className: "flex flex-col gap-[20px]",
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    ref: QRCodeContainerRef,
+                    className: "flex flex-1 items-center justify-center relative",
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                            className: "absolute w-1/3 h-1/3 max-w-[70px] max-h-[70px] flex items-center justify-center",
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $16d11fc0880587fd$export$2e2bcd8739ae039), {})
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
+                            ref: QRCodeRef
+                        })
+                    ]
                 }),
-                permissionsState === "refused" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                    onPress: ()=>window.location.reload(),
-                    children: "Allow access"
-                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
-                    children: permissionsState === "granted" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                        onPress: state.close,
-                        children: "Okay"
-                    }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $0590ee3141e14968$export$353f5b6fc5456de1), {
-                        isDisabled: permissionsState === "requesting",
-                        onPress: async ()=>{
-                            setPermissionsState("requesting");
-                            try {
-                                const mediaResult = await navigator.mediaDevices.getUserMedia({
-                                    audio: true,
-                                    video: true
-                                });
-                                mediaResult.getTracks().forEach((track)=>track.stop());
-                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
-                                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
-                                    resolution: "vga",
-                                    frameRate: 20,
-                                    facingMode: "environment"
-                                });
-                            } catch  {
-                                setPermissionsState("refused");
-                            }
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {}),
-                            "Allow access to cam/mic"
-                        ]
-                    })
+                /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+                    className: "flex items-center justify-center text-xs text-primaryLight text-center",
+                    children: "Scan this QR code with a compatible device."
                 })
             ]
         })
@@ -10908,6 +10998,61 @@ const $f4e9ebfd4b02cf09$export$788cb893d96254c8 = ({ state: state , type: type
 };
 
 
+function $d48329960b5b412c$export$fc3bf4634b488af8({ mode: mode  }) {
+    const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const desktop = orientation === "landscape";
+    const [ready, setReady] = (0, $3Sbms$useState)(!desktop);
+    (0, $3Sbms$useEffect)(()=>{
+        if (ready) {
+            setIsPhotoInstructionsModalOpen(mode === "photo" && ready);
+            setIsVideoInstructionsModalOpen(mode === "video" && ready);
+        }
+    }, [
+        ready,
+        mode
+    ]);
+    const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $3Sbms$useState)(mode === "photo" && ready);
+    const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $3Sbms$useState)(mode === "video" && ready);
+    const photoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
+        isOpen: isPhotoInstructionsModalOpen,
+        onOpenChange: setIsPhotoInstructionsModalOpen
+    });
+    const videoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
+        isOpen: isVideoInstructionsModalOpen,
+        onOpenChange: setIsVideoInstructionsModalOpen
+    });
+    return {
+        photoInstructionsModalState: photoInstructionsModalState,
+        videoInstructionsModalState: videoInstructionsModalState,
+        ready: ready,
+        setReady: setReady
+    };
+}
+const $d48329960b5b412c$export$bee10e8ab511933f = ({ state: state  })=>{
+    const [isSwitchToMobileModalOpen, setIsSwitchToMobileOpen] = (0, $3Sbms$useState)(!state.ready);
+    const switchToMobileModalState = (0, $3Sbms$useOverlayTriggerState)({
+        isOpen: isSwitchToMobileModalOpen,
+        onOpenChange: setIsSwitchToMobileOpen
+    });
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $96999d2514f71e51$export$788cb893d96254c8), {
+                state: state.photoInstructionsModalState,
+                type: "picture"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $96999d2514f71e51$export$788cb893d96254c8), {
+                state: state.videoInstructionsModalState,
+                type: "video"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1c8fc500105e5c78$export$f9d8408fefd786da), {
+                state: switchToMobileModalState,
+                setReady: state.setReady
+            })
+        ]
+    });
+};
+
+
 function $a94f21ef9007b90a$export$bd7b6af6aa16550c({ photo: photo = true  }) {
     const [isPhoto, setPhoto] = (0, $3Sbms$useState)(photo);
     const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
@@ -10919,26 +11064,14 @@ function $a94f21ef9007b90a$export$bd7b6af6aa16550c({ photo: photo = true  }) {
     };
 }
 const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
-    const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $3Sbms$useState)(props.state.photo);
-    const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $3Sbms$useState)(!props.state.photo);
-    const photoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
-        isOpen: isPhotoInstructionsModalOpen,
-        onOpenChange: setIsPhotoInstructionsModalOpen
-    });
-    const videoInstructionsModalState = (0, $3Sbms$useOverlayTriggerState)({
-        isOpen: isVideoInstructionsModalOpen,
-        onOpenChange: setIsVideoInstructionsModalOpen
+    const setupModalsState = (0, $d48329960b5b412c$export$fc3bf4634b488af8)({
+        mode: props.state.photo ? "photo" : "video"
     });
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
         className: "flex flex-col bg-primary h-[150px] w-full max-w-[400px] rounded-[15px] p-2.5 gap-2.5",
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f4e9ebfd4b02cf09$export$788cb893d96254c8), {
-                state: photoInstructionsModalState,
-                type: "picture"
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f4e9ebfd4b02cf09$export$788cb893d96254c8), {
-                state: videoInstructionsModalState,
-                type: "video"
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d48329960b5b412c$export$bee10e8ab511933f), {
+                state: setupModalsState
             }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
                 className: "flex flex-1 flex-row px-[10px] w-full",
@@ -10960,7 +11093,7 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
                                 onPress: ()=>{
                                     if (!props.state.streaming) {
                                         props.state.setPhoto(true);
-                                        photoInstructionsModalState.open();
+                                        setupModalsState.photoInstructionsModalState.open();
                                     }
                                 },
                                 isSelected: props.state.photo,
@@ -10970,7 +11103,7 @@ const $a94f21ef9007b90a$export$11a6fe490bbc4873 = (props)=>{
                                 onPress: ()=>{
                                     if (!props.state.streaming) {
                                         props.state.setPhoto(false);
-                                        videoInstructionsModalState.open();
+                                        setupModalsState.videoInstructionsModalState.open();
                                     }
                                 },
                                 isSelected: !props.state.photo,
@@ -11047,7 +11180,7 @@ function $38cdd553fb158eaa$export$4589ed81930b555c(props) {
                 exit: "opacity-0 transition ease-out"
             },
             children: /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: (0, $3Sbms$classnames)("fixed z-[100] inset-0 bg-underlay flex justify-center", desktop ? "items-center" : "items-end"),
+                className: (0, $3Sbms$classnames)("fixed z-[100] inset-0 bg-underlay flex justify-center inter", desktop ? "items-center" : "items-end"),
                 ...underlayProps,
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$CSSTransition), {
                     in: state.isOpen,
@@ -11412,7 +11545,11 @@ const $db82628e5503d51b$export$53819c0e58f98d49 = (props)=>{
         props
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-        children: countdown
+        className: "absolute w-full h-full flex justify-center items-center bg-black/[.6] z-50",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+            className: "text-white/80 text-[112px] font-medium",
+            children: countdown
+        })
     });
 };
 
@@ -11432,6 +11569,7 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
     const [assets, setAssets] = (0, $3Sbms$useState)([]);
     const [assetLoading, setAssetLoading] = (0, $3Sbms$useState)(null);
     const [isAssetsPopupStateOpen, setIsAssetsPopupStateOpen] = (0, $3Sbms$useState)(false);
+    const [facingMode, setFacingMode] = (0, $3Sbms$useState)("user");
     const assetsPopupState = (0, $3Sbms$useOverlayTriggerState)({
         isOpen: isAssetsPopupStateOpen,
         onOpenChange: setIsAssetsPopupStateOpen
@@ -11449,7 +11587,8 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
     ]);
     const onLocalVideoChange = (event)=>{
         if (!event.detail?.camera?.device || !videoElementRef.current) return;
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
+        const { facingMode: newFacingMode  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
+        setFacingMode(newFacingMode);
     };
     const onStopRecord = (0, $3Sbms$useCallback)((event)=>{
         const { url: url , assetId: assetId  } = event.detail;
@@ -11516,43 +11655,45 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
         onStopRecord
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-        className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased",
+        className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased inter",
         children: [
             !menuBarState.photo && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
                 className: "text-base text-white text-center font-medium pt-2.5",
                 children: $92672d57809ea9d3$var$timerText(timer)
             }),
-            countdownVisible && /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "absolute z-50 top-0 bottom-[160px] left-0 right-0 text-[100px] flex items-center justify-center text-center text-white bg-[#000000] opacity-[0.6] ",
-                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $db82628e5503d51b$export$53819c0e58f98d49), {
-                    initialValue: 3,
-                    onFinish: ()=>{
-                        setCountdownVisible(false);
-                        setStartRecordTime(Date.now());
-                        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord();
-                    }
+            /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
+                className: "flex-1 min-h-0 p-2.5",
+                children: /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    className: "relative w-full h-full rounded-[10px]",
+                    children: [
+                        countdownVisible && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $db82628e5503d51b$export$53819c0e58f98d49), {
+                            initialValue: 3,
+                            onFinish: ()=>{
+                                setCountdownVisible(false);
+                                setStartRecordTime(Date.now());
+                                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).startRecord();
+                            }
+                        }),
+                        flashAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
+                            onAnimationEnd: ()=>{
+                                setFlashAnimation(false);
+                                assetsPopupState.open();
+                            }
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
+                            autoPlay: true,
+                            muted: true,
+                            playsInline: true,
+                            ref: videoElementRef,
+                            className: (0, $3Sbms$classnames)("w-full h-full object-cover rounded-[inherit]", {
+                                "scale-x-[-1]": facingMode === "user"
+                            })
+                        })
+                    ]
                 })
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
-                className: "relative flex-1 min-h-0 px-2.5 pt-2.5",
-                children: [
-                    flashAnimation && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$2b501aee548bae06), {
-                        onAnimationEnd: ()=>{
-                            setFlashAnimation(false);
-                            assetsPopupState.open();
-                        }
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)("video", {
-                        autoPlay: true,
-                        muted: true,
-                        playsInline: true,
-                        ref: videoElementRef,
-                        className: "w-full h-full object-cover rounded-[10px]"
-                    })
-                ]
-            }),
             /*#__PURE__*/ (0, $3Sbms$jsx)("div", {
-                className: "flex justify-center p-2.5",
+                className: "flex justify-center px-2.5 pb-2.5",
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a94f21ef9007b90a$export$11a6fe490bbc4873), {
                     state: menuBarState,
                     thumbnail: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c7542aa0d9bb5f39$export$1cd1efc78cb52ca5), {
@@ -11587,13 +11728,17 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d4d374dc7955cc18$export$5c334f209b1aa661), {
                 assets: assets,
                 state: assetsPopupState,
-                onSendAssets: sendAssetsModalState.open,
+                onSendAssets: ()=>{
+                    (0, $c9e496369b59be7a$export$2f377c2162fd02b2).release();
+                    sendAssetsModalState.open();
+                },
                 removeAsset: removeAsset,
                 loading: assetLoading
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
                 title: "Thank you for your submission!",
                 state: sendAssetsModalState,
+                isDismissable: false,
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
                     className: "text-base text-primaryLight",
                     children: "Your photo/video has been successfully sent. We will review it and get back to you soon."
@@ -11604,6 +11749,72 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
 };
 
 
+
+
+
+const $759492438a7a357d$export$7f7cbe89f1eacd2 = (0, $3Sbms$styledcomponents).div`
+  border: 2px solid #ffffff;
+  border-top: 2px solid #000000;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const $759492438a7a357d$export$3b0d6d7590275603 = (0, $3Sbms$styledcomponents).div`
+  position: absolute;
+  background-color: #000000;
+  opacity: 0.9;
+  z-index: 999999;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  gap: 0.25rem;
+`;
+const $759492438a7a357d$export$42a852a2b6b56249 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  gap: 25px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+`;
+const $759492438a7a357d$export$52e284bf30d0364a = (0, $3Sbms$styledcomponents).h2`
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: 'Lato';
+`;
+
+
+const $91d20ee7d2ade85c$export$669f6ea7d267feaf = ()=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $759492438a7a357d$export$3b0d6d7590275603), {
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $759492438a7a357d$export$42a852a2b6b56249), {
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $759492438a7a357d$export$7f7cbe89f1eacd2), {}),
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $759492438a7a357d$export$52e284bf30d0364a), {
+                    children: t("loader.connection")
+                })
+            ]
+        })
+    });
+};
+
+
 const $26ed036cbc17809a$var$currentTheme = (0, $52580db2e49cdd90$export$3bfd0d5209a8006a)();
 const $26ed036cbc17809a$var$currentLanguage = (0, $a3e657fb86ae23f3$export$604ba5624273df44)();
 let $26ed036cbc17809a$var$timestampCriticalError = -1;
@@ -11623,6 +11834,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const [profile, setProfile] = (0, $3Sbms$useState)({});
     const [muted, setMuted] = (0, $3Sbms$useState)(true);
     const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
+    const [isLoading, setLoading] = (0, $3Sbms$useState)(!options.recorder);
     const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
     const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
@@ -11769,6 +11981,8 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             } catch (userInteractionError) {
                 setBlockedDevicesPopupOpen(true);
                 console.error("User interaction trigger failed", userInteractionError);
+            } finally{
+                setLoading(false);
             }
         };
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
@@ -11821,6 +12035,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
                 /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4fb4815baa04b470$export$914ddf2021ea8ee6), {
                     ref: streamUIContainerRef,
                     children: [
+                        isLoading && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $91d20ee7d2ade85c$export$669f6ea7d267feaf), {}),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a42b2ef7646d035$export$2e2bcd8739ae039), {}),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $805d92fa41e6e1b0$export$2e2bcd8739ae039), {}),
                         isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6aca0f707e80bf63$export$2e2bcd8739ae039), {
@@ -11941,6 +12156,7 @@ const $35c6a4b506b7dc62$export$ae01dedf5c052bb = (0, $3Sbms$styledcomponents).vi
   background-color: black;
   border-radius: 15px;
   object-fit: cover;
+  transform: scale(-1, 1);
 `;
 const $35c6a4b506b7dc62$export$778ed67917f5eacf = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -12275,7 +12491,11 @@ var $f8d57e3d223f5089$export$2e2bcd8739ae039 = $f8d57e3d223f5089$var$GreetingVie
 
 
 var $1e2747ca72d0ab49$exports = {};
-$1e2747ca72d0ab49$exports = "*, :before, :after {\n  box-sizing: border-box;\n  border: 0 solid #e5e7eb;\n}\n\n:before, :after {\n  --tw-content: \"\";\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  tab-size: 4;\n  font-feature-settings: normal;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.5;\n}\n\nbody {\n  line-height: inherit;\n  margin: 0;\n}\n\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\nb, strong {\n  font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 1em;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nsup {\n  top: -.5em;\n}\n\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\nbutton, input, optgroup, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\n  -webkit-appearance: button;\n  background-color: #0000;\n  background-image: none;\n}\n\n:-moz-focusring {\n  outline: auto;\n}\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\nsummary {\n  display: list-item;\n}\n\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol, ul, menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::placeholder, textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\n\n:disabled {\n  cursor: default;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n  vertical-align: middle;\n  display: block;\n}\n\nimg, video {\n  max-width: 100%;\n  height: auto;\n}\n\n[hidden] {\n  display: none;\n}\n\n*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #3b82f680;\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.bottom-\\[160px\\] {\n  bottom: 160px;\n}\n\n.left-0 {\n  left: 0;\n}\n\n.right-0 {\n  right: 0;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.m-\\[10px\\] {\n  margin: 10px;\n}\n\n.mx-\\[20px\\] {\n  margin-left: 20px;\n  margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n  margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n  margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n  margin-top: 50px;\n}\n\n.block {\n  display: block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-\\[60px\\] {\n  height: 60px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-\\[235px\\] {\n  height: 235px;\n}\n\n.h-\\[93px\\] {\n  height: 93px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n  min-height: 100%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[400px\\] {\n  width: 400px;\n}\n\n.w-\\[320px\\] {\n  width: 320px;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[30px\\] {\n  width: 30px;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n  max-width: 800px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-auto {\n  flex: auto;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.translate-y-2 {\n  --tw-translate-y: .5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n  --tw-translate-y: 200%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n  --tw-scale-x: .4;\n  --tw-scale-y: .4;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-\\[5px\\] {\n  gap: 5px;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.rounded-lg {\n  border-radius: .5rem;\n}\n\n.rounded-md {\n  border-radius: .375rem;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[15px\\] {\n  border-radius: 15px;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n  border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n  border-radius: 60px;\n}\n\n.rounded-\\[10px\\] {\n  border-radius: 10px;\n}\n\n.rounded-t-\\[15px\\] {\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-secondaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-primaryLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#f12828\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#565656\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-black, .bg-\\[\\#000\\], .bg-\\[\\#000000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n  background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n  --tw-bg-opacity: .9;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-\\[3px\\] {\n  padding: 3px;\n}\n\n.p-\\[12px\\] {\n  padding: 12px;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n  padding-top: 9px;\n  padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n  padding-left: .875rem;\n  padding-right: .875rem;\n}\n\n.px-3 {\n  padding-left: .75rem;\n  padding-right: .75rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n  padding-top: 25px;\n  padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n.pt-2\\.5 {\n  padding-top: .625rem;\n}\n\n.pt-2 {\n  padding-top: .5rem;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-base {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 19px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 17px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.text-\\[100px\\] {\n  font-size: 100px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n  --tw-text-opacity: 1;\n  color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n  text-decoration-line: underline;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-\\[0\\.6\\] {\n  opacity: .6;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n  opacity: .4;\n}\n\n.opacity-90 {\n  opacity: .9;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n  transition-property: transform, border-radius;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n  transition-duration: .3s;\n}\n\n.ease-in-out {\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.ease-in {\n  transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.first-letter\\:capitalize:first-letter {\n  text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n";
+$1e2747ca72d0ab49$exports = "*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #3b82f680;\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.left-0 {\n  left: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.m-\\[10px\\] {\n  margin: 10px;\n}\n\n.mx-\\[20px\\] {\n  margin-left: 20px;\n  margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n  margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n  margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n  margin-top: 50px;\n}\n\n.block {\n  display: block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-\\[60px\\] {\n  height: 60px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-\\[235px\\] {\n  height: 235px;\n}\n\n.h-\\[93px\\] {\n  height: 93px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.h-1\\/3 {\n  height: 33.3333%;\n}\n\n.max-h-\\[inherit\\] {\n  max-height: inherit;\n}\n\n.max-h-\\[70px\\] {\n  max-height: 70px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n  min-height: 100%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[400px\\] {\n  width: 400px;\n}\n\n.w-\\[320px\\] {\n  width: 320px;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[30px\\] {\n  width: 30px;\n}\n\n.w-1\\/3 {\n  width: 33.3333%;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n  max-width: 800px;\n}\n\n.max-w-\\[70px\\] {\n  max-width: 70px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-auto {\n  flex: auto;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.translate-y-2 {\n  --tw-translate-y: .5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n  --tw-translate-y: 200%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n  --tw-scale-x: .4;\n  --tw-scale-y: .4;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-\\[5px\\] {\n  gap: 5px;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.rounded-lg {\n  border-radius: .5rem;\n}\n\n.rounded-md {\n  border-radius: .375rem;\n}\n\n.rounded-\\[15px\\] {\n  border-radius: 15px;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n  border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n  border-radius: 60px;\n}\n\n.rounded-\\[10px\\] {\n  border-radius: 10px;\n}\n\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-t-\\[15px\\] {\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-secondaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-primaryLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\n}\n\n.bg-\\[\\#f12828\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#565656\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-black, .bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n  background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n  --tw-bg-opacity: .9;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-\\[3px\\] {\n  padding: 3px;\n}\n\n.p-\\[12px\\] {\n  padding: 12px;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n  padding-top: 9px;\n  padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n  padding-left: .875rem;\n  padding-right: .875rem;\n}\n\n.px-3 {\n  padding-left: .75rem;\n  padding-right: .75rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n  padding-top: 25px;\n  padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n.pt-2\\.5 {\n  padding-top: .625rem;\n}\n\n.pt-2 {\n  padding-top: .5rem;\n}\n\n.pb-2\\.5 {\n  padding-bottom: .625rem;\n}\n\n.pb-2 {\n  padding-bottom: .5rem;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-base {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 19px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 17px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.text-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-white\\/80 {\n  color: #fffc;\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n  --tw-text-opacity: 1;\n  color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n  text-decoration-line: underline;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n  opacity: .4;\n}\n\n.opacity-90 {\n  opacity: .9;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n  transition-property: transform, border-radius;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n  transition-duration: .3s;\n}\n\n.ease-in-out {\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.ease-in {\n  transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.inter {\n  font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n  .inter {\n    font-family: Inter var, sans-serif;\n  }\n}\n\n.first-letter\\:capitalize:first-letter {\n  text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n";
+
+
+var $e02c50a47b475960$exports = {};
+$e02c50a47b475960$exports = "*, :before, :after {\n  box-sizing: border-box;\n  border: 0 solid #e5e7eb;\n}\n\n:before, :after {\n  --tw-content: \"\";\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  tab-size: 4;\n  font-feature-settings: normal;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.5;\n}\n\nbody {\n  line-height: inherit;\n  margin: 0;\n}\n\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\nb, strong {\n  font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 1em;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nsup {\n  top: -.5em;\n}\n\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\nbutton, input, optgroup, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\n  -webkit-appearance: button;\n  background-color: #0000;\n  background-image: none;\n}\n\n:-moz-focusring {\n  outline: auto;\n}\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\nsummary {\n  display: list-item;\n}\n\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol, ul, menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::placeholder, textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\n\n:disabled {\n  cursor: default;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n  vertical-align: middle;\n  display: block;\n}\n\nimg, video {\n  max-width: 100%;\n  height: auto;\n}\n\n[hidden] {\n  display: none;\n}\n\n";
 
 
 const $24075a5d702d64b3$var$currentURL = new URL(window.location.href);
@@ -12313,12 +12533,27 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
         const mergedOptions = (0, $365e765f9890497b$export$6969335ea1e4e77c)($24075a5d702d64b3$var$defaultOptions, options);
         const rootElement = (0, $3Sbms$createRoot)(element);
         let styleElement = null;
-        styleElement = /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
-            children: (0, (/*@__PURE__*/$parcel$interopDefault($1e2747ca72d0ab49$exports)))
+        styleElement = /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+            children: [
+                options.recorder && /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
+                    children: (0, (/*@__PURE__*/$parcel$interopDefault($e02c50a47b475960$exports)))
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("style", {
+                    children: (0, (/*@__PURE__*/$parcel$interopDefault($1e2747ca72d0ab49$exports)))
+                })
+            ]
         });
         rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
             children: [
                 styleElement,
+                /*#__PURE__*/ (0, $3Sbms$jsx)("link", {
+                    rel: "preconnect",
+                    href: "https://rsms.me/"
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("link", {
+                    rel: "stylesheet",
+                    href: "https://rsms.me/inter/inter.css"
+                }),
                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
                     options: mergedOptions
                 })