@100mslive/roomkit-react 0.1.6 → 0.1.7

package/dist/{conference-S7R3O4OC.js → conference-JNABIZBG.js}

@@ -1,6 +1,6 @@
 import {
   ActionTile
-} from "./chunk-BUWIMYLW.js";
+} from "./chunk-36X4ZCLC.js";
 import {
   APP_DATA,
   Accordion,
@@ -58,7 +58,6 @@ import {
   isChrome,
   isIOS,
   isIPadOS,
-  isInternalRole,
   isMacOS,
   isScreenshareSupported,
   useAuthToken,
@@ -84,7 +83,7 @@ import {
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-Q6U22HIE.js";
+} from "./chunk-Z7P5WITU.js";
 import {
   Box,
   Flex,
@@ -103,10 +102,10 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-NMOZ33TX.js";
+} from "./chunk-5DQ3WTED.js";
 
 // src/Prebuilt/components/conference.jsx
-import React62, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
+import React63, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
@@ -115,13 +114,14 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom7,
   selectRoomState,
   useHMSActions as useHMSActions22,
-  useHMSStore as useHMSStore36
+  useHMSStore as useHMSStore35
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Footer/Footer.tsx
 import React36, { Suspense, useEffect as useEffect6 } from "react";
 import { useMedia as useMedia5 } from "react-use";
 import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
+import { useAVToggle as useAVToggle2 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/EmojiReaction.jsx
 import React2, { Fragment, useState } from "react";
@@ -345,11 +345,12 @@ var DesktopLeaveRoom = ({
   const permissions = useHMSStore2(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
+  const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Fragment2, null, screenType !== "hls_live_streaming" && ((permissions == null ? void 0 : permissions.hlsStreaming) || (permissions == null ? void 0 : permissions.endRoom)) ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(Fragment2, null, showLeaveOptions ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -358,9 +359,7 @@ var DesktopLeaveRoom = ({
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0
       },
-      onClick: () => {
-        leaveRoom({ endstream: false });
-      }
+      onClick: () => setShowLeaveRoomAlert(true)
     },
     /* @__PURE__ */ React6.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React6.createElement(Box, null, /* @__PURE__ */ React6.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
   ), /* @__PURE__ */ React6.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React6.createElement(
@@ -379,7 +378,7 @@ var DesktopLeaveRoom = ({
     {
       css: {
         bg: "$surface_dim",
-        color: "$on_surface_low",
+        color: "$on_surface_medium",
         "&:hover": { bg: "$surface_default", color: "$on_surface_high" }
       },
       onClick: () => leaveRoom({ endstream: false }),
@@ -397,7 +396,7 @@ var DesktopLeaveRoom = ({
         css: { p: 0 }
       }
     )
-  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     Dropdown.Item,
     {
       css: {
@@ -422,15 +421,11 @@ var DesktopLeaveRoom = ({
         css: { p: 0 }
       }
     )
-  ) : null))) : /* @__PURE__ */ React6.createElement(
+  )))) : /* @__PURE__ */ React6.createElement(
     LeaveIconButton,
     {
       onClick: () => {
-        if (screenType === "hls_live_streaming") {
-          setShowLeaveRoomAlert(true);
-        } else {
-          leaveRoom({ endstream: false });
-        }
+        setShowLeaveRoomAlert(true);
       },
       key: "LeaveRoom",
       "data-testid": "leave_room_btn"
@@ -444,7 +439,7 @@ var DesktopLeaveRoom = ({
       isStreamingOn,
       isModal: true
     }
-  )))), screenType === "hls_live_streaming" ? /* @__PURE__ */ React6.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React6.createElement(Dialog.Portal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React6.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))) : null);
+  )))), /* @__PURE__ */ React6.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React6.createElement(Dialog.Portal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React6.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
 };
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
@@ -463,11 +458,12 @@ var MwebLeaveRoom = ({
   const permissions = useHMSStore3(selectPermissions2);
   const { isStreamingOn } = useRecordingStreaming2();
   const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
+  const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
   useDropdownList({ open, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Fragment3, null, screenType !== "hls_live_streaming" ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(Fragment3, null, showLeaveOptions ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -489,7 +485,7 @@ var MwebLeaveRoom = ({
       onClick: () => leaveRoom({ endstream: false }),
       css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
     }
-  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     LeaveCard,
     {
       title: showStream ? "End Stream" : "End Session",
@@ -503,28 +499,14 @@ var MwebLeaveRoom = ({
         setShowEndStreamAlert(true);
       }
     }
-  ) : null)) : /* @__PURE__ */ React7.createElement(
-    LeaveIconButton,
-    {
-      key: "LeaveRoom",
-      "data-testid": "leave_room_btn",
-      onClick: () => {
-        if (screenType === "hls_live_streaming") {
-          setShowLeaveRoomAlert(true);
-        } else {
-          leaveRoom({ endstream: false });
-        }
-      }
-    },
-    /* @__PURE__ */ React7.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(
+  ))) : /* @__PURE__ */ React7.createElement(LeaveIconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => setShowLeaveRoomAlert(true) }, /* @__PURE__ */ React7.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))), /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
       leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn
     }
-  ))), screenType === "hls_live_streaming" ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))) : null);
+  ))), /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
@@ -1881,6 +1863,7 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPeerCount,
   selectPermissions as selectPermissions6,
+  useAVToggle,
   useHMSActions as useHMSActions9,
   useHMSStore as useHMSStore11,
   useRecordingStreaming as useRecordingStreaming5
@@ -1925,6 +1908,8 @@ var MwebOptions = ({
   const peerCount = useHMSStore11(selectPeerCount);
   const emojiCardRef = useRef5(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -1981,7 +1966,7 @@ var MwebOptions = ({
       /* @__PURE__ */ React22.createElement(PeopleIcon, null),
       /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Participants")
     ),
-    screenType !== "hls_live_streaming" ? /* @__PURE__ */ React22.createElement(
+    !noAVPermissions ? /* @__PURE__ */ React22.createElement(
       ActionTile.Root,
       {
         active: isHandRaised,
@@ -2079,7 +2064,6 @@ var MwebOptions = ({
   ), showEmojiCard && /* @__PURE__ */ React22.createElement(
     Box,
     {
-      onClick: () => setShowEmojiCard(false),
       ref: emojiCardRef,
       css: {
         maxWidth: "100%",
@@ -2128,19 +2112,17 @@ var MoreSettings = ({
 
 // src/Prebuilt/components/RaiseHand.jsx
 import React24 from "react";
-import { selectLocalPeer, selectPeerMetadata, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
 import { HandIcon as HandIcon2 } from "@100mslive/react-icons";
 var RaiseHand = () => {
-  var _a;
-  const { toggleHandRaise } = useMyMetadata();
-  const localPeer = useHMSStore12(selectLocalPeer);
-  const isHandRaised = ((_a = useHMSStore12(selectPeerMetadata(localPeer.id))) == null ? void 0 : _a.isHandRaised) || false;
-  return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(IconButton_default, { active: !isHandRaised, onClick: toggleHandRaise }, /* @__PURE__ */ React24.createElement(HandIcon2, null)));
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
+  return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(IconButton_default, { active: !isHandRaised, onClick: () => __async(void 0, null, function* () {
+    return yield toggleHandRaise();
+  }) }, /* @__PURE__ */ React24.createElement(HandIcon2, null)));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
 import React31, { Fragment as Fragment6 } from "react";
-import { selectIsAllowedToPublish, useHMSStore as useHMSStore13, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
+import { selectIsAllowedToPublish, useHMSStore as useHMSStore12, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
 import { ShareScreenIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
@@ -2622,7 +2604,7 @@ function ShareScreenOptions() {
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
 var ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore13(selectIsAllowedToPublish);
+  const isAllowedToPublish = useHMSStore12(selectIsAllowedToPublish);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare2();
   const isVideoScreenshare = amIScreenSharing && !!video;
@@ -2647,10 +2629,10 @@ var ScreenshareToggle = ({ css = {} }) => {
 
 // src/Prebuilt/components/Footer/ChatToggle.tsx
 import React32 from "react";
-import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore14 } from "@100mslive/react-sdk";
+import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
 import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
 var ChatToggle = () => {
-  const countUnreadMessages = useHMSStore14(selectUnreadHMSMessagesCount);
+  const countUnreadMessages = useHMSStore13(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   return /* @__PURE__ */ React32.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React32.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React32.createElement(ChatIcon, null) : /* @__PURE__ */ React32.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
@@ -2660,14 +2642,15 @@ var ChatToggle = () => {
 import React35, { Fragment as Fragment7, useCallback as useCallback6, useEffect as useEffect5, useState as useState18 } from "react";
 import { useDebounce, useMedia as useMedia4 } from "react-use";
 import {
+  selectHandRaisedPeers,
+  selectHasPeerHandRaised,
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID4,
   selectPeerCount as selectPeerCount2,
-  selectPeerMetadata as selectPeerMetadata2,
-  selectPeersByCondition as selectPeersByCondition2,
+  selectPeerMetadata,
   selectPermissions as selectPermissions8,
   useHMSActions as useHMSActions11,
-  useHMSStore as useHMSStore16
+  useHMSStore as useHMSStore15
 } from "@100mslive/react-sdk";
 import {
   ChangeRoleIcon as ChangeRoleIcon2,
@@ -2686,7 +2669,7 @@ import { FixedSizeList } from "react-window";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
 import React33, { useState as useState17 } from "react";
-import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions10, useHMSStore as useHMSStore15, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
+import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions10, useHMSStore as useHMSStore14, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
 import {
   MicOffIcon as MicOffIcon2,
   MicOnIcon,
@@ -2700,7 +2683,7 @@ var dropdownItemCSS = { backgroundColor: "$surface_default", gap: "$4", p: "$8"
 var optionTextCSS = { fontWeight: "$semiBold", color: "$on_surface_high", textTransform: "none" };
 var RoleOptions = ({ roleName, peerList }) => {
   const [openOptions, setOpenOptions] = useState17(false);
-  const permissions = useHMSStore15(selectPermissions7);
+  const permissions = useHMSStore14(selectPermissions7);
   const hmsActions = useHMSActions10();
   const { elements } = useRoomLayoutConferencingScreen();
   const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
@@ -2873,10 +2856,7 @@ var ParticipantList = () => {
   const [filter, setFilter] = useState18();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore16(selectPeersByCondition2((peer) => {
-    var _a;
-    return (_a = JSON.parse(peer.metadata || "{}")) == null ? void 0 : _a.isHandRaised;
-  }));
+  const handRaisedPeers = useHMSStore15(selectHandRaisedPeers);
   participants.forEach((participant) => {
     if (peersOrderedByRoles[participant.roleName] === void 0) {
       peersOrderedByRoles[participant.roleName] = [];
@@ -2906,7 +2886,7 @@ var ParticipantList = () => {
   )));
 };
 var ParticipantCount = () => {
-  const peerCount = useHMSStore16(selectPeerCount2);
+  const peerCount = useHMSStore15(selectPeerCount2);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   useEffect5(() => {
@@ -2934,7 +2914,7 @@ var ParticipantCount = () => {
       "data-testid": "participant_list"
     },
     /* @__PURE__ */ React35.createElement(PeopleIcon2, null),
-    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
+    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, getFormattedCount(peerCount))
   );
 };
 var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
@@ -2974,7 +2954,7 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
   );
 };
 var Participant = ({ peer, isConnected }) => {
-  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  const localPeerId = useHMSStore15(selectLocalPeerID4);
   return /* @__PURE__ */ React35.createElement(
     Flex,
     {
@@ -2995,11 +2975,11 @@ var Participant = ({ peer, isConnected }) => {
   );
 };
 var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
-  var _a, _b;
-  const isHandRaised = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.isHandRaised;
-  const canChangeRole = (_b = useHMSStore16(selectPermissions8)) == null ? void 0 : _b.changeRole;
+  var _a;
+  const isHandRaised = useHMSStore15(selectHasPeerHandRaised(peerId));
+  const canChangeRole = (_a = useHMSStore15(selectPermissions8)) == null ? void 0 : _a.changeRole;
   const shouldShowMoreActions = canChangeRole;
-  const isAudioMuted = !useHMSStore16(selectIsPeerAudioEnabled(peerId));
+  const isAudioMuted = !useHMSStore15(selectIsPeerAudioEnabled(peerId));
   return /* @__PURE__ */ React35.createElement(
     Flex,
     {
@@ -3028,13 +3008,13 @@ var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
       },
       /* @__PURE__ */ React35.createElement(MicOffIcon3, { height: 19, width: 19 })
     ) : null,
-    shouldShowMoreActions && !isInternalRole(role) && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
+    shouldShowMoreActions && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
   );
 });
 var ParticipantMoreActions = ({ peerId, role }) => {
   var _a;
   const hmsActions = useHMSActions11();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore16(selectPermissions8);
+  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore15(selectPermissions8);
   const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
@@ -3044,8 +3024,8 @@ var ParticipantMoreActions = ({ peerId, role }) => {
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
-  const prevRole = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.prevRole;
-  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  const prevRole = (_a = useHMSStore15(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
+  const localPeerId = useHMSStore15(selectLocalPeerID4);
   const isLocal = localPeerId === peerId;
   const [open, setOpen] = useState18(false);
   const handleStageAction = () => __async(void 0, null, function* () {
@@ -3121,7 +3101,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
       {
         type: "text",
         placeholder: placeholder || "Search for participants",
-        css: { w: "100%", p: "$6", pl: "$14", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
+        css: { w: "100%", p: "$6", pl: "$16", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
         value,
         onKeyDown: (event) => {
           event.stopPropagation();
@@ -3137,7 +3117,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React36.lazy(() => import("./VirtualBackground-A5UM363O.js"));
+var VirtualBackground = React36.lazy(() => import("./VirtualBackground-3TI5NA4V.js"));
 var Footer2 = ({
   screenType,
   elements
@@ -3146,6 +3126,8 @@ var Footer2 = ({
   const isMobile = useMedia5(config.media.md);
   const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay);
   const openByDefault = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
+  const { toggleAudio, toggleVideo } = useAVToggle2();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   useEffect6(() => {
@@ -3192,7 +3174,7 @@ var Footer2 = ({
           }
         }
       },
-      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, screenType === "hls_live_streaming" ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), /* @__PURE__ */ React36.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
+      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, noAVPermissions ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), /* @__PURE__ */ React36.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
     ),
     /* @__PURE__ */ React36.createElement(Footer.Right, null, !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React36.createElement(ParticipantCount, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType }))
   );
@@ -3200,9 +3182,9 @@ var Footer2 = ({
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
 import React37, { useCallback as useCallback7, useState as useState19 } from "react";
-import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions12, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions12, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
-  const { hlsError } = useHMSStore17(selectHLSState2).error || false;
+  const { hlsError } = useHMSStore16(selectHLSState2).error || false;
   const [openModal, setOpenModal] = useState19(!!hlsError);
   const hmsActions = useHMSActions12();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
@@ -3247,29 +3229,128 @@ function HLSFailureModal() {
   ) : null;
 }
 
+// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
+import React39, { useEffect as useEffect7 } from "react";
+import {
+  selectLocalPeerName,
+  selectLocalPeerRoleName,
+  selectRoleChangeRequest,
+  useCustomEvent as useCustomEvent2,
+  useHMSActions as useHMSActions13,
+  useHMSStore as useHMSStore17
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
+import React38 from "react";
+import { useMedia as useMedia6 } from "react-use";
+var RequestPrompt = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = "Accept",
+  onAction
+}) => {
+  const isMobile = useMedia6(config.media.md);
+  if (isMobile) {
+    return /* @__PURE__ */ React38.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React38.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React38.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React38.createElement(RequestActions, { actionText, onAction })));
+  }
+  return /* @__PURE__ */ React38.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React38.createElement(Dialog.Portal, null, /* @__PURE__ */ React38.createElement(Dialog.Overlay, null), /* @__PURE__ */ React38.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React38.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React38.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React38.createElement(RequestActions, { actionText, onAction }))));
+};
+var RequestActions = ({ onAction, actionText }) => /* @__PURE__ */ React38.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md", "@md": { mt: "$8", px: "$8" } } }, /* @__PURE__ */ React38.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React38.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React38.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Decline"))), /* @__PURE__ */ React38.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React38.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText)));
+
+// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
+var RoleChangeRequestModal = () => {
+  const hmsActions = useHMSActions13();
+  const { updateMetaData } = useMyMetadata();
+  const currentRole = useHMSStore17(selectLocalPeerRoleName);
+  const roleChangeRequest = useHMSStore17(selectRoleChangeRequest);
+  const name = useHMSStore17(selectLocalPeerName);
+  const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
+  useEffect7(() => {
+    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
+      return;
+    }
+    (() => __async(void 0, null, function* () {
+      yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    }))();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
+  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
+    return null;
+  }
+  const body = /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(
+    Text,
+    {
+      variant: "xs",
+      css: {
+        c: "$on_surface_medium",
+        textAlign: "center",
+        "@md": { textAlign: "left", borderBottom: "1px solid $border_bright", pb: "$4", px: "$8" }
+      }
+    },
+    "Setup your audio and video before joining"
+  ), /* @__PURE__ */ React39.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "center",
+      css: {
+        "@sm": { width: "100%" },
+        flexDirection: "column",
+        mt: "$6",
+        "@md": { px: "$8" }
+      }
+    },
+    /* @__PURE__ */ React39.createElement(PreviewTile, { name: name || "" }),
+    /* @__PURE__ */ React39.createElement(PreviewControls, { hideSettings: true })
+  ));
+  return /* @__PURE__ */ React39.createElement(
+    RequestPrompt,
+    {
+      title: "You're invited to join the stage",
+      onOpenChange: (value) => __async(void 0, null, function* () {
+        var _a;
+        if (!value) {
+          hmsActions.rejectChangeRole(roleChangeRequest);
+          sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
+          yield hmsActions.cancelMidCallPreview();
+          yield hmsActions.lowerLocalPeerHand();
+        }
+      }),
+      body,
+      onAction: () => __async(void 0, null, function* () {
+        yield hmsActions.acceptChangeRole(roleChangeRequest);
+        yield updateMetaData({ prevRole: currentRole });
+        yield hmsActions.lowerLocalPeerHand();
+      }),
+      actionText: "Accept"
+    }
+  );
+};
+
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-import React60, { Suspense as Suspense2, useEffect as useEffect23 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions20, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+import React62, { Suspense as Suspense2, useEffect as useEffect24 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName3, useHMSActions as useHMSActions21, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-import React49, { useEffect as useEffect14, useMemo as useMemo6, useState as useState26 } from "react";
+import React51, { useEffect as useEffect15, useMemo as useMemo6, useState as useState26 } from "react";
 import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore23, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-import React42, { useEffect as useEffect10, useMemo as useMemo3, useState as useState21 } from "react";
-import { useMedia as useMedia8 } from "react-use";
-import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import React44, { useEffect as useEffect11, useMemo as useMemo3, useState as useState21 } from "react";
+import { useMedia as useMedia9 } from "react-use";
+import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
-import React39, { useEffect as useEffect7, useRef as useRef6 } from "react";
+import React41, { useEffect as useEffect8, useRef as useRef6 } from "react";
 import Draggable from "react-draggable";
-import { useMedia as useMedia6 } from "react-use";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer as selectLocalPeer2, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
+import { useMedia as useMedia7 } from "react-use";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useVideoTileLayout.ts
-import React38, { useContext } from "react";
-var VideoTileContext = React38.createContext({
+import React40, { useContext } from "react";
+var VideoTileContext = React40.createContext({
   enableSpotlightingPeer: true,
   hideParticipantNameOnTile: false,
   roundedVideoTile: true,
@@ -3285,14 +3366,14 @@ var useVideoTileContext = () => {
 
 // src/Prebuilt/components/InsetTile.tsx
 var MinimisedTile = ({ setMinimised }) => {
-  return /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React39.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React39.createElement(Text, null, "You"), /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React41.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React41.createElement(Text, null, "You"), /* @__PURE__ */ React41.createElement(
     IconButton_default,
     {
       className: "__cancel-drag-event",
       onClick: () => setMinimised(false),
       css: { bg: "transparent", border: "transparent" }
     },
-    /* @__PURE__ */ React39.createElement(ExpandIcon2, null)
+    /* @__PURE__ */ React41.createElement(ExpandIcon2, null)
   ));
 };
 var insetHeightPx = 180;
@@ -3300,9 +3381,9 @@ var insetMaxWidthPx = 240;
 var defaultMobileAspectRatio = 9 / 16;
 var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
-  const isMobile = useMedia6(config.media.md);
-  const isLandscape = useMedia6(config.media.ls);
-  const localPeer = useHMSStore18(selectLocalPeer2);
+  const isMobile = useMedia7(config.media.md);
+  const isLandscape = useMedia7(config.media.ls);
+  const localPeer = useHMSStore18(selectLocalPeer);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
   const videoTrack = useHMSStore18(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
   const isAllowedToPublish = useHMSStore18(selectIsAllowedToPublish2);
@@ -3318,7 +3399,7 @@ var InsetTile = () => {
     height = width / aspectRatio;
   }
   const nodeRef = useRef6(null);
-  useEffect7(() => {
+  useEffect8(() => {
     const node = nodeRef.current;
     if (!node || !window.ResizeObserver) {
       return;
@@ -3339,7 +3420,7 @@ var InsetTile = () => {
   if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React41.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React41.createElement(
     Box,
     {
       ref: nodeRef,
@@ -3355,7 +3436,7 @@ var InsetTile = () => {
         h: height
       } : {})
     },
-    minimised ? /* @__PURE__ */ React39.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React39.createElement(
+    minimised ? /* @__PURE__ */ React41.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React41.createElement(
       VideoTile_default,
       __spreadProps(__spreadValues({
         peerId: localPeer == null ? void 0 : localPeer.id,
@@ -3377,7 +3458,7 @@ var InsetTile = () => {
 };
 
 // src/Prebuilt/components/Pagination.tsx
-import React40, { useEffect as useEffect8 } from "react";
+import React42, { useEffect as useEffect9 } from "react";
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
@@ -3394,7 +3475,7 @@ var Pagination = ({
     e.stopPropagation();
     onPageChange(Math.max(page - 1, 0));
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (page >= numPages) {
       onPageChange(Math.max(0, numPages - 1));
     }
@@ -3402,7 +3483,7 @@ var Pagination = ({
   if (numPages <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React40.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React40.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React40.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React42.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React42.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React42.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React42.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React42.createElement(
     StyledPagination.Dot,
     {
       key: i,
@@ -3412,15 +3493,15 @@ var Pagination = ({
         onPageChange(i);
       }
     }
-  ))) : null, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React40.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+  ))) : null, /* @__PURE__ */ React42.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React42.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
 };
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
-import React41 from "react";
-var Grid = React41.forwardRef(
+import React43 from "react";
+var Grid = React43.forwardRef(
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
-    return /* @__PURE__ */ React41.createElement(
+    return /* @__PURE__ */ React43.createElement(
       Box,
       {
         ref,
@@ -3438,7 +3519,7 @@ var Grid = React41.forwardRef(
       },
       tiles == null ? void 0 : tiles.map((tile) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ React41.createElement(
+        return /* @__PURE__ */ React43.createElement(
           VideoTile_default,
           __spreadValues({
             key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
@@ -3456,8 +3537,8 @@ var Grid = React41.forwardRef(
 );
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-import { useEffect as useEffect9, useMemo as useMemo2, useState as useState20 } from "react";
-import { useMeasure as useMeasure2, useMedia as useMedia7 } from "react-use";
+import { useEffect as useEffect10, useMemo as useMemo2, useState as useState20 } from "react";
+import { useMeasure as useMeasure2, useMedia as useMedia8 } from "react-use";
 import {
   getPeersWithTiles,
   selectTracksMap as selectTracksMap3,
@@ -3493,9 +3574,9 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore3();
   const [ref, { width, height }] = useMeasure2();
-  const isMobile = useMedia7(config.media.lg);
+  const isMobile = useMedia8(config.media.lg);
   const [pagesWithTiles, setPagesWithTiles] = useState20([]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (width === 0 || height === 0) {
       return;
     }
@@ -3562,8 +3643,8 @@ var useTileLayout = ({
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore19(selectLocalPeer3);
-  const isMobile = useMedia8(config.media.md);
+  const localPeer = useHMSStore19(selectLocalPeer2);
+  const isMobile = useMedia9(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
@@ -3585,12 +3666,12 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
   });
   const [page, setPage] = useState21(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect10(() => {
+  useEffect11(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React42.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React42.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React44.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React44.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React44.createElement(
     Pagination,
     {
       page,
@@ -3600,20 +3681,20 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
       },
       numPages: pagesWithTiles.length
     }
-  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ React42.createElement(InsetTile, null));
+  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ React44.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
-import React45, { useEffect as useEffect12, useState as useState23 } from "react";
-import { selectLocalPeer as selectLocalPeer4, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+import React47, { useEffect as useEffect13, useState as useState23 } from "react";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-import React44, { useEffect as useEffect11, useState as useState22 } from "react";
-import { useMedia as useMedia9 } from "react-use";
+import React46, { useEffect as useEffect12, useState as useState22 } from "react";
+import { useMedia as useMedia10 } from "react-use";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
-import React43 from "react";
-var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React43.createElement(
+import React45 from "react";
+var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React45.createElement(
   Flex,
   {
     direction: "column",
@@ -3622,7 +3703,7 @@ var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React43.createElement(
   children
 );
 var ProminentSection = ({ children, css = {} }) => {
-  return /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
+  return /* @__PURE__ */ React45.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
 };
 var SecondarySection = ({
   tiles,
@@ -3633,12 +3714,12 @@ var SecondarySection = ({
   if (!(tiles == null ? void 0 : tiles.length)) {
     return null;
   }
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React45.createElement(
     Box,
     {
       css: {
         display: "grid",
-        gridTemplateRows: React43.Children.count(children) > 0 ? "136px auto" : "154px",
+        gridTemplateRows: React45.Children.count(children) > 0 ? "136px auto" : "154px",
         gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
         margin: "0 auto",
         gap: "$2 $4",
@@ -3648,7 +3729,7 @@ var SecondarySection = ({
     },
     tiles.map((tile) => {
       var _a, _b, _c, _d;
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React45.createElement(
         VideoTile_default,
         __spreadValues({
           key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
@@ -3665,7 +3746,7 @@ var SecondarySection = ({
         }, tileLayoutProps)
       );
     }),
-    /* @__PURE__ */ React43.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
+    /* @__PURE__ */ React45.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
   );
 };
 var ProminenceLayout = {
@@ -3677,17 +3758,17 @@ var ProminenceLayout = {
 // src/Prebuilt/components/SecondaryTiles.tsx
 var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia10(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
   const [page, setPage] = useState22(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect11(() => {
+  useEffect12(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React44.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React46.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React46.createElement(
     Pagination,
     {
       page,
@@ -3745,7 +3826,7 @@ function RoleProminence({
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore20(selectLocalPeer4);
+  const localPeer = useHMSStore20(selectLocalPeer3);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -3757,12 +3838,12 @@ function RoleProminence({
   });
   const [page, setPage] = useState23(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect12(() => {
+  useEffect13(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React45.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React45.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React45.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React47.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React47.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React47.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React47.createElement(
     Pagination,
     {
       page,
@@ -3772,16 +3853,16 @@ function RoleProminence({
       },
       numPages: pagesWithTiles.length
     }
-  ), /* @__PURE__ */ React45.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React45.createElement(InsetTile, null));
+  ), /* @__PURE__ */ React47.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React47.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-import React48, { useEffect as useEffect13, useMemo as useMemo5, useState as useState25 } from "react";
-import { useMedia as useMedia10 } from "react-use";
+import React50, { useEffect as useEffect14, useMemo as useMemo5, useState as useState25 } from "react";
+import { useMedia as useMedia11 } from "react-use";
 import { selectPeersScreenSharing, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-import React47, { useRef as useRef7, useState as useState24 } from "react";
+import React49, { useRef as useRef7, useState as useState24 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
@@ -3794,12 +3875,12 @@ import {
 import { ExpandIcon as ExpandIcon3, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
-import React46 from "react";
-import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
+import React48 from "react";
+import { useHMSActions as useHMSActions14 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon5, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions13();
-  return /* @__PURE__ */ React46.createElement(
+  const hmsActions = useHMSActions14();
+  return /* @__PURE__ */ React48.createElement(
     Flex,
     {
       direction: "column",
@@ -3811,9 +3892,9 @@ var ScreenshareDisplay = () => {
         color: "$on_surface_high"
       }
     },
-    /* @__PURE__ */ React46.createElement(ShareScreenIcon2, { width: 48, height: 48 }),
-    /* @__PURE__ */ React46.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React48.createElement(ShareScreenIcon2, { width: 48, height: 48 }),
+    /* @__PURE__ */ React48.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
+    /* @__PURE__ */ React48.createElement(
       Button,
       {
         variant: "danger",
@@ -3823,7 +3904,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React46.createElement(CrossIcon5, { width: 18, height: 18 }),
+      /* @__PURE__ */ React48.createElement(CrossIcon5, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -3853,7 +3934,7 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
   const isFullScreenSupported = screenfull2.isEnabled;
   const audioTrack = useHMSStore21(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
-    return /* @__PURE__ */ React47.createElement(ScreenshareDisplay, null);
+    return /* @__PURE__ */ React49.createElement(ScreenshareDisplay, null);
   }
   if (!peer) {
     return null;
@@ -3863,7 +3944,7 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
     isLocal: false,
     track
   });
-  return /* @__PURE__ */ React47.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React49.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React49.createElement(
     StyledVideoTile.Container,
     {
       transparentBg: true,
@@ -3874,9 +3955,9 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         setIsMouseHovered(false);
       }
     },
-    showStatsOnTiles ? /* @__PURE__ */ React47.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React47.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React47.createElement(ShrinkIcon, null) : /* @__PURE__ */ React47.createElement(ExpandIcon3, null)) : null,
-    track ? /* @__PURE__ */ React47.createElement(
+    showStatsOnTiles ? /* @__PURE__ */ React49.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
+    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React49.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React49.createElement(ShrinkIcon, null) : /* @__PURE__ */ React49.createElement(ExpandIcon3, null)) : null,
+    track ? /* @__PURE__ */ React49.createElement(
       Video,
       {
         screenShare: true,
@@ -3886,8 +3967,8 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         css: { minHeight: 0 }
       }
     ) : null,
-    /* @__PURE__ */ React47.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React49.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
+    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React49.createElement(
       TileMenu_default,
       {
         isScreenshare: true,
@@ -3899,7 +3980,7 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
     ) : null
   ));
 };
-var ScreenshareTile = React47.memo(Tile);
+var ScreenshareTile = React49.memo(Tile);
 var ScreenshareTile_default = ScreenshareTile;
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
@@ -3909,18 +3990,18 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const [page, setPage] = useState25(0);
   const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia11(config.media.md);
   const secondaryPeers = useMemo5(
     () => isMobile ? activeSharePeer ? [activeSharePeer, ...peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id))] : peers : peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id)),
     [activeSharePeer, peers, isMobile]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     setActiveScreenSharePeer(isMobile ? "" : activeSharePeer == null ? void 0 : activeSharePeer.id);
     return () => {
       setActiveScreenSharePeer("");
     };
   }, [activeSharePeer == null ? void 0 : activeSharePeer.id, isMobile, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React48.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React48.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React48.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React48.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React50.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React50.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React50.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React50.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React50.createElement(
     SecondaryTiles,
     {
       peers: secondaryPeers,
@@ -4050,7 +4131,7 @@ var GridLayout = ({
     hideMetadataOnTile: hide_metadata_on_tile,
     objectFit: video_object_fit
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (mainPage !== 0) {
       return;
     }
@@ -4061,7 +4142,7 @@ var GridLayout = ({
     peersSorter.onUpdate(setSortedPeers);
   }, [mainPage, peersSorter, updatedPeers, pageSize]);
   if (peerSharing) {
-    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React51.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React51.createElement(
       ScreenshareLayout,
       {
         peers: sortedPeers,
@@ -4071,7 +4152,7 @@ var GridLayout = ({
       }
     ));
   } else if (isRoleProminence) {
-    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React51.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React51.createElement(
       RoleProminence,
       {
         peers: sortedPeers,
@@ -4083,7 +4164,7 @@ var GridLayout = ({
       }
     ));
   }
-  return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React51.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React51.createElement(
     EqualProminence,
     {
       peers: sortedPeers,
@@ -4096,7 +4177,7 @@ var GridLayout = ({
 };
 
 // src/Prebuilt/layouts/EmbedView.jsx
-import React50, { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef8, useState as useState27 } from "react";
+import React52, { useCallback as useCallback8, useEffect as useEffect16, useMemo as useMemo7, useRef as useRef8, useState as useState27 } from "react";
 import {
   selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
@@ -4105,7 +4186,7 @@ import {
   useScreenShare as useScreenShare3
 } from "@100mslive/react-sdk";
 var EmbedView = () => {
-  return /* @__PURE__ */ React50.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React50.createElement(EmbedComponent, null));
+  return /* @__PURE__ */ React52.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React52.createElement(EmbedComponent, null));
 };
 var EmbebScreenShareView = ({ children }) => {
   const peers = useHMSStore24(selectPeers3);
@@ -4115,13 +4196,13 @@ var EmbebScreenShareView = ({ children }) => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
     return smallTilePeers2;
   }, [peers, peerPresenting]);
-  useEffect15(() => {
+  useEffect16(() => {
     setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
     return () => {
       setActiveScreenSharePeer("");
     };
   }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React50.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React50.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React50.createElement(SecondaryTiles, { peers: smallTilePeers }));
+  return /* @__PURE__ */ React52.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React52.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React52.createElement(SecondaryTiles, { peers: smallTilePeers }));
 };
 var EmbedComponent = () => {
   const { amIScreenSharing, toggleScreenShare } = useScreenShare3(throwErrorHandler);
@@ -4135,7 +4216,7 @@ var EmbedComponent = () => {
       setEmbedConfig({ url: "" });
     }
   }, [src, setEmbedConfig]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
       screenShareAttemptInProgress.current = true;
       toggleScreenShare({
@@ -4148,7 +4229,7 @@ var EmbedComponent = () => {
       });
     }
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (wasScreenShared && !amIScreenSharing) {
       resetEmbedConfig();
     }
@@ -4159,7 +4240,7 @@ var EmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React50.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React52.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React52.createElement(
     "iframe",
     {
       src,
@@ -4172,10 +4253,10 @@ var EmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
-import React51, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState28 } from "react";
+import React53, { useCallback as useCallback9, useEffect as useEffect17, useRef as useRef9, useState as useState28 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 var PDFView = () => {
-  return /* @__PURE__ */ React51.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React51.createElement(PDFEmbedComponent, null));
+  return /* @__PURE__ */ React53.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React53.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
   const ref = useRef9();
@@ -4193,7 +4274,7 @@ var PDFEmbedComponent = () => {
   const resetEmbedConfig = useCallback9(() => {
     setPDFConfig({ state: false });
   }, [setPDFConfig]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (isPDFLoaded && ref.current) {
       ref.current.contentWindow.postMessage(
         {
@@ -4203,7 +4284,7 @@ var PDFEmbedComponent = () => {
       );
     }
   }, [isPDFLoaded, themeType]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
       screenShareAttemptInProgress.current = true;
       toggleScreenShare({
@@ -4217,7 +4298,7 @@ var PDFEmbedComponent = () => {
       });
     }
   }, []);
-  useEffect16(() => {
+  useEffect17(() => {
     if (wasScreenShared && !amIScreenSharing) {
       resetEmbedConfig();
     }
@@ -4228,7 +4309,7 @@ var PDFEmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React51.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React53.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React53.createElement(
     "iframe",
     {
       src: pdfJSURL,
@@ -4261,47 +4342,47 @@ var PDFEmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
-import React58 from "react";
-import { useMedia as useMedia15 } from "react-use";
+import React60 from "react";
+import { useMedia as useMedia16 } from "react-use";
 import { selectAppData as selectAppData3, selectVideoTrackByPeerID, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SidePaneTabs.tsx
-import React55, { useEffect as useEffect21, useState as useState32 } from "react";
-import { useMedia as useMedia14 } from "react-use";
+import React57, { useEffect as useEffect22, useState as useState32 } from "react";
+import { useMedia as useMedia15 } from "react-use";
 import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore30 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.jsx
-import React54, { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef13, useState as useState31 } from "react";
-import { useMedia as useMedia13 } from "react-use";
+import React56, { useCallback as useCallback14, useEffect as useEffect21, useRef as useRef13, useState as useState31 } from "react";
+import { useMedia as useMedia14 } from "react-use";
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
   selectPeerNameByID as selectPeerNameByID3,
   selectPermissions as selectPermissions10,
   selectSessionStore,
-  useHMSActions as useHMSActions18,
+  useHMSActions as useHMSActions19,
   useHMSNotifications,
   useHMSStore as useHMSStore29
 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon6, PinIcon as PinIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.jsx
-import React52, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect17, useLayoutEffect, useMemo as useMemo8, useRef as useRef10, useState as useState29 } from "react";
+import React54, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect18, useLayoutEffect, useMemo as useMemo8, useRef as useRef10, useState as useState29 } from "react";
 import { useInView } from "react-intersection-observer";
-import { useMedia as useMedia11 } from "react-use";
+import { useMedia as useMedia12 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
   selectHMSMessages,
   selectLocalPeerID as selectLocalPeerID6,
-  selectLocalPeerRoleName,
+  selectLocalPeerRoleName as selectLocalPeerRoleName2,
   selectMessagesByPeerID,
   selectMessagesByRole,
   selectPeerNameByID as selectPeerNameByID2,
   selectPermissions as selectPermissions9,
-  useHMSActions as useHMSActions15,
-  useHMSStore as useHMSStore26
+  useHMSActions as useHMSActions16,
+  useHMSStore as useHMSStore27
 } from "@100mslive/react-sdk";
 import { PinIcon, VerticalMenuIcon as VerticalMenuIcon5 } from "@100mslive/react-icons";
 
@@ -4313,12 +4394,12 @@ import { useCallback as useCallback10 } from "react";
 import {
   selectPeerNameByID,
   selectSessionMetadata,
-  useHMSActions as useHMSActions14,
+  useHMSActions as useHMSActions15,
   useHMSStore as useHMSStore25,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
-  const hmsActions = useHMSActions14();
+  const hmsActions = useHMSActions15();
   const vanillaStore = useHMSVanillaStore5();
   const pinnedMessage = useHMSStore25(selectSessionMetadata);
   const setPinnedMessage = useCallback10(
@@ -4337,6 +4418,19 @@ var useSetPinnedMessage = () => {
   return { setPinnedMessage };
 };
 
+// src/Prebuilt/components/Chat/useUnreadCount.js
+import {
+  selectMessagesUnreadCountByPeerID,
+  selectMessagesUnreadCountByRole,
+  selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
+  useHMSStore as useHMSStore26
+} from "@100mslive/react-sdk";
+var useUnreadCount = ({ role, peerId }) => {
+  const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
+  const unreadCount = useHMSStore26(unreadCountSelector);
+  return unreadCount;
+};
+
 // src/Prebuilt/components/Chat/ChatBody.jsx
 var formatTime = (date) => {
   if (!(date instanceof Date)) {
@@ -4354,7 +4448,7 @@ var formatTime = (date) => {
   return `${hours}:${mins} ${suffix}`;
 };
 var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React54.createElement(
     Flex,
     {
       align: "center",
@@ -4366,16 +4460,16 @@ var MessageTypeContainer = ({ left, right }) => {
         r: "$0"
       }
     },
-    left && /* @__PURE__ */ React52.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
-    left && right && /* @__PURE__ */ React52.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
-    right && /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
+    left && /* @__PURE__ */ React54.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
+    left && right && /* @__PURE__ */ React54.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
+    right && /* @__PURE__ */ React54.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
   );
 };
 var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-  const peerName = useHMSStore26(selectPeerNameByID2(receiver));
-  const localPeerRoleName = useHMSStore26(selectLocalPeerRoleName);
+  const peerName = useHMSStore27(selectPeerNameByID2(receiver));
+  const localPeerRoleName = useHMSStore27(selectLocalPeerRoleName2);
   if (receiver) {
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React54.createElement(
       MessageTypeContainer,
       {
         left: hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ""}` : "TO YOU",
@@ -4384,7 +4478,7 @@ var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
     );
   }
   if (roles && roles.length) {
-    return /* @__PURE__ */ React52.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
+    return /* @__PURE__ */ React54.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
   }
   return null;
 };
@@ -4398,10 +4492,10 @@ var Link = styled("a", {
 });
 var AnnotisedMessage = ({ message }) => {
   if (!message) {
-    return /* @__PURE__ */ React52.createElement(Fragment8, null);
+    return /* @__PURE__ */ React54.createElement(Fragment8, null);
   }
-  return /* @__PURE__ */ React52.createElement(Fragment8, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React52.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
+  return /* @__PURE__ */ React54.createElement(Fragment8, null, message.trim().split(/(\s)/).map(
+    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React54.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
   ));
 };
 var getMessageType = ({ roles, receiver }) => {
@@ -4415,14 +4509,14 @@ var ChatActions = ({ onPin, showPinAction }) => {
   if (!showPinAction) {
     return null;
   }
-  return /* @__PURE__ */ React52.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React52.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React52.createElement(IconButton, null, /* @__PURE__ */ React52.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React52.createElement(VerticalMenuIcon5, null)))), /* @__PURE__ */ React52.createElement(Dropdown.Portal, null, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React54.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React54.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React54.createElement(IconButton, null, /* @__PURE__ */ React54.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React54.createElement(VerticalMenuIcon5, null)))), /* @__PURE__ */ React54.createElement(Dropdown.Portal, null, /* @__PURE__ */ React54.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: "end",
       css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
     },
-    /* @__PURE__ */ React52.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React52.createElement(PinIcon, null), /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
+    /* @__PURE__ */ React54.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React54.createElement(PinIcon, null), /* @__PURE__ */ React54.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
   )));
 };
 var SenderName = styled(Text, {
@@ -4434,120 +4528,127 @@ var SenderName = styled(Text, {
   color: "$on_surface_high",
   fontWeight: "$semiBold"
 });
-var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
-  var _a, _b;
-  const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-  const rowRef = useRef10(null);
-  useEffect17(() => {
-    if (rowRef.current) {
-      setRowHeight(index, rowRef.current.clientHeight);
-    }
-  }, [index, setRowHeight]);
-  const isMobile = useMedia11(config.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
-  const hmsActions = useHMSActions15();
-  const localPeerId = useHMSStore26(selectLocalPeerID6);
-  const permissions = useHMSStore26(selectPermissions9);
-  const messageType = getMessageType({
-    roles: message.recipientRoles,
-    receiver: message.recipientPeer
-  });
-  const showPinAction = permissions.removeOthers && !messageType && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages);
-  useEffect17(() => {
-    if (message.id && !message.read && inView) {
-      hmsActions.setMessageRead(true, message.id);
-    }
-  }, [message.read, hmsActions, inView, message.id]);
-  return /* @__PURE__ */ React52.createElement(
-    Box,
-    {
-      ref,
-      as: "div",
-      css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
-      style
-    },
-    /* @__PURE__ */ React52.createElement(
-      Flex,
+var ChatMessage = React54.memo(
+  ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
+    var _a, _b;
+    const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+    const rowRef = useRef10(null);
+    useEffect18(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current.clientHeight);
+      }
+    }, [index, setRowHeight]);
+    const isMobile = useMedia12(config.media.md);
+    const { elements } = useRoomLayoutConferencingScreen();
+    const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
+    const hmsActions = useHMSActions16();
+    const localPeerId = useHMSStore27(selectLocalPeerID6);
+    const permissions = useHMSStore27(selectPermissions9);
+    const messageType = getMessageType({
+      roles: message.recipientRoles,
+      receiver: message.recipientPeer
+    });
+    const showPinAction = permissions.removeOthers && !messageType && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages);
+    useEffect18(() => {
+      if (message.id && !message.read && inView) {
+        hmsActions.setMessageRead(true, message.id);
+      }
+    }, [message.read, hmsActions, inView, message.id]);
+    useEffect18(() => {
+      if (isLast && inView && unreadCount >= 1) {
+        scrollToBottom(1);
+      }
+    }, [inView, isLast, scrollToBottom, unreadCount]);
+    return /* @__PURE__ */ React54.createElement(
+      Box,
       {
-        ref: rowRef,
-        align: "center",
-        css: {
-          flexWrap: "wrap",
-          // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
-          r: messageType ? "$1" : void 0,
-          px: messageType ? "$4" : "$2",
-          py: messageType ? "$4" : 0,
-          userSelect: "none"
-        },
-        key: message.time,
-        "data-testid": "chat_msg"
+        ref,
+        as: "div",
+        css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
+        style
       },
-      /* @__PURE__ */ React52.createElement(
-        Text,
+      /* @__PURE__ */ React54.createElement(
+        Flex,
         {
+          ref: rowRef,
+          align: "center",
           css: {
-            color: isOverlay ? "#FFF" : "$on_surface_high",
-            fontWeight: "$semiBold",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%"
+            flexWrap: "wrap",
+            // Theme independent color, token should not be used for transparent chat
+            bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
+            r: messageType ? "$1" : void 0,
+            px: messageType ? "$4" : "$2",
+            py: messageType ? "$4" : 0,
+            userSelect: "none"
           },
-          as: "div"
+          key: message.time,
+          "data-testid": "chat_msg"
         },
-        /* @__PURE__ */ React52.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React52.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React52.createElement(
+        /* @__PURE__ */ React54.createElement(
           Text,
           {
-            as: "span",
-            variant: "xs",
             css: {
-              ml: "$4",
-              color: "$on_surface_medium",
-              flexShrink: 0
-            }
+              color: isOverlay ? "#FFF" : "$on_surface_high",
+              fontWeight: "$semiBold",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%"
+            },
+            as: "div"
           },
-          formatTime(message.time)
-        ) : null),
-        /* @__PURE__ */ React52.createElement(
-          MessageType,
-          {
-            hasCurrentUserSent: message.sender === localPeerId,
-            receiver: message.recipientPeer,
-            roles: message.recipientRoles
-          }
+          /* @__PURE__ */ React54.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React54.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React54.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React54.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React54.createElement(
+            Text,
+            {
+              as: "span",
+              variant: "xs",
+              css: {
+                ml: "$4",
+                color: "$on_surface_medium",
+                flexShrink: 0
+              }
+            },
+            formatTime(message.time)
+          ) : null),
+          /* @__PURE__ */ React54.createElement(
+            MessageType,
+            {
+              hasCurrentUserSent: message.sender === localPeerId,
+              receiver: message.recipientPeer,
+              roles: message.recipientRoles
+            }
+          ),
+          !isOverlay ? /* @__PURE__ */ React54.createElement(ChatActions, { onPin, showPinAction }) : null
         ),
-        !isOverlay ? /* @__PURE__ */ React52.createElement(ChatActions, { onPin, showPinAction }) : null
-      ),
-      /* @__PURE__ */ React52.createElement(
-        Text,
-        {
-          variant: "sm",
-          css: {
-            w: "100%",
-            mt: "$2",
-            wordBreak: "break-word",
-            whiteSpace: "pre-wrap",
-            userSelect: "all",
-            color: isOverlay ? "#FFF" : "$on_surface_high"
+        /* @__PURE__ */ React54.createElement(
+          Text,
+          {
+            variant: "sm",
+            css: {
+              w: "100%",
+              mt: "$2",
+              wordBreak: "break-word",
+              whiteSpace: "pre-wrap",
+              userSelect: "all",
+              color: isOverlay ? "#FFF" : "$on_surface_high"
+            },
+            onClick: (e) => e.stopPropagation()
           },
-          onClick: (e) => e.stopPropagation()
-        },
-        /* @__PURE__ */ React52.createElement(AnnotisedMessage, { message: message.message })
+          /* @__PURE__ */ React54.createElement(AnnotisedMessage, { message: message.message })
+        )
       )
-    )
-  );
-});
-var ChatList = React52.forwardRef(
-  ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+    );
+  }
+);
+var ChatList = React54.forwardRef(
+  ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
       if (listRef.current && listRef.current.scrollToItem) {
         scrollToBottom(1);
       }
     }, [listRef]);
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React54.createElement(
       VariableSizeList,
       {
         ref: listRef,
@@ -4559,7 +4660,7 @@ var ChatList = React52.forwardRef(
           overflowX: "hidden"
         }
       },
-      ({ index, style }) => /* @__PURE__ */ React52.createElement(
+      ({ index, style }) => /* @__PURE__ */ React54.createElement(
         ChatMessage,
         {
           style,
@@ -4567,13 +4668,16 @@ var ChatList = React52.forwardRef(
           key: messages[index].id,
           message: messages[index],
           setRowHeight,
+          unreadCount,
+          isLast: index >= messages.length - 2,
+          scrollToBottom,
           onPin: () => setPinnedMessage(messages[index])
         }
       )
     );
   }
 );
-var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom }, listRef) => {
+var VirtualizedChatMessages = React54.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
   const rowHeights = useRef10({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
@@ -4585,7 +4689,7 @@ var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom },
     },
     [listRef]
   );
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React54.createElement(
     Box,
     {
       css: {
@@ -4594,14 +4698,14 @@ var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom },
       },
       as: "div"
     },
-    /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React54.createElement(
       AutoSizer,
       {
         style: {
           width: "90%"
         }
       },
-      ({ height, width }) => /* @__PURE__ */ React52.createElement(
+      ({ height, width }) => /* @__PURE__ */ React54.createElement(
         ChatList,
         {
           width,
@@ -4610,21 +4714,23 @@ var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom },
           setRowHeight,
           getRowHeight,
           scrollToBottom,
-          ref: listRef
+          ref: listRef,
+          unreadCount
         }
       )
     )
   );
 });
-var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+var ChatBody = React54.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
   var _a;
   const storeMessageSelector = role ? selectMessagesByRole(role) : peerId ? selectMessagesByPeerID(peerId) : selectHMSMessages;
-  let messages = useHMSStore26(storeMessageSelector);
+  let messages = useHMSStore27(storeMessageSelector);
   messages = useMemo8(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
-  const isMobile = useMedia11(config.media.md);
+  const isMobile = useMedia12(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
+  const unreadCount = useUnreadCount({ role, peerId });
   if (messages.length === 0 && !(isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay))) {
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React54.createElement(
       Flex,
       {
         css: {
@@ -4636,7 +4742,7 @@ var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
         align: "center",
         justify: "center"
       },
-      /* @__PURE__ */ React52.createElement(Box, null, /* @__PURE__ */ React52.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ React52.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ React52.createElement(
+      /* @__PURE__ */ React54.createElement(Box, null, /* @__PURE__ */ React54.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ React54.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ React54.createElement(
         Text,
         {
           variant: "sm",
@@ -4646,23 +4752,31 @@ var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
       ))
     );
   }
-  return /* @__PURE__ */ React52.createElement(Fragment8, null, /* @__PURE__ */ React52.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
+  return /* @__PURE__ */ React54.createElement(Fragment8, null, /* @__PURE__ */ React54.createElement(
+    VirtualizedChatMessages,
+    {
+      messages,
+      scrollToBottom,
+      unreadCount,
+      ref: listRef
+    }
+  ));
 });
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
-import React53, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef12, useState as useState30 } from "react";
-import { useMedia as useMedia12 } from "react-use";
+import React55, { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef12, useState as useState30 } from "react";
+import { useMedia as useMedia13 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { useHMSActions as useHMSActions17 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions18 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, SendIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AppData/useChatState.js
 import { useCallback as useCallback12 } from "react";
-import { selectAppData as selectAppData2, useHMSActions as useHMSActions16, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions17, useHMSStore as useHMSStore28 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions16();
-  let chatDraftMessage = useHMSStore27(selectAppData2(APP_DATA.chatDraft));
+  const hmsActions = useHMSActions17();
+  let chatDraftMessage = useHMSStore28(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
@@ -4676,10 +4790,10 @@ var useChatDraftMessage = () => {
 };
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-import { useEffect as useEffect18, useRef as useRef11 } from "react";
+import { useEffect as useEffect19, useRef as useRef11 } from "react";
 var useEmojiPickerStyles = (showing) => {
   const ref = useRef11(null);
-  useEffect18(() => {
+  useEffect19(() => {
     if (showing) {
       setTimeout(() => {
         var _a, _b;
@@ -4729,7 +4843,7 @@ var TextArea = styled("textarea", {
 function EmojiPicker({ onSelect }) {
   const [showEmoji, setShowEmoji] = useState30(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React53.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React53.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React53.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React53.createElement(EmojiIcon3, null))), /* @__PURE__ */ React53.createElement(Popover.Portal, null, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React55.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React55.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React55.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React55.createElement(EmojiIcon3, null))), /* @__PURE__ */ React55.createElement(Popover.Portal, null, /* @__PURE__ */ React55.createElement(
     Popover.Content,
     {
       alignOffset: -40,
@@ -4739,7 +4853,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React55.createElement(
       Box,
       {
         css: {
@@ -4748,7 +4862,7 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ React53.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ React55.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
@@ -4759,10 +4873,10 @@ var ChatFooter = ({
   children
 }) => {
   var _a;
-  const hmsActions = useHMSActions17();
+  const hmsActions = useHMSActions18();
   const inputRef = useRef12(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia12(config.media.md);
+  const isMobile = useMedia13(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isOverlayChat = (_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay;
   const sendMessage = useCallback13(() => __async(void 0, null, function* () {
@@ -4788,19 +4902,19 @@ var ChatFooter = ({
       ToastManager.addToast({ title: err.message });
     }
   }), [role, peerId, hmsActions, onSend]);
-  useEffect19(() => {
+  useEffect20(() => {
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
     }
   }, [draftMessage]);
-  useEffect19(() => {
+  useEffect20(() => {
     const messageElement = inputRef.current;
     return () => {
       setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
     };
   }, [setDraftMessage]);
-  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React55.createElement(
     Flex,
     {
       align: "center",
@@ -4821,13 +4935,14 @@ var ChatFooter = ({
       }
     },
     children,
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React55.createElement(
       TextArea,
       {
         css: {
           c: "$on_surface_high",
           "&:valid ~ .send-msg": { color: "$on_surface_high" },
-          "& ~ .send-msg": { color: "$on_surface_low" }
+          "& ~ .send-msg": { color: "$on_surface_low" },
+          "&::placeholder": { color: "$on_surface_medium" }
         },
         placeholder: "Send a message....",
         ref: inputRef,
@@ -4848,7 +4963,7 @@ var ChatFooter = ({
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    !isMobile ? /* @__PURE__ */ React53.createElement(
+    !isMobile ? /* @__PURE__ */ React55.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -4858,7 +4973,7 @@ var ChatFooter = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React55.createElement(
       IconButton,
       {
         className: "send-msg",
@@ -4871,31 +4986,18 @@ var ChatFooter = ({
         },
         "data-testid": "send_msg_btn"
       },
-      /* @__PURE__ */ React53.createElement(SendIcon, null)
+      /* @__PURE__ */ React55.createElement(SendIcon, null)
     )
   )));
 };
 
-// src/Prebuilt/components/Chat/useUnreadCount.js
-import {
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore28
-} from "@100mslive/react-sdk";
-var useUnreadCount = ({ role, peerId }) => {
-  const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
-  const unreadCount = useHMSStore28(unreadCountSelector);
-  return unreadCount;
-};
-
 // src/Prebuilt/components/Chat/Chat.jsx
 var PINNED_MESSAGE_LENGTH = 80;
 var PinnedMessage = ({ clearPinnedMessage }) => {
   const permissions = useHMSStore29(selectPermissions10);
   const pinnedMessage = useHMSStore29(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
   const formattedPinnedMessage = (pinnedMessage == null ? void 0 : pinnedMessage.length) && pinnedMessage.length > PINNED_MESSAGE_LENGTH ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...` : pinnedMessage;
-  return pinnedMessage ? /* @__PURE__ */ React54.createElement(
+  return pinnedMessage ? /* @__PURE__ */ React56.createElement(
     Flex,
     {
       title: pinnedMessage,
@@ -4903,8 +5005,8 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
       align: "center",
       justify: "between"
     },
-    /* @__PURE__ */ React54.createElement(PinIcon2, null),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React56.createElement(PinIcon2, null),
+    /* @__PURE__ */ React56.createElement(
       Box,
       {
         css: {
@@ -4914,15 +5016,15 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React54.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React54.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
+      /* @__PURE__ */ React56.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React56.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
     ),
-    permissions.removeOthers && /* @__PURE__ */ React54.createElement(
+    permissions.removeOthers && /* @__PURE__ */ React56.createElement(
       Flex,
       {
         onClick: () => clearPinnedMessage(),
         css: { cursor: "pointer", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
       },
-      /* @__PURE__ */ React54.createElement(CrossIcon6, null)
+      /* @__PURE__ */ React56.createElement(CrossIcon6, null)
     )
   ) : null;
 };
@@ -4939,9 +5041,9 @@ var Chat = ({ screenType }) => {
   });
   const [isSelectorOpen] = useState31(false);
   const listRef = useRef13(null);
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions19();
   const { setPinnedMessage } = useSetPinnedMessage();
-  useEffect20(() => {
+  useEffect21(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
       setPeerSelector("");
       setChatOptions({
@@ -4953,7 +5055,7 @@ var Chat = ({ screenType }) => {
   }, [notification, peerSelector, setPeerSelector]);
   const storeMessageSelector = selectHMSMessagesCount;
   const { elements } = useRoomLayoutConferencingScreen();
-  const isMobile = useMedia13(config.media.md);
+  const isMobile = useMedia14(config.media.md);
   let isScrolledToBottom = false;
   if (listRef.current) {
     const currentRef = listRef.current._outerRef;
@@ -4974,7 +5076,7 @@ var Chat = ({ screenType }) => {
     },
     [hmsActions, messagesCount]
   );
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React56.createElement(
     Flex,
     {
       direction: "column",
@@ -4983,8 +5085,8 @@ var Chat = ({ screenType }) => {
         gap: "$4"
       }
     },
-    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? null : /* @__PURE__ */ React54.createElement(React54.Fragment, null, ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages) ? /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
-    /* @__PURE__ */ React54.createElement(
+    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? null : /* @__PURE__ */ React56.createElement(React56.Fragment, null, ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages) ? /* @__PURE__ */ React56.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
+    /* @__PURE__ */ React56.createElement(
       ChatBody,
       {
         role: chatOptions.role,
@@ -4994,7 +5096,7 @@ var Chat = ({ screenType }) => {
         screenType
       }
     ),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React56.createElement(
       ChatFooter,
       {
         role: chatOptions.role,
@@ -5012,7 +5114,7 @@ var Chat = ({ screenType }) => {
         },
         peerId: chatOptions.peerId
       },
-      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React54.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
+      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React56.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
     )
   );
 };
@@ -5021,7 +5123,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   if (!unreadCount) {
     return null;
   }
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React56.createElement(
     Flex,
     {
       justify: "center",
@@ -5032,7 +5134,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React56.createElement(
       Button,
       {
         variant: "standard",
@@ -5055,7 +5157,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       },
       "New ",
       unreadCount === 1 ? "message" : "messages",
-      /* @__PURE__ */ React54.createElement(ChevronDownIcon2, null)
+      /* @__PURE__ */ React56.createElement(ChevronDownIcon2, null)
     )
   );
 };
@@ -5069,7 +5171,10 @@ var tabTriggerCSS = {
   w: "100%",
   justifyContent: "center"
 };
-var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+var ParticipantCount2 = ({ count }) => {
+  return count < 1e3 ? /* @__PURE__ */ React57.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React57.createElement(Tooltip, { title: count }, /* @__PURE__ */ React57.createElement("span", null, "(", getFormattedCount(count), ")"));
+};
+var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
   var _a;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
@@ -5080,10 +5185,10 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
   const hideTabs = !(showChat && showParticipants);
-  const isMobile = useMedia14(config.media.md);
+  const isMobile = useMedia15(config.media.md);
   const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  useEffect21(() => {
+  useEffect22(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
     } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
@@ -5092,10 +5197,10 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
       resetSidePane();
     }
   }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect21(() => {
+  useEffect22(() => {
     setActiveTab(active);
   }, [active]);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React57.createElement(
     Flex,
     {
       direction: "column",
@@ -5106,7 +5211,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         transition: "margin 0.3s ease-in-out"
       }
     },
-    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(React55.Fragment, null, hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : `Participants (${peerCount})`), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React57.createElement(Chat, { screenType }) : /* @__PURE__ */ React57.createElement(React57.Fragment, null, hideTabs ? /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React57.createElement("span", null, "Participants ", /* @__PURE__ */ React57.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React57.createElement(Chat, { screenType }) : /* @__PURE__ */ React57.createElement(ParticipantList, null)) : /* @__PURE__ */ React57.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -5116,7 +5221,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           size: "100%"
         }
       },
-      /* @__PURE__ */ React55.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React57.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React57.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.CHAT,
@@ -5126,7 +5231,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Chat"
-      ), /* @__PURE__ */ React55.createElement(
+      ), /* @__PURE__ */ React57.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.PARTICIPANTS,
@@ -5135,14 +5240,13 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
             color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
           })
         },
-        "Participants (",
-        peerCount,
-        ")"
+        "Participants ",
+        /* @__PURE__ */ React57.createElement(ParticipantCount2, { count: peerCount })
       )),
-      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(ParticipantList, null)),
-      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(Chat, { screenType }))
+      /* @__PURE__ */ React57.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React57.createElement(ParticipantList, null)),
+      /* @__PURE__ */ React57.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React57.createElement(Chat, { screenType }))
     )),
-    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React55.createElement(
+    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React57.createElement(
       IconButton,
       {
         css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
@@ -5156,13 +5260,13 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         },
         "data-testid": "close_chat"
       },
-      /* @__PURE__ */ React55.createElement(CrossIcon7, null)
+      /* @__PURE__ */ React57.createElement(CrossIcon7, null)
     )
   );
 });
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
-import React57, { Fragment as Fragment10, useState as useState34 } from "react";
+import React59, { Fragment as Fragment10, useState as useState34 } from "react";
 import { selectPermissions as selectPermissions11, useHMSStore as useHMSStore32, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
 import { ColoredHandIcon, CrossIcon as CrossIcon8, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
 
@@ -5170,8 +5274,8 @@ import { ColoredHandIcon, CrossIcon as CrossIcon8, GoLiveIcon as GoLiveIcon3 } f
 var rtmp_default = "data:image/png;base64,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";
 
 // src/Prebuilt/components/Streaming/HLSStreaming.jsx
-import React56, { Fragment as Fragment9, useCallback as useCallback15, useEffect as useEffect22, useState as useState33 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions19, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+import React58, { Fragment as Fragment9, useCallback as useCallback15, useEffect as useEffect23, useState as useState33 } from "react";
+import { selectRoomID, useHMSActions as useHMSActions20, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5190,7 +5294,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: "Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.",
-        icon: /* @__PURE__ */ React56.createElement(SupportIcon, null)
+        icon: /* @__PURE__ */ React58.createElement(SupportIcon, null)
       };
       break;
     }
@@ -5198,7 +5302,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: "HLS Viewer",
         content: "Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.",
-        icon: /* @__PURE__ */ React56.createElement(EyeOpenIcon, null)
+        icon: /* @__PURE__ */ React58.createElement(EyeOpenIcon, null)
       };
       break;
     }
@@ -5206,7 +5310,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
-        icon: /* @__PURE__ */ React56.createElement(WrenchIcon, null),
+        icon: /* @__PURE__ */ React58.createElement(WrenchIcon, null),
         order: 1
       };
   }
@@ -5215,7 +5319,7 @@ var getCardData = (roleName, roomId) => {
 };
 var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
   const [copied, setCopied] = useState33(false);
-  return isHLSRunning ? /* @__PURE__ */ React56.createElement(
+  return isHLSRunning ? /* @__PURE__ */ React58.createElement(
     Box,
     {
       key: title,
@@ -5226,9 +5330,9 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         borderRadius: "$2"
       }
     },
-    /* @__PURE__ */ React56.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React56.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-    /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React58.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React58.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+    /* @__PURE__ */ React58.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+    /* @__PURE__ */ React58.createElement(
       Button,
       {
         variant: "standard",
@@ -5240,7 +5344,7 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
         icon: true
       },
-      copied ? /* @__PURE__ */ React56.createElement(React56.Fragment, null, "Link copied!") : /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+      copied ? /* @__PURE__ */ React58.createElement(React58.Fragment, null, "Link copied!") : /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
     )
   ) : null;
 };
@@ -5250,12 +5354,12 @@ var HLSStreaming = ({ onBack }) => {
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
   const [showLinks, setShowLinks] = useState33(false);
-  return !showLinks ? /* @__PURE__ */ React56.createElement(Container, { rounded: true }, /* @__PURE__ */ React56.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React56.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React56.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React56.createElement(StartHLS, null)) : /* @__PURE__ */ React56.createElement(Container, { rounded: true }, /* @__PURE__ */ React56.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React56.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React56.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+  return !showLinks ? /* @__PURE__ */ React58.createElement(Container, { rounded: true }, /* @__PURE__ */ React58.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React58.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React58.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React58.createElement(StartHLS, null)) : /* @__PURE__ */ React58.createElement(Container, { rounded: true }, /* @__PURE__ */ React58.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React58.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React58.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
 };
 var StartHLS = () => {
   const [record, setRecord] = useState33(false);
   const [error, setError] = useState33(false);
-  const hmsActions = useHMSActions19();
+  const hmsActions = useHMSActions20();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback15(
     (variants) => __async(void 0, null, function* () {
@@ -5276,7 +5380,7 @@ var StartHLS = () => {
     }),
     [hmsActions, record, isHLSStarted, setHLSStarted]
   );
-  return /* @__PURE__ */ React56.createElement(Fragment9, null, /* @__PURE__ */ React56.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React56.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(ErrorText, { error }), /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React58.createElement(Fragment9, null, /* @__PURE__ */ React58.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React58.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React58.createElement(ErrorText, { error }), /* @__PURE__ */ React58.createElement(
     Button,
     {
       "data-testid": "start_hls",
@@ -5285,21 +5389,21 @@ var StartHLS = () => {
       onClick: () => startHLS(),
       disabled: isHLSStarted
     },
-    isHLSStarted ? /* @__PURE__ */ React56.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React56.createElement(GoLiveIcon2, null),
+    isHLSStarted ? /* @__PURE__ */ React58.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React58.createElement(GoLiveIcon2, null),
     isHLSStarted ? "Starting stream..." : "Go Live"
-  )), /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(Text, null, /* @__PURE__ */ React56.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React56.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
+  )), /* @__PURE__ */ React58.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React58.createElement(Text, null, /* @__PURE__ */ React58.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React58.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
 };
 var EndHLS = ({ setShowLinks }) => {
-  const hmsActions = useHMSActions19();
+  const hmsActions = useHMSActions20();
   const [inProgress, setInProgress] = useState33(false);
   const [error, setError] = useState33("");
   const { isHLSRunning } = useRecordingStreaming6();
-  useEffect22(() => {
+  useEffect23(() => {
     if (inProgress && !isHLSRunning) {
       setInProgress(false);
     }
   }, [inProgress, isHLSRunning]);
-  return /* @__PURE__ */ React56.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(ErrorText, { error }), /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React58.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React58.createElement(ErrorText, { error }), /* @__PURE__ */ React58.createElement(
     Button,
     {
       "data-testid": "stop_hls",
@@ -5318,9 +5422,9 @@ var EndHLS = ({ setShowLinks }) => {
         }
       })
     },
-    /* @__PURE__ */ React56.createElement(EndStreamIcon2, null),
+    /* @__PURE__ */ React58.createElement(EndStreamIcon2, null),
     "End Stream"
-  ), /* @__PURE__ */ React56.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React56.createElement(PeopleIcon3, null), " Invite People"));
+  ), /* @__PURE__ */ React58.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React58.createElement(PeopleIcon3, null), " Invite People"));
 };
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
@@ -5334,7 +5438,7 @@ var StreamingLanding = () => {
     toggleStreaming();
     return null;
   }
-  return /* @__PURE__ */ React57.createElement(Fragment10, null, /* @__PURE__ */ React57.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React59.createElement(Fragment10, null, /* @__PURE__ */ React59.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React59.createElement(
     Box,
     {
       css: {
@@ -5344,8 +5448,8 @@ var StreamingLanding = () => {
         r: "$round"
       }
     },
-    /* @__PURE__ */ React57.createElement(ColoredHandIcon, { width: 40, height: 40 })
-  ), /* @__PURE__ */ React57.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React57.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React57.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React57.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React57.createElement(CrossIcon8, null))), /* @__PURE__ */ React57.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React59.createElement(ColoredHandIcon, { width: 40, height: 40 })
+  ), /* @__PURE__ */ React59.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React59.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React59.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React59.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React59.createElement(CrossIcon8, null))), /* @__PURE__ */ React59.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React59.createElement(
     StreamCard,
     {
       testId: "hls_stream",
@@ -5355,7 +5459,7 @@ var StreamingLanding = () => {
       onClick: () => setShowHLS(true),
       Icon: GoLiveIcon3
     }
-  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React57.createElement(
+  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React59.createElement(
     StreamCard,
     {
       testId: "rtmp_stream",
@@ -5367,7 +5471,7 @@ var StreamingLanding = () => {
       },
       imgSrc: rtmp_default
     }
-  ), showHLS && /* @__PURE__ */ React57.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React57.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+  ), showHLS && /* @__PURE__ */ React59.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React59.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
@@ -5377,16 +5481,16 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a, _b;
-  const isMobile = useMedia15(config.media.md);
+  const isMobile = useMedia16(config.media.md);
   const sidepane = useHMSStore33(selectAppData3(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore33(selectAppData3(APP_DATA.activeScreensharePeerId));
   const trackId = (_a = useHMSStore33(selectVideoTrackByPeerID(activeScreensharePeerId))) == null ? void 0 : _a.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = /* @__PURE__ */ React58.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
+    ViewComponent = /* @__PURE__ */ React60.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = /* @__PURE__ */ React58.createElement(StreamingLanding, null);
+    ViewComponent = /* @__PURE__ */ React60.createElement(StreamingLanding, null);
   }
   if (!ViewComponent && !trackId) {
     return null;
@@ -5399,7 +5503,7 @@ var SidePane = ({
     objectFit: tileProps == null ? void 0 : tileProps.video_object_fit
   };
   const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Flex,
     {
       direction: "column",
@@ -5412,17 +5516,16 @@ var SidePane = ({
         "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
       }
     },
-    trackId && /* @__PURE__ */ React58.createElement(
+    trackId && /* @__PURE__ */ React60.createElement(
       VideoTile_default,
       __spreadValues({
         peerId: activeScreensharePeerId,
         trackId,
-        width: "100%",
         height: 225,
         rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
       }, tileLayout)
     ),
-    !!ViewComponent && /* @__PURE__ */ React58.createElement(
+    !!ViewComponent && /* @__PURE__ */ React60.createElement(
       Box,
       {
         css: {
@@ -5458,10 +5561,10 @@ var SidePane = ({
 var SidePane_default = SidePane;
 
 // src/Prebuilt/layouts/WaitingView.jsx
-import React59 from "react";
+import React61 from "react";
 import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React59.memo(() => {
-  return /* @__PURE__ */ React59.createElement(
+var WaitingView = React61.memo(() => {
+  return /* @__PURE__ */ React61.createElement(
     Box,
     {
       css: {
@@ -5475,7 +5578,7 @@ var WaitingView = React59.memo(() => {
       },
       "data-testid": "waiting_view"
     },
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React61.createElement(
       Flex,
       {
         align: "center",
@@ -5489,8 +5592,8 @@ var WaitingView = React59.memo(() => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React59.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React59.createElement(
+      /* @__PURE__ */ React61.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React61.createElement(
         Flex,
         {
           direction: "column",
@@ -5500,28 +5603,28 @@ var WaitingView = React59.memo(() => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React59.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React59.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+        /* @__PURE__ */ React61.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React61.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
       )
     )
   );
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React60.lazy(() => import("./HLSView-4NSE37G7.js"));
+var HLSView = React62.lazy(() => import("./HLSView-3S74KF3A.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
   hideControls = false
 }) => {
   var _a, _b;
-  const localPeerRole = useHMSStore34(selectLocalPeerRoleName2);
+  const localPeerRole = useHMSStore34(selectLocalPeerRoleName3);
   const isConnected = useHMSStore34(selectIsConnectedToRoom6);
-  const hmsActions = useHMSActions20();
+  const hmsActions = useHMSActions21();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  useEffect23(() => {
+  useEffect24(() => {
     if (!isConnected) {
       return;
     }
@@ -5532,17 +5635,17 @@ var VideoStreamingSection = ({
   }
   let ViewComponent;
   if (screenType === "hls_live_streaming") {
-    ViewComponent = /* @__PURE__ */ React60.createElement(HLSView, null);
+    ViewComponent = /* @__PURE__ */ React62.createElement(HLSView, null);
   } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(WaitingView, null);
+    ViewComponent = /* @__PURE__ */ React62.createElement(WaitingView, null);
   } else if (pdfAnnotatorActive) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(PDFView, null);
+    ViewComponent = /* @__PURE__ */ React62.createElement(PDFView, null);
   } else if (urlToIframe) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(EmbedView, null);
+    ViewComponent = /* @__PURE__ */ React62.createElement(EmbedView, null);
   } else {
-    ViewComponent = /* @__PURE__ */ React60.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
+    ViewComponent = /* @__PURE__ */ React62.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
   }
-  return /* @__PURE__ */ React60.createElement(Suspense2, { fallback: /* @__PURE__ */ React60.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React62.createElement(Suspense2, { fallback: /* @__PURE__ */ React62.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React62.createElement(
     Flex,
     {
       css: {
@@ -5552,7 +5655,7 @@ var VideoStreamingSection = ({
       }
     },
     ViewComponent,
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React62.createElement(
       SidePane_default,
       {
         screenType,
@@ -5563,79 +5666,6 @@ var VideoStreamingSection = ({
   ));
 };
 
-// src/Prebuilt/components/RoleChangeRequestModal.tsx
-import React61, { useEffect as useEffect24 } from "react";
-import {
-  selectLocalPeerName,
-  selectLocalPeerRoleName as selectLocalPeerRoleName3,
-  selectRoleChangeRequest,
-  useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions21,
-  useHMSStore as useHMSStore35
-} from "@100mslive/react-sdk";
-var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions21();
-  const { updateMetaData } = useMyMetadata();
-  const currentRole = useHMSStore35(selectLocalPeerRoleName3);
-  const roleChangeRequest = useHMSStore35(selectRoleChangeRequest);
-  const name = useHMSStore35(selectLocalPeerName);
-  const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
-  useEffect24(() => {
-    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-      return;
-    }
-    (() => __async(void 0, null, function* () {
-      yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
-    }))();
-  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
-  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-    return null;
-  }
-  const body = /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(Text, { css: { fontWeight: 400, c: "$on_surface_medium", textAlign: "center" } }, "Setup your audio and video before joining"), /* @__PURE__ */ React61.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "center",
-      css: {
-        "@sm": { width: "100%" },
-        flexDirection: "column",
-        mt: "$6"
-      }
-    },
-    /* @__PURE__ */ React61.createElement(PreviewTile, { name: name || "" }),
-    /* @__PURE__ */ React61.createElement(PreviewControls, { hideSettings: true })
-  ));
-  return /* @__PURE__ */ React61.createElement(
-    RequestDialog,
-    {
-      title: `You're invited to join the ${roleChangeRequest.role.name} role`,
-      onOpenChange: (value) => __async(void 0, null, function* () {
-        var _a;
-        if (!value) {
-          yield hmsActions.rejectChangeRole(roleChangeRequest);
-          sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
-          yield hmsActions.cancelMidCallPreview();
-          yield updateMetaData({ isHandRaised: false });
-        }
-      }),
-      body,
-      onAction: () => __async(void 0, null, function* () {
-        yield hmsActions.acceptChangeRole(roleChangeRequest);
-        yield updateMetaData({ isHandRaised: false, prevRole: currentRole });
-      }),
-      actionText: "Accept"
-    }
-  );
-};
-var RequestDialog = ({
-  open = true,
-  onOpenChange,
-  title,
-  body,
-  actionText = "Accept",
-  onAction
-}) => /* @__PURE__ */ React61.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React61.createElement(Dialog.Portal, null, /* @__PURE__ */ React61.createElement(Dialog.Overlay, null), /* @__PURE__ */ React61.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React61.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React61.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React61.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React61.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React61.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React61.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React61.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React61.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React61.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
-
 // src/Prebuilt/components/conference.jsx
 var Conference = () => {
   var _a, _b, _c, _d, _e;
@@ -5644,12 +5674,12 @@ var Conference = () => {
   const { userName, endpoints } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore36(selectRoomState);
+  const roomState = useHMSStore35(selectRoomState);
   const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore36(selectIsConnectedToRoom7);
+  const isConnectedToRoom = useHMSStore35(selectIsConnectedToRoom7);
   const hmsActions = useHMSActions22();
   const [hideControls, setHideControls] = useState35(false);
-  const dropdownList = useHMSStore36(selectAppData4(APP_DATA.dropdownList));
+  const dropdownList = useHMSStore35(selectAppData4(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef14();
   const footerRef = useRef14();
@@ -5714,9 +5744,9 @@ var Conference = () => {
     };
   }, []);
   if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React62.createElement(FullPageProgress_default, { text: "Joining..." });
+    return /* @__PURE__ */ React63.createElement(FullPageProgress_default, { text: "Joining..." });
   }
-  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, isHLSStarted ? /* @__PURE__ */ React62.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React62.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React62.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(React63.Fragment, null, isHLSStarted ? /* @__PURE__ */ React63.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React63.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React63.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React63.createElement(
     Box,
     {
       ref: headerRef,
@@ -5730,8 +5760,8 @@ var Conference = () => {
       },
       "data-testid": "header"
     },
-    /* @__PURE__ */ React62.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React63.createElement(
     Box,
     {
       css: {
@@ -5749,7 +5779,7 @@ var Conference = () => {
       "data-testid": "conferencing",
       onClick: toggleControls
     },
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(
       VideoStreamingSection,
       {
         screenType: screenProps.screenType,
@@ -5757,7 +5787,7 @@ var Conference = () => {
         hideControls
       }
     )
-  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React62.createElement(
+  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React63.createElement(
     Box,
     {
       ref: footerRef,
@@ -5774,11 +5804,11 @@ var Conference = () => {
       },
       "data-testid": "footer"
     },
-    /* @__PURE__ */ React62.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React62.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React62.createElement(HLSFailureModal, null), /* @__PURE__ */ React62.createElement(ActivatedPIP, null)));
+    /* @__PURE__ */ React63.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React63.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React63.createElement(HLSFailureModal, null), /* @__PURE__ */ React63.createElement(ActivatedPIP, null)));
 };
 var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-S7R3O4OC.js.map
+//# sourceMappingURL=conference-JNABIZBG.js.map