@100mslive/roomkit-react 0.1.6-alpha.1 → 0.1.6-alpha.3

package/dist/{conference-UWLJHMB2.js → conference-MPZNWHV5.js}

@@ -1,6 +1,6 @@
 import {
   ActionTile
-} from "./chunk-364HP22I.js";
+} from "./chunk-UXBTLGWY.js";
 import {
   APP_DATA,
   Accordion,
@@ -77,13 +77,14 @@ import {
   useSetAppDataByKey,
   useSetSubscribedChatSelector,
   useSetUiSettings,
+  useSidepaneReset,
   useSidepaneToggle,
   useTheme,
   useUISettings,
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-LYSAET4G.js";
+} from "./chunk-6JF3GAOH.js";
 import {
   Box,
   Flex,
@@ -102,10 +103,10 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-POE7H4IE.js";
+} from "./chunk-KAJJ56J4.js";
 
 // src/Prebuilt/components/conference.jsx
-import React62, { useEffect as useEffect24, useRef as useRef14, useState as useState35 } from "react";
+import React62, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
@@ -114,14 +115,13 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom7,
   selectRoomState,
   useHMSActions as useHMSActions22,
-  useHMSStore as useHMSStore37
+  useHMSStore as useHMSStore36
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Footer/Footer.tsx
-import React37, { Suspense } from "react";
+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 { selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/EmojiReaction.jsx
 import React2, { Fragment, useState } from "react";
@@ -335,7 +335,8 @@ var LeaveSessionContent = ({
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 var DesktopLeaveRoom = ({
   leaveRoom,
-  screenType
+  screenType,
+  endRoom
 }) => {
   const [open, setOpen] = useState2(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState2(false);
@@ -343,12 +344,12 @@ var DesktopLeaveRoom = ({
   const isConnected = useHMSStore2(selectIsConnectedToRoom2);
   const permissions = useHMSStore2(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStream = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn;
+  const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Fragment2, null, permissions.hlsStreaming ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
+  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(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -358,11 +359,7 @@ var DesktopLeaveRoom = ({
         borderBottomRightRadius: 0
       },
       onClick: () => {
-        if (screenType === "hls_live_streaming") {
-          setShowLeaveRoomAlert(true);
-        } else {
-          leaveRoom({ endstream: false });
-        }
+        leaveRoom({ endstream: false });
       }
     },
     /* @__PURE__ */ React6.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React6.createElement(Box, null, /* @__PURE__ */ React6.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
@@ -400,7 +397,7 @@ var DesktopLeaveRoom = ({
         css: { p: 0 }
       }
     )
-  ), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
+  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
     Dropdown.Item,
     {
       css: {
@@ -443,7 +440,7 @@ var DesktopLeaveRoom = ({
     EndSessionContent,
     {
       setShowEndStreamAlert,
-      leaveRoom,
+      leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn,
       isModal: true
     }
@@ -456,7 +453,8 @@ import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions
 import { ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
 var MwebLeaveRoom = ({
   leaveRoom,
-  screenType
+  screenType,
+  endRoom
 }) => {
   const [open, setOpen] = useState3(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState3(false);
@@ -464,12 +462,12 @@ var MwebLeaveRoom = ({
   const isConnected = useHMSStore3(selectIsConnectedToRoom3);
   const permissions = useHMSStore3(selectPermissions2);
   const { isStreamingOn } = useRecordingStreaming2();
-  const showStream = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn;
+  const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
   useDropdownList({ open, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Fragment3, null, (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
+  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(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -491,7 +489,7 @@ var MwebLeaveRoom = ({
       onClick: () => leaveRoom({ endstream: false }),
       css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
     }
-  ), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
+  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
     LeaveCard,
     {
       title: showStream ? "End Stream" : "End Session",
@@ -523,7 +521,7 @@ var MwebLeaveRoom = ({
     EndSessionContent,
     {
       setShowEndStreamAlert,
-      leaveRoom,
+      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);
@@ -555,6 +553,10 @@ var LeaveRoom = ({ screenType }) => {
       ToastManager.addToast({ title: "Error in stopping the stream", type: "error" });
     }
   });
+  const endRoom = () => {
+    hmsActions.endRoom(false, "End Room");
+    redirectToLeave();
+  };
   const leaveRoom = (_0) => __async(void 0, [_0], function* ({ endstream = false }) {
     if (endstream || hlsState.running && peersWithStreamingRights.length === 1) {
       yield stopStream();
@@ -565,7 +567,7 @@ var LeaveRoom = ({ screenType }) => {
   if (!permissions || !isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React8.createElement(MwebLeaveRoom, { leaveRoom, screenType }) : /* @__PURE__ */ React8.createElement(DesktopLeaveRoom, { leaveRoom, screenType });
+  return isMobile ? /* @__PURE__ */ React8.createElement(MwebLeaveRoom, { leaveRoom, screenType, endRoom }) : /* @__PURE__ */ React8.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
@@ -2068,7 +2070,7 @@ var MwebOptions = ({
       isRecordingLoading ? /* @__PURE__ */ React22.createElement(Loading, null) : /* @__PURE__ */ React22.createElement(RecordIcon2, null),
       /* @__PURE__ */ React22.createElement(ActionTile.Title, null, isBrowserRecordingOn ? "Recording On" : isRecordingLoading ? "Starting Recording" : "Start Recording")
     ) : null
-  ))), /* @__PURE__ */ React22.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React22.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React22.createElement(
+  ))), /* @__PURE__ */ React22.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet, screenType }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React22.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React22.createElement(
     ChangeNameModal,
     {
       onOpenChange: (value) => updateState(MODALS2.CHANGE_NAME, value),
@@ -2644,33 +2646,28 @@ var ScreenshareToggle = ({ css = {} }) => {
 };
 
 // src/Prebuilt/components/Footer/ChatToggle.tsx
-import React32, { useEffect as useEffect5 } from "react";
+import React32 from "react";
 import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore14 } from "@100mslive/react-sdk";
 import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
-var ChatToggle = ({ openByDefault }) => {
+var ChatToggle = () => {
   const countUnreadMessages = useHMSStore14(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  useEffect5(() => {
-    if (!isChatOpen && openByDefault) {
-      toggleChat();
-    }
-  }, [toggleChat, openByDefault]);
   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" })));
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-import React36, { Fragment as Fragment7, useCallback as useCallback6, useEffect as useEffect6, useState as useState19 } from "react";
+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 {
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID4,
-  selectPeerCount as selectPeerCount3,
+  selectPeerCount as selectPeerCount2,
   selectPeerMetadata as selectPeerMetadata2,
   selectPeersByCondition as selectPeersByCondition2,
   selectPermissions as selectPermissions8,
   useHMSActions as useHMSActions11,
-  useHMSStore as useHMSStore17
+  useHMSStore as useHMSStore16
 } from "@100mslive/react-sdk";
 import {
   ChangeRoleIcon as ChangeRoleIcon2,
@@ -2682,86 +2679,14 @@ import {
   VerticalMenuIcon as VerticalMenuIcon4
 } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/Chat/ChatParticipantHeader.jsx
-import React33, { useState as useState17 } from "react";
-import { selectPeerCount as selectPeerCount2, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon5 } from "@100mslive/react-icons";
-var tabTriggerCSS = {
-  color: "$on_surface_high",
-  p: "$4",
-  fontWeight: "$semiBold",
-  fontSize: "$sm",
-  w: "100%",
-  justifyContent: "center"
-};
-var ChatParticipantHeader = React33.memo(({ activeTabValue = SIDE_PANE_OPTIONS.CHAT }) => {
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const [activeTab, setActiveTab] = useState17(activeTabValue);
-  const peerCount = useHMSStore15(selectPeerCount2);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const showChat = !!(elements == null ? void 0 : elements.chat);
-  const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
-  const hideTabs = !(showChat && showParticipants);
-  return /* @__PURE__ */ React33.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        color: "$on_primary_high",
-        h: "$16"
-      }
-    },
-    hideTabs ? /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", c: "$on_surface_high" } }, showChat ? "Chat" : `Participants (${peerCount})`) : /* @__PURE__ */ React33.createElement(Flex, { css: { w: "100%", bg: "$surface_default", borderRadius: "$2" } }, /* @__PURE__ */ React33.createElement(Tabs.Root, { value: activeTab, onValueChange: setActiveTab, css: { w: "100%" } }, /* @__PURE__ */ React33.createElement(Tabs.List, { css: { w: "100%", p: "$2" } }, /* @__PURE__ */ React33.createElement(
-      Tabs.Trigger,
-      {
-        value: SIDE_PANE_OPTIONS.CHAT,
-        onClick: toggleChat,
-        css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
-          color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? "$on_surface_low" : "$on_surface_high"
-        })
-      },
-      "Chat"
-    ), /* @__PURE__ */ React33.createElement(
-      Tabs.Trigger,
-      {
-        value: SIDE_PANE_OPTIONS.PARTICIPANTS,
-        onClick: toggleParticipants,
-        css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
-          color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
-        })
-      },
-      "Participants (",
-      peerCount,
-      ")"
-    )))),
-    /* @__PURE__ */ React33.createElement(
-      IconButton,
-      {
-        css: { ml: "auto" },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-            toggleChat();
-          } else {
-            toggleParticipants();
-          }
-        },
-        "data-testid": "close_chat"
-      },
-      /* @__PURE__ */ React33.createElement(CrossIcon5, null)
-    )
-  );
-});
-
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
-import React35 from "react";
+import React34 from "react";
 import { useMeasure } from "react-use";
 import { FixedSizeList } from "react-window";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
-import React34, { useState as useState18 } from "react";
-import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions10, useHMSStore as useHMSStore16, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
+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 {
   MicOffIcon as MicOffIcon2,
   MicOnIcon,
@@ -2774,8 +2699,8 @@ import {
 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] = useState18(false);
-  const permissions = useHMSStore16(selectPermissions7);
+  const [openOptions, setOpenOptions] = useState17(false);
+  const permissions = useHMSStore15(selectPermissions7);
   const hmsActions = useHMSActions10();
   const { elements } = useRoomLayoutConferencingScreen();
   const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
@@ -2820,7 +2745,7 @@ var RoleOptions = ({ roleName, peerList }) => {
       console.error(e);
     }
   });
-  return /* @__PURE__ */ React34.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React33.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React33.createElement(
     Dropdown.Trigger,
     {
       onClick: (e) => e.stopPropagation(),
@@ -2839,40 +2764,40 @@ var RoleOptions = ({ roleName, peerList }) => {
         }
       }
     },
-    /* @__PURE__ */ React34.createElement(Flex, null, /* @__PURE__ */ React34.createElement(VerticalMenuIcon3, null))
-  ), /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React33.createElement(Flex, null, /* @__PURE__ */ React33.createElement(VerticalMenuIcon3, null))
+  ), /* @__PURE__ */ React33.createElement(
     Dropdown.Content,
     {
       onClick: (e) => e.stopPropagation(),
       css: { w: "max-content", maxWidth: "$64", bg: "$surface_default", py: 0 },
       align: "end"
     },
-    canRemoveRoleFromStage && /* @__PURE__ */ React34.createElement(
+    canRemoveRoleFromStage && /* @__PURE__ */ React33.createElement(
       Dropdown.Item,
       {
         css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderBottom: "1px solid $border_bright" }),
         onClick: removeAllFromStage
       },
-      /* @__PURE__ */ React34.createElement(PersonRectangleIcon, null),
-      /* @__PURE__ */ React34.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
+      /* @__PURE__ */ React33.createElement(PersonRectangleIcon, null),
+      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
     ),
-    canMuteRole && /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", !allPeersHaveAudioOn) }, allPeersHaveAudioOn ? /* @__PURE__ */ React34.createElement(MicOffIcon2, null) : /* @__PURE__ */ React34.createElement(MicOnIcon, null), /* @__PURE__ */ React34.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveAudioOn ? "Mute" : "Unmute", " Audio")), /* @__PURE__ */ React34.createElement(
+    canMuteRole && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", !allPeersHaveAudioOn) }, allPeersHaveAudioOn ? /* @__PURE__ */ React33.createElement(MicOffIcon2, null) : /* @__PURE__ */ React33.createElement(MicOnIcon, null), /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveAudioOn ? "Mute" : "Unmute", " Audio")), /* @__PURE__ */ React33.createElement(
       Dropdown.Item,
       {
         css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright" }),
         onClick: () => setTrackEnabled("video", !allPeersHaveVideoOn)
       },
-      allPeersHaveVideoOn ? /* @__PURE__ */ React34.createElement(VideoOffIcon, null) : /* @__PURE__ */ React34.createElement(VideoOnIcon, null),
-      /* @__PURE__ */ React34.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveVideoOn ? "Mute" : "Unmute", " Video")
+      allPeersHaveVideoOn ? /* @__PURE__ */ React33.createElement(VideoOffIcon, null) : /* @__PURE__ */ React33.createElement(VideoOnIcon, null),
+      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveVideoOn ? "Mute" : "Unmute", " Video")
     )),
-    canRemoveRoleFromRoom && /* @__PURE__ */ React34.createElement(
+    canRemoveRoleFromRoom && /* @__PURE__ */ React33.createElement(
       Dropdown.Item,
       {
         css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright", color: "$alert_error_default" }),
         onClick: removePeersFromRoom
       },
-      /* @__PURE__ */ React34.createElement(RemoveUserIcon, null),
-      /* @__PURE__ */ React34.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
+      /* @__PURE__ */ React33.createElement(RemoveUserIcon, null),
+      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
     )
   ));
 };
@@ -2882,8 +2807,8 @@ var ROW_HEIGHT = 50;
 function itemKey(index, data3) {
   return data3.peerList[index].id;
 }
-var VirtualizedParticipantItem = React35.memo(({ index, data: data3 }) => {
-  return /* @__PURE__ */ React35.createElement(Participant, { key: data3.peerList[index].id, peer: data3.peerList[index], isConnected: data3.isConnected });
+var VirtualizedParticipantItem = React34.memo(({ index, data: data3 }) => {
+  return /* @__PURE__ */ React34.createElement(Participant, { key: data3.peerList[index].id, peer: data3.peerList[index], isConnected: data3.isConnected });
 });
 var RoleAccordion = ({
   peerList = [],
@@ -2898,7 +2823,7 @@ var RoleAccordion = ({
     return null;
   }
   const height = ROW_HEIGHT * peerList.length;
-  return /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { flexGrow: 1, "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React34.createElement(Flex, { direction: "column", css: { "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React34.createElement(
     Accordion.Root,
     {
       type: "single",
@@ -2906,7 +2831,7 @@ var RoleAccordion = ({
       defaultValue: roleName,
       css: { borderRadius: "$1", border: "1px solid $border_bright" }
     },
-    /* @__PURE__ */ React35.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React34.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React34.createElement(
       Accordion.Header,
       {
         iconStyles: { c: "$on_surface_high" },
@@ -2918,7 +2843,7 @@ var RoleAccordion = ({
           c: "$on_surface_medium"
         }
       },
-      /* @__PURE__ */ React35.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React35.createElement(
+      /* @__PURE__ */ React34.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React34.createElement(
         Text,
         {
           variant: "sm",
@@ -2927,8 +2852,8 @@ var RoleAccordion = ({
         roleName,
         " ",
         `(${getFormattedCount(peerList.length)})`
-      ), /* @__PURE__ */ React35.createElement(RoleOptions, { roleName, peerList }))
-    ), /* @__PURE__ */ React35.createElement(Accordion.Content, null, /* @__PURE__ */ React35.createElement(Box, { css: { borderTop: "1px solid $border_default" } }), /* @__PURE__ */ React35.createElement(
+      ), /* @__PURE__ */ React34.createElement(RoleOptions, { roleName, peerList }))
+    ), /* @__PURE__ */ React34.createElement(Accordion.Content, null, /* @__PURE__ */ React34.createElement(Box, { css: { borderTop: "1px solid $border_default" } }), /* @__PURE__ */ React34.createElement(
       FixedSizeList,
       {
         itemSize: ROW_HEIGHT,
@@ -2945,10 +2870,10 @@ var RoleAccordion = ({
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
 var ParticipantList = () => {
-  const [filter, setFilter] = useState19();
+  const [filter, setFilter] = useState18();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore17(selectPeersByCondition2((peer) => {
+  const handRaisedPeers = useHMSStore16(selectPeersByCondition2((peer) => {
     var _a;
     return (_a = JSON.parse(peer.metadata || "{}")) == null ? void 0 : _a.isHandRaised;
   }));
@@ -2970,7 +2895,7 @@ var ParticipantList = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(Fragment7, null, /* @__PURE__ */ React36.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React36.createElement(ChatParticipantHeader, { activeTabValue: SIDE_PANE_OPTIONS.PARTICIPANTS }), !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React36.createElement(ParticipantSearch, { onSearch, inSidePane: true }), participants.length === 0 ? /* @__PURE__ */ React36.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", p: "$8 0" } }, /* @__PURE__ */ React36.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")) : null, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Fragment7, null, /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$4" } }, !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React35.createElement(ParticipantSearch, { onSearch, inSidePane: true }), participants.length === 0 ? /* @__PURE__ */ React35.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", p: "$8 0" } }, /* @__PURE__ */ React35.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")) : null, /* @__PURE__ */ React35.createElement(
     VirtualizedParticipants,
     {
       peersOrderedByRoles,
@@ -2981,10 +2906,10 @@ var ParticipantList = () => {
   )));
 };
 var ParticipantCount = () => {
-  const peerCount = useHMSStore17(selectPeerCount3);
+  const peerCount = useHMSStore16(selectPeerCount2);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  useEffect6(() => {
+  useEffect5(() => {
     if (isParticipantsOpen && peerCount === 0) {
       toggleSidepane();
     }
@@ -2992,7 +2917,7 @@ var ParticipantCount = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     IconButton_default,
     {
       css: {
@@ -3008,24 +2933,25 @@ var ParticipantCount = () => {
       active: !isParticipantsOpen,
       "data-testid": "participant_list"
     },
-    /* @__PURE__ */ React36.createElement(PeopleIcon2, null),
-    /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
+    /* @__PURE__ */ React35.createElement(PeopleIcon2, null),
+    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
   );
 };
 var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Flex,
     {
       direction: "column",
       css: {
         gap: "$8",
-        maxHeight: "100%",
         overflowY: "auto",
         overflowX: "hidden",
-        pr: "$3"
+        pr: "$10",
+        mr: "-$10",
+        flex: "1 1 0"
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(
       RoleAccordion,
       {
         peerList: handRaisedList,
@@ -3035,7 +2961,7 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
         isHandRaisedAccordion: true
       }
     ),
-    Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React36.createElement(
+    Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React35.createElement(
       RoleAccordion,
       {
         key: role,
@@ -3048,8 +2974,8 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
   );
 };
 var Participant = ({ peer, isConnected }) => {
-  const localPeerId = useHMSStore17(selectLocalPeerID4);
-  return /* @__PURE__ */ React36.createElement(
+  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  return /* @__PURE__ */ React35.createElement(
     Flex,
     {
       key: peer.id,
@@ -3064,17 +2990,17 @@ var Participant = ({ peer, isConnected }) => {
       justify: "between",
       "data-testid": "participant_" + peer.name
     },
-    /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, textEllipsis(150)), { fontWeight: "$semiBold", color: "$on_surface_high" }) }, peer.name, " ", localPeerId === peer.id ? "(You)" : ""),
-    isConnected ? /* @__PURE__ */ React36.createElement(ParticipantActions, { peerId: peer.id, isLocal: peer.id === localPeerId, role: peer.roleName }) : null
+    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, textEllipsis(150)), { fontWeight: "$semiBold", color: "$on_surface_high" }) }, peer.name, " ", localPeerId === peer.id ? "(You)" : ""),
+    isConnected ? /* @__PURE__ */ React35.createElement(ParticipantActions, { peerId: peer.id, isLocal: peer.id === localPeerId, role: peer.roleName }) : null
   );
 };
-var ParticipantActions = React36.memo(({ peerId, role, isLocal }) => {
+var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
   var _a, _b;
-  const isHandRaised = (_a = useHMSStore17(selectPeerMetadata2(peerId))) == null ? void 0 : _a.isHandRaised;
-  const canChangeRole = (_b = useHMSStore17(selectPermissions8)) == null ? void 0 : _b.changeRole;
+  const isHandRaised = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.isHandRaised;
+  const canChangeRole = (_b = useHMSStore16(selectPermissions8)) == null ? void 0 : _b.changeRole;
   const shouldShowMoreActions = canChangeRole;
-  const isAudioMuted = !useHMSStore17(selectIsPeerAudioEnabled(peerId));
-  return /* @__PURE__ */ React36.createElement(
+  const isAudioMuted = !useHMSStore16(selectIsPeerAudioEnabled(peerId));
+  return /* @__PURE__ */ React35.createElement(
     Flex,
     {
       align: "center",
@@ -3083,32 +3009,32 @@ var ParticipantActions = React36.memo(({ peerId, role, isLocal }) => {
         gap: "$8"
       }
     },
-    /* @__PURE__ */ React36.createElement(ConnectionIndicator, { peerId }),
-    isHandRaised && /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(ConnectionIndicator, { peerId }),
+    isHandRaised && /* @__PURE__ */ React35.createElement(
       Flex,
       {
         align: "center",
         justify: "center",
         css: { p: "$1", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
       },
-      /* @__PURE__ */ React36.createElement(HandIcon3, { height: 19, width: 19 })
+      /* @__PURE__ */ React35.createElement(HandIcon3, { height: 19, width: 19 })
     ),
-    isAudioMuted ? /* @__PURE__ */ React36.createElement(
+    isAudioMuted ? /* @__PURE__ */ React35.createElement(
       Flex,
       {
         align: "center",
         justify: "center",
         css: { p: "$2", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
       },
-      /* @__PURE__ */ React36.createElement(MicOffIcon3, { height: 19, width: 19 })
+      /* @__PURE__ */ React35.createElement(MicOffIcon3, { height: 19, width: 19 })
     ) : null,
-    shouldShowMoreActions && !isInternalRole(role) && !isLocal ? /* @__PURE__ */ React36.createElement(ParticipantMoreActions, { peerId, role }) : null
+    shouldShowMoreActions && !isInternalRole(role) && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
   );
 });
 var ParticipantMoreActions = ({ peerId, role }) => {
   var _a;
   const hmsActions = useHMSActions11();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore17(selectPermissions8);
+  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore16(selectPermissions8);
   const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
@@ -3118,10 +3044,10 @@ 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 = useHMSStore17(selectPeerMetadata2(peerId))) == null ? void 0 : _a.prevRole;
-  const localPeerId = useHMSStore17(selectLocalPeerID4);
+  const prevRole = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.prevRole;
+  const localPeerId = useHMSStore16(selectLocalPeerID4);
   const isLocal = localPeerId === peerId;
-  const [open, setOpen] = useState19(false);
+  const [open, setOpen] = useState18(false);
   const handleStageAction = () => __async(void 0, null, function* () {
     if (isInStage) {
       prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
@@ -3130,7 +3056,7 @@ var ParticipantMoreActions = ({ peerId, role }) => {
     }
     setOpen(false);
   });
-  return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React35.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -3150,8 +3076,8 @@ var ParticipantMoreActions = ({ peerId, role }) => {
       },
       tabIndex: 0
     },
-    /* @__PURE__ */ React36.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React36.createElement(VerticalMenuIcon4, null))
-  ), /* @__PURE__ */ React36.createElement(Dropdown.Portal, null, /* @__PURE__ */ React36.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React36.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, isInStage ? remove_from_stage_label : bring_to_stage_label)) : null, !isLocal && canRemoveOthers && /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React35.createElement(VerticalMenuIcon4, null))
+  ), /* @__PURE__ */ React35.createElement(Dropdown.Portal, null, /* @__PURE__ */ React35.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React35.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, isInStage ? remove_from_stage_label : bring_to_stage_label)) : null, !isLocal && canRemoveOthers && /* @__PURE__ */ React35.createElement(
     Dropdown.Item,
     {
       css: { color: "$alert_error_default", bg: "$surface_default" },
@@ -3163,12 +3089,12 @@ var ParticipantMoreActions = ({ peerId, role }) => {
         }
       })
     },
-    /* @__PURE__ */ React36.createElement(PeopleRemoveIcon, null),
-    /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, "Remove Participant")
+    /* @__PURE__ */ React35.createElement(PeopleRemoveIcon, null),
+    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, "Remove Participant")
   ))));
 };
 var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
-  const [value, setValue] = React36.useState("");
+  const [value, setValue] = React35.useState("");
   const isMobile = useMedia4(config.media.md);
   useDebounce(
     () => {
@@ -3177,20 +3103,20 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
     300,
     [value, onSearch]
   );
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Flex,
     {
       align: "center",
       css: {
-        p: isMobile ? "$0 $6" : "$2 0",
+        p: isMobile ? "0" : "$2 0",
         mb: "$2",
         position: "relative",
         color: "$on_surface_medium",
         mt: inSidePane ? "$4" : ""
       }
     },
-    /* @__PURE__ */ React36.createElement(SearchIcon, { style: { position: "absolute", left: isMobile ? "1.25rem" : "0.5rem" } }),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(SearchIcon, { style: { position: "absolute", left: isMobile ? "1.25rem" : "0.5rem" } }),
+    /* @__PURE__ */ React35.createElement(
       Input,
       {
         type: "text",
@@ -3211,7 +3137,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React37.lazy(() => import("./VirtualBackground-UM2FOUHQ.js"));
+var VirtualBackground = React36.lazy(() => import("./VirtualBackground-6EP3X7MO.js"));
 var Footer2 = ({
   screenType,
   elements
@@ -3220,8 +3146,14 @@ 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 isVideoOn = useHMSStore18(selectIsLocalVideoEnabled2);
-  return /* @__PURE__ */ React37.createElement(
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  useEffect6(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+  }, [toggleChat, openByDefault]);
+  return /* @__PURE__ */ React36.createElement(
     Footer.Root,
     {
       css: {
@@ -3231,11 +3163,11 @@ var Footer2 = ({
           gap: "$10",
           position: "relative",
           // To prevent it from showing over the sidepane if chat type is not overlay
-          zIndex: isOverlayChat ? 20 : 1
+          zIndex: isOverlayChat && isChatOpen ? 20 : 1
         }
       }
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React36.createElement(
       Footer.Left,
       {
         css: {
@@ -3246,11 +3178,11 @@ var Footer2 = ({
           }
         }
       },
-      isMobile ? /* @__PURE__ */ React37.createElement(LeaveRoom, { screenType }) : null,
-      /* @__PURE__ */ React37.createElement(AudioVideoToggle, null),
-      isMobile ? null : /* @__PURE__ */ React37.createElement(Suspense, { fallback: /* @__PURE__ */ React37.createElement(React37.Fragment, null) }, isVideoOn ? /* @__PURE__ */ React37.createElement(VirtualBackground, null) : null)
+      isMobile ? /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }) : null,
+      /* @__PURE__ */ React36.createElement(AudioVideoToggle, null),
+      isMobile ? null : /* @__PURE__ */ React36.createElement(Suspense, { fallback: /* @__PURE__ */ React36.createElement(React36.Fragment, null) }, /* @__PURE__ */ React36.createElement(VirtualBackground, null))
     ),
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React36.createElement(
       Footer.Center,
       {
         css: {
@@ -3260,18 +3192,18 @@ var Footer2 = ({
           }
         }
       },
-      isMobile ? /* @__PURE__ */ React37.createElement(React37.Fragment, null, screenType === "hls_live_streaming" ? /* @__PURE__ */ React37.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React37.createElement(ChatToggle, { openByDefault }), /* @__PURE__ */ React37.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScreenshareToggle, null), /* @__PURE__ */ React37.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React37.createElement(EmojiReaction, null), /* @__PURE__ */ React37.createElement(LeaveRoom, { screenType }))
+      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 }))
     ),
-    /* @__PURE__ */ React37.createElement(Footer.Right, null, !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React37.createElement(ChatToggle, { openByDefault }), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React37.createElement(ParticipantCount, null), /* @__PURE__ */ React37.createElement(MoreSettings, { elements, 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 }))
   );
 };
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
-import React38, { useCallback as useCallback7, useState as useState20 } from "react";
-import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions12, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import React37, { useCallback as useCallback7, useState as useState19 } from "react";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions12, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
-  const { hlsError } = useHMSStore19(selectHLSState2).error || false;
-  const [openModal, setOpenModal] = useState20(!!hlsError);
+  const { hlsError } = useHMSStore17(selectHLSState2).error || false;
+  const [openModal, setOpenModal] = useState19(!!hlsError);
   const hmsActions = useHMSActions12();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback7(() => __async(this, null, function* () {
@@ -3289,7 +3221,7 @@ function HLSFailureModal() {
       setHLSStarted(false);
     }
   }), [hmsActions, isHLSStarted, setHLSStarted]);
-  return hlsError ? /* @__PURE__ */ React38.createElement(
+  return hlsError ? /* @__PURE__ */ React37.createElement(
     Dialog.Root,
     {
       open: openModal,
@@ -3299,7 +3231,7 @@ function HLSFailureModal() {
         }
       }
     },
-    /* @__PURE__ */ React38.createElement(Dialog.Portal, null, /* @__PURE__ */ React38.createElement(Dialog.Overlay, null), /* @__PURE__ */ React38.createElement(Dialog.Content, { css: { w: "min(360px, 90%)" } }, /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React37.createElement(Dialog.Portal, null, /* @__PURE__ */ React37.createElement(Dialog.Overlay, null), /* @__PURE__ */ React37.createElement(Dialog.Content, { css: { w: "min(360px, 90%)" } }, /* @__PURE__ */ React37.createElement(
       Dialog.Title,
       {
         css: {
@@ -3310,34 +3242,34 @@ function HLSFailureModal() {
           mt: "$4"
         }
       },
-      /* @__PURE__ */ React38.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, "Failed to Go Live")
-    ), /* @__PURE__ */ React38.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ React38.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React38.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ React38.createElement(Button, { css: { w: "100%" }, onClick: startHLS }, "Go Live"))))
+      /* @__PURE__ */ React37.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, "Failed to Go Live")
+    ), /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ React37.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React37.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ React37.createElement(Button, { css: { w: "100%" }, onClick: startHLS }, "Go Live"))))
   ) : null;
 }
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-import React60, { Suspense as Suspense2, useEffect as useEffect22 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions20, useHMSStore as useHMSStore35 } from "@100mslive/react-sdk";
+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";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-import React50, { useEffect as useEffect14, useMemo as useMemo6, useState as useState27 } from "react";
-import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore25, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
+import React49, { useEffect as useEffect14, 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 React43, { useEffect as useEffect10, useMemo as useMemo3, useState as useState22 } from "react";
+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 useHMSStore21 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
-import React40, { useEffect as useEffect7, useRef as useRef6 } from "react";
+import React39, { useEffect as useEffect7, 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 useHMSStore20 } from "@100mslive/react-sdk";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer as selectLocalPeer2, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useVideoTileLayout.ts
-import React39, { useContext } from "react";
-var VideoTileContext = React39.createContext({
+import React38, { useContext } from "react";
+var VideoTileContext = React38.createContext({
   enableSpotlightingPeer: true,
   hideParticipantNameOnTile: false,
   roundedVideoTile: true,
@@ -3353,14 +3285,14 @@ var useVideoTileContext = () => {
 
 // src/Prebuilt/components/InsetTile.tsx
 var MinimisedTile = ({ setMinimised }) => {
-  return /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React40.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React40.createElement(Text, null, "You"), /* @__PURE__ */ React40.createElement(
+  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(
     IconButton_default,
     {
       className: "__cancel-drag-event",
       onClick: () => setMinimised(false),
       css: { bg: "transparent", border: "transparent" }
     },
-    /* @__PURE__ */ React40.createElement(ExpandIcon2, null)
+    /* @__PURE__ */ React39.createElement(ExpandIcon2, null)
   ));
 };
 var insetHeightPx = 180;
@@ -3370,10 +3302,10 @@ var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
   const isMobile = useMedia6(config.media.md);
   const isLandscape = useMedia6(config.media.ls);
-  const localPeer = useHMSStore20(selectLocalPeer2);
+  const localPeer = useHMSStore18(selectLocalPeer2);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore20(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isAllowedToPublish = useHMSStore20(selectIsAllowedToPublish2);
+  const videoTrack = useHMSStore18(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isAllowedToPublish = useHMSStore18(selectIsAllowedToPublish2);
   const videoTileProps = useVideoTileContext();
   let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
   if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
@@ -3407,7 +3339,7 @@ var InsetTile = () => {
   if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
     return null;
   }
-  return /* @__PURE__ */ React40.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React39.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React39.createElement(
     Box,
     {
       ref: nodeRef,
@@ -3423,9 +3355,9 @@ var InsetTile = () => {
         h: height
       } : {})
     },
-    minimised ? /* @__PURE__ */ React40.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React40.createElement(
+    minimised ? /* @__PURE__ */ React39.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React39.createElement(
       VideoTile_default,
-      __spreadValues({
+      __spreadProps(__spreadValues({
         peerId: localPeer == null ? void 0 : localPeer.id,
         trackid: localPeer == null ? void 0 : localPeer.videoTrack,
         rootCSS: {
@@ -3437,13 +3369,15 @@ var InsetTile = () => {
         containerCSS: { background: "$surface_default" },
         canMinimise: true,
         isDragabble: true
-      }, videoTileProps)
+      }, videoTileProps), {
+        hideParticipantNameOnTile: true
+      })
     )
   ));
 };
 
 // src/Prebuilt/components/Pagination.tsx
-import React41, { useEffect as useEffect8 } from "react";
+import React40, { useEffect as useEffect8 } from "react";
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
@@ -3468,7 +3402,7 @@ var Pagination = ({
   if (numPages <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React41.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React41.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React41.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React41.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React41.createElement(
+  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(
     StyledPagination.Dot,
     {
       key: i,
@@ -3478,15 +3412,15 @@ var Pagination = ({
         onPageChange(i);
       }
     }
-  ))) : null, /* @__PURE__ */ React41.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React41.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+  ))) : null, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React40.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
 };
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
-import React42 from "react";
-var Grid = React42.forwardRef(
+import React41 from "react";
+var Grid = React41.forwardRef(
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React41.createElement(
       Box,
       {
         ref,
@@ -3504,7 +3438,7 @@ var Grid = React42.forwardRef(
       },
       tiles == null ? void 0 : tiles.map((tile) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ React42.createElement(
+        return /* @__PURE__ */ React41.createElement(
           VideoTile_default,
           __spreadValues({
             key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
@@ -3522,7 +3456,7 @@ var Grid = React42.forwardRef(
 );
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-import { useEffect as useEffect9, useMemo as useMemo2, useState as useState21 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo2, useState as useState20 } from "react";
 import { useMeasure as useMeasure2, useMedia as useMedia7 } from "react-use";
 import {
   getPeersWithTiles,
@@ -3560,7 +3494,7 @@ var useTileLayout = ({
   const vanillaStore = useHMSVanillaStore3();
   const [ref, { width, height }] = useMeasure2();
   const isMobile = useMedia7(config.media.lg);
-  const [pagesWithTiles, setPagesWithTiles] = useState21([]);
+  const [pagesWithTiles, setPagesWithTiles] = useState20([]);
   useEffect9(() => {
     if (width === 0 || height === 0) {
       return;
@@ -3628,7 +3562,7 @@ var useTileLayout = ({
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore21(selectLocalPeer3);
+  const localPeer = useHMSStore19(selectLocalPeer3);
   const isMobile = useMedia8(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
@@ -3649,14 +3583,14 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     maxTileCount,
     edgeToEdge
   });
-  const [page, setPage] = useState22(0);
+  const [page, setPage] = useState21(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect10(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React43.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React43.createElement(
+  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(
     Pagination,
     {
       page,
@@ -3666,20 +3600,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__ */ React43.createElement(InsetTile, null));
+  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ React42.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
-import React46, { useEffect as useEffect12, useState as useState24 } from "react";
-import { selectLocalPeer as selectLocalPeer4, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
+import React45, { useEffect as useEffect12, useState as useState23 } from "react";
+import { selectLocalPeer as selectLocalPeer4, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-import React45, { useEffect as useEffect11, useState as useState23 } from "react";
+import React44, { useEffect as useEffect11, useState as useState22 } from "react";
 import { useMedia as useMedia9 } from "react-use";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
-import React44 from "react";
-var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React44.createElement(
+import React43 from "react";
+var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React43.createElement(
   Flex,
   {
     direction: "column",
@@ -3688,7 +3622,7 @@ var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React44.createElement(
   children
 );
 var ProminentSection = ({ children, css = {} }) => {
-  return /* @__PURE__ */ React44.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
+  return /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
 };
 var SecondarySection = ({
   tiles,
@@ -3699,12 +3633,12 @@ var SecondarySection = ({
   if (!(tiles == null ? void 0 : tiles.length)) {
     return null;
   }
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React43.createElement(
     Box,
     {
       css: {
         display: "grid",
-        gridTemplateRows: React44.Children.count(children) > 0 ? "136px auto" : "154px",
+        gridTemplateRows: React43.Children.count(children) > 0 ? "136px auto" : "154px",
         gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
         margin: "0 auto",
         gap: "$2 $4",
@@ -3714,7 +3648,7 @@ var SecondarySection = ({
     },
     tiles.map((tile) => {
       var _a, _b, _c, _d;
-      return /* @__PURE__ */ React44.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),
@@ -3731,7 +3665,7 @@ var SecondarySection = ({
         }, tileLayoutProps)
       );
     }),
-    /* @__PURE__ */ React44.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
+    /* @__PURE__ */ React43.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
   );
 };
 var ProminenceLayout = {
@@ -3746,14 +3680,14 @@ var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const isMobile = useMedia9(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
-  const [page, setPage] = useState23(0);
+  const [page, setPage] = useState22(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect11(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React45.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React44.createElement(
     Pagination,
     {
       page,
@@ -3811,7 +3745,7 @@ function RoleProminence({
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore22(selectLocalPeer4);
+  const localPeer = useHMSStore20(selectLocalPeer4);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -3821,14 +3755,14 @@ function RoleProminence({
     pageList,
     maxTileCount
   });
-  const [page, setPage] = useState24(0);
+  const [page, setPage] = useState23(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect12(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React46.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React46.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React46.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React46.createElement(
+  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(
     Pagination,
     {
       page,
@@ -3838,16 +3772,16 @@ function RoleProminence({
       },
       numPages: pagesWithTiles.length
     }
-  ), /* @__PURE__ */ React46.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React46.createElement(InsetTile, null));
+  ), /* @__PURE__ */ React45.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React45.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-import React49, { useEffect as useEffect13, useMemo as useMemo5, useState as useState26 } from "react";
+import React48, { useEffect as useEffect13, useMemo as useMemo5, useState as useState25 } from "react";
 import { useMedia as useMedia10 } from "react-use";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore24 } from "@100mslive/react-sdk";
+import { selectPeersScreenSharing, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-import React48, { useRef as useRef7, useState as useState25 } from "react";
+import React47, { useRef as useRef7, useState as useState24 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
@@ -3855,17 +3789,17 @@ import {
   selectPeerByID as selectPeerByID2,
   selectScreenShareAudioByPeerID,
   selectScreenShareByPeerID,
-  useHMSStore as useHMSStore23
+  useHMSStore as useHMSStore21
 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon3, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
-import React47 from "react";
+import React46 from "react";
 import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon6, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon5, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
   const hmsActions = useHMSActions13();
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React46.createElement(
     Flex,
     {
       direction: "column",
@@ -3877,9 +3811,9 @@ var ScreenshareDisplay = () => {
         color: "$on_surface_high"
       }
     },
-    /* @__PURE__ */ React47.createElement(ShareScreenIcon2, { width: 48, height: 48 }),
-    /* @__PURE__ */ React47.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React47.createElement(
+    /* @__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(
       Button,
       {
         variant: "danger",
@@ -3889,7 +3823,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React47.createElement(CrossIcon6, { width: 18, height: 18 }),
+      /* @__PURE__ */ React46.createElement(CrossIcon5, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -3905,31 +3839,31 @@ var labelStyles = {
   flexShrink: 0
 };
 var Tile = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore23(selectLocalPeerID5) === peerId;
-  const track = useHMSStore23(selectScreenShareByPeerID(peerId));
-  const peer = useHMSStore23(selectPeerByID2(peerId));
+  const isLocal = useHMSStore21(selectLocalPeerID5) === peerId;
+  const track = useHMSStore21(selectScreenShareByPeerID(peerId));
+  const peer = useHMSStore21(selectPeerByID2(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const [isMouseHovered, setIsMouseHovered] = useState25(false);
+  const [isMouseHovered, setIsMouseHovered] = useState24(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const label = getVideoTileLabel({
-    peerName: peer.name,
-    isLocal: false,
-    track
-  });
   const fullscreenRef = useRef7(null);
-  const [fullscreen, setFullscreen] = useState25(false);
+  const [fullscreen, setFullscreen] = useState24(false);
   const isFullscreen = useFullscreen2(fullscreenRef, fullscreen, {
     onClose: () => setFullscreen(false)
   });
   const isFullScreenSupported = screenfull2.isEnabled;
-  const audioTrack = useHMSStore23(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
+  const audioTrack = useHMSStore21(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
-    return /* @__PURE__ */ React48.createElement(ScreenshareDisplay, null);
+    return /* @__PURE__ */ React47.createElement(ScreenshareDisplay, null);
   }
   if (!peer) {
     return null;
   }
-  return /* @__PURE__ */ React48.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React48.createElement(
+  const label = getVideoTileLabel({
+    peerName: peer == null ? void 0 : peer.name,
+    isLocal: false,
+    track
+  });
+  return /* @__PURE__ */ React47.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React47.createElement(
     StyledVideoTile.Container,
     {
       transparentBg: true,
@@ -3940,9 +3874,9 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         setIsMouseHovered(false);
       }
     },
-    showStatsOnTiles ? /* @__PURE__ */ React48.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React48.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React48.createElement(ShrinkIcon, null) : /* @__PURE__ */ React48.createElement(ExpandIcon3, null)) : null,
-    track ? /* @__PURE__ */ React48.createElement(
+    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(
       Video,
       {
         screenShare: true,
@@ -3952,19 +3886,28 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         css: { minHeight: 0 }
       }
     ) : null,
-    /* @__PURE__ */ React48.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !(peer == null ? void 0 : peer.isLocal) ? /* @__PURE__ */ React48.createElement(TileMenu_default, { isScreenshare: true, peerID: peer == null ? void 0 : peer.id, audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id }) : null
+    /* @__PURE__ */ React47.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
+    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React47.createElement(
+      TileMenu_default,
+      {
+        isScreenshare: true,
+        peerID: peer.id,
+        audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
+        videoTrackID: track == null ? void 0 : track.id,
+        enableSpotlightingPeer: false
+      }
+    ) : null
   ));
 };
-var ScreenshareTile = React48.memo(Tile);
+var ScreenshareTile = React47.memo(Tile);
 var ScreenshareTile_default = ScreenshareTile;
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const peersSharing = useHMSStore24(selectPeersScreenSharing);
+  const peersSharing = useHMSStore22(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState26(0);
+  const [page, setPage] = useState25(0);
   const activeSharePeer = peersSharing[page];
   const isMobile = useMedia10(config.media.md);
   const secondaryPeers = useMemo5(
@@ -3977,7 +3920,7 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
       setActiveScreenSharePeer("");
     };
   }, [activeSharePeer == null ? void 0 : activeSharePeer.id, isMobile, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React49.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React49.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React49.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React49.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React49.createElement(
+  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(
     SecondaryTiles,
     {
       peers: secondaryPeers,
@@ -4082,9 +4025,9 @@ var GridLayout = ({
   edge_to_edge = false,
   hide_metadata_on_tile = false
 }) => {
-  const peerSharing = useHMSStore25(selectPeerScreenSharing);
+  const peerSharing = useHMSStore23(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore25(selectPeers2);
+  const peers = useHMSStore23(selectPeers2);
   const isRoleProminence = prominentRoles.length && peers.some(
     (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
   ) || pinnedTrack;
@@ -4095,10 +4038,10 @@ var GridLayout = ({
     return peers;
   }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
   const vanillaStore = useHMSVanillaStore4();
-  const [sortedPeers, setSortedPeers] = useState27(updatedPeers);
+  const [sortedPeers, setSortedPeers] = useState26(updatedPeers);
   const peersSorter = useMemo6(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState27(0);
-  const [mainPage, setMainPage] = useState27(0);
+  const [pageSize, setPageSize] = useState26(0);
+  const [mainPage, setMainPage] = useState26(0);
   const tileLayout = {
     enableSpotlightingPeer: enable_spotlighting_peer,
     hideParticipantNameOnTile: hide_participant_name_on_tile,
@@ -4118,7 +4061,7 @@ var GridLayout = ({
     peersSorter.onUpdate(setSortedPeers);
   }, [mainPage, peersSorter, updatedPeers, pageSize]);
   if (peerSharing) {
-    return /* @__PURE__ */ React50.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
       ScreenshareLayout,
       {
         peers: sortedPeers,
@@ -4128,7 +4071,7 @@ var GridLayout = ({
       }
     ));
   } else if (isRoleProminence) {
-    return /* @__PURE__ */ React50.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
       RoleProminence,
       {
         peers: sortedPeers,
@@ -4140,7 +4083,7 @@ var GridLayout = ({
       }
     ));
   }
-  return /* @__PURE__ */ React50.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
     EqualProminence,
     {
       peers: sortedPeers,
@@ -4153,20 +4096,20 @@ var GridLayout = ({
 };
 
 // src/Prebuilt/layouts/EmbedView.jsx
-import React51, { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef8, useState as useState28 } from "react";
+import React50, { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef8, useState as useState27 } from "react";
 import {
   selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   throwErrorHandler,
-  useHMSStore as useHMSStore26,
+  useHMSStore as useHMSStore24,
   useScreenShare as useScreenShare3
 } from "@100mslive/react-sdk";
 var EmbedView = () => {
-  return /* @__PURE__ */ React51.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React51.createElement(EmbedComponent, null));
+  return /* @__PURE__ */ React50.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React50.createElement(EmbedComponent, null));
 };
 var EmbebScreenShareView = ({ children }) => {
-  const peers = useHMSStore26(selectPeers3);
-  const peerPresenting = useHMSStore26(selectPeerScreenSharing2);
+  const peers = useHMSStore24(selectPeers3);
+  const peerPresenting = useHMSStore24(selectPeerScreenSharing2);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const smallTilePeers = useMemo7(() => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
@@ -4178,12 +4121,12 @@ var EmbebScreenShareView = ({ children }) => {
       setActiveScreenSharePeer("");
     };
   }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React51.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React51.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React51.createElement(SecondaryTiles, { peers: smallTilePeers }));
+  return /* @__PURE__ */ React50.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React50.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React50.createElement(SecondaryTiles, { peers: smallTilePeers }));
 };
 var EmbedComponent = () => {
   const { amIScreenSharing, toggleScreenShare } = useScreenShare3(throwErrorHandler);
   const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState28(false);
+  const [wasScreenShared, setWasScreenShared] = useState27(false);
   const screenShareAttemptInProgress = useRef8(false);
   const src = embedConfig.url;
   const iframeRef = useRef8();
@@ -4216,7 +4159,7 @@ var EmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React51.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React50.createElement(
     "iframe",
     {
       src,
@@ -4229,22 +4172,22 @@ var EmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
-import React52, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState29 } from "react";
+import React51, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState28 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 var PDFView = () => {
-  return /* @__PURE__ */ React52.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React52.createElement(PDFEmbedComponent, null));
+  return /* @__PURE__ */ React51.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React51.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
   const ref = useRef9();
   const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState29(false);
+  const [isPDFLoaded, setIsPDFLoaded] = useState28(false);
   let pdfJSURL = define_process_env_default.REACT_APP_PDFJS_IFRAME_URL;
   const { amIScreenSharing, toggleScreenShare } = useScreenShare4(throwErrorHandler2);
   const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
   if (pdfConfig.url && !pdfConfig.file) {
     pdfJSURL = pdfJSURL + "?file=" + encodeURIComponent(pdfConfig.url);
   }
-  const [wasScreenShared, setWasScreenShared] = useState29(false);
+  const [wasScreenShared, setWasScreenShared] = useState28(false);
   const screenShareAttemptInProgress = useRef9(false);
   const iframeRef = useRef9();
   const resetEmbedConfig = useCallback9(() => {
@@ -4285,7 +4228,7 @@ var PDFEmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React52.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React51.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React51.createElement(
     "iframe",
     {
       src: pdfJSURL,
@@ -4319,11 +4262,17 @@ var PDFEmbedComponent = () => {
 
 // src/Prebuilt/layouts/SidePane.tsx
 import React58 from "react";
+import { useMedia as useMedia15 } 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 { selectAppData as selectAppData3, selectVideoTrackByPeerID, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+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 React55, { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef13, useState as useState32 } from "react";
+import React54, { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef13, useState as useState31 } from "react";
 import { useMedia as useMedia13 } from "react-use";
 import {
   HMSNotificationTypes,
@@ -4333,12 +4282,12 @@ import {
   selectSessionStore,
   useHMSActions as useHMSActions18,
   useHMSNotifications,
-  useHMSStore as useHMSStore31
+  useHMSStore as useHMSStore29
 } from "@100mslive/react-sdk";
-import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon7, PinIcon as PinIcon2 } from "@100mslive/react-icons";
+import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon6, PinIcon as PinIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.jsx
-import React53, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect17, useLayoutEffect, useMemo as useMemo8, useRef as useRef10, useState as useState30 } from "react";
+import React52, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect17, 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 AutoSizer from "react-virtualized-auto-sizer";
@@ -4352,7 +4301,7 @@ import {
   selectPeerNameByID as selectPeerNameByID2,
   selectPermissions as selectPermissions9,
   useHMSActions as useHMSActions15,
-  useHMSStore as useHMSStore28
+  useHMSStore as useHMSStore26
 } from "@100mslive/react-sdk";
 import { PinIcon, VerticalMenuIcon as VerticalMenuIcon5 } from "@100mslive/react-icons";
 
@@ -4365,13 +4314,13 @@ import {
   selectPeerNameByID,
   selectSessionMetadata,
   useHMSActions as useHMSActions14,
-  useHMSStore as useHMSStore27,
+  useHMSStore as useHMSStore25,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
   const hmsActions = useHMSActions14();
   const vanillaStore = useHMSVanillaStore5();
-  const pinnedMessage = useHMSStore27(selectSessionMetadata);
+  const pinnedMessage = useHMSStore25(selectSessionMetadata);
   const setPinnedMessage = useCallback10(
     /**
      * @param {import("@100mslive/react-sdk").HMSMessage | undefined} message
@@ -4405,7 +4354,7 @@ var formatTime = (date) => {
   return `${hours}:${mins} ${suffix}`;
 };
 var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Flex,
     {
       align: "center",
@@ -4417,16 +4366,16 @@ var MessageTypeContainer = ({ left, right }) => {
         r: "$0"
       }
     },
-    left && /* @__PURE__ */ React53.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
-    left && right && /* @__PURE__ */ React53.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
-    right && /* @__PURE__ */ React53.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
+    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)
   );
 };
 var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-  const peerName = useHMSStore28(selectPeerNameByID2(receiver));
-  const localPeerRoleName = useHMSStore28(selectLocalPeerRoleName);
+  const peerName = useHMSStore26(selectPeerNameByID2(receiver));
+  const localPeerRoleName = useHMSStore26(selectLocalPeerRoleName);
   if (receiver) {
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React52.createElement(
       MessageTypeContainer,
       {
         left: hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ""}` : "TO YOU",
@@ -4435,7 +4384,7 @@ var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
     );
   }
   if (roles && roles.length) {
-    return /* @__PURE__ */ React53.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
+    return /* @__PURE__ */ React52.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
   }
   return null;
 };
@@ -4449,10 +4398,10 @@ var Link = styled("a", {
 });
 var AnnotisedMessage = ({ message }) => {
   if (!message) {
-    return /* @__PURE__ */ React53.createElement(Fragment8, null);
+    return /* @__PURE__ */ React52.createElement(Fragment8, null);
   }
-  return /* @__PURE__ */ React53.createElement(Fragment8, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React53.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
+  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
   ));
 };
 var getMessageType = ({ roles, receiver }) => {
@@ -4462,18 +4411,18 @@ var getMessageType = ({ roles, receiver }) => {
   return receiver ? "private" : "";
 };
 var ChatActions = ({ onPin, showPinAction }) => {
-  const [open, setOpen] = useState30(false);
+  const [open, setOpen] = useState29(false);
   if (!showPinAction) {
     return null;
   }
-  return /* @__PURE__ */ React53.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React53.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React53.createElement(IconButton, null, /* @__PURE__ */ React53.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React53.createElement(VerticalMenuIcon5, null)))), /* @__PURE__ */ React53.createElement(Dropdown.Portal, null, /* @__PURE__ */ React53.createElement(
+  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(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: "end",
       css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
     },
-    /* @__PURE__ */ React53.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React53.createElement(PinIcon, null), /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
+    /* @__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"))
   )));
 };
 var SenderName = styled(Text, {
@@ -4485,7 +4434,7 @@ var SenderName = styled(Text, {
   color: "$on_surface_high",
   fontWeight: "$semiBold"
 });
-var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
+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);
@@ -4498,8 +4447,8 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
   const { elements } = useRoomLayoutConferencingScreen();
   const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
   const hmsActions = useHMSActions15();
-  const localPeerId = useHMSStore28(selectLocalPeerID6);
-  const permissions = useHMSStore28(selectPermissions9);
+  const localPeerId = useHMSStore26(selectLocalPeerID6);
+  const permissions = useHMSStore26(selectPermissions9);
   const messageType = getMessageType({
     roles: message.recipientRoles,
     receiver: message.recipientPeer
@@ -4510,7 +4459,7 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
       hmsActions.setMessageRead(true, message.id);
     }
   }, [message.read, hmsActions, inView, message.id]);
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Box,
     {
       ref,
@@ -4518,7 +4467,7 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
       css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
       style
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React52.createElement(
       Flex,
       {
         ref: rowRef,
@@ -4535,7 +4484,7 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
         key: message.time,
         "data-testid": "chat_msg"
       },
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React52.createElement(
         Text,
         {
           css: {
@@ -4548,7 +4497,7 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
           },
           as: "div"
         },
-        /* @__PURE__ */ React53.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React53.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React53.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React53.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React53.createElement(
+        /* @__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(
           Text,
           {
             as: "span",
@@ -4561,7 +4510,7 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
           },
           formatTime(message.time)
         ) : null),
-        /* @__PURE__ */ React53.createElement(
+        /* @__PURE__ */ React52.createElement(
           MessageType,
           {
             hasCurrentUserSent: message.sender === localPeerId,
@@ -4569,9 +4518,9 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
             roles: message.recipientRoles
           }
         ),
-        !isOverlay ? /* @__PURE__ */ React53.createElement(ChatActions, { onPin, showPinAction }) : null
+        !isOverlay ? /* @__PURE__ */ React52.createElement(ChatActions, { onPin, showPinAction }) : null
       ),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React52.createElement(
         Text,
         {
           variant: "sm",
@@ -4585,12 +4534,12 @@ var ChatMessage = React53.memo(({ index, style = {}, message, setRowHeight, onPi
           },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ React53.createElement(AnnotisedMessage, { message: message.message })
+        /* @__PURE__ */ React52.createElement(AnnotisedMessage, { message: message.message })
       )
     )
   );
 });
-var ChatList = React53.forwardRef(
+var ChatList = React52.forwardRef(
   ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
@@ -4598,7 +4547,7 @@ var ChatList = React53.forwardRef(
         scrollToBottom(1);
       }
     }, [listRef]);
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React52.createElement(
       VariableSizeList,
       {
         ref: listRef,
@@ -4610,7 +4559,7 @@ var ChatList = React53.forwardRef(
           overflowX: "hidden"
         }
       },
-      ({ index, style }) => /* @__PURE__ */ React53.createElement(
+      ({ index, style }) => /* @__PURE__ */ React52.createElement(
         ChatMessage,
         {
           style,
@@ -4624,7 +4573,7 @@ var ChatList = React53.forwardRef(
     );
   }
 );
-var VirtualizedChatMessages = React53.forwardRef(({ messages, scrollToBottom }, listRef) => {
+var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom }, listRef) => {
   const rowHeights = useRef10({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
@@ -4636,7 +4585,7 @@ var VirtualizedChatMessages = React53.forwardRef(({ messages, scrollToBottom },
     },
     [listRef]
   );
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Box,
     {
       css: {
@@ -4645,14 +4594,14 @@ var VirtualizedChatMessages = React53.forwardRef(({ messages, scrollToBottom },
       },
       as: "div"
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React52.createElement(
       AutoSizer,
       {
         style: {
           width: "90%"
         }
       },
-      ({ height, width }) => /* @__PURE__ */ React53.createElement(
+      ({ height, width }) => /* @__PURE__ */ React52.createElement(
         ChatList,
         {
           width,
@@ -4667,15 +4616,15 @@ var VirtualizedChatMessages = React53.forwardRef(({ messages, scrollToBottom },
     )
   );
 });
-var ChatBody = React53.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
   var _a;
   const storeMessageSelector = role ? selectMessagesByRole(role) : peerId ? selectMessagesByPeerID(peerId) : selectHMSMessages;
-  let messages = useHMSStore28(storeMessageSelector);
+  let messages = useHMSStore26(storeMessageSelector);
   messages = useMemo8(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
   const isMobile = useMedia11(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   if (messages.length === 0 && !(isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay))) {
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React52.createElement(
       Flex,
       {
         css: {
@@ -4687,7 +4636,7 @@ var ChatBody = React53.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
         align: "center",
         justify: "center"
       },
-      /* @__PURE__ */ React53.createElement(Box, null, /* @__PURE__ */ React53.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ React53.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ React53.createElement(
+      /* @__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(
         Text,
         {
           variant: "sm",
@@ -4697,11 +4646,11 @@ var ChatBody = React53.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
       ))
     );
   }
-  return /* @__PURE__ */ React53.createElement(Fragment8, null, /* @__PURE__ */ React53.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
+  return /* @__PURE__ */ React52.createElement(Fragment8, null, /* @__PURE__ */ React52.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
 });
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
-import React54, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef12, useState as useState31 } from "react";
+import React53, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef12, useState as useState30 } from "react";
 import { useMedia as useMedia12 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
@@ -4710,10 +4659,10 @@ 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 useHMSStore29 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions16, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
   const hmsActions = useHMSActions16();
-  let chatDraftMessage = useHMSStore29(selectAppData2(APP_DATA.chatDraft));
+  let chatDraftMessage = useHMSStore27(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
@@ -4747,6 +4696,7 @@ var useEmojiPickerStyles = (showing) => {
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
+            top: 0.25rem;
             background-color: var(--hms-ui-colors-surface_bright);
             margin-top: 0.5rem;
           }
@@ -4777,9 +4727,9 @@ var TextArea = styled("textarea", {
   }
 });
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState31(false);
+  const [showEmoji, setShowEmoji] = useState30(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React54.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React54.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React54.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React54.createElement(EmojiIcon3, null))), /* @__PURE__ */ React54.createElement(Popover.Portal, null, /* @__PURE__ */ React54.createElement(
+  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(
     Popover.Content,
     {
       alignOffset: -40,
@@ -4789,7 +4739,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React53.createElement(
       Box,
       {
         css: {
@@ -4798,7 +4748,7 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ React54.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ React53.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
@@ -4850,7 +4800,7 @@ var ChatFooter = ({
       setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
     };
   }, [setDraftMessage]);
-  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React53.createElement(
     Flex,
     {
       align: "center",
@@ -4871,7 +4821,7 @@ var ChatFooter = ({
       }
     },
     children,
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React53.createElement(
       TextArea,
       {
         css: {
@@ -4898,7 +4848,7 @@ var ChatFooter = ({
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    !isMobile ? /* @__PURE__ */ React54.createElement(
+    !isMobile ? /* @__PURE__ */ React53.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -4908,7 +4858,7 @@ var ChatFooter = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React53.createElement(
       IconButton,
       {
         className: "send-msg",
@@ -4921,7 +4871,7 @@ var ChatFooter = ({
         },
         "data-testid": "send_msg_btn"
       },
-      /* @__PURE__ */ React54.createElement(SendIcon, null)
+      /* @__PURE__ */ React53.createElement(SendIcon, null)
     )
   )));
 };
@@ -4931,21 +4881,21 @@ import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore30
+  useHMSStore as useHMSStore28
 } from "@100mslive/react-sdk";
 var useUnreadCount = ({ role, peerId }) => {
   const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
-  const unreadCount = useHMSStore30(unreadCountSelector);
+  const unreadCount = useHMSStore28(unreadCountSelector);
   return unreadCount;
 };
 
 // src/Prebuilt/components/Chat/Chat.jsx
 var PINNED_MESSAGE_LENGTH = 80;
 var PinnedMessage = ({ clearPinnedMessage }) => {
-  const permissions = useHMSStore31(selectPermissions10);
-  const pinnedMessage = useHMSStore31(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
+  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__ */ React55.createElement(
+  return pinnedMessage ? /* @__PURE__ */ React54.createElement(
     Flex,
     {
       title: pinnedMessage,
@@ -4953,8 +4903,8 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
       align: "center",
       justify: "between"
     },
-    /* @__PURE__ */ React55.createElement(PinIcon2, null),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React54.createElement(PinIcon2, null),
+    /* @__PURE__ */ React54.createElement(
       Box,
       {
         css: {
@@ -4964,30 +4914,30 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React55.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React55.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
+      /* @__PURE__ */ React54.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React54.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
     ),
-    permissions.removeOthers && /* @__PURE__ */ React55.createElement(
+    permissions.removeOthers && /* @__PURE__ */ React54.createElement(
       Flex,
       {
         onClick: () => clearPinnedMessage(),
         css: { cursor: "pointer", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
       },
-      /* @__PURE__ */ React55.createElement(CrossIcon7, null)
+      /* @__PURE__ */ React54.createElement(CrossIcon6, null)
     )
   ) : null;
 };
-var Chat = ({ screenType, hideControls = false }) => {
-  var _a, _b, _c;
+var Chat = ({ screenType }) => {
+  var _a, _b;
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  const peerName = useHMSStore31(selectPeerNameByID3(peerSelector));
-  const [chatOptions, setChatOptions] = useState32({
+  const peerName = useHMSStore29(selectPeerNameByID3(peerSelector));
+  const [chatOptions, setChatOptions] = useState31({
     role: roleSelector || "",
     peerId: peerSelector && peerName ? peerSelector : "",
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : "Everyone"
   });
-  const [isSelectorOpen, setSelectorOpen] = useState32(false);
+  const [isSelectorOpen] = useState31(false);
   const listRef = useRef13(null);
   const hmsActions = useHMSActions18();
   const { setPinnedMessage } = useSetPinnedMessage();
@@ -5009,7 +4959,7 @@ var Chat = ({ screenType, hideControls = false }) => {
     const currentRef = listRef.current._outerRef;
     isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
   }
-  const messagesCount = useHMSStore31(storeMessageSelector) || 0;
+  const messagesCount = useHMSStore29(storeMessageSelector) || 0;
   const scrollToBottom = useCallback14(
     (unreadCount = 0) => {
       var _a2;
@@ -5024,19 +4974,17 @@ var Chat = ({ screenType, hideControls = false }) => {
     },
     [hmsActions, messagesCount]
   );
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React54.createElement(
     Flex,
     {
       direction: "column",
       css: {
         size: "100%",
-        gap: "$4",
-        marginTop: hideControls && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? "$17" : "0",
-        transition: "margin 0.3s ease-in-out"
+        gap: "$4"
       }
     },
-    isMobile && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) ? null : /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(ChatParticipantHeader, { selectorOpen: isSelectorOpen, onToggle: () => setSelectorOpen((value) => !value) }), ((_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.allow_pinning_messages) ? /* @__PURE__ */ React55.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
-    /* @__PURE__ */ React55.createElement(
+    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(
       ChatBody,
       {
         role: chatOptions.role,
@@ -5046,7 +4994,7 @@ var Chat = ({ screenType, hideControls = false }) => {
         screenType
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React54.createElement(
       ChatFooter,
       {
         role: chatOptions.role,
@@ -5064,7 +5012,7 @@ var Chat = ({ screenType, hideControls = false }) => {
         },
         peerId: chatOptions.peerId
       },
-      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React55.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
+      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React54.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
     )
   );
 };
@@ -5073,7 +5021,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   if (!unreadCount) {
     return null;
   }
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React54.createElement(
     Flex,
     {
       justify: "center",
@@ -5084,7 +5032,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React54.createElement(
       Button,
       {
         variant: "standard",
@@ -5107,22 +5055,123 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       },
       "New ",
       unreadCount === 1 ? "message" : "messages",
-      /* @__PURE__ */ React55.createElement(ChevronDownIcon2, null)
+      /* @__PURE__ */ React54.createElement(ChevronDownIcon2, null)
     )
   );
 };
 
+// src/Prebuilt/components/SidePaneTabs.tsx
+var tabTriggerCSS = {
+  color: "$on_surface_high",
+  p: "$4",
+  fontWeight: "$semiBold",
+  fontSize: "$sm",
+  w: "100%",
+  justifyContent: "center"
+};
+var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+  var _a;
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const resetSidePane = useSidepaneReset();
+  const [activeTab, setActiveTab] = useState32(active);
+  const peerCount = useHMSStore30(selectPeerCount3);
+  const { elements } = useRoomLayoutConferencingScreen();
+  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 isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  useEffect21(() => {
+    if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
+    } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
+    } else if (!showChat && !showParticipants) {
+      resetSidePane();
+    }
+  }, [showChat, activeTab, showParticipants, resetSidePane]);
+  useEffect21(() => {
+    setActiveTab(active);
+  }, [active]);
+  return /* @__PURE__ */ React55.createElement(
+    Flex,
+    {
+      direction: "column",
+      css: {
+        color: "$on_primary_high",
+        h: "100%",
+        marginTop: hideControls && isOverlayChat ? "$17" : "0",
+        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(
+      Tabs.Root,
+      {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        css: {
+          flexDirection: "column",
+          size: "100%"
+        }
+      },
+      /* @__PURE__ */ React55.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React55.createElement(
+        Tabs.Trigger,
+        {
+          value: SIDE_PANE_OPTIONS.CHAT,
+          onClick: toggleChat,
+          css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
+            color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? "$on_surface_low" : "$on_surface_high"
+          })
+        },
+        "Chat"
+      ), /* @__PURE__ */ React55.createElement(
+        Tabs.Trigger,
+        {
+          value: SIDE_PANE_OPTIONS.PARTICIPANTS,
+          onClick: toggleParticipants,
+          css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
+            color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
+          })
+        },
+        "Participants (",
+        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 }))
+    )),
+    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React55.createElement(
+      IconButton,
+      {
+        css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
+        onClick: (e) => {
+          e.stopPropagation();
+          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+            toggleChat();
+          } else {
+            toggleParticipants();
+          }
+        },
+        "data-testid": "close_chat"
+      },
+      /* @__PURE__ */ React55.createElement(CrossIcon7, null)
+    )
+  );
+});
+
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
 import React57, { Fragment as Fragment10, useState as useState34 } from "react";
-import { selectPermissions as selectPermissions11, useHMSStore as useHMSStore33, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
+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";
 
 // src/Prebuilt/images/rtmp.png
 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 useEffect21, useState as useState33 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions19, useHMSStore as useHMSStore32, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+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 {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5197,7 +5246,7 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
 };
 var HLSStreaming = ({ onBack }) => {
   const roleNames = useFilteredRoles();
-  const roomId = useHMSStore32(selectRoomID);
+  const roomId = useHMSStore31(selectRoomID);
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
   const [showLinks, setShowLinks] = useState33(false);
@@ -5245,7 +5294,7 @@ var EndHLS = ({ setShowLinks }) => {
   const [inProgress, setInProgress] = useState33(false);
   const [error, setError] = useState33("");
   const { isHLSRunning } = useRecordingStreaming6();
-  useEffect21(() => {
+  useEffect22(() => {
     if (inProgress && !isHLSRunning) {
       setInProgress(false);
     }
@@ -5278,7 +5327,7 @@ var EndHLS = ({ setShowLinks }) => {
 var StreamingLanding = () => {
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming7();
-  const permissions = useHMSStore33(selectPermissions11);
+  const permissions = useHMSStore32(selectPermissions11);
   const [showHLS, setShowHLS] = useState34(isHLSRunning);
   const [showRTMP, setShowRTMP] = useState34(isRTMPRunning);
   if (!(permissions == null ? void 0 : permissions.hlsStreaming) && !(permissions == null ? void 0 : permissions.rtmpStreaming)) {
@@ -5328,22 +5377,27 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a, _b;
-  const isMobile = useMedia14(config.media.md);
-  const sidepane = useHMSStore34(selectAppData3(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore34(selectAppData3(APP_DATA.activeScreensharePeerId));
-  const trackId = (_a = useHMSStore34(selectVideoTrackByPeerID(activeScreensharePeerId))) == null ? void 0 : _a.id;
+  const isMobile = useMedia15(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) {
-    ViewComponent = /* @__PURE__ */ React58.createElement(ParticipantList, null);
-  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = /* @__PURE__ */ React58.createElement(Chat, { screenType, hideControls });
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = /* @__PURE__ */ React58.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
     ViewComponent = /* @__PURE__ */ React58.createElement(StreamingLanding, null);
   }
   if (!ViewComponent && !trackId) {
     return null;
   }
+  const tileLayout = {
+    hideParticipantNameOnTile: tileProps == null ? void 0 : tileProps.hide_participant_name_on_tile,
+    roundedVideoTile: tileProps == null ? void 0 : tileProps.rounded_video_tile,
+    hideAudioMuteOnTile: tileProps == null ? void 0 : tileProps.hide_audio_mute_on_tile,
+    hideMetadataOnTile: tileProps == null ? void 0 : tileProps.hide_metadata_on_tile,
+    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(
     Flex,
@@ -5365,9 +5419,8 @@ var SidePane = ({
         trackId,
         width: "100%",
         height: 225,
-        rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 },
-        objectFit: "contain"
-      }, tileProps)
+        rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
+      }, tileLayout)
     ),
     !!ViewComponent && /* @__PURE__ */ React58.createElement(
       Box,
@@ -5455,20 +5508,20 @@ var WaitingView = React59.memo(() => {
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React60.lazy(() => import("./HLSView-HNVYG5VE.js"));
+var HLSView = React60.lazy(() => import("./HLSView-HL455FYH.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
   hideControls = false
 }) => {
   var _a, _b;
-  const localPeerRole = useHMSStore35(selectLocalPeerRoleName2);
-  const isConnected = useHMSStore35(selectIsConnectedToRoom6);
+  const localPeerRole = useHMSStore34(selectLocalPeerRoleName2);
+  const isConnected = useHMSStore34(selectIsConnectedToRoom6);
   const hmsActions = useHMSActions20();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  useEffect22(() => {
+  useEffect23(() => {
     if (!isConnected) {
       return;
     }
@@ -5511,28 +5564,30 @@ var VideoStreamingSection = ({
 };
 
 // src/Prebuilt/components/RoleChangeRequestModal.tsx
-import React61, { useEffect as useEffect23 } from "react";
+import React61, { useEffect as useEffect24 } from "react";
 import {
   selectLocalPeerName,
   selectLocalPeerRoleName as selectLocalPeerRoleName3,
   selectRoleChangeRequest,
   useCustomEvent as useCustomEvent2,
   useHMSActions as useHMSActions21,
-  useHMSStore as useHMSStore36
+  useHMSStore as useHMSStore35
 } from "@100mslive/react-sdk";
 var RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions21();
   const { updateMetaData } = useMyMetadata();
-  const currentRole = useHMSStore36(selectLocalPeerRoleName3);
-  const roleChangeRequest = useHMSStore36(selectRoleChangeRequest);
-  const name = useHMSStore36(selectLocalPeerName);
+  const currentRole = useHMSStore35(selectLocalPeerRoleName3);
+  const roleChangeRequest = useHMSStore35(selectRoleChangeRequest);
+  const name = useHMSStore35(selectLocalPeerName);
   const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
-  useEffect23(() => {
+  useEffect24(() => {
     if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
       return;
     }
-    hmsActions.preview({ asRole: roleChangeRequest.role.name });
-  }, [hmsActions, roleChangeRequest]);
+    (() => __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;
   }
@@ -5589,12 +5644,12 @@ var Conference = () => {
   const { userName, endpoints } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore37(selectRoomState);
+  const roomState = useHMSStore36(selectRoomState);
   const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore37(selectIsConnectedToRoom7);
+  const isConnectedToRoom = useHMSStore36(selectIsConnectedToRoom7);
   const hmsActions = useHMSActions22();
   const [hideControls, setHideControls] = useState35(false);
-  const dropdownList = useHMSStore37(selectAppData4(APP_DATA.dropdownList));
+  const dropdownList = useHMSStore36(selectAppData4(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef14();
   const footerRef = useRef14();
@@ -5607,7 +5662,8 @@ var Conference = () => {
       setHideControls((value) => !value);
     }
   };
-  useEffect24(() => {
+  const autoRoomJoined = useRef14(isPreviewScreenEnabled);
+  useEffect25(() => {
     let timeout = null;
     dropdownListRef.current = dropdownList || [];
     if (dropdownListRef.current.length === 0) {
@@ -5622,7 +5678,7 @@ var Conference = () => {
       clearTimeout(timeout);
     };
   }, [dropdownList, hideControls, isMobileDevice]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!roomId) {
       navigate(`/`);
       return;
@@ -5637,8 +5693,8 @@ var Conference = () => {
         navigate(`/preview/${roomId || ""}`);
     }
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-  useEffect24(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
+  useEffect25(() => {
+    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting && !autoRoomJoined.current) {
       hmsActions.join({
         userName,
         authToken: authTokenInAppData,
@@ -5649,9 +5705,10 @@ var Conference = () => {
           speakerAutoSelectionBlacklist: ["Yeti Stereo Microphone"]
         }
       }).catch(console.error);
+      autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-  useEffect24(() => {
+  useEffect25(() => {
     return () => {
       PictureInPicture.stop().catch((error) => console.error("stopping pip", error));
     };
@@ -5724,4 +5781,4 @@ var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-UWLJHMB2.js.map
+//# sourceMappingURL=conference-MPZNWHV5.js.map