@100mslive/roomkit-react 0.1.7 → 0.1.8

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

@@ -1,13 +1,14 @@
 import {
   ActionTile
-} from "./chunk-36X4ZCLC.js";
+} from "./chunk-HUMNPIYI.js";
 import {
   APP_DATA,
   Accordion,
+  AudioLevel,
   AudioVideoToggle,
+  Avatar,
   Button,
   CHAT_SELECTOR,
-  ChangeNameModal,
   Checkbox,
   ConnectionIndicator,
   Dialog,
@@ -27,8 +28,12 @@ import {
   Label,
   PictureInPicture,
   Popover,
+  PrebuiltAttributeBox,
+  PrebuiltAudioIndicator,
+  PrebuiltDialogPortal,
   PreviewControls,
   PreviewTile,
+  REMOTE_STOP_SCREENSHARE_TYPE,
   ROLE_CHANGE_DECLINED,
   RTMP_RECORD_DEFAULT_RESOLUTION,
   RTMP_RECORD_RESOLUTION_MAX,
@@ -38,22 +43,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 +66,6 @@ import {
   isMacOS,
   isScreenshareSupported,
   useAuthToken,
-  useDropdownList,
   useDropdownSelection,
   useFilteredRoles,
   useHMSPrebuiltContext,
@@ -83,7 +87,7 @@ import {
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-Z7P5WITU.js";
+} from "./chunk-PRM33R4R.js";
 import {
   Box,
   Flex,
@@ -102,24 +106,24 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-5DQ3WTED.js";
+} from "./chunk-6SQTFOK6.js";
 
 // src/Prebuilt/components/conference.jsx
-import React63, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
+import React69, { useEffect as useEffect28, useRef as useRef16, useState as useState39 } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
   HMSRoomState,
   selectAppData as selectAppData4,
-  selectIsConnectedToRoom as selectIsConnectedToRoom7,
+  selectIsConnectedToRoom as selectIsConnectedToRoom8,
   selectRoomState,
-  useHMSActions as useHMSActions22,
-  useHMSStore as useHMSStore35
+  useHMSActions as useHMSActions24,
+  useHMSStore as useHMSStore41
 } 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 +163,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 = () => {
@@ -431,7 +455,7 @@ var DesktopLeaveRoom = ({
       "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,
@@ -439,7 +463,7 @@ var DesktopLeaveRoom = ({
       isStreamingOn,
       isModal: true
     }
-  )))), /* @__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 })))));
+  )))), /* @__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
@@ -553,8 +577,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";
@@ -566,7 +590,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";
 
@@ -646,7 +670,7 @@ var ActivatedPIP = () => {
   const tracksMap = useHMSStore5(selectTracksMap);
   const storePeers = useHMSStore5(selectPeers);
   const pinnedTrack = usePinnedTrack();
-  useEffect(() => {
+  useEffect2(() => {
     function updatePIP() {
       if (!PictureInPicture.isOn()) {
         return;
@@ -707,7 +731,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",
@@ -873,7 +897,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";
 
@@ -1086,7 +1110,7 @@ var EndRTMP = () => {
   const [inProgress, setInProgress] = useState7(false);
   const [error, setError] = useState7("");
   const { isRTMPRunning } = useRecordingStreaming3();
-  useEffect2(() => {
+  useEffect3(() => {
     if (inProgress && !isRTMPRunning) {
       setInProgress(false);
     }
@@ -1240,7 +1264,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: {
@@ -1319,7 +1343,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,
@@ -1340,12 +1364,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: {
@@ -1604,7 +1628,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);
@@ -1623,7 +1647,7 @@ var useFullscreen = () => {
       ToastManager.addToast({ title: err.message });
     }
   }), [isFullScreenEnabled]);
-  useEffect4(() => {
+  useEffect5(() => {
     const onChange = () => {
       setIsFullScreenEnabled(screenfull.isFullscreen);
     };
@@ -1857,20 +1881,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,
@@ -1879,6 +1903,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",
@@ -1894,18 +2073,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();
@@ -1923,7 +2102,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: {
@@ -1941,8 +2120,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: {
@@ -1954,7 +2133,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: () => {
@@ -1962,11 +2141,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,
@@ -1975,10 +2154,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: () => {
@@ -1986,10 +2165,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,
@@ -1998,10 +2177,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: () => {
@@ -2009,10 +2188,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,
@@ -2052,16 +2231,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,
@@ -2080,8 +2259,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),
@@ -2106,27 +2285,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 React26 from "react";
 import { HandIcon as HandIcon2 } from "@100mslive/react-icons";
 var RaiseHand = () => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
-  return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(IconButton_default, { active: !isHandRaised, onClick: () => __async(void 0, null, function* () {
+  return /* @__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__ */ React24.createElement(HandIcon2, null)));
+  }) }, /* @__PURE__ */ React26.createElement(HandIcon2, null)));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
-import React31, { Fragment as Fragment6 } from "react";
-import { selectIsAllowedToPublish, useHMSStore as useHMSStore12, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
+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";
 
@@ -2162,12 +2341,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",
@@ -2176,8 +2355,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",
@@ -2191,10 +2370,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",
@@ -2204,7 +2383,7 @@ var SubmitPDF = ({ pdfFile, onOpenChange }) => {
         gap: "$8"
       }
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(
       Button,
       {
         variant: "standard",
@@ -2217,7 +2396,7 @@ var SubmitPDF = ({ pdfFile, onOpenChange }) => {
       },
       "Cancel"
     ),
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(
       Button,
       {
         variant: "primary",
@@ -2240,14 +2419,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: {
@@ -2260,7 +2439,7 @@ var PDFInfo = () => {
         minHeight: "$11"
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React29.createElement(
       InfoIcon3,
       {
         width: "64px",
@@ -2270,14 +2449,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: {
@@ -2287,7 +2466,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: {
@@ -2309,7 +2488,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: {
@@ -2319,8 +2498,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),
@@ -2329,14 +2508,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: {
@@ -2346,7 +2525,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) => {
@@ -2356,8 +2535,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
@@ -2367,7 +2546,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) => {
@@ -2381,15 +2560,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,
@@ -2400,7 +2579,7 @@ function ShareScreenOptions() {
           bg: "$surface_dim"
         }
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React32.createElement(
         Dropdown.Item,
         {
           css: {
@@ -2415,10 +2594,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: {
@@ -2426,14 +2605,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",
@@ -2442,7 +2622,7 @@ function ShareScreenOptions() {
               gap: "$6"
             }
           },
-          /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React32.createElement(
             IconButton,
             {
               as: "div",
@@ -2457,7 +2637,7 @@ function ShareScreenOptions() {
                 pb: "0"
               }
             },
-            /* @__PURE__ */ React30.createElement(
+            /* @__PURE__ */ React32.createElement(
               "img",
               {
                 src: screen_share_default,
@@ -2472,7 +2652,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",
@@ -2484,7 +2664,7 @@ function ShareScreenOptions() {
             "Share your tab, window or your entire screen"
           ))
         ),
-        /* @__PURE__ */ React30.createElement(
+        /* @__PURE__ */ React32.createElement(
           Flex,
           {
             direction: "column",
@@ -2493,7 +2673,7 @@ function ShareScreenOptions() {
               gap: "$6"
             }
           },
-          /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React32.createElement(
             IconButton,
             {
               onClick: () => {
@@ -2510,7 +2690,7 @@ function ShareScreenOptions() {
                 pb: "0"
               }
             },
-            /* @__PURE__ */ React30.createElement(
+            /* @__PURE__ */ React32.createElement(
               "img",
               {
                 src: pdf_share_default,
@@ -2524,14 +2704,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",
@@ -2540,8 +2720,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",
@@ -2555,7 +2735,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",
@@ -2567,51 +2747,21 @@ 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
 var ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore12(selectIsAllowedToPublish);
+  const isAllowedToPublish = useHMSStore13(selectIsAllowedToPublish);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare2();
   const isVideoScreenshare = amIScreenSharing && !!video;
   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",
@@ -2623,34 +2773,35 @@ 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 { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
+import React34 from "react";
+import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore14 } from "@100mslive/react-sdk";
 import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
 var ChatToggle = () => {
-  const countUnreadMessages = useHMSStore13(selectUnreadHMSMessagesCount);
+  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 useCallback6, useEffect as useEffect7, useState as useState19 } from "react";
+import { useDebounce, useMedia as useMedia5 } from "react-use";
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLargeRoom as selectIsLargeRoom2,
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID4,
   selectPeerCount as selectPeerCount2,
   selectPeerMetadata,
   selectPermissions as selectPermissions8,
-  useHMSActions as useHMSActions11,
-  useHMSStore as useHMSStore15
+  useHMSActions as useHMSActions12,
+  useHMSStore as useHMSStore17
 } from "@100mslive/react-sdk";
 import {
   ChangeRoleIcon as ChangeRoleIcon2,
@@ -2663,13 +2814,15 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
-import React34 from "react";
+import React36, { useEffect as useEffect6 } from "react";
 import { useMeasure } from "react-use";
 import { FixedSizeList } from "react-window";
+import { selectIsLargeRoom, useHMSStore as useHMSStore16, usePaginatedParticipants } from "@100mslive/react-sdk";
+import { ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
-import React33, { useState as useState17 } from "react";
-import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions10, useHMSStore as useHMSStore14, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
+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,
   MicOnIcon,
@@ -2682,9 +2835,9 @@ 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 permissions = useHMSStore14(selectPermissions7);
-  const hmsActions = useHMSActions10();
+  const [openOptions, setOpenOptions] = useState18(false);
+  const permissions = useHMSStore15(selectPermissions7);
+  const hmsActions = useHMSActions11();
   const { elements } = useRoomLayoutConferencingScreen();
   const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const vanillaStore = useHMSVanillaStore2();
@@ -2701,7 +2854,7 @@ var RoleOptions = ({ roleName, peerList }) => {
   const canMuteRole = (permissions == null ? void 0 : permissions.mute) && roleName === on_stage_role;
   const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
   const canRemoveRoleFromRoom = (permissions == null ? void 0 : permissions.removeOthers) && (on_stage_role === roleName || (off_stage_roles == null ? void 0 : off_stage_roles.includes(roleName)));
-  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) {
+  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
     return null;
   }
   const removeAllFromStage = () => {
@@ -2728,7 +2881,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(),
@@ -2747,122 +2900,164 @@ 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")
     )
   ));
 };
 
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
 var ROW_HEIGHT = 50;
+var ITER_TIMER = 5e3;
 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 = [],
   roleName,
   isConnected,
   filter,
-  isHandRaisedAccordion = false
+  isHandRaisedAccordion = false,
+  offStageRoles,
+  onActive
 }) => {
   const [ref, { width }] = useMeasure();
   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 isLargeRoom = useHMSStore16(selectIsLargeRoom);
+  const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
+  const isOffStageRole = roleName && offStageRoles.includes(roleName);
+  useEffect6(() => {
+    if (!isOffStageRole || !isLargeRoom) {
+      return;
+    }
+    loadPeers();
+    const interval = setInterval(() => {
+      loadPeers();
+    }, ITER_TIMER);
+    return () => clearInterval(interval);
+  }, [isOffStageRole, isLargeRoom]);
+  if (!showAcordion || isHandRaisedAccordion && (filter == null ? void 0 : filter.search) || peerList.length === 0 && (filter == null ? void 0 : filter.search)) {
+    return null;
+  }
+  const height = ROW_HEIGHT * (peers.length || peerList.length);
+  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
+  const hasNext = total > peersInAccordion.length;
+  if (peersInAccordion.length === 0) {
     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(
-    Accordion.Root,
+  return /* @__PURE__ */ React36.createElement(Accordion.Item, { value: roleName, css: { "&:hover .role_actions": { visibility: "visible" }, mb: "$8" }, ref }, /* @__PURE__ */ React36.createElement(
+    Accordion.Header,
     {
-      type: "single",
-      collapsible: true,
-      defaultValue: roleName,
-      css: { borderRadius: "$1", border: "1px solid $border_bright" }
+      iconStyles: { c: "$on_surface_high" },
+      css: {
+        textTransform: "capitalize",
+        p: "$6 $8",
+        fontSize: "$sm",
+        fontWeight: "$semiBold",
+        c: "$on_surface_medium",
+        borderRadius: "$1",
+        border: "1px solid $border_default",
+        '&[data-state="open"]': {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      }
     },
-    /* @__PURE__ */ React34.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React34.createElement(
-      Accordion.Header,
+    /* @__PURE__ */ React36.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React36.createElement(
+      Text,
       {
-        iconStyles: { c: "$on_surface_high" },
-        css: {
-          textTransform: "capitalize",
-          p: "$6 $8",
-          fontSize: "$sm",
-          fontWeight: "$semiBold",
-          c: "$on_surface_medium"
-        }
+        variant: "sm",
+        css: { fontWeight: "$semiBold", textTransform: "capitalize", color: "$on_surface_medium" }
       },
-      /* @__PURE__ */ React34.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React34.createElement(
-        Text,
-        {
-          variant: "sm",
-          css: { fontWeight: "$semiBold", textTransform: "capitalize", color: "$on_surface_medium" }
-        },
-        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(
-      FixedSizeList,
-      {
-        itemSize: ROW_HEIGHT,
-        itemData: { peerList, isConnected },
-        itemKey,
-        itemCount: peerList.length,
-        width,
-        height
+      roleName,
+      " ",
+      `(${getFormattedCount(isLargeRoom && isOffStageRole ? total : peerList.length)})`
+    ), /* @__PURE__ */ React36.createElement(RoleOptions, { roleName, peerList: peersInAccordion }))
+  ), /* @__PURE__ */ React36.createElement(Accordion.Content, { contentStyles: { border: "1px solid $border_default", borderTop: "none" } }, /* @__PURE__ */ React36.createElement(
+    FixedSizeList,
+    {
+      itemSize: ROW_HEIGHT,
+      itemData: { peerList: peersInAccordion, isConnected },
+      itemKey,
+      itemCount: peersInAccordion.length,
+      width,
+      height
+    },
+    VirtualizedParticipantItem
+  ), (offStageRoles == null ? void 0 : offStageRoles.includes(roleName)) && hasNext ? /* @__PURE__ */ React36.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "end",
+      css: {
+        gap: "$1",
+        cursor: "pointer",
+        color: "$on_surface_high",
+        p: "$6",
+        borderTop: "1px solid $border_default"
       },
-      VirtualizedParticipantItem
-    )))
-  ));
+      onClick: () => onActive == null ? void 0 : onActive(roleName)
+    },
+    /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { color: "inherit" } }, "View All"),
+    /* @__PURE__ */ React36.createElement(ChevronRightIcon2, null)
+  ) : null));
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-var ParticipantList = () => {
-  const [filter, setFilter] = useState18();
+var ParticipantList = ({ offStageRoles = [], onActive }) => {
+  const [filter, setFilter] = useState19();
   const { participants, isConnected, peerCount } = useParticipants(filter);
+  const isLargeRoom = useHMSStore17(selectIsLargeRoom2);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore15(selectHandRaisedPeers);
+  const handRaisedPeers = useHMSStore17(selectHandRaisedPeers);
   participants.forEach((participant) => {
     if (peersOrderedByRoles[participant.roleName] === void 0) {
       peersOrderedByRoles[participant.roleName] = [];
     }
     peersOrderedByRoles[participant.roleName].push(participant);
   });
+  if (isLargeRoom) {
+    offStageRoles.forEach((role) => {
+      if (!peersOrderedByRoles[role]) {
+        peersOrderedByRoles[role] = [];
+      }
+    });
+  }
   const onSearch = useCallback6((value) => {
     setFilter((filterValue) => {
       if (!filterValue) {
@@ -2875,21 +3070,24 @@ 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,
       handRaisedList: handRaisedPeers,
       isConnected,
-      filter
+      filter,
+      offStageRoles,
+      isLargeRoom,
+      onActive
     }
   )));
 };
 var ParticipantCount = () => {
-  const peerCount = useHMSStore15(selectPeerCount2);
+  const peerCount = useHMSStore17(selectPeerCount2);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  useEffect5(() => {
+  useEffect7(() => {
     if (isParticipantsOpen && peerCount === 0) {
       toggleSidepane();
     }
@@ -2897,7 +3095,7 @@ var ParticipantCount = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     IconButton_default,
     {
       css: {
@@ -2913,12 +3111,20 @@ 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(
+var VirtualizedParticipants = ({
+  peersOrderedByRoles = {},
+  isConnected,
+  filter,
+  handRaisedList = [],
+  offStageRoles,
+  isLargeRoom,
+  onActive
+}) => {
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       direction: "column",
@@ -2931,31 +3137,33 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
         flex: "1 1 0"
       }
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React37.createElement(Accordion.Root, { type: isLargeRoom ? "single" : "multiple", collapsible: true }, handRaisedList.length > 0 ? /* @__PURE__ */ React37.createElement(
       RoleAccordion,
       {
         peerList: handRaisedList,
         roleName: "Hand Raised",
         filter,
         isConnected,
-        isHandRaisedAccordion: true
+        isHandRaisedAccordion: true,
+        offStageRoles
       }
-    ),
-    Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React35.createElement(
+    ) : null, Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React37.createElement(
       RoleAccordion,
       {
         key: role,
         peerList: peersOrderedByRoles[role],
         roleName: role,
         isConnected,
-        filter
+        filter,
+        offStageRoles,
+        onActive
       }
-    ))
+    )))
   );
 };
 var Participant = ({ peer, isConnected }) => {
-  const localPeerId = useHMSStore15(selectLocalPeerID4);
-  return /* @__PURE__ */ React35.createElement(
+  const localPeerId = useHMSStore17(selectLocalPeerID4);
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       key: peer.id,
@@ -2970,17 +3178,29 @@ 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("100%")), { flex: "1 1 0", mr: "$8", 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 = useHMSStore15(selectHasPeerHandRaised(peerId));
-  const canChangeRole = (_a = useHMSStore15(selectPermissions8)) == null ? void 0 : _a.changeRole;
-  const shouldShowMoreActions = canChangeRole;
-  const isAudioMuted = !useHMSStore15(selectIsPeerAudioEnabled(peerId));
-  return /* @__PURE__ */ React35.createElement(
+var ParticipantActions = React37.memo(({ peerId, role, isLocal }) => {
+  var _a, _b;
+  const isHandRaised = useHMSStore17(selectHasPeerHandRaised(peerId));
+  const canChangeRole = (_a = useHMSStore17(selectPermissions8)) == null ? void 0 : _a.changeRole;
+  const canRemoveOthers = (_b = useHMSStore17(selectPermissions8)) == null ? void 0 : _b.removeOthers;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_exp } = elements || {};
+  const shouldShowMoreActions = on_stage_exp && canChangeRole || canRemoveOthers;
+  const isAudioMuted = !useHMSStore17(selectIsPeerAudioEnabled(peerId));
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       align: "center",
@@ -2989,33 +3209,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 = useHMSActions11();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore15(selectPermissions8);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const hmsActions = useHMSActions12();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
@@ -3024,10 +3251,10 @@ var ParticipantMoreActions = ({ peerId, role }) => {
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
-  const prevRole = (_a = useHMSStore15(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
-  const localPeerId = useHMSStore15(selectLocalPeerID4);
+  const prevRole = (_a = useHMSStore17(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
+  const localPeerId = useHMSStore17(selectLocalPeerID4);
   const isLocal = localPeerId === peerId;
-  const [open, setOpen] = useState18(false);
+  const [open, setOpen] = useState19(false);
   const handleStageAction = () => __async(void 0, null, function* () {
     if (isInStage) {
       prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
@@ -3036,7 +3263,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,
@@ -3056,8 +3283,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" },
@@ -3069,13 +3296,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);
@@ -3083,7 +3310,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
     300,
     [value, onSearch]
   );
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       align: "center",
@@ -3095,13 +3322,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: "$16", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
+        css: { w: "100%", p: "$6", pl: "$14", bg: inSidePane ? "$surface_default" : "$surface_dim" },
         value,
         onKeyDown: (event) => {
           event.stopPropagation();
@@ -3117,25 +3344,25 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React36.lazy(() => import("./VirtualBackground-3TI5NA4V.js"));
+var VirtualBackground = React38.lazy(() => import("./VirtualBackground-UVZJVOA2.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: {
@@ -3149,7 +3376,7 @@ var Footer2 = ({
         }
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(
       Footer.Left,
       {
         css: {
@@ -3160,11 +3387,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: {
@@ -3174,19 +3401,19 @@ 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 useHMSActions12, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
+import React39, { useCallback as useCallback7, useState as useState20 } from "react";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions13, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
-  const { hlsError } = useHMSStore16(selectHLSState2).error || false;
-  const [openModal, setOpenModal] = useState19(!!hlsError);
-  const hmsActions = useHMSActions12();
+  const { hlsError } = useHMSStore18(selectHLSState2).error || false;
+  const [openModal, setOpenModal] = useState20(!!hlsError);
+  const hmsActions = useHMSActions13();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback7(() => __async(this, null, function* () {
     try {
@@ -3203,7 +3430,7 @@ function HLSFailureModal() {
       setHLSStarted(false);
     }
   }), [hmsActions, isHLSStarted, setHLSStarted]);
-  return hlsError ? /* @__PURE__ */ React37.createElement(
+  return hlsError ? /* @__PURE__ */ React39.createElement(
     Dialog.Root,
     {
       open: openModal,
@@ -3213,7 +3440,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: {
@@ -3224,25 +3451,25 @@ 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 React39, { useEffect as useEffect7 } from "react";
+import React41, { useEffect as useEffect9 } from "react";
 import {
-  selectLocalPeerName,
+  selectLocalPeerName as selectLocalPeerName2,
   selectLocalPeerRoleName,
   selectRoleChangeRequest,
   useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions13,
-  useHMSStore as useHMSStore17
+  useHMSActions as useHMSActions14,
+  useHMSStore as useHMSStore19
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
-import React38 from "react";
-import { useMedia as useMedia6 } from "react-use";
+import React40 from "react";
+import { useMedia as useMedia7 } from "react-use";
 var RequestPrompt = ({
   open = true,
   onOpenChange,
@@ -3251,23 +3478,23 @@ var RequestPrompt = ({
   actionText = "Accept",
   onAction
 }) => {
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   if (isMobile) {
-    return /* @__PURE__ */ React38.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React38.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React38.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React38.createElement(RequestActions, { actionText, onAction })));
+    return /* @__PURE__ */ 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__ */ React38.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React38.createElement(Dialog.Portal, null, /* @__PURE__ */ React38.createElement(Dialog.Overlay, null), /* @__PURE__ */ React38.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React38.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React38.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React38.createElement(RequestActions, { actionText, onAction }))));
+  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__ */ React38.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md", "@md": { mt: "$8", px: "$8" } } }, /* @__PURE__ */ React38.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React38.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React38.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Decline"))), /* @__PURE__ */ React38.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React38.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText)));
+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 = useHMSActions13();
+  const hmsActions = useHMSActions14();
   const { updateMetaData } = useMyMetadata();
-  const currentRole = useHMSStore17(selectLocalPeerRoleName);
-  const roleChangeRequest = useHMSStore17(selectRoleChangeRequest);
-  const name = useHMSStore17(selectLocalPeerName);
+  const currentRole = useHMSStore19(selectLocalPeerRoleName);
+  const roleChangeRequest = useHMSStore19(selectRoleChangeRequest);
+  const name = useHMSStore19(selectLocalPeerName2);
   const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
-  useEffect7(() => {
+  useEffect9(() => {
     if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
       return;
     }
@@ -3278,7 +3505,7 @@ var RoleChangeRequestModal = () => {
   if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
     return null;
   }
-  const body = /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(
+  const body = /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(
     Text,
     {
       variant: "xs",
@@ -3289,7 +3516,7 @@ var RoleChangeRequestModal = () => {
       }
     },
     "Setup your audio and video before joining"
-  ), /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React41.createElement(
     Flex,
     {
       align: "center",
@@ -3301,10 +3528,10 @@ var RoleChangeRequestModal = () => {
         "@md": { px: "$8" }
       }
     },
-    /* @__PURE__ */ React39.createElement(PreviewTile, { name: name || "" }),
-    /* @__PURE__ */ React39.createElement(PreviewControls, { hideSettings: true })
+    /* @__PURE__ */ React41.createElement(PreviewTile, { name: name || "" }),
+    /* @__PURE__ */ React41.createElement(PreviewControls, { hideSettings: true })
   ));
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React41.createElement(
     RequestPrompt,
     {
       title: "You're invited to join the stage",
@@ -3329,64 +3556,546 @@ var RoleChangeRequestModal = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-import React62, { Suspense as Suspense2, useEffect as useEffect24 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName3, useHMSActions as useHMSActions21, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+import React68, { Suspense as Suspense2, useEffect as useEffect27 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom7, selectLocalPeerRoleName as selectLocalPeerRoleName3, useHMSActions as useHMSActions23, useHMSStore as useHMSStore40 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-import React51, { useEffect as useEffect15, useMemo as useMemo6, useState as useState26 } from "react";
-import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore23, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
+import React56, { useEffect as useEffect17, useMemo as useMemo6, useState as useState29 } from "react";
+import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore28, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-import React44, { useEffect as useEffect11, useMemo as useMemo3, useState as useState21 } from "react";
-import { useMedia as useMedia9 } from "react-use";
-import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import React49, { useEffect as useEffect13, useMemo as useMemo3, useState as useState24 } from "react";
+import { useMedia as useMedia13 } from "react-use";
+import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore24 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
-import React41, { useEffect as useEffect8, useRef as useRef6 } from "react";
+import React46, { useEffect as useEffect10, useRef as useRef7 } from "react";
 import Draggable from "react-draggable";
-import { useMedia as useMedia7 } 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 useHMSStore23 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/hooks/useVideoTileLayout.ts
-import React40, { useContext } from "react";
-var VideoTileContext = React40.createContext({
-  enableSpotlightingPeer: true,
-  hideParticipantNameOnTile: false,
-  roundedVideoTile: true,
-  hideAudioMuteOnTile: false,
-  hideAudioLevelOnTile: false,
-  objectFit: "contain",
-  hideMetadataOnTile: false
-});
-var useVideoTileContext = () => {
-  const context = useContext(VideoTileContext);
-  return context;
-};
+// src/Prebuilt/components/VideoTile.jsx
+import React44, { Fragment as Fragment9, useCallback as useCallback8, useRef as useRef6, useState as useState22 } 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 useHMSStore22
+} from "@100mslive/react-sdk";
+import { BrbTileIcon, HandIcon as HandIcon4, MicOffIcon as MicOffIcon5 } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/InsetTile.tsx
-var MinimisedTile = ({ setMinimised }) => {
-  return /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React41.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React41.createElement(Text, null, "You"), /* @__PURE__ */ React41.createElement(
-    IconButton_default,
+// src/Prebuilt/components/TileMenu/TileMenu.jsx
+import React43, { useState as useState21 } 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 useHMSStore21,
+  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 useHMSActions15,
+  useHMSStore as useHMSStore20,
+  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 = useHMSActions15();
+  const spotlightPeerId = useHMSStore20(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,
     {
-      className: "__cancel-drag-event",
-      onClick: () => setMinimised(false),
-      css: { bg: "transparent", border: "transparent" }
-    },
-    /* @__PURE__ */ React41.createElement(ExpandIcon2, null)
-  ));
+      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 = useHMSStore20(selectTrackByID(trackId));
+  const actions = useHMSActions15();
+  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 = useHMSActions15();
+  const { removeOthers } = useHMSStore20(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] = useState21(false);
+  const { theme } = useTheme();
+  const localPeerID = useHMSStore21(selectLocalPeerID5);
+  const isLocal = localPeerID === peerID;
+  const { removeOthers } = useHMSStore21(selectPermissions10);
+  const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
+  const showSpotlight = enableSpotlightingPeer;
+  const isPrimaryVideoTrack = ((_a = useHMSStore21(selectVideoTrackByPeerID(peerID))) == null ? void 0 : _a.id) === videoTrackID;
+  const showPinAction = audioTrackID || videoTrackID && isPrimaryVideoTrack;
+  const track = useHMSStore21(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 = useHMSStore21(selectPeerByID2(peerID));
+  const [showNameChangeModal, setShowNameChangeModal] = useState21(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 iconDims = { height: "1rem", width: "1rem" };
+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 = useHMSStore22(trackSelector);
+  const isMobile = useMedia10(config.media.md);
+  const peerName = useHMSStore22(selectPeerNameByID(peerId));
+  const audioTrack = useHMSStore22(selectAudioTrackByPeerID(peerId));
+  const localPeerID = useHMSStore22(selectLocalPeerID6);
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
+  const isAudioMuted = !useHMSStore22(selectIsPeerAudioEnabled2(peerId));
+  const isVideoMuted = !(track == null ? void 0 : track.enabled);
+  const [isMouseHovered, setIsMouseHovered] = useState22(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 = useHMSStore22(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
+  const label = getVideoTileLabel({
+    peerName,
+    track,
+    isLocal
+  });
+  const onHoverHandler = useCallback8((event) => {
+    setIsMouseHovered(event.type === "mouseenter");
+  }, []);
+  const ref = useRef6(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 = "medium";
+  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(PrebuiltAudioIndicator, { "data-testid": "participant_audio_mute_icon" }, /* @__PURE__ */ React44.createElement(MicOffIcon5, { style: iconDims })) : /* @__PURE__ */ React44.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React44.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id })) : 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 }),
+      /* @__PURE__ */ React44.createElement(
+        TileConnection_default,
+        {
+          hideLabel: hideParticipantNameOnTile,
+          name: label,
+          isTile: true,
+          peerId,
+          width,
+          pinned,
+          spotlighted
+        }
+      )
+    ) : null
+  );
+};
+var PeerMetadata = ({ peerId }) => {
+  const metaData = useHMSStore22(selectPeerMetadata2(peerId));
+  const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
+  const isHandRaised = useHMSStore22(selectHasPeerHandRaised2(peerId));
+  return /* @__PURE__ */ React44.createElement(Fragment9, null, isHandRaised ? /* @__PURE__ */ React44.createElement(PrebuiltAttributeBox, { "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React44.createElement(HandIcon4, { style: iconDims })) : null, isBRB ? /* @__PURE__ */ React44.createElement(PrebuiltAttributeBox, { "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React44.createElement(BrbTileIcon, { style: iconDims })) : 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,
+  objectFit: "contain",
+  hideMetadataOnTile: false
+});
+var useVideoTileContext = () => {
+  const context = useContext(VideoTileContext);
+  return context;
+};
+
+// src/Prebuilt/components/InsetTile.tsx
+var MinimisedTile = ({ setMinimised }) => {
+  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__ */ React46.createElement(ExpandIcon2, null)
+  ));
 };
 var insetHeightPx = 180;
 var insetMaxWidthPx = 240;
 var defaultMobileAspectRatio = 9 / 16;
 var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
-  const isMobile = useMedia7(config.media.md);
-  const isLandscape = useMedia7(config.media.ls);
-  const localPeer = useHMSStore18(selectLocalPeer);
+  const isMobile = useMedia11(config.media.md);
+  const isLandscape = useMedia11(config.media.ls);
+  const localPeer = useHMSStore23(selectLocalPeer);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore18(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isAllowedToPublish = useHMSStore18(selectIsAllowedToPublish2);
+  const videoTrack = useHMSStore23(selectVideoTrackByID2(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isAllowedToPublish = useHMSStore23(selectIsAllowedToPublish2);
   const videoTileProps = useVideoTileContext();
   let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
   if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
@@ -3398,8 +4107,8 @@ var InsetTile = () => {
     width = 240;
     height = width / aspectRatio;
   }
-  const nodeRef = useRef6(null);
-  useEffect8(() => {
+  const nodeRef = useRef7(null);
+  useEffect10(() => {
     const node = nodeRef.current;
     if (!node || !window.ResizeObserver) {
       return;
@@ -3420,7 +4129,7 @@ var InsetTile = () => {
   if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
     return null;
   }
-  return /* @__PURE__ */ React41.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React46.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React46.createElement(
     Box,
     {
       ref: nodeRef,
@@ -3436,7 +4145,7 @@ var InsetTile = () => {
         h: height
       } : {})
     },
-    minimised ? /* @__PURE__ */ React41.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React41.createElement(
+    minimised ? /* @__PURE__ */ React46.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React46.createElement(
       VideoTile_default,
       __spreadProps(__spreadValues({
         peerId: localPeer == null ? void 0 : localPeer.id,
@@ -3458,8 +4167,8 @@ var InsetTile = () => {
 };
 
 // src/Prebuilt/components/Pagination.tsx
-import React42, { useEffect as useEffect9 } 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 ChevronRightIcon3 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
   onPageChange,
@@ -3475,7 +4184,7 @@ var Pagination = ({
     e.stopPropagation();
     onPageChange(Math.max(page - 1, 0));
   };
-  useEffect9(() => {
+  useEffect11(() => {
     if (page >= numPages) {
       onPageChange(Math.max(0, numPages - 1));
     }
@@ -3483,7 +4192,7 @@ var Pagination = ({
   if (numPages <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React42.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React42.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React42.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React42.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React42.createElement(
+  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,
@@ -3493,15 +4202,15 @@ var Pagination = ({
         onPageChange(i);
       }
     }
-  ))) : null, /* @__PURE__ */ React42.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React42.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(ChevronRightIcon3, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
 };
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
-import React43 from "react";
-var Grid = React43.forwardRef(
+import React48 from "react";
+var Grid = React48.forwardRef(
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
-    return /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React48.createElement(
       Box,
       {
         ref,
@@ -3519,7 +4228,7 @@ var Grid = React43.forwardRef(
       },
       tiles == null ? void 0 : tiles.map((tile) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ React43.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),
@@ -3537,8 +4246,8 @@ var Grid = React43.forwardRef(
 );
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-import { useEffect as useEffect10, useMemo as useMemo2, useState as useState20 } from "react";
-import { useMeasure as useMeasure2, useMedia as useMedia8 } from "react-use";
+import { useEffect as useEffect12, useMemo as useMemo2, useState as useState23 } from "react";
+import { useMeasure as useMeasure2, useMedia as useMedia12 } from "react-use";
 import {
   getPeersWithTiles,
   selectTracksMap as selectTracksMap3,
@@ -3574,9 +4283,9 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore3();
   const [ref, { width, height }] = useMeasure2();
-  const isMobile = useMedia8(config.media.lg);
-  const [pagesWithTiles, setPagesWithTiles] = useState20([]);
-  useEffect10(() => {
+  const isMobile = useMedia12(config.media.lg);
+  const [pagesWithTiles, setPagesWithTiles] = useState23([]);
+  useEffect12(() => {
     if (width === 0 || height === 0) {
       return;
     }
@@ -3643,8 +4352,8 @@ var useTileLayout = ({
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore19(selectLocalPeer2);
-  const isMobile = useMedia9(config.media.md);
+  const localPeer = useHMSStore24(selectLocalPeer2);
+  const isMobile = useMedia13(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
@@ -3664,14 +4373,14 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     maxTileCount,
     edgeToEdge
   });
-  const [page, setPage] = useState21(0);
+  const [page, setPage] = useState24(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect11(() => {
+  useEffect13(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React44.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React44.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React44.createElement(
+  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,
@@ -3681,20 +4390,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__ */ React44.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 React47, { useEffect as useEffect13, useState as useState23 } from "react";
-import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+import React52, { useEffect as useEffect15, useState as useState26 } from "react";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore25 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-import React46, { useEffect as useEffect12, useState as useState22 } from "react";
-import { useMedia as useMedia10 } from "react-use";
+import React51, { useEffect as useEffect14, useState as useState25 } from "react";
+import { useMedia as useMedia14 } from "react-use";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
-import React45 from "react";
-var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React45.createElement(
+import React50 from "react";
+var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React50.createElement(
   Flex,
   {
     direction: "column",
@@ -3703,7 +4412,7 @@ var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React45.createElement(
   children
 );
 var ProminentSection = ({ children, css = {} }) => {
-  return /* @__PURE__ */ React45.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,
@@ -3714,12 +4423,12 @@ var SecondarySection = ({
   if (!(tiles == null ? void 0 : tiles.length)) {
     return null;
   }
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React50.createElement(
     Box,
     {
       css: {
         display: "grid",
-        gridTemplateRows: React45.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",
@@ -3729,7 +4438,7 @@ var SecondarySection = ({
     },
     tiles.map((tile) => {
       var _a, _b, _c, _d;
-      return /* @__PURE__ */ React45.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),
@@ -3746,7 +4455,7 @@ var SecondarySection = ({
         }, tileLayoutProps)
       );
     }),
-    /* @__PURE__ */ React45.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
+    /* @__PURE__ */ React50.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
   );
 };
 var ProminenceLayout = {
@@ -3758,17 +4467,17 @@ var ProminenceLayout = {
 // src/Prebuilt/components/SecondaryTiles.tsx
 var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const isMobile = useMedia10(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] = useState25(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect12(() => {
+  useEffect14(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React46.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React51.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React51.createElement(
     Pagination,
     {
       page,
@@ -3826,7 +4535,7 @@ function RoleProminence({
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore20(selectLocalPeer3);
+  const localPeer = useHMSStore25(selectLocalPeer3);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -3836,14 +4545,14 @@ function RoleProminence({
     pageList,
     maxTileCount
   });
-  const [page, setPage] = useState23(0);
+  const [page, setPage] = useState26(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect13(() => {
+  useEffect15(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React47.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React47.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React47.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React47.createElement(
+  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,
@@ -3853,34 +4562,34 @@ function RoleProminence({
       },
       numPages: pagesWithTiles.length
     }
-  ), /* @__PURE__ */ React47.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React47.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 React50, { useEffect as useEffect14, useMemo as useMemo5, useState as useState25 } from "react";
-import { useMedia as useMedia11 } from "react-use";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
+import React55, { useEffect as useEffect16, useMemo as useMemo5, useState as useState28 } from "react";
+import { useMedia as useMedia15 } from "react-use";
+import { selectPeersScreenSharing, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-import React49, { useRef as useRef7, useState as useState24 } from "react";
+import React54, { useRef as useRef8, useState as useState27 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
-  selectLocalPeerID as selectLocalPeerID5,
-  selectPeerByID as selectPeerByID2,
+  selectLocalPeerID as selectLocalPeerID7,
+  selectPeerByID as selectPeerByID3,
   selectScreenShareAudioByPeerID,
   selectScreenShareByPeerID,
-  useHMSStore as useHMSStore21
+  useHMSStore as useHMSStore26
 } 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 React48 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 useHMSActions16 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon7, ShareScreenIcon as ShareScreenIcon3 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions14();
-  return /* @__PURE__ */ React48.createElement(
+  const hmsActions = useHMSActions16();
+  return /* @__PURE__ */ React53.createElement(
     Flex,
     {
       direction: "column",
@@ -3892,9 +4601,9 @@ var ScreenshareDisplay = () => {
         color: "$on_surface_high"
       }
     },
-    /* @__PURE__ */ React48.createElement(ShareScreenIcon2, { width: 48, height: 48 }),
-    /* @__PURE__ */ React48.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React48.createElement(
+    /* @__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",
@@ -3904,7 +4613,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React48.createElement(CrossIcon5, { width: 18, height: 18 }),
+      /* @__PURE__ */ React53.createElement(CrossIcon7, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -3919,22 +4628,22 @@ var labelStyles = {
   transform: "none",
   flexShrink: 0
 };
-var Tile = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore21(selectLocalPeerID5) === peerId;
-  const track = useHMSStore21(selectScreenShareByPeerID(peerId));
-  const peer = useHMSStore21(selectPeerByID2(peerId));
+var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
+  const isLocal = useHMSStore26(selectLocalPeerID7) === peerId;
+  const track = useHMSStore26(selectScreenShareByPeerID(peerId));
+  const peer = useHMSStore26(selectPeerByID3(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const [isMouseHovered, setIsMouseHovered] = useState24(false);
+  const [isMouseHovered, setIsMouseHovered] = useState27(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const fullscreenRef = useRef7(null);
-  const [fullscreen, setFullscreen] = useState24(false);
+  const fullscreenRef = useRef8(null);
+  const [fullscreen, setFullscreen] = useState27(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 = useHMSStore26(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
-    return /* @__PURE__ */ React49.createElement(ScreenshareDisplay, null);
+    return /* @__PURE__ */ React54.createElement(ScreenshareDisplay, null);
   }
   if (!peer) {
     return null;
@@ -3944,7 +4653,7 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
     isLocal: false,
     track
   });
-  return /* @__PURE__ */ React49.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React49.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,
@@ -3955,9 +4664,9 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         setIsMouseHovered(false);
       }
     },
-    showStatsOnTiles ? /* @__PURE__ */ React49.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React49.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React49.createElement(ShrinkIcon, null) : /* @__PURE__ */ React49.createElement(ExpandIcon3, null)) : null,
-    track ? /* @__PURE__ */ React49.createElement(
+    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,
@@ -3967,8 +4676,8 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
         css: { minHeight: 0 }
       }
     ) : null,
-    /* @__PURE__ */ React49.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React54.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
+    isMouseHovered && !peer.isLocal ? /* @__PURE__ */ React54.createElement(
       TileMenu_default,
       {
         isScreenshare: true,
@@ -3980,28 +4689,28 @@ var Tile = ({ peerId, width = "100%", height = "100%" }) => {
     ) : null
   ));
 };
-var ScreenshareTile = React49.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 = useHMSStore27(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState25(0);
+  const [page, setPage] = useState28(0);
   const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia11(config.media.md);
+  const isMobile = useMedia15(config.media.md);
   const secondaryPeers = useMemo5(
     () => isMobile ? activeSharePeer ? [activeSharePeer, ...peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id))] : peers : peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id)),
     [activeSharePeer, peers, isMobile]
   );
-  useEffect14(() => {
+  useEffect16(() => {
     setActiveScreenSharePeer(isMobile ? "" : activeSharePeer == null ? void 0 : activeSharePeer.id);
     return () => {
       setActiveScreenSharePeer("");
     };
   }, [activeSharePeer == null ? void 0 : activeSharePeer.id, isMobile, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React50.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React50.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React50.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React50.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React50.createElement(
+  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,
@@ -4106,9 +4815,9 @@ var GridLayout = ({
   edge_to_edge = false,
   hide_metadata_on_tile = false
 }) => {
-  const peerSharing = useHMSStore23(selectPeerScreenSharing);
+  const peerSharing = useHMSStore28(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore23(selectPeers2);
+  const peers = useHMSStore28(selectPeers2);
   const isRoleProminence = prominentRoles.length && peers.some(
     (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
   ) || pinnedTrack;
@@ -4119,10 +4828,10 @@ var GridLayout = ({
     return peers;
   }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
   const vanillaStore = useHMSVanillaStore4();
-  const [sortedPeers, setSortedPeers] = useState26(updatedPeers);
+  const [sortedPeers, setSortedPeers] = useState29(updatedPeers);
   const peersSorter = useMemo6(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState26(0);
-  const [mainPage, setMainPage] = useState26(0);
+  const [pageSize, setPageSize] = useState29(0);
+  const [mainPage, setMainPage] = useState29(0);
   const tileLayout = {
     enableSpotlightingPeer: enable_spotlighting_peer,
     hideParticipantNameOnTile: hide_participant_name_on_tile,
@@ -4131,7 +4840,7 @@ var GridLayout = ({
     hideMetadataOnTile: hide_metadata_on_tile,
     objectFit: video_object_fit
   };
-  useEffect15(() => {
+  useEffect17(() => {
     if (mainPage !== 0) {
       return;
     }
@@ -4142,7 +4851,7 @@ var GridLayout = ({
     peersSorter.onUpdate(setSortedPeers);
   }, [mainPage, peersSorter, updatedPeers, pageSize]);
   if (peerSharing) {
-    return /* @__PURE__ */ React51.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React51.createElement(
+    return /* @__PURE__ */ React56.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React56.createElement(
       ScreenshareLayout,
       {
         peers: sortedPeers,
@@ -4152,7 +4861,7 @@ var GridLayout = ({
       }
     ));
   } else if (isRoleProminence) {
-    return /* @__PURE__ */ React51.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React51.createElement(
+    return /* @__PURE__ */ React56.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React56.createElement(
       RoleProminence,
       {
         peers: sortedPeers,
@@ -4164,7 +4873,7 @@ var GridLayout = ({
       }
     ));
   }
-  return /* @__PURE__ */ React51.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React56.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React56.createElement(
     EqualProminence,
     {
       peers: sortedPeers,
@@ -4177,46 +4886,46 @@ var GridLayout = ({
 };
 
 // src/Prebuilt/layouts/EmbedView.jsx
-import React52, { useCallback as useCallback8, useEffect as useEffect16, useMemo as useMemo7, useRef as useRef8, useState as useState27 } from "react";
+import React57, { useCallback as useCallback9, useEffect as useEffect18, useMemo as useMemo7, useRef as useRef9, useState as useState30 } from "react";
 import {
   selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   throwErrorHandler,
-  useHMSStore as useHMSStore24,
+  useHMSStore as useHMSStore29,
   useScreenShare as useScreenShare3
 } from "@100mslive/react-sdk";
 var EmbedView = () => {
-  return /* @__PURE__ */ React52.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React52.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 = useHMSStore29(selectPeers3);
+  const peerPresenting = useHMSStore29(selectPeerScreenSharing2);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const smallTilePeers = useMemo7(() => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
     return smallTilePeers2;
   }, [peers, peerPresenting]);
-  useEffect16(() => {
+  useEffect18(() => {
     setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
     return () => {
       setActiveScreenSharePeer("");
     };
   }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React52.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React52.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React52.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] = useState30(false);
+  const screenShareAttemptInProgress = useRef9(false);
   const src = embedConfig.url;
-  const iframeRef = useRef8();
-  const resetEmbedConfig = useCallback8(() => {
+  const iframeRef = useRef9();
+  const resetEmbedConfig = useCallback9(() => {
     if (src) {
       setEmbedConfig({ url: "" });
     }
   }, [src, setEmbedConfig]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
       screenShareAttemptInProgress.current = true;
       toggleScreenShare({
@@ -4229,7 +4938,7 @@ var EmbedComponent = () => {
       });
     }
   }, []);
-  useEffect16(() => {
+  useEffect18(() => {
     if (wasScreenShared && !amIScreenSharing) {
       resetEmbedConfig();
     }
@@ -4240,7 +4949,7 @@ var EmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React52.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React57.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React57.createElement(
     "iframe",
     {
       src,
@@ -4253,28 +4962,28 @@ var EmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
-import React53, { useCallback as useCallback9, useEffect as useEffect17, useRef as useRef9, useState as useState28 } from "react";
+import React58, { useCallback as useCallback10, useEffect as useEffect19, useRef as useRef10, useState as useState31 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 var PDFView = () => {
-  return /* @__PURE__ */ React53.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React53.createElement(PDFEmbedComponent, null));
+  return /* @__PURE__ */ React58.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React58.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
-  const ref = useRef9();
+  const ref = useRef10();
   const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState28(false);
+  const [isPDFLoaded, setIsPDFLoaded] = useState31(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] = useState31(false);
+  const screenShareAttemptInProgress = useRef10(false);
+  const iframeRef = useRef10();
+  const resetEmbedConfig = useCallback10(() => {
     setPDFConfig({ state: false });
   }, [setPDFConfig]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (isPDFLoaded && ref.current) {
       ref.current.contentWindow.postMessage(
         {
@@ -4284,7 +4993,7 @@ var PDFEmbedComponent = () => {
       );
     }
   }, [isPDFLoaded, themeType]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
       screenShareAttemptInProgress.current = true;
       toggleScreenShare({
@@ -4298,7 +5007,7 @@ var PDFEmbedComponent = () => {
       });
     }
   }, []);
-  useEffect17(() => {
+  useEffect19(() => {
     if (wasScreenShared && !amIScreenSharing) {
       resetEmbedConfig();
     }
@@ -4309,7 +5018,7 @@ var PDFEmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React53.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React58.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ React58.createElement(
     "iframe",
     {
       src: pdfJSURL,
@@ -4342,72 +5051,72 @@ var PDFEmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
-import React60 from "react";
-import { useMedia as useMedia16 } from "react-use";
-import { selectAppData as selectAppData3, selectVideoTrackByPeerID, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
+import React66 from "react";
+import { useMedia as useMedia20 } from "react-use";
+import { selectAppData as selectAppData3, selectVideoTrackByPeerID as selectVideoTrackByPeerID3, useHMSStore as useHMSStore39 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SidePaneTabs.tsx
-import React57, { useEffect as useEffect22, useState as useState32 } from "react";
-import { useMedia as useMedia15 } from "react-use";
-import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore30 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
+import React63, { useEffect as useEffect25, useState as useState36 } from "react";
+import { useMedia as useMedia19 } from "react-use";
+import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore36 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon10 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.jsx
-import React56, { useCallback as useCallback14, useEffect as useEffect21, useRef as useRef13, useState as useState31 } from "react";
-import { useMedia as useMedia14 } from "react-use";
+import React61, { useCallback as useCallback15, useEffect as useEffect23, useRef as useRef14, useState as useState34 } 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 useHMSActions21,
   useHMSNotifications,
-  useHMSStore as useHMSStore29
+  useHMSStore as useHMSStore34
 } 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 React54, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect18, useLayoutEffect, useMemo as useMemo8, useRef as useRef10, useState as useState29 } from "react";
+import React59, { Fragment as Fragment10, useCallback as useCallback12, useEffect as useEffect20, useLayoutEffect, useMemo as useMemo8, useRef as useRef11, useState as useState32 } from "react";
 import { useInView } from "react-intersection-observer";
-import { useMedia as useMedia12 } 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 selectLocalPeerID6,
+  selectLocalPeerID as selectLocalPeerID8,
   selectLocalPeerRoleName as selectLocalPeerRoleName2,
   selectMessagesByPeerID,
   selectMessagesByRole,
-  selectPeerNameByID as selectPeerNameByID2,
-  selectPermissions as selectPermissions9,
-  useHMSActions as useHMSActions16,
-  useHMSStore as useHMSStore27
+  selectPeerNameByID as selectPeerNameByID3,
+  selectPermissions as selectPermissions11,
+  useHMSActions as useHMSActions18,
+  useHMSStore as useHMSStore32
 } 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 useCallback11 } from "react";
 import {
-  selectPeerNameByID,
+  selectPeerNameByID as selectPeerNameByID2,
   selectSessionMetadata,
-  useHMSActions as useHMSActions15,
-  useHMSStore as useHMSStore25,
+  useHMSActions as useHMSActions17,
+  useHMSStore as useHMSStore30,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
-  const hmsActions = useHMSActions15();
+  const hmsActions = useHMSActions17();
   const vanillaStore = useHMSVanillaStore5();
-  const pinnedMessage = useHMSStore25(selectSessionMetadata);
-  const setPinnedMessage = useCallback10(
+  const pinnedMessage = useHMSStore30(selectSessionMetadata);
+  const setPinnedMessage = useCallback11(
     /**
      * @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 }));
@@ -4423,11 +5132,11 @@ import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore26
+  useHMSStore as useHMSStore31
 } from "@100mslive/react-sdk";
 var useUnreadCount = ({ role, peerId }) => {
   const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
-  const unreadCount = useHMSStore26(unreadCountSelector);
+  const unreadCount = useHMSStore31(unreadCountSelector);
   return unreadCount;
 };
 
@@ -4448,7 +5157,7 @@ var formatTime = (date) => {
   return `${hours}:${mins} ${suffix}`;
 };
 var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Flex,
     {
       align: "center",
@@ -4460,16 +5169,16 @@ var MessageTypeContainer = ({ left, right }) => {
         r: "$0"
       }
     },
-    left && /* @__PURE__ */ React54.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
-    left && right && /* @__PURE__ */ React54.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
-    right && /* @__PURE__ */ React54.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
+    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 = useHMSStore27(selectPeerNameByID2(receiver));
-  const localPeerRoleName = useHMSStore27(selectLocalPeerRoleName2);
+  const peerName = useHMSStore32(selectPeerNameByID3(receiver));
+  const localPeerRoleName = useHMSStore32(selectLocalPeerRoleName2);
   if (receiver) {
-    return /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React59.createElement(
       MessageTypeContainer,
       {
         left: hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ""}` : "TO YOU",
@@ -4478,7 +5187,7 @@ var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
     );
   }
   if (roles && roles.length) {
-    return /* @__PURE__ */ React54.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
+    return /* @__PURE__ */ React59.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
   }
   return null;
 };
@@ -4492,10 +5201,10 @@ var Link = styled("a", {
 });
 var AnnotisedMessage = ({ message }) => {
   if (!message) {
-    return /* @__PURE__ */ React54.createElement(Fragment8, null);
+    return /* @__PURE__ */ React59.createElement(Fragment10, null);
   }
-  return /* @__PURE__ */ React54.createElement(Fragment8, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React54.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
+  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 }) => {
@@ -4505,18 +5214,18 @@ var getMessageType = ({ roles, receiver }) => {
   return receiver ? "private" : "";
 };
 var ChatActions = ({ onPin, showPinAction }) => {
-  const [open, setOpen] = useState29(false);
+  const [open, setOpen] = useState32(false);
   if (!showPinAction) {
     return null;
   }
-  return /* @__PURE__ */ React54.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React54.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React54.createElement(IconButton, null, /* @__PURE__ */ React54.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React54.createElement(VerticalMenuIcon5, null)))), /* @__PURE__ */ React54.createElement(Dropdown.Portal, null, /* @__PURE__ */ React54.createElement(
+  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__ */ React54.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React54.createElement(PinIcon, null), /* @__PURE__ */ React54.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
+    /* @__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, {
@@ -4528,38 +5237,38 @@ var SenderName = styled(Text, {
   color: "$on_surface_high",
   fontWeight: "$semiBold"
 });
-var ChatMessage = React54.memo(
+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 = useRef10(null);
-    useEffect18(() => {
+    const rowRef = useRef11(null);
+    useEffect20(() => {
       if (rowRef.current) {
         setRowHeight(index, rowRef.current.clientHeight);
       }
     }, [index, setRowHeight]);
-    const isMobile = useMedia12(config.media.md);
+    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 = useHMSActions16();
-    const localPeerId = useHMSStore27(selectLocalPeerID6);
-    const permissions = useHMSStore27(selectPermissions9);
+    const hmsActions = useHMSActions18();
+    const localPeerId = useHMSStore32(selectLocalPeerID8);
+    const permissions = useHMSStore32(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);
-    useEffect18(() => {
+    useEffect20(() => {
       if (message.id && !message.read && inView) {
         hmsActions.setMessageRead(true, message.id);
       }
     }, [message.read, hmsActions, inView, message.id]);
-    useEffect18(() => {
+    useEffect20(() => {
       if (isLast && inView && unreadCount >= 1) {
         scrollToBottom(1);
       }
     }, [inView, isLast, scrollToBottom, unreadCount]);
-    return /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React59.createElement(
       Box,
       {
         ref,
@@ -4567,7 +5276,7 @@ var ChatMessage = React54.memo(
         css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
         style
       },
-      /* @__PURE__ */ React54.createElement(
+      /* @__PURE__ */ React59.createElement(
         Flex,
         {
           ref: rowRef,
@@ -4584,7 +5293,7 @@ var ChatMessage = React54.memo(
           key: message.time,
           "data-testid": "chat_msg"
         },
-        /* @__PURE__ */ React54.createElement(
+        /* @__PURE__ */ React59.createElement(
           Text,
           {
             css: {
@@ -4597,7 +5306,7 @@ var ChatMessage = React54.memo(
             },
             as: "div"
           },
-          /* @__PURE__ */ React54.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React54.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React54.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React54.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React54.createElement(
+          /* @__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",
@@ -4610,7 +5319,7 @@ var ChatMessage = React54.memo(
             },
             formatTime(message.time)
           ) : null),
-          /* @__PURE__ */ React54.createElement(
+          /* @__PURE__ */ React59.createElement(
             MessageType,
             {
               hasCurrentUserSent: message.sender === localPeerId,
@@ -4618,9 +5327,9 @@ var ChatMessage = React54.memo(
               roles: message.recipientRoles
             }
           ),
-          !isOverlay ? /* @__PURE__ */ React54.createElement(ChatActions, { onPin, showPinAction }) : null
+          !isOverlay ? /* @__PURE__ */ React59.createElement(ChatActions, { onPin, showPinAction }) : null
         ),
-        /* @__PURE__ */ React54.createElement(
+        /* @__PURE__ */ React59.createElement(
           Text,
           {
             variant: "sm",
@@ -4634,13 +5343,13 @@ var ChatMessage = React54.memo(
             },
             onClick: (e) => e.stopPropagation()
           },
-          /* @__PURE__ */ React54.createElement(AnnotisedMessage, { message: message.message })
+          /* @__PURE__ */ React59.createElement(AnnotisedMessage, { message: message.message })
         )
       )
     );
   }
 );
-var ChatList = React54.forwardRef(
+var ChatList = React59.forwardRef(
   ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
@@ -4648,7 +5357,7 @@ var ChatList = React54.forwardRef(
         scrollToBottom(1);
       }
     }, [listRef]);
-    return /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React59.createElement(
       VariableSizeList,
       {
         ref: listRef,
@@ -4660,7 +5369,7 @@ var ChatList = React54.forwardRef(
           overflowX: "hidden"
         }
       },
-      ({ index, style }) => /* @__PURE__ */ React54.createElement(
+      ({ index, style }) => /* @__PURE__ */ React59.createElement(
         ChatMessage,
         {
           style,
@@ -4677,19 +5386,19 @@ var ChatList = React54.forwardRef(
     );
   }
 );
-var VirtualizedChatMessages = React54.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
-  const rowHeights = useRef10({});
+var VirtualizedChatMessages = React59.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
+  const rowHeights = useRef11({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
   }
-  const setRowHeight = useCallback11(
+  const setRowHeight = useCallback12(
     (index, size) => {
       listRef.current.resetAfterIndex(0);
       rowHeights.current = __spreadProps(__spreadValues({}, rowHeights.current), { [index]: size });
     },
     [listRef]
   );
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Box,
     {
       css: {
@@ -4698,14 +5407,14 @@ var VirtualizedChatMessages = React54.forwardRef(({ messages, unreadCount = 0, s
       },
       as: "div"
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React59.createElement(
       AutoSizer,
       {
         style: {
           width: "90%"
         }
       },
-      ({ height, width }) => /* @__PURE__ */ React54.createElement(
+      ({ height, width }) => /* @__PURE__ */ React59.createElement(
         ChatList,
         {
           width,
@@ -4721,16 +5430,16 @@ var VirtualizedChatMessages = React54.forwardRef(({ messages, unreadCount = 0, s
     )
   );
 });
-var ChatBody = React54.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 = useHMSStore27(storeMessageSelector);
+  let messages = useHMSStore32(storeMessageSelector);
   messages = useMemo8(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
-  const isMobile = useMedia12(config.media.md);
+  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__ */ React54.createElement(
+    return /* @__PURE__ */ React59.createElement(
       Flex,
       {
         css: {
@@ -4742,7 +5451,7 @@ var ChatBody = React54.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
         align: "center",
         justify: "center"
       },
-      /* @__PURE__ */ React54.createElement(Box, null, /* @__PURE__ */ React54.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ React54.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ React54.createElement(
+      /* @__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",
@@ -4752,7 +5461,7 @@ var ChatBody = React54.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
       ))
     );
   }
-  return /* @__PURE__ */ React54.createElement(Fragment8, null, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React59.createElement(Fragment10, null, /* @__PURE__ */ React59.createElement(
     VirtualizedChatMessages,
     {
       messages,
@@ -4764,23 +5473,23 @@ var ChatBody = React54.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
 });
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
-import React55, { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef12, useState as useState30 } from "react";
-import { useMedia as useMedia13 } from "react-use";
+import React60, { useCallback as useCallback14, useEffect as useEffect22, useRef as useRef13, useState as useState33 } 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 useHMSActions20 } 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 useHMSStore28 } from "@100mslive/react-sdk";
+import { useCallback as useCallback13 } from "react";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions19, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions17();
-  let chatDraftMessage = useHMSStore28(selectAppData2(APP_DATA.chatDraft));
+  const hmsActions = useHMSActions19();
+  let chatDraftMessage = useHMSStore33(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
-  const setDraftMessage = useCallback12(
+  const setDraftMessage = useCallback13(
     (message) => {
       hmsActions.setAppData(APP_DATA.chatDraft, message, true);
     },
@@ -4790,10 +5499,10 @@ var useChatDraftMessage = () => {
 };
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-import { useEffect as useEffect19, useRef as useRef11 } from "react";
+import { useEffect as useEffect21, useRef as useRef12 } from "react";
 var useEmojiPickerStyles = (showing) => {
-  const ref = useRef11(null);
-  useEffect19(() => {
+  const ref = useRef12(null);
+  useEffect21(() => {
     if (showing) {
       setTimeout(() => {
         var _a, _b;
@@ -4841,9 +5550,9 @@ var TextArea = styled("textarea", {
   }
 });
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState30(false);
+  const [showEmoji, setShowEmoji] = useState33(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React55.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React55.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React55.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React55.createElement(EmojiIcon3, null))), /* @__PURE__ */ React55.createElement(Popover.Portal, null, /* @__PURE__ */ React55.createElement(
+  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,
@@ -4853,7 +5562,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React60.createElement(
       Box,
       {
         css: {
@@ -4862,7 +5571,7 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ React55.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ React60.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
@@ -4873,13 +5582,13 @@ var ChatFooter = ({
   children
 }) => {
   var _a;
-  const hmsActions = useHMSActions18();
-  const inputRef = useRef12(null);
+  const hmsActions = useHMSActions20();
+  const inputRef = useRef13(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia13(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 = useCallback14(() => __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) {
@@ -4902,19 +5611,19 @@ var ChatFooter = ({
       ToastManager.addToast({ title: err.message });
     }
   }), [role, peerId, hmsActions, onSend]);
-  useEffect20(() => {
+  useEffect22(() => {
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
     }
   }, [draftMessage]);
-  useEffect20(() => {
+  useEffect22(() => {
     const messageElement = inputRef.current;
     return () => {
       setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
     };
   }, [setDraftMessage]);
-  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React55.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",
@@ -4935,7 +5644,7 @@ var ChatFooter = ({
       }
     },
     children,
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React60.createElement(
       TextArea,
       {
         css: {
@@ -4963,7 +5672,7 @@ var ChatFooter = ({
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    !isMobile ? /* @__PURE__ */ React55.createElement(
+    !isMobile ? /* @__PURE__ */ React60.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -4973,7 +5682,7 @@ var ChatFooter = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React60.createElement(
       IconButton,
       {
         className: "send-msg",
@@ -4986,7 +5695,7 @@ var ChatFooter = ({
         },
         "data-testid": "send_msg_btn"
       },
-      /* @__PURE__ */ React55.createElement(SendIcon, null)
+      /* @__PURE__ */ React60.createElement(SendIcon, null)
     )
   )));
 };
@@ -4994,10 +5703,10 @@ var ChatFooter = ({
 // 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 = useHMSStore34(selectPermissions12);
+  const pinnedMessage = useHMSStore34(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__ */ React56.createElement(
+  return pinnedMessage ? /* @__PURE__ */ React61.createElement(
     Flex,
     {
       title: pinnedMessage,
@@ -5005,8 +5714,8 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
       align: "center",
       justify: "between"
     },
-    /* @__PURE__ */ React56.createElement(PinIcon2, null),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React61.createElement(PinIcon3, null),
+    /* @__PURE__ */ React61.createElement(
       Box,
       {
         css: {
@@ -5016,15 +5725,15 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React56.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React56.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
+      /* @__PURE__ */ React61.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React61.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
     ),
-    permissions.removeOthers && /* @__PURE__ */ React56.createElement(
+    permissions.removeOthers && /* @__PURE__ */ React61.createElement(
       Flex,
       {
         onClick: () => clearPinnedMessage(),
         css: { cursor: "pointer", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
       },
-      /* @__PURE__ */ React56.createElement(CrossIcon6, null)
+      /* @__PURE__ */ React61.createElement(CrossIcon8, null)
     )
   ) : null;
 };
@@ -5033,17 +5742,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 = useHMSStore34(selectPeerNameByID4(peerSelector));
+  const [chatOptions, setChatOptions] = useState34({
     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] = useState34(false);
+  const listRef = useRef14(null);
+  const hmsActions = useHMSActions21();
   const { setPinnedMessage } = useSetPinnedMessage();
-  useEffect21(() => {
+  useEffect23(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
       setPeerSelector("");
       setChatOptions({
@@ -5055,14 +5764,14 @@ var Chat = ({ screenType }) => {
   }, [notification, peerSelector, setPeerSelector]);
   const storeMessageSelector = selectHMSMessagesCount;
   const { elements } = useRoomLayoutConferencingScreen();
-  const isMobile = useMedia14(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 = useHMSStore34(storeMessageSelector) || 0;
+  const scrollToBottom = useCallback15(
     (unreadCount = 0) => {
       var _a2;
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -5076,7 +5785,7 @@ var Chat = ({ screenType }) => {
     },
     [hmsActions, messagesCount]
   );
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React61.createElement(
     Flex,
     {
       direction: "column",
@@ -5085,8 +5794,8 @@ var Chat = ({ screenType }) => {
         gap: "$4"
       }
     },
-    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? null : /* @__PURE__ */ React56.createElement(React56.Fragment, null, ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages) ? /* @__PURE__ */ React56.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
-    /* @__PURE__ */ React56.createElement(
+    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,
@@ -5096,7 +5805,7 @@ var Chat = ({ screenType }) => {
         screenType
       }
     ),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React61.createElement(
       ChatFooter,
       {
         role: chatOptions.role,
@@ -5114,7 +5823,7 @@ var Chat = ({ screenType }) => {
         },
         peerId: chatOptions.peerId
       },
-      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React56.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
+      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React61.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
     )
   );
 };
@@ -5123,7 +5832,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   if (!unreadCount) {
     return null;
   }
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React61.createElement(
     Flex,
     {
       justify: "center",
@@ -5134,7 +5843,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React61.createElement(
       Button,
       {
         variant: "standard",
@@ -5157,11 +5866,70 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       },
       "New ",
       unreadCount === 1 ? "message" : "messages",
-      /* @__PURE__ */ React56.createElement(ChevronDownIcon2, null)
+      /* @__PURE__ */ React61.createElement(ChevronDownIcon2, null)
     )
   );
 };
 
+// src/Prebuilt/components/Footer/PaginatedParticipants.tsx
+import React62, { useEffect as useEffect24, useRef as useRef15, useState as useState35 } from "react";
+import { useMeasure as useMeasure3 } from "react-use";
+import { FixedSizeList as FixedSizeList2 } from "react-window";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom6, useHMSStore as useHMSStore35, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon4, CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
+var PaginatedParticipants = ({ roleName, onBack }) => {
+  const { peers, total, loadPeers, loadMorePeers } = usePaginatedParticipants2({ role: roleName, limit: 20 });
+  const [search, setSearch] = useState35("");
+  const [isLoading, setIsLoading] = useState35(false);
+  const filteredPeers = peers.filter((p) => {
+    var _a;
+    return (_a = p.name) == null ? void 0 : _a.toLowerCase().includes(search);
+  });
+  const isConnected = useHMSStore35(selectIsConnectedToRoom6);
+  const [ref, { width }] = useMeasure3();
+  const containerRef = useRef15(null);
+  const height = ROW_HEIGHT * peers.length;
+  const resetSidePane = useSidepaneReset();
+  const hasNext = total > peers.length;
+  useEffect24(() => {
+    loadPeers();
+  }, []);
+  return /* @__PURE__ */ React62.createElement(Flex, { ref, direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React62.createElement(Flex, { align: "center" }, /* @__PURE__ */ React62.createElement(Flex, { align: "center", css: { flex: "1 1 0", cursor: "pointer" }, onClick: onBack }, /* @__PURE__ */ React62.createElement(ChevronLeftIcon4, null), /* @__PURE__ */ React62.createElement(Text, { variant: "lg", css: { flex: "1 1 0" } }, "Participants")), /* @__PURE__ */ React62.createElement(
+    IconButton,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        resetSidePane();
+      },
+      "data-testid": "close_sidepane"
+    },
+    /* @__PURE__ */ React62.createElement(CrossIcon9, null)
+  )), /* @__PURE__ */ React62.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React62.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React62.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React62.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React62.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React62.createElement(
+    FixedSizeList2,
+    {
+      itemSize: ROW_HEIGHT,
+      itemData: { peerList: filteredPeers, isConnected: isConnected === true },
+      itemKey,
+      itemCount: filteredPeers.length,
+      width,
+      height,
+      outerRef: containerRef
+    },
+    VirtualizedParticipantItem
+  ), hasNext ? /* @__PURE__ */ React62.createElement(Flex, { justify: "center", css: { w: "100%" } }, /* @__PURE__ */ React62.createElement(
+    Button,
+    {
+      css: { w: "max-content", p: "$4" },
+      onClick: () => {
+        setIsLoading(true);
+        loadMorePeers().catch(console.error).finally(() => setIsLoading(false));
+      },
+      disabled: isLoading
+    },
+    isLoading ? /* @__PURE__ */ React62.createElement(Loading, { size: 16 }) : "Load More"
+  )) : null)));
+};
+
 // src/Prebuilt/components/SidePaneTabs.tsx
 var tabTriggerCSS = {
   color: "$on_surface_high",
@@ -5172,23 +5940,25 @@ var tabTriggerCSS = {
   justifyContent: "center"
 };
 var ParticipantCount2 = ({ count }) => {
-  return count < 1e3 ? /* @__PURE__ */ React57.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React57.createElement(Tooltip, { title: count }, /* @__PURE__ */ React57.createElement("span", null, "(", getFormattedCount(count), ")"));
+  return count < 1e3 ? /* @__PURE__ */ React63.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React63.createElement(Tooltip, { title: count }, /* @__PURE__ */ React63.createElement("span", null, "(", getFormattedCount(count), ")"));
 };
-var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+var SidePaneTabs = React63.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 [activeRole, setActiveRole] = useState36("");
+  const peerCount = useHMSStore36(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 = useMedia15(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 { off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  useEffect22(() => {
+  useEffect25(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
     } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
@@ -5197,10 +5967,26 @@ var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
       resetSidePane();
     }
   }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect22(() => {
+  useEffect25(() => {
     setActiveTab(active);
   }, [active]);
-  return /* @__PURE__ */ React57.createElement(
+  if (activeRole) {
+    return /* @__PURE__ */ React63.createElement(
+      Flex,
+      {
+        direction: "column",
+        css: {
+          color: "$on_primary_high",
+          h: "100%",
+          marginTop: hideControls && isOverlayChat ? "$17" : "0",
+          transition: "margin 0.3s ease-in-out",
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ React63.createElement(Box, { css: { position: "absolute", left: 0, top: 0, size: "100%", zIndex: 21, bg: "$surface_dim" } }, /* @__PURE__ */ React63.createElement(PaginatedParticipants, { roleName: activeRole, onBack: () => setActiveRole("") }))
+    );
+  }
+  return /* @__PURE__ */ React63.createElement(
     Flex,
     {
       direction: "column",
@@ -5211,7 +5997,7 @@ var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         transition: "margin 0.3s ease-in-out"
       }
     },
-    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React57.createElement(Chat, { screenType }) : /* @__PURE__ */ React57.createElement(React57.Fragment, null, hideTabs ? /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React57.createElement("span", null, "Participants ", /* @__PURE__ */ React57.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React57.createElement(Chat, { screenType }) : /* @__PURE__ */ React57.createElement(ParticipantList, null)) : /* @__PURE__ */ React57.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React63.createElement(Chat, { screenType }) : /* @__PURE__ */ React63.createElement(React63.Fragment, null, hideTabs ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React63.createElement("span", null, "Participants ", /* @__PURE__ */ React63.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React63.createElement(Chat, { screenType }) : /* @__PURE__ */ React63.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })) : /* @__PURE__ */ React63.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -5221,7 +6007,7 @@ var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           size: "100%"
         }
       },
-      /* @__PURE__ */ React57.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React63.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React63.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.CHAT,
@@ -5231,7 +6017,7 @@ var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Chat"
-      ), /* @__PURE__ */ React57.createElement(
+      ), /* @__PURE__ */ React63.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.PARTICIPANTS,
@@ -5241,15 +6027,15 @@ var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Participants ",
-        /* @__PURE__ */ React57.createElement(ParticipantCount2, { count: peerCount })
+        /* @__PURE__ */ React63.createElement(ParticipantCount2, { count: peerCount })
       )),
-      /* @__PURE__ */ React57.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React57.createElement(ParticipantList, null)),
-      /* @__PURE__ */ React57.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React57.createElement(Chat, { screenType }))
+      /* @__PURE__ */ React63.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React63.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
+      /* @__PURE__ */ React63.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React63.createElement(Chat, { screenType }))
     )),
-    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React57.createElement(
+    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React63.createElement(
       IconButton,
       {
-        css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
+        css: { position: "absolute", right: "$9", top: "$11", "@md": { top: "$8", right: "$6" } },
         onClick: (e) => {
           e.stopPropagation();
           if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -5260,22 +6046,22 @@ var SidePaneTabs = React57.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         },
         "data-testid": "close_chat"
       },
-      /* @__PURE__ */ React57.createElement(CrossIcon7, null)
+      /* @__PURE__ */ React63.createElement(CrossIcon10, null)
     )
   );
 });
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
-import React59, { Fragment as Fragment10, useState as useState34 } from "react";
-import { selectPermissions as selectPermissions11, useHMSStore as useHMSStore32, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
-import { ColoredHandIcon, CrossIcon as CrossIcon8, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
+import React65, { Fragment as Fragment12, useState as useState38 } from "react";
+import { selectPermissions as selectPermissions13, useHMSStore as useHMSStore38, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
+import { ColoredHandIcon, CrossIcon as CrossIcon11, 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 React58, { Fragment as Fragment9, useCallback as useCallback15, useEffect as useEffect23, useState as useState33 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions20, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+import React64, { Fragment as Fragment11, useCallback as useCallback16, useEffect as useEffect26, useState as useState37 } from "react";
+import { selectRoomID, useHMSActions as useHMSActions22, useHMSStore as useHMSStore37, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5294,7 +6080,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__ */ React58.createElement(SupportIcon, null)
+        icon: /* @__PURE__ */ React64.createElement(SupportIcon, null)
       };
       break;
     }
@@ -5302,7 +6088,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__ */ React58.createElement(EyeOpenIcon, null)
+        icon: /* @__PURE__ */ React64.createElement(EyeOpenIcon, null)
       };
       break;
     }
@@ -5310,7 +6096,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__ */ React58.createElement(WrenchIcon, null),
+        icon: /* @__PURE__ */ React64.createElement(WrenchIcon, null),
         order: 1
       };
   }
@@ -5318,8 +6104,8 @@ var getCardData = (roleName, roomId) => {
   return data3;
 };
 var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
-  const [copied, setCopied] = useState33(false);
-  return isHLSRunning ? /* @__PURE__ */ React58.createElement(
+  const [copied, setCopied] = useState37(false);
+  return isHLSRunning ? /* @__PURE__ */ React64.createElement(
     Box,
     {
       key: title,
@@ -5330,9 +6116,9 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         borderRadius: "$2"
       }
     },
-    /* @__PURE__ */ React58.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React58.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-    /* @__PURE__ */ React58.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React64.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React64.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+    /* @__PURE__ */ React64.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+    /* @__PURE__ */ React64.createElement(
       Button,
       {
         variant: "standard",
@@ -5344,24 +6130,24 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
         icon: true
       },
-      copied ? /* @__PURE__ */ React58.createElement(React58.Fragment, null, "Link copied!") : /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+      copied ? /* @__PURE__ */ React64.createElement(React64.Fragment, null, "Link copied!") : /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
     )
   ) : null;
 };
 var HLSStreaming = ({ onBack }) => {
   const roleNames = useFilteredRoles();
-  const roomId = useHMSStore31(selectRoomID);
+  const roomId = useHMSStore37(selectRoomID);
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
-  const [showLinks, setShowLinks] = useState33(false);
-  return !showLinks ? /* @__PURE__ */ React58.createElement(Container, { rounded: true }, /* @__PURE__ */ React58.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React58.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React58.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React58.createElement(StartHLS, null)) : /* @__PURE__ */ React58.createElement(Container, { rounded: true }, /* @__PURE__ */ React58.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React58.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React58.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+  const [showLinks, setShowLinks] = useState37(false);
+  return !showLinks ? /* @__PURE__ */ React64.createElement(Container, { rounded: true }, /* @__PURE__ */ React64.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React64.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__ */ React64.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React64.createElement(StartHLS, null)) : /* @__PURE__ */ React64.createElement(Container, { rounded: true }, /* @__PURE__ */ React64.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React64.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React64.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 = useHMSActions22();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback15(
+  const startHLS = useCallback16(
     (variants) => __async(void 0, null, function* () {
       try {
         if (isHLSStarted) {
@@ -5380,7 +6166,7 @@ var StartHLS = () => {
     }),
     [hmsActions, record, isHLSStarted, setHLSStarted]
   );
-  return /* @__PURE__ */ React58.createElement(Fragment9, null, /* @__PURE__ */ React58.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React58.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React58.createElement(ErrorText, { error }), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React64.createElement(Fragment11, null, /* @__PURE__ */ React64.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React64.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React64.createElement(ErrorText, { error }), /* @__PURE__ */ React64.createElement(
     Button,
     {
       "data-testid": "start_hls",
@@ -5389,21 +6175,21 @@ var StartHLS = () => {
       onClick: () => startHLS(),
       disabled: isHLSStarted
     },
-    isHLSStarted ? /* @__PURE__ */ React58.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React58.createElement(GoLiveIcon2, null),
+    isHLSStarted ? /* @__PURE__ */ React64.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React64.createElement(GoLiveIcon2, null),
     isHLSStarted ? "Starting stream..." : "Go Live"
-  )), /* @__PURE__ */ React58.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React58.createElement(Text, null, /* @__PURE__ */ React58.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React58.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
+  )), /* @__PURE__ */ React64.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React64.createElement(Text, null, /* @__PURE__ */ React64.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React64.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 = useHMSActions22();
+  const [inProgress, setInProgress] = useState37(false);
+  const [error, setError] = useState37("");
   const { isHLSRunning } = useRecordingStreaming6();
-  useEffect23(() => {
+  useEffect26(() => {
     if (inProgress && !isHLSRunning) {
       setInProgress(false);
     }
   }, [inProgress, isHLSRunning]);
-  return /* @__PURE__ */ React58.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React58.createElement(ErrorText, { error }), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React64.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React64.createElement(ErrorText, { error }), /* @__PURE__ */ React64.createElement(
     Button,
     {
       "data-testid": "stop_hls",
@@ -5422,23 +6208,23 @@ var EndHLS = ({ setShowLinks }) => {
         }
       })
     },
-    /* @__PURE__ */ React58.createElement(EndStreamIcon2, null),
+    /* @__PURE__ */ React64.createElement(EndStreamIcon2, null),
     "End Stream"
-  ), /* @__PURE__ */ React58.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React58.createElement(PeopleIcon3, null), " Invite People"));
+  ), /* @__PURE__ */ React64.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React64.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 = useHMSStore38(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__ */ React59.createElement(Fragment10, null, /* @__PURE__ */ React59.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React65.createElement(Fragment12, null, /* @__PURE__ */ React65.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React65.createElement(
     Box,
     {
       css: {
@@ -5448,8 +6234,8 @@ var StreamingLanding = () => {
         r: "$round"
       }
     },
-    /* @__PURE__ */ React59.createElement(ColoredHandIcon, { width: 40, height: 40 })
-  ), /* @__PURE__ */ React59.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React59.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React59.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React59.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React59.createElement(CrossIcon8, null))), /* @__PURE__ */ React59.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React65.createElement(ColoredHandIcon, { width: 40, height: 40 })
+  ), /* @__PURE__ */ React65.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React65.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React65.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React65.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React65.createElement(CrossIcon11, null))), /* @__PURE__ */ React65.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React65.createElement(
     StreamCard,
     {
       testId: "hls_stream",
@@ -5459,7 +6245,7 @@ var StreamingLanding = () => {
       onClick: () => setShowHLS(true),
       Icon: GoLiveIcon3
     }
-  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React59.createElement(
+  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React65.createElement(
     StreamCard,
     {
       testId: "rtmp_stream",
@@ -5471,7 +6257,7 @@ var StreamingLanding = () => {
       },
       imgSrc: rtmp_default
     }
-  ), showHLS && /* @__PURE__ */ React59.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React59.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+  ), showHLS && /* @__PURE__ */ React65.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React65.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
@@ -5481,16 +6267,16 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a, _b;
-  const isMobile = useMedia16(config.media.md);
-  const sidepane = useHMSStore33(selectAppData3(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore33(selectAppData3(APP_DATA.activeScreensharePeerId));
-  const trackId = (_a = useHMSStore33(selectVideoTrackByPeerID(activeScreensharePeerId))) == null ? void 0 : _a.id;
+  const isMobile = useMedia20(config.media.md);
+  const sidepane = useHMSStore39(selectAppData3(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore39(selectAppData3(APP_DATA.activeScreensharePeerId));
+  const trackId = (_a = useHMSStore39(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__ */ React60.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
+    ViewComponent = /* @__PURE__ */ React66.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = /* @__PURE__ */ React60.createElement(StreamingLanding, null);
+    ViewComponent = /* @__PURE__ */ React66.createElement(StreamingLanding, null);
   }
   if (!ViewComponent && !trackId) {
     return null;
@@ -5503,7 +6289,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__ */ React60.createElement(
+  return /* @__PURE__ */ React66.createElement(
     Flex,
     {
       direction: "column",
@@ -5516,16 +6302,17 @@ var SidePane = ({
         "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
       }
     },
-    trackId && /* @__PURE__ */ React60.createElement(
+    trackId && /* @__PURE__ */ React66.createElement(
       VideoTile_default,
       __spreadValues({
         peerId: activeScreensharePeerId,
         trackId,
+        width: "100%",
         height: 225,
         rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
       }, tileLayout)
     ),
-    !!ViewComponent && /* @__PURE__ */ React60.createElement(
+    !!ViewComponent && /* @__PURE__ */ React66.createElement(
       Box,
       {
         css: {
@@ -5561,10 +6348,10 @@ var SidePane = ({
 var SidePane_default = SidePane;
 
 // src/Prebuilt/layouts/WaitingView.jsx
-import React61 from "react";
+import React67 from "react";
 import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React61.memo(() => {
-  return /* @__PURE__ */ React61.createElement(
+var WaitingView = React67.memo(() => {
+  return /* @__PURE__ */ React67.createElement(
     Box,
     {
       css: {
@@ -5578,7 +6365,7 @@ var WaitingView = React61.memo(() => {
       },
       "data-testid": "waiting_view"
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React67.createElement(
       Flex,
       {
         align: "center",
@@ -5592,8 +6379,8 @@ var WaitingView = React61.memo(() => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React61.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React61.createElement(
+      /* @__PURE__ */ React67.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React67.createElement(
         Flex,
         {
           direction: "column",
@@ -5603,28 +6390,28 @@ var WaitingView = React61.memo(() => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React61.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React61.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+        /* @__PURE__ */ React67.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React67.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 = React62.lazy(() => import("./HLSView-3S74KF3A.js"));
+var HLSView = React68.lazy(() => import("./HLSView-DDGPZHA2.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
   hideControls = false
 }) => {
   var _a, _b;
-  const localPeerRole = useHMSStore34(selectLocalPeerRoleName3);
-  const isConnected = useHMSStore34(selectIsConnectedToRoom6);
-  const hmsActions = useHMSActions21();
+  const localPeerRole = useHMSStore40(selectLocalPeerRoleName3);
+  const isConnected = useHMSStore40(selectIsConnectedToRoom7);
+  const hmsActions = useHMSActions23();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  useEffect24(() => {
+  useEffect27(() => {
     if (!isConnected) {
       return;
     }
@@ -5635,17 +6422,17 @@ var VideoStreamingSection = ({
   }
   let ViewComponent;
   if (screenType === "hls_live_streaming") {
-    ViewComponent = /* @__PURE__ */ React62.createElement(HLSView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(HLSView, null);
   } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = /* @__PURE__ */ React62.createElement(WaitingView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(WaitingView, null);
   } else if (pdfAnnotatorActive) {
-    ViewComponent = /* @__PURE__ */ React62.createElement(PDFView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(PDFView, null);
   } else if (urlToIframe) {
-    ViewComponent = /* @__PURE__ */ React62.createElement(EmbedView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(EmbedView, null);
   } else {
-    ViewComponent = /* @__PURE__ */ React62.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
+    ViewComponent = /* @__PURE__ */ React68.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
   }
-  return /* @__PURE__ */ React62.createElement(Suspense2, { fallback: /* @__PURE__ */ React62.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React68.createElement(Suspense2, { fallback: /* @__PURE__ */ React68.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React68.createElement(
     Flex,
     {
       css: {
@@ -5655,7 +6442,7 @@ var VideoStreamingSection = ({
       }
     },
     ViewComponent,
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React68.createElement(
       SidePane_default,
       {
         screenType,
@@ -5671,20 +6458,20 @@ var Conference = () => {
   var _a, _b, _c, _d, _e;
   const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const { userName, endpoints } = useHMSPrebuiltContext();
+  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore35(selectRoomState);
+  const roomState = useHMSStore41(selectRoomState);
   const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore35(selectIsConnectedToRoom7);
-  const hmsActions = useHMSActions22();
-  const [hideControls, setHideControls] = useState35(false);
-  const dropdownList = useHMSStore35(selectAppData4(APP_DATA.dropdownList));
+  const isConnectedToRoom = useHMSStore41(selectIsConnectedToRoom8);
+  const hmsActions = useHMSActions24();
+  const [hideControls, setHideControls] = useState39(false);
+  const dropdownList = useHMSStore41(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;
@@ -5692,8 +6479,8 @@ var Conference = () => {
       setHideControls((value) => !value);
     }
   };
-  const autoRoomJoined = useRef14(isPreviewScreenEnabled);
-  useEffect25(() => {
+  const autoRoomJoined = useRef16(isPreviewScreenEnabled);
+  useEffect28(() => {
     let timeout = null;
     dropdownListRef.current = dropdownList || [];
     if (dropdownListRef.current.length === 0) {
@@ -5708,7 +6495,7 @@ var Conference = () => {
       clearTimeout(timeout);
     };
   }, [dropdownList, hideControls, isMobileDevice]);
-  useEffect25(() => {
+  useEffect28(() => {
     if (!roomId) {
       navigate(`/`);
       return;
@@ -5723,7 +6510,7 @@ var Conference = () => {
         navigate(`/preview/${roomId || ""}`);
     }
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-  useEffect25(() => {
+  useEffect28(() => {
     if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting && !autoRoomJoined.current) {
       hmsActions.join({
         userName,
@@ -5738,15 +6525,16 @@ var Conference = () => {
       autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-  useEffect25(() => {
+  useEffect28(() => {
+    onJoinFunc == null ? void 0 : onJoinFunc();
     return () => {
       PictureInPicture.stop().catch((error) => console.error("stopping pip", error));
     };
   }, []);
-  if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React63.createElement(FullPageProgress_default, { text: "Joining..." });
+  if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
+    return /* @__PURE__ */ React69.createElement(FullPageProgress_default, { text: roomState === HMSRoomState.Connecting ? "Joining..." : "" });
   }
-  return /* @__PURE__ */ React63.createElement(React63.Fragment, null, isHLSStarted ? /* @__PURE__ */ React63.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React63.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React63.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, isHLSStarted ? /* @__PURE__ */ React69.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React69.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React69.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React69.createElement(
     Box,
     {
       ref: headerRef,
@@ -5760,8 +6548,8 @@ var Conference = () => {
       },
       "data-testid": "header"
     },
-    /* @__PURE__ */ React63.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React69.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React69.createElement(
     Box,
     {
       css: {
@@ -5779,7 +6567,7 @@ var Conference = () => {
       "data-testid": "conferencing",
       onClick: toggleControls
     },
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React69.createElement(
       VideoStreamingSection,
       {
         screenType: screenProps.screenType,
@@ -5787,7 +6575,7 @@ var Conference = () => {
         hideControls
       }
     )
-  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React63.createElement(
+  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React69.createElement(
     Box,
     {
       ref: footerRef,
@@ -5804,11 +6592,11 @@ var Conference = () => {
       },
       "data-testid": "footer"
     },
-    /* @__PURE__ */ React63.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React63.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React63.createElement(HLSFailureModal, null), /* @__PURE__ */ React63.createElement(ActivatedPIP, null)));
+    /* @__PURE__ */ React69.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React69.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React69.createElement(HLSFailureModal, null), /* @__PURE__ */ React69.createElement(ActivatedPIP, null)));
 };
 var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-JNABIZBG.js.map
+//# sourceMappingURL=conference-N7S47TDK.js.map