@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.2

package/dist/{conference-V2XZGTKU.js → conference-FJJQ4TXX.js}

@@ -1,6 +1,6 @@
 import {
   ActionTile
-} from "./chunk-E2M2ZSOL.js";
+} from "./chunk-ZKE2N5LH.js";
 import {
   APP_DATA,
   Accordion,
@@ -25,6 +25,7 @@ import {
   HorizontalDivider,
   Input,
   Label,
+  PictureInPicture,
   Popover,
   PreviewControls,
   PreviewTile,
@@ -51,6 +52,7 @@ import {
   VideoTileStats,
   VideoTile_default,
   getFormattedCount,
+  getMetadata,
   getVideoTileLabel,
   isAndroid,
   isChrome,
@@ -58,31 +60,31 @@ import {
   isIPadOS,
   isInternalRole,
   isMacOS,
-  isSafari,
   isScreenshareSupported,
   useAuthToken,
   useDropdownList,
   useDropdownSelection,
+  useFilteredRoles,
   useHMSPrebuiltContext,
-  useIsHeadless,
   useIsSidepaneTypeOpen,
   useMyMetadata,
   usePDFAnnotator,
+  useParticipants,
   usePinnedTrack,
-  useRoomLayout,
+  useRedirectToLeave,
   useRoomLayoutConferencingScreen,
-  useRoomLayoutLeaveScreen,
   useRoomLayoutPreviewScreen,
   useSetAppDataByKey,
   useSetSubscribedChatSelector,
   useSetUiSettings,
+  useSidepaneReset,
   useSidepaneToggle,
   useTheme,
   useUISettings,
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-RXTHJUMZ.js";
+} from "./chunk-WVGGQZK4.js";
 import {
   Box,
   Flex,
@@ -101,27 +103,28 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-GQD2AGWW.js";
+} from "./chunk-KBVIZGYW.js";
 
 // src/Prebuilt/components/conference.jsx
-import React61, { useEffect as useEffect24, useRef as useRef15, useState as useState35 } from "react";
-import { useNavigate as useNavigate2, useParams as useParams2 } from "react-router-dom";
+import React62, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
   HMSRoomState,
   selectAppData as selectAppData4,
-  selectIsConnectedToRoom as selectIsConnectedToRoom8,
+  selectIsConnectedToRoom as selectIsConnectedToRoom7,
   selectRoomState,
-  useHMSActions as useHMSActions21,
+  useHMSActions as useHMSActions22,
   useHMSStore as useHMSStore36
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Footer/Footer.tsx
-import React36 from "react";
+import React36, { Suspense, useEffect as useEffect6 } from "react";
 import { useMedia as useMedia5 } from "react-use";
+import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
 
 // src/Prebuilt/components/EmojiReaction.jsx
-import React2, { Fragment, useCallback, useState } from "react";
+import React2, { Fragment, useState } from "react";
 import { useMedia } from "react-use";
 import data from "@emoji-mart/data/sets/14/apple.json";
 import { init } from "emoji-mart";
@@ -165,20 +168,18 @@ var EmojiReaction = () => {
   const roles = useHMSStore(selectAvailableRoleNames);
   const localPeerId = useHMSStore(selectLocalPeerID);
   const isMobile = useMedia(config.media.md);
-  const onEmojiEvent = useCallback((data3) => {
-    window.showFlyingEmoji(data3 == null ? void 0 : data3.emojiId, data3 == null ? void 0 : data3.senderId);
-  }, []);
   const { sendEvent } = useCustomEvent({
-    type: EMOJI_REACTION_TYPE,
-    onEvent: onEmojiEvent
+    type: EMOJI_REACTION_TYPE
   });
   const sendReaction = (emojiId) => __async(void 0, null, function* () {
+    var _a;
     const data3 = {
       type: EMOJI_REACTION_TYPE,
       emojiId,
       senderId: localPeerId
     };
     sendEvent(data3, { roleNames: roles });
+    (_a = window.showFlyingEmoji) == null ? void 0 : _a.call(window, { emojiId, senderId: localPeerId });
   });
   if (!isConnected) {
     return null;
@@ -188,405 +189,16 @@ var EmojiReaction = () => {
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 import React8 from "react";
-import { useNavigate, useParams } from "react-router-dom";
 import { useMedia as useMedia2 } from "react-use";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom4, selectPermissions as selectPermissions3, useHMSActions, useHMSStore as useHMSStore4 } from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/PIP/PIPManager.js
-import * as workerTimers from "worker-timers";
-
-// src/Prebuilt/components/PIP/pipUtils.js
-var CANVAS_FILL_COLOR;
-var CANVAS_STROKE_COLOR;
-function setPIPCanvasColors() {
-  if (!CANVAS_FILL_COLOR) {
-    CANVAS_FILL_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-surface_bright");
-  }
-  if (!CANVAS_STROKE_COLOR) {
-    CANVAS_STROKE_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-border_bright");
-  }
-}
-function resetPIPCanvasColors() {
-  CANVAS_FILL_COLOR = "";
-  CANVAS_STROKE_COLOR = "";
-}
-function drawVideoElementsOnCanvas(videoElements, canvas) {
-  let videoTiles = videoElements.filter((videoElement) => videoElement.srcObject !== null);
-  const ctx = canvas.getContext("2d");
-  setPIPCanvasColors();
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  if (videoTiles.length === 0) {
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    return;
-  }
-  fillGridTiles(videoTiles.slice(0, 4), ctx, canvas);
-}
-function dummyChangeInCanvas(canvas) {
-  const ctx = canvas.getContext("2d");
-  setPIPCanvasColors();
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-}
-function fillGridTiles(videoElements, ctx, canvas) {
-  const offset = 8;
-  canvas.width = 480;
-  canvas.height = 320;
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  if (videoElements.length > 0) {
-    ctx.strokeStyle = CANVAS_STROKE_COLOR;
-    ctx.lineWidth = offset / 2;
-    ctx.strokeRect(0, 0, canvas.width, canvas.height);
-  }
-  if (videoElements.length === 1) {
-    const video = videoElements[0];
-    const { width, height } = getRenderDimensions(video, canvas.width - offset, canvas.height - offset);
-    const xOffset = (canvas.width - width) / 2;
-    const yOffset = (canvas.height - height) / 2;
-    ctx.drawImage(video, xOffset, yOffset, width, height);
-  }
-  if (videoElements.length === 2) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(
-        video,
-        canvas.width / 2 - offset,
-        // This will be the max available width for each tile
-        canvas.height - offset
-      );
-      const xOffset = (canvas.width / 2 - width) / 2 + canvas.width / 2 * index;
-      const yOffset = (canvas.height - height) / 2;
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height);
-    ctx.stroke(path);
-  }
-  if (videoElements.length === 3) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
-      const xOffset = index < 2 ? (canvas.width / 2 - width) / 2 + canvas.width / 2 * index : canvas.width / 2 - width / 2;
-      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height / 2);
-    ctx.stroke(path);
-    path.moveTo(0, canvas.height / 2);
-    path.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke(path);
-  }
-  if (videoElements.length === 4) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
-      const xOffset = (canvas.width / 2 - width) / 2 + canvas.width / 2 * (index % 2);
-      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height);
-    ctx.stroke(path);
-    path.moveTo(0, canvas.height / 2);
-    path.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke(path);
-  }
-}
-function getRenderDimensions(video, width, height) {
-  let finalWidth = video.videoWidth / video.videoHeight * height;
-  let finalHeight = height;
-  if (finalWidth > width) {
-    finalWidth = width;
-    finalHeight = video.videoHeight / video.videoWidth * width;
-  }
-  return { width: finalWidth, height: finalHeight };
-}
-
-// src/Prebuilt/components/PIP/PIPManager.js
-var MAX_NUMBER_OF_TILES_IN_PIP = 4;
-var DEFAULT_FPS = 30;
-var DEFAULT_CANVAS_WIDTH = 480;
-var DEFAULT_CANVAS_HEIGHT = 320;
-var LEAVE_EVENT_NAME = "leavepictureinpicture";
-var PIPStates = {
-  starting: "starting",
-  started: "started",
-  stopping: "stopping",
-  stopped: "stopped"
-};
-var PipManager = class {
-  constructor() {
-    __publicField(this, "listeners", /* @__PURE__ */ new Set());
-    __publicField(this, "stop", () => __async(this, null, function* () {
-      var _a;
-      if (this.state === PIPStates.stopped) {
-        return;
-      }
-      this.state = PIPStates.stopping;
-      (_a = this.pipVideo) == null ? void 0 : _a.removeEventListener(LEAVE_EVENT_NAME, this.stop);
-      if (this.timeoutRef) {
-        workerTimers.clearTimeout(this.timeoutRef);
-        this.timeoutRef = null;
-      }
-      if (this.isOn()) {
-        this.exitPIP();
-      }
-      yield this.detachOldAttachNewTracks(this.tracksToShow, []);
-      this.onStateChange(false);
-      this.callListeners(false);
-      this.reset();
-      this.state = PIPStates.stopped;
-    }));
-    // ------- Private function --------------
-    /**
-     * @private {boolean} on - whether pip is on/off
-     */
-    __publicField(this, "callListeners", (on) => {
-      this.listeners.forEach((listener) => listener == null ? void 0 : listener(on));
-    });
-    this.reset();
-  }
-  listenToStateChange(cb) {
-    this.listeners.add(cb);
-  }
-  /**
-   * @private
-   */
-  reset() {
-    console.debug("resetting PIP state");
-    resetPIPCanvasColors();
-    this.canvas = null;
-    this.pipVideo = null;
-    this.timeoutRef = null;
-    this.hmsActions = null;
-    this.videoElements = [];
-    this.tracksToShow = [];
-    this.onStateChange = () => {
-    };
-    this.state = PIPStates.stopped;
-  }
-  /**
-   * check if PIP is supported in this browser env
-   */
-  isSupported() {
-    return !!document.pictureInPictureEnabled && !isIOS && !(isMacOS && isSafari);
-  }
-  /**
-   * check if pip is currently turned on
-   */
-  isOn() {
-    return !!document.pictureInPictureElement;
-  }
-  /**
-   * request browser to start pip and start the render loop updating the pip
-   * video element with peer tracks.
-   * @param hmsActions
-   * @param onStateChangeFn {function(bool):void} callback called to notify change in pip state
-   */
-  start(hmsActions, onStateChangeFn) {
-    return __async(this, null, function* () {
-      if (!this.isSupported()) {
-        throw new Error("pip is not supported on this browser");
-      }
-      console.debug("starting PIP, current state", this.state);
-      if (this.state === PIPStates.started) {
-        yield this.stop();
-      } else if (this.state === PIPStates.starting) {
-        return;
-      }
-      this.state = PIPStates.starting;
-      try {
-        yield this.init(hmsActions, onStateChangeFn);
-        this.pipVideo.addEventListener(LEAVE_EVENT_NAME, this.stop);
-        this.renderLoop();
-        if (!this.isOn()) {
-          yield this.requestPIP();
-        }
-        console.debug("pip started");
-        this.state = PIPStates.started;
-        this.onStateChange(true);
-        this.callListeners(true);
-      } catch (err) {
-        console.error("error in request pip", err);
-        this.state = PIPStates.stopped;
-      }
-    });
-  }
-  /**
-   * @param peers {Array} All Remote Peers present in call.
-   * @param tracksMap {Object} map of track id to track
-   * */
-  updatePeersAndTracks(peers, tracksMap) {
-    return __async(this, null, function* () {
-      if (!this.canvas) {
-        return;
-      }
-      const newTracksToShowUnordered = this.pickTracksToShow(peers, tracksMap);
-      const currentTracksShowing = this.tracksToShow;
-      this.tracksToShow = this.orderNewTracksToShow(newTracksToShowUnordered, currentTracksShowing);
-      try {
-        yield this.detachOldAttachNewTracks(currentTracksShowing, this.tracksToShow, tracksMap);
-      } catch (error) {
-        console.error("error in detaching/attaching tracks", error);
-      }
-    });
-  }
-  /**
-   * @private
-   */
-  init(hmsActions, onStateChangeFn) {
-    return __async(this, null, function* () {
-      yield this.initMediaElements();
-      this.hmsActions = hmsActions;
-      this.onStateChange = onStateChangeFn;
-    });
-  }
-  initMediaElements() {
-    return __async(this, null, function* () {
-      if (!this.canvas) {
-        const { canvas, pipVideo } = this.initializeCanvasAndVideoElement();
-        this.canvas = canvas;
-        this.pipVideo = pipVideo;
-        this.videoElements = this.initializeVideoElements();
-        const videoPlayPromise = this.pipVideo.play();
-        dummyChangeInCanvas(this.canvas);
-        yield videoPlayPromise;
-      }
-    });
-  }
-  initializeCanvasAndVideoElement() {
-    const canvas = document.createElement("canvas");
-    canvas.width = DEFAULT_CANVAS_WIDTH;
-    canvas.height = DEFAULT_CANVAS_HEIGHT;
-    const pipVideo = document.createElement("video");
-    pipVideo.width = DEFAULT_CANVAS_WIDTH;
-    pipVideo.height = DEFAULT_CANVAS_HEIGHT;
-    pipVideo.muted = true;
-    pipVideo.srcObject = canvas.captureStream();
-    return { canvas, pipVideo };
-  }
-  initializeVideoElements() {
-    let videoElements = [];
-    for (let i = 0; i < MAX_NUMBER_OF_TILES_IN_PIP; i++) {
-      const videoElement = document.createElement("video");
-      videoElement.autoplay = true;
-      videoElement.playsinline = true;
-      videoElements.push(videoElement);
-    }
-    return videoElements;
-  }
-  /**
-   * render loop is responsible for rendering the video elements on canvas/pip.
-   * in each loop current video elements are stitched and painted on canvas
-   */
-  renderLoop() {
-    const delay = 1e3 / DEFAULT_FPS;
-    this.timeoutRef = workerTimers.setTimeout(() => {
-      if (this.state === PIPStates.stopping || this.state === PIPStates.stopped) {
-        return;
-      }
-      if (this.state === PIPStates.started) {
-        drawVideoElementsOnCanvas(this.videoElements, this.canvas);
-      }
-      this.renderLoop();
-    }, delay);
-  }
-  requestPIP() {
-    return __async(this, null, function* () {
-      try {
-        if (this.isOn()) {
-          this.exitPIP();
-        }
-        yield this.pipVideo.requestPictureInPicture();
-      } catch (error) {
-        console.error("error in requestpip", error, "state", this.state);
-        throw error;
-      }
-    });
-  }
-  exitPIP() {
-    document.exitPictureInPicture();
-  }
-  /**
-   * Logic - pick only enabled video tracks
-   * @param peers {Array<any>}
-   * @param tracksMap {Record<string, any>}
-   */
-  pickTracksToShow(peers, tracksMap) {
-    var _a;
-    const tracksToShow = [];
-    for (const peer of peers) {
-      if (tracksToShow.length === MAX_NUMBER_OF_TILES_IN_PIP) {
-        break;
-      } else if (peer.videoTrack && ((_a = tracksMap[peer.videoTrack]) == null ? void 0 : _a.enabled)) {
-        tracksToShow.push(peer.videoTrack);
-      }
-    }
-    return tracksToShow;
-  }
-  /**
-   * there has to be a smart reordering of new tracks based on currently showing
-   * ones to reduce unnecessary displacement. If someone was showing up both
-   * earlier and now, it's a better UX to keep their position same instead
-   * of letting it change.
-   * The returned array is a shuffled version of newTracks with position of
-   * tracks present in the old tracks intact.
-   * eg. old = [1,5,9,3], new = [3,8,2,9], result = [8,2,9,3]
-   * @param oldTracks {Array}
-   * @param newTracks {Array}
-   * @return {Array}
-   */
-  orderNewTracksToShow(newTracks, oldTracks) {
-    const betterNewTracks = [];
-    const leftOvers = [];
-    newTracks.forEach((track) => {
-      const oldPosition = oldTracks.indexOf(track);
-      if (oldPosition !== -1 && oldPosition < newTracks.length) {
-        betterNewTracks[oldPosition] = track;
-      } else {
-        leftOvers.push(track);
-      }
-    });
-    for (let i = 0; i < newTracks.length; i++) {
-      if (!betterNewTracks[i]) {
-        betterNewTracks[i] = leftOvers.shift();
-      }
-    }
-    return betterNewTracks;
-  }
-  /**
-   * call detach for tracks which no longer need to be shown and attach for
-   * new ones which are to be shown now.
-   * Note: oldTracks and newTracks are not necessarily of same length
-   * @param oldTracks {Array<String>}
-   * @param newTracks {Array<String>}
-   * @param tracksMap {Record<String, any>}
-   */
-  // eslint-disable-next-line complexity
-  detachOldAttachNewTracks(oldTracks, newTracks, tracksMap = null) {
-    return __async(this, null, function* () {
-      const numTracks = Math.max(oldTracks.length, newTracks.length);
-      for (let i = 0; i < numTracks; i++) {
-        if (oldTracks[i] === newTracks[i]) {
-          continue;
-        } else if (oldTracks[i]) {
-          if (!tracksMap || tracksMap[oldTracks[i]]) {
-            yield this.hmsActions.detachVideo(oldTracks[i], this.videoElements[i]);
-          }
-          if (this.videoElements[i]) {
-            this.videoElements[i].srcObject = null;
-          }
-        }
-        if (newTracks[i]) {
-          yield this.hmsActions.attachVideo(newTracks[i], this.videoElements[i]);
-        }
-      }
-    });
-  }
-};
-var PictureInPicture = new PipManager();
+import {
+  selectHLSState,
+  selectIsConnectedToRoom as selectIsConnectedToRoom4,
+  selectPeersByCondition,
+  selectPermissions as selectPermissions3,
+  selectRolesMap,
+  useHMSActions,
+  useHMSStore as useHMSStore4
+} from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 import React6, { Fragment as Fragment2, useState as useState2 } from "react";
@@ -598,7 +210,6 @@ import React3 from "react";
 import { AlertTriangleIcon, CrossIcon } from "@100mslive/react-icons";
 var EndSessionContent = ({
   setShowEndStreamAlert,
-  stopStream,
   leaveRoom,
   isModal = false,
   isStreamingOn = false
@@ -630,8 +241,7 @@ var EndSessionContent = ({
       variant: "danger",
       css: { w: "100%" },
       onClick: () => __async(void 0, null, function* () {
-        yield stopStream();
-        leaveRoom();
+        yield leaveRoom({ endstream: true });
         setShowEndStreamAlert(false);
       }),
       id: "stopStream",
@@ -675,10 +285,9 @@ var LeaveCard = ({
   onClick,
   bg,
   titleColor,
-  subtitleColor,
   css = {}
 }) => {
-  return /* @__PURE__ */ React4.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css), onClick }, /* @__PURE__ */ React4.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ React4.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ React4.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { color: subtitleColor } }, subtitle)));
+  return /* @__PURE__ */ React4.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css), onClick }, /* @__PURE__ */ React4.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ React4.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ React4.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
 };
 
 // src/Prebuilt/components/Leave/LeaveSessionContent.tsx
@@ -710,13 +319,22 @@ var LeaveSessionContent = ({
       onClick: () => setShowLeaveRoomAlert(false)
     },
     "Cancel"
-  ), /* @__PURE__ */ React5.createElement(Button, { variant: "danger", css: { w: "100%" }, onClick: leaveRoom, id: "leaveRoom", "data-testid": "leave_room" }, "Leave Session")));
+  ), /* @__PURE__ */ React5.createElement(
+    Button,
+    {
+      variant: "danger",
+      css: { w: "100%" },
+      onClick: () => leaveRoom({ endstream: false }),
+      id: "leaveRoom",
+      "data-testid": "leave_room"
+    },
+    "Leave Session"
+  )));
 };
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 var DesktopLeaveRoom = ({
   leaveRoom,
-  stopStream,
   screenType
 }) => {
   const [open, setOpen] = useState2(false);
@@ -743,7 +361,7 @@ var DesktopLeaveRoom = ({
         if (screenType === "hls_live_streaming") {
           setShowLeaveRoomAlert(true);
         } else {
-          leaveRoom();
+          leaveRoom({ endstream: false });
         }
       }
     },
@@ -759,41 +377,62 @@ var DesktopLeaveRoom = ({
       }
     },
     /* @__PURE__ */ React6.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React6.createElement(VerticalMenuIcon, null))
-  ), /* @__PURE__ */ React6.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React6.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: leaveRoom, "data-testid": "just_leave_btn" }, /* @__PURE__ */ React6.createElement(
-    LeaveCard,
+  ), /* @__PURE__ */ React6.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React6.createElement(
+    Dropdown.Item,
     {
-      title: showStream ? "Leave Stream" : "Leave Session",
-      subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
-      bg: "",
-      titleColor: "$on_surface_high",
-      subtitleColor: "$on_surface_low",
-      icon: /* @__PURE__ */ React6.createElement(ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
-      onClick: leaveRoom,
-      css: { p: 0 }
-    }
-  )), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(Dropdown.Item, { css: { bg: "$alert_error_dim" }, "data-testid": "end_room_btn" }, /* @__PURE__ */ React6.createElement(
-    LeaveCard,
+      css: {
+        bg: "$surface_dim",
+        color: "$on_surface_low",
+        "&:hover": { bg: "$surface_default", color: "$on_surface_high" }
+      },
+      onClick: () => leaveRoom({ endstream: false }),
+      "data-testid": "just_leave_btn"
+    },
+    /* @__PURE__ */ React6.createElement(
+      LeaveCard,
+      {
+        title: showStream ? "Leave Stream" : "Leave Session",
+        subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
+        bg: "",
+        titleColor: "$on_surface_high",
+        icon: /* @__PURE__ */ React6.createElement(ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+        onClick: () => leaveRoom({ endstream: false }),
+        css: { p: 0 }
+      }
+    )
+  ), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React6.createElement(
+    Dropdown.Item,
     {
-      title: showStream ? "End Stream" : "End Session",
-      subtitle: `The ${showStream ? "stream" : "session"} will end for everyone. You can't undo this action.`,
-      bg: "",
-      titleColor: "$alert_error_brighter",
-      subtitleColor: "$alert_error_bright",
-      icon: /* @__PURE__ */ React6.createElement(StopIcon, { height: 24, width: 24 }),
-      onClick: () => {
-        setOpen(false);
-        setShowEndStreamAlert(true);
+      css: {
+        bg: "$alert_error_dim",
+        color: "$alert_error_bright",
+        "&:hover": { bg: "$alert_error_dim", color: "$alert_error_brighter" }
       },
-      css: { p: 0 }
-    }
-  )) : null))) : /* @__PURE__ */ React6.createElement(
+      "data-testid": "end_room_btn"
+    },
+    /* @__PURE__ */ React6.createElement(
+      LeaveCard,
+      {
+        title: showStream ? "End Stream" : "End Session",
+        subtitle: `The ${showStream ? "stream" : "session"} will end for everyone. You can't undo this action.`,
+        bg: "",
+        titleColor: "$alert_error_brighter",
+        icon: /* @__PURE__ */ React6.createElement(StopIcon, { height: 24, width: 24 }),
+        onClick: () => {
+          setOpen(false);
+          setShowEndStreamAlert(true);
+        },
+        css: { p: 0 }
+      }
+    )
+  ) : null))) : /* @__PURE__ */ React6.createElement(
     LeaveIconButton,
     {
       onClick: () => {
         if (screenType === "hls_live_streaming") {
           setShowLeaveRoomAlert(true);
         } else {
-          leaveRoom();
+          leaveRoom({ endstream: false });
         }
       },
       key: "LeaveRoom",
@@ -804,7 +443,6 @@ var DesktopLeaveRoom = ({
     EndSessionContent,
     {
       setShowEndStreamAlert,
-      stopStream,
       leaveRoom,
       isStreamingOn,
       isModal: true
@@ -818,7 +456,6 @@ import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions
 import { ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
 var MwebLeaveRoom = ({
   leaveRoom,
-  stopStream,
   screenType
 }) => {
   const [open, setOpen] = useState3(false);
@@ -850,10 +487,9 @@ var MwebLeaveRoom = ({
       subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
       bg: "$surface_default",
       titleColor: "$on_surface_high",
-      subtitleColor: "$on_surface_low",
       icon: /* @__PURE__ */ React7.createElement(ExitIcon2, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
-      onClick: leaveRoom,
-      css: { pt: 0, mt: "$10" }
+      onClick: () => leaveRoom({ endstream: false }),
+      css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
     }
   ), isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ React7.createElement(
     LeaveCard,
@@ -862,7 +498,7 @@ var MwebLeaveRoom = ({
       subtitle: `The will end the ${showStream ? "stream" : "session"} for everyone. You can't undo this action.`,
       bg: "$alert_error_dim",
       titleColor: "$alert_error_brighter",
-      subtitleColor: "$alert_error_bright",
+      css: { color: "$alert_error_bright", "&:hover": { color: "$alert_error_brighter" } },
       icon: /* @__PURE__ */ React7.createElement(StopIcon2, { height: 24, width: 24 }),
       onClick: () => {
         setOpen(false);
@@ -877,6 +513,8 @@ var MwebLeaveRoom = ({
       onClick: () => {
         if (screenType === "hls_live_streaming") {
           setShowLeaveRoomAlert(true);
+        } else {
+          leaveRoom({ endstream: false });
         }
       }
     },
@@ -885,7 +523,6 @@ var MwebLeaveRoom = ({
     EndSessionContent,
     {
       setShowEndStreamAlert,
-      stopStream,
       leaveRoom,
       isStreamingOn
     }
@@ -894,14 +531,20 @@ var MwebLeaveRoom = ({
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 var LeaveRoom = ({ screenType }) => {
-  const navigate = useNavigate();
-  const params = useParams();
   const isConnected = useHMSStore4(selectIsConnectedToRoom4);
   const permissions = useHMSStore4(selectPermissions3);
   const isMobile = useMedia2(config.media.md);
+  const rolesMap = useHMSStore4(selectRolesMap);
+  const streamingPermissionRoles = Object.keys(rolesMap).filter((roleName) => {
+    const roleObj = rolesMap[roleName];
+    return roleObj.permissions.hlsStreaming;
+  });
+  const peersWithStreamingRights = useHMSStore4(
+    selectPeersByCondition((peer) => streamingPermissionRoles.includes(peer.roleName || ""))
+  );
+  const hlsState = useHMSStore4(selectHLSState);
   const hmsActions = useHMSActions();
-  const { onLeave } = useHMSPrebuiltContext();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { redirectToLeave } = useRedirectToLeave();
   const stopStream = () => __async(void 0, null, function* () {
     try {
       console.log("Stopping HLS stream");
@@ -912,25 +555,17 @@ var LeaveRoom = ({ screenType }) => {
       ToastManager.addToast({ title: "Error in stopping the stream", type: "error" });
     }
   });
-  const redirectToLeavePage = () => {
-    const prefix = isLeaveScreenEnabled ? "/leave/" : "/";
-    if (params.role) {
-      navigate(prefix + params.roomId + "/" + params.role);
-    } else {
-      navigate(prefix + params.roomId);
+  const leaveRoom = (_0) => __async(void 0, [_0], function* ({ endstream = false }) {
+    if (endstream || hlsState.running && peersWithStreamingRights.length === 1) {
+      yield stopStream();
     }
-    PictureInPicture.stop().catch(() => console.error("stopping pip"));
-    ToastManager.clearAllToast();
-    onLeave == null ? void 0 : onLeave();
-  };
-  const leaveRoom = () => {
     hmsActions.leave();
-    redirectToLeavePage();
-  };
+    redirectToLeave();
+  });
   if (!permissions || !isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React8.createElement(MwebLeaveRoom, { leaveRoom, stopStream, screenType }) : /* @__PURE__ */ React8.createElement(DesktopLeaveRoom, { leaveRoom, stopStream, screenType });
+  return isMobile ? /* @__PURE__ */ React8.createElement(MwebLeaveRoom, { leaveRoom, screenType }) : /* @__PURE__ */ React8.createElement(DesktopLeaveRoom, { leaveRoom, screenType });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
@@ -938,16 +573,16 @@ import React23 from "react";
 import { useMedia as useMedia3 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
-import React21, { Fragment as Fragment4, useState as useState14 } from "react";
+import React21, { Fragment as Fragment4, useState as useState13 } from "react";
 import { HMSHLSPlayer } from "@100mslive/hls-player";
-import { selectAppData, selectLocalPeerID as selectLocalPeerID3, useHMSActions as useHMSActions8, useHMSStore as useHMSStore11 } from "@100mslive/react-sdk";
-import { BrbIcon, CheckIcon as CheckIcon3, DragHandleIcon, HandIcon, InfoIcon as InfoIcon2, PipIcon as PipIcon2, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
+import { selectAppData, selectLocalPeerID as selectLocalPeerID3, useHMSActions as useHMSActions8, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
+import { BrbIcon, CheckIcon as CheckIcon3, DragHandleIcon, InfoIcon as InfoIcon2, PipIcon as PipIcon2, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/PIP/index.jsx
 import React10 from "react";
 
 // src/Prebuilt/components/PIP/PIPComponent.jsx
-import React9, { useCallback as useCallback2, useEffect, useState as useState4 } from "react";
+import React9, { useCallback, useEffect, 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";
 
@@ -1010,7 +645,7 @@ var PIPComponent = ({ content = null }) => {
   const [isPipOn, setIsPipOn] = useState4(PictureInPicture.isOn());
   const hmsActions = useHMSActions2();
   const store = useHMSVanillaStore();
-  const onPipToggle = useCallback2(() => {
+  const onPipToggle = useCallback(() => {
     if (!isPipOn) {
       PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
       MediaSession.setup(hmsActions, store);
@@ -1053,57 +688,9 @@ var PIP = ({ content = null }) => {
 };
 
 // src/Prebuilt/components/RoleChangeModal.jsx
-import React11, { forwardRef, useRef as useRef2, useState as useState6 } from "react";
-import { selectPeerByID, useHMSActions as useHMSActions3, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
+import React11, { forwardRef, useRef, useState as useState5 } from "react";
+import { selectPeerByID, useHMSActions as useHMSActions3, useHMSStore as useHMSStore6 } from "@100mslive/react-sdk";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/common/hooks.js
-import { useEffect as useEffect2, useRef, useState as useState5 } from "react";
-import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
-import {
-  selectAvailableRoleNames as selectAvailableRoleNames2,
-  selectIsConnectedToRoom as selectIsConnectedToRoom5,
-  selectPeerCount,
-  selectPeerMetadata,
-  selectPeers as selectPeers2,
-  selectRemotePeers,
-  useHMSStore as useHMSStore6,
-  useHMSVanillaStore as useHMSVanillaStore2
-} from "@100mslive/react-sdk";
-var useFilteredRoles = () => {
-  const roles = useHMSStore6(selectAvailableRoleNames2).filter((role) => !isInternalRole(role));
-  return roles;
-};
-var useShowStreamingUI = () => {
-  var _a, _b, _c;
-  const layout = useRoomLayout();
-  const { join_form } = ((_c = (_b = (_a = layout == null ? void 0 : layout.screens) == null ? void 0 : _a.preview) == null ? void 0 : _b.default) == null ? void 0 : _c.elements) || {};
-  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
-};
-var useParticipants = (params) => {
-  var _a;
-  const isConnected = useHMSStore6(selectIsConnectedToRoom5);
-  const peerCount = useHMSStore6(selectPeerCount);
-  const availableRoles = useHMSStore6(selectAvailableRoleNames2);
-  let participantList = useHMSStore6(isConnected ? selectPeers2 : selectRemotePeers);
-  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore2();
-  if ((_a = params == null ? void 0 : params.metadata) == null ? void 0 : _a.isHandRaised) {
-    participantList = participantList.filter((peer) => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
-    participantList = participantList.filter((peer) => peer.roleName === params.role);
-  }
-  if (params == null ? void 0 : params.search) {
-    const search = params.search;
-    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};
-
-// src/Prebuilt/components/RoleChangeModal.jsx
 var PeerName = forwardRef((_a, ref) => {
   var _b = _a, { children, maxWidth } = _b, rest = __objRest(_b, ["children", "maxWidth"]);
   return /* @__PURE__ */ React11.createElement(
@@ -1123,15 +710,15 @@ var PeerName = forwardRef((_a, ref) => {
 });
 var RoleChangeModal = ({ peerId, onOpenChange }) => {
   var _a;
-  const peer = useHMSStore7(selectPeerByID(peerId));
+  const peer = useHMSStore6(selectPeerByID(peerId));
   const roles = useFilteredRoles();
-  const [selectedRole, setRole] = useState6(peer == null ? void 0 : peer.roleName);
-  const [requestPermission, setRequestPermission] = useState6(true);
+  const [selectedRole, setRole] = useState5(peer == null ? void 0 : peer.roleName);
+  const [requestPermission, setRequestPermission] = useState5(true);
   const hmsActions = useHMSActions3();
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState5(false);
   const selectionBg = useDropdownSelection();
-  const [peerNameRef, setPeerNameRef] = useState6();
-  const ref = useRef2();
+  const [peerNameRef, setPeerNameRef] = useState5();
+  const ref = useRef();
   if (!peer) {
     return null;
   }
@@ -1233,16 +820,16 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
 };
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
-import React15, { useState as useState9 } from "react";
-import { selectPermissions as selectPermissions5, useHMSActions as useHMSActions5, useHMSStore as useHMSStore9, useRecordingStreaming as useRecordingStreaming4 } from "@100mslive/react-sdk";
+import React15, { useState as useState8 } from "react";
+import { selectPermissions as selectPermissions5, useHMSActions as useHMSActions5, useHMSStore as useHMSStore8, useRecordingStreaming as useRecordingStreaming4 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Streaming/ResolutionInput.jsx
-import React12, { useCallback as useCallback3, useState as useState7 } from "react";
+import React12, { useCallback as useCallback2, useState as useState6 } from "react";
 import { InfoIcon } from "@100mslive/react-icons";
 var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {
-  const [resolution, setResolution] = useState7(RTMP_RECORD_DEFAULT_RESOLUTION);
-  const resolutionChangeHandler = useCallback3(
+  const [resolution, setResolution] = useState6(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const resolutionChangeHandler = useCallback2(
     (event) => {
       const { name, value } = event.target;
       let width = name === "resWidth" ? Number(value) : resolution.width;
@@ -1302,13 +889,13 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId
 };
 
 // src/Prebuilt/components/Streaming/RTMPStreaming.jsx
-import React14, { useEffect as useEffect3, useRef as useRef3, useState as useState8 } from "react";
+import React14, { useEffect as useEffect2, 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";
 
 // src/Prebuilt/components/Streaming/Common.jsx
 import React13 from "react";
-import { selectPermissions as selectPermissions4, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
+import { selectPermissions as selectPermissions4, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
 import { ChevronLeftIcon, ChevronRightIcon, CrossIcon as CrossIcon3, RecordIcon } from "@100mslive/react-icons";
 var StreamCard = ({ title, subtitle, Icon, imgSrc = "", css = {}, onClick, testId }) => {
   return /* @__PURE__ */ React13.createElement(
@@ -1378,7 +965,7 @@ var ContentBody = ({ Icon, title, removeVerticalPadding = false, children }) =>
   return /* @__PURE__ */ React13.createElement(Box, { css: { p: removeVerticalPadding ? "$0 $10" : "$10" } }, /* @__PURE__ */ React13.createElement(Text, { css: { display: "flex", alignItems: "center", mb: "$4" } }, /* @__PURE__ */ React13.createElement(Icon, null), /* @__PURE__ */ React13.createElement(Text, { as: "span", css: { fontWeight: "$semiBold", ml: "$4" } }, title)), /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, children));
 };
 var RecordStream = ({ record, setRecord, testId }) => {
-  const permissions = useHMSStore8(selectPermissions4);
+  const permissions = useHMSStore7(selectPermissions4);
   return (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React13.createElement(Flex, { align: "center", css: { bg: "$surface_bright", m: "$8 $10", p: "$8", r: "$0" } }, /* @__PURE__ */ React13.createElement(Text, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ React13.createElement(RecordIcon, null)), /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$8" } }, "Record the stream"), /* @__PURE__ */ React13.createElement(Switch, { checked: record, onCheckedChange: setRecord, "data-testid": testId })) : null;
 };
 var ErrorText = ({ error }) => {
@@ -1395,7 +982,7 @@ var RTMPStreaming = ({ onBack }) => {
 };
 var StartRTMP = () => {
   const [rtmpPreference = [], setRTMPPreference] = useUserPreferences(UserPreferencesKeys.RTMP_URLS);
-  const [rtmpStreams, setRTMPStreams] = useState8(
+  const [rtmpStreams, setRTMPStreams] = useState7(
     rtmpPreference.length > 0 ? rtmpPreference : [
       {
         name: "Stream",
@@ -1406,9 +993,9 @@ var StartRTMP = () => {
     ]
   );
   const hmsActions = useHMSActions4();
-  const [error, setError] = useState8(false);
-  const [record, setRecord] = useState8(false);
-  const [resolution, setResolution] = useState8(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const [error, setError] = useState7(false);
+  const [record, setRecord] = useState7(false);
+  const [resolution, setResolution] = useState7(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [isRTMPStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);
   const hasRTMPURL = rtmpStreams.some((value) => value.rtmpURL && value.streamKey);
   return /* @__PURE__ */ React14.createElement(
@@ -1512,10 +1099,10 @@ var StartRTMP = () => {
 };
 var EndRTMP = () => {
   const hmsActions = useHMSActions4();
-  const [inProgress, setInProgress] = useState8(false);
-  const [error, setError] = useState8("");
+  const [inProgress, setInProgress] = useState7(false);
+  const [error, setError] = useState7("");
   const { isRTMPRunning } = useRecordingStreaming3();
-  useEffect3(() => {
+  useEffect2(() => {
     if (inProgress && !isRTMPRunning) {
       setInProgress(false);
     }
@@ -1550,7 +1137,7 @@ var FormLabel = ({ id, children }) => {
   return /* @__PURE__ */ React14.createElement(Label, { htmlFor: id, css: { color: "$on_surface_high", my: "$4", fontSize: "$sm" } }, children);
 };
 var RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {
-  const formRef = useRef3(null);
+  const formRef = useRef2(null);
   return /* @__PURE__ */ React14.createElement(Flex, { id, direction: "column", css: { mb: "$8", px: "$8" }, ref: formRef }, /* @__PURE__ */ React14.createElement(FormLabel, { id: "rtmpURL" }, "RTMP URL", /* @__PURE__ */ React14.createElement(Asterik, null)), /* @__PURE__ */ React14.createElement(
     Input,
     {
@@ -1597,7 +1184,7 @@ var Asterik = () => {
   return /* @__PURE__ */ React14.createElement(Text, { variant: "sm", as: "span", css: { color: "$alert_error_default", mx: "$2" } }, "*");
 };
 var AccordionHeader = ({ rtmp, setRTMPStreams }) => {
-  const [edit, setEdit] = useState8(false);
+  const [edit, setEdit] = useState7(false);
   return /* @__PURE__ */ React14.createElement(Accordion.Header, { css: { px: "$8" } }, edit ? /* @__PURE__ */ React14.createElement(
     Input,
     {
@@ -1660,8 +1247,8 @@ function getResolution(recordingResolution) {
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
 var StartRecording = ({ open, onOpenChange }) => {
-  const permissions = useHMSStore9(selectPermissions5);
-  const [resolution, setResolution] = useState9(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const permissions = useHMSStore8(selectPermissions5);
+  const [resolution, setResolution] = useState8(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming4();
   const hmsActions = useHMSActions5();
@@ -1748,14 +1335,14 @@ var StartRecording = ({ open, onOpenChange }) => {
 var StartRecording_default = StartRecording;
 
 // src/Prebuilt/components/StatsForNerds.jsx
-import React16, { useEffect as useEffect4, useMemo, useRef as useRef4, useState as useState10 } from "react";
+import React16, { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState9 } from "react";
 import {
   selectHMSStats,
   selectLocalPeerID as selectLocalPeerID2,
   selectPeersMap,
   selectTracksMap as selectTracksMap2,
   useHMSStatsStore,
-  useHMSStore as useHMSStore10
+  useHMSStore as useHMSStore9
 } from "@100mslive/react-sdk";
 var StatsForNerds = ({ onOpenChange }) => {
   var _a;
@@ -1764,12 +1351,12 @@ var StatsForNerds = ({ onOpenChange }) => {
     () => [{ id: "local-peer", label: "Local Peer Stats" }, ...tracksWithLabels],
     [tracksWithLabels]
   );
-  const [selectedStat, setSelectedStat] = useState10(statsOptions[0]);
+  const [selectedStat, setSelectedStat] = useState9(statsOptions[0]);
   const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
-  const [open, setOpen] = useState10(false);
-  const ref = useRef4();
+  const [open, setOpen] = useState9(false);
+  const ref = useRef3();
   const selectionBg = useDropdownSelection();
-  useEffect4(() => {
+  useEffect3(() => {
     if (selectedStat.id !== "local-peer" && !tracksWithLabels.find((track) => track.id === selectedStat.id)) {
       setSelectedStat("local-peer");
     }
@@ -1829,9 +1416,9 @@ var StatsForNerds = ({ onOpenChange }) => {
   )));
 };
 var useTracksWithLabel = () => {
-  const tracksMap = useHMSStore10(selectTracksMap2);
-  const peersMap = useHMSStore10(selectPeersMap);
-  const localPeerID = useHMSStore10(selectLocalPeerID2);
+  const tracksMap = useHMSStore9(selectTracksMap2);
+  const peersMap = useHMSStore9(selectPeersMap);
+  const localPeerID = useHMSStore9(selectLocalPeerID2);
   const tracksWithLabels = useMemo(
     () => Object.values(tracksMap).reduce((res, track) => {
       var _a, _b;
@@ -1922,22 +1509,22 @@ var formatBytes = (bytes, unit = "B", decimals = 2) => {
 };
 
 // src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
-import React17, { useCallback as useCallback4, useRef as useRef5, useState as useState11 } from "react";
+import React17, { useCallback as useCallback3, useRef as useRef4, useState as useState10 } from "react";
 import { useHMSActions as useHMSActions6 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon4, ChangeRoleIcon, CheckIcon as CheckIcon2 } from "@100mslive/react-icons";
 var BulkRoleChangeModal = ({ onOpenChange }) => {
   var _a, _b;
   const roles = useFilteredRoles();
   const hmsActions = useHMSActions6();
-  const ref = useRef5(null);
-  const roleRef = useRef5(null);
-  const [selectedBulkRole, setBulkRole] = useState11([]);
-  const [selectedRole, setRole] = useState11("");
-  const [bulkRoleDialog, setBulkRoleDialog] = useState11(false);
-  const [roleDialog, setRoleDialog] = useState11(false);
-  const [errorMessage, setErrorMessage] = useState11("");
-  const [isSubmiting, setIsSubmiting] = useState11(false);
-  const changeBulkRole = useCallback4(() => __async(void 0, null, function* () {
+  const ref = useRef4(null);
+  const roleRef = useRef4(null);
+  const [selectedBulkRole, setBulkRole] = useState10([]);
+  const [selectedRole, setRole] = useState10("");
+  const [bulkRoleDialog, setBulkRoleDialog] = useState10(false);
+  const [roleDialog, setRoleDialog] = useState10(false);
+  const [errorMessage, setErrorMessage] = useState10("");
+  const [isSubmiting, setIsSubmiting] = useState10(false);
+  const changeBulkRole = useCallback3(() => __async(void 0, null, function* () {
     if (selectedBulkRole.length > 0 && selectedRole) {
       try {
         setIsSubmiting(true);
@@ -2033,11 +1620,11 @@ import React18 from "react";
 import { ExpandIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useFullscreen.js
-import { useCallback as useCallback5, useEffect as useEffect5, useState as useState12 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState11 } from "react";
 import screenfull from "screenfull";
 var useFullscreen = () => {
-  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState12(screenfull.isFullscreen);
-  const toggle = useCallback5(() => __async(void 0, null, function* () {
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState11(screenfull.isFullscreen);
+  const toggle = useCallback4(() => __async(void 0, null, function* () {
     if (!screenfull.isEnabled) {
       ToastManager.addToast({ title: "Fullscreen feature not supported" });
       return;
@@ -2052,7 +1639,7 @@ var useFullscreen = () => {
       ToastManager.addToast({ title: err.message });
     }
   }), [isFullScreenEnabled]);
-  useEffect5(() => {
+  useEffect4(() => {
     const onChange = () => {
       setIsFullScreenEnabled(screenfull.isFullscreen);
     };
@@ -2092,7 +1679,7 @@ var FullScreenItem = () => {
 };
 
 // src/Prebuilt/components/MoreSettings/MuteAllModal.jsx
-import React20, { useCallback as useCallback6, useState as useState13 } from "react";
+import React20, { useCallback as useCallback5, useState as useState12 } from "react";
 import { useHMSActions as useHMSActions7 } from "@100mslive/react-sdk";
 import { MicOffIcon } from "@100mslive/react-icons";
 
@@ -2149,11 +1736,11 @@ var trackTypeOptions = [
 var MuteAllModal = ({ onOpenChange, isMobile = false }) => {
   const roles = useFilteredRoles();
   const hmsActions = useHMSActions7();
-  const [enabled, setEnabled] = useState13(false);
-  const [trackType, setTrackType] = useState13();
-  const [selectedRole, setRole] = useState13();
-  const [selectedSource, setSource] = useState13();
-  const muteAll = useCallback6(() => __async(void 0, null, function* () {
+  const [enabled, setEnabled] = useState12(false);
+  const [trackType, setTrackType] = useState12();
+  const [selectedRole, setRole] = useState12();
+  const [selectedSource, setSource] = useState12();
+  const muteAll = useCallback5(() => __async(void 0, null, function* () {
     yield hmsActions.setRemoteTracksEnabled({
       enabled,
       type: trackType,
@@ -2199,11 +1786,11 @@ var DesktopOptions = ({
   elements,
   screenType
 }) => {
-  const localPeerId = useHMSStore11(selectLocalPeerID3);
+  const localPeerId = useHMSStore10(selectLocalPeerID3);
   const hmsActions = useHMSActions8();
-  const enablHlsStats = useHMSStore11(selectAppData(APP_DATA.hlsStats));
-  const [openModals, setOpenModals] = useState14(/* @__PURE__ */ new Set());
-  const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
+  const enablHlsStats = useHMSStore10(selectAppData(APP_DATA.hlsStats));
+  const [openModals, setOpenModals] = useState13(/* @__PURE__ */ new Set());
+  const { isBRBOn, toggleBRB } = useMyMetadata();
   const isPipOn = PictureInPicture.isOn();
   const isBRBEnabled = !!(elements == null ? void 0 : elements.brb);
   useDropdownList({ open: openModals.size > 0, name: "MoreSettings" });
@@ -2226,7 +1813,7 @@ var DesktopOptions = ({
       onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value),
       modal: false
     },
-    /* @__PURE__ */ React21.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React21.createElement(IconButton_default, null, /* @__PURE__ */ React21.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React21.createElement(DragHandleIcon, null)))),
+    /* @__PURE__ */ React21.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React21.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React21.createElement(IconButton_default, null, /* @__PURE__ */ React21.createElement(DragHandleIcon, null)))),
     /* @__PURE__ */ React21.createElement(
       Dropdown.Content,
       {
@@ -2241,9 +1828,7 @@ var DesktopOptions = ({
           }
         }
       },
-      screenType !== "hls_live_streaming" ? /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: toggleHandRaise, "data-testid": "raise_hand_btn" }, /* @__PURE__ */ React21.createElement(HandIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Raise Hand"), /* @__PURE__ */ React21.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isHandRaised ? /* @__PURE__ */ React21.createElement(CheckIcon3, null) : null)) : null,
-      isBRBEnabled && screenType === "hls_live_streaming" ? /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React21.createElement(BrbIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React21.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React21.createElement(CheckIcon3, null) : null)) : null,
-      isBRBEnabled && screenType === "hls_live_streaming" ? /* @__PURE__ */ React21.createElement(Dropdown.ItemSeparator, { css: { mx: "0" } }) : null,
+      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React21.createElement(BrbIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React21.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React21.createElement(CheckIcon3, null) : null)) : null,
       screenType !== "hls_live_streaming" ? /* @__PURE__ */ React21.createElement(Dropdown.Item, null, /* @__PURE__ */ React21.createElement(
         PIP,
         {
@@ -2287,18 +1872,28 @@ var DesktopOptions = ({
   ));
 };
 
-// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
-import React22, { useRef as useRef6, useState as useState15 } from "react";
+// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
+import React22, { useRef as useRef5, useState as useState14 } from "react";
 import { useClickAway } from "react-use";
 import {
-  selectIsConnectedToRoom as selectIsConnectedToRoom6,
-  selectPeerCount as selectPeerCount2,
+  selectIsConnectedToRoom as selectIsConnectedToRoom5,
+  selectPeerCount,
   selectPermissions as selectPermissions6,
   useHMSActions as useHMSActions9,
-  useHMSStore as useHMSStore12,
+  useHMSStore as useHMSStore11,
   useRecordingStreaming as useRecordingStreaming5
 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon4, DragHandleIcon as DragHandleIcon2, EmojiIcon as EmojiIcon2, PeopleIcon, RecordIcon as RecordIcon2, SettingsIcon as SettingsIcon3 } from "@100mslive/react-icons";
+import {
+  BrbIcon as BrbIcon2,
+  CrossIcon as CrossIcon4,
+  DragHandleIcon as DragHandleIcon2,
+  EmojiIcon as EmojiIcon2,
+  HandIcon,
+  HandRaiseSlashedIcon,
+  PeopleIcon,
+  RecordIcon as RecordIcon2,
+  SettingsIcon as SettingsIcon3
+} from "@100mslive/react-icons";
 var MODALS2 = {
   CHANGE_NAME: "changeName",
   SELF_ROLE_CHANGE: "selfRoleChange",
@@ -2310,20 +1905,24 @@ var MODALS2 = {
   MUTE_ALL: "muteAll",
   EMBED_URL: "embedUrl"
 };
-var MwebOptions = ({ elements }) => {
+var MwebOptions = ({
+  elements,
+  screenType
+}) => {
   const hmsActions = useHMSActions9();
-  const permissions = useHMSStore12(selectPermissions6);
-  const isConnected = useHMSStore12(selectIsConnectedToRoom6);
+  const permissions = useHMSStore11(selectPermissions6);
+  const isConnected = useHMSStore11(selectIsConnectedToRoom5);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming5();
-  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 [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 toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const peerCount = useHMSStore12(selectPeerCount2);
-  const emojiCardRef = useRef6(null);
+  const peerCount = useHMSStore11(selectPeerCount);
+  const emojiCardRef = useRef5(null);
+  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -2337,7 +1936,7 @@ var MwebOptions = ({ elements }) => {
     });
   };
   useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React22.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React22.createElement(IconButton_default, null, /* @__PURE__ */ React22.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React22.createElement(DragHandleIcon2, null)))), /* @__PURE__ */ React22.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React22.createElement(
+  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(
     Sheet.Title,
     {
       css: {
@@ -2368,7 +1967,7 @@ var MwebOptions = ({ elements }) => {
         px: "$9"
       }
     },
-    /* @__PURE__ */ React22.createElement(
+    (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React22.createElement(
       ActionTile.Root,
       {
         onClick: () => {
@@ -2380,6 +1979,18 @@ var MwebOptions = ({ elements }) => {
       /* @__PURE__ */ React22.createElement(PeopleIcon, null),
       /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Participants")
     ),
+    screenType !== "hls_live_streaming" ? /* @__PURE__ */ React22.createElement(
+      ActionTile.Root,
+      {
+        active: isHandRaised,
+        onClick: () => {
+          toggleHandRaise();
+          setOpenOptionsSheet(false);
+        }
+      },
+      isHandRaised ? /* @__PURE__ */ React22.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React22.createElement(HandIcon, null),
+      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
+    ) : null,
     (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React22.createElement(
       ActionTile.Root,
       {
@@ -2391,6 +2002,18 @@ var MwebOptions = ({ elements }) => {
       /* @__PURE__ */ React22.createElement(EmojiIcon2, null),
       /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Emoji Reactions")
     ),
+    (elements == null ? void 0 : elements.brb) && /* @__PURE__ */ React22.createElement(
+      ActionTile.Root,
+      {
+        active: isBRBOn,
+        onClick: () => {
+          toggleBRB();
+          setOpenOptionsSheet(false);
+        }
+      },
+      /* @__PURE__ */ React22.createElement(BrbIcon2, null),
+      /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Be Right Back")
+    ),
     /* @__PURE__ */ React22.createElement(
       ActionTile.Root,
       {
@@ -2429,6 +2052,7 @@ var MwebOptions = ({ elements }) => {
                 });
               } else {
                 ToastManager.addToast({
+                  // @ts-ignore
                   title: error.message,
                   variant: "error"
                 });
@@ -2444,7 +2068,7 @@ var MwebOptions = ({ elements }) => {
       isRecordingLoading ? /* @__PURE__ */ React22.createElement(Loading, null) : /* @__PURE__ */ React22.createElement(RecordIcon2, null),
       /* @__PURE__ */ React22.createElement(ActionTile.Title, null, isBrowserRecordingOn ? "Recording On" : isRecordingLoading ? "Starting Recording" : "Start Recording")
     ) : null
-  ))), /* @__PURE__ */ React22.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React22.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React22.createElement(
+  ))), /* @__PURE__ */ React22.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet, screenType }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React22.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React22.createElement(
     ChangeNameModal,
     {
       onOpenChange: (value) => updateState(MODALS2.CHANGE_NAME, value),
@@ -2481,6 +2105,7 @@ var MwebOptions = ({ elements }) => {
           setShowRecordingOn(false);
         } catch (error) {
           ToastManager.addToast({
+            // @ts-ignore
             title: error.message,
             variant: "error"
           });
@@ -2496,28 +2121,28 @@ var MoreSettings = ({
   screenType
 }) => {
   const isMobile = useMedia3(config.media.md);
-  return isMobile ? /* @__PURE__ */ React23.createElement(MwebOptions, { elements, streamType: screenType }) : /* @__PURE__ */ React23.createElement(DesktopOptions, { elements, screenType });
+  return isMobile ? /* @__PURE__ */ React23.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React23.createElement(DesktopOptions, { elements, screenType });
 };
 
 // src/Prebuilt/components/RaiseHand.jsx
 import React24 from "react";
-import { selectLocalPeer, selectPeerMetadata as selectPeerMetadata2, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
+import { selectLocalPeer, selectPeerMetadata, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
 import { HandIcon as HandIcon2 } from "@100mslive/react-icons";
 var RaiseHand = () => {
   var _a;
   const { toggleHandRaise } = useMyMetadata();
-  const localPeer = useHMSStore13(selectLocalPeer);
-  const isHandRaised = ((_a = useHMSStore13(selectPeerMetadata2(localPeer.id))) == null ? void 0 : _a.isHandRaised) || false;
+  const localPeer = useHMSStore12(selectLocalPeer);
+  const isHandRaised = ((_a = useHMSStore12(selectPeerMetadata(localPeer.id))) == null ? void 0 : _a.isHandRaised) || false;
   return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(IconButton_default, { active: !isHandRaised, onClick: toggleHandRaise }, /* @__PURE__ */ React24.createElement(HandIcon2, null)));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
 import React31, { Fragment as Fragment6 } from "react";
-import { selectIsAllowedToPublish, useHMSStore as useHMSStore14, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
+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 useState17 } from "react";
+import React30, { Fragment as Fragment5, useState as useState16 } from "react";
 import { useScreenShare } from "@100mslive/react-sdk";
 import { StarIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
@@ -2553,7 +2178,7 @@ var ShareMenuIcon = styled(ScreenShareButton, {
 });
 
 // src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
-import React29, { useState as useState16 } from "react";
+import React29, { useState as useState15 } from "react";
 
 // src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx
 import React25 from "react";
@@ -2726,7 +2351,7 @@ var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
 
 // src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
 function PDFFileOptions({ onOpenChange }) {
-  const [pdfFile, setPDFFile] = useState16(null);
+  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(
     Dialog.Content,
     {
@@ -2758,7 +2383,7 @@ var MODALS3 = {
   PDF_SHARE: "pdfShare"
 };
 function ShareScreenOptions() {
-  const [openModals, setOpenModals] = useState17(/* @__PURE__ */ new Set());
+  const [openModals, setOpenModals] = useState16(/* @__PURE__ */ new Set());
   const { amIScreenSharing } = useScreenShare();
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -2995,7 +2620,7 @@ function ShareScreenOptions() {
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
 var ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore14(selectIsAllowedToPublish);
+  const isAllowedToPublish = useHMSStore13(selectIsAllowedToPublish);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare2();
   const isVideoScreenshare = amIScreenSharing && !!video;
@@ -3018,152 +2643,196 @@ var ScreenshareToggle = ({ css = {} }) => {
   ), /* @__PURE__ */ React31.createElement(ShareScreenOptions, null)));
 };
 
-// src/Prebuilt/components/Footer/ChatToggle.jsx
+// src/Prebuilt/components/Footer/ChatToggle.tsx
 import React32 from "react";
-import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
+import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore14 } from "@100mslive/react-sdk";
 import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
 var ChatToggle = () => {
-  const countUnreadMessages = useHMSStore15(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" })));
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-import React35, { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect6, useState as useState19 } from "react";
+import React35, { Fragment as Fragment7, useCallback as useCallback6, useEffect as useEffect5, useState as useState18 } from "react";
 import { useDebounce, useMedia as useMedia4 } from "react-use";
 import {
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID4,
-  selectPeerCount as selectPeerCount4,
-  selectPeerMetadata as selectPeerMetadata3,
-  selectPeersByCondition,
-  selectPermissions as selectPermissions7,
-  useHMSActions as useHMSActions10,
-  useHMSStore as useHMSStore17
+  selectPeerCount as selectPeerCount2,
+  selectPeerMetadata as selectPeerMetadata2,
+  selectPeersByCondition as selectPeersByCondition2,
+  selectPermissions as selectPermissions8,
+  useHMSActions as useHMSActions11,
+  useHMSStore as useHMSStore16
 } from "@100mslive/react-sdk";
 import {
   ChangeRoleIcon as ChangeRoleIcon2,
   HandIcon as HandIcon3,
-  MicOffIcon as MicOffIcon2,
+  MicOffIcon as MicOffIcon3,
   PeopleIcon as PeopleIcon2,
   PeopleRemoveIcon,
   SearchIcon,
-  VerticalMenuIcon as VerticalMenuIcon3
+  VerticalMenuIcon as VerticalMenuIcon4
 } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/Chat/ChatParticipantHeader.jsx
-import React33, { useState as useState18 } from "react";
-import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon5 } from "@100mslive/react-icons";
-var tabTriggerCSS = {
-  color: "$on_surface_high",
-  p: "$4",
-  fontWeight: "$semiBold",
-  fontSize: "$sm",
-  w: "100%",
-  justifyContent: "center"
-};
-var ChatParticipantHeader = React33.memo(({ activeTabValue = SIDE_PANE_OPTIONS.CHAT }) => {
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const [activeTab, setActiveTab] = useState18(activeTabValue);
-  const peerCount = useHMSStore16(selectPeerCount3);
-  return /* @__PURE__ */ React33.createElement(
-    Flex,
+// src/Prebuilt/components/Footer/RoleAccordion.tsx
+import React34 from "react";
+import { useMeasure } from "react-use";
+import { FixedSizeList } from "react-window";
+
+// src/Prebuilt/components/Footer/RoleOptions.tsx
+import React33, { useState as useState17 } from "react";
+import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions10, useHMSStore as useHMSStore15, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
+import {
+  MicOffIcon as MicOffIcon2,
+  MicOnIcon,
+  PersonRectangleIcon,
+  RemoveUserIcon,
+  VerticalMenuIcon as VerticalMenuIcon3,
+  VideoOffIcon,
+  VideoOnIcon
+} from "@100mslive/react-icons";
+var dropdownItemCSS = { backgroundColor: "$surface_default", gap: "$4", p: "$8" };
+var optionTextCSS = { fontWeight: "$semiBold", color: "$on_surface_high", textTransform: "none" };
+var RoleOptions = ({ roleName, peerList }) => {
+  const [openOptions, setOpenOptions] = useState17(false);
+  const permissions = useHMSStore15(selectPermissions7);
+  const hmsActions = useHMSActions10();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
+  const vanillaStore = useHMSVanillaStore2();
+  const store = vanillaStore.getState();
+  let allPeersHaveVideoOn = true;
+  let allPeersHaveAudioOn = true;
+  peerList.forEach((peer) => {
+    var _a, _b;
+    const isAudioOn = !!peer.audioTrack && ((_a = store.tracks[peer.audioTrack]) == null ? void 0 : _a.enabled);
+    const isVideoOn = !!peer.videoTrack && ((_b = store.tracks[peer.videoTrack]) == null ? void 0 : _b.enabled);
+    allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
+    allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+  });
+  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)) {
+    return null;
+  }
+  const removeAllFromStage = () => {
+    peerList.forEach((peer) => {
+      const prevRole = getMetadata(peer.metadata).prevRole;
+      if (prevRole) {
+        hmsActions.changeRoleOfPeer(peer.id, prevRole, true);
+      }
+    });
+  };
+  const setTrackEnabled = (type, enabled = false) => __async(void 0, null, function* () {
+    try {
+      yield hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: "regular", type, enabled });
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  const removePeersFromRoom = () => __async(void 0, null, function* () {
+    try {
+      peerList.forEach((peer) => __async(void 0, null, function* () {
+        yield hmsActions.removePeer(peer.id, "");
+      }));
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  return /* @__PURE__ */ React33.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React33.createElement(
+    Dropdown.Trigger,
     {
-      align: "center",
+      onClick: (e) => e.stopPropagation(),
+      className: "role_actions",
+      asChild: true,
       css: {
-        color: "$on_primary_high",
-        h: "$16"
+        p: "$1",
+        r: "$0",
+        c: "$on_surface_high",
+        visibility: openOptions ? "visible" : "hidden",
+        "&:hover": {
+          c: "$on_surface_medium"
+        },
+        "@md": {
+          visibility: "visible"
+        }
       }
     },
-    /* @__PURE__ */ React33.createElement(Flex, { css: { w: "100%", bg: "$surface_default", borderRadius: "$2" } }, /* @__PURE__ */ React33.createElement(Tabs.Root, { value: activeTab, onValueChange: setActiveTab, css: { w: "100%" } }, /* @__PURE__ */ React33.createElement(Tabs.List, { css: { w: "100%", p: "$2" } }, /* @__PURE__ */ React33.createElement(
-      Tabs.Trigger,
+    /* @__PURE__ */ React33.createElement(Flex, null, /* @__PURE__ */ React33.createElement(VerticalMenuIcon3, null))
+  ), /* @__PURE__ */ React33.createElement(
+    Dropdown.Content,
+    {
+      onClick: (e) => e.stopPropagation(),
+      css: { w: "max-content", maxWidth: "$64", bg: "$surface_default", py: 0 },
+      align: "end"
+    },
+    canRemoveRoleFromStage && /* @__PURE__ */ React33.createElement(
+      Dropdown.Item,
       {
-        value: SIDE_PANE_OPTIONS.CHAT,
-        onClick: toggleChat,
-        css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
-          color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? "$on_surface_low" : "$on_surface_high"
-        })
+        css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderBottom: "1px solid $border_bright" }),
+        onClick: removeAllFromStage
       },
-      "Chat"
-    ), /* @__PURE__ */ React33.createElement(
-      Tabs.Trigger,
+      /* @__PURE__ */ React33.createElement(PersonRectangleIcon, null),
+      /* @__PURE__ */ React33.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(
+      Dropdown.Item,
       {
-        value: SIDE_PANE_OPTIONS.PARTICIPANTS,
-        onClick: toggleParticipants,
-        css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
-          color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
-        })
+        css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright" }),
+        onClick: () => setTrackEnabled("video", !allPeersHaveVideoOn)
       },
-      "Participants (",
-      peerCount,
-      ")"
-    )))),
-    /* @__PURE__ */ React33.createElement(
-      IconButton,
+      allPeersHaveVideoOn ? /* @__PURE__ */ React33.createElement(VideoOffIcon, null) : /* @__PURE__ */ React33.createElement(VideoOnIcon, null),
+      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: optionTextCSS }, allPeersHaveVideoOn ? "Mute" : "Unmute", " Video")
+    )),
+    canRemoveRoleFromRoom && /* @__PURE__ */ React33.createElement(
+      Dropdown.Item,
       {
-        css: { ml: "auto" },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-            toggleChat();
-          } else {
-            toggleParticipants();
-          }
-        },
-        "data-testid": "close_chat"
+        css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright", color: "$alert_error_default" }),
+        onClick: removePeersFromRoom
       },
-      /* @__PURE__ */ React33.createElement(CrossIcon5, null)
+      /* @__PURE__ */ React33.createElement(RemoveUserIcon, null),
+      /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
     )
-  );
-});
+  ));
+};
 
-// src/Prebuilt/components/Footer/RoleAccordion.jsx
-import React34 from "react";
-import { useMeasure } from "react-use";
-import { FixedSizeList } from "react-window";
+// src/Prebuilt/components/Footer/RoleAccordion.tsx
 var ROW_HEIGHT = 50;
 function itemKey(index, data3) {
   return data3.peerList[index].id;
 }
 var VirtualizedParticipantItem = React34.memo(({ index, data: data3 }) => {
-  return /* @__PURE__ */ React34.createElement(
-    Participant,
-    {
-      key: data3.peerList[index].id,
-      peer: data3.peerList[index],
-      isConnected: data3.isConnected,
-      setSelectedPeerId: data3.setSelectedPeerId
-    }
-  );
+  return /* @__PURE__ */ React34.createElement(Participant, { key: data3.peerList[index].id, peer: data3.peerList[index], isConnected: data3.isConnected });
 });
 var RoleAccordion = ({
   peerList = [],
   roleName,
-  setSelectedPeerId,
   isConnected,
   filter,
   isHandRaisedAccordion = false
 }) => {
   const [ref, { width }] = useMeasure();
-  const height = ROW_HEIGHT * peerList.length;
   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) {
     return null;
   }
-  return /* @__PURE__ */ React34.createElement(Flex, { direction: "column", css: { flexGrow: 1 }, ref }, /* @__PURE__ */ React34.createElement(
+  const height = ROW_HEIGHT * peerList.length;
+  return /* @__PURE__ */ React34.createElement(Flex, { direction: "column", css: { flexGrow: 1, "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React34.createElement(
     Accordion.Root,
     {
       type: "single",
       collapsible: true,
       defaultValue: roleName,
-      css: { borderRadius: "$3", border: "1px solid $border_bright" }
+      css: { borderRadius: "$1", border: "1px solid $border_bright" }
     },
     /* @__PURE__ */ React34.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React34.createElement(
       Accordion.Header,
       {
+        iconStyles: { c: "$on_surface_high" },
         css: {
           textTransform: "capitalize",
           p: "$6 $8",
@@ -3172,14 +2841,21 @@ var RoleAccordion = ({
           c: "$on_surface_medium"
         }
       },
-      roleName,
-      " ",
-      `(${getFormattedCount(peerList.length)})`
+      /* @__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, setSelectedPeerId },
+        itemData: { peerList, isConnected },
         itemKey,
         itemCount: peerList.length,
         width,
@@ -3192,10 +2868,10 @@ var RoleAccordion = ({
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
 var ParticipantList = () => {
-  const [filter, setFilter] = useState19();
+  const [filter, setFilter] = useState18();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore17(selectPeersByCondition((peer) => {
+  const handRaisedPeers = useHMSStore16(selectPeersByCondition2((peer) => {
     var _a;
     return (_a = JSON.parse(peer.metadata || "{}")) == null ? void 0 : _a.isHandRaised;
   }));
@@ -3205,8 +2881,7 @@ var ParticipantList = () => {
     }
     peersOrderedByRoles[participant.roleName].push(participant);
   });
-  const [selectedPeerId, setSelectedPeerId] = useState19(null);
-  const onSearch = useCallback7((value) => {
+  const onSearch = useCallback6((value) => {
     setFilter((filterValue) => {
       if (!filterValue) {
         filterValue = {};
@@ -3218,30 +2893,21 @@ var ParticipantList = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(Fragment7, null, /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React35.createElement(ChatParticipantHeader, { activeTabValue: SIDE_PANE_OPTIONS.PARTICIPANTS }), !(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__ */ React35.createElement(Fragment7, null, /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$4" } }, !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React35.createElement(ParticipantSearch, { onSearch, inSidePane: true }), participants.length === 0 ? /* @__PURE__ */ React35.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", p: "$8 0" } }, /* @__PURE__ */ React35.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")) : null, /* @__PURE__ */ React35.createElement(
     VirtualizedParticipants,
     {
       peersOrderedByRoles,
       handRaisedList: handRaisedPeers,
       isConnected,
-      filter,
-      setSelectedPeerId
-    }
-  ), selectedPeerId && /* @__PURE__ */ React35.createElement(
-    RoleChangeModal,
-    {
-      peerId: selectedPeerId,
-      onOpenChange: (value) => {
-        !value && setSelectedPeerId(null);
-      }
+      filter
     }
   )));
 };
 var ParticipantCount = () => {
-  const peerCount = useHMSStore17(selectPeerCount4);
+  const peerCount = useHMSStore16(selectPeerCount2);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  useEffect6(() => {
+  useEffect5(() => {
     if (isParticipantsOpen && peerCount === 0) {
       toggleSidepane();
     }
@@ -3269,13 +2935,7 @@ var ParticipantCount = () => {
     /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
   );
 };
-var VirtualizedParticipants = ({
-  peersOrderedByRoles = {},
-  isConnected,
-  setSelectedPeerId,
-  filter,
-  handRaisedList = []
-}) => {
+var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
   return /* @__PURE__ */ React35.createElement(
     Flex,
     {
@@ -3295,7 +2955,6 @@ var VirtualizedParticipants = ({
         roleName: "Hand Raised",
         filter,
         isConnected,
-        setSelectedPeerId,
         isHandRaisedAccordion: true
       }
     ),
@@ -3306,14 +2965,13 @@ var VirtualizedParticipants = ({
         peerList: peersOrderedByRoles[role],
         roleName: role,
         isConnected,
-        setSelectedPeerId,
         filter
       }
     ))
   );
 };
-var Participant = ({ peer, isConnected, setSelectedPeerId }) => {
-  const localPeerId = useHMSStore17(selectLocalPeerID4);
+var Participant = ({ peer, isConnected }) => {
+  const localPeerId = useHMSStore16(selectLocalPeerID4);
   return /* @__PURE__ */ React35.createElement(
     Flex,
     {
@@ -3330,33 +2988,22 @@ var Participant = ({ peer, isConnected, setSelectedPeerId }) => {
       "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,
-        onSettings: () => {
-          setSelectedPeerId(peer.id);
-        }
-      }
-    ) : null
+    isConnected ? /* @__PURE__ */ React35.createElement(ParticipantActions, { peerId: peer.id, isLocal: peer.id === localPeerId, role: peer.roleName }) : null
   );
 };
-var ParticipantActions = React35.memo(({ onSettings, peerId, role, isLocal }) => {
+var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
   var _a, _b;
-  const isHandRaised = (_a = useHMSStore17(selectPeerMetadata3(peerId))) == null ? void 0 : _a.isHandRaised;
-  const canChangeRole = (_b = useHMSStore17(selectPermissions7)) == null ? void 0 : _b.changeRole;
+  const isHandRaised = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.isHandRaised;
+  const canChangeRole = (_b = useHMSStore16(selectPermissions8)) == null ? void 0 : _b.changeRole;
   const shouldShowMoreActions = canChangeRole;
-  const isAudioMuted = !useHMSStore17(selectIsPeerAudioEnabled(peerId));
+  const isAudioMuted = !useHMSStore16(selectIsPeerAudioEnabled(peerId));
   return /* @__PURE__ */ React35.createElement(
     Flex,
     {
       align: "center",
       css: {
         flexShrink: 0,
-        gap: "$8",
-        mt: "$2"
+        gap: "$8"
       }
     },
     /* @__PURE__ */ React35.createElement(ConnectionIndicator, { peerId }),
@@ -3376,31 +3023,31 @@ var ParticipantActions = React35.memo(({ onSettings, peerId, role, isLocal }) =>
         justify: "center",
         css: { p: "$2", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
       },
-      /* @__PURE__ */ React35.createElement(MicOffIcon2, { height: 19, width: 19 })
+      /* @__PURE__ */ React35.createElement(MicOffIcon3, { height: 19, width: 19 })
     ) : null,
-    shouldShowMoreActions && !isInternalRole(role) && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { onRoleChange: onSettings, peerId, role }) : null
+    shouldShowMoreActions && !isInternalRole(role) && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
   );
 });
-var ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
-  var _a, _b, _c, _d;
-  const hmsActions = useHMSActions10();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore17(selectPermissions7);
-  const layout = useRoomLayout();
+var ParticipantMoreActions = ({ peerId, role }) => {
+  var _a;
+  const hmsActions = useHMSActions11();
+  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore16(selectPermissions8);
+  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
     on_stage_role,
     off_stage_roles = []
-  } = ((_c = (_b = (_a = layout == null ? void 0 : layout.screens) == null ? void 0 : _a.conferencing) == null ? void 0 : _b.default) == null ? void 0 : _c.elements.on_stage_exp) || {};
-  const canBringToStage = off_stage_roles.includes(role);
+  } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
-  const prevRole = (_d = useHMSStore17(selectPeerMetadata3(peerId))) == null ? void 0 : _d.prevRole;
-  const localPeerId = useHMSStore17(selectLocalPeerID4);
+  const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
+  const prevRole = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.prevRole;
+  const localPeerId = useHMSStore16(selectLocalPeerID4);
   const isLocal = localPeerId === peerId;
-  const [open, setOpen] = useState19(false);
+  const [open, setOpen] = useState18(false);
   const handleStageAction = () => __async(void 0, null, function* () {
     if (isInStage) {
-      hmsActions.changeRoleOfPeer(peerId, prevRole || off_stage_roles[0]);
+      prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
     } else {
       yield hmsActions.changeRoleOfPeer(peerId, on_stage_role);
     }
@@ -3426,8 +3073,8 @@ var ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
       },
       tabIndex: 0
     },
-    /* @__PURE__ */ React35.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React35.createElement(VerticalMenuIcon3, null))
-  ), /* @__PURE__ */ React35.createElement(Dropdown.Portal, null, /* @__PURE__ */ React35.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, canChangeRole && canBringToStage ? /* @__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)) : /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => onRoleChange(peerId) }, /* @__PURE__ */ React35.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, "Change Role")), !isLocal && canRemoveOthers && /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React35.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React35.createElement(VerticalMenuIcon4, null))
+  ), /* @__PURE__ */ React35.createElement(Dropdown.Portal, null, /* @__PURE__ */ React35.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React35.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, isInStage ? remove_from_stage_label : bring_to_stage_label)) : null, !isLocal && canRemoveOthers && /* @__PURE__ */ React35.createElement(
     Dropdown.Item,
     {
       css: { color: "$alert_error_default", bg: "$surface_default" },
@@ -3487,11 +3134,22 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
+var VirtualBackground = React36.lazy(() => import("./VirtualBackground-37FXUPYO.js"));
 var Footer2 = ({
   screenType,
   elements
 }) => {
+  var _a, _b;
   const isMobile = useMedia5(config.media.md);
+  const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay);
+  const openByDefault = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  useEffect6(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+  }, [toggleChat, openByDefault]);
   return /* @__PURE__ */ React36.createElement(
     Footer.Root,
     {
@@ -3501,7 +3159,8 @@ var Footer2 = ({
           justifyContent: "center",
           gap: "$10",
           position: "relative",
-          zIndex: 20
+          // To prevent it from showing over the sidepane if chat type is not overlay
+          zIndex: isOverlayChat ? 20 : 1
         }
       }
     },
@@ -3517,7 +3176,8 @@ var Footer2 = ({
         }
       },
       isMobile ? /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }) : null,
-      /* @__PURE__ */ React36.createElement(AudioVideoToggle, null)
+      /* @__PURE__ */ React36.createElement(AudioVideoToggle, null),
+      isMobile ? null : /* @__PURE__ */ React36.createElement(Suspense, { fallback: /* @__PURE__ */ React36.createElement(React36.Fragment, null) }, /* @__PURE__ */ React36.createElement(VirtualBackground, null))
     ),
     /* @__PURE__ */ React36.createElement(
       Footer.Center,
@@ -3529,21 +3189,21 @@ var Footer2 = ({
           }
         }
       },
-      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, screenType === "hls_live_streaming" ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), screenType === "hls_live_streaming" ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
+      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, screenType === "hls_live_streaming" ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), /* @__PURE__ */ React36.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
     ),
-    /* @__PURE__ */ React36.createElement(Footer.Right, null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(ParticipantCount, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType }))
+    /* @__PURE__ */ React36.createElement(Footer.Right, null, !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React36.createElement(ParticipantCount, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType }))
   );
 };
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
-import React37, { useCallback as useCallback8, useState as useState20 } from "react";
-import { selectHLSState, useHMSActions as useHMSActions11, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
+import React37, { useCallback as useCallback7, useState as useState19 } from "react";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions12, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
-  const { hlsError } = useHMSStore18(selectHLSState).error || false;
-  const [openModal, setOpenModal] = useState20(!!hlsError);
-  const hmsActions = useHMSActions11();
+  const { hlsError } = useHMSStore17(selectHLSState2).error || false;
+  const [openModal, setOpenModal] = useState19(!!hlsError);
+  const hmsActions = useHMSActions12();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback8(() => __async(this, null, function* () {
+  const startHLS = useCallback7(() => __async(this, null, function* () {
     try {
       if (isHLSStarted) {
         return;
@@ -3585,39 +3245,52 @@ function HLSFailureModal() {
 }
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-import React59, { Suspense, useCallback as useCallback17, useEffect as useEffect22 } from "react";
-import {
-  selectIsConnectedToRoom as selectIsConnectedToRoom7,
-  selectLocalPeerRoleName as selectLocalPeerRoleName3,
-  selectPermissions as selectPermissions11,
-  useHMSActions as useHMSActions19,
-  useHMSStore as useHMSStore34,
-  useRecordingStreaming as useRecordingStreaming8
-} from "@100mslive/react-sdk";
+import React60, { Suspense as Suspense2, useEffect as useEffect23 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions20, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-import React49, { useEffect as useEffect14, useMemo as useMemo6, useState as useState27 } from "react";
-import {
-  selectPeers as selectPeers3,
-  selectPeerScreenSharing,
-  selectRemotePeers as selectRemotePeers2,
-  useHMSStore as useHMSStore24,
-  useHMSVanillaStore as useHMSVanillaStore4
-} from "@100mslive/react-sdk";
+import React49, { useEffect as useEffect14, useMemo as useMemo6, useState as useState26 } from "react";
+import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore23, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-import React42, { useEffect as useEffect10, useMemo as useMemo3, useState as useState22 } from "react";
+import React42, { useEffect as useEffect10, useMemo as useMemo3, useState as useState21 } from "react";
 import { useMedia as useMedia8 } from "react-use";
-import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
-import React38, { useEffect as useEffect7, useRef as useRef7 } from "react";
+import React39, { useEffect as useEffect7, useRef as useRef6 } from "react";
 import Draggable from "react-draggable";
 import { useMedia as useMedia6 } from "react-use";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer as selectLocalPeer2, selectVideoTrackByID, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer as selectLocalPeer2, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/hooks/useVideoTileLayout.ts
+import React38, { useContext } from "react";
+var VideoTileContext = React38.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__ */ React38.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React38.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React38.createElement(Text, null, "You"), /* @__PURE__ */ React38.createElement(IconButton_default, { onClick: () => setMinimised(false), css: { bg: "transparent", border: "transparent" } }, /* @__PURE__ */ React38.createElement(ExpandIcon2, null)));
+  return /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ React39.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ React39.createElement(Text, null, "You"), /* @__PURE__ */ React39.createElement(
+    IconButton_default,
+    {
+      className: "__cancel-drag-event",
+      onClick: () => setMinimised(false),
+      css: { bg: "transparent", border: "transparent" }
+    },
+    /* @__PURE__ */ React39.createElement(ExpandIcon2, null)
+  ));
 };
 var insetHeightPx = 180;
 var insetMaxWidthPx = 240;
@@ -3626,18 +3299,22 @@ var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
   const isMobile = useMedia6(config.media.md);
   const isLandscape = useMedia6(config.media.ls);
-  const localPeer = useHMSStore19(selectLocalPeer2);
+  const localPeer = useHMSStore18(selectLocalPeer2);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore19(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isAllowedToPublish = useHMSStore19(selectIsAllowedToPublish2);
-  const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
+  const videoTrack = useHMSStore18(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isAllowedToPublish = useHMSStore18(selectIsAllowedToPublish2);
+  const videoTileProps = useVideoTileContext();
+  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
+  if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
+    aspectRatio = videoTrack.width / videoTrack.height;
+  }
   let height = insetHeightPx;
   let width = height * aspectRatio;
   if (isLandscape && width > insetMaxWidthPx) {
     width = 240;
     height = width / aspectRatio;
   }
-  const nodeRef = useRef7(null);
+  const nodeRef = useRef6(null);
   useEffect7(() => {
     const node = nodeRef.current;
     if (!node || !window.ResizeObserver) {
@@ -3659,7 +3336,7 @@ var InsetTile = () => {
   if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(Draggable, { bounds: "parent", nodeRef }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(Draggable, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ React39.createElement(
     Box,
     {
       ref: nodeRef,
@@ -3675,9 +3352,9 @@ var InsetTile = () => {
         h: height
       } : {})
     },
-    minimised ? /* @__PURE__ */ React38.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React38.createElement(
+    minimised ? /* @__PURE__ */ React39.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ React39.createElement(
       VideoTile_default,
-      {
+      __spreadProps(__spreadValues({
         peerId: localPeer == null ? void 0 : localPeer.id,
         trackid: localPeer == null ? void 0 : localPeer.videoTrack,
         rootCSS: {
@@ -3687,14 +3364,17 @@ var InsetTile = () => {
         width,
         height,
         containerCSS: { background: "$surface_default" },
-        canMinimise: true
-      }
+        canMinimise: true,
+        isDragabble: true
+      }, videoTileProps), {
+        hideParticipantNameOnTile: true
+      })
     )
   ));
 };
 
 // src/Prebuilt/components/Pagination.tsx
-import React39, { useEffect as useEffect8 } from "react";
+import React40, { useEffect as useEffect8 } from "react";
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
@@ -3719,7 +3399,7 @@ var Pagination = ({
   if (numPages <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React39.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React39.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), /* @__PURE__ */ React39.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React40.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ React40.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React40.createElement(
     StyledPagination.Dot,
     {
       key: i,
@@ -3729,65 +3409,51 @@ var Pagination = ({
         onPageChange(i);
       }
     }
-  ))), /* @__PURE__ */ React39.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React39.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+  ))) : null, /* @__PURE__ */ React40.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React40.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
 };
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
 import React41 from "react";
-
-// src/Prebuilt/components/hooks/useVideoTileLayout.ts
-import React40, { useContext } from "react";
-var VideoTileContext = React40.createContext({
-  enableSpotlightingPeer: true,
-  hideParticipantNameOnTile: false,
-  roundedVideoTile: true,
-  hideAudioMuteOnTile: false,
-  objectFit: "contain"
-});
-var useVideoTileContext = () => {
-  const context = useContext(VideoTileContext);
-  return context;
-};
-
-// src/Prebuilt/components/VideoLayouts/Grid.tsx
-var Grid = React41.forwardRef(({ tiles }, ref) => {
-  const videoTileProps = useVideoTileContext();
-  return /* @__PURE__ */ React41.createElement(
-    Box,
-    {
-      ref,
-      css: {
-        flex: "1 1 0",
-        gap: "$4",
-        py: "$4",
-        display: "flex",
-        placeContent: "center",
-        alignItems: "center",
-        justifyContent: "center",
-        flexFlow: "row wrap",
-        minHeight: 0
-      }
-    },
-    tiles == null ? void 0 : tiles.map((tile) => {
-      var _a, _b, _c, _d;
-      return /* @__PURE__ */ React41.createElement(
-        VideoTile_default,
-        __spreadValues({
-          key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
-          width: tile.width,
-          height: tile.height,
-          peerId: (_c = tile.peer) == null ? void 0 : _c.id,
-          trackId: (_d = tile.track) == null ? void 0 : _d.id,
-          rootCSS: { padding: 0 },
-          objectFit: "contain"
-        }, videoTileProps)
-      );
-    })
-  );
-});
+var Grid = React41.forwardRef(
+  ({ tiles, edgeToEdge }, ref) => {
+    const videoTileProps = useVideoTileContext();
+    return /* @__PURE__ */ React41.createElement(
+      Box,
+      {
+        ref,
+        css: {
+          flex: "1 1 0",
+          gap: "$4",
+          display: "flex",
+          placeContent: "center",
+          alignItems: "center",
+          justifyContent: "center",
+          flexFlow: "row wrap",
+          minHeight: 0,
+          "@md": { gap: edgeToEdge ? 0 : "$4" }
+        }
+      },
+      tiles == null ? void 0 : tiles.map((tile) => {
+        var _a, _b, _c, _d;
+        return /* @__PURE__ */ React41.createElement(
+          VideoTile_default,
+          __spreadValues({
+            key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
+            width: tile.width,
+            height: tile.height,
+            peerId: (_c = tile.peer) == null ? void 0 : _c.id,
+            trackId: (_d = tile.track) == null ? void 0 : _d.id,
+            rootCSS: { padding: 0 },
+            objectFit: "contain"
+          }, videoTileProps)
+        );
+      })
+    );
+  }
+);
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-import { useEffect as useEffect9, useMemo as useMemo2, useState as useState21 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo2, useState as useState20 } from "react";
 import { useMeasure as useMeasure2, useMedia as useMedia7 } from "react-use";
 import {
   getPeersWithTiles,
@@ -3795,7 +3461,6 @@ import {
   useHMSVanillaStore as useHMSVanillaStore3
 } from "@100mslive/react-sdk";
 var aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
-var gap = 8;
 var usePagesWithTiles = ({ peers, maxTileCount }) => {
   const vanillaStore = useHMSVanillaStore3();
   const tracksMap = vanillaStore.getState(selectTracksMap3);
@@ -3820,12 +3485,13 @@ var usePagesWithTiles = ({ peers, maxTileCount }) => {
 };
 var useTileLayout = ({
   pageList,
-  maxTileCount
+  maxTileCount,
+  edgeToEdge = false
 }) => {
   const vanillaStore = useHMSVanillaStore3();
   const [ref, { width, height }] = useMeasure2();
   const isMobile = useMedia7(config.media.lg);
-  const [pagesWithTiles, setPagesWithTiles] = useState21([]);
+  const [pagesWithTiles, setPagesWithTiles] = useState20([]);
   useEffect9(() => {
     if (width === 0 || height === 0) {
       return;
@@ -3848,28 +3514,33 @@ var useTileLayout = ({
         }
         return rowElements;
       });
+      const gap = edgeToEdge && isMobile ? 0 : 8;
       const maxHeight = height - (maxRows - 1) * gap;
       const maxRowHeight = maxHeight / matrix.length;
       const aspectRatios = isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3) ? aspectRatioConfig.mobile : aspectRatioConfig.default;
       for (const row of matrix) {
         let tileWidth = (width - (row.length - 1) * gap) / row.length;
         let tileHeight = 0;
-        const calcHeights = aspectRatios.map((aR) => tileWidth / aR);
-        for (const h of calcHeights) {
-          if (h < maxRowHeight) {
-            if (tileHeight < h) {
-              tileHeight = h;
+        if (edgeToEdge) {
+          tileHeight = maxRowHeight;
+        } else {
+          const calcHeights = aspectRatios.map((aR) => tileWidth / aR);
+          for (const h of calcHeights) {
+            if (h < maxRowHeight) {
+              if (tileHeight < h) {
+                tileHeight = h;
+              }
             }
           }
-        }
-        if (tileHeight === 0) {
-          tileHeight = maxRowHeight;
-          const calcWidths = aspectRatios.map((aR) => tileHeight * aR);
-          tileWidth = 0;
-          for (const w of calcWidths) {
-            if (w < width) {
-              if (tileWidth < w) {
-                tileWidth = w;
+          if (tileHeight === 0) {
+            tileHeight = maxRowHeight;
+            const calcWidths = aspectRatios.map((aR) => tileHeight * aR);
+            tileWidth = 0;
+            for (const w of calcWidths) {
+              if (w < width) {
+                if (tileWidth < w) {
+                  tileWidth = w;
+                }
               }
             }
           }
@@ -3881,14 +3552,14 @@ var useTileLayout = ({
       }
     }
     setPagesWithTiles([...pageList]);
-  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile]);
+  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile, edgeToEdge]);
   return { pagesWithTiles, ref };
 };
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize }) {
+function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore20(selectLocalPeer3);
+  const localPeer = useHMSStore19(selectLocalPeer3);
   const isMobile = useMedia8(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
@@ -3906,16 +3577,17 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
   });
   const { ref, pagesWithTiles } = useTileLayout({
     pageList,
-    maxTileCount
+    maxTileCount,
+    edgeToEdge
   });
-  const [page, setPage] = useState22(0);
+  const [page, setPage] = useState21(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect10(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React42.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React42.createElement(Grid, { tiles: pagesWithTiles[page], ref }), /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React42.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React42.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React42.createElement(
     Pagination,
     {
       page,
@@ -3929,44 +3601,69 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 }
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
-import React45, { useEffect as useEffect12, useState as useState24 } from "react";
-import { selectLocalPeer as selectLocalPeer4, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
+import React45, { useEffect as useEffect12, useState as useState23 } from "react";
+import { selectLocalPeer as selectLocalPeer4, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-import React44, { useEffect as useEffect11, useState as useState23 } from "react";
+import React44, { useEffect as useEffect11, useState as useState22 } from "react";
 import { useMedia as useMedia9 } from "react-use";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
 import React43 from "react";
-var Root = ({ children }) => /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$6" } }, children);
+var Root = ({ children, edgeToEdge }) => /* @__PURE__ */ React43.createElement(
+  Flex,
+  {
+    direction: "column",
+    css: { h: "100%", flex: "1 1 0", minWidth: 0, gap: "$6", "@md": { gap: edgeToEdge ? 0 : "$6" } }
+  },
+  children
+);
 var ProminentSection = ({ children, css = {} }) => {
   return /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
 };
-var SecondarySection = ({ tiles, children }) => {
+var SecondarySection = ({
+  tiles,
+  children,
+  edgeToEdge
+}) => {
   const tileLayoutProps = useVideoTileContext();
-  return /* @__PURE__ */ React43.createElement(Flex, { direction: "column", css: { flexBasis: (tiles == null ? void 0 : tiles.length) > 0 ? 154 : 0, minHeight: 0, gap: "$2" } }, /* @__PURE__ */ React43.createElement(Flex, { justify: "center", align: "center", css: { gap: "$4", minHeight: 0, margin: "0 auto" } }, tiles == null ? void 0 : tiles.map((tile) => {
-    var _a, _b, _c, _d;
-    return /* @__PURE__ */ React43.createElement(
-      VideoTile_default,
-      __spreadValues({
-        key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
-        height: "100%",
-        peerId: (_c = tile.peer) == null ? void 0 : _c.id,
-        trackId: (_d = tile.track) == null ? void 0 : _d.id,
-        rootCSS: {
-          padding: 0,
-          flex: "1 1 0",
-          maxWidth: "max-content"
-        },
-        containerCSS: {
-          width: "unset",
-          aspectRatio: 16 / 9,
-          "@md": { aspectRatio: 1 }
-        },
-        objectFit: "contain"
-      }, tileLayoutProps)
-    );
-  })), children);
+  if (!(tiles == null ? void 0 : tiles.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ React43.createElement(
+    Box,
+    {
+      css: {
+        display: "grid",
+        gridTemplateRows: React43.Children.count(children) > 0 ? "136px auto" : "154px",
+        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
+        margin: "0 auto",
+        gap: "$2 $4",
+        placeItems: "center",
+        "@md": { gap: edgeToEdge ? 0 : "$4" }
+      }
+    },
+    tiles.map((tile) => {
+      var _a, _b, _c, _d;
+      return /* @__PURE__ */ React43.createElement(
+        VideoTile_default,
+        __spreadValues({
+          key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
+          peerId: (_c = tile.peer) == null ? void 0 : _c.id,
+          trackId: (_d = tile.track) == null ? void 0 : _d.id,
+          rootCSS: {
+            padding: 0,
+            maxWidth: 240,
+            maxHeight: "100%",
+            aspectRatio: 16 / 9,
+            "@md": { aspectRatio: 1 }
+          },
+          objectFit: "contain"
+        }, tileLayoutProps)
+      );
+    }),
+    /* @__PURE__ */ React43.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
+  );
 };
 var ProminenceLayout = {
   Root,
@@ -3975,19 +3672,19 @@ var ProminenceLayout = {
 };
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-var SecondaryTiles = ({ peers, onPageChange, onPageSize }) => {
+var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
   const isMobile = useMedia9(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
-  const [page, setPage] = useState23(0);
+  const [page, setPage] = useState22(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect11(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React44.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page] }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React44.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ React44.createElement(
     Pagination,
     {
       page,
@@ -4010,7 +3707,7 @@ var useRoleProminencePeers = (prominentRoles, peers, isInsetEnabled) => {
         if (pinnedTrack) {
           if (pinnedTrack.peerId === peer.id) {
             acc[0].push(peer);
-          } else {
+          } else if (!(isInsetEnabled && peer.isLocal)) {
             acc[1].push(peer);
           }
           return acc;
@@ -4040,11 +3737,12 @@ function RoleProminence({
   prominentRoles = [],
   peers,
   onPageChange,
-  onPageSize
+  onPageSize,
+  edgeToEdge
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore21(selectLocalPeer4);
+  const localPeer = useHMSStore20(selectLocalPeer4);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -4054,14 +3752,14 @@ function RoleProminence({
     pageList,
     maxTileCount
   });
-  const [page, setPage] = useState24(0);
+  const [page, setPage] = useState23(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect12(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React45.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React45.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React45.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React45.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React45.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React45.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React45.createElement(
     Pagination,
     {
       page,
@@ -4071,15 +3769,16 @@ function RoleProminence({
       },
       numPages: pagesWithTiles.length
     }
-  ), /* @__PURE__ */ React45.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React45.createElement(InsetTile, null));
+  ), /* @__PURE__ */ React45.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React45.createElement(InsetTile, null));
 }
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-import React48, { useEffect as useEffect13, useMemo as useMemo5, useState as useState26 } from "react";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore23 } from "@100mslive/react-sdk";
+import React48, { useEffect as useEffect13, useMemo as useMemo5, useState as useState25 } from "react";
+import { useMedia as useMedia10 } from "react-use";
+import { selectPeersScreenSharing, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-import React47, { useRef as useRef8, useState as useState25 } from "react";
+import React47, { useRef as useRef7, useState as useState24 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
@@ -4087,16 +3786,16 @@ import {
   selectPeerByID as selectPeerByID2,
   selectScreenShareAudioByPeerID,
   selectScreenShareByPeerID,
-  useHMSStore as useHMSStore22
+  useHMSStore as useHMSStore21
 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon3, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
 import React46 from "react";
-import { useHMSActions as useHMSActions12 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon6, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
+import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon5, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions12();
+  const hmsActions = useHMSActions13();
   return /* @__PURE__ */ React46.createElement(
     Flex,
     {
@@ -4121,7 +3820,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React46.createElement(CrossIcon6, { width: 18, height: 18 }),
+      /* @__PURE__ */ React46.createElement(CrossIcon5, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -4134,79 +3833,90 @@ var labelStyles = {
   textAlign: "center",
   c: "$on_surface_high",
   transform: "none",
-  mt: "$2",
   flexShrink: 0
 };
 var Tile = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore22(selectLocalPeerID5) === peerId;
-  const track = useHMSStore22(selectScreenShareByPeerID(peerId));
-  const peer = useHMSStore22(selectPeerByID2(peerId));
+  const isLocal = useHMSStore21(selectLocalPeerID5) === peerId;
+  const track = useHMSStore21(selectScreenShareByPeerID(peerId));
+  const peer = useHMSStore21(selectPeerByID2(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const isHeadless = useIsHeadless();
-  const [isMouseHovered, setIsMouseHovered] = useState25(false);
+  const [isMouseHovered, setIsMouseHovered] = useState24(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const label = getVideoTileLabel({
     peerName: peer.name,
     isLocal: false,
     track
   });
-  const fullscreenRef = useRef8(null);
-  const [fullscreen, setFullscreen] = useState25(false);
+  const fullscreenRef = useRef7(null);
+  const [fullscreen, setFullscreen] = useState24(false);
   const isFullscreen = useFullscreen2(fullscreenRef, fullscreen, {
     onClose: () => setFullscreen(false)
   });
   const isFullScreenSupported = screenfull2.isEnabled;
-  const audioTrack = useHMSStore22(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
+  const audioTrack = useHMSStore21(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
     return /* @__PURE__ */ React47.createElement(ScreenshareDisplay, null);
   }
   if (!peer) {
     return null;
   }
-  return /* @__PURE__ */ React47.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, mb: "$4", minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React47.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ React47.createElement(
     StyledVideoTile.Container,
     {
       transparentBg: true,
       ref: fullscreenRef,
-      css: { flexDirection: "column" },
+      css: { flexDirection: "column", gap: "$2" },
       onMouseEnter: () => setIsMouseHovered(true),
       onMouseLeave: () => {
         setIsMouseHovered(false);
       }
     },
     showStatsOnTiles ? /* @__PURE__ */ React47.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-    isFullScreenSupported && !isHeadless ? /* @__PURE__ */ React47.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React47.createElement(ShrinkIcon, null) : /* @__PURE__ */ React47.createElement(ExpandIcon3, null)) : null,
+    isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ React47.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React47.createElement(ShrinkIcon, null) : /* @__PURE__ */ React47.createElement(ExpandIcon3, null)) : null,
     track ? /* @__PURE__ */ React47.createElement(
       Video,
       {
         screenShare: true,
         mirror: peer.isLocal && (track == null ? void 0 : track.source) === "regular",
         attach: !isAudioOnly,
-        trackId: track.id
+        trackId: track.id,
+        css: { minHeight: 0 }
       }
     ) : null,
     /* @__PURE__ */ React47.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !isHeadless && !(peer == null ? void 0 : peer.isLocal) ? /* @__PURE__ */ React47.createElement(TileMenu_default, { isScreenshare: true, peerID: peer == null ? void 0 : peer.id, audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id }) : null
+    isMouseHovered && !(peer == null ? void 0 : peer.isLocal) ? /* @__PURE__ */ React47.createElement(TileMenu_default, { isScreenshare: true, peerID: peer == null ? void 0 : peer.id, audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id }) : null
   ));
 };
 var ScreenshareTile = React47.memo(Tile);
 var ScreenshareTile_default = ScreenshareTile;
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-var ScreenshareLayout = ({ peers, onPageChange, onPageSize }) => {
+var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const peersSharing = useHMSStore23(selectPeersScreenSharing);
+  const peersSharing = useHMSStore22(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState26(0);
-  const activeSharePeerId = (_a = peersSharing[page]) == null ? void 0 : _a.id;
-  const secondaryPeers = useMemo5(() => peers.filter((p) => p.id !== activeSharePeerId), [activeSharePeerId, peers]);
+  const [page, setPage] = useState25(0);
+  const activeSharePeer = peersSharing[page];
+  const isMobile = useMedia10(config.media.md);
+  const secondaryPeers = useMemo5(
+    () => isMobile ? activeSharePeer ? [activeSharePeer, ...peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id))] : peers : peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id)),
+    [activeSharePeer, peers, isMobile]
+  );
   useEffect13(() => {
-    setActiveScreenSharePeer(activeSharePeerId);
+    setActiveScreenSharePeer(isMobile ? "" : activeSharePeer == null ? void 0 : activeSharePeer.id);
     return () => {
       setActiveScreenSharePeer("");
     };
-  }, [activeSharePeerId, setActiveScreenSharePeer]);
-  return /* @__PURE__ */ React48.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React48.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React48.createElement(ScreenshareTile_default, { peerId: peersSharing[page].id }), /* @__PURE__ */ React48.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React48.createElement(SecondaryTiles, { peers: secondaryPeers, onPageChange, onPageSize }));
+  }, [activeSharePeer == null ? void 0 : activeSharePeer.id, isMobile, setActiveScreenSharePeer]);
+  return /* @__PURE__ */ React48.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ React48.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React48.createElement(ScreenshareTile_default, { peerId: (_a = peersSharing[page]) == null ? void 0 : _a.id }), !edgeToEdge && /* @__PURE__ */ React48.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ React48.createElement(
+    SecondaryTiles,
+    {
+      peers: secondaryPeers,
+      onPageChange,
+      onPageSize,
+      edgeToEdge
+    }
+  ));
 };
 
 // src/Prebuilt/common/PeersSorter.ts
@@ -4255,7 +3965,7 @@ var PeersSorter = class {
       }
       this.lruPeers.delete(speaker.id);
       const lruPeerArray = Array.from(this.lruPeers);
-      while (lruPeerArray.length >= this.tilesPerPage) {
+      while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) {
         lruPeerArray.pop();
       }
       this.lruPeers = /* @__PURE__ */ new Set([speaker.id, ...lruPeerArray]);
@@ -4299,22 +4009,33 @@ var GridLayout = ({
   hide_participant_name_on_tile = false,
   rounded_video_tile = true,
   hide_audio_mute_on_tile = false,
-  video_object_fit = "contain"
+  video_object_fit = "contain",
+  edge_to_edge = false,
+  hide_metadata_on_tile = false
 }) => {
-  const peerSharing = useHMSStore24(selectPeerScreenSharing);
+  const peerSharing = useHMSStore23(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
-  const isRoleProminence = prominentRoles.length > 0 || pinnedTrack;
-  const peers = useHMSStore24(isInsetEnabled && !isRoleProminence && !peerSharing ? selectRemotePeers2 : selectPeers3);
+  const peers = useHMSStore23(selectPeers2);
+  const isRoleProminence = prominentRoles.length && peers.some(
+    (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
+  ) || pinnedTrack;
+  const updatedPeers = useMemo6(() => {
+    if (isInsetEnabled && !isRoleProminence && !peerSharing) {
+      return peers.filter((peer) => !peer.isLocal);
+    }
+    return peers;
+  }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
   const vanillaStore = useHMSVanillaStore4();
-  const [sortedPeers, setSortedPeers] = useState27(peers);
+  const [sortedPeers, setSortedPeers] = useState26(updatedPeers);
   const peersSorter = useMemo6(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState27(0);
-  const [mainPage, setMainPage] = useState27(0);
+  const [pageSize, setPageSize] = useState26(0);
+  const [mainPage, setMainPage] = useState26(0);
   const tileLayout = {
     enableSpotlightingPeer: enable_spotlighting_peer,
     hideParticipantNameOnTile: hide_participant_name_on_tile,
     roundedVideoTile: rounded_video_tile,
     hideAudioMuteOnTile: hide_audio_mute_on_tile,
+    hideMetadataOnTile: hide_metadata_on_tile,
     objectFit: video_object_fit
   };
   useEffect14(() => {
@@ -4322,13 +4043,21 @@ var GridLayout = ({
       return;
     }
     peersSorter.setPeersAndTilesPerPage({
-      peers,
+      peers: updatedPeers,
       tilesPerPage: pageSize
     });
     peersSorter.onUpdate(setSortedPeers);
-  }, [mainPage, peersSorter, peers, pageSize]);
+  }, [mainPage, peersSorter, updatedPeers, pageSize]);
   if (peerSharing) {
-    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(ScreenshareLayout, { peers: sortedPeers, onPageSize: setPageSize, onPageChange: setMainPage }));
+    return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
+      ScreenshareLayout,
+      {
+        peers: sortedPeers,
+        onPageSize: setPageSize,
+        onPageChange: setMainPage,
+        edgeToEdge: edge_to_edge
+      }
+    ));
   } else if (isRoleProminence) {
     return /* @__PURE__ */ React49.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React49.createElement(
       RoleProminence,
@@ -4337,7 +4066,8 @@ var GridLayout = ({
         onPageSize: setPageSize,
         onPageChange: setMainPage,
         prominentRoles,
-        isInsetEnabled
+        isInsetEnabled,
+        edgeToEdge: edge_to_edge
       }
     ));
   }
@@ -4347,42 +4077,32 @@ var GridLayout = ({
       peers: sortedPeers,
       onPageSize: setPageSize,
       onPageChange: setMainPage,
-      isInsetEnabled
+      isInsetEnabled,
+      edgeToEdge: edge_to_edge
     }
   ));
 };
 
 // src/Prebuilt/layouts/EmbedView.jsx
-import React50, { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef9, useState as useState28 } from "react";
+import React50, { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef8, useState as useState27 } from "react";
 import {
-  selectLocalPeerID as selectLocalPeerID6,
-  selectLocalPeerRoleName,
-  selectPeers as selectPeers4,
+  selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   throwErrorHandler,
-  useHMSStore as useHMSStore25,
+  useHMSStore as useHMSStore24,
   useScreenShare as useScreenShare3
 } from "@100mslive/react-sdk";
 var EmbedView = () => {
   return /* @__PURE__ */ React50.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React50.createElement(EmbedComponent, null));
 };
 var EmbebScreenShareView = ({ children }) => {
-  var _a;
-  const peers = useHMSStore25(selectPeers4);
-  const localPeerID = useHMSStore25(selectLocalPeerID6);
-  const localPeerRole = useHMSStore25(selectLocalPeerRoleName);
-  const peerPresenting = useHMSStore25(selectPeerScreenSharing2);
-  const isPresenterFromMyRole = ((_a = peerPresenting == null ? void 0 : peerPresenting.roleName) == null ? void 0 : _a.toLowerCase()) === (localPeerRole == null ? void 0 : localPeerRole.toLowerCase());
-  const amIPresenting = localPeerID === (peerPresenting == null ? void 0 : peerPresenting.id);
-  const showPresenterInSmallTile = amIPresenting || isPresenterFromMyRole;
+  const peers = useHMSStore24(selectPeers3);
+  const peerPresenting = useHMSStore24(selectPeerScreenSharing2);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const smallTilePeers = useMemo7(() => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
-    if (showPresenterInSmallTile && peerPresenting) {
-      smallTilePeers2.unshift(peerPresenting);
-    }
     return smallTilePeers2;
-  }, [peers, peerPresenting, showPresenterInSmallTile]);
+  }, [peers, peerPresenting]);
   useEffect15(() => {
     setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
     return () => {
@@ -4394,11 +4114,11 @@ var EmbebScreenShareView = ({ children }) => {
 var EmbedComponent = () => {
   const { amIScreenSharing, toggleScreenShare } = useScreenShare3(throwErrorHandler);
   const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState28(false);
-  const screenShareAttemptInProgress = useRef9(false);
+  const [wasScreenShared, setWasScreenShared] = useState27(false);
+  const screenShareAttemptInProgress = useRef8(false);
   const src = embedConfig.url;
-  const iframeRef = useRef9();
-  const resetEmbedConfig = useCallback9(() => {
+  const iframeRef = useRef8();
+  const resetEmbedConfig = useCallback8(() => {
     if (src) {
       setEmbedConfig({ url: "" });
     }
@@ -4440,25 +4160,25 @@ var EmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
-import React51, { useCallback as useCallback10, useEffect as useEffect16, useRef as useRef10, useState as useState29 } from "react";
+import React51, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState28 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 var PDFView = () => {
   return /* @__PURE__ */ React51.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React51.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
-  const ref = useRef10();
+  const ref = useRef9();
   const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState29(false);
+  const [isPDFLoaded, setIsPDFLoaded] = useState28(false);
   let pdfJSURL = define_process_env_default.REACT_APP_PDFJS_IFRAME_URL;
   const { amIScreenSharing, toggleScreenShare } = useScreenShare4(throwErrorHandler2);
   const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
   if (pdfConfig.url && !pdfConfig.file) {
     pdfJSURL = pdfJSURL + "?file=" + encodeURIComponent(pdfConfig.url);
   }
-  const [wasScreenShared, setWasScreenShared] = useState29(false);
-  const screenShareAttemptInProgress = useRef10(false);
-  const iframeRef = useRef10();
-  const resetEmbedConfig = useCallback10(() => {
+  const [wasScreenShared, setWasScreenShared] = useState28(false);
+  const screenShareAttemptInProgress = useRef9(false);
+  const iframeRef = useRef9();
+  const resetEmbedConfig = useCallback9(() => {
     setPDFConfig({ state: false });
   }, [setPDFConfig]);
   useEffect16(() => {
@@ -4529,61 +4249,66 @@ var PDFEmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
-import React57 from "react";
-import { useMedia as useMedia13 } from "react-use";
+import React58 from "react";
+import { useMedia as useMedia14 } from "react-use";
 import { selectAppData as selectAppData3, selectVideoTrackByPeerID, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
 
+// src/Prebuilt/components/SidePaneTabs.tsx
+import React55, { useEffect as useEffect21, useState as useState32 } from "react";
+import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore30 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
+
 // src/Prebuilt/components/Chat/Chat.jsx
-import React54, { useCallback as useCallback15, useEffect as useEffect20, useRef as useRef14, useState as useState32 } from "react";
-import { useMedia as useMedia12 } from "react-use";
+import React54, { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef13, useState as useState31 } from "react";
+import { useMedia as useMedia13 } from "react-use";
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
   selectPeerNameByID as selectPeerNameByID3,
-  selectPermissions as selectPermissions9,
+  selectPermissions as selectPermissions10,
   selectSessionStore,
-  useHMSActions as useHMSActions17,
+  useHMSActions as useHMSActions18,
   useHMSNotifications,
-  useHMSStore as useHMSStore30
+  useHMSStore as useHMSStore29
 } from "@100mslive/react-sdk";
-import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon7, PinIcon as PinIcon2 } from "@100mslive/react-icons";
+import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon6, PinIcon as PinIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.jsx
-import React52, { Fragment as Fragment8, useCallback as useCallback12, useEffect as useEffect17, useLayoutEffect, useMemo as useMemo8, useRef as useRef11, useState as useState30 } from "react";
+import React52, { Fragment as Fragment8, useCallback as useCallback11, useEffect as useEffect17, useLayoutEffect, useMemo as useMemo8, useRef as useRef10, useState as useState29 } from "react";
 import { useInView } from "react-intersection-observer";
-import { useMedia as useMedia10 } from "react-use";
+import { useMedia as useMedia11 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
   selectHMSMessages,
-  selectLocalPeerID as selectLocalPeerID7,
-  selectLocalPeerRoleName as selectLocalPeerRoleName2,
+  selectLocalPeerID as selectLocalPeerID6,
+  selectLocalPeerRoleName,
   selectMessagesByPeerID,
   selectMessagesByRole,
   selectPeerNameByID as selectPeerNameByID2,
-  selectPermissions as selectPermissions8,
-  useHMSActions as useHMSActions14,
-  useHMSStore as useHMSStore27
+  selectPermissions as selectPermissions9,
+  useHMSActions as useHMSActions15,
+  useHMSStore as useHMSStore26
 } from "@100mslive/react-sdk";
-import { CopyIcon, PinIcon, VerticalMenuIcon as VerticalMenuIcon4 } from "@100mslive/react-icons";
+import { PinIcon, VerticalMenuIcon as VerticalMenuIcon5 } 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 useCallback11 } from "react";
+import { useCallback as useCallback10 } from "react";
 import {
   selectPeerNameByID,
   selectSessionMetadata,
-  useHMSActions as useHMSActions13,
-  useHMSStore as useHMSStore26,
+  useHMSActions as useHMSActions14,
+  useHMSStore as useHMSStore25,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
-  const hmsActions = useHMSActions13();
+  const hmsActions = useHMSActions14();
   const vanillaStore = useHMSVanillaStore5();
-  const pinnedMessage = useHMSStore26(selectSessionMetadata);
-  const setPinnedMessage = useCallback11(
+  const pinnedMessage = useHMSStore25(selectSessionMetadata);
+  const setPinnedMessage = useCallback10(
     /**
      * @param {import("@100mslive/react-sdk").HMSMessage | undefined} message
      */
@@ -4634,8 +4359,8 @@ var MessageTypeContainer = ({ left, right }) => {
   );
 };
 var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-  const peerName = useHMSStore27(selectPeerNameByID2(receiver));
-  const localPeerRoleName = useHMSStore27(selectLocalPeerRoleName2);
+  const peerName = useHMSStore26(selectPeerNameByID2(receiver));
+  const localPeerRoleName = useHMSStore26(selectLocalPeerRoleName);
   if (receiver) {
     return /* @__PURE__ */ React52.createElement(
       MessageTypeContainer,
@@ -4672,42 +4397,19 @@ var getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? "private" : "";
 };
-var ChatActions = ({ onPin, showPinAction, messageContent }) => {
-  const [open, setOpen] = useState30(false);
-  const isMobile = useMedia10(config.media.md);
-  if (!isMobile && !showPinAction) {
+var ChatActions = ({ onPin, showPinAction }) => {
+  const [open, setOpen] = useState29(false);
+  if (!showPinAction) {
     return null;
   }
-  return /* @__PURE__ */ React52.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React52.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React52.createElement(IconButton, null, /* @__PURE__ */ React52.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React52.createElement(VerticalMenuIcon4, null)))), /* @__PURE__ */ React52.createElement(Dropdown.Portal, null, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React52.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React52.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ React52.createElement(IconButton, null, /* @__PURE__ */ React52.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React52.createElement(VerticalMenuIcon5, null)))), /* @__PURE__ */ React52.createElement(Dropdown.Portal, null, /* @__PURE__ */ React52.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: "end",
       css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
     },
-    /* @__PURE__ */ React52.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React52.createElement(PinIcon, null), /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message")),
-    isMobile && showPinAction ? /* @__PURE__ */ React52.createElement(Dropdown.ItemSeparator, { css: { my: 0 } }) : null,
-    isMobile ? /* @__PURE__ */ React52.createElement(
-      Dropdown.Item,
-      {
-        "data-testid": "copy_message_btn",
-        onClick: () => {
-          try {
-            navigator == null ? void 0 : navigator.clipboard.writeText(messageContent);
-            ToastManager.addToast({
-              title: "Message copied successfully"
-            });
-          } catch (e) {
-            console.log(e);
-            ToastManager.addToast({
-              title: "Could not copy message"
-            });
-          }
-        }
-      },
-      /* @__PURE__ */ React52.createElement(CopyIcon, null),
-      /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Copy Message")
-    ) : null
+    /* @__PURE__ */ React52.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React52.createElement(PinIcon, null), /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
   )));
 };
 var SenderName = styled(Text, {
@@ -4720,22 +4422,25 @@ var SenderName = styled(Text, {
   fontWeight: "$semiBold"
 });
 var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
+  var _a, _b;
   const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-  const rowRef = useRef11(null);
+  const rowRef = useRef10(null);
   useEffect17(() => {
     if (rowRef.current) {
       setRowHeight(index, rowRef.current.clientHeight);
     }
   }, [index, setRowHeight]);
-  const isMobile = useMedia10(config.media.md);
-  const hmsActions = useHMSActions14();
-  const localPeerId = useHMSStore27(selectLocalPeerID7);
-  const permissions = useHMSStore27(selectPermissions8);
+  const isMobile = useMedia11(config.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
+  const hmsActions = useHMSActions15();
+  const localPeerId = useHMSStore26(selectLocalPeerID6);
+  const permissions = useHMSStore26(selectPermissions9);
   const messageType = getMessageType({
     roles: message.recipientRoles,
     receiver: message.recipientPeer
   });
-  const showPinAction = permissions.removeOthers && !messageType;
+  const showPinAction = permissions.removeOthers && !messageType && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.allow_pinning_messages);
   useEffect17(() => {
     if (message.id && !message.read && inView) {
       hmsActions.setMessageRead(true, message.id);
@@ -4757,7 +4462,7 @@ var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPi
         css: {
           flexWrap: "wrap",
           // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? isMobile ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
+          bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
           r: messageType ? "$1" : void 0,
           px: messageType ? "$4" : "$2",
           py: messageType ? "$4" : 0,
@@ -4770,7 +4475,7 @@ var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPi
         Text,
         {
           css: {
-            color: "$on_surface_high",
+            color: isOverlay ? "#FFF" : "$on_surface_high",
             fontWeight: "$semiBold",
             display: "inline-flex",
             alignItems: "center",
@@ -4779,14 +4484,14 @@ var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPi
           },
           as: "div"
         },
-        /* @__PURE__ */ React52.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm" }, message.senderName || "Anonymous") : /* @__PURE__ */ React52.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm" }, message.senderName)), !isMobile ? /* @__PURE__ */ React52.createElement(
+        /* @__PURE__ */ React52.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React52.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React52.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ React52.createElement(
           Text,
           {
             as: "span",
             variant: "xs",
             css: {
               ml: "$4",
-              color: "$on_primary_medium",
+              color: "$on_surface_medium",
               flexShrink: 0
             }
           },
@@ -4800,18 +4505,19 @@ var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPi
             roles: message.recipientRoles
           }
         ),
-        !isMobile ? /* @__PURE__ */ React52.createElement(ChatActions, { onPin, showPinAction, messageContent: message.message }) : null
+        !isOverlay ? /* @__PURE__ */ React52.createElement(ChatActions, { onPin, showPinAction }) : null
       ),
       /* @__PURE__ */ React52.createElement(
         Text,
         {
-          variant: "body2",
+          variant: "sm",
           css: {
             w: "100%",
             mt: "$2",
             wordBreak: "break-word",
             whiteSpace: "pre-wrap",
-            userSelect: "all"
+            userSelect: "all",
+            color: isOverlay ? "#FFF" : "$on_surface_high"
           },
           onClick: (e) => e.stopPropagation()
         },
@@ -4855,11 +4561,11 @@ var ChatList = React52.forwardRef(
   }
 );
 var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom }, listRef) => {
-  const rowHeights = useRef11({});
+  const rowHeights = useRef10({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
   }
-  const setRowHeight = useCallback12(
+  const setRowHeight = useCallback11(
     (index, size) => {
       listRef.current.resetAfterIndex(0);
       rowHeights.current = __spreadProps(__spreadValues({}, rowHeights.current), { [index]: size });
@@ -4898,11 +4604,13 @@ var VirtualizedChatMessages = React52.forwardRef(({ messages, scrollToBottom },
   );
 });
 var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+  var _a;
   const storeMessageSelector = role ? selectMessagesByRole(role) : peerId ? selectMessagesByPeerID(peerId) : selectHMSMessages;
-  let messages = useHMSStore27(storeMessageSelector);
+  let messages = useHMSStore26(storeMessageSelector);
   messages = useMemo8(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
-  const isMobile = useMedia10(config.media.md);
-  if (messages.length === 0 && !isMobile) {
+  const isMobile = useMedia11(config.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
+  if (messages.length === 0 && !(isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay))) {
     return /* @__PURE__ */ React52.createElement(
       Flex,
       {
@@ -4928,24 +4636,24 @@ var ChatBody = React52.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
   return /* @__PURE__ */ React52.createElement(Fragment8, null, /* @__PURE__ */ React52.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
 });
 
-// src/Prebuilt/components/Chat/ChatFooter.jsx
-import React53, { useCallback as useCallback14, useEffect as useEffect19, useRef as useRef13, useState as useState31 } from "react";
-import { useMedia as useMedia11 } from "react-use";
+// src/Prebuilt/components/Chat/ChatFooter.tsx
+import React53, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef12, useState as useState30 } from "react";
+import { useMedia as useMedia12 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { useHMSActions as useHMSActions16 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions17 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, SendIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AppData/useChatState.js
-import { useCallback as useCallback13 } from "react";
-import { selectAppData as selectAppData2, useHMSActions as useHMSActions15, useHMSStore as useHMSStore28 } from "@100mslive/react-sdk";
+import { useCallback as useCallback12 } from "react";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions16, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions15();
-  let chatDraftMessage = useHMSStore28(selectAppData2(APP_DATA.chatDraft));
+  const hmsActions = useHMSActions16();
+  let chatDraftMessage = useHMSStore27(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
-  const setDraftMessage = useCallback13(
+  const setDraftMessage = useCallback12(
     (message) => {
       hmsActions.setAppData(APP_DATA.chatDraft, message, true);
     },
@@ -4955,9 +4663,9 @@ var useChatDraftMessage = () => {
 };
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-import { useEffect as useEffect18, useRef as useRef12 } from "react";
+import { useEffect as useEffect18, useRef as useRef11 } from "react";
 var useEmojiPickerStyles = (showing) => {
-  const ref = useRef12(null);
+  const ref = useRef11(null);
   useEffect18(() => {
     if (showing) {
       setTimeout(() => {
@@ -4966,16 +4674,17 @@ var useEmojiPickerStyles = (showing) => {
         const style = document.createElement("style");
         style.textContent = `
           #root {
-            --em-rgb-color: var(--hms-ui-colors-on_primary_high);
+            --em-rgb-color: var(--hms-ui-colors-on_surface_high);
             --em-rgb-input: var(--hms-ui-colors-on_primary_high);
-            --em-color-border: var(--hms-ui-colors-surface_default);
-            --color-b: var(--hms-ui-colors-on_primary_high);
+            --em-color-border: var(--hms-ui-colors-surface_bright);
+            --color-b: var(--hms-ui-colors-on_surface_high);
             --rgb-background: transparent;
-            color: var(--hms-ui-colors-on_primary_high);
+            color: var(--hms-ui-colors-on_surface_high);
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
             background-color: var(--hms-ui-colors-surface_bright);
+            margin-top: 0.5rem;
           }
         `;
         root == null ? void 0 : root.appendChild(style);
@@ -4985,7 +4694,7 @@ var useEmojiPickerStyles = (showing) => {
   return ref;
 };
 
-// src/Prebuilt/components/Chat/ChatFooter.jsx
+// src/Prebuilt/components/Chat/ChatFooter.tsx
 var TextArea = styled("textarea", {
   width: "100%",
   bg: "transparent",
@@ -5004,7 +4713,7 @@ var TextArea = styled("textarea", {
   }
 });
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState31(false);
+  const [showEmoji, setShowEmoji] = useState30(false);
   const ref = useEmojiPickerStyles(showEmoji);
   return /* @__PURE__ */ React53.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React53.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React53.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React53.createElement(EmojiIcon3, null))), /* @__PURE__ */ React53.createElement(Popover.Portal, null, /* @__PURE__ */ React53.createElement(
     Popover.Content,
@@ -5034,14 +4743,17 @@ var ChatFooter = ({
   peerId,
   onSend,
   children
-  /* onSelect, selection, screenType */
 }) => {
-  const hmsActions = useHMSActions16();
-  const inputRef = useRef13(null);
+  var _a;
+  const hmsActions = useHMSActions17();
+  const inputRef = useRef12(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia11(config.media.md);
-  const sendMessage = useCallback14(() => __async(void 0, null, function* () {
-    const message = inputRef.current.value;
+  const isMobile = useMedia12(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* () {
+    var _a2;
+    const message = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value;
     if (!message || !message.trim().length) {
       return;
     }
@@ -5058,7 +4770,8 @@ var ChatFooter = ({
         onSend();
       }, 0);
     } catch (error) {
-      ToastManager.addToast({ title: error.message });
+      const err = error;
+      ToastManager.addToast({ title: err.message });
     }
   }), [role, peerId, hmsActions, onSend]);
   useEffect19(() => {
@@ -5078,7 +4791,7 @@ var ChatFooter = ({
     {
       align: "center",
       css: {
-        bg: isMobile ? "$surface_dim" : "$surface_default",
+        bg: isOverlayChat && isMobile ? "$surface_dim" : "$surface_default",
         minHeight: "$16",
         maxHeight: "$24",
         position: "relative",
@@ -5097,9 +4810,15 @@ var ChatFooter = ({
     /* @__PURE__ */ React53.createElement(
       TextArea,
       {
+        css: {
+          c: "$on_surface_high",
+          "&:valid ~ .send-msg": { color: "$on_surface_high" },
+          "& ~ .send-msg": { color: "$on_surface_low" }
+        },
         placeholder: "Send a message....",
         ref: inputRef,
-        autoFocus: true,
+        required: true,
+        autoFocus: !isMobile,
         onKeyPress: (event) => __async(void 0, null, function* () {
           if (event.key === "Enter") {
             if (!event.shiftKey) {
@@ -5119,20 +4838,22 @@ var ChatFooter = ({
       EmojiPicker,
       {
         onSelect: (emoji) => {
-          inputRef.current.value += ` ${emoji.native} `;
+          if (inputRef.current) {
+            inputRef.current.value += ` ${emoji.native} `;
+          }
         }
       }
     ) : null,
     /* @__PURE__ */ React53.createElement(
       IconButton,
       {
+        className: "send-msg",
         onClick: sendMessage,
         css: {
           ml: "auto",
           height: "max-content",
           mr: "$4",
-          color: "$on_surface_low",
-          "&:hover": { c: "$on_surface_high" }
+          "&:hover": { c: isMobile ? "" : "$on_surface_medium" }
         },
         "data-testid": "send_msg_btn"
       },
@@ -5146,19 +4867,19 @@ import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore29
+  useHMSStore as useHMSStore28
 } from "@100mslive/react-sdk";
 var useUnreadCount = ({ role, peerId }) => {
   const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
-  const unreadCount = useHMSStore29(unreadCountSelector);
+  const unreadCount = useHMSStore28(unreadCountSelector);
   return unreadCount;
 };
 
 // src/Prebuilt/components/Chat/Chat.jsx
 var PINNED_MESSAGE_LENGTH = 80;
 var PinnedMessage = ({ clearPinnedMessage }) => {
-  const permissions = useHMSStore30(selectPermissions9);
-  const pinnedMessage = useHMSStore30(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
+  const permissions = useHMSStore29(selectPermissions10);
+  const pinnedMessage = useHMSStore29(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
   const formattedPinnedMessage = (pinnedMessage == null ? void 0 : pinnedMessage.length) && pinnedMessage.length > PINNED_MESSAGE_LENGTH ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...` : pinnedMessage;
   return pinnedMessage ? /* @__PURE__ */ React54.createElement(
     Flex,
@@ -5187,23 +4908,24 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
         onClick: () => clearPinnedMessage(),
         css: { cursor: "pointer", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
       },
-      /* @__PURE__ */ React54.createElement(CrossIcon7, null)
+      /* @__PURE__ */ React54.createElement(CrossIcon6, null)
     )
   ) : null;
 };
-var Chat = ({ screenType }) => {
+var Chat = ({ screenType, hideControls = false }) => {
+  var _a, _b, _c;
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  const peerName = useHMSStore30(selectPeerNameByID3(peerSelector));
-  const [chatOptions, setChatOptions] = useState32({
+  const peerName = useHMSStore29(selectPeerNameByID3(peerSelector));
+  const [chatOptions, setChatOptions] = useState31({
     role: roleSelector || "",
     peerId: peerSelector && peerName ? peerSelector : "",
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : "Everyone"
   });
-  const [isSelectorOpen, setSelectorOpen] = useState32(false);
-  const listRef = useRef14(null);
-  const hmsActions = useHMSActions17();
+  const [isSelectorOpen] = useState31(false);
+  const listRef = useRef13(null);
+  const hmsActions = useHMSActions18();
   const { setPinnedMessage } = useSetPinnedMessage();
   useEffect20(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
@@ -5216,51 +4938,71 @@ var Chat = ({ screenType }) => {
     }
   }, [notification, peerSelector, setPeerSelector]);
   const storeMessageSelector = selectHMSMessagesCount;
-  const isMobile = useMedia12(config.media.md);
-  const messagesCount = useHMSStore30(storeMessageSelector) || 0;
-  const scrollToBottom = useCallback15(
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isMobile = useMedia13(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(
     (unreadCount = 0) => {
-      var _a;
+      var _a2;
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
-        (_a = listRef.current) == null ? void 0 : _a.scrollToItem(messagesCount, "end");
+        (_a2 = listRef.current) == null ? void 0 : _a2.scrollToItem(messagesCount, "end");
         requestAnimationFrame(() => {
-          var _a2;
-          (_a2 = listRef.current) == null ? void 0 : _a2.scrollToItem(messagesCount, "end");
+          var _a3;
+          (_a3 = listRef.current) == null ? void 0 : _a3.scrollToItem(messagesCount, "end");
         });
         hmsActions.setMessageRead(true);
       }
     },
     [hmsActions, messagesCount]
   );
-  return /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { size: "100%", gap: "$4" } }, !isMobile ? /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(ChatParticipantHeader, { selectorOpen: isSelectorOpen, onToggle: () => setSelectorOpen((value) => !value) }), /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage })) : null, /* @__PURE__ */ React54.createElement(
-    ChatBody,
-    {
-      role: chatOptions.role,
-      peerId: chatOptions.peerId,
-      ref: listRef,
-      scrollToBottom,
-      screenType
-    }
-  ), /* @__PURE__ */ React54.createElement(
-    ChatFooter,
+  return /* @__PURE__ */ React54.createElement(
+    Flex,
     {
-      role: chatOptions.role,
-      onSend: () => scrollToBottom(1),
-      selection: chatOptions.selection,
-      screenType,
-      onSelect: ({ role, peerId, selection }) => {
-        setChatOptions({
-          role,
-          peerId,
-          selection
-        });
-        setPeerSelector(peerId);
-        setRoleSelector(role);
-      },
-      peerId: chatOptions.peerId
+      direction: "column",
+      css: {
+        size: "100%",
+        gap: "$4",
+        marginTop: hideControls && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) ? "$17" : "0",
+        transition: "margin 0.3s ease-in-out"
+      }
     },
-    !isSelectorOpen && /* @__PURE__ */ React54.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
-  ));
+    isMobile && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) ? null : /* @__PURE__ */ React54.createElement(React54.Fragment, null, ((_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.allow_pinning_messages) ? /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
+    /* @__PURE__ */ React54.createElement(
+      ChatBody,
+      {
+        role: chatOptions.role,
+        peerId: chatOptions.peerId,
+        ref: listRef,
+        scrollToBottom,
+        screenType
+      }
+    ),
+    /* @__PURE__ */ React54.createElement(
+      ChatFooter,
+      {
+        role: chatOptions.role,
+        onSend: () => scrollToBottom(1),
+        selection: chatOptions.selection,
+        screenType,
+        onSelect: ({ role, peerId, selection }) => {
+          setChatOptions({
+            role,
+            peerId,
+            selection
+          });
+          setPeerSelector(peerId);
+          setRoleSelector(role);
+        },
+        peerId: chatOptions.peerId
+      },
+      !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ React54.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
+    )
+  );
 };
 var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   const unreadCount = useUnreadCount({ role, peerId });
@@ -5306,17 +5048,109 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   );
 };
 
+// src/Prebuilt/components/SidePaneTabs.tsx
+var tabTriggerCSS = {
+  color: "$on_surface_high",
+  p: "$4",
+  fontWeight: "$semiBold",
+  fontSize: "$sm",
+  w: "100%",
+  justifyContent: "center"
+};
+var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const resetSidePane = useSidepaneReset();
+  const [activeTab, setActiveTab] = useState32(active);
+  const peerCount = useHMSStore30(selectPeerCount3);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const showChat = !!(elements == null ? void 0 : elements.chat);
+  const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
+  const hideTabs = !(showChat && showParticipants);
+  useEffect21(() => {
+    if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
+    } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
+    } else if (!showChat && !showParticipants) {
+      resetSidePane();
+    }
+  }, [showChat, activeTab, showParticipants, resetSidePane]);
+  return /* @__PURE__ */ React55.createElement(
+    Flex,
+    {
+      direction: "column",
+      css: {
+        color: "$on_primary_high",
+        h: "100%"
+      }
+    },
+    hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : `Participants (${peerCount})`), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType, hideControls }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
+      Tabs.Root,
+      {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        css: {
+          flexDirection: "column",
+          size: "100%"
+        }
+      },
+      /* @__PURE__ */ React55.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React55.createElement(
+        Tabs.Trigger,
+        {
+          value: SIDE_PANE_OPTIONS.CHAT,
+          onClick: toggleChat,
+          css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
+            color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? "$on_surface_low" : "$on_surface_high"
+          })
+        },
+        "Chat"
+      ), /* @__PURE__ */ React55.createElement(
+        Tabs.Trigger,
+        {
+          value: SIDE_PANE_OPTIONS.PARTICIPANTS,
+          onClick: toggleParticipants,
+          css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
+            color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
+          })
+        },
+        "Participants (",
+        peerCount,
+        ")"
+      )),
+      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(ParticipantList, null)),
+      /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(Chat, { screenType, hideControls }))
+    ),
+    /* @__PURE__ */ React55.createElement(
+      IconButton,
+      {
+        css: { position: "absolute", right: "$10", top: "$11" },
+        onClick: (e) => {
+          e.stopPropagation();
+          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+            toggleChat();
+          } else {
+            toggleParticipants();
+          }
+        },
+        "data-testid": "close_chat"
+      },
+      /* @__PURE__ */ React55.createElement(CrossIcon7, null)
+    )
+  );
+});
+
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
-import React56, { Fragment as Fragment10, useState as useState34 } from "react";
-import { selectPermissions as selectPermissions10, useHMSStore as useHMSStore32, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
+import React57, { Fragment as Fragment10, useState as useState34 } from "react";
+import { selectPermissions as selectPermissions11, useHMSStore as useHMSStore32, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
 import { ColoredHandIcon, CrossIcon as CrossIcon8, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
 
 // 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 React55, { Fragment as Fragment9, useCallback as useCallback16, useEffect as useEffect21, useState as useState33 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions18, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+import React56, { Fragment as Fragment9, useCallback as useCallback15, useEffect as useEffect22, useState as useState33 } from "react";
+import { selectRoomID, useHMSActions as useHMSActions19, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5335,7 +5169,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__ */ React55.createElement(SupportIcon, null)
+        icon: /* @__PURE__ */ React56.createElement(SupportIcon, null)
       };
       break;
     }
@@ -5343,7 +5177,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__ */ React55.createElement(EyeOpenIcon, null)
+        icon: /* @__PURE__ */ React56.createElement(EyeOpenIcon, null)
       };
       break;
     }
@@ -5351,7 +5185,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__ */ React55.createElement(WrenchIcon, null),
+        icon: /* @__PURE__ */ React56.createElement(WrenchIcon, null),
         order: 1
       };
   }
@@ -5360,7 +5194,7 @@ var getCardData = (roleName, roomId) => {
 };
 var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
   const [copied, setCopied] = useState33(false);
-  return isHLSRunning ? /* @__PURE__ */ React55.createElement(
+  return isHLSRunning ? /* @__PURE__ */ React56.createElement(
     Box,
     {
       key: title,
@@ -5371,9 +5205,9 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         borderRadius: "$2"
       }
     },
-    /* @__PURE__ */ React55.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React55.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-    /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React56.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+    /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+    /* @__PURE__ */ React56.createElement(
       Button,
       {
         variant: "standard",
@@ -5385,7 +5219,7 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
         icon: true
       },
-      copied ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, "Link copied!") : /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+      copied ? /* @__PURE__ */ React56.createElement(React56.Fragment, null, "Link copied!") : /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
     )
   ) : null;
 };
@@ -5395,14 +5229,14 @@ var HLSStreaming = ({ onBack }) => {
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
   const [showLinks, setShowLinks] = useState33(false);
-  return !showLinks ? /* @__PURE__ */ React55.createElement(Container, { rounded: true }, /* @__PURE__ */ React55.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React55.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__ */ React55.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React55.createElement(StartHLS, null)) : /* @__PURE__ */ React55.createElement(Container, { rounded: true }, /* @__PURE__ */ React55.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React55.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React55.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+  return !showLinks ? /* @__PURE__ */ React56.createElement(Container, { rounded: true }, /* @__PURE__ */ React56.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React56.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React56.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React56.createElement(StartHLS, null)) : /* @__PURE__ */ React56.createElement(Container, { rounded: true }, /* @__PURE__ */ React56.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React56.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React56.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
 };
 var StartHLS = () => {
   const [record, setRecord] = useState33(false);
   const [error, setError] = useState33(false);
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions19();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback16(
+  const startHLS = useCallback15(
     (variants) => __async(void 0, null, function* () {
       try {
         if (isHLSStarted) {
@@ -5421,7 +5255,7 @@ var StartHLS = () => {
     }),
     [hmsActions, record, isHLSStarted, setHLSStarted]
   );
-  return /* @__PURE__ */ React55.createElement(Fragment9, null, /* @__PURE__ */ React55.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React55.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React55.createElement(ErrorText, { error }), /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(Fragment9, null, /* @__PURE__ */ React56.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React56.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(ErrorText, { error }), /* @__PURE__ */ React56.createElement(
     Button,
     {
       "data-testid": "start_hls",
@@ -5430,21 +5264,21 @@ var StartHLS = () => {
       onClick: () => startHLS(),
       disabled: isHLSStarted
     },
-    isHLSStarted ? /* @__PURE__ */ React55.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React55.createElement(GoLiveIcon2, null),
+    isHLSStarted ? /* @__PURE__ */ React56.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React56.createElement(GoLiveIcon2, null),
     isHLSStarted ? "Starting stream..." : "Go Live"
-  )), /* @__PURE__ */ React55.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React55.createElement(Text, null, /* @__PURE__ */ React55.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React55.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__ */ React56.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(Text, null, /* @__PURE__ */ React56.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React56.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
 };
 var EndHLS = ({ setShowLinks }) => {
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions19();
   const [inProgress, setInProgress] = useState33(false);
   const [error, setError] = useState33("");
   const { isHLSRunning } = useRecordingStreaming6();
-  useEffect21(() => {
+  useEffect22(() => {
     if (inProgress && !isHLSRunning) {
       setInProgress(false);
     }
   }, [inProgress, isHLSRunning]);
-  return /* @__PURE__ */ React55.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React55.createElement(ErrorText, { error }), /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(ErrorText, { error }), /* @__PURE__ */ React56.createElement(
     Button,
     {
       "data-testid": "stop_hls",
@@ -5463,23 +5297,23 @@ var EndHLS = ({ setShowLinks }) => {
         }
       })
     },
-    /* @__PURE__ */ React55.createElement(EndStreamIcon2, null),
+    /* @__PURE__ */ React56.createElement(EndStreamIcon2, null),
     "End Stream"
-  ), /* @__PURE__ */ React55.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React55.createElement(PeopleIcon3, null), " Invite People"));
+  ), /* @__PURE__ */ React56.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React56.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(selectPermissions10);
+  const permissions = useHMSStore32(selectPermissions11);
   const [showHLS, setShowHLS] = useState34(isHLSRunning);
   const [showRTMP, setShowRTMP] = useState34(isRTMPRunning);
   if (!(permissions == null ? void 0 : permissions.hlsStreaming) && !(permissions == null ? void 0 : permissions.rtmpStreaming)) {
     toggleStreaming();
     return null;
   }
-  return /* @__PURE__ */ React56.createElement(Fragment10, null, /* @__PURE__ */ React56.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(Fragment10, null, /* @__PURE__ */ React57.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React57.createElement(
     Box,
     {
       css: {
@@ -5489,8 +5323,8 @@ var StreamingLanding = () => {
         r: "$round"
       }
     },
-    /* @__PURE__ */ React56.createElement(ColoredHandIcon, { width: 40, height: 40 })
-  ), /* @__PURE__ */ React56.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React56.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React56.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React56.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React56.createElement(CrossIcon8, null))), /* @__PURE__ */ React56.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React57.createElement(ColoredHandIcon, { width: 40, height: 40 })
+  ), /* @__PURE__ */ React57.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React57.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React57.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React57.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React57.createElement(CrossIcon8, null))), /* @__PURE__ */ React57.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React57.createElement(
     StreamCard,
     {
       testId: "hls_stream",
@@ -5500,7 +5334,7 @@ var StreamingLanding = () => {
       onClick: () => setShowHLS(true),
       Icon: GoLiveIcon3
     }
-  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React56.createElement(
+  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React57.createElement(
     StreamCard,
     {
       testId: "rtmp_stream",
@@ -5512,29 +5346,39 @@ var StreamingLanding = () => {
       },
       imgSrc: rtmp_default
     }
-  ), showHLS && /* @__PURE__ */ React56.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React56.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+  ), showHLS && /* @__PURE__ */ React57.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React57.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
-var SidePane = ({ screenType }) => {
-  var _a;
-  const isMobile = useMedia13(config.media.md);
+var SidePane = ({
+  screenType,
+  tileProps,
+  hideControls = false
+}) => {
+  var _a, _b;
+  const isMobile = useMedia14(config.media.md);
   const sidepane = useHMSStore33(selectAppData3(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore33(selectAppData3(APP_DATA.activeScreensharePeerId));
   const trackId = (_a = useHMSStore33(selectVideoTrackByPeerID(activeScreensharePeerId))) == null ? void 0 : _a.id;
+  const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
-  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
-    ViewComponent = /* @__PURE__ */ React57.createElement(ParticipantList, null);
-  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = /* @__PURE__ */ React57.createElement(Chat, { screenType });
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = /* @__PURE__ */ React58.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = /* @__PURE__ */ React57.createElement(StreamingLanding, null);
+    ViewComponent = /* @__PURE__ */ React58.createElement(StreamingLanding, null);
   }
   if (!ViewComponent && !trackId) {
     return null;
   }
-  const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT;
-  return /* @__PURE__ */ React57.createElement(
+  const tileLayout = {
+    hideParticipantNameOnTile: tileProps == null ? void 0 : tileProps.hide_participant_name_on_tile,
+    roundedVideoTile: tileProps == null ? void 0 : tileProps.rounded_video_tile,
+    hideAudioMuteOnTile: tileProps == null ? void 0 : tileProps.hide_audio_mute_on_tile,
+    hideMetadataOnTile: tileProps == null ? void 0 : tileProps.hide_metadata_on_tile,
+    objectFit: tileProps == null ? void 0 : tileProps.video_object_fit
+  };
+  const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay);
+  return /* @__PURE__ */ React58.createElement(
     Flex,
     {
       direction: "column",
@@ -5547,18 +5391,17 @@ var SidePane = ({ screenType }) => {
         "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
       }
     },
-    trackId && /* @__PURE__ */ React57.createElement(
+    trackId && /* @__PURE__ */ React58.createElement(
       VideoTile_default,
-      {
+      __spreadValues({
         peerId: activeScreensharePeerId,
         trackId,
         width: "100%",
         height: 225,
-        rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 },
-        objectFit: "contain"
-      }
+        rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
+      }, tileLayout)
     ),
-    !!ViewComponent && /* @__PURE__ */ React57.createElement(
+    !!ViewComponent && /* @__PURE__ */ React58.createElement(
       Box,
       {
         css: {
@@ -5594,10 +5437,10 @@ var SidePane = ({ screenType }) => {
 var SidePane_default = SidePane;
 
 // src/Prebuilt/layouts/WaitingView.jsx
-import React58 from "react";
+import React59 from "react";
 import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React58.memo(() => {
-  return /* @__PURE__ */ React58.createElement(
+var WaitingView = React59.memo(() => {
+  return /* @__PURE__ */ React59.createElement(
     Box,
     {
       css: {
@@ -5611,7 +5454,7 @@ var WaitingView = React58.memo(() => {
       },
       "data-testid": "waiting_view"
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement(
       Flex,
       {
         align: "center",
@@ -5625,8 +5468,8 @@ var WaitingView = React58.memo(() => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React58.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React59.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React59.createElement(
         Flex,
         {
           direction: "column",
@@ -5636,54 +5479,28 @@ var WaitingView = React58.memo(() => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React58.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React58.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+        /* @__PURE__ */ React59.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React59.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
       )
     )
   );
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React59.lazy(() => import("./HLSView-PY2FKWX3.js"));
+var HLSView = React60.lazy(() => import("./HLSView-QMU5JK7U.js"));
 var VideoStreamingSection = ({
   screenType,
-  elements
+  elements,
+  hideControls = false
 }) => {
-  var _a;
-  const localPeerRole = useHMSStore34(selectLocalPeerRoleName3);
-  const isConnected = useHMSStore34(selectIsConnectedToRoom7);
-  const hmsActions = useHMSActions19();
+  var _a, _b;
+  const localPeerRole = useHMSStore34(selectLocalPeerRoleName2);
+  const isConnected = useHMSStore34(selectIsConnectedToRoom6);
+  const hmsActions = useHMSActions20();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  const { isHLSRunning } = useRecordingStreaming8();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore34(selectPermissions11);
-  const showStreamingUI = useShowStreamingUI();
-  const startHLS = useCallback17(() => __async(void 0, null, function* () {
-    var _a2;
-    try {
-      if (isHLSStarted) {
-        return;
-      }
-      setHLSStarted(true);
-      yield hmsActions.startHLSStreaming();
-    } catch (error) {
-      if ((_a2 = error.message) == null ? void 0 : _a2.includes("beam already started")) {
-        return;
-      }
-      setHLSStarted(false);
-    }
-  }), [hmsActions, isHLSStarted, setHLSStarted]);
-  useEffect22(() => {
-    if (!isConnected) {
-      return;
-    }
-    if ((permissions == null ? void 0 : permissions.hlsStreaming) && !isHLSRunning && showStreamingUI) {
-      startHLS();
-    }
-  }, [isConnected]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!isConnected) {
       return;
     }
@@ -5694,17 +5511,17 @@ var VideoStreamingSection = ({
   }
   let ViewComponent;
   if (screenType === "hls_live_streaming") {
-    ViewComponent = /* @__PURE__ */ React59.createElement(HLSView, null);
+    ViewComponent = /* @__PURE__ */ React60.createElement(HLSView, null);
   } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = /* @__PURE__ */ React59.createElement(WaitingView, null);
+    ViewComponent = /* @__PURE__ */ React60.createElement(WaitingView, null);
   } else if (pdfAnnotatorActive) {
-    ViewComponent = /* @__PURE__ */ React59.createElement(PDFView, null);
+    ViewComponent = /* @__PURE__ */ React60.createElement(PDFView, null);
   } else if (urlToIframe) {
-    ViewComponent = /* @__PURE__ */ React59.createElement(EmbedView, null);
+    ViewComponent = /* @__PURE__ */ React60.createElement(EmbedView, null);
   } else {
-    ViewComponent = /* @__PURE__ */ React59.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
+    ViewComponent = /* @__PURE__ */ React60.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
   }
-  return /* @__PURE__ */ React59.createElement(Suspense, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(Suspense2, { fallback: /* @__PURE__ */ React60.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React60.createElement(
     Flex,
     {
       css: {
@@ -5714,36 +5531,47 @@ var VideoStreamingSection = ({
       }
     },
     ViewComponent,
-    /* @__PURE__ */ React59.createElement(SidePane_default, { screenType })
+    /* @__PURE__ */ React60.createElement(
+      SidePane_default,
+      {
+        screenType,
+        tileProps: (_b = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _b.grid,
+        hideControls
+      }
+    )
   ));
 };
 
-// src/Prebuilt/components/RoleChangeRequestModal.jsx
-import React60, { useEffect as useEffect23 } from "react";
+// src/Prebuilt/components/RoleChangeRequestModal.tsx
+import React61, { useEffect as useEffect24 } from "react";
 import {
   selectLocalPeerName,
-  selectLocalPeerRoleName as selectLocalPeerRoleName4,
+  selectLocalPeerRoleName as selectLocalPeerRoleName3,
   selectRoleChangeRequest,
-  useHMSActions as useHMSActions20,
+  useCustomEvent as useCustomEvent2,
+  useHMSActions as useHMSActions21,
   useHMSStore as useHMSStore35
 } from "@100mslive/react-sdk";
 var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions20();
-  const isHeadless = useIsHeadless();
-  const { setPrevRole } = useMyMetadata();
-  const currentRole = useHMSStore35(selectLocalPeerRoleName4);
+  const hmsActions = useHMSActions21();
+  const { updateMetaData } = useMyMetadata();
+  const currentRole = useHMSStore35(selectLocalPeerRoleName3);
   const roleChangeRequest = useHMSStore35(selectRoleChangeRequest);
   const name = useHMSStore35(selectLocalPeerName);
-  useEffect23(() => {
-    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role) || isHeadless) {
+  const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
+  useEffect24(() => {
+    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
       return;
     }
-    hmsActions.preview({ asRole: roleChangeRequest.role.name });
-  }, [hmsActions, roleChangeRequest, isHeadless]);
-  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role) || isHeadless) {
+    (() => __async(void 0, null, function* () {
+      yield updateMetaData({ prevRole: currentRole });
+      yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    }))();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
+  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
     return null;
   }
-  const body = /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(Text, { css: { fontWeight: 400, c: "$on_surface_medium", textAlign: "center" } }, "Setup your audio and video before joining"), /* @__PURE__ */ React60.createElement(
+  const body = /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(Text, { css: { fontWeight: 400, c: "$on_surface_medium", textAlign: "center" } }, "Setup your audio and video before joining"), /* @__PURE__ */ React61.createElement(
     Flex,
     {
       align: "center",
@@ -5754,10 +5582,10 @@ var RoleChangeRequestModal = () => {
         mt: "$6"
       }
     },
-    /* @__PURE__ */ React60.createElement(PreviewTile, { name }),
-    /* @__PURE__ */ React60.createElement(PreviewControls, null)
+    /* @__PURE__ */ React61.createElement(PreviewTile, { name: name || "" }),
+    /* @__PURE__ */ React61.createElement(PreviewControls, { hideSettings: true })
   ));
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     RequestDialog,
     {
       title: `You're invited to join the ${roleChangeRequest.role.name} role`,
@@ -5765,64 +5593,71 @@ var RoleChangeRequestModal = () => {
         var _a;
         if (!value) {
           yield hmsActions.rejectChangeRole(roleChangeRequest);
-          yield hmsActions.sendDirectMessage("", (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id, ROLE_CHANGE_DECLINED);
+          sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
           yield hmsActions.cancelMidCallPreview();
+          yield updateMetaData({ isHandRaised: false });
         }
       }),
       body,
-      onAction: () => {
-        hmsActions.acceptChangeRole(roleChangeRequest);
-        setPrevRole(currentRole);
-      },
+      onAction: () => __async(void 0, null, function* () {
+        yield hmsActions.acceptChangeRole(roleChangeRequest);
+        yield updateMetaData({ isHandRaised: false });
+      }),
       actionText: "Accept"
     }
   );
 };
-var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon }) => /* @__PURE__ */ React60.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React60.createElement(Dialog.Portal, null, /* @__PURE__ */ React60.createElement(Dialog.Overlay, null), /* @__PURE__ */ React60.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React60.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, Icon ? Icon : null, /* @__PURE__ */ React60.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React60.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React60.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React60.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React60.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React60.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React60.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React60.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
+var RequestDialog = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = "Accept",
+  onAction
+}) => /* @__PURE__ */ React61.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React61.createElement(Dialog.Portal, null, /* @__PURE__ */ React61.createElement(Dialog.Overlay, null), /* @__PURE__ */ React61.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React61.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React61.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React61.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React61.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React61.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React61.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React61.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React61.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React61.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
 
 // src/Prebuilt/components/conference.jsx
 var Conference = () => {
-  var _a, _b;
-  const navigate = useNavigate2();
-  const { roomId, role } = useParams2();
-  const isHeadless = useIsHeadless();
-  const { userName } = useHMSPrebuiltContext();
+  var _a, _b, _c, _d, _e;
+  const navigate = useNavigate();
+  const { roomId, role } = useParams();
+  const { userName, endpoints } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore36(selectRoomState);
   const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore36(selectIsConnectedToRoom8);
-  const hmsActions = useHMSActions21();
+  const isConnectedToRoom = useHMSStore36(selectIsConnectedToRoom7);
+  const hmsActions = useHMSActions22();
   const [hideControls, setHideControls] = useState35(false);
   const dropdownList = useHMSStore36(selectAppData4(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
-  const headerRef = useRef15();
-  const footerRef = useRef15();
-  const dropdownListRef = useRef15();
-  const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
+  const headerRef = useRef14();
+  const footerRef = useRef14();
+  const isMobileDevice = isAndroid || isIOS || isIPadOS;
+  const dropdownListRef = useRef14();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const toggleControls = () => {
     var _a2;
-    if (((_a2 = dropdownListRef.current) == null ? void 0 : _a2.length) === 0) {
+    if (((_a2 = dropdownListRef.current) == null ? void 0 : _a2.length) === 0 && isMobileDevice) {
       setHideControls((value) => !value);
     }
   };
-  useEffect24(() => {
+  useEffect25(() => {
     let timeout = null;
     dropdownListRef.current = dropdownList || [];
     if (dropdownListRef.current.length === 0) {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         if (dropdownListRef.current.length === 0) {
-          setHideControls(true);
+          setHideControls(isMobileDevice);
         }
       }, 5e3);
     }
     return () => {
       clearTimeout(timeout);
     };
-  }, [dropdownList, hideControls]);
-  useEffect24(() => {
+  }, [dropdownList, hideControls, isMobileDevice]);
+  useEffect25(() => {
     if (!roomId) {
       navigate(`/`);
       return;
@@ -5837,12 +5672,12 @@ var Conference = () => {
         navigate(`/preview/${roomId || ""}`);
     }
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
       hmsActions.join({
         userName,
         authToken: authTokenInAppData,
-        initEndpoint: define_process_env_default.REACT_APP_ENV ? `https://${define_process_env_default.REACT_APP_ENV}-init.100ms.live/init` : void 0,
+        initEndpoint: endpoints == null ? void 0 : endpoints.init,
         initialSettings: {
           isAudioMuted: !isPreviewScreenEnabled,
           isVideoMuted: !isPreviewScreenEnabled,
@@ -5850,57 +5685,57 @@ var Conference = () => {
         }
       }).catch(console.error);
     }
-  }, [authTokenInAppData, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-  useEffect24(() => {
-    if (isHeadless) {
-      hmsActions.ignoreMessageTypes(["chat", EMOJI_REACTION_TYPE]);
-    }
-  }, [isHeadless, hmsActions]);
-  useEffect24(() => {
+  }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
+  useEffect25(() => {
     return () => {
       PictureInPicture.stop().catch((error) => console.error("stopping pip", error));
     };
   }, []);
   if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React61.createElement(FullPageProgress_default, { loadingText: "Joining..." });
+    return /* @__PURE__ */ React62.createElement(FullPageProgress_default, { text: "Joining..." });
   }
-  if (isHLSStarted) {
-    return /* @__PURE__ */ React61.createElement(FullPageProgress_default, { loadingText: "Starting live stream..." });
-  }
-  return /* @__PURE__ */ React61.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, isHLSStarted ? /* @__PURE__ */ React62.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React62.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React62.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React62.createElement(
     Box,
     {
       ref: headerRef,
       css: {
         h: "$18",
         transition: "margin 0.3s ease-in-out",
-        marginTop: performAutoHide ? `-${(_a = headerRef.current) == null ? void 0 : _a.clientHeight}px` : "none",
+        marginTop: hideControls ? `-${(_a = headerRef.current) == null ? void 0 : _a.clientHeight}px` : "none",
         "@md": {
           h: "$17"
         }
       },
       "data-testid": "header"
     },
-    /* @__PURE__ */ React61.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React62.createElement(
     Box,
     {
       css: {
         w: "100%",
         flex: "1 1 0",
         minHeight: 0,
-        px: "$10",
+        px: ((_d = (_c = (_b = screenProps == null ? void 0 : screenProps.elements) == null ? void 0 : _b.video_tile_layout) == null ? void 0 : _c.grid) == null ? void 0 : _d.edge_to_edge) ? 0 : "$10",
+        // TODO: padding to be controlled by section/element
         paddingBottom: "env(safe-area-inset-bottom)",
         "@lg": {
-          px: "$4"
+          px: 0
         }
       },
       id: "conferencing",
       "data-testid": "conferencing",
       onClick: toggleControls
     },
-    /* @__PURE__ */ React61.createElement(VideoStreamingSection, { screenType: screenProps.screenType, elements: screenProps.elements })
-  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
+      VideoStreamingSection,
+      {
+        screenType: screenProps.screenType,
+        elements: screenProps.elements,
+        hideControls
+      }
+    )
+  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React62.createElement(
     Box,
     {
       ref: footerRef,
@@ -5909,7 +5744,7 @@ var Conference = () => {
         maxHeight: "$24",
         transition: "margin 0.3s ease-in-out",
         bg: "$background_dim",
-        marginBottom: performAutoHide ? `-${(_b = footerRef.current) == null ? void 0 : _b.clientHeight}px` : void 0,
+        marginBottom: hideControls ? `-${(_e = footerRef.current) == null ? void 0 : _e.clientHeight}px` : void 0,
         "@md": {
           maxHeight: "unset",
           bg: screenProps.screenType === "hls_live_streaming" ? "transparent" : "$background_dim"
@@ -5917,11 +5752,11 @@ var Conference = () => {
       },
       "data-testid": "footer"
     },
-    /* @__PURE__ */ React61.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React61.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React61.createElement(HLSFailureModal, null), /* @__PURE__ */ React61.createElement(ActivatedPIP, null));
+    /* @__PURE__ */ React62.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React62.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React62.createElement(HLSFailureModal, null), /* @__PURE__ */ React62.createElement(ActivatedPIP, null)));
 };
 var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-V2XZGTKU.js.map
+//# sourceMappingURL=conference-FJJQ4TXX.js.map