@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.8

package/dist/{chunk-GLYGPYNS.js → chunk-PRM33R4R.js}

@@ -35,7 +35,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-Z3O2WGWV.js";
+} from "./chunk-6SQTFOK6.js";
 
 // src/Button/Button.tsx
 import React2 from "react";
@@ -1275,7 +1275,7 @@ var barAnimation = keyframes({
   to: {
     maskSize: "4em .8em",
     "-webkit-mask-position-y": ".1em",
-    maskPosition: "initial 0"
+    maskPosition: "initial 0.1em"
   }
 });
 var AudioBar = () => {
@@ -2064,7 +2064,7 @@ var Collapsible = {
 };
 
 // src/Prebuilt/App.tsx
-import React58, { Suspense as Suspense2, useEffect as useEffect28, useRef as useRef10 } from "react";
+import React59, { Suspense as Suspense2, useEffect as useEffect29, useRef as useRef10 } from "react";
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams5 } from "react-router-dom";
 import {
   HMSReactiveStore,
@@ -2203,7 +2203,7 @@ var APP_DATA = {
   pdfConfig: "pdfConfig",
   minimiseInset: "minimiseInset",
   activeScreensharePeerId: "activeScreensharePeerId",
-  disableNotificiations: "disableNotificiations"
+  disableNotifications: "disableNotifications"
 };
 var UI_SETTINGS = {
   isAudioOnly: "isAudioOnly",
@@ -2329,7 +2329,7 @@ var useSubscribedNotifications = (notificationKey) => {
   return notificationPreference;
 };
 var useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotificiations));
+  const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotifications));
   return notificationPreference;
 };
 var useSetSubscribedNotifications = (notificationKey) => {
@@ -2428,7 +2428,7 @@ var initialAppData = {
   [APP_DATA.authToken]: "",
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: "",
-  [APP_DATA.disableNotificiations]: false
+  [APP_DATA.disableNotifications]: false
 };
 var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions3();
@@ -2539,7 +2539,8 @@ var HMSPrebuiltContext = React17.createContext({
   userName: "",
   userId: "",
   endpoints: {},
-  onLeave: void 0
+  onLeave: void 0,
+  onJoin: void 0
 });
 HMSPrebuiltContext.displayName = "HMSPrebuiltContext";
 var useHMSPrebuiltContext = () => {
@@ -4374,32 +4375,50 @@ function Notifications() {
   return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackNotifications, null), roomState === HMSRoomState2.Connected ? /* @__PURE__ */ React32.createElement(PeerNotifications, null) : null, /* @__PURE__ */ React32.createElement(ReconnectNotifications, null), /* @__PURE__ */ React32.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React32.createElement(PermissionErrorModal, null), /* @__PURE__ */ React32.createElement(InitErrorModal, { notification }));
 }
 
+// src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx
+import React33, { useEffect as useEffect18 } from "react";
+import { HMSNotificationTypes as HMSNotificationTypes8, useHMSNotifications as useHMSNotifications8 } from "@100mslive/react-sdk";
+function HeadlessEndRoomListener() {
+  const notification = useHMSNotifications8();
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+  useEffect18(() => {
+    if (!notification || !isNotificationDisabled) {
+      return;
+    }
+    if ([HMSNotificationTypes8.ROOM_ENDED, HMSNotificationTypes8.REMOVED_FROM_ROOM].includes(notification.type)) {
+      redirectToLeave(1e3);
+    }
+  }, [notification]);
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null);
+}
+
 // src/Prebuilt/components/PostLeave.jsx
-import React39 from "react";
+import React40 from "react";
 import { useNavigate as useNavigate3, useParams as useParams3 } from "react-router-dom";
 import { ExitIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/Header.tsx
-import React38 from "react";
+import React39 from "react";
 import { useMedia as useMedia3 } from "react-use";
 import { HMSRoomState as HMSRoomState4, selectRoomState as selectRoomState4, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
-import React33, { useEffect as useEffect18, useState as useState11 } from "react";
+import React34, { useEffect as useEffect19, useState as useState11 } from "react";
 import { selectDominantSpeaker, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
 var SpeakerTag = () => {
   const dominantSpeaker = useHMSStore8(selectDominantSpeaker);
-  return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React33.createElement(
+  return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React34.createElement(
     Flex,
     {
       align: "center",
       justify: "center",
       css: { flex: "1 1 0", color: "$on_primary_high", "@md": { display: "none" } }
     },
-    /* @__PURE__ */ React33.createElement(VerticalDivider, { css: { ml: "$8" } }),
-    /* @__PURE__ */ React33.createElement(VolumeOneIcon, null),
-    /* @__PURE__ */ React33.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
+    /* @__PURE__ */ React34.createElement(VerticalDivider, { css: { ml: "$8" } }),
+    /* @__PURE__ */ React34.createElement(VolumeOneIcon, null),
+    /* @__PURE__ */ React34.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
   );
 };
 var LogoImg = styled("img", {
@@ -4415,12 +4434,12 @@ var Logo = () => {
   const roomLayout = useRoomLayout();
   const logo = (_a7 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a7.url;
   const [hideImage, setHideImage] = useState11(false);
-  useEffect18(() => {
+  useEffect19(() => {
     if (hideImage) {
       setHideImage(false);
     }
   }, [logo]);
-  return logo && !hideImage ? /* @__PURE__ */ React33.createElement(
+  return logo && !hideImage ? /* @__PURE__ */ React34.createElement(
     LogoImg,
     {
       src: logo,
@@ -4434,7 +4453,7 @@ var Logo = () => {
 };
 
 // src/Prebuilt/components/Header/StreamActions.tsx
-import React36, { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef6, useState as useState13 } from "react";
+import React37, { useCallback as useCallback13, useEffect as useEffect21, useRef as useRef6, useState as useState13 } from "react";
 import { useMedia as useMedia2 } from "react-use";
 import {
   HMSRoomState as HMSRoomState3,
@@ -4449,7 +4468,7 @@ import {
 import { AlertTriangleIcon, CrossIcon as CrossIcon4, RecordIcon } from "@100mslive/react-icons";
 
 // src/Sheet/Sheet.tsx
-import React34 from "react";
+import React35 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 var SheetRoot = styled(DialogPrimitive2.Root, {
   minHeight: "240px",
@@ -4523,10 +4542,10 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
     side: "bottom"
   }
 });
-var SheetContent = React34.forwardRef(
+var SheetContent = React35.forwardRef(
   (_a7, forwardedRef) => {
     var _b7 = _a7, { children } = _b7, props = __objRest(_b7, ["children"]);
-    return /* @__PURE__ */ React34.createElement(Dialog.Portal, null, /* @__PURE__ */ React34.createElement(StyledOverlay, null), /* @__PURE__ */ React34.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
+    return /* @__PURE__ */ React35.createElement(Dialog.Portal, null, /* @__PURE__ */ React35.createElement(StyledOverlay, null), /* @__PURE__ */ React35.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
   }
 );
 var SheetClose = Dialog.Close;
@@ -4546,7 +4565,7 @@ var Sheet = {
 };
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
-import React35, { useState as useState12 } from "react";
+import React36, { useState as useState12 } from "react";
 import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore13, useScreenShare } from "@100mslive/react-sdk";
 import {
   AudioPlayerIcon,
@@ -4559,7 +4578,7 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
-import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo2 } from "react";
 import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/hooks/useMetadata.jsx
@@ -4641,7 +4660,7 @@ var useWhiteboardMetadata = () => {
       console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
     }
   }), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
-  useEffect19(() => {
+  useEffect20(() => {
     window.toggleWhiteboard = toggleWhiteboard;
   }, [toggleWhiteboard]);
   return {
@@ -4755,7 +4774,7 @@ var AdditionalRoomState = () => {
   if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState && !whiteboardOwner) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React35.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React36.createElement(
     Flex,
     {
       align: "center",
@@ -4768,13 +4787,13 @@ var AdditionalRoomState = () => {
       },
       "data-testid": "record_status_dropdown"
     },
-    !isAudioshareInactive && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(MusicIcon, { width: 24, height: 24 }))),
-    shouldShowScreenShareState && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
-    shouldShowVideoState && /* @__PURE__ */ React35.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
-    !isPlaylistInactive && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
-    whiteboardOwner && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
-    /* @__PURE__ */ React35.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React35.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React35.createElement(ChevronDownIcon2, null))
-  )), /* @__PURE__ */ React35.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React35.createElement(
+    !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }))),
+    shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
+    shouldShowVideoState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
+    !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
+    whiteboardOwner && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
+    /* @__PURE__ */ React36.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React36.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React36.createElement(ChevronDownIcon2, null))
+  )), /* @__PURE__ */ React36.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4785,7 +4804,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.selection.playing ? "Pause" : "Play"
-  ) : /* @__PURE__ */ React35.createElement(
+  ) : /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4796,7 +4815,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.track.volume === 0 ? "Unmute" : "Mute"
-  )), !isAudioshareInactive && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React35.createElement(
+  )), !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4807,7 +4826,7 @@ var AdditionalRoomState = () => {
       }
     },
     screenshareAudio.muted ? "Unmute" : "Mute"
-  )), shouldShowScreenShareState && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React35.createElement(
+  )), shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4837,7 +4856,7 @@ var LiveStatus = () => {
       }
     }, 1e3);
   }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (hlsState == null ? void 0 : hlsState.running) {
       startTimer();
     }
@@ -4853,7 +4872,7 @@ var LiveStatus = () => {
   if (!isHLSRunning && !isRTMPRunning) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       align: "center",
@@ -4864,8 +4883,8 @@ var LiveStatus = () => {
         borderRadius: "$1"
       }
     },
-    /* @__PURE__ */ React36.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
-    /* @__PURE__ */ React36.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React36.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React36.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
+    /* @__PURE__ */ React37.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
+    /* @__PURE__ */ React37.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React37.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React37.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
   );
 };
 var RecordingStatus = () => {
@@ -4880,7 +4899,7 @@ var RecordingStatus = () => {
     if (!(isMobile && isRecordingOn))
       return null;
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Tooltip,
     {
       boxCss: { zIndex: 1 },
@@ -4890,7 +4909,7 @@ var RecordingStatus = () => {
         isHLSRecordingOn
       })
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(
       Flex,
       {
         css: {
@@ -4898,7 +4917,7 @@ var RecordingStatus = () => {
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React36.createElement(RecordIcon, { width: 24, height: 24 })
+      /* @__PURE__ */ React37.createElement(RecordIcon, { width: 24, height: 24 })
     )
   );
 };
@@ -4912,7 +4931,7 @@ var StartRecording = () => {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React36.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React36.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React36.createElement(RecordIcon, null), /* @__PURE__ */ React36.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React36.createElement(Popover2.Portal, null, /* @__PURE__ */ React36.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React36.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React37.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React37.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React37.createElement(RecordIcon, null), /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React37.createElement(Popover2.Portal, null, /* @__PURE__ */ React37.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React37.createElement(
       Button,
       {
         "data-testid": "stop_recording_confirm",
@@ -4935,7 +4954,7 @@ var StartRecording = () => {
       "Stop"
     ))));
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Button,
     {
       "data-testid": "start_recording",
@@ -4965,21 +4984,21 @@ var StartRecording = () => {
         }
       })
     },
-    recordingStarted ? /* @__PURE__ */ React36.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React36.createElement(RecordIcon, null),
-    /* @__PURE__ */ React36.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
+    recordingStarted ? /* @__PURE__ */ React37.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React37.createElement(RecordIcon, null),
+    /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
   );
 };
 var StreamActions = () => {
   const isConnected = useHMSStore14(selectIsConnectedToRoom2);
   const isMobile = useMedia2(config.media.md);
   const roomState = useHMSStore14(selectRoomState3);
-  return /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React36.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React36.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React36.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React36.createElement(StartRecording, null) : null);
+  return /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React37.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React37.createElement(StartRecording, null) : null);
 };
 var StopRecordingInSheet = ({
   onStopRecording,
   onClose
 }) => {
-  return /* @__PURE__ */ React36.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React36.createElement(Sheet.Content, null, /* @__PURE__ */ React36.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React36.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React36.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React36.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React36.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React36.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React36.createElement(CrossIcon4, null)))), /* @__PURE__ */ React36.createElement(HorizontalDivider, null), /* @__PURE__ */ React36.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React36.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React37.createElement(Sheet.Content, null, /* @__PURE__ */ React37.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React37.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React37.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React37.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React37.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React37.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React37.createElement(CrossIcon4, null)))), /* @__PURE__ */ React37.createElement(HorizontalDivider, null), /* @__PURE__ */ React37.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React37.createElement(
     Button,
     {
       variant: "danger",
@@ -4993,7 +5012,7 @@ var StopRecordingInSheet = ({
 };
 
 // src/Prebuilt/components/Header/common.jsx
-import React37 from "react";
+import React38 from "react";
 import {
   DeviceType,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
@@ -5014,7 +5033,7 @@ var CamaraFlipActions = () => {
   if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
     return null;
   }
-  return /* @__PURE__ */ React37.createElement(Box, null, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(
     IconButton_default,
     {
       disabled: !isVideoOn,
@@ -5029,7 +5048,7 @@ var CamaraFlipActions = () => {
         }
       })
     },
-    /* @__PURE__ */ React37.createElement(CameraFlipIcon, null)
+    /* @__PURE__ */ React38.createElement(CameraFlipIcon, null)
   ));
 };
 var AudioOutputActions = () => {
@@ -5041,7 +5060,7 @@ var AudioOutputActions = () => {
   if (!shouldShowAudioOutput || !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) > 0) {
     return null;
   }
-  return /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(
     AudioOutputSelectionSheet,
     {
       outputDevices: audioOutput,
@@ -5060,11 +5079,11 @@ var AudioOutputActions = () => {
         }
       })
     },
-    /* @__PURE__ */ React37.createElement(Box, null, /* @__PURE__ */ React37.createElement(IconButton_default, null, /* @__PURE__ */ React37.createElement(SpeakerIcon, null)))
+    /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(IconButton_default, null, /* @__PURE__ */ React38.createElement(SpeakerIcon, null)))
   );
 };
 var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => {
-  return /* @__PURE__ */ React37.createElement(Sheet.Root, null, /* @__PURE__ */ React37.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React37.createElement(Sheet.Content, null, /* @__PURE__ */ React37.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React37.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React37.createElement(Sheet.Close, null, /* @__PURE__ */ React37.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React37.createElement(CrossIcon5, null))))), /* @__PURE__ */ React37.createElement(HorizontalDivider, null), /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(Sheet.Root, null, /* @__PURE__ */ React38.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React38.createElement(Sheet.Content, null, /* @__PURE__ */ React38.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React38.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React38.createElement(Sheet.Close, null, /* @__PURE__ */ React38.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React38.createElement(CrossIcon5, null))))), /* @__PURE__ */ React38.createElement(HorizontalDivider, null), /* @__PURE__ */ React38.createElement(
     Flex,
     {
       direction: "column",
@@ -5075,7 +5094,7 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
       }
     },
     outputDevices.map((audioDevice) => {
-      return /* @__PURE__ */ React37.createElement(
+      return /* @__PURE__ */ React38.createElement(
         SelectWithLabel,
         {
           key: audioDevice.deviceId,
@@ -5088,8 +5107,8 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
     })
   )));
 };
-var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(React37.Fragment, null), checked, id, onChange }) => {
-  return /* @__PURE__ */ React37.createElement(
+var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React38.createElement(React38.Fragment, null), checked, id, onChange }) => {
+  return /* @__PURE__ */ React38.createElement(
     Flex,
     {
       align: "center",
@@ -5101,7 +5120,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(Rea
       },
       onClick: onChange
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React38.createElement(
       Label3,
       {
         htmlFor: id,
@@ -5119,7 +5138,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(Rea
       icon,
       label
     ),
-    checked && /* @__PURE__ */ React37.createElement(CheckIcon2, { width: 24, height: 24 })
+    checked && /* @__PURE__ */ React38.createElement(CheckIcon2, { width: 24, height: 24 })
   );
 };
 
@@ -5128,9 +5147,9 @@ var Header2 = () => {
   const roomState = useHMSStore16(selectRoomState4);
   const isMobile = useMedia3(config.media.md);
   if (roomState !== HMSRoomState4.Connected) {
-    return /* @__PURE__ */ React38.createElement(React38.Fragment, null);
+    return /* @__PURE__ */ React39.createElement(React39.Fragment, null);
   }
-  return /* @__PURE__ */ React38.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React38.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React38.createElement(Logo, null), /* @__PURE__ */ React38.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React38.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React38.createElement(LiveStatus, null), /* @__PURE__ */ React38.createElement(RecordingStatus, null))), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React39.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React39.createElement(Logo, null), /* @__PURE__ */ React39.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React39.createElement(LiveStatus, null), /* @__PURE__ */ React39.createElement(RecordingStatus, null))), /* @__PURE__ */ React39.createElement(
     Flex,
     {
       align: "center",
@@ -5140,8 +5159,8 @@ var Header2 = () => {
         gap: "$4"
       }
     },
-    /* @__PURE__ */ React38.createElement(StreamActions, null),
-    isMobile ? /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(CamaraFlipActions, null), /* @__PURE__ */ React38.createElement(AudioOutputActions, null)) : null
+    /* @__PURE__ */ React39.createElement(StreamActions, null),
+    isMobile ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(CamaraFlipActions, null), /* @__PURE__ */ React39.createElement(AudioOutputActions, null)) : null
   ));
 };
 
@@ -5152,7 +5171,7 @@ var PostLeave = () => {
   const { roomCode } = useHMSPrebuiltContext();
   const { roomId, role } = useParams3();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-  return /* @__PURE__ */ React39.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React39.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React39.createElement(Header2, null)), /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React40.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React40.createElement(Header2, null)), /* @__PURE__ */ React40.createElement(
     Flex,
     {
       justify: "center",
@@ -5160,9 +5179,9 @@ var PostLeave = () => {
       align: "center",
       css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
     },
-    /* @__PURE__ */ React39.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
-    /* @__PURE__ */ React39.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
+    /* @__PURE__ */ React40.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
+    /* @__PURE__ */ React40.createElement(
       Text,
       {
         variant: "body1",
@@ -5174,10 +5193,10 @@ var PostLeave = () => {
         }
       },
       "Have a nice day",
-      previewPreference.name && /* @__PURE__ */ React39.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
+      previewPreference.name && /* @__PURE__ */ React40.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
       "!"
     ),
-    /* @__PURE__ */ React39.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React39.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React40.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React40.createElement(
       Button,
       {
         onClick: () => {
@@ -5189,20 +5208,20 @@ var PostLeave = () => {
         },
         "data-testid": "join_again_btn"
       },
-      /* @__PURE__ */ React39.createElement(ExitIcon, null),
-      /* @__PURE__ */ React39.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
+      /* @__PURE__ */ React40.createElement(ExitIcon, null),
+      /* @__PURE__ */ React40.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
     ))
   ));
 };
 var PostLeave_default = PostLeave;
 
 // src/Prebuilt/components/Preview/PreviewContainer.tsx
-import React53 from "react";
+import React54 from "react";
 import { useNavigate as useNavigate4, useParams as useParams4 } from "react-router-dom";
 import { useSearchParam } from "react-use";
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-import React52, { Fragment as Fragment4, Suspense, useCallback as useCallback16, useEffect as useEffect23, useState as useState16 } from "react";
+import React53, { Fragment as Fragment4, Suspense, useCallback as useCallback16, useEffect as useEffect24, useState as useState16 } from "react";
 import { useMedia as useMedia6 } from "react-use";
 import {
   HMSRoomState as HMSRoomState6,
@@ -5219,7 +5238,7 @@ import {
 import { MicOffIcon as MicOffIcon2, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AudioVideoToggle.jsx
-import React41, { Fragment as Fragment2 } from "react";
+import React42, { Fragment as Fragment2 } from "react";
 import {
   DeviceType as DeviceType2,
   HMSRoomState as HMSRoomState5,
@@ -5234,7 +5253,7 @@ import {
 import { CameraFlipIcon as CameraFlipIcon2, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, VideoOnIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx
-import React40 from "react";
+import React41 from "react";
 import { VerticalMenuIcon } from "@100mslive/react-icons";
 var IconSection = styled(IconButton_default, {
   w: "unset",
@@ -5286,7 +5305,7 @@ var IconButtonWithOptions = ({
 }) => {
   const bgCss = { backgroundColor: disabled ? "$surface_brighter" : active ? "$transparent" : "$secondary_dim" };
   const iconCss = { color: disabled ? "$on_surface_low" : active ? "$on_surface_high" : "$on_primary_high" };
-  return /* @__PURE__ */ React40.createElement(Flex, null, /* @__PURE__ */ React40.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React40.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React40.createElement(Dropdown.Root, null, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(Flex, null, /* @__PURE__ */ React41.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React41.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React41.createElement(Dropdown.Root, null, /* @__PURE__ */ React41.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -5297,8 +5316,8 @@ var IconButtonWithOptions = ({
         }
       }
     },
-    /* @__PURE__ */ React40.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React40.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React40.createElement(Box, { css: iconCss }, /* @__PURE__ */ React40.createElement(VerticalMenuIcon, null))))
-  ), /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React41.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React41.createElement(Box, { css: iconCss }, /* @__PURE__ */ React41.createElement(VerticalMenuIcon, null))))
+  ), /* @__PURE__ */ React41.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -5310,7 +5329,7 @@ var IconButtonWithOptions = ({
         border: "none"
       }
     },
-    options.map((option, index) => /* @__PURE__ */ React40.createElement(
+    options.map((option, index) => /* @__PURE__ */ React41.createElement(
       Dropdown.Item,
       {
         key: option.title,
@@ -5337,7 +5356,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   const { videoInput, audioInput } = allDevices;
   const formattedVideoInputList = videoInput == null ? void 0 : videoInput.map((videoInput2) => ({
     active: selectedDeviceIDs.videoInput === videoInput2.deviceId,
-    content: /* @__PURE__ */ React41.createElement(
+    content: /* @__PURE__ */ React42.createElement(
       Text,
       {
         variant: "sm",
@@ -5353,7 +5372,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   }));
   const formattedAudioInputList = audioInput == null ? void 0 : audioInput.map((audioInput2) => ({
     active: selectedDeviceIDs.audioInput === audioInput2.deviceId,
-    content: /* @__PURE__ */ React41.createElement(
+    content: /* @__PURE__ */ React42.createElement(
       Text,
       {
         variant: "sm",
@@ -5374,7 +5393,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   const roomState = useHMSStore17(selectRoomState5);
   const hasAudioDevices = (audioInput == null ? void 0 : audioInput.length) > 0;
   const hasVideoDevices = (videoInput == null ? void 0 : videoInput.length) > 0;
-  return /* @__PURE__ */ React41.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React41.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React42.createElement(
     IconButton_default,
     {
       active: isLocalAudioEnabled,
@@ -5384,20 +5403,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       "data-testid": "audio_btn",
       className: "__cancel-drag-event"
     },
-    !isLocalAudioEnabled ? /* @__PURE__ */ React41.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React41.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
-  )) : /* @__PURE__ */ React41.createElement(
+    !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
+  )) : /* @__PURE__ */ React42.createElement(
     IconButtonWithOptions,
     {
       options: formattedAudioInputList,
       disabled: !toggleAudio,
       onDisabledClick: toggleAudio,
       tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
-      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React41.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React41.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
+      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
       active: isLocalAudioEnabled,
       onClick: toggleAudio,
       key: "toggleAudio"
     }
-  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React41.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React41.createElement(
+  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React42.createElement(
     IconButton_default,
     {
       key: "toggleVideo",
@@ -5407,20 +5426,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       "data-testid": "video_btn",
       className: "__cancel-drag-event"
     },
-    !isLocalVideoEnabled ? /* @__PURE__ */ React41.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React41.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
-  )) : /* @__PURE__ */ React41.createElement(
+    !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
+  )) : /* @__PURE__ */ React42.createElement(
     IconButtonWithOptions,
     {
       disabled: !toggleVideo,
       onDisabledClick: toggleVideo,
       options: formattedVideoInputList,
       tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
-      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React41.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React41.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
+      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
       key: "toggleVideo",
       active: isLocalVideoEnabled,
       onClick: toggleVideo
     }
-  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React41.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React41.createElement(
+  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React42.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React42.createElement(
     IconButton_default,
     {
       onClick: () => __async(void 0, null, function* () {
@@ -5434,14 +5453,14 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         }
       })
     },
-    /* @__PURE__ */ React41.createElement(CameraFlipIcon2, null)
+    /* @__PURE__ */ React42.createElement(CameraFlipIcon2, null)
   )) : null);
 };
 
 // src/Prebuilt/components/Chip.tsx
-import React42 from "react";
+import React43 from "react";
 var Chip = ({
-  icon = /* @__PURE__ */ React42.createElement(React42.Fragment, null),
+  icon = /* @__PURE__ */ React43.createElement(React43.Fragment, null),
   content = "",
   backgroundColor = "$surface_default",
   textColor = "$on_surface_high",
@@ -5452,16 +5471,25 @@ var Chip = ({
   if (hideIfNoContent && !content) {
     return null;
   }
-  return /* @__PURE__ */ React42.createElement(Flex, { align: "center", css: __spreadValues({ backgroundColor, p: "$4 $6", borderRadius: "$4" }, css2), onClick: () => onClick == null ? void 0 : onClick() }, icon, /* @__PURE__ */ React42.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor, ml: "$2" } }, content));
+  return /* @__PURE__ */ React43.createElement(
+    Flex,
+    {
+      align: "center",
+      css: __spreadValues({ backgroundColor, p: "$4 $6", gap: "$2", borderRadius: "$4" }, css2),
+      onClick: () => onClick == null ? void 0 : onClick()
+    },
+    icon,
+    /* @__PURE__ */ React43.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor } }, content)
+  );
 };
 var Chip_default = Chip;
 
 // src/Prebuilt/components/Connection/TileConnection.tsx
-import React44 from "react";
+import React45 from "react";
 import { PinIcon, SpotlightIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Connection/ConnectionIndicator.tsx
-import React43 from "react";
+import React44 from "react";
 import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
 
@@ -5523,10 +5551,10 @@ var ConnectionIndicator = ({
     return null;
   }
   if (downlinkQuality === 0) {
-    return /* @__PURE__ */ React43.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React43.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React43.createElement(PoorConnectivityIcon2, null)));
+    return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React44.createElement(PoorConnectivityIcon2, null)));
   }
   const size = isTile ? 12 : 16;
-  return /* @__PURE__ */ React43.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React43.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React44.createElement(
     "svg",
     {
       width: size,
@@ -5541,7 +5569,7 @@ var ConnectionIndicator = ({
         strokeMiterlimit: 2
       }
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "path",
       {
         d: "M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z",
@@ -5549,7 +5577,7 @@ var ConnectionIndicator = ({
         transform: "translate(-.333)"
       }
     ),
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "path",
       {
         d: "M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z",
@@ -5557,14 +5585,14 @@ var ConnectionIndicator = ({
         transform: "translate(-.333)"
       }
     ),
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "path",
       {
         d: "M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z",
         fill: getColor(2, downlinkQuality, defaultColor, theme2)
       }
     ),
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "path",
       {
         d: "M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z",
@@ -5583,7 +5611,7 @@ var TileConnection = ({
   spotlighted,
   pinned
 }) => {
-  return /* @__PURE__ */ React44.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React44.createElement(IconWrapper, null, /* @__PURE__ */ React44.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React44.createElement(IconWrapper, null, /* @__PURE__ */ React44.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React45.createElement(
     Text,
     {
       css: __spreadValues({
@@ -5593,7 +5621,7 @@ var TileConnection = ({
       variant: "xs"
     },
     name
-  )), /* @__PURE__ */ React44.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
+  )), /* @__PURE__ */ React45.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
 };
 var IconWrapper = styled("div", { c: "$on_surface_high", ml: "$3", mt: "$1" });
 var Wrapper2 = styled("div", {
@@ -5612,8 +5640,12 @@ var Wrapper2 = styled("div", {
 });
 var TileConnection_default = TileConnection;
 
+// src/Prebuilt/components/PrebuiltTileElements.tsx
+var PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: "$12", width: "$12" });
+var PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: "$12", width: "$12" });
+
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-import React50, { useCallback as useCallback15, useEffect as useEffect22, useState as useState15 } from "react";
+import React51, { useCallback as useCallback15, useEffect as useEffect23, useState as useState15 } from "react";
 import { useMedia as useMedia4 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
 
@@ -5621,7 +5653,7 @@ import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons
 import { GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
-import React46, { Fragment as Fragment3, useEffect as useEffect21, useRef as useRef7, useState as useState14 } from "react";
+import React47, { Fragment as Fragment3, useEffect as useEffect22, useRef as useRef7, useState as useState14 } from "react";
 import {
   DeviceType as DeviceType3,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
@@ -5633,10 +5665,10 @@ import {
 import { MicOnIcon as MicOnIcon4, SpeakerIcon as SpeakerIcon2, VideoOnIcon as VideoOnIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/primitives/DropdownTrigger.jsx
-import React45 from "react";
+import React46 from "react";
 import { ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
-var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
-  return /* @__PURE__ */ React45.createElement(
+var DialogDropdownTrigger = React46.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
+  return /* @__PURE__ */ React46.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -5650,7 +5682,7 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
       }, css2),
       ref
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       Flex,
       {
         css: {
@@ -5661,7 +5693,7 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
         }
       },
       icon,
-      /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React46.createElement(
         Text,
         {
           css: __spreadValues(__spreadProps(__spreadValues({
@@ -5673,14 +5705,14 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
         },
         title
       ),
-      open ? /* @__PURE__ */ React45.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React45.createElement(ChevronDownIcon3, null)
+      open ? /* @__PURE__ */ React46.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React46.createElement(ChevronDownIcon3, null)
     )
   );
 });
 
 // src/Prebuilt/components/hooks/useDropdownSelection.jsx
 var useDropdownSelection = () => {
-  return "$primary_dim";
+  return "$surface_bright";
 };
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
@@ -5698,7 +5730,7 @@ var Settings = ({ setHide }) => {
   if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
     setHide(true);
   }
-  return /* @__PURE__ */ React46.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React46.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React47.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React47.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -5709,24 +5741,24 @@ var Settings = ({ setHide }) => {
         m: "$10 auto"
       }
     },
-    /* @__PURE__ */ React46.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
-  ), /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
+  ), /* @__PURE__ */ React47.createElement(
     DeviceSelector,
     {
       title: "Video",
       devices: videoInput,
-      icon: /* @__PURE__ */ React46.createElement(VideoOnIcon2, null),
+      icon: /* @__PURE__ */ React47.createElement(VideoOnIcon2, null),
       selection: selectedDeviceIDs.videoInput,
       onChange: (deviceId) => updateDevice({
         deviceId,
         deviceType: DeviceType3.videoInput
       })
     }
-  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React46.createElement(
+  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React47.createElement(
     DeviceSelector,
     {
       title: shouldShowAudioOutput ? "Microphone" : "Audio",
-      icon: /* @__PURE__ */ React46.createElement(MicOnIcon4, null),
+      icon: /* @__PURE__ */ React47.createElement(MicOnIcon4, null),
       devices: audioInput,
       selection: selectedDeviceIDs.audioInput,
       onChange: (deviceId) => updateDevice({
@@ -5734,11 +5766,11 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType3.audioInput
       })
     }
-  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React46.createElement(
+  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React47.createElement(
     DeviceSelector,
     {
       title: "Speaker",
-      icon: /* @__PURE__ */ React46.createElement(SpeakerIcon2, null),
+      icon: /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
       devices: audioOutput,
       selection: selectedDeviceIDs.audioOutput,
       onChange: (deviceId) => updateDevice({
@@ -5746,7 +5778,7 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType3.audioOutput
       })
     },
-    /* @__PURE__ */ React46.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
+    /* @__PURE__ */ React47.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
   ) : null);
 };
 var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
@@ -5754,7 +5786,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
   const [open, setOpen] = useState14(false);
   const selectionBg = useDropdownSelection();
   const ref = useRef7(null);
-  return /* @__PURE__ */ React46.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React46.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React47.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React47.createElement(
     Flex,
     {
       align: "center",
@@ -5766,7 +5798,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
         }
       }
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       Box,
       {
         css: {
@@ -5780,7 +5812,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           }
         }
       },
-      /* @__PURE__ */ React46.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React47.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React47.createElement(
         DialogDropdownTrigger,
         {
           ref,
@@ -5788,8 +5820,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           title: ((_a7 = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a7.label) || "Select device from list",
           open
         }
-      ), /* @__PURE__ */ React46.createElement(Dropdown.Portal, null, /* @__PURE__ */ React46.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
-        return /* @__PURE__ */ React46.createElement(
+      ), /* @__PURE__ */ React47.createElement(Dropdown.Portal, null, /* @__PURE__ */ React47.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
+        return /* @__PURE__ */ React47.createElement(
           Dropdown.Item,
           {
             key: device.label,
@@ -5810,7 +5842,7 @@ var TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";
 var TestAudio = ({ id }) => {
   const audioRef = useRef7(null);
   const [playing, setPlaying] = useState14(false);
-  useEffect21(() => {
+  useEffect22(() => {
     if (audioRef.current && id) {
       try {
         if (typeof audioRef.current.setSinkId !== "undefined") {
@@ -5821,7 +5853,7 @@ var TestAudio = ({ id }) => {
       }
     }
   }, [id]);
-  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
     Button,
     {
       variant: "standard",
@@ -5838,22 +5870,22 @@ var TestAudio = ({ id }) => {
       },
       disabled: playing
     },
-    /* @__PURE__ */ React46.createElement(SpeakerIcon2, null),
+    /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
     "\xA0Test",
     " ",
-    /* @__PURE__ */ React46.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
-  ), /* @__PURE__ */ React46.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
+    /* @__PURE__ */ React47.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
+  ), /* @__PURE__ */ React47.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
 };
 var DeviceSettings_default = Settings;
 
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
-import React48, { useCallback as useCallback14 } from "react";
+import React49, { useCallback as useCallback14 } from "react";
 import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Settings/SwitchWithLabel.jsx
-import React47 from "react";
+import React48 from "react";
 var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     Flex,
     {
       align: "center",
@@ -5865,7 +5897,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
         display: hide ? "none" : "flex"
       }
     },
-    /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React48.createElement(
       Label3,
       {
         htmlFor: id,
@@ -5883,7 +5915,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
       icon,
       label
     ),
-    /* @__PURE__ */ React47.createElement(Switch, { id, checked, onCheckedChange: onChange })
+    /* @__PURE__ */ React48.createElement(Switch, { id, checked, onCheckedChange: onChange })
   );
 };
 var SwitchWithLabel_default = SwitchWithLabel;
@@ -5904,7 +5936,7 @@ var LayoutSettings = () => {
     }),
     [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings]
   );
-  return /* @__PURE__ */ React48.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React48.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React49.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React49.createElement(
     SwitchWithLabel_default,
     {
       label: "Mirror Local Video",
@@ -5916,7 +5948,7 @@ var LayoutSettings = () => {
         });
       }
     }
-  ), /* @__PURE__ */ React48.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React48.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React48.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React48.createElement(
+  ), /* @__PURE__ */ React49.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React49.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React49.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React49.createElement(
     Slider,
     {
       step: 1,
@@ -5932,11 +5964,11 @@ var LayoutSettings = () => {
 };
 
 // src/Prebuilt/components/Settings/NotificationSettings.jsx
-import React49 from "react";
+import React50 from "react";
 import { AlertOctagonIcon, HandIcon as HandIcon2, PeopleAddIcon as PeopleAddIcon2, PeopleRemoveIcon as PeopleRemoveIcon2 } from "@100mslive/react-icons";
 var NotificationItem = ({ type, label, icon, checked }) => {
   const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     SwitchWithLabel_default,
     {
       label,
@@ -5951,36 +5983,36 @@ var NotificationItem = ({ type, label, icon, checked }) => {
 };
 var NotificationSettings = () => {
   const subscribedNotifications = useSubscribedNotifications();
-  return /* @__PURE__ */ React49.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Peer Joined",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
-      icon: /* @__PURE__ */ React49.createElement(PeopleAddIcon2, null),
+      icon: /* @__PURE__ */ React50.createElement(PeopleAddIcon2, null),
       checked: subscribedNotifications.PEER_JOINED
     }
-  ), /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Peer Leave",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
-      icon: /* @__PURE__ */ React49.createElement(PeopleRemoveIcon2, null),
+      icon: /* @__PURE__ */ React50.createElement(PeopleRemoveIcon2, null),
       checked: subscribedNotifications.PEER_LEFT
     }
-  ), /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Hand Raised",
       type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
-      icon: /* @__PURE__ */ React49.createElement(HandIcon2, null),
+      icon: /* @__PURE__ */ React50.createElement(HandIcon2, null),
       checked: subscribedNotifications.METADATA_UPDATED
     }
-  ), /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Error",
       type: SUBSCRIBED_NOTIFICATIONS.ERROR,
-      icon: /* @__PURE__ */ React49.createElement(AlertOctagonIcon, null),
+      icon: /* @__PURE__ */ React50.createElement(AlertOctagonIcon, null),
       checked: subscribedNotifications.ERROR
     }
   ));
@@ -6022,7 +6054,7 @@ var settingsList = [
 ];
 
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React50.createElement(React50.Fragment, null) }) => {
+var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React51.createElement(React51.Fragment, null) }) => {
   const mediaQueryLg = config.media.md;
   const isMobile = useMedia4(mediaQueryLg);
   const [showSetting, setShowSetting] = useState15(
@@ -6032,7 +6064,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
     (key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
     [setShowSetting]
   );
-  useEffect22(() => {
+  useEffect23(() => {
     if (screenType === "hls_live_streaming") {
       hideSettingByTabName("layout")(true);
     }
@@ -6044,7 +6076,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
   const resetSelection = useCallback15(() => {
     setSelection("");
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     var _a7;
     if (isMobile) {
       setSelection("");
@@ -6053,7 +6085,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
       setSelection(firstNotHiddenTabName);
     }
   }, [isMobile, showSetting]);
-  return isMobile ? /* @__PURE__ */ React50.createElement(
+  return isMobile ? /* @__PURE__ */ React51.createElement(
     MobileSettingModal,
     {
       open,
@@ -6065,7 +6097,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
       resetSelection,
       children
     }
-  ) : /* @__PURE__ */ React50.createElement(
+  ) : /* @__PURE__ */ React51.createElement(
     DesktopSettingModal,
     {
       open,
@@ -6087,9 +6119,9 @@ var MobileSettingModal = ({
   showSetting,
   hideSettingByTabName,
   resetSelection,
-  children = /* @__PURE__ */ React50.createElement(React50.Fragment, null)
+  children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
 }) => {
-  return /* @__PURE__ */ React50.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React50.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(
     Sheet.Content,
     {
       css: {
@@ -6097,9 +6129,9 @@ var MobileSettingModal = ({
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React50.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React50.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React50.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React50.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React50.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React50.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React50.createElement(Sheet.Close, null, /* @__PURE__ */ React50.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React50.createElement(CrossIcon6, null))))),
-    /* @__PURE__ */ React50.createElement(HorizontalDivider, null),
-    !selection ? /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React51.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React51.createElement(Sheet.Close, null, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null))))),
+    /* @__PURE__ */ React51.createElement(HorizontalDivider, null),
+    !selection ? /* @__PURE__ */ React51.createElement(
       Flex,
       {
         direction: "column",
@@ -6110,7 +6142,7 @@ var MobileSettingModal = ({
         }
       },
       settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
-        return /* @__PURE__ */ React50.createElement(
+        return /* @__PURE__ */ React51.createElement(
           Box,
           {
             key: tabName,
@@ -6140,18 +6172,18 @@ var MobileSettingModal = ({
               borderBottom: "1px solid $border_default"
             }
           },
-          /* @__PURE__ */ React50.createElement(Icon2, null),
+          /* @__PURE__ */ React51.createElement(Icon2, null),
           title
         );
       })
-    ) : /* @__PURE__ */ React50.createElement(
+    ) : /* @__PURE__ */ React51.createElement(
       Box,
       {
         direction: "column",
         css: { overflowY: "scroll", px: "$8", py: "$10", maxHeight: "70vh", overflowX: "hidden" }
       },
       settingsList.filter(({ tabName }) => showSetting[tabName] && selection === tabName).map(({ content: Content10, title, tabName }) => {
-        return /* @__PURE__ */ React50.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
+        return /* @__PURE__ */ React51.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
       })
     )
   ));
@@ -6164,9 +6196,9 @@ var DesktopSettingModal = ({
   showSetting,
   hideSettingByTabName,
   resetSelection,
-  children = /* @__PURE__ */ React50.createElement(React50.Fragment, null)
+  children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
 }) => {
-  return /* @__PURE__ */ React50.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React50.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React50.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React50.createElement(Dialog.Overlay, null), /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React51.createElement(Dialog.Overlay, null), /* @__PURE__ */ React51.createElement(
     Dialog.Content,
     {
       css: {
@@ -6176,7 +6208,7 @@ var DesktopSettingModal = ({
         r: "$4"
       }
     },
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.createElement(
       Tabs.Root,
       {
         value: selection,
@@ -6184,7 +6216,7 @@ var DesktopSettingModal = ({
         onValueChange: setSelection,
         css: { size: "100%", position: "relative" }
       },
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React51.createElement(
         Tabs.List,
         {
           css: {
@@ -6196,12 +6228,12 @@ var DesktopSettingModal = ({
             borderBottomLeftRadius: "$4"
           }
         },
-        /* @__PURE__ */ React50.createElement(Text, { variant: "h5" }, "Settings "),
-        /* @__PURE__ */ React50.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
-          return /* @__PURE__ */ React50.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React50.createElement(Icon2, null), title);
+        /* @__PURE__ */ React51.createElement(Text, { variant: "h5" }, "Settings "),
+        /* @__PURE__ */ React51.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
+          return /* @__PURE__ */ React51.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React51.createElement(Icon2, null), title);
         }))
       ),
-      selection && /* @__PURE__ */ React50.createElement(
+      selection && /* @__PURE__ */ React51.createElement(
         Flex,
         {
           direction: "column",
@@ -6212,20 +6244,20 @@ var DesktopSettingModal = ({
           }
         },
         settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content10, title, tabName }) => {
-          return /* @__PURE__ */ React50.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React50.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React50.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
+          return /* @__PURE__ */ React51.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React51.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React51.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
         })
       )
     ),
-    /* @__PURE__ */ React50.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React50.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React50.createElement(CrossIcon6, null)))
+    /* @__PURE__ */ React51.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null)))
   )));
 };
 var SettingsContentHeader = ({ children, isMobile, onBack }) => {
-  return /* @__PURE__ */ React50.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React50.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React50.createElement(ChevronLeftIcon, null)), children);
+  return /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), children);
 };
 var SettingsModal_default = SettingsModal;
 
 // src/Prebuilt/components/Preview/PreviewForm.tsx
-import React51 from "react";
+import React52 from "react";
 import { useMedia as useMedia5 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
 import { useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
@@ -6247,13 +6279,13 @@ var PreviewForm = ({
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = ((_c = (_b7 = (_a7 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
   const showGoLive = (joinForm == null ? void 0 : joinForm.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Form,
     {
       css: { flexDirection: cannotPublishVideo ? "column" : "row", "@md": { flexDirection: "row" } },
       onSubmit: formSubmit
     },
-    /* @__PURE__ */ React51.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React52.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React52.createElement(
       Input,
       {
         required: true,
@@ -6274,8 +6306,8 @@ var PreviewForm = ({
           }
         }
       }
-    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React51.createElement(PreviewSettings, null) : null),
-    /* @__PURE__ */ React51.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React51.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
+    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React52.createElement(PreviewSettings, null) : null),
+    /* @__PURE__ */ React52.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React52.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
   );
 };
 var Form = styled("form", {
@@ -6292,7 +6324,7 @@ var Form = styled("form", {
 var PreviewForm_default = PreviewForm;
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-var VirtualBackground = React52.lazy(() => import("./VirtualBackground-GP4ATXD3.js"));
+var VirtualBackground = React53.lazy(() => import("./VirtualBackground-UVZJVOA2.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -6349,7 +6381,7 @@ var PreviewJoin = ({
   const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
   const isMobile = useMedia6(config.media.md);
   const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
-  useEffect23(() => {
+  useEffect24(() => {
     if (authToken) {
       if (skipPreview) {
         savePreferenceAndJoin();
@@ -6358,34 +6390,34 @@ var PreviewJoin = ({
       }
     }
   }, [authToken, skipPreview]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (initialName) {
       setName(initialName);
     }
   }, [initialName]);
-  return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React52.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React52.createElement(Box, null), /* @__PURE__ */ React52.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React52.createElement(Logo, null), /* @__PURE__ */ React52.createElement(
+  return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React53.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React53.createElement(Box, null), /* @__PURE__ */ React53.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React53.createElement(Logo, null), /* @__PURE__ */ React53.createElement(
     Text,
     {
       variant: "h4",
       css: { wordBreak: "break-word", textAlign: "center", mt: "$14", mb: "$4", "@md": { mt: "$8", mb: "$2" } }
     },
     previewHeader.title
-  ), /* @__PURE__ */ React52.createElement(
+  ), /* @__PURE__ */ React53.createElement(
     Text,
     {
       css: { c: "$on_surface_medium", my: "0", textAlign: "center", maxWidth: "100%", wordWrap: "break-word" },
       variant: "sm"
     },
     previewHeader.sub_title
-  ), /* @__PURE__ */ React52.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React52.createElement(
+  ), /* @__PURE__ */ React53.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React53.createElement(
     Chip_default,
     {
       content: "LIVE",
       backgroundColor: "$alert_error_default",
       textColor: "#FFF",
-      icon: /* @__PURE__ */ React52.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
+      icon: /* @__PURE__ */ React53.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
     }
-  ) : null, /* @__PURE__ */ React52.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React52.createElement(
+  ) : null, /* @__PURE__ */ React53.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React53.createElement(
     Flex,
     {
       align: "center",
@@ -6397,8 +6429,8 @@ var PreviewJoin = ({
         flexDirection: "column"
       }
     },
-    /* @__PURE__ */ React52.createElement(PreviewTile, { name, error: previewError })
-  ) : null, /* @__PURE__ */ React52.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React52.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React53.createElement(PreviewTile, { name, error: previewError })
+  ) : null, /* @__PURE__ */ React53.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React53.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React53.createElement(
     PreviewForm_default,
     {
       name,
@@ -6408,7 +6440,7 @@ var PreviewJoin = ({
       cannotPublishVideo: !toggleVideo,
       cannotPublishAudio: !toggleAudio
     }
-  ))) : /* @__PURE__ */ React52.createElement(FullPageProgress_default, null);
+  ))) : /* @__PURE__ */ React53.createElement(FullPageProgress_default, null);
 };
 var Container3 = styled("div", __spreadProps(__spreadValues({
   width: "100%"
@@ -6427,7 +6459,7 @@ var PreviewTile = ({ name, error }) => {
   const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
   const isMobile = useMedia6(config.media.md);
   const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -6443,20 +6475,20 @@ var PreviewTile = ({ name, error }) => {
         }
       }
     },
-    localPeer ? /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React52.createElement(
+    localPeer ? /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React53.createElement(
       Video,
       {
         mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
         trackId: localPeer.videoTrack,
         "data-testid": "preview_tile"
       }
-    ), !isVideoOn ? /* @__PURE__ */ React52.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React52.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ React52.createElement(FullPageProgress_default, null) : null,
-    showMuteIcon ? /* @__PURE__ */ React52.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ React52.createElement(MicOffIcon2, null)) : /* @__PURE__ */ React52.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ React52.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack }))
+    ), !isVideoOn ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React53.createElement(Avatar, { name, "data-testid": "preview_avatar_tile", size: "medium" })) : null) : !error ? /* @__PURE__ */ React53.createElement(FullPageProgress_default, null) : null,
+    showMuteIcon ? /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(MicOffIcon2, { height: 16, width: 16 })) : /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack }))
   );
 };
 var PreviewControls = ({ hideSettings }) => {
   const isMobile = useMedia6(config.media.md);
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(
     Flex,
     {
       justify: hideSettings && isMobile ? "center" : "between",
@@ -6465,13 +6497,13 @@ var PreviewControls = ({ hideSettings }) => {
         mt: "$8"
       }
     },
-    /* @__PURE__ */ React52.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React52.createElement(AudioVideoToggle, null), /* @__PURE__ */ React52.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React52.createElement(VirtualBackground, null) : null)),
-    !hideSettings ? /* @__PURE__ */ React52.createElement(PreviewSettings, null) : null
+    /* @__PURE__ */ React53.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React53.createElement(AudioVideoToggle, null), /* @__PURE__ */ React53.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React53.createElement(VirtualBackground, null) : null)),
+    !hideSettings ? /* @__PURE__ */ React53.createElement(PreviewSettings, null) : null
   );
 };
-var PreviewSettings = React52.memo(() => {
+var PreviewSettings = React53.memo(() => {
   const [open, setOpen] = useState16(false);
-  return /* @__PURE__ */ React52.createElement(Fragment4, null, /* @__PURE__ */ React52.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React52.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React52.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
+  return /* @__PURE__ */ React53.createElement(Fragment4, null, /* @__PURE__ */ React53.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React53.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React53.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
 });
 var PreviewJoin_default = PreviewJoin;
 
@@ -6495,14 +6527,14 @@ var PreviewContainer = () => {
     }
     navigate(meetingURL);
   };
-  return /* @__PURE__ */ React53.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React54.createElement(
     Flex,
     {
       css: { flex: "1 1 0", position: "relative", overflowY: "auto", color: "$primary_default" },
       justify: "center",
       align: "center"
     },
-    authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React53.createElement(
+    authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React54.createElement(
       PreviewJoin_default,
       {
         initialName,
@@ -6510,20 +6542,20 @@ var PreviewContainer = () => {
         asRole: previewAsRole != null ? previewAsRole : void 0,
         onJoin
       }
-    ) : /* @__PURE__ */ React53.createElement(FullPageProgress_default, null)
+    ) : /* @__PURE__ */ React54.createElement(FullPageProgress_default, null)
   ));
 };
 var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-import React55, { useEffect as useEffect24, useState as useState17 } from "react";
+import React56, { useEffect as useEffect25, useState as useState17 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
-import React54 from "react";
+import React55 from "react";
 var Toast2 = (_a7) => {
   var _b7 = _a7, { title, description, close = true, open, duration, onOpenChange, icon } = _b7, props = __objRest(_b7, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     Toast.HMSToast,
     __spreadValues({
       title,
@@ -6541,15 +6573,15 @@ var Toast2 = (_a7) => {
 var ToastContainer = () => {
   const isConnected = useHMSStore22(selectIsConnectedToRoom3);
   const [toasts, setToast] = useState17([]);
-  useEffect24(() => {
+  useEffect25(() => {
     ToastManager.addListener(setToast);
     return () => {
       ToastManager.removeListener(setToast);
     };
   }, []);
-  return /* @__PURE__ */ React55.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
-    return /* @__PURE__ */ React55.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
-  }), /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
+    return /* @__PURE__ */ React56.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
+  }), /* @__PURE__ */ React56.createElement(
     Toast.Viewport,
     {
       css: __spreadValues({
@@ -6560,7 +6592,7 @@ var ToastContainer = () => {
 };
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
-import React56, { useCallback as useCallback17, useEffect as useEffect25, useMemo as useMemo3, useState as useState18 } from "react";
+import React57, { useCallback as useCallback17, useEffect as useEffect26, useMemo as useMemo3, useState as useState18 } from "react";
 import { useMedia as useMedia7 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID4,
@@ -6626,10 +6658,10 @@ function FlyingEmoji() {
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
-  useEffect25(() => {
+  useEffect26(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     Box,
     {
       css: {
@@ -6645,7 +6677,7 @@ function FlyingEmoji() {
       }
     },
     emojis.map((emoji) => {
-      return /* @__PURE__ */ React56.createElement(
+      return /* @__PURE__ */ React57.createElement(
         Flex,
         {
           key: emoji.id,
@@ -6661,8 +6693,8 @@ function FlyingEmoji() {
             setEmojis(emojis.filter((item) => item.id !== emoji.id));
           }
         },
-        /* @__PURE__ */ React56.createElement(Box, null, /* @__PURE__ */ React56.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
-        /* @__PURE__ */ React56.createElement(
+        /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
+        /* @__PURE__ */ React57.createElement(
           Box,
           {
             css: {
@@ -6672,7 +6704,7 @@ function FlyingEmoji() {
               borderRadius: "$1"
             }
           },
-          /* @__PURE__ */ React56.createElement(
+          /* @__PURE__ */ React57.createElement(
             Text,
             {
               css: {
@@ -6690,7 +6722,7 @@ function FlyingEmoji() {
 }
 
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
-import React57, { useCallback as useCallback18 } from "react";
+import React58, { useCallback as useCallback18 } from "react";
 import { useCustomEvent as useCustomEvent3, useHMSActions as useHMSActions16 } from "@100mslive/react-sdk";
 function RemoteStopScreenshare() {
   const actions = useHMSActions16();
@@ -6701,11 +6733,11 @@ function RemoteStopScreenshare() {
     type: REMOTE_STOP_SCREENSHARE_TYPE,
     onEvent: onRemoteStopScreenshare
   });
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null);
+  return /* @__PURE__ */ React58.createElement(React58.Fragment, null);
 }
 
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
-import { useCallback as useCallback19, useEffect as useEffect27, useRef as useRef9 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef9 } from "react";
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPermissions as selectPermissions2,
@@ -6715,7 +6747,7 @@ import {
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/common/hooks.js
-import { useEffect as useEffect26, useRef as useRef8, useState as useState19 } from "react";
+import { useEffect as useEffect27, useRef as useRef8, useState as useState19 } from "react";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
 import {
   selectAvailableRoleNames as selectAvailableRoleNames2,
@@ -6786,12 +6818,12 @@ var useAutoStartStreaming = () => {
       setHLSStarted(false);
     }
   }), [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!isHLSStarted && !isHLSRunning) {
       streamStartedRef.current = false;
     }
   }, [isHLSStarted, isHLSRunning]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
       return;
     }
@@ -6800,8 +6832,8 @@ var useAutoStartStreaming = () => {
 };
 
 // src/Prebuilt/App.tsx
-var Conference = React58.lazy(() => import("./conference-JD35TNH4.js"));
-var HMSPrebuilt = React58.forwardRef(
+var Conference = React59.lazy(() => import("./conference-N7S47TDK.js"));
+var HMSPrebuilt = React59.forwardRef(
   ({
     roomCode = "",
     authToken = "",
@@ -6812,13 +6844,14 @@ var HMSPrebuilt = React58.forwardRef(
     themes,
     options: { userName = "", userId = "", endpoints } = {},
     screens,
-    onLeave
+    onLeave,
+    onJoin
   }, ref) => {
     var _a7, _b7, _c, _d;
     const metadata = "";
     const reactiveStore = useRef10();
-    const [hydrated, setHydrated] = React58.useState(false);
-    useEffect28(() => {
+    const [hydrated, setHydrated] = React59.useState(false);
+    useEffect29(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
       const hmsStore = hms.getStore();
@@ -6833,13 +6866,13 @@ var HMSPrebuilt = React58.forwardRef(
         hmsNotifications
       };
     }, []);
-    useEffect28(() => {
+    useEffect29(() => {
       if (!ref || !reactiveStore.current) {
         return;
       }
       ref.current = __spreadValues({}, reactiveStore.current);
     }, [ref]);
-    useEffect28(
+    useEffect29(
       () => () => {
         var _a8;
         (_a8 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a8.hmsActions.leave();
@@ -6869,7 +6902,7 @@ var HMSPrebuilt = React58.forwardRef(
       return null;
     }
     globalStyles();
-    return /* @__PURE__ */ React58.createElement(ErrorBoundary, null, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React59.createElement(ErrorBoundary, null, /* @__PURE__ */ React59.createElement(
       HMSPrebuiltContext.Provider,
       {
         value: {
@@ -6877,6 +6910,7 @@ var HMSPrebuilt = React58.forwardRef(
           roomId,
           role,
           onLeave,
+          onJoin,
           userName,
           userId,
           endpoints: {
@@ -6887,7 +6921,7 @@ var HMSPrebuilt = React58.forwardRef(
           }
         }
       },
-      /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React59.createElement(
         HMSRoomProvider,
         {
           isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -6896,7 +6930,7 @@ var HMSPrebuilt = React58.forwardRef(
           notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
           stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
         },
-        /* @__PURE__ */ React58.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React58.createElement(RoomLayoutContext.Consumer, null, (data) => {
+        /* @__PURE__ */ React59.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React59.createElement(RoomLayoutContext.Consumer, null, (data) => {
           var _a8;
           const layout = data == null ? void 0 : data.layout;
           const theme2 = ((_a8 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a8[0]) || {};
@@ -6905,7 +6939,7 @@ var HMSPrebuilt = React58.forwardRef(
           if (typography2 == null ? void 0 : typography2.font_family) {
             fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
           }
-          return /* @__PURE__ */ React58.createElement(
+          return /* @__PURE__ */ React59.createElement(
             HMSThemeProvider,
             {
               themeType: `${theme2.name}-${Date.now()}`,
@@ -6918,9 +6952,9 @@ var HMSPrebuilt = React58.forwardRef(
                 }
               }
             },
-            /* @__PURE__ */ React58.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
-            /* @__PURE__ */ React58.createElement(Init, null),
-            /* @__PURE__ */ React58.createElement(
+            /* @__PURE__ */ React59.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
+            /* @__PURE__ */ React59.createElement(Init, null),
+            /* @__PURE__ */ React59.createElement(
               Box,
               {
                 id: "prebuilt-container",
@@ -6931,7 +6965,7 @@ var HMSPrebuilt = React58.forwardRef(
                   "-webkit-text-size-adjust": "100%"
                 }
               },
-              /* @__PURE__ */ React58.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
+              /* @__PURE__ */ React59.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
             )
           );
         }))
@@ -6942,42 +6976,42 @@ var HMSPrebuilt = React58.forwardRef(
 HMSPrebuilt.displayName = "HMSPrebuilt";
 var Redirector = ({ showPreview }) => {
   const { roomId, role } = useParams5();
-  return /* @__PURE__ */ React58.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
+  return /* @__PURE__ */ React59.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
 };
 var RouteList = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   useAutoStartStreaming();
-  return /* @__PURE__ */ React58.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React58.createElement(Route, { path: "preview" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "preview" }, /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React58.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React58.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
     }
-  )) : null, /* @__PURE__ */ React58.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React58.createElement(
+  )) : null, /* @__PURE__ */ React59.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React58.createElement(Conference, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React58.createElement(Conference, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
     }
-  )), isLeaveScreenEnabled ? /* @__PURE__ */ React58.createElement(Route, { path: "leave" }, /* @__PURE__ */ React58.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React58.createElement(PostLeave_default, null) }), /* @__PURE__ */ React58.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React58.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React58.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React58.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React58.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React58.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
+  )), isLeaveScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "leave" }, /* @__PURE__ */ React59.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) }), /* @__PURE__ */ React59.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
 };
 var BackSwipe = () => {
   const isConnectedToRoom = useHMSStore26(selectIsConnectedToRoom6);
   const hmsActions = useHMSActions18();
-  useEffect28(() => {
+  useEffect29(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
       if (isConnectedToRoom) {
         yield hmsActions.leave();
@@ -6992,7 +7026,7 @@ var BackSwipe = () => {
 };
 var Router = ({ children }) => {
   const { roomId, role, roomCode } = useHMSPrebuiltContext();
-  return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React58.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React58.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
+  return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React59.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React59.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
 };
 function AppRoutes({
   authTokenByRoomCodeEndpoint,
@@ -7000,7 +7034,7 @@ function AppRoutes({
 }) {
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
-  return /* @__PURE__ */ React58.createElement(Router, null, /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(ToastContainer, null), /* @__PURE__ */ React58.createElement(Notifications, null), /* @__PURE__ */ React58.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React58.createElement(FlyingEmoji, null), /* @__PURE__ */ React58.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React58.createElement(KeyboardHandler, null), /* @__PURE__ */ React58.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React58.createElement(Routes, null, /* @__PURE__ */ React58.createElement(Route, { path: "/*", element: /* @__PURE__ */ React58.createElement(RouteList, null) }))));
+  return /* @__PURE__ */ React59.createElement(Router, null, /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(ToastContainer, null), /* @__PURE__ */ React59.createElement(Notifications, null), /* @__PURE__ */ React59.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React59.createElement(FlyingEmoji, null), /* @__PURE__ */ React59.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React59.createElement(HeadlessEndRoomListener, null), /* @__PURE__ */ React59.createElement(KeyboardHandler, null), /* @__PURE__ */ React59.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React59.createElement(Routes, null, /* @__PURE__ */ React59.createElement(Route, { path: "/*", element: /* @__PURE__ */ React59.createElement(RouteList, null) }))));
 }
 
 // src/Progress/index.tsx
@@ -7109,9 +7143,10 @@ export {
   StopRecordingInSheet,
   Header2 as Header,
   AudioVideoToggle,
-  Chip_default,
   ConnectionIndicator,
   TileConnection_default,
+  PrebuiltAudioIndicator,
+  PrebuiltAttributeBox,
   DialogDropdownTrigger,
   useDropdownSelection,
   SettingsModal_default,
@@ -7122,4 +7157,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-GLYGPYNS.js.map
+//# sourceMappingURL=chunk-PRM33R4R.js.map