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

package/dist/{conference-6IVZHILI.js → conference-JD35TNH4.js}

@@ -1,14 +1,16 @@
 import {
   ActionTile
-} from "./chunk-JSH7SKEH.js";
+} from "./chunk-2H5NIZB7.js";
 import {
   APP_DATA,
   Accordion,
+  AudioLevel,
   AudioVideoToggle,
+  Avatar,
   Button,
   CHAT_SELECTOR,
-  ChangeNameModal,
   Checkbox,
+  Chip_default,
   ConnectionIndicator,
   Dialog,
   DialogCol,
@@ -27,8 +29,10 @@ import {
   Label,
   PictureInPicture,
   Popover,
+  PrebuiltDialogPortal,
   PreviewControls,
   PreviewTile,
+  REMOTE_STOP_SCREENSHARE_TYPE,
   ROLE_CHANGE_DECLINED,
   RTMP_RECORD_DEFAULT_RESOLUTION,
   RTMP_RECORD_RESOLUTION_MAX,
@@ -38,22 +42,22 @@ import {
   SIDE_PANE_OPTIONS,
   SettingsModal_default,
   Sheet,
+  Slider,
   StopRecordingInSheet,
+  StyledMenuTile,
   StyledPagination,
   StyledVideoTile,
   Switch,
   Tabs,
   ThemeTypes,
-  TileMenu_default,
+  TileConnection_default,
   ToastManager,
   UI_SETTINGS,
   UserPreferencesKeys,
   Video,
   VideoTileStats,
-  VideoTile_default,
   getFormattedCount,
   getMetadata,
-  getVideoTileLabel,
   isAndroid,
   isChrome,
   isIOS,
@@ -61,7 +65,6 @@ import {
   isMacOS,
   isScreenshareSupported,
   useAuthToken,
-  useDropdownList,
   useDropdownSelection,
   useFilteredRoles,
   useHMSPrebuiltContext,
@@ -83,7 +86,7 @@ import {
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-CDYRVICT.js";
+} from "./chunk-GLYGPYNS.js";
 import {
   Box,
   Flex,
@@ -102,10 +105,10 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-U3G743OY.js";
+} from "./chunk-Z3O2WGWV.js";
 
 // src/Prebuilt/components/conference.jsx
-import React62, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
+import React68, { useEffect as useEffect27, useRef as useRef16, useState as useState39 } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
@@ -113,13 +116,13 @@ import {
   selectAppData as selectAppData4,
   selectIsConnectedToRoom as selectIsConnectedToRoom7,
   selectRoomState,
-  useHMSActions as useHMSActions23,
-  useHMSStore as useHMSStore36
+  useHMSActions as useHMSActions25,
+  useHMSStore as useHMSStore39
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Footer/Footer.tsx
-import React36, { Suspense, useEffect as useEffect6 } from "react";
-import { useMedia as useMedia5 } from "react-use";
+import React38, { Suspense, useEffect as useEffect8 } from "react";
+import { useMedia as useMedia6 } from "react-use";
 import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
 import { useAVToggle as useAVToggle2 } from "@100mslive/react-sdk";
 
@@ -159,6 +162,26 @@ var EmojiContainer = styled("span", {
   }
 });
 
+// src/Prebuilt/components/hooks/useDropdownList.jsx
+import { useEffect } from "react";
+var useDropdownList = ({ name, open }) => {
+  const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
+  useEffect(() => {
+    if (open) {
+      if (!dropdownList.includes(name)) {
+        setDropdownList([...dropdownList, name]);
+      }
+    } else {
+      const index = dropdownList.indexOf(name);
+      if (index >= 0) {
+        const newDropdownList = [...dropdownList];
+        newDropdownList.splice(index, 1);
+        setDropdownList(newDropdownList);
+      }
+    }
+  }, [open, name]);
+};
+
 // src/Prebuilt/components/EmojiReaction.jsx
 init({ data });
 var EmojiReaction = () => {
@@ -345,11 +368,12 @@ var DesktopLeaveRoom = ({
   const permissions = useHMSStore2(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
+  const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Fragment2, null, screenType !== "hls_live_streaming" && ((permissions == null ? void 0 : permissions.hlsStreaming) || (permissions == null ? void 0 : permissions.endRoom)) ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(Fragment2, null, showLeaveOptions ? /* @__PURE__ */ React6.createElement(Flex, null, /* @__PURE__ */ React6.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -358,9 +382,7 @@ var DesktopLeaveRoom = ({
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0
       },
-      onClick: () => {
-        leaveRoom({ endstream: false });
-      }
+      onClick: () => setShowLeaveRoomAlert(true)
     },
     /* @__PURE__ */ React6.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React6.createElement(Box, null, /* @__PURE__ */ React6.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
   ), /* @__PURE__ */ React6.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React6.createElement(
@@ -379,7 +401,7 @@ var DesktopLeaveRoom = ({
     {
       css: {
         bg: "$surface_dim",
-        color: "$on_surface_low",
+        color: "$on_surface_medium",
         "&:hover": { bg: "$surface_default", color: "$on_surface_high" }
       },
       onClick: () => leaveRoom({ endstream: false }),
@@ -397,7 +419,7 @@ var DesktopLeaveRoom = ({
         css: { p: 0 }
       }
     )
-  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     Dropdown.Item,
     {
       css: {
@@ -422,21 +444,17 @@ var DesktopLeaveRoom = ({
         css: { p: 0 }
       }
     )
-  ) : null))) : /* @__PURE__ */ React6.createElement(
+  )))) : /* @__PURE__ */ React6.createElement(
     LeaveIconButton,
     {
       onClick: () => {
-        if (screenType === "hls_live_streaming") {
-          setShowLeaveRoomAlert(true);
-        } else {
-          leaveRoom({ endstream: false });
-        }
+        setShowLeaveRoomAlert(true);
       },
       key: "LeaveRoom",
       "data-testid": "leave_room_btn"
     },
     /* @__PURE__ */ React6.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React6.createElement(Box, null, /* @__PURE__ */ React6.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React6.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ React6.createElement(Dialog.Portal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React6.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ React6.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React6.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
@@ -444,7 +462,7 @@ var DesktopLeaveRoom = ({
       isStreamingOn,
       isModal: true
     }
-  )))), screenType === "hls_live_streaming" ? /* @__PURE__ */ React6.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React6.createElement(Dialog.Portal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React6.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))) : null);
+  )))), /* @__PURE__ */ React6.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React6.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React6.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
 };
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
@@ -463,11 +481,12 @@ var MwebLeaveRoom = ({
   const permissions = useHMSStore3(selectPermissions2);
   const { isStreamingOn } = useRecordingStreaming2();
   const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
+  const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
   useDropdownList({ open, name: "LeaveRoom" });
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Fragment3, null, screenType !== "hls_live_streaming" ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(Fragment3, null, showLeaveOptions ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React7.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React7.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -489,7 +508,7 @@ var MwebLeaveRoom = ({
       onClick: () => leaveRoom({ endstream: false }),
       css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
     }
-  ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     LeaveCard,
     {
       title: showStream ? "End Stream" : "End Session",
@@ -503,28 +522,14 @@ var MwebLeaveRoom = ({
         setShowEndStreamAlert(true);
       }
     }
-  ) : null)) : /* @__PURE__ */ React7.createElement(
-    LeaveIconButton,
-    {
-      key: "LeaveRoom",
-      "data-testid": "leave_room_btn",
-      onClick: () => {
-        if (screenType === "hls_live_streaming") {
-          setShowLeaveRoomAlert(true);
-        } else {
-          leaveRoom({ endstream: false });
-        }
-      }
-    },
-    /* @__PURE__ */ React7.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(
+  ))) : /* @__PURE__ */ React7.createElement(LeaveIconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => setShowLeaveRoomAlert(true) }, /* @__PURE__ */ React7.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))), /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
       leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn
     }
-  ))), screenType === "hls_live_streaming" ? /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))) : null);
+  ))), /* @__PURE__ */ React7.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React7.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React7.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
@@ -571,8 +576,8 @@ var LeaveRoom = ({ screenType }) => {
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
-import React23 from "react";
-import { useMedia as useMedia3 } from "react-use";
+import React25 from "react";
+import { useMedia as useMedia4 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
 import React21, { Fragment as Fragment4, useState as useState13 } from "react";
@@ -584,7 +589,7 @@ import { BrbIcon, CheckIcon as CheckIcon3, DragHandleIcon, InfoIcon as InfoIcon2
 import React10 from "react";
 
 // src/Prebuilt/components/PIP/PIPComponent.jsx
-import React9, { useCallback, useEffect, useState as useState4 } from "react";
+import React9, { useCallback, useEffect as useEffect2, useState as useState4 } from "react";
 import { selectPeers, selectTracksMap, useHMSActions as useHMSActions2, useHMSStore as useHMSStore5, useHMSVanillaStore } from "@100mslive/react-sdk";
 import { PipIcon } from "@100mslive/react-icons";
 
@@ -664,7 +669,7 @@ var ActivatedPIP = () => {
   const tracksMap = useHMSStore5(selectTracksMap);
   const storePeers = useHMSStore5(selectPeers);
   const pinnedTrack = usePinnedTrack();
-  useEffect(() => {
+  useEffect2(() => {
     function updatePIP() {
       if (!PictureInPicture.isOn()) {
         return;
@@ -725,7 +730,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
     return null;
   }
   const peerNameMaxWidth = 200;
-  return /* @__PURE__ */ React11.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React11.createElement(Dialog.Portal, null, /* @__PURE__ */ React11.createElement(Dialog.Overlay, null), /* @__PURE__ */ React11.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React11.createElement(Dialog.Title, { css: { p: 0 }, asChild: true }, /* @__PURE__ */ React11.createElement(Text, { as: "h6", variant: "h6" }, "Change Role")), /* @__PURE__ */ React11.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React11.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React11.createElement(Dialog.Overlay, null), /* @__PURE__ */ React11.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React11.createElement(Dialog.Title, { css: { p: 0 }, asChild: true }, /* @__PURE__ */ React11.createElement(Text, { as: "h6", variant: "h6" }, "Change Role")), /* @__PURE__ */ React11.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React11.createElement(
     Text,
     {
       variant: "body2",
@@ -891,7 +896,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId
 };
 
 // src/Prebuilt/components/Streaming/RTMPStreaming.jsx
-import React14, { useEffect as useEffect2, useRef as useRef2, useState as useState7 } from "react";
+import React14, { useEffect as useEffect3, useRef as useRef2, useState as useState7 } from "react";
 import { useHMSActions as useHMSActions4, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { AddCircleIcon, EndStreamIcon, GoLiveIcon, PencilIcon, SettingsIcon, TrashIcon } from "@100mslive/react-icons";
 
@@ -1104,7 +1109,7 @@ var EndRTMP = () => {
   const [inProgress, setInProgress] = useState7(false);
   const [error, setError] = useState7("");
   const { isRTMPRunning } = useRecordingStreaming3();
-  useEffect2(() => {
+  useEffect3(() => {
     if (inProgress && !isRTMPRunning) {
       setInProgress(false);
     }
@@ -1258,7 +1263,7 @@ var StartRecording = ({ open, onOpenChange }) => {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React15.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React15.createElement(Dialog.Portal, null, /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React15.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React15.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React15.createElement(
       Dialog.Content,
       {
         css: {
@@ -1337,7 +1342,7 @@ var StartRecording = ({ open, onOpenChange }) => {
 var StartRecording_default = StartRecording;
 
 // src/Prebuilt/components/StatsForNerds.jsx
-import React16, { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState9 } from "react";
+import React16, { useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState9 } from "react";
 import {
   selectHMSStats,
   selectLocalPeerID as selectLocalPeerID2,
@@ -1358,12 +1363,12 @@ var StatsForNerds = ({ onOpenChange }) => {
   const [open, setOpen] = useState9(false);
   const ref = useRef3();
   const selectionBg = useDropdownSelection();
-  useEffect3(() => {
+  useEffect4(() => {
     if (selectedStat.id !== "local-peer" && !tracksWithLabels.find((track) => track.id === selectedStat.id)) {
       setSelectedStat("local-peer");
     }
   }, [tracksWithLabels, selectedStat]);
-  return /* @__PURE__ */ React16.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React16.createElement(Dialog.Portal, null, /* @__PURE__ */ React16.createElement(Dialog.Overlay, null), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React16.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React16.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React16.createElement(Dialog.Overlay, null), /* @__PURE__ */ React16.createElement(
     Dialog.Content,
     {
       css: {
@@ -1622,7 +1627,7 @@ import React18 from "react";
 import { ExpandIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useFullscreen.js
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState11 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState11 } from "react";
 import screenfull from "screenfull";
 var useFullscreen = () => {
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState11(screenfull.isFullscreen);
@@ -1641,7 +1646,7 @@ var useFullscreen = () => {
       ToastManager.addToast({ title: err.message });
     }
   }), [isFullScreenEnabled]);
-  useEffect4(() => {
+  useEffect5(() => {
     const onChange = () => {
       setIsFullScreenEnabled(screenfull.isFullscreen);
     };
@@ -1875,20 +1880,20 @@ var DesktopOptions = ({
 };
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
-import React22, { useRef as useRef5, useState as useState14 } from "react";
+import React24, { useRef as useRef5, useState as useState15 } from "react";
 import { useClickAway } from "react-use";
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPeerCount,
   selectPermissions as selectPermissions6,
   useAVToggle,
-  useHMSActions as useHMSActions9,
-  useHMSStore as useHMSStore11,
+  useHMSActions as useHMSActions10,
+  useHMSStore as useHMSStore12,
   useRecordingStreaming as useRecordingStreaming5
 } from "@100mslive/react-sdk";
 import {
   BrbIcon as BrbIcon2,
-  CrossIcon as CrossIcon4,
+  CrossIcon as CrossIcon5,
   DragHandleIcon as DragHandleIcon2,
   EmojiIcon as EmojiIcon2,
   HandIcon,
@@ -1897,6 +1902,161 @@ import {
   RecordIcon as RecordIcon2,
   SettingsIcon as SettingsIcon3
 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
+import React23, { useState as useState14 } from "react";
+import { useMedia as useMedia3 } from "react-use";
+import { selectLocalPeerName, useHMSActions as useHMSActions9, useHMSStore as useHMSStore11 } from "@100mslive/react-sdk";
+
+// src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
+import React22 from "react";
+import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon4 } from "@100mslive/react-icons";
+var ChangeNameContent = ({
+  changeName,
+  setCurrentName,
+  currentName,
+  localPeerName,
+  isMobile,
+  onExit,
+  onBackClick
+}) => {
+  return /* @__PURE__ */ React22.createElement(
+    "form",
+    {
+      onSubmit: (e) => __async(void 0, null, function* () {
+        e.preventDefault();
+        yield changeName();
+      })
+    },
+    /* @__PURE__ */ React22.createElement(
+      Text,
+      {
+        variant: isMobile ? "md" : "lg",
+        css: {
+          color: "$on_surface_high",
+          fontWeight: "$semiBold",
+          display: "flex",
+          pb: "$4",
+          "@md": { px: "$8", borderBottom: "1px solid $border_default" }
+        }
+      },
+      isMobile ? /* @__PURE__ */ React22.createElement(ChevronLeftIcon2, { onClick: onBackClick, style: { marginRight: "0.5rem" } }) : null,
+      "Change Name",
+      /* @__PURE__ */ React22.createElement(
+        Box,
+        {
+          css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
+          onClick: onExit
+        },
+        /* @__PURE__ */ React22.createElement(CrossIcon4, null)
+      )
+    ),
+    /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$6", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "Your name will be visible to other participants in the session."),
+    /* @__PURE__ */ React22.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%", "@md": { px: "$8" } } }, /* @__PURE__ */ React22.createElement(
+      Input,
+      {
+        css: { width: "100%", bg: "$surface_default" },
+        value: currentName,
+        type: isMobile ? "search" : "text",
+        onChange: (e) => {
+          setCurrentName(e.target.value);
+        },
+        autoComplete: "name",
+        required: true,
+        "data-testid": "change_name_field",
+        onKeyDown: (e) => __async(void 0, null, function* () {
+          if (e.key === "Enter" && currentName.trim().length > 0 && currentName !== localPeerName) {
+            e.preventDefault();
+            if (isMobile) {
+              return;
+            }
+            changeName();
+          }
+        })
+      }
+    )),
+    /* @__PURE__ */ React22.createElement(
+      Flex,
+      {
+        justify: "between",
+        align: "center",
+        css: {
+          width: "100%",
+          gap: "$md",
+          mt: "$10",
+          "@md": { px: "$4" }
+        }
+      },
+      isMobile ? null : /* @__PURE__ */ React22.createElement(
+        Button,
+        {
+          variant: "standard",
+          css: { w: "100%" },
+          outlined: true,
+          type: "submit",
+          disabled: !localPeerName,
+          onClick: onExit
+        },
+        "Cancel"
+      ),
+      /* @__PURE__ */ React22.createElement(
+        Button,
+        {
+          variant: "primary",
+          css: { width: "100%" },
+          type: "submit",
+          disabled: !currentName.trim() || currentName.trim() === localPeerName,
+          "data-testid": "popup_change_btn"
+        },
+        "Change"
+      )
+    )
+  );
+};
+
+// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
+var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
+  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
+  const hmsActions = useHMSActions9();
+  const localPeerName = useHMSStore11(selectLocalPeerName);
+  const [currentName, setCurrentName] = useState14(localPeerName);
+  const isMobile = useMedia3(config.media.md);
+  const changeName = () => __async(void 0, null, function* () {
+    const name = currentName.trim();
+    if (!name || name === localPeerName) {
+      return;
+    }
+    try {
+      yield hmsActions.changeName(name);
+      setPreviewPreference(__spreadProps(__spreadValues({}, previewPreference || {}), {
+        name
+      }));
+    } catch (error) {
+      console.error("failed to update name", error);
+      ToastManager.addToast({ title: error.message });
+    } finally {
+      onOpenChange(false);
+    }
+  });
+  const props = {
+    changeName,
+    setCurrentName,
+    currentName,
+    localPeerName,
+    isMobile,
+    onExit: () => onOpenChange(false),
+    onBackClick: () => {
+      onOpenChange(false);
+      openParentSheet();
+    }
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ React23.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React23.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ React23.createElement(ChangeNameContent, __spreadValues({}, props))));
+  }
+  return /* @__PURE__ */ React23.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React23.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React23.createElement(Dialog.Overlay, null), /* @__PURE__ */ React23.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React23.createElement(ChangeNameContent, __spreadValues({}, props)))));
+};
+
+// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
 var MODALS2 = {
   CHANGE_NAME: "changeName",
   SELF_ROLE_CHANGE: "selfRoleChange",
@@ -1912,18 +2072,18 @@ var MwebOptions = ({
   elements,
   screenType
 }) => {
-  const hmsActions = useHMSActions9();
-  const permissions = useHMSStore11(selectPermissions6);
-  const isConnected = useHMSStore11(selectIsConnectedToRoom5);
+  const hmsActions = useHMSActions10();
+  const permissions = useHMSStore12(selectPermissions6);
+  const isConnected = useHMSStore12(selectIsConnectedToRoom5);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming5();
-  const [openModals, setOpenModals] = useState14(/* @__PURE__ */ new Set());
-  const [openOptionsSheet, setOpenOptionsSheet] = useState14(false);
-  const [openSettingsSheet, setOpenSettingsSheet] = useState14(false);
-  const [showEmojiCard, setShowEmojiCard] = useState14(false);
-  const [showRecordingOn, setShowRecordingOn] = useState14(false);
-  const [isRecordingLoading, setIsRecordingLoading] = useState14(false);
+  const [openModals, setOpenModals] = useState15(/* @__PURE__ */ new Set());
+  const [openOptionsSheet, setOpenOptionsSheet] = useState15(false);
+  const [openSettingsSheet, setOpenSettingsSheet] = useState15(false);
+  const [showEmojiCard, setShowEmojiCard] = useState15(false);
+  const [showRecordingOn, setShowRecordingOn] = useState15(false);
+  const [isRecordingLoading, setIsRecordingLoading] = useState15(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const peerCount = useHMSStore11(selectPeerCount);
+  const peerCount = useHMSStore12(selectPeerCount);
   const emojiCardRef = useRef5(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
   const { toggleAudio, toggleVideo } = useAVToggle();
@@ -1941,7 +2101,7 @@ var MwebOptions = ({
     });
   };
   useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React22.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React22.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React22.createElement(IconButton_default, null, /* @__PURE__ */ React22.createElement(DragHandleIcon2, null)))), /* @__PURE__ */ React22.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React24.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React24.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React24.createElement(IconButton_default, null, /* @__PURE__ */ React24.createElement(DragHandleIcon2, null)))), /* @__PURE__ */ React24.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React24.createElement(
     Sheet.Title,
     {
       css: {
@@ -1959,8 +2119,8 @@ var MwebOptions = ({
       }
     },
     "Options",
-    /* @__PURE__ */ React22.createElement(Sheet.Close, null, /* @__PURE__ */ React22.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React22.createElement(CrossIcon4, null)))
-  ), /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(Sheet.Close, null, /* @__PURE__ */ React24.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React24.createElement(CrossIcon5, null)))
+  ), /* @__PURE__ */ React24.createElement(
     Box,
     {
       css: {
@@ -1972,7 +2132,7 @@ var MwebOptions = ({
         px: "$9"
       }
     },
-    (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React22.createElement(
+    (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React24.createElement(
       ActionTile.Root,
       {
         onClick: () => {
@@ -1980,11 +2140,11 @@ var MwebOptions = ({
           setOpenOptionsSheet(false);
         }
       },
-      /* @__PURE__ */ React22.createElement(ActionTile.Count, null, getFormattedCount(peerCount)),
-      /* @__PURE__ */ React22.createElement(PeopleIcon, null),
-      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Participants")
+      /* @__PURE__ */ React24.createElement(ActionTile.Count, null, getFormattedCount(peerCount)),
+      /* @__PURE__ */ React24.createElement(PeopleIcon, null),
+      /* @__PURE__ */ React24.createElement(ActionTile.Title, null, "Participants")
     ),
-    !noAVPermissions ? /* @__PURE__ */ React22.createElement(
+    !noAVPermissions ? /* @__PURE__ */ React24.createElement(
       ActionTile.Root,
       {
         active: isHandRaised,
@@ -1993,10 +2153,10 @@ var MwebOptions = ({
           setOpenOptionsSheet(false);
         }
       },
-      isHandRaised ? /* @__PURE__ */ React22.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React22.createElement(HandIcon, null),
-      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
+      isHandRaised ? /* @__PURE__ */ React24.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React24.createElement(HandIcon, null),
+      /* @__PURE__ */ React24.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
     ) : null,
-    (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React22.createElement(
+    (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React24.createElement(
       ActionTile.Root,
       {
         onClick: () => {
@@ -2004,10 +2164,10 @@ var MwebOptions = ({
           setOpenOptionsSheet(false);
         }
       },
-      /* @__PURE__ */ React22.createElement(EmojiIcon2, null),
-      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Emoji Reactions")
+      /* @__PURE__ */ React24.createElement(EmojiIcon2, null),
+      /* @__PURE__ */ React24.createElement(ActionTile.Title, null, "Emoji Reactions")
     ),
-    (elements == null ? void 0 : elements.brb) && /* @__PURE__ */ React22.createElement(
+    (elements == null ? void 0 : elements.brb) && /* @__PURE__ */ React24.createElement(
       ActionTile.Root,
       {
         active: isBRBOn,
@@ -2016,10 +2176,10 @@ var MwebOptions = ({
           setOpenOptionsSheet(false);
         }
       },
-      /* @__PURE__ */ React22.createElement(BrbIcon2, null),
-      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Be Right Back")
+      /* @__PURE__ */ React24.createElement(BrbIcon2, null),
+      /* @__PURE__ */ React24.createElement(ActionTile.Title, null, "Be Right Back")
     ),
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(
       ActionTile.Root,
       {
         onClick: () => {
@@ -2027,10 +2187,10 @@ var MwebOptions = ({
           setOpenOptionsSheet(false);
         }
       },
-      /* @__PURE__ */ React22.createElement(SettingsIcon3, null),
-      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Settings")
+      /* @__PURE__ */ React24.createElement(SettingsIcon3, null),
+      /* @__PURE__ */ React24.createElement(ActionTile.Title, null, "Settings")
     ),
-    isConnected && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React22.createElement(
+    isConnected && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React24.createElement(
       ActionTile.Root,
       {
         disabled: isHLSRunning,
@@ -2070,16 +2230,16 @@ 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")
+      isRecordingLoading ? /* @__PURE__ */ React24.createElement(Loading, null) : /* @__PURE__ */ React24.createElement(RecordIcon2, null),
+      /* @__PURE__ */ React24.createElement(ActionTile.Title, null, isBrowserRecordingOn ? "Recording On" : isRecordingLoading ? "Starting Recording" : "Start Recording")
     ) : null
-  ))), /* @__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(
+  ))), /* @__PURE__ */ React24.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet, screenType }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React24.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React24.createElement(
     ChangeNameModal,
     {
       onOpenChange: (value) => updateState(MODALS2.CHANGE_NAME, value),
       openParentSheet: () => setOpenOptionsSheet(true)
     }
-  ), showEmojiCard && /* @__PURE__ */ React22.createElement(
+  ), showEmojiCard && /* @__PURE__ */ React24.createElement(
     Box,
     {
       ref: emojiCardRef,
@@ -2098,8 +2258,8 @@ var MwebOptions = ({
         mx: "$4"
       }
     },
-    /* @__PURE__ */ React22.createElement(EmojiReaction, null)
-  ), showRecordingOn && /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(EmojiReaction, null)
+  ), showRecordingOn && /* @__PURE__ */ React24.createElement(
     StopRecordingInSheet,
     {
       onClose: () => setShowRecordingOn(false),
@@ -2124,37 +2284,27 @@ var MoreSettings = ({
   elements,
   screenType
 }) => {
-  const isMobile = useMedia3(config.media.md);
-  return isMobile ? /* @__PURE__ */ React23.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React23.createElement(DesktopOptions, { elements, screenType });
+  const isMobile = useMedia4(config.media.md);
+  return isMobile ? /* @__PURE__ */ React25.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React25.createElement(DesktopOptions, { elements, screenType });
 };
 
 // src/Prebuilt/components/RaiseHand.jsx
-import React24 from "react";
-import { selectHasPeerHandRaised, selectLocalPeerID as selectLocalPeerID4, useHMSActions as useHMSActions10, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
+import React26 from "react";
 import { HandIcon as HandIcon2 } from "@100mslive/react-icons";
 var RaiseHand = () => {
-  const localPeerId = useHMSStore12(selectLocalPeerID4);
-  const isHandRaised = useHMSStore12(selectHasPeerHandRaised(localPeerId));
-  const actions = useHMSActions10();
-  return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(
-    IconButton_default,
-    {
-      active: !isHandRaised,
-      onClick: () => {
-        isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
-      }
-    },
-    /* @__PURE__ */ React24.createElement(HandIcon2, null)
-  ));
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
+  return /* @__PURE__ */ React26.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React26.createElement(IconButton_default, { active: !isHandRaised, onClick: () => __async(void 0, null, function* () {
+    return yield toggleHandRaise();
+  }) }, /* @__PURE__ */ React26.createElement(HandIcon2, null)));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
-import React31, { Fragment as Fragment6 } from "react";
+import React33, { Fragment as Fragment6 } from "react";
 import { selectIsAllowedToPublish, useHMSStore as useHMSStore13, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
 import { ShareScreenIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
-import React30, { Fragment as Fragment5, useState as useState16 } from "react";
+import React32, { Fragment as Fragment5, useState as useState17 } from "react";
 import { useScreenShare } from "@100mslive/react-sdk";
 import { StarIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
@@ -2190,12 +2340,12 @@ var ShareMenuIcon = styled(ScreenShareButton, {
 });
 
 // src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
-import React29, { useState as useState15 } from "react";
+import React31, { useState as useState16 } from "react";
 
 // src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx
-import React25 from "react";
+import React27 from "react";
 var PDFHeader = () => {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     DialogCol,
     {
       align: "start",
@@ -2204,8 +2354,8 @@ var PDFHeader = () => {
         mb: "$6"
       }
     },
-    /* @__PURE__ */ React25.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React25.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
-    /* @__PURE__ */ React25.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React27.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React27.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
+    /* @__PURE__ */ React27.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React27.createElement(
       Text,
       {
         variant: "sm",
@@ -2219,10 +2369,10 @@ var PDFHeader = () => {
 };
 
 // src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
-import React26 from "react";
+import React28 from "react";
 var SubmitPDF = ({ pdfFile, onOpenChange }) => {
   const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React28.createElement(
     Flex,
     {
       direction: "row",
@@ -2232,7 +2382,7 @@ var SubmitPDF = ({ pdfFile, onOpenChange }) => {
         gap: "$8"
       }
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(
       Button,
       {
         variant: "standard",
@@ -2245,7 +2395,7 @@ var SubmitPDF = ({ pdfFile, onOpenChange }) => {
       },
       "Cancel"
     ),
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(
       Button,
       {
         variant: "primary",
@@ -2268,14 +2418,14 @@ var SubmitPDF = ({ pdfFile, onOpenChange }) => {
 };
 
 // src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
-import React28 from "react";
+import React30 from "react";
 import { TrashIcon as TrashIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx
-import React27 from "react";
+import React29 from "react";
 import { InfoIcon as InfoIcon3 } from "@100mslive/react-icons";
 var PDFInfo = () => {
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React29.createElement(
     DialogRow,
     {
       css: {
@@ -2288,7 +2438,7 @@ var PDFInfo = () => {
         minHeight: "$11"
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React29.createElement(
       InfoIcon3,
       {
         width: "64px",
@@ -2298,14 +2448,14 @@ var PDFInfo = () => {
         }
       }
     ),
-    /* @__PURE__ */ React27.createElement(Text, { variant: "caption" }, "On the next screen, ensure you select \u201CThis Tab\u201D and click on share. Only the PDF viewer will be seen by other participants")
+    /* @__PURE__ */ React29.createElement(Text, { variant: "caption" }, "On the next screen, ensure you select \u201CThis Tab\u201D and click on share. Only the PDF viewer will be seen by other participants")
   );
 };
 
 // src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
 var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split(".");
-  return /* @__PURE__ */ React28.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React28.createElement(Dialog.Portal, null, /* @__PURE__ */ React28.createElement(Dialog.Overlay, null), /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React30.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React30.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React30.createElement(Dialog.Overlay, null), /* @__PURE__ */ React30.createElement(
     Dialog.Content,
     {
       css: {
@@ -2315,7 +2465,7 @@ var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
         bg: "$surface_dim"
       }
     },
-    /* @__PURE__ */ React28.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React28.createElement(PDFHeader, null), /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React30.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React30.createElement(PDFHeader, null), /* @__PURE__ */ React30.createElement(
       DialogRow,
       {
         css: {
@@ -2337,7 +2487,7 @@ var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
           mt: "$6"
         }
       },
-      /* @__PURE__ */ React28.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React30.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React30.createElement(
         Text,
         {
           css: {
@@ -2347,8 +2497,8 @@ var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
           }
         },
         fileName
-      ), /* @__PURE__ */ React28.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
-      /* @__PURE__ */ React28.createElement(
+      ), /* @__PURE__ */ React30.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
+      /* @__PURE__ */ React30.createElement(
         TrashIcon2,
         {
           onClick: () => setPDFFile(null),
@@ -2357,14 +2507,14 @@ var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
           }
         }
       )
-    ), /* @__PURE__ */ React28.createElement(PDFInfo, null), /* @__PURE__ */ React28.createElement(SubmitPDF, { pdfFile, onOpenChange }))
+    ), /* @__PURE__ */ React30.createElement(PDFInfo, null), /* @__PURE__ */ React30.createElement(SubmitPDF, { pdfFile, onOpenChange }))
   )));
 };
 
 // src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
 function PDFFileOptions({ onOpenChange }) {
-  const [pdfFile, setPDFFile] = useState15(null);
-  return !pdfFile ? /* @__PURE__ */ React29.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React29.createElement(Dialog.Portal, null, /* @__PURE__ */ React29.createElement(Dialog.Overlay, null), /* @__PURE__ */ React29.createElement(
+  const [pdfFile, setPDFFile] = useState16(null);
+  return !pdfFile ? /* @__PURE__ */ React31.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React31.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React31.createElement(Dialog.Overlay, null), /* @__PURE__ */ React31.createElement(
     Dialog.Content,
     {
       css: {
@@ -2374,7 +2524,7 @@ function PDFFileOptions({ onOpenChange }) {
         bg: "$surface_dim"
       }
     },
-    /* @__PURE__ */ React29.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React29.createElement(PDFHeader, null), /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React31.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React31.createElement(PDFHeader, null), /* @__PURE__ */ React31.createElement(
       DialogInputFile,
       {
         onChange: (target) => {
@@ -2384,8 +2534,8 @@ function PDFFileOptions({ onOpenChange }) {
         type: "file",
         accept: ".pdf"
       }
-    ), /* @__PURE__ */ React29.createElement(SubmitPDF, { pdfFile, onOpenChange }))
-  ))) : /* @__PURE__ */ React29.createElement(UploadedFile, { pdfFile, setPDFFile, onOpenChange });
+    ), /* @__PURE__ */ React31.createElement(SubmitPDF, { pdfFile, onOpenChange }))
+  ))) : /* @__PURE__ */ React31.createElement(UploadedFile, { pdfFile, setPDFFile, onOpenChange });
 }
 
 // src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
@@ -2395,7 +2545,7 @@ var MODALS3 = {
   PDF_SHARE: "pdfShare"
 };
 function ShareScreenOptions() {
-  const [openModals, setOpenModals] = useState16(/* @__PURE__ */ new Set());
+  const [openModals, setOpenModals] = useState17(/* @__PURE__ */ new Set());
   const { amIScreenSharing } = useScreenShare();
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -2409,15 +2559,15 @@ function ShareScreenOptions() {
     });
   };
   const { toggleScreenShare } = useScreenShare();
-  return /* @__PURE__ */ React30.createElement(Fragment5, null, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(Fragment5, null, /* @__PURE__ */ React32.createElement(
     Dropdown.Root,
     {
       open: openModals.has(MODALS3.SHARE),
       onOpenChange: (value) => updateState(MODALS3.SHARE, value),
       modal: false
     },
-    /* @__PURE__ */ React30.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React30.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React30.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React30.createElement(Box, null, /* @__PURE__ */ React30.createElement(VerticalMenuIcon2, null))))),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React32.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React32.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React32.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(VerticalMenuIcon2, null))))),
+    /* @__PURE__ */ React32.createElement(
       Dropdown.Content,
       {
         sideOffset: 5,
@@ -2428,7 +2578,7 @@ function ShareScreenOptions() {
           bg: "$surface_dim"
         }
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React32.createElement(
         Dropdown.Item,
         {
           css: {
@@ -2443,10 +2593,10 @@ function ShareScreenOptions() {
             }
           }
         },
-        /* @__PURE__ */ React30.createElement(Text, { variant: "h6" }, "Start Sharing"),
-        /* @__PURE__ */ React30.createElement(Text, { variant: "sm" }, "Choose what you want to share")
+        /* @__PURE__ */ React32.createElement(Text, { variant: "h6" }, "Start Sharing"),
+        /* @__PURE__ */ React32.createElement(Text, { variant: "sm" }, "Choose what you want to share")
       ),
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React32.createElement(
         Dropdown.Item,
         {
           css: {
@@ -2454,14 +2604,15 @@ function ShareScreenOptions() {
             alignItems: "flex-start",
             gap: "$8",
             px: "$10",
-            py: "$6",
+            pt: "$6",
+            pb: "$10",
             "&:hover": {
               bg: "$transparent",
               cursor: "default"
             }
           }
         },
-        /* @__PURE__ */ React30.createElement(
+        /* @__PURE__ */ React32.createElement(
           Flex,
           {
             direction: "column",
@@ -2470,7 +2621,7 @@ function ShareScreenOptions() {
               gap: "$6"
             }
           },
-          /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React32.createElement(
             IconButton,
             {
               as: "div",
@@ -2485,7 +2636,7 @@ function ShareScreenOptions() {
                 pb: "0"
               }
             },
-            /* @__PURE__ */ React30.createElement(
+            /* @__PURE__ */ React32.createElement(
               "img",
               {
                 src: screen_share_default,
@@ -2500,7 +2651,7 @@ function ShareScreenOptions() {
               }
             )
           ),
-          /* @__PURE__ */ React30.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React30.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React32.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React32.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React32.createElement(
             Text,
             {
               variant: "caption",
@@ -2512,7 +2663,7 @@ function ShareScreenOptions() {
             "Share your tab, window or your entire screen"
           ))
         ),
-        /* @__PURE__ */ React30.createElement(
+        /* @__PURE__ */ React32.createElement(
           Flex,
           {
             direction: "column",
@@ -2521,7 +2672,7 @@ function ShareScreenOptions() {
               gap: "$6"
             }
           },
-          /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React32.createElement(
             IconButton,
             {
               onClick: () => {
@@ -2538,7 +2689,7 @@ function ShareScreenOptions() {
                 pb: "0"
               }
             },
-            /* @__PURE__ */ React30.createElement(
+            /* @__PURE__ */ React32.createElement(
               "img",
               {
                 src: pdf_share_default,
@@ -2552,14 +2703,14 @@ function ShareScreenOptions() {
                 }
               }
             ),
-            /* @__PURE__ */ React30.createElement(
+            /* @__PURE__ */ React32.createElement(
               Flex,
               {
                 direction: "row",
                 align: "center",
                 css: {
                   position: "absolute",
-                  top: "29%",
+                  top: "35%",
                   left: "54%",
                   padding: "$2 $4",
                   r: "$2",
@@ -2568,8 +2719,8 @@ function ShareScreenOptions() {
                   gap: "$2"
                 }
               },
-              /* @__PURE__ */ React30.createElement(StarIcon, { height: 14, width: 14 }),
-              /* @__PURE__ */ React30.createElement(
+              /* @__PURE__ */ React32.createElement(StarIcon, { height: 14, width: 14 }),
+              /* @__PURE__ */ React32.createElement(
                 Text,
                 {
                   variant: "xs",
@@ -2583,7 +2734,7 @@ function ShareScreenOptions() {
               )
             )
           ),
-          /* @__PURE__ */ React30.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React30.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React32.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React32.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React32.createElement(
             Text,
             {
               variant: "caption",
@@ -2595,39 +2746,9 @@ function ShareScreenOptions() {
             "Annotate, draw shapes, and more over PDFs"
           ))
         )
-      ),
-      /* @__PURE__ */ React30.createElement(
-        Dropdown.Item,
-        {
-          css: {
-            px: "$10",
-            pb: "$10",
-            pt: "$6",
-            "&:hover": {
-              bg: "$transparent",
-              cursor: "default"
-            }
-          }
-        },
-        /* @__PURE__ */ React30.createElement(
-          Button,
-          {
-            variant: "standard",
-            outlined: true,
-            type: "submit",
-            onClick: () => {
-              updateState(MODALS3.SHARE, false);
-            },
-            "data-testid": "share_btn",
-            css: {
-              w: "100%"
-            }
-          },
-          "Cancel"
-        )
       )
     )
-  ), openModals.has(MODALS3.PDF_SHARE) && /* @__PURE__ */ React30.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS3.PDF_SHARE, value) }));
+  ), openModals.has(MODALS3.PDF_SHARE) && /* @__PURE__ */ React32.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS3.PDF_SHARE, value) }));
 }
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
@@ -2639,7 +2760,7 @@ var ScreenshareToggle = ({ css = {} }) => {
   if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
     return null;
   }
-  return /* @__PURE__ */ React31.createElement(Fragment6, null, /* @__PURE__ */ React31.createElement(Flex, { direction: "row", css: { "@md": { display: "none" } } }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(Fragment6, null, /* @__PURE__ */ React33.createElement(Flex, { direction: "row", css: { "@md": { display: "none" } } }, /* @__PURE__ */ React33.createElement(
     ScreenShareButton,
     {
       variant: "standard",
@@ -2651,33 +2772,33 @@ var ScreenshareToggle = ({ css = {} }) => {
         toggleScreenShare();
       }
     },
-    /* @__PURE__ */ React31.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React31.createElement(Box, null, /* @__PURE__ */ React31.createElement(ShareScreenIcon, null)))
-  ), /* @__PURE__ */ React31.createElement(ShareScreenOptions, null)));
+    /* @__PURE__ */ React33.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React33.createElement(Box, null, /* @__PURE__ */ React33.createElement(ShareScreenIcon, null)))
+  ), /* @__PURE__ */ React33.createElement(ShareScreenOptions, null)));
 };
 
 // src/Prebuilt/components/Footer/ChatToggle.tsx
-import React32 from "react";
+import React34 from "react";
 import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore14 } from "@100mslive/react-sdk";
 import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
 var ChatToggle = () => {
   const countUnreadMessages = useHMSStore14(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  return /* @__PURE__ */ React32.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React32.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React32.createElement(ChatIcon, null) : /* @__PURE__ */ React32.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
+  return /* @__PURE__ */ React34.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React34.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React34.createElement(ChatIcon, null) : /* @__PURE__ */ React34.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-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 React37, { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect7, useState as useState20 } from "react";
+import { useDebounce, useMedia as useMedia5 } from "react-use";
 import {
   selectHandRaisedPeers,
-  selectHasPeerHandRaised as selectHasPeerHandRaised2,
+  selectHasPeerHandRaised,
   selectIsPeerAudioEnabled,
-  selectLocalPeerID as selectLocalPeerID5,
+  selectLocalPeerID as selectLocalPeerID4,
   selectPeerCount as selectPeerCount2,
   selectPeerMetadata,
   selectPermissions as selectPermissions8,
-  useHMSActions as useHMSActions12,
+  useHMSActions as useHMSActions13,
   useHMSStore as useHMSStore16
 } from "@100mslive/react-sdk";
 import {
@@ -2691,12 +2812,14 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
-import React34 from "react";
+import React36, { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef6, useState as useState19 } from "react";
 import { useMeasure } from "react-use";
 import { FixedSizeList } from "react-window";
+import { useHMSActions as useHMSActions12 } from "@100mslive/react-sdk";
+import { AddCircleIcon as AddCircleIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
-import React33, { useState as useState17 } from "react";
+import React35, { useState as useState18 } from "react";
 import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions11, useHMSStore as useHMSStore15, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
 import {
   MicOffIcon as MicOffIcon2,
@@ -2710,7 +2833,7 @@ 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] = useState17(false);
+  const [openOptions, setOpenOptions] = useState18(false);
   const permissions = useHMSStore15(selectPermissions7);
   const hmsActions = useHMSActions11();
   const { elements } = useRoomLayoutConferencingScreen();
@@ -2756,7 +2879,7 @@ var RoleOptions = ({ roleName, peerList }) => {
       console.error(e);
     }
   });
-  return /* @__PURE__ */ React33.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React35.createElement(
     Dropdown.Trigger,
     {
       onClick: (e) => e.stopPropagation(),
@@ -2775,40 +2898,40 @@ var RoleOptions = ({ roleName, peerList }) => {
         }
       }
     },
-    /* @__PURE__ */ React33.createElement(Flex, null, /* @__PURE__ */ React33.createElement(VerticalMenuIcon3, null))
-  ), /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React35.createElement(Flex, null, /* @__PURE__ */ React35.createElement(VerticalMenuIcon3, null))
+  ), /* @__PURE__ */ React35.createElement(
     Dropdown.Content,
     {
       onClick: (e) => e.stopPropagation(),
       css: { w: "max-content", maxWidth: "$64", bg: "$surface_default", py: 0 },
       align: "end"
     },
-    canRemoveRoleFromStage && /* @__PURE__ */ React33.createElement(
+    canRemoveRoleFromStage && /* @__PURE__ */ React35.createElement(
       Dropdown.Item,
       {
         css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderBottom: "1px solid $border_bright" }),
         onClick: removeAllFromStage
       },
-      /* @__PURE__ */ React33.createElement(PersonRectangleIcon, null),
-      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
+      /* @__PURE__ */ React35.createElement(PersonRectangleIcon, null),
+      /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
     ),
-    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(
+    canMuteRole && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", !allPeersHaveAudioOn) }, allPeersHaveAudioOn ? /* @__PURE__ */ React35.createElement(MicOffIcon2, null) : /* @__PURE__ */ React35.createElement(MicOnIcon, null), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveAudioOn ? "Mute" : "Unmute", " Audio")), /* @__PURE__ */ React35.createElement(
       Dropdown.Item,
       {
         css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright" }),
         onClick: () => setTrackEnabled("video", !allPeersHaveVideoOn)
       },
-      allPeersHaveVideoOn ? /* @__PURE__ */ React33.createElement(VideoOffIcon, null) : /* @__PURE__ */ React33.createElement(VideoOnIcon, null),
-      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveVideoOn ? "Mute" : "Unmute", " Video")
+      allPeersHaveVideoOn ? /* @__PURE__ */ React35.createElement(VideoOffIcon, null) : /* @__PURE__ */ React35.createElement(VideoOnIcon, null),
+      /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveVideoOn ? "Mute" : "Unmute", " Video")
     )),
-    canRemoveRoleFromRoom && /* @__PURE__ */ React33.createElement(
+    canRemoveRoleFromRoom && /* @__PURE__ */ React35.createElement(
       Dropdown.Item,
       {
         css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright", color: "$alert_error_default" }),
         onClick: removePeersFromRoom
       },
-      /* @__PURE__ */ React33.createElement(RemoveUserIcon, null),
-      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
+      /* @__PURE__ */ React35.createElement(RemoveUserIcon, null),
+      /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
     )
   ));
 };
@@ -2818,8 +2941,8 @@ var ROW_HEIGHT = 50;
 function itemKey(index, data3) {
   return data3.peerList[index].id;
 }
-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 VirtualizedParticipantItem = React36.memo(({ index, data: data3 }) => {
+  return /* @__PURE__ */ React36.createElement(Participant, { key: data3.peerList[index].id, peer: data3.peerList[index], isConnected: data3.isConnected });
 });
 var RoleAccordion = ({
   peerList = [],
@@ -2829,12 +2952,29 @@ var RoleAccordion = ({
   isHandRaisedAccordion = false
 }) => {
   const [ref, { width }] = useMeasure();
+  const actions = useHMSActions12();
   const showAcordion = (filter == null ? void 0 : filter.search) ? peerList.some((peer) => peer.name.toLowerCase().includes(filter.search)) : true;
-  if (!showAcordion || isHandRaisedAccordion && (filter == null ? void 0 : filter.search) || peerList.length === 0) {
+  const [hasNext, setHasNext] = useState19(false);
+  const iteratorRef = useRef6(null);
+  const loadNext = useCallback6(() => {
+    if (!roleName || roleName === "Hand Raised") {
+      return;
+    }
+    if (!iteratorRef.current) {
+      iteratorRef.current = actions.getPeerListIterator({ role: roleName });
+    }
+    iteratorRef.current.next().catch(console.error).finally(() => {
+      setHasNext(iteratorRef.current ? iteratorRef.current.hasNext() : false);
+    });
+  }, [actions, roleName]);
+  useEffect6(() => {
+    loadNext();
+  }, [loadNext]);
+  if (!showAcordion || isHandRaisedAccordion && (filter == null ? void 0 : filter.search) || peerList.length === 0 && (filter == null ? void 0 : filter.search)) {
     return null;
   }
   const height = ROW_HEIGHT * peerList.length;
-  return /* @__PURE__ */ React34.createElement(Flex, { direction: "column", css: { "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React36.createElement(Flex, { direction: "column", css: { "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React36.createElement(
     Accordion.Root,
     {
       type: "single",
@@ -2842,7 +2982,7 @@ var RoleAccordion = ({
       defaultValue: roleName,
       css: { borderRadius: "$1", border: "1px solid $border_bright" }
     },
-    /* @__PURE__ */ React34.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React36.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React36.createElement(
       Accordion.Header,
       {
         iconStyles: { c: "$on_surface_high" },
@@ -2854,7 +2994,7 @@ var RoleAccordion = ({
           c: "$on_surface_medium"
         }
       },
-      /* @__PURE__ */ React34.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React36.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React36.createElement(
         Text,
         {
           variant: "sm",
@@ -2863,8 +3003,8 @@ var RoleAccordion = ({
         roleName,
         " ",
         `(${getFormattedCount(peerList.length)})`
-      ), /* @__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(
+      ), /* @__PURE__ */ React36.createElement(RoleOptions, { roleName, peerList }))
+    ), /* @__PURE__ */ React36.createElement(Accordion.Content, null, /* @__PURE__ */ React36.createElement(Box, { css: { borderTop: "1px solid $border_default" } }), /* @__PURE__ */ React36.createElement(
       FixedSizeList,
       {
         itemSize: ROW_HEIGHT,
@@ -2875,13 +3015,28 @@ var RoleAccordion = ({
         height
       },
       VirtualizedParticipantItem
-    )))
+    ), hasNext ? /* @__PURE__ */ React36.createElement(
+      Chip_default,
+      {
+        icon: /* @__PURE__ */ React36.createElement(AddCircleIcon2, null),
+        content: "Load More",
+        onClick: loadNext,
+        backgroundColor: "$secondary_default",
+        css: {
+          w: "max-content",
+          borderRadius: "$size$9",
+          m: "$2 auto",
+          p: "$4",
+          cursor: "pointer"
+        }
+      }
+    ) : null))
   ));
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
 var ParticipantList = () => {
-  const [filter, setFilter] = useState18();
+  const [filter, setFilter] = useState20();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
   const handRaisedPeers = useHMSStore16(selectHandRaisedPeers);
@@ -2891,7 +3046,7 @@ var ParticipantList = () => {
     }
     peersOrderedByRoles[participant.roleName].push(participant);
   });
-  const onSearch = useCallback6((value) => {
+  const onSearch = useCallback7((value) => {
     setFilter((filterValue) => {
       if (!filterValue) {
         filterValue = {};
@@ -2903,7 +3058,7 @@ var ParticipantList = () => {
   if (peerCount === 0) {
     return null;
   }
-  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(
+  return /* @__PURE__ */ React37.createElement(Fragment7, null, /* @__PURE__ */ React37.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$4" } }, !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React37.createElement(ParticipantSearch, { onSearch, inSidePane: true }), participants.length === 0 ? /* @__PURE__ */ React37.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", p: "$8 0" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")) : null, /* @__PURE__ */ React37.createElement(
     VirtualizedParticipants,
     {
       peersOrderedByRoles,
@@ -2917,7 +3072,7 @@ var ParticipantCount = () => {
   const peerCount = useHMSStore16(selectPeerCount2);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  useEffect5(() => {
+  useEffect7(() => {
     if (isParticipantsOpen && peerCount === 0) {
       toggleSidepane();
     }
@@ -2925,7 +3080,7 @@ var ParticipantCount = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     IconButton_default,
     {
       css: {
@@ -2941,12 +3096,12 @@ var ParticipantCount = () => {
       active: !isParticipantsOpen,
       "data-testid": "participant_list"
     },
-    /* @__PURE__ */ React35.createElement(PeopleIcon2, null),
-    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, getFormattedCount(peerCount))
+    /* @__PURE__ */ React37.createElement(PeopleIcon2, null),
+    /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, getFormattedCount(peerCount))
   );
 };
 var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       direction: "column",
@@ -2959,7 +3114,7 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
         flex: "1 1 0"
       }
     },
-    /* @__PURE__ */ React35.createElement(
+    handRaisedList.length > 0 ? /* @__PURE__ */ React37.createElement(
       RoleAccordion,
       {
         peerList: handRaisedList,
@@ -2968,8 +3123,8 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
         isConnected,
         isHandRaisedAccordion: true
       }
-    ),
-    Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React35.createElement(
+    ) : null,
+    Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React37.createElement(
       RoleAccordion,
       {
         key: role,
@@ -2982,8 +3137,8 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
   );
 };
 var Participant = ({ peer, isConnected }) => {
-  const localPeerId = useHMSStore16(selectLocalPeerID5);
-  return /* @__PURE__ */ React35.createElement(
+  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       key: peer.id,
@@ -2998,17 +3153,20 @@ var Participant = ({ peer, isConnected }) => {
       justify: "between",
       "data-testid": "participant_" + peer.name
     },
-    /* @__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
+    /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, textEllipsis(150)), { fontWeight: "$semiBold", color: "$on_surface_high" }) }, peer.name, " ", localPeerId === peer.id ? "(You)" : ""),
+    isConnected ? /* @__PURE__ */ React37.createElement(ParticipantActions, { peerId: peer.id, isLocal: peer.id === localPeerId, role: peer.roleName }) : null
   );
 };
-var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
-  var _a;
-  const isHandRaised = useHMSStore16(selectHasPeerHandRaised2(peerId));
+var ParticipantActions = React37.memo(({ peerId, role, isLocal }) => {
+  var _a, _b;
+  const isHandRaised = useHMSStore16(selectHasPeerHandRaised(peerId));
   const canChangeRole = (_a = useHMSStore16(selectPermissions8)) == null ? void 0 : _a.changeRole;
-  const shouldShowMoreActions = canChangeRole;
+  const canRemoveOthers = (_b = useHMSStore16(selectPermissions8)) == null ? void 0 : _b.removeOthers;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_exp } = elements || {};
+  const shouldShowMoreActions = on_stage_exp && canChangeRole || canRemoveOthers;
   const isAudioMuted = !useHMSStore16(selectIsPeerAudioEnabled(peerId));
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       align: "center",
@@ -3017,33 +3175,40 @@ var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
         gap: "$8"
       }
     },
-    /* @__PURE__ */ React35.createElement(ConnectionIndicator, { peerId }),
-    isHandRaised && /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React37.createElement(ConnectionIndicator, { peerId }),
+    isHandRaised && /* @__PURE__ */ React37.createElement(
       Flex,
       {
         align: "center",
         justify: "center",
         css: { p: "$1", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
       },
-      /* @__PURE__ */ React35.createElement(HandIcon3, { height: 19, width: 19 })
+      /* @__PURE__ */ React37.createElement(HandIcon3, { height: 19, width: 19 })
     ),
-    isAudioMuted ? /* @__PURE__ */ React35.createElement(
+    isAudioMuted ? /* @__PURE__ */ React37.createElement(
       Flex,
       {
         align: "center",
         justify: "center",
         css: { p: "$2", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
       },
-      /* @__PURE__ */ React35.createElement(MicOffIcon3, { height: 19, width: 19 })
+      /* @__PURE__ */ React37.createElement(MicOffIcon3, { height: 19, width: 19 })
     ) : null,
-    shouldShowMoreActions && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
+    shouldShowMoreActions && !isLocal ? /* @__PURE__ */ React37.createElement(
+      ParticipantMoreActions,
+      {
+        peerId,
+        role,
+        elements,
+        canChangeRole,
+        canRemoveOthers
+      }
+    ) : null
   );
 });
-var ParticipantMoreActions = ({ peerId, role }) => {
+var ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
   var _a;
-  const hmsActions = useHMSActions12();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore16(selectPermissions8);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const hmsActions = useHMSActions13();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
@@ -3053,9 +3218,9 @@ var ParticipantMoreActions = ({ peerId, role }) => {
   const isInStage = role === on_stage_role;
   const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
   const prevRole = (_a = useHMSStore16(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
-  const localPeerId = useHMSStore16(selectLocalPeerID5);
+  const localPeerId = useHMSStore16(selectLocalPeerID4);
   const isLocal = localPeerId === peerId;
-  const [open, setOpen] = useState18(false);
+  const [open, setOpen] = useState20(false);
   const handleStageAction = () => __async(void 0, null, function* () {
     if (isInStage) {
       prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
@@ -3064,7 +3229,7 @@ var ParticipantMoreActions = ({ peerId, role }) => {
     }
     setOpen(false);
   });
-  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React37.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -3084,8 +3249,8 @@ var ParticipantMoreActions = ({ peerId, role }) => {
       },
       tabIndex: 0
     },
-    /* @__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(
+    /* @__PURE__ */ React37.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React37.createElement(VerticalMenuIcon4, null))
+  ), /* @__PURE__ */ React37.createElement(Dropdown.Portal, null, /* @__PURE__ */ React37.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React37.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React37.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React37.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__ */ React37.createElement(
     Dropdown.Item,
     {
       css: { color: "$alert_error_default", bg: "$surface_default" },
@@ -3097,13 +3262,13 @@ var ParticipantMoreActions = ({ peerId, role }) => {
         }
       })
     },
-    /* @__PURE__ */ React35.createElement(PeopleRemoveIcon, null),
-    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, "Remove Participant")
+    /* @__PURE__ */ React37.createElement(PeopleRemoveIcon, null),
+    /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, "Remove Participant")
   ))));
 };
 var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
-  const [value, setValue] = React35.useState("");
-  const isMobile = useMedia4(config.media.md);
+  const [value, setValue] = React37.useState("");
+  const isMobile = useMedia5(config.media.md);
   useDebounce(
     () => {
       onSearch(value);
@@ -3111,7 +3276,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
     300,
     [value, onSearch]
   );
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       align: "center",
@@ -3123,13 +3288,13 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
         mt: inSidePane ? "$4" : ""
       }
     },
-    /* @__PURE__ */ React35.createElement(SearchIcon, { style: { position: "absolute", left: isMobile ? "1.25rem" : "0.5rem" } }),
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React37.createElement(SearchIcon, { style: { position: "absolute", left: isMobile ? "1.25rem" : "0.5rem" } }),
+    /* @__PURE__ */ React37.createElement(
       Input,
       {
         type: "text",
         placeholder: placeholder || "Search for participants",
-        css: { w: "100%", p: "$6", pl: "$14", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
+        css: { w: "100%", p: "$6", pl: "$16", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
         value,
         onKeyDown: (event) => {
           event.stopPropagation();
@@ -3145,25 +3310,25 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React36.lazy(() => import("./VirtualBackground-THDRYDRA.js"));
+var VirtualBackground = React38.lazy(() => import("./VirtualBackground-GP4ATXD3.js"));
 var Footer2 = ({
   screenType,
   elements
 }) => {
   var _a, _b;
-  const isMobile = useMedia5(config.media.md);
+  const isMobile = useMedia6(config.media.md);
   const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay);
   const openByDefault = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
   const { toggleAudio, toggleVideo } = useAVToggle2();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  useEffect6(() => {
+  useEffect8(() => {
     if (!isChatOpen && openByDefault) {
       toggleChat();
     }
   }, [toggleChat, openByDefault]);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React38.createElement(
     Footer.Root,
     {
       css: {
@@ -3177,7 +3342,7 @@ var Footer2 = ({
         }
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(
       Footer.Left,
       {
         css: {
@@ -3188,11 +3353,11 @@ var Footer2 = ({
           }
         }
       },
-      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))
+      isMobile ? /* @__PURE__ */ React38.createElement(LeaveRoom, { screenType }) : null,
+      /* @__PURE__ */ React38.createElement(AudioVideoToggle, null),
+      isMobile ? null : /* @__PURE__ */ React38.createElement(Suspense, { fallback: /* @__PURE__ */ React38.createElement(React38.Fragment, null) }, /* @__PURE__ */ React38.createElement(VirtualBackground, null))
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(
       Footer.Center,
       {
         css: {
@@ -3202,21 +3367,21 @@ var Footer2 = ({
           }
         }
       },
-      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, noAVPermissions ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), /* @__PURE__ */ React36.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
+      isMobile ? /* @__PURE__ */ React38.createElement(React38.Fragment, null, noAVPermissions ? /* @__PURE__ */ React38.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React38.createElement(ChatToggle, null), /* @__PURE__ */ React38.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(ScreenshareToggle, null), /* @__PURE__ */ React38.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React38.createElement(EmojiReaction, null), /* @__PURE__ */ React38.createElement(LeaveRoom, { screenType }))
     ),
-    /* @__PURE__ */ React36.createElement(Footer.Right, null, !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React36.createElement(ParticipantCount, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType }))
+    /* @__PURE__ */ React38.createElement(Footer.Right, null, !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React38.createElement(ChatToggle, null), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React38.createElement(ParticipantCount, null), /* @__PURE__ */ React38.createElement(MoreSettings, { elements, screenType }))
   );
 };
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
-import React37, { useCallback as useCallback7, useState as useState19 } from "react";
-import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions13, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
+import React39, { useCallback as useCallback8, useState as useState21 } from "react";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions14, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
   const { hlsError } = useHMSStore17(selectHLSState2).error || false;
-  const [openModal, setOpenModal] = useState19(!!hlsError);
-  const hmsActions = useHMSActions13();
+  const [openModal, setOpenModal] = useState21(!!hlsError);
+  const hmsActions = useHMSActions14();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback7(() => __async(this, null, function* () {
+  const startHLS = useCallback8(() => __async(this, null, function* () {
     try {
       if (isHLSStarted) {
         return;
@@ -3231,7 +3396,7 @@ function HLSFailureModal() {
       setHLSStarted(false);
     }
   }), [hmsActions, isHLSStarted, setHLSStarted]);
-  return hlsError ? /* @__PURE__ */ React37.createElement(
+  return hlsError ? /* @__PURE__ */ React39.createElement(
     Dialog.Root,
     {
       open: openModal,
@@ -3241,7 +3406,7 @@ function HLSFailureModal() {
         }
       }
     },
-    /* @__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(
+    /* @__PURE__ */ React39.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React39.createElement(Dialog.Overlay, null), /* @__PURE__ */ React39.createElement(Dialog.Content, { css: { w: "min(360px, 90%)" } }, /* @__PURE__ */ React39.createElement(
       Dialog.Title,
       {
         css: {
@@ -3252,36 +3417,631 @@ function HLSFailureModal() {
           mt: "$4"
         }
       },
-      /* @__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"))))
+      /* @__PURE__ */ React39.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, "Failed to Go Live")
+    ), /* @__PURE__ */ React39.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ React39.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React39.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ React39.createElement(Button, { css: { w: "100%" }, onClick: startHLS }, "Go Live"))))
   ) : null;
 }
 
+// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
+import React41, { useEffect as useEffect9 } from "react";
+import {
+  selectLocalPeerName as selectLocalPeerName2,
+  selectLocalPeerRoleName,
+  selectRoleChangeRequest,
+  useCustomEvent as useCustomEvent2,
+  useHMSActions as useHMSActions15,
+  useHMSStore as useHMSStore18
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
+import React40 from "react";
+import { useMedia as useMedia7 } from "react-use";
+var RequestPrompt = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = "Accept",
+  onAction
+}) => {
+  const isMobile = useMedia7(config.media.md);
+  if (isMobile) {
+    return /* @__PURE__ */ React40.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React40.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React40.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React40.createElement(RequestActions, { actionText, onAction })));
+  }
+  return /* @__PURE__ */ React40.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React40.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React40.createElement(Dialog.Overlay, null), /* @__PURE__ */ React40.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React40.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React40.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React40.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React40.createElement(RequestActions, { actionText, onAction }))));
+};
+var RequestActions = ({ onAction, actionText }) => /* @__PURE__ */ React40.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md", "@md": { mt: "$8", px: "$8" } } }, /* @__PURE__ */ React40.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React40.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React40.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Decline"))), /* @__PURE__ */ React40.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React40.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText)));
+
+// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
+var RoleChangeRequestModal = () => {
+  const hmsActions = useHMSActions15();
+  const { updateMetaData } = useMyMetadata();
+  const currentRole = useHMSStore18(selectLocalPeerRoleName);
+  const roleChangeRequest = useHMSStore18(selectRoleChangeRequest);
+  const name = useHMSStore18(selectLocalPeerName2);
+  const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
+  useEffect9(() => {
+    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
+      return;
+    }
+    (() => __async(void 0, null, function* () {
+      yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    }))();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
+  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
+    return null;
+  }
+  const body = /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(
+    Text,
+    {
+      variant: "xs",
+      css: {
+        c: "$on_surface_medium",
+        textAlign: "center",
+        "@md": { textAlign: "left", borderBottom: "1px solid $border_bright", pb: "$4", px: "$8" }
+      }
+    },
+    "Setup your audio and video before joining"
+  ), /* @__PURE__ */ React41.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "center",
+      css: {
+        "@sm": { width: "100%" },
+        flexDirection: "column",
+        mt: "$6",
+        "@md": { px: "$8" }
+      }
+    },
+    /* @__PURE__ */ React41.createElement(PreviewTile, { name: name || "" }),
+    /* @__PURE__ */ React41.createElement(PreviewControls, { hideSettings: true })
+  ));
+  return /* @__PURE__ */ React41.createElement(
+    RequestPrompt,
+    {
+      title: "You're invited to join the stage",
+      onOpenChange: (value) => __async(void 0, null, function* () {
+        var _a;
+        if (!value) {
+          hmsActions.rejectChangeRole(roleChangeRequest);
+          sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
+          yield hmsActions.cancelMidCallPreview();
+          yield hmsActions.lowerLocalPeerHand();
+        }
+      }),
+      body,
+      onAction: () => __async(void 0, null, function* () {
+        yield hmsActions.acceptChangeRole(roleChangeRequest);
+        yield updateMetaData({ prevRole: currentRole });
+        yield hmsActions.lowerLocalPeerHand();
+      }),
+      actionText: "Accept"
+    }
+  );
+};
+
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-import React60, { Suspense as Suspense2, useEffect as useEffect23 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions21, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+import React67, { Suspense as Suspense2, useEffect as useEffect26 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName3, useHMSActions as useHMSActions24, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-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";
+import React56, { useEffect as useEffect17, useMemo as useMemo7, useState as useState30 } from "react";
+import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore27, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-import React42, { useEffect as useEffect10, useMemo as useMemo3, useState as useState21 } from "react";
-import { useMedia as useMedia8 } from "react-use";
-import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import React49, { useEffect as useEffect13, useMemo as useMemo4, useState as useState25 } from "react";
+import { useMedia as useMedia13 } from "react-use";
+import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore23 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
-import React39, { useEffect as useEffect7, useRef as useRef6 } from "react";
+import React46, { useEffect as useEffect10, useRef as useRef8 } from "react";
 import Draggable from "react-draggable";
-import { useMedia as useMedia6 } from "react-use";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
+import { useMedia as useMedia11 } from "react-use";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer, selectVideoTrackByID as selectVideoTrackByID2, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/hooks/useVideoTileLayout.ts
-import React38, { useContext } from "react";
-var VideoTileContext = React38.createContext({
-  enableSpotlightingPeer: true,
-  hideParticipantNameOnTile: false,
+// src/Prebuilt/components/VideoTile.jsx
+import React44, { Fragment as Fragment9, useCallback as useCallback9, useMemo as useMemo2, useRef as useRef7, useState as useState23 } from "react";
+import { useMedia as useMedia10 } from "react-use";
+import {
+  selectAudioTrackByPeerID,
+  selectHasPeerHandRaised as selectHasPeerHandRaised2,
+  selectIsPeerAudioEnabled as selectIsPeerAudioEnabled2,
+  selectLocalPeerID as selectLocalPeerID6,
+  selectPeerMetadata as selectPeerMetadata2,
+  selectPeerNameByID,
+  selectSessionStore as selectSessionStore2,
+  selectVideoTrackByID,
+  selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
+  useHMSStore as useHMSStore21
+} from "@100mslive/react-sdk";
+import { BrbTileIcon, HandIcon as HandIcon4, MicOffIcon as MicOffIcon5 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/TileMenu/TileMenu.jsx
+import React43, { useState as useState22 } from "react";
+import { useMedia as useMedia9 } from "react-use";
+import {
+  selectLocalPeerID as selectLocalPeerID5,
+  selectPeerByID as selectPeerByID2,
+  selectPermissions as selectPermissions10,
+  selectTrackByID as selectTrackByID2,
+  selectVideoTrackByPeerID,
+  useHMSStore as useHMSStore20,
+  useRemoteAVToggle as useRemoteAVToggle2
+} from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon6, VerticalMenuIcon as VerticalMenuIcon5 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/TileMenu/TileMenuContent.jsx
+import React42, { Fragment as Fragment8 } from "react";
+import { useMedia as useMedia8 } from "react-use";
+import {
+  selectPermissions as selectPermissions9,
+  selectSessionStore,
+  selectTrackByID,
+  useCustomEvent as useCustomEvent3,
+  useHMSActions as useHMSActions16,
+  useHMSStore as useHMSStore19,
+  useRemoteAVToggle
+} from "@100mslive/react-sdk";
+import {
+  MicOffIcon as MicOffIcon4,
+  MicOnIcon as MicOnIcon2,
+  PencilIcon as PencilIcon2,
+  PinIcon,
+  RemoveUserIcon as RemoveUserIcon2,
+  ShareScreenIcon as ShareScreenIcon2,
+  ShrinkIcon,
+  SpeakerIcon,
+  StarIcon as StarIcon2,
+  VideoOffIcon as VideoOffIcon2,
+  VideoOnIcon as VideoOnIcon2
+} from "@100mslive/react-icons";
+var isSameTile = ({ trackId, videoTrackID, audioTrackID }) => trackId && (videoTrackID && videoTrackID === trackId || audioTrackID && audioTrackID === trackId);
+var spacingCSS = { "@md": { my: "$8", fontWeight: "$semiBold", fontSize: "sm" } };
+var SpotlightActions = ({
+  peerId,
+  onSpotLightClick = () => {
+    return;
+  }
+}) => {
+  const hmsActions = useHMSActions16();
+  const spotlightPeerId = useHMSStore19(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const isTileSpotlighted = spotlightPeerId === peerId;
+  const setSpotlightPeerId = (peer) => hmsActions.sessionStore.set(SESSION_STORE_KEY.SPOTLIGHT, peer).catch((err) => ToastManager.addToast({ title: err.description }));
+  return /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.ItemButton,
+    {
+      css: spacingCSS,
+      onClick: () => {
+        if (isTileSpotlighted) {
+          setSpotlightPeerId();
+        } else {
+          setSpotlightPeerId(peerId);
+        }
+        onSpotLightClick();
+      }
+    },
+    /* @__PURE__ */ React42.createElement(StarIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement("span", null, isTileSpotlighted ? "Remove from Spotlight" : "Spotlight Tile for everyone")
+  );
+};
+var PinActions = ({ audioTrackID, videoTrackID }) => {
+  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+  const isTilePinned = isSameTile({
+    trackId: pinnedTrackId,
+    videoTrackID,
+    audioTrackID
+  });
+  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.ItemButton,
+    {
+      css: spacingCSS,
+      onClick: () => isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID)
+    },
+    /* @__PURE__ */ React42.createElement(PinIcon, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement("span", null, isTilePinned ? "Unpin" : "Pin", " Tile for myself")
+  ));
+};
+var MinimiseInset = () => {
+  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
+  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(StyledMenuTile.ItemButton, { css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React42.createElement(ShrinkIcon, { height: 20, width: 20 }), /* @__PURE__ */ React42.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
+};
+var SimulcastLayers = ({ trackId }) => {
+  var _a;
+  const track = useHMSStore19(selectTrackByID(trackId));
+  const actions = useHMSActions16();
+  const bg = useDropdownSelection();
+  if (!((_a = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a.length) || track.degraded || !track.enabled) {
+    return null;
+  }
+  const currentLayer = track.layerDefinitions.find((layer) => layer.layer === track.layer);
+  return /* @__PURE__ */ React42.createElement(Fragment8, null, /* @__PURE__ */ React42.createElement(StyledMenuTile.ItemButton, { css: { color: "$on_surface_medium", cursor: "default" } }, "Select maximum resolution"), track.layerDefinitions.map((layer) => {
+    return /* @__PURE__ */ React42.createElement(
+      StyledMenuTile.ItemButton,
+      {
+        key: layer.layer,
+        onClick: () => __async(void 0, null, function* () {
+          yield actions.setPreferredLayer(trackId, layer.layer);
+        }),
+        css: {
+          justifyContent: "space-between",
+          bg: track.preferredLayer === layer.layer ? bg : void 0,
+          "&:hover": {
+            bg: track.preferredLayer === layer.layer ? bg : void 0
+          }
+        }
+      },
+      /* @__PURE__ */ React42.createElement(
+        Text,
+        {
+          as: "span",
+          css: {
+            textTransform: "capitalize",
+            mr: "$2",
+            fontWeight: track.preferredLayer === layer.layer ? "$semiBold" : "$regular",
+            color: track.preferredLayer === layer.layer ? "$on_primary_high" : "$on_surface_high"
+          }
+        },
+        layer.layer
+      ),
+      /* @__PURE__ */ React42.createElement(
+        Text,
+        {
+          as: "span",
+          variant: "xs",
+          css: {
+            color: track.preferredLayer === layer.layer ? "$on_primary_high" : "$on_surface_high"
+          }
+        },
+        layer.resolution.width,
+        "x",
+        layer.resolution.height
+      )
+    );
+  }), /* @__PURE__ */ React42.createElement(StyledMenuTile.ItemButton, null, /* @__PURE__ */ React42.createElement(Text, { as: "span", variant: "xs", css: { color: "$on_surface_medium" } }, "Currently streaming:", /* @__PURE__ */ React42.createElement(
+    Text,
+    {
+      as: "span",
+      variant: "xs",
+      css: {
+        fontWeight: "$semiBold",
+        textTransform: "capitalize",
+        color: "$on_surface_medium",
+        ml: "$2"
+      }
+    },
+    currentLayer ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, track.layer, " (", currentLayer.resolution.width, "x", currentLayer.resolution.height, ")") : "-"
+  ))));
+};
+var TileMenuContent = (props) => {
+  const actions = useHMSActions16();
+  const { removeOthers } = useHMSStore19(selectPermissions9);
+  const {
+    videoTrackID,
+    audioTrackID,
+    isLocal,
+    isScreenshare,
+    showSpotlight,
+    showPinAction,
+    peerID,
+    canMinimise,
+    closeSheetOnClick = () => {
+      return;
+    },
+    openNameChangeModal = () => {
+      return;
+    }
+  } = props;
+  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
+    audioTrackID,
+    videoTrackID
+  );
+  const { sendEvent } = useCustomEvent3({
+    type: REMOTE_STOP_SCREENSHARE_TYPE
+  });
+  const isMobile = useMedia8(config.media.md);
+  return isLocal ? (showPinAction || canMinimise) && /* @__PURE__ */ React42.createElement(React42.Fragment, null, showPinAction && /* @__PURE__ */ React42.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React42.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React42.createElement(MinimiseInset, null), /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.ItemButton,
+    {
+      onClick: () => {
+        openNameChangeModal();
+        closeSheetOnClick();
+      }
+    },
+    /* @__PURE__ */ React42.createElement(PencilIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement(Text, { variant: "sm", css: { "@md": { fontWeight: "$semiBold" }, c: "$on_surface_high" } }, "Change Name")
+  )) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, toggleVideo ? /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.ItemButton,
+    {
+      css: spacingCSS,
+      onClick: () => {
+        toggleVideo();
+        closeSheetOnClick();
+      },
+      "data-testid": isVideoEnabled ? "mute_video_participant_btn" : "unmute_video_participant_btn"
+    },
+    isVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOnIcon2, { height: 20, width: 20 }) : /* @__PURE__ */ React42.createElement(VideoOffIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement("span", null, isVideoEnabled ? "Mute" : "Request Unmute")
+  ) : null, toggleAudio ? /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.ItemButton,
+    {
+      css: spacingCSS,
+      onClick: () => {
+        toggleAudio();
+        closeSheetOnClick();
+      },
+      "data-testid": isVideoEnabled ? "mute_audio_participant_btn" : "unmute_audio_participant_btn"
+    },
+    isAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOnIcon2, { height: 20, width: 20 }) : /* @__PURE__ */ React42.createElement(MicOffIcon4, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement("span", null, isAudioEnabled ? "Mute" : "Request Unmute")
+  ) : null, audioTrackID ? /* @__PURE__ */ React42.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React42.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React42.createElement(SpeakerIcon, { height: 20, width: 20 }), /* @__PURE__ */ React42.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React42.createElement(Slider, { css: { my: "0.5rem" }, step: 5, value: [volume], onValueChange: (e) => setVolume(e[0]) })) : null, showPinAction && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React42.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), isMobile ? null : /* @__PURE__ */ React42.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.RemoveItem,
+    {
+      css: __spreadProps(__spreadValues({}, spacingCSS), { borderTop: "none" }),
+      onClick: () => __async(void 0, null, function* () {
+        try {
+          yield actions.removePeer(peerID, "");
+        } catch (error) {
+        }
+        closeSheetOnClick();
+      }),
+      "data-testid": "remove_participant_btn"
+    },
+    /* @__PURE__ */ React42.createElement(RemoveUserIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement("span", null, "Remove Participant")
+  ) : null, removeOthers && isScreenshare ? /* @__PURE__ */ React42.createElement(
+    StyledMenuTile.RemoveItem,
+    {
+      onClick: () => {
+        sendEvent({});
+        closeSheetOnClick();
+      },
+      css: spacingCSS
+    },
+    /* @__PURE__ */ React42.createElement(ShareScreenIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React42.createElement("span", null, "Stop Screenshare")
+  ) : null);
+};
+
+// src/Prebuilt/components/TileMenu/TileMenu.jsx
+var TileMenu = ({
+  audioTrackID,
+  videoTrackID,
+  peerID,
+  isScreenshare = false,
+  canMinimise,
+  enableSpotlightingPeer = true
+}) => {
+  var _a, _b;
+  const [open, setOpen] = useState22(false);
+  const { theme } = useTheme();
+  const localPeerID = useHMSStore20(selectLocalPeerID5);
+  const isLocal = localPeerID === peerID;
+  const { removeOthers } = useHMSStore20(selectPermissions10);
+  const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
+  const showSpotlight = enableSpotlightingPeer;
+  const isPrimaryVideoTrack = ((_a = useHMSStore20(selectVideoTrackByPeerID(peerID))) == null ? void 0 : _a.id) === videoTrackID;
+  const showPinAction = audioTrackID || videoTrackID && isPrimaryVideoTrack;
+  const track = useHMSStore20(selectTrackByID2(videoTrackID));
+  const hideSimulcastLayers = !((_b = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b.length) || track.degraded || !track.enabled;
+  const isMobile = useMedia9(config.media.md);
+  const peer = useHMSStore20(selectPeerByID2(peerID));
+  const [showNameChangeModal, setShowNameChangeModal] = useState22(false);
+  useDropdownList({ open, name: "TileMenu" });
+  if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
+    return null;
+  }
+  const openNameChangeModal = () => setShowNameChangeModal(true);
+  const props = {
+    isLocal,
+    isScreenshare,
+    audioTrackID,
+    videoTrackID,
+    peerID,
+    isPrimaryVideoTrack,
+    showSpotlight,
+    showPinAction,
+    canMinimise,
+    openNameChangeModal
+  };
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(StyledMenuTile.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React43.createElement(
+    StyledMenuTile.Trigger,
+    {
+      "data-testid": "participant_menu_btn",
+      css: { bg: `${theme.colors.background_dim.value}A3`, p: "$2", w: "unset", h: "unset" },
+      onClick: (e) => e.stopPropagation(),
+      className: isMobile ? "__cancel-drag-event" : ""
+    },
+    /* @__PURE__ */ React43.createElement(VerticalMenuIcon5, { width: 20, height: 20 })
+  ), isMobile ? /* @__PURE__ */ React43.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React43.createElement(Sheet.Content, { css: { bg: "$surface_dim", pt: "$8" } }, /* @__PURE__ */ React43.createElement(
+    Flex,
+    {
+      css: {
+        color: "$on_surface_high",
+        display: "flex",
+        w: "100%",
+        justifyContent: "space-between",
+        alignItems: "center",
+        px: "$10",
+        pb: "$8",
+        borderBottom: "1px solid $border_default"
+      }
+    },
+    /* @__PURE__ */ React43.createElement(Box, null, /* @__PURE__ */ React43.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer.name, isLocal ? ` (You)` : null), (peer == null ? void 0 : peer.roleName) ? /* @__PURE__ */ React43.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
+    /* @__PURE__ */ React43.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React43.createElement(CrossIcon6, null))
+  ), /* @__PURE__ */ React43.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React43.createElement(TileMenuContent, __spreadProps(__spreadValues({}, props), { closeSheetOnClick: () => setOpen(false) }))))) : /* @__PURE__ */ React43.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React43.createElement(TileMenuContent, __spreadValues({}, props)))), showNameChangeModal && /* @__PURE__ */ React43.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
+};
+var TileMenu_default = TileMenu;
+
+// src/Prebuilt/components/peerTileUtils.jsx
+var PEER_NAME_PLACEHOLDER = "peerName";
+var labelMap = /* @__PURE__ */ new Map([
+  [[true, "screen"].toString(), "Your Screen"],
+  [[true, "regular"].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
+  [[false, "screen"].toString(), `${PEER_NAME_PLACEHOLDER}'s Screen`],
+  [[false, "regular"].toString(), PEER_NAME_PLACEHOLDER],
+  [[true, void 0].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
+  [[false, void 0].toString(), `${PEER_NAME_PLACEHOLDER}`]
+]);
+var getVideoTileLabel = ({ peerName, isLocal, track }) => {
+  const isPeerPresent = peerName !== void 0;
+  if (!isPeerPresent || !track) {
+    return isPeerPresent ? labelMap.get([isLocal, void 0].toString()).replace(PEER_NAME_PLACEHOLDER, peerName) : "";
+  }
+  const isLocallyMuted = track.volume === 0;
+  let label = labelMap.get([isLocal, track.source].toString());
+  if (label) {
+    label = label.replace(PEER_NAME_PLACEHOLDER, peerName);
+  } else {
+    label = `${peerName} ${track.source}`;
+  }
+  return `${label}${isLocallyMuted ? " (Muted for you)" : ""}`;
+};
+
+// src/Prebuilt/components/VideoTile.jsx
+var Tile = ({
+  peerId,
+  trackId,
+  width,
+  height,
+  objectFit = "cover",
+  canMinimise = false,
+  isDragabble = false,
+  rootCSS = {},
+  containerCSS = {},
+  enableSpotlightingPeer = true,
+  hideParticipantNameOnTile = false,
+  roundedVideoTile = true,
+  hideAudioMuteOnTile = false,
+  hideMetadataOnTile = false
+}) => {
+  var _a, _b;
+  const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID2(peerId);
+  const track = useHMSStore21(trackSelector);
+  const isMobile = useMedia10(config.media.md);
+  const peerName = useHMSStore21(selectPeerNameByID(peerId));
+  const audioTrack = useHMSStore21(selectAudioTrackByPeerID(peerId));
+  const localPeerID = useHMSStore21(selectLocalPeerID6);
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
+  const isAudioMuted = !useHMSStore21(selectIsPeerAudioEnabled2(peerId));
+  const isVideoMuted = !(track == null ? void 0 : track.enabled);
+  const [isMouseHovered, setIsMouseHovered] = useState23(false);
+  const isVideoDegraded = track == null ? void 0 : track.degraded;
+  const isLocal = localPeerID === peerId;
+  const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+  const pinned = isSameTile({
+    trackId: pinnedTrackId,
+    videoTrackID: track == null ? void 0 : track.id,
+    audioTrackID: audioTrack == null ? void 0 : audioTrack.id
+  });
+  const spotlighted = useHMSStore21(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
+  const label = getVideoTileLabel({
+    peerName,
+    track,
+    isLocal
+  });
+  const onHoverHandler = useCallback9((event) => {
+    setIsMouseHovered(event.type === "mouseenter");
+  }, []);
+  const ref = useRef7(null);
+  const calculatedHeight = ((_a = ref.current) == null ? void 0 : _a.clientHeight) || "";
+  const calculatedWidth = ((_b = ref.current) == null ? void 0 : _b.clientWidth) || "";
+  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
+  const [avatarSize, attribBoxSize] = useMemo2(() => {
+    if (!calculatedWidth || !calculatedHeight) {
+      return [void 0, void 0];
+    }
+    let avatarSize2 = "large";
+    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
+      avatarSize2 = "small";
+    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
+      avatarSize2 = "medium";
+    }
+    let attribBoxSize2 = "medium";
+    if (calculatedWidth <= 180 || calculatedHeight <= 180) {
+      attribBoxSize2 = "small";
+    }
+    return [avatarSize2, attribBoxSize2];
+  }, [calculatedWidth, calculatedHeight]);
+  return /* @__PURE__ */ React44.createElement(
+    StyledVideoTile.Root,
+    {
+      ref,
+      css: __spreadValues({
+        width,
+        height
+      }, rootCSS),
+      "data-testid": `participant_tile_${peerName}`
+    },
+    peerName !== void 0 ? /* @__PURE__ */ React44.createElement(
+      StyledVideoTile.Container,
+      {
+        onMouseEnter: onHoverHandler,
+        onMouseLeave: onHoverHandler,
+        noRadius: !roundedVideoTile,
+        css: containerCSS
+      },
+      showStatsOnTiles && isTileBigEnoughToShowStats ? /* @__PURE__ */ React44.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
+      /* @__PURE__ */ React44.createElement(
+        Video,
+        {
+          trackId: track == null ? void 0 : track.id,
+          attach: isLocal ? void 0 : !isAudioOnly,
+          mirror: mirrorLocalVideo && peerId === localPeerID && (track == null ? void 0 : track.source) === "regular" && (track == null ? void 0 : track.facingMode) !== "environment",
+          noRadius: !roundedVideoTile,
+          "data-testid": "participant_video_tile",
+          css: {
+            objectFit,
+            filter: isVideoDegraded ? "blur($space$2)" : void 0,
+            bg: "transparent"
+          }
+        }
+      ),
+      isVideoMuted || !isLocal && isAudioOnly ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React44.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null,
+      !hideAudioMuteOnTile ? isAudioMuted ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AudioIndicator, { "data-testid": "participant_audio_mute_icon", size: attribBoxSize }, /* @__PURE__ */ React44.createElement(MicOffIcon5, null)) : /* @__PURE__ */ React44.createElement(StyledVideoTile.AudioIndicator, { size: attribBoxSize }, /* @__PURE__ */ React44.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id, size: attribBoxSize })) : null,
+      isMouseHovered || isDragabble && isMobile ? /* @__PURE__ */ React44.createElement(
+        TileMenu_default,
+        {
+          peerID: peerId,
+          audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
+          videoTrackID: track == null ? void 0 : track.id,
+          canMinimise,
+          enableSpotlightingPeer
+        }
+      ) : null,
+      !hideMetadataOnTile && /* @__PURE__ */ React44.createElement(PeerMetadata, { peerId, size: attribBoxSize }),
+      /* @__PURE__ */ React44.createElement(
+        TileConnection_default,
+        {
+          hideLabel: hideParticipantNameOnTile,
+          name: label,
+          isTile: true,
+          peerId,
+          width,
+          pinned,
+          spotlighted
+        }
+      )
+    ) : null
+  );
+};
+var PeerMetadata = ({ peerId, size }) => {
+  const metaData = useHMSStore21(selectPeerMetadata2(peerId));
+  const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
+  const isHandRaised = useHMSStore21(selectHasPeerHandRaised2(peerId));
+  return /* @__PURE__ */ React44.createElement(Fragment9, null, isHandRaised ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React44.createElement(HandIcon4, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React44.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
+};
+var VideoTile = React44.memo(Tile);
+var VideoTile_default = VideoTile;
+
+// src/Prebuilt/components/hooks/useVideoTileLayout.ts
+import React45, { useContext } from "react";
+var VideoTileContext = React45.createContext({
+  enableSpotlightingPeer: true,
+  hideParticipantNameOnTile: false,
   roundedVideoTile: true,
   hideAudioMuteOnTile: false,
   hideAudioLevelOnTile: false,
@@ -3295,14 +4055,14 @@ var useVideoTileContext = () => {
 
 // src/Prebuilt/components/InsetTile.tsx
 var MinimisedTile = ({ setMinimised }) => {
-  return /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React39.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React39.createElement(Text, null, "You"), /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React46.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React46.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React46.createElement(Text, null, "You"), /* @__PURE__ */ React46.createElement(
     IconButton_default,
     {
       className: "__cancel-drag-event",
       onClick: () => setMinimised(false),
       css: { bg: "transparent", border: "transparent" }
     },
-    /* @__PURE__ */ React39.createElement(ExpandIcon2, null)
+    /* @__PURE__ */ React46.createElement(ExpandIcon2, null)
   ));
 };
 var insetHeightPx = 180;
@@ -3310,12 +4070,12 @@ var insetMaxWidthPx = 240;
 var defaultMobileAspectRatio = 9 / 16;
 var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
-  const isMobile = useMedia6(config.media.md);
-  const isLandscape = useMedia6(config.media.ls);
-  const localPeer = useHMSStore18(selectLocalPeer);
+  const isMobile = useMedia11(config.media.md);
+  const isLandscape = useMedia11(config.media.ls);
+  const localPeer = useHMSStore22(selectLocalPeer);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore18(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isAllowedToPublish = useHMSStore18(selectIsAllowedToPublish2);
+  const videoTrack = useHMSStore22(selectVideoTrackByID2(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isAllowedToPublish = useHMSStore22(selectIsAllowedToPublish2);
   const videoTileProps = useVideoTileContext();
   let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
   if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
@@ -3327,8 +4087,8 @@ var InsetTile = () => {
     width = 240;
     height = width / aspectRatio;
   }
-  const nodeRef = useRef6(null);
-  useEffect7(() => {
+  const nodeRef = useRef8(null);
+  useEffect10(() => {
     const node = nodeRef.current;
     if (!node || !window.ResizeObserver) {
       return;
@@ -3349,7 +4109,7 @@ var InsetTile = () => {
   if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React46.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React46.createElement(
     Box,
     {
       ref: nodeRef,
@@ -3365,7 +4125,7 @@ var InsetTile = () => {
         h: height
       } : {})
     },
-    minimised ? /* @__PURE__ */ React39.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React39.createElement(
+    minimised ? /* @__PURE__ */ React46.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React46.createElement(
       VideoTile_default,
       __spreadProps(__spreadValues({
         peerId: localPeer == null ? void 0 : localPeer.id,
@@ -3387,8 +4147,8 @@ var InsetTile = () => {
 };
 
 // src/Prebuilt/components/Pagination.tsx
-import React40, { useEffect as useEffect8 } from "react";
-import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
+import React47, { useEffect as useEffect11 } from "react";
+import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
   onPageChange,
@@ -3404,7 +4164,7 @@ var Pagination = ({
     e.stopPropagation();
     onPageChange(Math.max(page - 1, 0));
   };
-  useEffect8(() => {
+  useEffect11(() => {
     if (page >= numPages) {
       onPageChange(Math.max(0, numPages - 1));
     }
@@ -3412,7 +4172,7 @@ var Pagination = ({
   if (numPages <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React40.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React40.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React40.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React47.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React47.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React47.createElement(ChevronLeftIcon3, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React47.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React47.createElement(
     StyledPagination.Dot,
     {
       key: i,
@@ -3422,15 +4182,15 @@ var Pagination = ({
         onPageChange(i);
       }
     }
-  ))) : null, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React40.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+  ))) : null, /* @__PURE__ */ React47.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React47.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
 };
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
-import React41 from "react";
-var Grid = React41.forwardRef(
+import React48 from "react";
+var Grid = React48.forwardRef(
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
-    return /* @__PURE__ */ React41.createElement(
+    return /* @__PURE__ */ React48.createElement(
       Box,
       {
         ref,
@@ -3448,7 +4208,7 @@ var Grid = React41.forwardRef(
       },
       tiles == null ? void 0 : tiles.map((tile) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ React41.createElement(
+        return /* @__PURE__ */ React48.createElement(
           VideoTile_default,
           __spreadValues({
             key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
@@ -3466,8 +4226,8 @@ var Grid = React41.forwardRef(
 );
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-import { useEffect as useEffect9, useMemo as useMemo2, useState as useState20 } from "react";
-import { useMeasure as useMeasure2, useMedia as useMedia7 } from "react-use";
+import { useEffect as useEffect12, useMemo as useMemo3, useState as useState24 } from "react";
+import { useMeasure as useMeasure2, useMedia as useMedia12 } from "react-use";
 import {
   getPeersWithTiles,
   selectTracksMap as selectTracksMap3,
@@ -3477,12 +4237,12 @@ var aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4
 var usePagesWithTiles = ({ peers, maxTileCount }) => {
   const vanillaStore = useHMSVanillaStore3();
   const tracksMap = vanillaStore.getState(selectTracksMap3);
-  const peersWithTiles = useMemo2(
+  const peersWithTiles = useMemo3(
     () => getPeersWithTiles(peers, tracksMap, () => false),
     [peers, tracksMap]
   );
   const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
-  const pagesList = useMemo2(() => {
+  const pagesList = useMemo3(() => {
     let sliceStart = 0;
     let remaining = peersWithTiles.length;
     const list = [];
@@ -3503,9 +4263,9 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore3();
   const [ref, { width, height }] = useMeasure2();
-  const isMobile = useMedia7(config.media.lg);
-  const [pagesWithTiles, setPagesWithTiles] = useState20([]);
-  useEffect9(() => {
+  const isMobile = useMedia12(config.media.lg);
+  const [pagesWithTiles, setPagesWithTiles] = useState24([]);
+  useEffect12(() => {
     if (width === 0 || height === 0) {
       return;
     }
@@ -3572,15 +4332,15 @@ var useTileLayout = ({
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore19(selectLocalPeer2);
-  const isMobile = useMedia8(config.media.md);
+  const localPeer = useHMSStore23(selectLocalPeer2);
+  const isMobile = useMedia13(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
     peers,
     maxTileCount
   });
-  const inputPeers = useMemo3(
+  const inputPeers = useMemo4(
     () => pageList.length === 0 ? localPeer ? [localPeer] : [] : peers,
     [pageList.length, peers, localPeer]
   );
@@ -3593,14 +4353,14 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     maxTileCount,
     edgeToEdge
   });
-  const [page, setPage] = useState21(0);
+  const [page, setPage] = useState25(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect10(() => {
+  useEffect13(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React42.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React42.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React49.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React49.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React49.createElement(
     Pagination,
     {
       page,
@@ -3610,20 +4370,20 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
       },
       numPages: pagesWithTiles.length
     }
-  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ React42.createElement(InsetTile, null));
+  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ React49.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
-import React45, { useEffect as useEffect12, useState as useState23 } from "react";
-import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+import React52, { useEffect as useEffect15, useState as useState27 } from "react";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore24 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-import React44, { useEffect as useEffect11, useState as useState22 } from "react";
-import { useMedia as useMedia9 } from "react-use";
+import React51, { useEffect as useEffect14, useState as useState26 } from "react";
+import { useMedia as useMedia14 } from "react-use";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
-import React43 from "react";
-var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React43.createElement(
+import React50 from "react";
+var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React50.createElement(
   Flex,
   {
     direction: "column",
@@ -3632,7 +4392,7 @@ var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React43.createElement(
   children
 );
 var ProminentSection = ({ children, css = {} }) => {
-  return /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
+  return /* @__PURE__ */ React50.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
 };
 var SecondarySection = ({
   tiles,
@@ -3643,12 +4403,12 @@ var SecondarySection = ({
   if (!(tiles == null ? void 0 : tiles.length)) {
     return null;
   }
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React50.createElement(
     Box,
     {
       css: {
         display: "grid",
-        gridTemplateRows: React43.Children.count(children) > 0 ? "136px auto" : "154px",
+        gridTemplateRows: React50.Children.count(children) > 0 ? "136px auto" : "154px",
         gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
         margin: "0 auto",
         gap: "$2 $4",
@@ -3658,7 +4418,7 @@ var SecondarySection = ({
     },
     tiles.map((tile) => {
       var _a, _b, _c, _d;
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React50.createElement(
         VideoTile_default,
         __spreadValues({
           key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
@@ -3675,7 +4435,7 @@ var SecondarySection = ({
         }, tileLayoutProps)
       );
     }),
-    /* @__PURE__ */ React43.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
+    /* @__PURE__ */ React50.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
   );
 };
 var ProminenceLayout = {
@@ -3687,17 +4447,17 @@ var ProminenceLayout = {
 // src/Prebuilt/components/SecondaryTiles.tsx
 var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia14(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
-  const [page, setPage] = useState22(0);
+  const [page, setPage] = useState26(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect11(() => {
+  useEffect14(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React44.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React51.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React51.createElement(
     Pagination,
     {
       page,
@@ -3711,10 +4471,10 @@ var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
 };
 
 // src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var useRoleProminencePeers = (prominentRoles, peers, isInsetEnabled) => {
   const pinnedTrack = usePinnedTrack();
-  const [prominentPeers, secondaryPeers] = useMemo4(() => {
+  const [prominentPeers, secondaryPeers] = useMemo5(() => {
     return peers.reduce(
       (acc, peer) => {
         if (pinnedTrack) {
@@ -3755,7 +4515,7 @@ function RoleProminence({
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore20(selectLocalPeer3);
+  const localPeer = useHMSStore24(selectLocalPeer3);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -3765,14 +4525,14 @@ function RoleProminence({
     pageList,
     maxTileCount
   });
-  const [page, setPage] = useState23(0);
+  const [page, setPage] = useState27(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect12(() => {
+  useEffect15(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React45.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React45.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React45.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React52.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React52.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React52.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React52.createElement(
     Pagination,
     {
       page,
@@ -3782,34 +4542,34 @@ function RoleProminence({
       },
       numPages: pagesWithTiles.length
     }
-  ), /* @__PURE__ */ React45.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React45.createElement(InsetTile, null));
+  ), /* @__PURE__ */ React52.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React52.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-import React48, { useEffect as useEffect13, useMemo as useMemo5, useState as useState25 } from "react";
-import { useMedia as useMedia10 } from "react-use";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
+import React55, { useEffect as useEffect16, useMemo as useMemo6, useState as useState29 } from "react";
+import { useMedia as useMedia15 } from "react-use";
+import { selectPeersScreenSharing, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-import React47, { useRef as useRef7, useState as useState24 } from "react";
+import React54, { useRef as useRef9, useState as useState28 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
-  selectLocalPeerID as selectLocalPeerID6,
-  selectPeerByID as selectPeerByID2,
+  selectLocalPeerID as selectLocalPeerID7,
+  selectPeerByID as selectPeerByID3,
   selectScreenShareAudioByPeerID,
   selectScreenShareByPeerID,
-  useHMSStore as useHMSStore21
+  useHMSStore as useHMSStore25
 } from "@100mslive/react-sdk";
-import { ExpandIcon as ExpandIcon3, ShrinkIcon } from "@100mslive/react-icons";
+import { ExpandIcon as ExpandIcon3, ShrinkIcon as ShrinkIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
-import React46 from "react";
-import { useHMSActions as useHMSActions14 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon5, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
+import React53 from "react";
+import { useHMSActions as useHMSActions17 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon7, ShareScreenIcon as ShareScreenIcon3 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions14();
-  return /* @__PURE__ */ React46.createElement(
+  const hmsActions = useHMSActions17();
+  return /* @__PURE__ */ React53.createElement(
     Flex,
     {
       direction: "column",
@@ -3821,9 +4581,9 @@ var ScreenshareDisplay = () => {
         color: "$on_surface_high"
       }
     },
-    /* @__PURE__ */ React46.createElement(ShareScreenIcon2, { width: 48, height: 48 }),
-    /* @__PURE__ */ React46.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React53.createElement(ShareScreenIcon3, { width: 48, height: 48 }),
+    /* @__PURE__ */ React53.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
+    /* @__PURE__ */ React53.createElement(
       Button,
       {
         variant: "danger",
@@ -3833,7 +4593,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React46.createElement(CrossIcon5, { width: 18, height: 18 }),
+      /* @__PURE__ */ React53.createElement(CrossIcon7, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -3848,22 +4608,22 @@ var labelStyles = {
   transform: "none",
   flexShrink: 0
 };
-var Tile = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore21(selectLocalPeerID6) === peerId;
-  const track = useHMSStore21(selectScreenShareByPeerID(peerId));
-  const peer = useHMSStore21(selectPeerByID2(peerId));
+var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
+  const isLocal = useHMSStore25(selectLocalPeerID7) === peerId;
+  const track = useHMSStore25(selectScreenShareByPeerID(peerId));
+  const peer = useHMSStore25(selectPeerByID3(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const [isMouseHovered, setIsMouseHovered] = useState24(false);
+  const [isMouseHovered, setIsMouseHovered] = useState28(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const fullscreenRef = useRef7(null);
-  const [fullscreen, setFullscreen] = useState24(false);
+  const fullscreenRef = useRef9(null);
+  const [fullscreen, setFullscreen] = useState28(false);
   const isFullscreen = useFullscreen2(fullscreenRef, fullscreen, {
     onClose: () => setFullscreen(false)
   });
   const isFullScreenSupported = screenfull2.isEnabled;
-  const audioTrack = useHMSStore21(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
+  const audioTrack = useHMSStore25(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
-    return /* @__PURE__ */ React47.createElement(ScreenshareDisplay, null);
+    return /* @__PURE__ */ React54.createElement(ScreenshareDisplay, null);
   }
   if (!peer) {
     return null;
@@ -3873,7 +4633,7 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
     isLocal: false,
     track
   });
-  return /* @__PURE__ */ React47.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React54.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React54.createElement(
     StyledVideoTile.Container,
     {
       transparentBg: true,
@@ -3884,9 +4644,9 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         setIsMouseHovered(false);
       }
     },
-    showStatsOnTiles ? /* @__PURE__ */ React47.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React47.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React47.createElement(ShrinkIcon, null) : /* @__PURE__ */ React47.createElement(ExpandIcon3, null)) : null,
-    track ? /* @__PURE__ */ React47.createElement(
+    showStatsOnTiles ? /* @__PURE__ */ React54.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
+    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React54.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React54.createElement(ShrinkIcon2, null) : /* @__PURE__ */ React54.createElement(ExpandIcon3, null)) : null,
+    track ? /* @__PURE__ */ React54.createElement(
       Video,
       {
         screenShare: true,
@@ -3896,8 +4656,8 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         css: { minHeight: 0 }
       }
     ) : null,
-    /* @__PURE__ */ React47.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React54.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
+    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React54.createElement(
       TileMenu_default,
       {
         isScreenshare: true,
@@ -3909,28 +4669,28 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
     ) : null
   ));
 };
-var ScreenshareTile = React47.memo(Tile);
+var ScreenshareTile = React54.memo(Tile2);
 var ScreenshareTile_default = ScreenshareTile;
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const peersSharing = useHMSStore22(selectPeersScreenSharing);
+  const peersSharing = useHMSStore26(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState25(0);
+  const [page, setPage] = useState29(0);
   const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia10(config.media.md);
-  const secondaryPeers = useMemo5(
+  const isMobile = useMedia15(config.media.md);
+  const secondaryPeers = useMemo6(
     () => isMobile ? activeSharePeer ? [activeSharePeer, ...peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id))] : peers : peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id)),
     [activeSharePeer, peers, isMobile]
   );
-  useEffect13(() => {
+  useEffect16(() => {
     setActiveScreenSharePeer(isMobile ? "" : activeSharePeer == null ? void 0 : activeSharePeer.id);
     return () => {
       setActiveScreenSharePeer("");
     };
   }, [activeSharePeer == null ? void 0 : activeSharePeer.id, isMobile, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React48.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React48.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React48.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React48.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React55.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React55.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React55.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React55.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React55.createElement(
     SecondaryTiles,
     {
       peers: secondaryPeers,
@@ -4035,23 +4795,23 @@ var GridLayout = ({
   edge_to_edge = false,
   hide_metadata_on_tile = false
 }) => {
-  const peerSharing = useHMSStore23(selectPeerScreenSharing);
+  const peerSharing = useHMSStore27(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore23(selectPeers2);
+  const peers = useHMSStore27(selectPeers2);
   const isRoleProminence = prominentRoles.length && peers.some(
     (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
   ) || pinnedTrack;
-  const updatedPeers = useMemo6(() => {
+  const updatedPeers = useMemo7(() => {
     if (isInsetEnabled && !isRoleProminence && !peerSharing) {
       return peers.filter((peer) => !peer.isLocal);
     }
     return peers;
   }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
   const vanillaStore = useHMSVanillaStore4();
-  const [sortedPeers, setSortedPeers] = useState26(updatedPeers);
-  const peersSorter = useMemo6(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState26(0);
-  const [mainPage, setMainPage] = useState26(0);
+  const [sortedPeers, setSortedPeers] = useState30(updatedPeers);
+  const peersSorter = useMemo7(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
+  const [pageSize, setPageSize] = useState30(0);
+  const [mainPage, setMainPage] = useState30(0);
   const tileLayout = {
     enableSpotlightingPeer: enable_spotlighting_peer,
     hideParticipantNameOnTile: hide_participant_name_on_tile,
@@ -4060,7 +4820,7 @@ var GridLayout = ({
     hideMetadataOnTile: hide_metadata_on_tile,
     objectFit: video_object_fit
   };
-  useEffect14(() => {
+  useEffect17(() => {
     if (mainPage !== 0) {
       return;
     }
@@ -4071,7 +4831,7 @@ var GridLayout = ({
     peersSorter.onUpdate(setSortedPeers);
   }, [mainPage, peersSorter, updatedPeers, pageSize]);
   if (peerSharing) {
-    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React56.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React56.createElement(
       ScreenshareLayout,
       {
         peers: sortedPeers,
@@ -4081,7 +4841,7 @@ var GridLayout = ({
       }
     ));
   } else if (isRoleProminence) {
-    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React56.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React56.createElement(
       RoleProminence,
       {
         peers: sortedPeers,
@@ -4093,7 +4853,7 @@ var GridLayout = ({
       }
     ));
   }
-  return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React56.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React56.createElement(
     EqualProminence,
     {
       peers: sortedPeers,
@@ -4106,46 +4866,46 @@ var GridLayout = ({
 };
 
 // src/Prebuilt/layouts/EmbedView.jsx
-import React50, { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef8, useState as useState27 } from "react";
+import React57, { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo8, useRef as useRef10, useState as useState31 } from "react";
 import {
   selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   throwErrorHandler,
-  useHMSStore as useHMSStore24,
+  useHMSStore as useHMSStore28,
   useScreenShare as useScreenShare3
 } from "@100mslive/react-sdk";
 var EmbedView = () => {
-  return /* @__PURE__ */ React50.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React50.createElement(EmbedComponent, null));
+  return /* @__PURE__ */ React57.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React57.createElement(EmbedComponent, null));
 };
 var EmbebScreenShareView = ({ children }) => {
-  const peers = useHMSStore24(selectPeers3);
-  const peerPresenting = useHMSStore24(selectPeerScreenSharing2);
+  const peers = useHMSStore28(selectPeers3);
+  const peerPresenting = useHMSStore28(selectPeerScreenSharing2);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const smallTilePeers = useMemo7(() => {
+  const smallTilePeers = useMemo8(() => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
     return smallTilePeers2;
   }, [peers, peerPresenting]);
-  useEffect15(() => {
+  useEffect18(() => {
     setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
     return () => {
       setActiveScreenSharePeer("");
     };
   }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React50.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React50.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React50.createElement(SecondaryTiles, { peers: smallTilePeers }));
+  return /* @__PURE__ */ React57.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React57.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React57.createElement(SecondaryTiles, { peers: smallTilePeers }));
 };
 var EmbedComponent = () => {
   const { amIScreenSharing, toggleScreenShare } = useScreenShare3(throwErrorHandler);
   const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState27(false);
-  const screenShareAttemptInProgress = useRef8(false);
+  const [wasScreenShared, setWasScreenShared] = useState31(false);
+  const screenShareAttemptInProgress = useRef10(false);
   const src = embedConfig.url;
-  const iframeRef = useRef8();
-  const resetEmbedConfig = useCallback8(() => {
+  const iframeRef = useRef10();
+  const resetEmbedConfig = useCallback10(() => {
     if (src) {
       setEmbedConfig({ url: "" });
     }
   }, [src, setEmbedConfig]);
-  useEffect15(() => {
+  useEffect18(() => {
     if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
       screenShareAttemptInProgress.current = true;
       toggleScreenShare({
@@ -4158,7 +4918,7 @@ var EmbedComponent = () => {
       });
     }
   }, []);
-  useEffect15(() => {
+  useEffect18(() => {
     if (wasScreenShared && !amIScreenSharing) {
       resetEmbedConfig();
     }
@@ -4169,7 +4929,7 @@ var EmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React50.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React57.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React57.createElement(
     "iframe",
     {
       src,
@@ -4182,28 +4942,28 @@ var EmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
-import React51, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState28 } from "react";
+import React58, { useCallback as useCallback11, useEffect as useEffect19, useRef as useRef11, useState as useState32 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 var PDFView = () => {
-  return /* @__PURE__ */ React51.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React51.createElement(PDFEmbedComponent, null));
+  return /* @__PURE__ */ React58.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React58.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
-  const ref = useRef9();
+  const ref = useRef11();
   const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState28(false);
+  const [isPDFLoaded, setIsPDFLoaded] = useState32(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] = useState28(false);
-  const screenShareAttemptInProgress = useRef9(false);
-  const iframeRef = useRef9();
-  const resetEmbedConfig = useCallback9(() => {
+  const [wasScreenShared, setWasScreenShared] = useState32(false);
+  const screenShareAttemptInProgress = useRef11(false);
+  const iframeRef = useRef11();
+  const resetEmbedConfig = useCallback11(() => {
     setPDFConfig({ state: false });
   }, [setPDFConfig]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (isPDFLoaded && ref.current) {
       ref.current.contentWindow.postMessage(
         {
@@ -4213,7 +4973,7 @@ var PDFEmbedComponent = () => {
       );
     }
   }, [isPDFLoaded, themeType]);
-  useEffect16(() => {
+  useEffect19(() => {
     if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
       screenShareAttemptInProgress.current = true;
       toggleScreenShare({
@@ -4227,7 +4987,7 @@ var PDFEmbedComponent = () => {
       });
     }
   }, []);
-  useEffect16(() => {
+  useEffect19(() => {
     if (wasScreenShared && !amIScreenSharing) {
       resetEmbedConfig();
     }
@@ -4238,7 +4998,7 @@ var PDFEmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React51.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React58.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React58.createElement(
     "iframe",
     {
       src: pdfJSURL,
@@ -4271,72 +5031,72 @@ 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";
+import React65 from "react";
+import { useMedia as useMedia20 } from "react-use";
+import { selectAppData as selectAppData3, selectVideoTrackByPeerID as selectVideoTrackByPeerID3, useHMSStore as useHMSStore37 } 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 { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore30 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
+import React62, { useEffect as useEffect24, useState as useState36 } from "react";
+import { useMedia as useMedia19 } from "react-use";
+import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.jsx
-import React54, { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef13, useState as useState31 } from "react";
-import { useMedia as useMedia13 } from "react-use";
+import React61, { useCallback as useCallback16, useEffect as useEffect23, useRef as useRef15, useState as useState35 } from "react";
+import { useMedia as useMedia18 } from "react-use";
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
-  selectPeerNameByID as selectPeerNameByID3,
-  selectPermissions as selectPermissions10,
-  selectSessionStore,
-  useHMSActions as useHMSActions19,
+  selectPeerNameByID as selectPeerNameByID4,
+  selectPermissions as selectPermissions12,
+  selectSessionStore as selectSessionStore3,
+  useHMSActions as useHMSActions22,
   useHMSNotifications,
-  useHMSStore as useHMSStore29
+  useHMSStore as useHMSStore33
 } from "@100mslive/react-sdk";
-import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon6, PinIcon as PinIcon2 } from "@100mslive/react-icons";
+import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon8, PinIcon as PinIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.jsx
-import React52, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect17, useLayoutEffect, useMemo as useMemo8, useRef as useRef10, useState as useState29 } from "react";
+import React59, { Fragment as Fragment10, useCallback as useCallback13, useEffect as useEffect20, useLayoutEffect, useMemo as useMemo9, useRef as useRef12, useState as useState33 } from "react";
 import { useInView } from "react-intersection-observer";
-import { useMedia as useMedia11 } from "react-use";
+import { useMedia as useMedia16 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
   selectHMSMessages,
-  selectLocalPeerID as selectLocalPeerID7,
-  selectLocalPeerRoleName,
+  selectLocalPeerID as selectLocalPeerID8,
+  selectLocalPeerRoleName as selectLocalPeerRoleName2,
   selectMessagesByPeerID,
   selectMessagesByRole,
-  selectPeerNameByID as selectPeerNameByID2,
-  selectPermissions as selectPermissions9,
-  useHMSActions as useHMSActions16,
-  useHMSStore as useHMSStore26
+  selectPeerNameByID as selectPeerNameByID3,
+  selectPermissions as selectPermissions11,
+  useHMSActions as useHMSActions19,
+  useHMSStore as useHMSStore31
 } from "@100mslive/react-sdk";
-import { PinIcon, VerticalMenuIcon as VerticalMenuIcon5 } from "@100mslive/react-icons";
+import { PinIcon as PinIcon2, VerticalMenuIcon as VerticalMenuIcon6 } from "@100mslive/react-icons";
 
 // src/Prebuilt/images/empty-chat.svg
 var empty_chat_default = 'data:image/svg+xml,<svg width="184" height="133" viewBox="0 0 184 133" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M144.885 91.3998C145.318 91.023 145.861 90.7947 146.433 90.7483L146.446 90.7473L169.355 89.1614C169.702 89.1376 170.049 89.2101 170.358 89.3712C170.662 89.5305 170.918 89.7702 171.096 90.0642C171.098 90.0672 171.1 90.0703 171.102 90.0734L171.104 90.0766C171.281 90.3744 171.373 90.7154 171.369 91.062C171.365 91.4097 171.265 91.7496 171.08 92.044L158.85 111.504C158.539 111.986 158.081 112.356 157.544 112.56C157.007 112.764 156.419 112.791 155.866 112.636C155.313 112.482 154.823 112.155 154.469 111.703C154.115 111.25 153.915 110.697 153.898 110.123C153.898 110.109 153.898 110.094 153.898 110.08L153.996 100.307L145.347 95.7858C145.334 95.779 145.321 95.7721 145.308 95.7649C144.811 95.4785 144.417 95.0404 144.186 94.5146C143.955 93.9888 143.898 93.4029 144.024 92.8425C144.15 92.2821 144.451 91.7765 144.885 91.3998ZM167.441 91.0088L146.603 92.8952C146.49 92.9053 146.383 92.9508 146.298 93.0251C146.211 93.1005 146.151 93.2016 146.125 93.3137C146.1 93.4257 146.112 93.5429 146.158 93.6481C146.202 93.7484 146.276 93.8327 146.369 93.89L155.26 98.296L167.441 91.0088ZM156.32 100.171L168.547 92.8564L157.039 110.339C156.976 110.434 156.886 110.506 156.78 110.547C156.673 110.587 156.555 110.593 156.444 110.562C156.334 110.531 156.236 110.466 156.165 110.375C156.097 110.289 156.058 110.184 156.052 110.075L156.32 100.171Z" fill="%23444954"/>%0A<path d="M83.3248 35.4156C71.7182 47.1017 51.2098 75.5175 62.0292 95.6918C75.5536 120.91 140.453 79.2983 115.364 67.6657C90.2756 56.0331 65.8818 122.018 101.568 120.391C116.398 118.62 131.221 114.699 145.703 105.512" stroke="%23293042" stroke-width="2.25" stroke-dasharray="6 6"/>%0A<rect x="0.00256348" y="0.5" width="173.524" height="58.3398" rx="29.1699" fill="%23272A31"/>%0A<g opacity="0.4">%0A<rect x="24.7526" y="20.9312" width="111" height="4.5" rx="2.25" fill="%23444954"/>%0A</g>%0A<g opacity="0.4">%0A<rect x="38.2526" y="34.4312" width="110.25" height="4.5" rx="2.25" fill="%23444954"/>%0A</g>%0A<path d="M40.3918 71.5547L28.4246 55.0999L52.3589 55.0999L40.3918 71.5547Z" fill="%23272A31"/>%0A</svg>%0A';
 
 // src/Prebuilt/components/hooks/useSetPinnedMessage.js
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback12 } from "react";
 import {
-  selectPeerNameByID,
+  selectPeerNameByID as selectPeerNameByID2,
   selectSessionMetadata,
-  useHMSActions as useHMSActions15,
-  useHMSStore as useHMSStore25,
+  useHMSActions as useHMSActions18,
+  useHMSStore as useHMSStore29,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
-  const hmsActions = useHMSActions15();
+  const hmsActions = useHMSActions18();
   const vanillaStore = useHMSVanillaStore5();
-  const pinnedMessage = useHMSStore25(selectSessionMetadata);
-  const setPinnedMessage = useCallback10(
+  const pinnedMessage = useHMSStore29(selectSessionMetadata);
+  const setPinnedMessage = useCallback12(
     /**
      * @param {import("@100mslive/react-sdk").HMSMessage | undefined} message
      */
     (message) => __async(void 0, null, function* () {
-      const peerName = vanillaStore.getState(selectPeerNameByID(message == null ? void 0 : message.sender)) || (message == null ? void 0 : message.senderName);
+      const peerName = vanillaStore.getState(selectPeerNameByID2(message == null ? void 0 : message.sender)) || (message == null ? void 0 : message.senderName);
       const newPinnedMessage = message ? peerName ? `${peerName}: ${message.message}` : message.message : null;
       if (newPinnedMessage !== pinnedMessage) {
         yield hmsActions.sessionStore.set(SESSION_STORE_KEY.PINNED_MESSAGE, newPinnedMessage).catch((err) => ToastManager.addToast({ title: err.description }));
@@ -4347,6 +5107,19 @@ var useSetPinnedMessage = () => {
   return { setPinnedMessage };
 };
 
+// src/Prebuilt/components/Chat/useUnreadCount.js
+import {
+  selectMessagesUnreadCountByPeerID,
+  selectMessagesUnreadCountByRole,
+  selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
+  useHMSStore as useHMSStore30
+} from "@100mslive/react-sdk";
+var useUnreadCount = ({ role, peerId }) => {
+  const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
+  const unreadCount = useHMSStore30(unreadCountSelector);
+  return unreadCount;
+};
+
 // src/Prebuilt/components/Chat/ChatBody.jsx
 var formatTime = (date) => {
   if (!(date instanceof Date)) {
@@ -4364,7 +5137,7 @@ var formatTime = (date) => {
   return `${hours}:${mins} ${suffix}`;
 };
 var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Flex,
     {
       align: "center",
@@ -4376,16 +5149,16 @@ var MessageTypeContainer = ({ left, right }) => {
         r: "$0"
       }
     },
-    left && /* @__PURE__ */ React52.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
-    left && right && /* @__PURE__ */ React52.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
-    right && /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
+    left && /* @__PURE__ */ React59.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
+    left && right && /* @__PURE__ */ React59.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
+    right && /* @__PURE__ */ React59.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
   );
 };
 var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-  const peerName = useHMSStore26(selectPeerNameByID2(receiver));
-  const localPeerRoleName = useHMSStore26(selectLocalPeerRoleName);
+  const peerName = useHMSStore31(selectPeerNameByID3(receiver));
+  const localPeerRoleName = useHMSStore31(selectLocalPeerRoleName2);
   if (receiver) {
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React59.createElement(
       MessageTypeContainer,
       {
         left: hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ""}` : "TO YOU",
@@ -4394,7 +5167,7 @@ var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
     );
   }
   if (roles && roles.length) {
-    return /* @__PURE__ */ React52.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
+    return /* @__PURE__ */ React59.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
   }
   return null;
 };
@@ -4408,10 +5181,10 @@ var Link = styled("a", {
 });
 var AnnotisedMessage = ({ message }) => {
   if (!message) {
-    return /* @__PURE__ */ React52.createElement(Fragment8, null);
+    return /* @__PURE__ */ React59.createElement(Fragment10, null);
   }
-  return /* @__PURE__ */ React52.createElement(Fragment8, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React52.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
+  return /* @__PURE__ */ React59.createElement(Fragment10, null, message.trim().split(/(\s)/).map(
+    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React59.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
   ));
 };
 var getMessageType = ({ roles, receiver }) => {
@@ -4421,18 +5194,18 @@ var getMessageType = ({ roles, receiver }) => {
   return receiver ? "private" : "";
 };
 var ChatActions = ({ onPin, showPinAction }) => {
-  const [open, setOpen] = useState29(false);
+  const [open, setOpen] = useState33(false);
   if (!showPinAction) {
     return null;
   }
-  return /* @__PURE__ */ React52.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React52.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React52.createElement(IconButton, null, /* @__PURE__ */ React52.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React52.createElement(VerticalMenuIcon5, null)))), /* @__PURE__ */ React52.createElement(Dropdown.Portal, null, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React59.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React59.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React59.createElement(IconButton, null, /* @__PURE__ */ React59.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React59.createElement(VerticalMenuIcon6, null)))), /* @__PURE__ */ React59.createElement(Dropdown.Portal, null, /* @__PURE__ */ React59.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: "end",
       css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
     },
-    /* @__PURE__ */ React52.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React52.createElement(PinIcon, null), /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
+    /* @__PURE__ */ React59.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React59.createElement(PinIcon2, null), /* @__PURE__ */ React59.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
   )));
 };
 var SenderName = styled(Text, {
@@ -4444,120 +5217,127 @@ var SenderName = styled(Text, {
   color: "$on_surface_high",
   fontWeight: "$semiBold"
 });
-var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
-  var _a, _b;
-  const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-  const rowRef = useRef10(null);
-  useEffect17(() => {
-    if (rowRef.current) {
-      setRowHeight(index, rowRef.current.clientHeight);
-    }
-  }, [index, setRowHeight]);
-  const isMobile = useMedia11(config.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
-  const hmsActions = useHMSActions16();
-  const localPeerId = useHMSStore26(selectLocalPeerID7);
-  const permissions = useHMSStore26(selectPermissions9);
-  const messageType = getMessageType({
-    roles: message.recipientRoles,
-    receiver: message.recipientPeer
-  });
-  const showPinAction = permissions.removeOthers && !messageType && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages);
-  useEffect17(() => {
-    if (message.id && !message.read && inView) {
-      hmsActions.setMessageRead(true, message.id);
-    }
-  }, [message.read, hmsActions, inView, message.id]);
-  return /* @__PURE__ */ React52.createElement(
-    Box,
-    {
-      ref,
-      as: "div",
-      css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
-      style
-    },
-    /* @__PURE__ */ React52.createElement(
-      Flex,
+var ChatMessage = React59.memo(
+  ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
+    var _a, _b;
+    const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+    const rowRef = useRef12(null);
+    useEffect20(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current.clientHeight);
+      }
+    }, [index, setRowHeight]);
+    const isMobile = useMedia16(config.media.md);
+    const { elements } = useRoomLayoutConferencingScreen();
+    const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
+    const hmsActions = useHMSActions19();
+    const localPeerId = useHMSStore31(selectLocalPeerID8);
+    const permissions = useHMSStore31(selectPermissions11);
+    const messageType = getMessageType({
+      roles: message.recipientRoles,
+      receiver: message.recipientPeer
+    });
+    const showPinAction = permissions.removeOthers && !messageType && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages);
+    useEffect20(() => {
+      if (message.id && !message.read && inView) {
+        hmsActions.setMessageRead(true, message.id);
+      }
+    }, [message.read, hmsActions, inView, message.id]);
+    useEffect20(() => {
+      if (isLast && inView && unreadCount >= 1) {
+        scrollToBottom(1);
+      }
+    }, [inView, isLast, scrollToBottom, unreadCount]);
+    return /* @__PURE__ */ React59.createElement(
+      Box,
       {
-        ref: rowRef,
-        align: "center",
-        css: {
-          flexWrap: "wrap",
-          // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
-          r: messageType ? "$1" : void 0,
-          px: messageType ? "$4" : "$2",
-          py: messageType ? "$4" : 0,
-          userSelect: "none"
-        },
-        key: message.time,
-        "data-testid": "chat_msg"
+        ref,
+        as: "div",
+        css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
+        style
       },
-      /* @__PURE__ */ React52.createElement(
-        Text,
+      /* @__PURE__ */ React59.createElement(
+        Flex,
         {
+          ref: rowRef,
+          align: "center",
           css: {
-            color: isOverlay ? "#FFF" : "$on_surface_high",
-            fontWeight: "$semiBold",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%"
+            flexWrap: "wrap",
+            // Theme independent color, token should not be used for transparent chat
+            bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
+            r: messageType ? "$1" : void 0,
+            px: messageType ? "$4" : "$2",
+            py: messageType ? "$4" : 0,
+            userSelect: "none"
           },
-          as: "div"
+          key: message.time,
+          "data-testid": "chat_msg"
         },
-        /* @__PURE__ */ React52.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React52.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React52.createElement(
+        /* @__PURE__ */ React59.createElement(
           Text,
           {
-            as: "span",
-            variant: "xs",
             css: {
-              ml: "$4",
-              color: "$on_surface_medium",
-              flexShrink: 0
-            }
+              color: isOverlay ? "#FFF" : "$on_surface_high",
+              fontWeight: "$semiBold",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%"
+            },
+            as: "div"
           },
-          formatTime(message.time)
-        ) : null),
-        /* @__PURE__ */ React52.createElement(
-          MessageType,
-          {
-            hasCurrentUserSent: message.sender === localPeerId,
-            receiver: message.recipientPeer,
-            roles: message.recipientRoles
-          }
+          /* @__PURE__ */ React59.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React59.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React59.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React59.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React59.createElement(
+            Text,
+            {
+              as: "span",
+              variant: "xs",
+              css: {
+                ml: "$4",
+                color: "$on_surface_medium",
+                flexShrink: 0
+              }
+            },
+            formatTime(message.time)
+          ) : null),
+          /* @__PURE__ */ React59.createElement(
+            MessageType,
+            {
+              hasCurrentUserSent: message.sender === localPeerId,
+              receiver: message.recipientPeer,
+              roles: message.recipientRoles
+            }
+          ),
+          !isOverlay ? /* @__PURE__ */ React59.createElement(ChatActions, { onPin, showPinAction }) : null
         ),
-        !isOverlay ? /* @__PURE__ */ React52.createElement(ChatActions, { onPin, showPinAction }) : null
-      ),
-      /* @__PURE__ */ React52.createElement(
-        Text,
-        {
-          variant: "sm",
-          css: {
-            w: "100%",
-            mt: "$2",
-            wordBreak: "break-word",
-            whiteSpace: "pre-wrap",
-            userSelect: "all",
-            color: isOverlay ? "#FFF" : "$on_surface_high"
+        /* @__PURE__ */ React59.createElement(
+          Text,
+          {
+            variant: "sm",
+            css: {
+              w: "100%",
+              mt: "$2",
+              wordBreak: "break-word",
+              whiteSpace: "pre-wrap",
+              userSelect: "all",
+              color: isOverlay ? "#FFF" : "$on_surface_high"
+            },
+            onClick: (e) => e.stopPropagation()
           },
-          onClick: (e) => e.stopPropagation()
-        },
-        /* @__PURE__ */ React52.createElement(AnnotisedMessage, { message: message.message })
+          /* @__PURE__ */ React59.createElement(AnnotisedMessage, { message: message.message })
+        )
       )
-    )
-  );
-});
-var ChatList = React52.forwardRef(
-  ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+    );
+  }
+);
+var ChatList = React59.forwardRef(
+  ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
       if (listRef.current && listRef.current.scrollToItem) {
         scrollToBottom(1);
       }
     }, [listRef]);
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React59.createElement(
       VariableSizeList,
       {
         ref: listRef,
@@ -4569,7 +5349,7 @@ var ChatList = React52.forwardRef(
           overflowX: "hidden"
         }
       },
-      ({ index, style }) => /* @__PURE__ */ React52.createElement(
+      ({ index, style }) => /* @__PURE__ */ React59.createElement(
         ChatMessage,
         {
           style,
@@ -4577,25 +5357,28 @@ var ChatList = React52.forwardRef(
           key: messages[index].id,
           message: messages[index],
           setRowHeight,
+          unreadCount,
+          isLast: index >= messages.length - 2,
+          scrollToBottom,
           onPin: () => setPinnedMessage(messages[index])
         }
       )
     );
   }
 );
-var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom }, listRef) => {
-  const rowHeights = useRef10({});
+var VirtualizedChatMessages = React59.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
+  const rowHeights = useRef12({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
   }
-  const setRowHeight = useCallback11(
+  const setRowHeight = useCallback13(
     (index, size) => {
       listRef.current.resetAfterIndex(0);
       rowHeights.current = __spreadProps(__spreadValues({}, rowHeights.current), { [index]: size });
     },
     [listRef]
   );
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Box,
     {
       css: {
@@ -4604,14 +5387,14 @@ var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom },
       },
       as: "div"
     },
-    /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React59.createElement(
       AutoSizer,
       {
         style: {
           width: "90%"
         }
       },
-      ({ height, width }) => /* @__PURE__ */ React52.createElement(
+      ({ height, width }) => /* @__PURE__ */ React59.createElement(
         ChatList,
         {
           width,
@@ -4620,21 +5403,23 @@ var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom },
           setRowHeight,
           getRowHeight,
           scrollToBottom,
-          ref: listRef
+          ref: listRef,
+          unreadCount
         }
       )
     )
   );
 });
-var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+var ChatBody = React59.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
   var _a;
   const storeMessageSelector = role ? selectMessagesByRole(role) : peerId ? selectMessagesByPeerID(peerId) : selectHMSMessages;
-  let messages = useHMSStore26(storeMessageSelector);
-  messages = useMemo8(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
-  const isMobile = useMedia11(config.media.md);
+  let messages = useHMSStore31(storeMessageSelector);
+  messages = useMemo9(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
+  const isMobile = useMedia16(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
+  const unreadCount = useUnreadCount({ role, peerId });
   if (messages.length === 0 && !(isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay))) {
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React59.createElement(
       Flex,
       {
         css: {
@@ -4646,7 +5431,7 @@ var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
         align: "center",
         justify: "center"
       },
-      /* @__PURE__ */ React52.createElement(Box, null, /* @__PURE__ */ React52.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ React52.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ React52.createElement(
+      /* @__PURE__ */ React59.createElement(Box, null, /* @__PURE__ */ React59.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ React59.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ React59.createElement(
         Text,
         {
           variant: "sm",
@@ -4656,27 +5441,35 @@ var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
       ))
     );
   }
-  return /* @__PURE__ */ React52.createElement(Fragment8, null, /* @__PURE__ */ React52.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
+  return /* @__PURE__ */ React59.createElement(Fragment10, null, /* @__PURE__ */ React59.createElement(
+    VirtualizedChatMessages,
+    {
+      messages,
+      scrollToBottom,
+      unreadCount,
+      ref: listRef
+    }
+  ));
 });
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
-import React53, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef12, useState as useState30 } from "react";
-import { useMedia as useMedia12 } from "react-use";
+import React60, { useCallback as useCallback15, useEffect as useEffect22, useRef as useRef14, useState as useState34 } from "react";
+import { useMedia as useMedia17 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { useHMSActions as useHMSActions18 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions21 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, SendIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AppData/useChatState.js
-import { useCallback as useCallback12 } from "react";
-import { selectAppData as selectAppData2, useHMSActions as useHMSActions17, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
+import { useCallback as useCallback14 } from "react";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions20, useHMSStore as useHMSStore32 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions17();
-  let chatDraftMessage = useHMSStore27(selectAppData2(APP_DATA.chatDraft));
+  const hmsActions = useHMSActions20();
+  let chatDraftMessage = useHMSStore32(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
-  const setDraftMessage = useCallback12(
+  const setDraftMessage = useCallback14(
     (message) => {
       hmsActions.setAppData(APP_DATA.chatDraft, message, true);
     },
@@ -4686,10 +5479,10 @@ var useChatDraftMessage = () => {
 };
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-import { useEffect as useEffect18, useRef as useRef11 } from "react";
+import { useEffect as useEffect21, useRef as useRef13 } from "react";
 var useEmojiPickerStyles = (showing) => {
-  const ref = useRef11(null);
-  useEffect18(() => {
+  const ref = useRef13(null);
+  useEffect21(() => {
     if (showing) {
       setTimeout(() => {
         var _a, _b;
@@ -4737,9 +5530,9 @@ var TextArea = styled("textarea", {
   }
 });
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState30(false);
+  const [showEmoji, setShowEmoji] = useState34(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React53.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React53.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React53.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React53.createElement(EmojiIcon3, null))), /* @__PURE__ */ React53.createElement(Popover.Portal, null, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React60.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React60.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React60.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React60.createElement(EmojiIcon3, null))), /* @__PURE__ */ React60.createElement(Popover.Portal, null, /* @__PURE__ */ React60.createElement(
     Popover.Content,
     {
       alignOffset: -40,
@@ -4749,7 +5542,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React60.createElement(
       Box,
       {
         css: {
@@ -4758,7 +5551,7 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ React53.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ React60.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
@@ -4769,13 +5562,13 @@ var ChatFooter = ({
   children
 }) => {
   var _a;
-  const hmsActions = useHMSActions18();
-  const inputRef = useRef12(null);
+  const hmsActions = useHMSActions21();
+  const inputRef = useRef14(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia12(config.media.md);
+  const isMobile = useMedia17(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isOverlayChat = (_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay;
-  const sendMessage = useCallback13(() => __async(void 0, null, function* () {
+  const sendMessage = useCallback15(() => __async(void 0, null, function* () {
     var _a2;
     const message = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value;
     if (!message || !message.trim().length) {
@@ -4798,19 +5591,19 @@ var ChatFooter = ({
       ToastManager.addToast({ title: err.message });
     }
   }), [role, peerId, hmsActions, onSend]);
-  useEffect19(() => {
+  useEffect22(() => {
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
     }
   }, [draftMessage]);
-  useEffect19(() => {
+  useEffect22(() => {
     const messageElement = inputRef.current;
     return () => {
       setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
     };
   }, [setDraftMessage]);
-  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React60.createElement(
     Flex,
     {
       align: "center",
@@ -4831,7 +5624,7 @@ var ChatFooter = ({
       }
     },
     children,
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React60.createElement(
       TextArea,
       {
         css: {
@@ -4859,7 +5652,7 @@ var ChatFooter = ({
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    !isMobile ? /* @__PURE__ */ React53.createElement(
+    !isMobile ? /* @__PURE__ */ React60.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -4869,7 +5662,7 @@ var ChatFooter = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React60.createElement(
       IconButton,
       {
         className: "send-msg",
@@ -4882,31 +5675,18 @@ var ChatFooter = ({
         },
         "data-testid": "send_msg_btn"
       },
-      /* @__PURE__ */ React53.createElement(SendIcon, null)
+      /* @__PURE__ */ React60.createElement(SendIcon, null)
     )
   )));
 };
 
-// src/Prebuilt/components/Chat/useUnreadCount.js
-import {
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore28
-} from "@100mslive/react-sdk";
-var useUnreadCount = ({ role, peerId }) => {
-  const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
-  const unreadCount = useHMSStore28(unreadCountSelector);
-  return unreadCount;
-};
-
 // src/Prebuilt/components/Chat/Chat.jsx
 var PINNED_MESSAGE_LENGTH = 80;
 var PinnedMessage = ({ clearPinnedMessage }) => {
-  const permissions = useHMSStore29(selectPermissions10);
-  const pinnedMessage = useHMSStore29(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
+  const permissions = useHMSStore33(selectPermissions12);
+  const pinnedMessage = useHMSStore33(selectSessionStore3(SESSION_STORE_KEY.PINNED_MESSAGE));
   const formattedPinnedMessage = (pinnedMessage == null ? void 0 : pinnedMessage.length) && pinnedMessage.length > PINNED_MESSAGE_LENGTH ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...` : pinnedMessage;
-  return pinnedMessage ? /* @__PURE__ */ React54.createElement(
+  return pinnedMessage ? /* @__PURE__ */ React61.createElement(
     Flex,
     {
       title: pinnedMessage,
@@ -4914,8 +5694,8 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
       align: "center",
       justify: "between"
     },
-    /* @__PURE__ */ React54.createElement(PinIcon2, null),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React61.createElement(PinIcon3, null),
+    /* @__PURE__ */ React61.createElement(
       Box,
       {
         css: {
@@ -4925,15 +5705,15 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React54.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React54.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
+      /* @__PURE__ */ React61.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React61.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
     ),
-    permissions.removeOthers && /* @__PURE__ */ React54.createElement(
+    permissions.removeOthers && /* @__PURE__ */ React61.createElement(
       Flex,
       {
         onClick: () => clearPinnedMessage(),
         css: { cursor: "pointer", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
       },
-      /* @__PURE__ */ React54.createElement(CrossIcon6, null)
+      /* @__PURE__ */ React61.createElement(CrossIcon8, null)
     )
   ) : null;
 };
@@ -4942,17 +5722,17 @@ var Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  const peerName = useHMSStore29(selectPeerNameByID3(peerSelector));
-  const [chatOptions, setChatOptions] = useState31({
+  const peerName = useHMSStore33(selectPeerNameByID4(peerSelector));
+  const [chatOptions, setChatOptions] = useState35({
     role: roleSelector || "",
     peerId: peerSelector && peerName ? peerSelector : "",
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : "Everyone"
   });
-  const [isSelectorOpen] = useState31(false);
-  const listRef = useRef13(null);
-  const hmsActions = useHMSActions19();
+  const [isSelectorOpen] = useState35(false);
+  const listRef = useRef15(null);
+  const hmsActions = useHMSActions22();
   const { setPinnedMessage } = useSetPinnedMessage();
-  useEffect20(() => {
+  useEffect23(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
       setPeerSelector("");
       setChatOptions({
@@ -4964,14 +5744,14 @@ var Chat = ({ screenType }) => {
   }, [notification, peerSelector, setPeerSelector]);
   const storeMessageSelector = selectHMSMessagesCount;
   const { elements } = useRoomLayoutConferencingScreen();
-  const isMobile = useMedia13(config.media.md);
+  const isMobile = useMedia18(config.media.md);
   let isScrolledToBottom = false;
   if (listRef.current) {
     const currentRef = listRef.current._outerRef;
     isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
   }
-  const messagesCount = useHMSStore29(storeMessageSelector) || 0;
-  const scrollToBottom = useCallback14(
+  const messagesCount = useHMSStore33(storeMessageSelector) || 0;
+  const scrollToBottom = useCallback16(
     (unreadCount = 0) => {
       var _a2;
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -4985,7 +5765,7 @@ var Chat = ({ screenType }) => {
     },
     [hmsActions, messagesCount]
   );
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React61.createElement(
     Flex,
     {
       direction: "column",
@@ -4994,8 +5774,8 @@ var Chat = ({ screenType }) => {
         gap: "$4"
       }
     },
-    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? null : /* @__PURE__ */ React54.createElement(React54.Fragment, null, ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages) ? /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
-    /* @__PURE__ */ React54.createElement(
+    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? null : /* @__PURE__ */ React61.createElement(React61.Fragment, null, ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages) ? /* @__PURE__ */ React61.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
+    /* @__PURE__ */ React61.createElement(
       ChatBody,
       {
         role: chatOptions.role,
@@ -5005,7 +5785,7 @@ var Chat = ({ screenType }) => {
         screenType
       }
     ),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React61.createElement(
       ChatFooter,
       {
         role: chatOptions.role,
@@ -5023,7 +5803,7 @@ var Chat = ({ screenType }) => {
         },
         peerId: chatOptions.peerId
       },
-      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React54.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
+      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React61.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
     )
   );
 };
@@ -5032,7 +5812,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   if (!unreadCount) {
     return null;
   }
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React61.createElement(
     Flex,
     {
       justify: "center",
@@ -5043,7 +5823,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React61.createElement(
       Button,
       {
         variant: "standard",
@@ -5066,7 +5846,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       },
       "New ",
       unreadCount === 1 ? "message" : "messages",
-      /* @__PURE__ */ React54.createElement(ChevronDownIcon2, null)
+      /* @__PURE__ */ React61.createElement(ChevronDownIcon2, null)
     )
   );
 };
@@ -5081,23 +5861,23 @@ var tabTriggerCSS = {
   justifyContent: "center"
 };
 var ParticipantCount2 = ({ count }) => {
-  return count < 1e3 ? /* @__PURE__ */ React55.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React55.createElement(Tooltip, { title: count }, /* @__PURE__ */ React55.createElement("span", null, "(", getFormattedCount(count), ")"));
+  return count < 1e3 ? /* @__PURE__ */ React62.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React62.createElement(Tooltip, { title: count }, /* @__PURE__ */ React62.createElement("span", null, "(", getFormattedCount(count), ")"));
 };
-var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+var SidePaneTabs = React62.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 [activeTab, setActiveTab] = useState36(active);
+  const peerCount = useHMSStore34(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 isMobile = useMedia19(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(() => {
+  useEffect24(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
     } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
@@ -5106,10 +5886,10 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
       resetSidePane();
     }
   }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect21(() => {
+  useEffect24(() => {
     setActiveTab(active);
   }, [active]);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Flex,
     {
       direction: "column",
@@ -5120,7 +5900,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         transition: "margin 0.3s ease-in-out"
       }
     },
-    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(React55.Fragment, null, hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React55.createElement("span", null, "Participants ", /* @__PURE__ */ React55.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React62.createElement(Chat, { screenType }) : /* @__PURE__ */ React62.createElement(React62.Fragment, null, hideTabs ? /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React62.createElement("span", null, "Participants ", /* @__PURE__ */ React62.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React62.createElement(Chat, { screenType }) : /* @__PURE__ */ React62.createElement(ParticipantList, null)) : /* @__PURE__ */ React62.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -5130,7 +5910,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           size: "100%"
         }
       },
-      /* @__PURE__ */ React55.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React62.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React62.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.CHAT,
@@ -5140,7 +5920,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Chat"
-      ), /* @__PURE__ */ React55.createElement(
+      ), /* @__PURE__ */ React62.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.PARTICIPANTS,
@@ -5150,12 +5930,12 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Participants ",
-        /* @__PURE__ */ React55.createElement(ParticipantCount2, { count: peerCount })
+        /* @__PURE__ */ React62.createElement(ParticipantCount2, { count: peerCount })
       )),
-      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(ParticipantList, null)),
-      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(Chat, { screenType }))
+      /* @__PURE__ */ React62.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React62.createElement(ParticipantList, null)),
+      /* @__PURE__ */ React62.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React62.createElement(Chat, { screenType }))
     )),
-    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React55.createElement(
+    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React62.createElement(
       IconButton,
       {
         css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
@@ -5169,22 +5949,22 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         },
         "data-testid": "close_chat"
       },
-      /* @__PURE__ */ React55.createElement(CrossIcon7, null)
+      /* @__PURE__ */ React62.createElement(CrossIcon9, null)
     )
   );
 });
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
-import React57, { Fragment as Fragment10, useState as useState34 } from "react";
-import { selectPermissions as selectPermissions11, useHMSStore as useHMSStore32, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
-import { ColoredHandIcon, CrossIcon as CrossIcon8, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
+import React64, { Fragment as Fragment12, useState as useState38 } from "react";
+import { selectPermissions as selectPermissions13, useHMSStore as useHMSStore36, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
+import { ColoredHandIcon, CrossIcon as CrossIcon10, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/images/rtmp.png
 var rtmp_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABlCAYAAAC7vkbxAAAVDUlEQVR4Ae1dDXgU9Zl//7OfiWz4SCKEgCR+kIVQWb76aKUSxHp6aiGtvZ6e1XC94l3VKsVeH73rCU/vWu85rHJie9JrDWix3nFH/KhaEY1CvZ58uFQDCVQIKEkgAUO+92Pm3/ed2Zmd2cwmu5uZzQL+nmfJzOwwX7//+/l/31mAz5BTYHCWwe+/ogwc4SrgUCYBTGOMl9Gy+j0H6GQMOjlnzQLAUYmzYNgj1jcHg51wFuCsIMQ/a34V59JS4HwZrpZBBkCigoyxeuaS1jUGg82Qo8hZQsoCgXF5EaFGAn4nPs0AWAgiR2BsXWPD3lrIMeQkIRWz5t0HXFqNT25c4nc8fxJEShZKou8SEMdeFuJOX56UP7EXQMhT9pD6HX1tLtZ/wu0480dwdB+SHB1BQehrMztVM0rNmlwiJqcIIdUkSeJjeFEGiZAKLmmPlFxdHCq/BbhrDGQCIsfV9k7I9clvPYPIYajOXLw6F1RZzhBSUTn3MbQR9+u3iUUBGJi+HKKFlmoscH/8GngOPg2DiOFsZdOBvY/DKGLUCSFb4YmwraieqtRtEqql/sCDlhORCFNiGHu8qWHvShgljCoh/kCgjIfZW6DznMIXfw2loiZj1ZQuiAwvkuJCclSQ0Q+7+eLRcJVHjZBEMogAkorIpIUwGvAc3gLehie09dEiZVQISSSDVFTvlevkv6MJ56kg5O/6B2CRHnl9NEgRYBQghdFm5BgZBLJZdC2quiRvzx0RHoMswgFZxvSZcx/GG/1LWqYb7134s5wgQwX3TgBxfKVs8AlESlHR5DOnOlp/D1lAVgmhOAMDvlp1vX/ew3jzMyHXIA8Qlw+c7e8pGxhcUVw66fmOtjbbVZcTsgguiU+ryyGML+ww4BUTBemGmS6YUcLYZcUM8twCj4ic9YY59IQA2ro4b+nk8PqBKOw5JiZV2aGLbwFH1yHV+xrHI4yufTHYjKwRQqoKKSmjZRqBAxU1YCUmFjD+o6Ue/ueVzsSHzBJ8F3lFlEBCQoY8Zn/lveBs26kYeYyT/JVza+xOs2TFqJNXxYDXqOtkOK1EZYlD2nbvBWBCxohANm4ASdHWOX8YbEZWCJHCwp0Q86rCU6+31IhPHc/gub/2smKfPS48XW+0SMsYlJGUgI3ICiF66SDbYSX+tdojFfuYrfGU/po5TQfYCNsJiY2oMloW0c+3UjrmTxPExdOdtt8DxSdaKodsyaxAFdgE22+Gc1iqLoen3gBW4q4verKWaQij16WCS8IysAn2e1mM0/y3DJxYAiux4KLhx9OOP4p8/dsRaGgReW84PgCjIk9rMIan3ACeptrYGqdBdj/YAFslRAkElVk/UlfcaV0GN88FHF3dIa//0ElJunNjP7xzKMpO9XJhIMJB/UQlSAukanlc3ZbRtAHYAFsJYVzS3BOrpQPJGHaff3o5xPoj1nlf+kDWG7FHbdlKiMRhkbosFlwGVsIpDO9Z7f1Y4mAhxLGXxld4ZtUvw8Feo864JtaGm8kSwlFu6f3pBxXVhIENsFll6QrYnNmZAbQT+nsQmJIGshq2EsJ1cx7nAvT3wc9KlfUZ0sZnhOQYsjofkgm23pXHryh3ZOS6Hvlhcru1cG2f9FGHlHMD8ryUEAwK+ZFTUk6W0Z6XhBzpkDhGKOcfIXjHzfJJzAudRw3HO3lGZOjvA8PSZrAB9rq9DLSigFwipaFVhEwg9Ldqy+j2ngEbYK+ESLBPO1F/7hBy7DTPKKVCFfQqGLAg2AB7CRHiF00VHLmCwx2ZpbgcXTpCHJIthNjq9nKGFx1T187WnRAq/xqki2f/P8LrDw5OEhaO4exbV7mHtAVrt0UkszR74wkxMxuiI4RHwBZCbPc0KirnfEpzIjQF2n3t85bltC4tFmDHqvwh9yn/QQ/OfYAlIJXre+PrygqDYFPD+3PABtjv9nJWT3+otsnVtgPOVrhaddfO2dtgE2wnhAmSVoTlOvYanK1wH9miLTtZvBzWatieOhlwQtATQfcX1RaV+9PH7s6odCD0tcrqKNELlPImyZUmUn6JLB2a247qqqEhaIv9INhOCPVW+GfOXcdBqfrzND0N0S9YW7mYKlhUUZtydy4ODL0bm/IxOKsDG5GV5OKAW3rcE2H3jYaUEAnOjvfBfXiLfN6RAgfW6oqZc2owVK+z4yUEtnhZVJHhHfAaqzKEcI0qJTSd23P1L2AkGM7L6uruhrk1teD4aIvWEZUIj+CDIlcF+ByTwe0YAx7m074L8W7oibZCV7QFOiJNSc/DGasVXNIaq4gZMSHyw486A/TqC855FeZ4yswa/hNB5f76QuZ0MRQhm57ZDOt/ugG6uroN24mAcu9iKPXOhcnu+eBzToZU0RLaDcdDe+BIf70pQVYRkzEh2vtHqG43BQLM0Iu2JFPVZUbI8ZYWePCh1fDerj2G7aWe+bCgYAUUuisMUpApusUW2NX1FJK0R5YgHdB5YWtG0uueNiEKEeLD+r5yPQoKfFA6eTL4fMYbP368RX5gepAX07PoF7JHky4SCTGTCpWIyfjXDhAxjb0vwR96NkNI0kkjg3rm4sszkZaUCVEa/IWHE9+2QAT4Kyrg2iVVsAQ/REYy0MNqbGqCHz/yKBxoVMRebvpESUmXFD0hP3pkLRLynPYdqaIl41fbRkQiVIkhcnRoZm6+OF1SUiLErMGfiLjjG7fBHbffJi+nAzK41V+9VZYaQiakECG/WSHCPfeuMqgo/wU3w1XjHtBUE92gpdVyCVCPT2V7jb0vws7OR/XS0ulkfHE6ccuwhEyfMW8ZRttP6+3EPXfflRERehAZdyxfoZGidCvdk3KFfPnYXpi4+36UtIPatoVIxOVjbrOdhGQgUrrRptS1r9DblrRIGZKQ6ZXz7mS6rtnS0snw5L8/Cn5/BViBRFII5H2FKpYPm4SkBn9X2055mbynhWMfgAqUjlxAD6qwVzpW6b2xlElJ2hZdGQgEuAha8mkGkvDrzRtlUqwCSdi111RBI45y1eA7P90PrpY3MfE1ht6HZfr/6IUxnqMvauu3XLgRpnq/ALkCNw6QS/P/DD4e+D/ok07RJq8E7Pri0kkvDNdabUoI2QwpzF7FRVlNXbtkMaxHyRiJikoGOmb1sptlWVVtgZIZ3ilH1tQCQPkkFe6PX4W8hvXa+jXj18BFOUSGCifzyKR81P+6alPGgcQCp9rbNg71/0xVFqYGjkDMgJNkbHx6gy1kJMJMhRHI6Icuvb1PGjMlPy/4iJbo+3zBXTAfP7kMUl/Pn7g1buiHeSfXIEKUV1/w1bRM6mkTkmGlmkoFW+telGOKRGL0uDhvMVxf+CicDaAonwy9CnSHy5O5wwZCZPc2wt5XPaof/8saRZ2MEpIRQ3HGsuINcg4qHZRfCTCnGmzBjp8DtCcpG6CHvKNzrRxAxjbU44yj6VshjNleJfCTyahe9uXMyZAdc06Z0djlMP0XKUejdA0knXfUrDBsX4BqSs5DpeHbzvgSwJLvYo7Tpik57wXJv6PLpGtu6ntJUV2xTt7GD4P1iftqhCjBX7yf/J5vr0h68MiePeDahyn0jw4DP3ECnGIUoK8fpO4uzLWHkAsu74mcyDUORIH87BwCSBeMAQfaI+7ygFhcCGxaGQgzZoKjapHiyCfg8wvmy5/3du2W14kIf/7NyrEhNQSWAVz9d/H1IM5o9H8KI4bTiw/61tT29Tp8coxEET2Bc0aZ7/pBx9SWIkKVeovqyEwEJhMh8p37wPnkk3KlWOJkipnLxhL+Crp1/WANz5oF7JXfgGvqRTAUFsSMeKpk0AO7ssa4bT/6jx3NMGLkjUudEBqjRIiW90oiJdoz0b+hoHrZTaYHFZ/ZBM7162MSYC1cH34IkXsHdxo3Nh0cJB2pYt5fDCZjNEEBLJGiwqzfXSaE1JWavSXJIBUxGEjC1hdtrRvyvPUGSD3GyaSNm36lLc/W3cxwmP91gKu+CTmHyw33wO9MbK+WCZFEhzYpYU6GbBGAH05/DjodCJQ6P3nSsE2fOCzPq4JUMW0BpI3xUwDm3qJ8DOYMx+LspYotGjcFRgSSktJ4Fhon94wvjZYJEUSuI2Se6YFITbGWVhgOoZtuBn7RVMgUXDdnQupKdXmL3BVpu7nporAcE5TfUj56VUAK+ot/qzgGJX4YMfQDK1FtCbETzlY3lJaWmB6Eh0LATw/vmji/cTvwd3bCwN3fBikTH7MrXlR+4ECjtjzZMw/OFRgknfFF+u+E2EZNjyWbYJI6O9GLSq2M3zHtIsh7Aj2xxgYQv3QdzTdDynNhn8ZJ16fWS7M02ZQNkKQXqPP5HAJ6OyITou8nT5omQQmBIfpceGIMgauOy/zgeP23EHp2M0QuvhhSAR8Ia8uNOkIKHCVwLqHQFZ/CuCASf/5p6JTkozzidkF/vhciXgz2BAbRaBREUZQ/4XAYhGuvgUj1jRByOiDqGwNDSguPl6vTdK/ZDZwL8OkGmAiCZsNTL5QTmNyBYxaRkQfmFBxyRB6ROAjoAEgS7osRfOjxn4D7qQ3gONmOSTU3REQ8gAP3F81jGZYfL1xQCxbSKdc5W1Cguyccg5rKkgnh1C8XU1vk1ZiqLUx3SChQDhjccOFGKYCwompo7DtcLhDf2g7SfSvB98EHkA5Y4QT5L827a6d2ZIeQ5vcAfvlXyrJOUGUX+JnlyvJAD1gCjzBGf3wjITjwj6rmgWbuzAhxFBQo6uZMFwwF3twM0euuA8e2N5C8DCJ6r1f+051Q5JYNRNFM0rt9zXDGpCMvrwAsh2LUda1njQcOmu7ImQBswgQYDs7vfx+c27ap6cS0wX023KUNKJgI8OV/jq9blUxS4hAW75c70GROCD1gqcKCqGgISKQbyhVvzFdgrLPNJRRMAvjKvymkEH6/CeATixoUZEKohwNiLczbt781qCZWAQNhXgb5iDQgzp4NjvGKOi3QVT4aqgJHGZReueXROBnv/hLTO7+CtBGS4sYIfaB4+zj9E/t9DJljMqZ6d9OAVfdD5JJLlJFsNcYWgPiEcapZtWXd0RawFCzJZ5h9ii5BMn4CMKYIZB1Vj7Hv7uchI+hrggWn1KwuO+PnZxsxBV9Fy+uf3ACbagdHxo7xE0Da8Ttgv94M4W3bwdVzBqKftABrawEhFFbyXUOk5tXgUcR4hE0oAl5YiHmvKcD8M8Dxzb+BvMpKw/6UNVBzWXQDBRa5v8seQfUYNW7bgw92X6yyyIvCecMPUBpKjft4cFbQlUfJWIBtawGa3oSMcSoSNw2CFH8rhEbIgEuq80TYYzSfTvMP9DHL/LpKUFZXrgTPSuV3s9zqF+gnciID4wseHsAP5r5ESZ4zZU4XCBiDMJcb6KV7TqI/BSnz+6drcyEt4T2WEZJvUqvvioU/+ei3VCNhhdPM/29kAOAVNOZHd8GIoG9p0BfQaZE6qS3GmdZrRlKSFsgLo+DQ5QSBpmnHF4KzqBicEwpll5mhO8twCleg/VJUeTOQELMbsAu+YsU+JCNjAD3+//37kZNBxdmaXWTGfndD6oRaz1TjTiNz06bNMJqYMSPu1VGjjJ3wXQjwVVRD45IIYd9pgC0PAJywYFxQWZCGhBZrAyEkJVzgy9X19T99ChN89o/MZFj/5FPaMhn2UzZKyeduVNxZM3TjnNmWVQCnj4IlaOx9WVtmglSn/25QcvHgB1SToXSaksd193dWDWq0yQaIjDe2v2XYdthmKTFD1wlFMjotegSkro7HJaQ5scjBNLkYckvLPWFGGcgyubyzZgV6XRuGbMaxEkQGSWciqGLjct9tKbWlnT6GN+c2/45shNM7ePvJQ8YcVghDhe1oVbtPgGXY1x03A+iT1id+n9S6+v2BMi7Em3TkstIskKJ0Q23WXSBfg+7yIrUIQ+0BGQlu+xnGFLrpGSJh+2MA+18H2/Fs201aDMIkXt7YaCwpTTofQjvif1gMsbfCkaRUf+VW2Fr3EtgBUouyJCaQ0bg/uJoxvkbdto/qmixMpZAUvPLD7JBBRXIaGQzqE8kgDPmzeR0dbZ3FhZNewP9NE/HjQphi3/5mPT68VvSAphvSG5mC7NTP/7MWHvrH1XD4SLO2XSVDvo6Tbc1FF5ZU4WJZGN1FKvWfMoIp3c/dhPHGeMVY//d3AVr3g+0gp+R3Z+Ltbk7Gq9vb2wblkIf9HUOVFAzlxuNTkme2yPOikUzEFGBKPpPqeJWIVd97EHbsfBdniGNTt+h2M4Hf0NgQrNXvXzxx0lF0EWtomaJc6r2gkppMQIRE8XT/8z28jiy96O7dM2vlPncC2o7axv3vP2W2X1pJKX9loCZWk1qm364W1y25ZhFMwWWzljc5R3agSS7teWN7vRaBJ1xOHZOklWaiTKiYOXcr3o5cNkNFD0uL0wxeY7gR7+Cd/7DWWA8FckZ2dq5VVmjAiXxOsntMv08djT2qsNWYAlk61AsD9Ma/u6c7SQY5dhGoTzEJtsasGlyP2G+vH1HPOxs9rqvGPgDpwulRJqOyAXJz/8vQsMNXNh0Ipt6wkypkYhxQheJHL5VJ/3UMlBGQ2EbmkOqGI8Jw3lmBKi4xLUCxwuuyC0TGC4aOXFbXtH/vkB0qluTRNXIkIYD6fzbNz3OdWqP399IrYzFXFmRM2ofLwXRIGHS+mYHVOBC0H3mkPkN/jnTgqhhMBsheazJVpcLO2mlb4a+cU4vJZa1iP5ckJVMyCFn/+W6r0NHeVld8YUk5Lsrq8tjAu/L20a5wpHzbyx33xskgzSDxK1Mhg3DWEkIgUoqKJ2NEAVfQOr2dhz6l3nkZu8QjAXlTr55apZ9ybk6HDMJZTQjhVHvra8XFk6iKr4rWSV0cGaiXCSl2Z6HakSlzNdtOPwQNvVv036SsphIOd27ALEaiikdqgUun6yodJHkLEIKvC/XB6ubmYCekiXOGEIIWIzEw/ICwSkypZ54lPSY0wfSHnudwOsA4PUD2gkt8+cEDwTrIEOcUISqSZRQIZPSpP6PINT3l92lRHqolvBvaMWXT1PvS4LIk2aXn6wb64PFMpMJ4qHMYQxGjoij22j8zyemINslkJK0LixEBEtSmayuS4ZwmRIX8c9siqxku3ZMqKNWD2egX+nuhdqQSMejYcJ5BJkcSqqiVjFMMMxxBStFHM6Z53sb57+BAL9RZTYLxdOc5ysoC47xeJMVpVGsODp2iCJ1WqaJU8SdC2O29RZg76wAAAABJRU5ErkJggg==";
 
 // src/Prebuilt/components/Streaming/HLSStreaming.jsx
-import React56, { Fragment as Fragment9, useCallback as useCallback15, useEffect as useEffect22, useState as useState33 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions20, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+import React63, { Fragment as Fragment11, useCallback as useCallback17, useEffect as useEffect25, useState as useState37 } from "react";
+import { selectRoomID, useHMSActions as useHMSActions23, useHMSStore as useHMSStore35, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5203,7 +5983,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: "Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.",
-        icon: /* @__PURE__ */ React56.createElement(SupportIcon, null)
+        icon: /* @__PURE__ */ React63.createElement(SupportIcon, null)
       };
       break;
     }
@@ -5211,7 +5991,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: "HLS Viewer",
         content: "Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.",
-        icon: /* @__PURE__ */ React56.createElement(EyeOpenIcon, null)
+        icon: /* @__PURE__ */ React63.createElement(EyeOpenIcon, null)
       };
       break;
     }
@@ -5219,7 +5999,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
-        icon: /* @__PURE__ */ React56.createElement(WrenchIcon, null),
+        icon: /* @__PURE__ */ React63.createElement(WrenchIcon, null),
         order: 1
       };
   }
@@ -5227,8 +6007,8 @@ var getCardData = (roleName, roomId) => {
   return data3;
 };
 var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
-  const [copied, setCopied] = useState33(false);
-  return isHLSRunning ? /* @__PURE__ */ React56.createElement(
+  const [copied, setCopied] = useState37(false);
+  return isHLSRunning ? /* @__PURE__ */ React63.createElement(
     Box,
     {
       key: title,
@@ -5239,9 +6019,9 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         borderRadius: "$2"
       }
     },
-    /* @__PURE__ */ React56.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React56.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-    /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React63.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React63.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+    /* @__PURE__ */ React63.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+    /* @__PURE__ */ React63.createElement(
       Button,
       {
         variant: "standard",
@@ -5253,24 +6033,24 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
         icon: true
       },
-      copied ? /* @__PURE__ */ React56.createElement(React56.Fragment, null, "Link copied!") : /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+      copied ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, "Link copied!") : /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
     )
   ) : null;
 };
 var HLSStreaming = ({ onBack }) => {
   const roleNames = useFilteredRoles();
-  const roomId = useHMSStore31(selectRoomID);
+  const roomId = useHMSStore35(selectRoomID);
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
-  const [showLinks, setShowLinks] = useState33(false);
-  return !showLinks ? /* @__PURE__ */ React56.createElement(Container, { rounded: true }, /* @__PURE__ */ React56.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React56.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React56.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React56.createElement(StartHLS, null)) : /* @__PURE__ */ React56.createElement(Container, { rounded: true }, /* @__PURE__ */ React56.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React56.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React56.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+  const [showLinks, setShowLinks] = useState37(false);
+  return !showLinks ? /* @__PURE__ */ React63.createElement(Container, { rounded: true }, /* @__PURE__ */ React63.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React63.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React63.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React63.createElement(StartHLS, null)) : /* @__PURE__ */ React63.createElement(Container, { rounded: true }, /* @__PURE__ */ React63.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React63.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React63.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
 };
 var StartHLS = () => {
-  const [record, setRecord] = useState33(false);
-  const [error, setError] = useState33(false);
-  const hmsActions = useHMSActions20();
+  const [record, setRecord] = useState37(false);
+  const [error, setError] = useState37(false);
+  const hmsActions = useHMSActions23();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback15(
+  const startHLS = useCallback17(
     (variants) => __async(void 0, null, function* () {
       try {
         if (isHLSStarted) {
@@ -5289,7 +6069,7 @@ var StartHLS = () => {
     }),
     [hmsActions, record, isHLSStarted, setHLSStarted]
   );
-  return /* @__PURE__ */ React56.createElement(Fragment9, null, /* @__PURE__ */ React56.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React56.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(ErrorText, { error }), /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React63.createElement(Fragment11, null, /* @__PURE__ */ React63.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React63.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React63.createElement(ErrorText, { error }), /* @__PURE__ */ React63.createElement(
     Button,
     {
       "data-testid": "start_hls",
@@ -5298,21 +6078,21 @@ var StartHLS = () => {
       onClick: () => startHLS(),
       disabled: isHLSStarted
     },
-    isHLSStarted ? /* @__PURE__ */ React56.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React56.createElement(GoLiveIcon2, null),
+    isHLSStarted ? /* @__PURE__ */ React63.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React63.createElement(GoLiveIcon2, null),
     isHLSStarted ? "Starting stream..." : "Go Live"
-  )), /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(Text, null, /* @__PURE__ */ React56.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React56.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
+  )), /* @__PURE__ */ React63.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React63.createElement(Text, null, /* @__PURE__ */ React63.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React63.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
 };
 var EndHLS = ({ setShowLinks }) => {
-  const hmsActions = useHMSActions20();
-  const [inProgress, setInProgress] = useState33(false);
-  const [error, setError] = useState33("");
+  const hmsActions = useHMSActions23();
+  const [inProgress, setInProgress] = useState37(false);
+  const [error, setError] = useState37("");
   const { isHLSRunning } = useRecordingStreaming6();
-  useEffect22(() => {
+  useEffect25(() => {
     if (inProgress && !isHLSRunning) {
       setInProgress(false);
     }
   }, [inProgress, isHLSRunning]);
-  return /* @__PURE__ */ React56.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(ErrorText, { error }), /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React63.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React63.createElement(ErrorText, { error }), /* @__PURE__ */ React63.createElement(
     Button,
     {
       "data-testid": "stop_hls",
@@ -5331,23 +6111,23 @@ var EndHLS = ({ setShowLinks }) => {
         }
       })
     },
-    /* @__PURE__ */ React56.createElement(EndStreamIcon2, null),
+    /* @__PURE__ */ React63.createElement(EndStreamIcon2, null),
     "End Stream"
-  ), /* @__PURE__ */ React56.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React56.createElement(PeopleIcon3, null), " Invite People"));
+  ), /* @__PURE__ */ React63.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React63.createElement(PeopleIcon3, null), " Invite People"));
 };
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
 var StreamingLanding = () => {
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming7();
-  const permissions = useHMSStore32(selectPermissions11);
-  const [showHLS, setShowHLS] = useState34(isHLSRunning);
-  const [showRTMP, setShowRTMP] = useState34(isRTMPRunning);
+  const permissions = useHMSStore36(selectPermissions13);
+  const [showHLS, setShowHLS] = useState38(isHLSRunning);
+  const [showRTMP, setShowRTMP] = useState38(isRTMPRunning);
   if (!(permissions == null ? void 0 : permissions.hlsStreaming) && !(permissions == null ? void 0 : permissions.rtmpStreaming)) {
     toggleStreaming();
     return null;
   }
-  return /* @__PURE__ */ React57.createElement(Fragment10, null, /* @__PURE__ */ React57.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React64.createElement(Fragment12, null, /* @__PURE__ */ React64.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React64.createElement(
     Box,
     {
       css: {
@@ -5357,8 +6137,8 @@ var StreamingLanding = () => {
         r: "$round"
       }
     },
-    /* @__PURE__ */ React57.createElement(ColoredHandIcon, { width: 40, height: 40 })
-  ), /* @__PURE__ */ React57.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React57.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React57.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React57.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React57.createElement(CrossIcon8, null))), /* @__PURE__ */ React57.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React64.createElement(ColoredHandIcon, { width: 40, height: 40 })
+  ), /* @__PURE__ */ React64.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React64.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React64.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React64.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React64.createElement(CrossIcon10, null))), /* @__PURE__ */ React64.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React64.createElement(
     StreamCard,
     {
       testId: "hls_stream",
@@ -5368,7 +6148,7 @@ var StreamingLanding = () => {
       onClick: () => setShowHLS(true),
       Icon: GoLiveIcon3
     }
-  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React57.createElement(
+  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React64.createElement(
     StreamCard,
     {
       testId: "rtmp_stream",
@@ -5380,7 +6160,7 @@ var StreamingLanding = () => {
       },
       imgSrc: rtmp_default
     }
-  ), showHLS && /* @__PURE__ */ React57.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React57.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+  ), showHLS && /* @__PURE__ */ React64.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React64.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
@@ -5390,16 +6170,16 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a, _b;
-  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 isMobile = useMedia20(config.media.md);
+  const sidepane = useHMSStore37(selectAppData3(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore37(selectAppData3(APP_DATA.activeScreensharePeerId));
+  const trackId = (_a = useHMSStore37(selectVideoTrackByPeerID3(activeScreensharePeerId))) == null ? void 0 : _a.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = /* @__PURE__ */ React58.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
+    ViewComponent = /* @__PURE__ */ React65.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = /* @__PURE__ */ React58.createElement(StreamingLanding, null);
+    ViewComponent = /* @__PURE__ */ React65.createElement(StreamingLanding, null);
   }
   if (!ViewComponent && !trackId) {
     return null;
@@ -5412,7 +6192,7 @@ var SidePane = ({
     objectFit: tileProps == null ? void 0 : tileProps.video_object_fit
   };
   const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React65.createElement(
     Flex,
     {
       direction: "column",
@@ -5425,17 +6205,16 @@ var SidePane = ({
         "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
       }
     },
-    trackId && /* @__PURE__ */ React58.createElement(
+    trackId && /* @__PURE__ */ React65.createElement(
       VideoTile_default,
       __spreadValues({
         peerId: activeScreensharePeerId,
         trackId,
-        width: "100%",
         height: 225,
         rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
       }, tileLayout)
     ),
-    !!ViewComponent && /* @__PURE__ */ React58.createElement(
+    !!ViewComponent && /* @__PURE__ */ React65.createElement(
       Box,
       {
         css: {
@@ -5471,10 +6250,10 @@ var SidePane = ({
 var SidePane_default = SidePane;
 
 // src/Prebuilt/layouts/WaitingView.jsx
-import React59 from "react";
+import React66 from "react";
 import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React59.memo(() => {
-  return /* @__PURE__ */ React59.createElement(
+var WaitingView = React66.memo(() => {
+  return /* @__PURE__ */ React66.createElement(
     Box,
     {
       css: {
@@ -5488,7 +6267,7 @@ var WaitingView = React59.memo(() => {
       },
       "data-testid": "waiting_view"
     },
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React66.createElement(
       Flex,
       {
         align: "center",
@@ -5502,8 +6281,8 @@ var WaitingView = React59.memo(() => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React59.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React59.createElement(
+      /* @__PURE__ */ React66.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React66.createElement(
         Flex,
         {
           direction: "column",
@@ -5513,28 +6292,28 @@ var WaitingView = React59.memo(() => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React59.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React59.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+        /* @__PURE__ */ React66.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React66.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
       )
     )
   );
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React60.lazy(() => import("./HLSView-F5BDZVT2.js"));
+var HLSView = React67.lazy(() => import("./HLSView-IQRPLYNH.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
   hideControls = false
 }) => {
   var _a, _b;
-  const localPeerRole = useHMSStore34(selectLocalPeerRoleName2);
-  const isConnected = useHMSStore34(selectIsConnectedToRoom6);
-  const hmsActions = useHMSActions21();
+  const localPeerRole = useHMSStore38(selectLocalPeerRoleName3);
+  const isConnected = useHMSStore38(selectIsConnectedToRoom6);
+  const hmsActions = useHMSActions24();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  useEffect23(() => {
+  useEffect26(() => {
     if (!isConnected) {
       return;
     }
@@ -5545,17 +6324,17 @@ var VideoStreamingSection = ({
   }
   let ViewComponent;
   if (screenType === "hls_live_streaming") {
-    ViewComponent = /* @__PURE__ */ React60.createElement(HLSView, null);
+    ViewComponent = /* @__PURE__ */ React67.createElement(HLSView, null);
   } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(WaitingView, null);
+    ViewComponent = /* @__PURE__ */ React67.createElement(WaitingView, null);
   } else if (pdfAnnotatorActive) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(PDFView, null);
+    ViewComponent = /* @__PURE__ */ React67.createElement(PDFView, null);
   } else if (urlToIframe) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(EmbedView, null);
+    ViewComponent = /* @__PURE__ */ React67.createElement(EmbedView, null);
   } else {
-    ViewComponent = /* @__PURE__ */ React60.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
+    ViewComponent = /* @__PURE__ */ React67.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
   }
-  return /* @__PURE__ */ React60.createElement(Suspense2, { fallback: /* @__PURE__ */ React60.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React67.createElement(Suspense2, { fallback: /* @__PURE__ */ React67.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React67.createElement(
     Flex,
     {
       css: {
@@ -5565,7 +6344,7 @@ var VideoStreamingSection = ({
       }
     },
     ViewComponent,
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React67.createElement(
       SidePane_default,
       {
         screenType,
@@ -5576,80 +6355,6 @@ var VideoStreamingSection = ({
   ));
 };
 
-// src/Prebuilt/components/RoleChangeRequestModal.tsx
-import React61, { useEffect as useEffect24 } from "react";
-import {
-  selectLocalPeerName,
-  selectLocalPeerRoleName as selectLocalPeerRoleName3,
-  selectRoleChangeRequest,
-  useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions22,
-  useHMSStore as useHMSStore35
-} from "@100mslive/react-sdk";
-var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions22();
-  const { updateMetaData } = useMyMetadata();
-  const currentRole = useHMSStore35(selectLocalPeerRoleName3);
-  const roleChangeRequest = useHMSStore35(selectRoleChangeRequest);
-  const name = useHMSStore35(selectLocalPeerName);
-  const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
-  useEffect24(() => {
-    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-      return;
-    }
-    (() => __async(void 0, null, function* () {
-      yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
-    }))();
-  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
-  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-    return null;
-  }
-  const body = /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(Text, { css: { fontWeight: 400, c: "$on_surface_medium", textAlign: "center" } }, "Setup your audio and video before joining"), /* @__PURE__ */ React61.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "center",
-      css: {
-        "@sm": { width: "100%" },
-        flexDirection: "column",
-        mt: "$6"
-      }
-    },
-    /* @__PURE__ */ React61.createElement(PreviewTile, { name: name || "" }),
-    /* @__PURE__ */ React61.createElement(PreviewControls, { hideSettings: true })
-  ));
-  return /* @__PURE__ */ React61.createElement(
-    RequestDialog,
-    {
-      title: `You're invited to join the ${roleChangeRequest.role.name} role`,
-      onOpenChange: (value) => __async(void 0, null, function* () {
-        var _a;
-        if (!value) {
-          yield hmsActions.rejectChangeRole(roleChangeRequest);
-          sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
-          yield hmsActions.cancelMidCallPreview();
-          yield hmsActions.lowerLocalPeerHand();
-        }
-      }),
-      body,
-      onAction: () => __async(void 0, null, function* () {
-        yield hmsActions.acceptChangeRole(roleChangeRequest);
-        yield updateMetaData({ prevRole: currentRole });
-        yield hmsActions.lowerLocalPeerHand();
-      }),
-      actionText: "Accept"
-    }
-  );
-};
-var RequestDialog = ({
-  open = true,
-  onOpenChange,
-  title,
-  body,
-  actionText = "Accept",
-  onAction
-}) => /* @__PURE__ */ React61.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React61.createElement(Dialog.Portal, null, /* @__PURE__ */ React61.createElement(Dialog.Overlay, null), /* @__PURE__ */ React61.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React61.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React61.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React61.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React61.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React61.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React61.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React61.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React61.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React61.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
-
 // src/Prebuilt/components/conference.jsx
 var Conference = () => {
   var _a, _b, _c, _d, _e;
@@ -5658,17 +6363,17 @@ var Conference = () => {
   const { userName, endpoints } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore36(selectRoomState);
+  const roomState = useHMSStore39(selectRoomState);
   const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore36(selectIsConnectedToRoom7);
-  const hmsActions = useHMSActions23();
-  const [hideControls, setHideControls] = useState35(false);
-  const dropdownList = useHMSStore36(selectAppData4(APP_DATA.dropdownList));
+  const isConnectedToRoom = useHMSStore39(selectIsConnectedToRoom7);
+  const hmsActions = useHMSActions25();
+  const [hideControls, setHideControls] = useState39(false);
+  const dropdownList = useHMSStore39(selectAppData4(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
-  const headerRef = useRef14();
-  const footerRef = useRef14();
+  const headerRef = useRef16();
+  const footerRef = useRef16();
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
-  const dropdownListRef = useRef14();
+  const dropdownListRef = useRef16();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const toggleControls = () => {
     var _a2;
@@ -5676,8 +6381,8 @@ var Conference = () => {
       setHideControls((value) => !value);
     }
   };
-  const autoRoomJoined = useRef14(isPreviewScreenEnabled);
-  useEffect25(() => {
+  const autoRoomJoined = useRef16(isPreviewScreenEnabled);
+  useEffect27(() => {
     let timeout = null;
     dropdownListRef.current = dropdownList || [];
     if (dropdownListRef.current.length === 0) {
@@ -5692,7 +6397,7 @@ var Conference = () => {
       clearTimeout(timeout);
     };
   }, [dropdownList, hideControls, isMobileDevice]);
-  useEffect25(() => {
+  useEffect27(() => {
     if (!roomId) {
       navigate(`/`);
       return;
@@ -5707,7 +6412,7 @@ var Conference = () => {
         navigate(`/preview/${roomId || ""}`);
     }
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-  useEffect25(() => {
+  useEffect27(() => {
     if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting && !autoRoomJoined.current) {
       hmsActions.join({
         userName,
@@ -5722,15 +6427,15 @@ var Conference = () => {
       autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-  useEffect25(() => {
+  useEffect27(() => {
     return () => {
       PictureInPicture.stop().catch((error) => console.error("stopping pip", error));
     };
   }, []);
   if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React62.createElement(FullPageProgress_default, { text: "Joining..." });
+    return /* @__PURE__ */ React68.createElement(FullPageProgress_default, { text: "Joining..." });
   }
-  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, isHLSStarted ? /* @__PURE__ */ React62.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React62.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React62.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React68.createElement(React68.Fragment, null, isHLSStarted ? /* @__PURE__ */ React68.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React68.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React68.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React68.createElement(
     Box,
     {
       ref: headerRef,
@@ -5744,8 +6449,8 @@ var Conference = () => {
       },
       "data-testid": "header"
     },
-    /* @__PURE__ */ React62.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React68.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React68.createElement(
     Box,
     {
       css: {
@@ -5763,7 +6468,7 @@ var Conference = () => {
       "data-testid": "conferencing",
       onClick: toggleControls
     },
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React68.createElement(
       VideoStreamingSection,
       {
         screenType: screenProps.screenType,
@@ -5771,7 +6476,7 @@ var Conference = () => {
         hideControls
       }
     )
-  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React62.createElement(
+  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React68.createElement(
     Box,
     {
       ref: footerRef,
@@ -5788,11 +6493,11 @@ var Conference = () => {
       },
       "data-testid": "footer"
     },
-    /* @__PURE__ */ React62.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React62.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React62.createElement(HLSFailureModal, null), /* @__PURE__ */ React62.createElement(ActivatedPIP, null)));
+    /* @__PURE__ */ React68.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React68.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React68.createElement(HLSFailureModal, null), /* @__PURE__ */ React68.createElement(ActivatedPIP, null)));
 };
 var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-6IVZHILI.js.map
+//# sourceMappingURL=conference-JD35TNH4.js.map