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

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

@@ -1,6 +1,6 @@
 import {
   ActionTile
-} from "./chunk-2H5NIZB7.js";
+} from "./chunk-HUMNPIYI.js";
 import {
   APP_DATA,
   Accordion,
@@ -10,7 +10,6 @@ import {
   Button,
   CHAT_SELECTOR,
   Checkbox,
-  Chip_default,
   ConnectionIndicator,
   Dialog,
   DialogCol,
@@ -29,6 +28,8 @@ import {
   Label,
   PictureInPicture,
   Popover,
+  PrebuiltAttributeBox,
+  PrebuiltAudioIndicator,
   PrebuiltDialogPortal,
   PreviewControls,
   PreviewTile,
@@ -86,7 +87,7 @@ import {
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-GLYGPYNS.js";
+} from "./chunk-PRM33R4R.js";
 import {
   Box,
   Flex,
@@ -105,19 +106,19 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-Z3O2WGWV.js";
+} from "./chunk-6SQTFOK6.js";
 
 // src/Prebuilt/components/conference.jsx
-import React68, { useEffect as useEffect27, useRef as useRef16, useState as useState39 } from "react";
+import React69, { useEffect as useEffect28, useRef as useRef16, useState as useState39 } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
   HMSRoomState,
   selectAppData as selectAppData4,
-  selectIsConnectedToRoom as selectIsConnectedToRoom7,
+  selectIsConnectedToRoom as selectIsConnectedToRoom8,
   selectRoomState,
-  useHMSActions as useHMSActions25,
-  useHMSStore as useHMSStore39
+  useHMSActions as useHMSActions24,
+  useHMSStore as useHMSStore41
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Footer/Footer.tsx
@@ -2788,18 +2789,19 @@ var ChatToggle = () => {
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-import React37, { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect7, useState as useState20 } from "react";
+import React37, { Fragment as Fragment7, useCallback as useCallback6, useEffect as useEffect7, useState as useState19 } from "react";
 import { useDebounce, useMedia as useMedia5 } from "react-use";
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLargeRoom as selectIsLargeRoom2,
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID4,
   selectPeerCount as selectPeerCount2,
   selectPeerMetadata,
   selectPermissions as selectPermissions8,
-  useHMSActions as useHMSActions13,
-  useHMSStore as useHMSStore16
+  useHMSActions as useHMSActions12,
+  useHMSStore as useHMSStore17
 } from "@100mslive/react-sdk";
 import {
   ChangeRoleIcon as ChangeRoleIcon2,
@@ -2812,11 +2814,11 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
-import React36, { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef6, useState as useState19 } from "react";
+import React36, { useEffect as useEffect6 } from "react";
 import { useMeasure } from "react-use";
 import { FixedSizeList } from "react-window";
-import { useHMSActions as useHMSActions12 } from "@100mslive/react-sdk";
-import { AddCircleIcon as AddCircleIcon2 } from "@100mslive/react-icons";
+import { selectIsLargeRoom, useHMSStore as useHMSStore16, usePaginatedParticipants } from "@100mslive/react-sdk";
+import { ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
 import React35, { useState as useState18 } from "react";
@@ -2852,7 +2854,7 @@ var RoleOptions = ({ roleName, peerList }) => {
   const canMuteRole = (permissions == null ? void 0 : permissions.mute) && roleName === on_stage_role;
   const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
   const canRemoveRoleFromRoom = (permissions == null ? void 0 : permissions.removeOthers) && (on_stage_role === roleName || (off_stage_roles == null ? void 0 : off_stage_roles.includes(roleName)));
-  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) {
+  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
     return null;
   }
   const removeAllFromStage = () => {
@@ -2938,6 +2940,7 @@ var RoleOptions = ({ roleName, peerList }) => {
 
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
 var ROW_HEIGHT = 50;
+var ITER_TIMER = 5e3;
 function itemKey(index, data3) {
   return data3.peerList[index].id;
 }
@@ -2949,104 +2952,113 @@ var RoleAccordion = ({
   roleName,
   isConnected,
   filter,
-  isHandRaisedAccordion = false
+  isHandRaisedAccordion = false,
+  offStageRoles,
+  onActive
 }) => {
   const [ref, { width }] = useMeasure();
-  const actions = useHMSActions12();
   const showAcordion = (filter == null ? void 0 : filter.search) ? peerList.some((peer) => peer.name.toLowerCase().includes(filter.search)) : true;
-  const [hasNext, setHasNext] = useState19(false);
-  const iteratorRef = useRef6(null);
-  const loadNext = useCallback6(() => {
-    if (!roleName || roleName === "Hand Raised") {
+  const isLargeRoom = useHMSStore16(selectIsLargeRoom);
+  const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
+  const isOffStageRole = roleName && offStageRoles.includes(roleName);
+  useEffect6(() => {
+    if (!isOffStageRole || !isLargeRoom) {
       return;
     }
-    if (!iteratorRef.current) {
-      iteratorRef.current = actions.getPeerListIterator({ role: roleName });
-    }
-    iteratorRef.current.next().catch(console.error).finally(() => {
-      setHasNext(iteratorRef.current ? iteratorRef.current.hasNext() : false);
-    });
-  }, [actions, roleName]);
-  useEffect6(() => {
-    loadNext();
-  }, [loadNext]);
+    loadPeers();
+    const interval = setInterval(() => {
+      loadPeers();
+    }, ITER_TIMER);
+    return () => clearInterval(interval);
+  }, [isOffStageRole, isLargeRoom]);
   if (!showAcordion || isHandRaisedAccordion && (filter == null ? void 0 : filter.search) || peerList.length === 0 && (filter == null ? void 0 : filter.search)) {
     return null;
   }
-  const height = ROW_HEIGHT * peerList.length;
-  return /* @__PURE__ */ React36.createElement(Flex, { direction: "column", css: { "&:hover .role_actions": { visibility: "visible" } }, ref }, /* @__PURE__ */ React36.createElement(
-    Accordion.Root,
+  const height = ROW_HEIGHT * (peers.length || peerList.length);
+  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
+  const hasNext = total > peersInAccordion.length;
+  if (peersInAccordion.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React36.createElement(Accordion.Item, { value: roleName, css: { "&:hover .role_actions": { visibility: "visible" }, mb: "$8" }, ref }, /* @__PURE__ */ React36.createElement(
+    Accordion.Header,
     {
-      type: "single",
-      collapsible: true,
-      defaultValue: roleName,
-      css: { borderRadius: "$1", border: "1px solid $border_bright" }
+      iconStyles: { c: "$on_surface_high" },
+      css: {
+        textTransform: "capitalize",
+        p: "$6 $8",
+        fontSize: "$sm",
+        fontWeight: "$semiBold",
+        c: "$on_surface_medium",
+        borderRadius: "$1",
+        border: "1px solid $border_default",
+        '&[data-state="open"]': {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      }
     },
-    /* @__PURE__ */ React36.createElement(Accordion.Item, { value: roleName }, /* @__PURE__ */ React36.createElement(
-      Accordion.Header,
+    /* @__PURE__ */ React36.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React36.createElement(
+      Text,
       {
-        iconStyles: { c: "$on_surface_high" },
-        css: {
-          textTransform: "capitalize",
-          p: "$6 $8",
-          fontSize: "$sm",
-          fontWeight: "$semiBold",
-          c: "$on_surface_medium"
-        }
+        variant: "sm",
+        css: { fontWeight: "$semiBold", textTransform: "capitalize", color: "$on_surface_medium" }
       },
-      /* @__PURE__ */ React36.createElement(Flex, { justify: "between", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React36.createElement(
-        Text,
-        {
-          variant: "sm",
-          css: { fontWeight: "$semiBold", textTransform: "capitalize", color: "$on_surface_medium" }
-        },
-        roleName,
-        " ",
-        `(${getFormattedCount(peerList.length)})`
-      ), /* @__PURE__ */ React36.createElement(RoleOptions, { roleName, peerList }))
-    ), /* @__PURE__ */ React36.createElement(Accordion.Content, null, /* @__PURE__ */ React36.createElement(Box, { css: { borderTop: "1px solid $border_default" } }), /* @__PURE__ */ React36.createElement(
-      FixedSizeList,
-      {
-        itemSize: ROW_HEIGHT,
-        itemData: { peerList, isConnected },
-        itemKey,
-        itemCount: peerList.length,
-        width,
-        height
+      roleName,
+      " ",
+      `(${getFormattedCount(isLargeRoom && isOffStageRole ? total : peerList.length)})`
+    ), /* @__PURE__ */ React36.createElement(RoleOptions, { roleName, peerList: peersInAccordion }))
+  ), /* @__PURE__ */ React36.createElement(Accordion.Content, { contentStyles: { border: "1px solid $border_default", borderTop: "none" } }, /* @__PURE__ */ React36.createElement(
+    FixedSizeList,
+    {
+      itemSize: ROW_HEIGHT,
+      itemData: { peerList: peersInAccordion, isConnected },
+      itemKey,
+      itemCount: peersInAccordion.length,
+      width,
+      height
+    },
+    VirtualizedParticipantItem
+  ), (offStageRoles == null ? void 0 : offStageRoles.includes(roleName)) && hasNext ? /* @__PURE__ */ React36.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "end",
+      css: {
+        gap: "$1",
+        cursor: "pointer",
+        color: "$on_surface_high",
+        p: "$6",
+        borderTop: "1px solid $border_default"
       },
-      VirtualizedParticipantItem
-    ), hasNext ? /* @__PURE__ */ React36.createElement(
-      Chip_default,
-      {
-        icon: /* @__PURE__ */ React36.createElement(AddCircleIcon2, null),
-        content: "Load More",
-        onClick: loadNext,
-        backgroundColor: "$secondary_default",
-        css: {
-          w: "max-content",
-          borderRadius: "$size$9",
-          m: "$2 auto",
-          p: "$4",
-          cursor: "pointer"
-        }
-      }
-    ) : null))
-  ));
+      onClick: () => onActive == null ? void 0 : onActive(roleName)
+    },
+    /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { color: "inherit" } }, "View All"),
+    /* @__PURE__ */ React36.createElement(ChevronRightIcon2, null)
+  ) : null));
 };
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-var ParticipantList = () => {
-  const [filter, setFilter] = useState20();
+var ParticipantList = ({ offStageRoles = [], onActive }) => {
+  const [filter, setFilter] = useState19();
   const { participants, isConnected, peerCount } = useParticipants(filter);
+  const isLargeRoom = useHMSStore17(selectIsLargeRoom2);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore16(selectHandRaisedPeers);
+  const handRaisedPeers = useHMSStore17(selectHandRaisedPeers);
   participants.forEach((participant) => {
     if (peersOrderedByRoles[participant.roleName] === void 0) {
       peersOrderedByRoles[participant.roleName] = [];
     }
     peersOrderedByRoles[participant.roleName].push(participant);
   });
-  const onSearch = useCallback7((value) => {
+  if (isLargeRoom) {
+    offStageRoles.forEach((role) => {
+      if (!peersOrderedByRoles[role]) {
+        peersOrderedByRoles[role] = [];
+      }
+    });
+  }
+  const onSearch = useCallback6((value) => {
     setFilter((filterValue) => {
       if (!filterValue) {
         filterValue = {};
@@ -3064,12 +3076,15 @@ var ParticipantList = () => {
       peersOrderedByRoles,
       handRaisedList: handRaisedPeers,
       isConnected,
-      filter
+      filter,
+      offStageRoles,
+      isLargeRoom,
+      onActive
     }
   )));
 };
 var ParticipantCount = () => {
-  const peerCount = useHMSStore16(selectPeerCount2);
+  const peerCount = useHMSStore17(selectPeerCount2);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   useEffect7(() => {
@@ -3100,7 +3115,15 @@ var ParticipantCount = () => {
     /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, getFormattedCount(peerCount))
   );
 };
-var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
+var VirtualizedParticipants = ({
+  peersOrderedByRoles = {},
+  isConnected,
+  filter,
+  handRaisedList = [],
+  offStageRoles,
+  isLargeRoom,
+  onActive
+}) => {
   return /* @__PURE__ */ React37.createElement(
     Flex,
     {
@@ -3114,30 +3137,32 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
         flex: "1 1 0"
       }
     },
-    handRaisedList.length > 0 ? /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React37.createElement(Accordion.Root, { type: isLargeRoom ? "single" : "multiple", collapsible: true }, handRaisedList.length > 0 ? /* @__PURE__ */ React37.createElement(
       RoleAccordion,
       {
         peerList: handRaisedList,
         roleName: "Hand Raised",
         filter,
         isConnected,
-        isHandRaisedAccordion: true
+        isHandRaisedAccordion: true,
+        offStageRoles
       }
-    ) : null,
-    Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React37.createElement(
+    ) : null, Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React37.createElement(
       RoleAccordion,
       {
         key: role,
         peerList: peersOrderedByRoles[role],
         roleName: role,
         isConnected,
-        filter
+        filter,
+        offStageRoles,
+        onActive
       }
-    ))
+    )))
   );
 };
 var Participant = ({ peer, isConnected }) => {
-  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  const localPeerId = useHMSStore17(selectLocalPeerID4);
   return /* @__PURE__ */ React37.createElement(
     Flex,
     {
@@ -3153,19 +3178,28 @@ var Participant = ({ peer, isConnected }) => {
       justify: "between",
       "data-testid": "participant_" + peer.name
     },
-    /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, textEllipsis(150)), { fontWeight: "$semiBold", color: "$on_surface_high" }) }, peer.name, " ", localPeerId === peer.id ? "(You)" : ""),
+    /* @__PURE__ */ React37.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: __spreadProps(__spreadValues({}, textEllipsis("100%")), { flex: "1 1 0", mr: "$8", fontWeight: "$semiBold", color: "$on_surface_high" })
+      },
+      peer.name,
+      " ",
+      localPeerId === peer.id ? "(You)" : ""
+    ),
     isConnected ? /* @__PURE__ */ React37.createElement(ParticipantActions, { peerId: peer.id, isLocal: peer.id === localPeerId, role: peer.roleName }) : null
   );
 };
 var ParticipantActions = React37.memo(({ peerId, role, isLocal }) => {
   var _a, _b;
-  const isHandRaised = useHMSStore16(selectHasPeerHandRaised(peerId));
-  const canChangeRole = (_a = useHMSStore16(selectPermissions8)) == null ? void 0 : _a.changeRole;
-  const canRemoveOthers = (_b = useHMSStore16(selectPermissions8)) == null ? void 0 : _b.removeOthers;
+  const isHandRaised = useHMSStore17(selectHasPeerHandRaised(peerId));
+  const canChangeRole = (_a = useHMSStore17(selectPermissions8)) == null ? void 0 : _a.changeRole;
+  const canRemoveOthers = (_b = useHMSStore17(selectPermissions8)) == null ? void 0 : _b.removeOthers;
   const { elements } = useRoomLayoutConferencingScreen();
   const { on_stage_exp } = elements || {};
   const shouldShowMoreActions = on_stage_exp && canChangeRole || canRemoveOthers;
-  const isAudioMuted = !useHMSStore16(selectIsPeerAudioEnabled(peerId));
+  const isAudioMuted = !useHMSStore17(selectIsPeerAudioEnabled(peerId));
   return /* @__PURE__ */ React37.createElement(
     Flex,
     {
@@ -3208,7 +3242,7 @@ var ParticipantActions = React37.memo(({ peerId, role, isLocal }) => {
 });
 var ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
   var _a;
-  const hmsActions = useHMSActions13();
+  const hmsActions = useHMSActions12();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
@@ -3217,10 +3251,10 @@ var ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemove
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
-  const prevRole = (_a = useHMSStore16(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
-  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  const prevRole = (_a = useHMSStore17(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
+  const localPeerId = useHMSStore17(selectLocalPeerID4);
   const isLocal = localPeerId === peerId;
-  const [open, setOpen] = useState20(false);
+  const [open, setOpen] = useState19(false);
   const handleStageAction = () => __async(void 0, null, function* () {
     if (isInStage) {
       prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
@@ -3294,7 +3328,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
       {
         type: "text",
         placeholder: placeholder || "Search for participants",
-        css: { w: "100%", p: "$6", pl: "$16", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
+        css: { w: "100%", p: "$6", pl: "$14", bg: inSidePane ? "$surface_default" : "$surface_dim" },
         value,
         onKeyDown: (event) => {
           event.stopPropagation();
@@ -3310,7 +3344,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React38.lazy(() => import("./VirtualBackground-GP4ATXD3.js"));
+var VirtualBackground = React38.lazy(() => import("./VirtualBackground-UVZJVOA2.js"));
 var Footer2 = ({
   screenType,
   elements
@@ -3374,14 +3408,14 @@ var Footer2 = ({
 };
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
-import React39, { useCallback as useCallback8, useState as useState21 } from "react";
-import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions14, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
+import React39, { useCallback as useCallback7, useState as useState20 } from "react";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions13, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
-  const { hlsError } = useHMSStore17(selectHLSState2).error || false;
-  const [openModal, setOpenModal] = useState21(!!hlsError);
-  const hmsActions = useHMSActions14();
+  const { hlsError } = useHMSStore18(selectHLSState2).error || false;
+  const [openModal, setOpenModal] = useState20(!!hlsError);
+  const hmsActions = useHMSActions13();
   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;
@@ -3429,8 +3463,8 @@ import {
   selectLocalPeerRoleName,
   selectRoleChangeRequest,
   useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions15,
-  useHMSStore as useHMSStore18
+  useHMSActions as useHMSActions14,
+  useHMSStore as useHMSStore19
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
@@ -3454,11 +3488,11 @@ var RequestActions = ({ onAction, actionText }) => /* @__PURE__ */ React40.creat
 
 // src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
 var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions15();
+  const hmsActions = useHMSActions14();
   const { updateMetaData } = useMyMetadata();
-  const currentRole = useHMSStore18(selectLocalPeerRoleName);
-  const roleChangeRequest = useHMSStore18(selectRoleChangeRequest);
-  const name = useHMSStore18(selectLocalPeerName2);
+  const currentRole = useHMSStore19(selectLocalPeerRoleName);
+  const roleChangeRequest = useHMSStore19(selectRoleChangeRequest);
+  const name = useHMSStore19(selectLocalPeerName2);
   const { sendEvent } = useCustomEvent2({ type: ROLE_CHANGE_DECLINED });
   useEffect9(() => {
     if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
@@ -3522,27 +3556,27 @@ var RoleChangeRequestModal = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-import React67, { Suspense as Suspense2, useEffect as useEffect26 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName3, useHMSActions as useHMSActions24, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
+import React68, { Suspense as Suspense2, useEffect as useEffect27 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom7, selectLocalPeerRoleName as selectLocalPeerRoleName3, useHMSActions as useHMSActions23, useHMSStore as useHMSStore40 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-import React56, { useEffect as useEffect17, useMemo as useMemo7, useState as useState30 } from "react";
-import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore27, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
+import React56, { useEffect as useEffect17, useMemo as useMemo6, useState as useState29 } from "react";
+import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as useHMSStore28, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-import React49, { useEffect as useEffect13, useMemo as useMemo4, useState as useState25 } from "react";
+import React49, { useEffect as useEffect13, useMemo as useMemo3, useState as useState24 } from "react";
 import { useMedia as useMedia13 } from "react-use";
-import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore23 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore24 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
-import React46, { useEffect as useEffect10, useRef as useRef8 } from "react";
+import React46, { useEffect as useEffect10, useRef as useRef7 } from "react";
 import Draggable from "react-draggable";
 import { useMedia as useMedia11 } from "react-use";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer, selectVideoTrackByID as selectVideoTrackByID2, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer, selectVideoTrackByID as selectVideoTrackByID2, useHMSStore as useHMSStore23 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/VideoTile.jsx
-import React44, { Fragment as Fragment9, useCallback as useCallback9, useMemo as useMemo2, useRef as useRef7, useState as useState23 } from "react";
+import React44, { Fragment as Fragment9, useCallback as useCallback8, useRef as useRef6, useState as useState22 } from "react";
 import { useMedia as useMedia10 } from "react-use";
 import {
   selectAudioTrackByPeerID,
@@ -3554,12 +3588,12 @@ import {
   selectSessionStore as selectSessionStore2,
   selectVideoTrackByID,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
-  useHMSStore as useHMSStore21
+  useHMSStore as useHMSStore22
 } from "@100mslive/react-sdk";
 import { BrbTileIcon, HandIcon as HandIcon4, MicOffIcon as MicOffIcon5 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/TileMenu/TileMenu.jsx
-import React43, { useState as useState22 } from "react";
+import React43, { useState as useState21 } from "react";
 import { useMedia as useMedia9 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID5,
@@ -3567,7 +3601,7 @@ import {
   selectPermissions as selectPermissions10,
   selectTrackByID as selectTrackByID2,
   selectVideoTrackByPeerID,
-  useHMSStore as useHMSStore20,
+  useHMSStore as useHMSStore21,
   useRemoteAVToggle as useRemoteAVToggle2
 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon6, VerticalMenuIcon as VerticalMenuIcon5 } from "@100mslive/react-icons";
@@ -3580,8 +3614,8 @@ import {
   selectSessionStore,
   selectTrackByID,
   useCustomEvent as useCustomEvent3,
-  useHMSActions as useHMSActions16,
-  useHMSStore as useHMSStore19,
+  useHMSActions as useHMSActions15,
+  useHMSStore as useHMSStore20,
   useRemoteAVToggle
 } from "@100mslive/react-sdk";
 import {
@@ -3605,8 +3639,8 @@ var SpotlightActions = ({
     return;
   }
 }) => {
-  const hmsActions = useHMSActions16();
-  const spotlightPeerId = useHMSStore19(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const hmsActions = useHMSActions15();
+  const spotlightPeerId = useHMSStore20(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
   const isTileSpotlighted = spotlightPeerId === peerId;
   const setSpotlightPeerId = (peer) => hmsActions.sessionStore.set(SESSION_STORE_KEY.SPOTLIGHT, peer).catch((err) => ToastManager.addToast({ title: err.description }));
   return /* @__PURE__ */ React42.createElement(
@@ -3649,8 +3683,8 @@ var MinimiseInset = () => {
 };
 var SimulcastLayers = ({ trackId }) => {
   var _a;
-  const track = useHMSStore19(selectTrackByID(trackId));
-  const actions = useHMSActions16();
+  const track = useHMSStore20(selectTrackByID(trackId));
+  const actions = useHMSActions15();
   const bg = useDropdownSelection();
   if (!((_a = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a.length) || track.degraded || !track.enabled) {
     return null;
@@ -3715,8 +3749,8 @@ var SimulcastLayers = ({ trackId }) => {
   ))));
 };
 var TileMenuContent = (props) => {
-  const actions = useHMSActions16();
-  const { removeOthers } = useHMSStore19(selectPermissions9);
+  const actions = useHMSActions15();
+  const { removeOthers } = useHMSStore20(selectPermissions9);
   const {
     videoTrackID,
     audioTrackID,
@@ -3814,20 +3848,20 @@ var TileMenu = ({
   enableSpotlightingPeer = true
 }) => {
   var _a, _b;
-  const [open, setOpen] = useState22(false);
+  const [open, setOpen] = useState21(false);
   const { theme } = useTheme();
-  const localPeerID = useHMSStore20(selectLocalPeerID5);
+  const localPeerID = useHMSStore21(selectLocalPeerID5);
   const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore20(selectPermissions10);
+  const { removeOthers } = useHMSStore21(selectPermissions10);
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
   const showSpotlight = enableSpotlightingPeer;
-  const isPrimaryVideoTrack = ((_a = useHMSStore20(selectVideoTrackByPeerID(peerID))) == null ? void 0 : _a.id) === videoTrackID;
+  const isPrimaryVideoTrack = ((_a = useHMSStore21(selectVideoTrackByPeerID(peerID))) == null ? void 0 : _a.id) === videoTrackID;
   const showPinAction = audioTrackID || videoTrackID && isPrimaryVideoTrack;
-  const track = useHMSStore20(selectTrackByID2(videoTrackID));
+  const track = useHMSStore21(selectTrackByID2(videoTrackID));
   const hideSimulcastLayers = !((_b = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b.length) || track.degraded || !track.enabled;
   const isMobile = useMedia9(config.media.md);
-  const peer = useHMSStore20(selectPeerByID2(peerID));
-  const [showNameChangeModal, setShowNameChangeModal] = useState22(false);
+  const peer = useHMSStore21(selectPeerByID2(peerID));
+  const [showNameChangeModal, setShowNameChangeModal] = useState21(false);
   useDropdownList({ open, name: "TileMenu" });
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
     return null;
@@ -3900,6 +3934,7 @@ var getVideoTileLabel = ({ peerName, isLocal, track }) => {
 };
 
 // src/Prebuilt/components/VideoTile.jsx
+var iconDims = { height: "1rem", width: "1rem" };
 var Tile = ({
   peerId,
   trackId,
@@ -3918,17 +3953,17 @@ var Tile = ({
 }) => {
   var _a, _b;
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID2(peerId);
-  const track = useHMSStore21(trackSelector);
+  const track = useHMSStore22(trackSelector);
   const isMobile = useMedia10(config.media.md);
-  const peerName = useHMSStore21(selectPeerNameByID(peerId));
-  const audioTrack = useHMSStore21(selectAudioTrackByPeerID(peerId));
-  const localPeerID = useHMSStore21(selectLocalPeerID6);
+  const peerName = useHMSStore22(selectPeerNameByID(peerId));
+  const audioTrack = useHMSStore22(selectAudioTrackByPeerID(peerId));
+  const localPeerID = useHMSStore22(selectLocalPeerID6);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isAudioMuted = !useHMSStore21(selectIsPeerAudioEnabled2(peerId));
+  const isAudioMuted = !useHMSStore22(selectIsPeerAudioEnabled2(peerId));
   const isVideoMuted = !(track == null ? void 0 : track.enabled);
-  const [isMouseHovered, setIsMouseHovered] = useState23(false);
+  const [isMouseHovered, setIsMouseHovered] = useState22(false);
   const isVideoDegraded = track == null ? void 0 : track.degraded;
   const isLocal = localPeerID === peerId;
   const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
@@ -3937,35 +3972,20 @@ var Tile = ({
     videoTrackID: track == null ? void 0 : track.id,
     audioTrackID: audioTrack == null ? void 0 : audioTrack.id
   });
-  const spotlighted = useHMSStore21(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
+  const spotlighted = useHMSStore22(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const label = getVideoTileLabel({
     peerName,
     track,
     isLocal
   });
-  const onHoverHandler = useCallback9((event) => {
+  const onHoverHandler = useCallback8((event) => {
     setIsMouseHovered(event.type === "mouseenter");
   }, []);
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   const calculatedHeight = ((_a = ref.current) == null ? void 0 : _a.clientHeight) || "";
   const calculatedWidth = ((_b = ref.current) == null ? void 0 : _b.clientWidth) || "";
   const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
-  const [avatarSize, attribBoxSize] = useMemo2(() => {
-    if (!calculatedWidth || !calculatedHeight) {
-      return [void 0, void 0];
-    }
-    let avatarSize2 = "large";
-    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-      avatarSize2 = "small";
-    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-      avatarSize2 = "medium";
-    }
-    let attribBoxSize2 = "medium";
-    if (calculatedWidth <= 180 || calculatedHeight <= 180) {
-      attribBoxSize2 = "small";
-    }
-    return [avatarSize2, attribBoxSize2];
-  }, [calculatedWidth, calculatedHeight]);
+  const avatarSize = "medium";
   return /* @__PURE__ */ React44.createElement(
     StyledVideoTile.Root,
     {
@@ -4001,7 +4021,7 @@ var Tile = ({
         }
       ),
       isVideoMuted || !isLocal && isAudioOnly ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React44.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null,
-      !hideAudioMuteOnTile ? isAudioMuted ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AudioIndicator, { "data-testid": "participant_audio_mute_icon", size: attribBoxSize }, /* @__PURE__ */ React44.createElement(MicOffIcon5, null)) : /* @__PURE__ */ React44.createElement(StyledVideoTile.AudioIndicator, { size: attribBoxSize }, /* @__PURE__ */ React44.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id, size: attribBoxSize })) : null,
+      !hideAudioMuteOnTile ? isAudioMuted ? /* @__PURE__ */ React44.createElement(PrebuiltAudioIndicator, { "data-testid": "participant_audio_mute_icon" }, /* @__PURE__ */ React44.createElement(MicOffIcon5, { style: iconDims })) : /* @__PURE__ */ React44.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React44.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id })) : null,
       isMouseHovered || isDragabble && isMobile ? /* @__PURE__ */ React44.createElement(
         TileMenu_default,
         {
@@ -4012,7 +4032,7 @@ var Tile = ({
           enableSpotlightingPeer
         }
       ) : null,
-      !hideMetadataOnTile && /* @__PURE__ */ React44.createElement(PeerMetadata, { peerId, size: attribBoxSize }),
+      !hideMetadataOnTile && /* @__PURE__ */ React44.createElement(PeerMetadata, { peerId }),
       /* @__PURE__ */ React44.createElement(
         TileConnection_default,
         {
@@ -4028,11 +4048,11 @@ var Tile = ({
     ) : null
   );
 };
-var PeerMetadata = ({ peerId, size }) => {
-  const metaData = useHMSStore21(selectPeerMetadata2(peerId));
+var PeerMetadata = ({ peerId }) => {
+  const metaData = useHMSStore22(selectPeerMetadata2(peerId));
   const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
-  const isHandRaised = useHMSStore21(selectHasPeerHandRaised2(peerId));
-  return /* @__PURE__ */ React44.createElement(Fragment9, null, isHandRaised ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React44.createElement(HandIcon4, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React44.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React44.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
+  const isHandRaised = useHMSStore22(selectHasPeerHandRaised2(peerId));
+  return /* @__PURE__ */ React44.createElement(Fragment9, null, isHandRaised ? /* @__PURE__ */ React44.createElement(PrebuiltAttributeBox, { "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React44.createElement(HandIcon4, { style: iconDims })) : null, isBRB ? /* @__PURE__ */ React44.createElement(PrebuiltAttributeBox, { "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React44.createElement(BrbTileIcon, { style: iconDims })) : null);
 };
 var VideoTile = React44.memo(Tile);
 var VideoTile_default = VideoTile;
@@ -4072,10 +4092,10 @@ var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
   const isMobile = useMedia11(config.media.md);
   const isLandscape = useMedia11(config.media.ls);
-  const localPeer = useHMSStore22(selectLocalPeer);
+  const localPeer = useHMSStore23(selectLocalPeer);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore22(selectVideoTrackByID2(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isAllowedToPublish = useHMSStore22(selectIsAllowedToPublish2);
+  const videoTrack = useHMSStore23(selectVideoTrackByID2(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isAllowedToPublish = useHMSStore23(selectIsAllowedToPublish2);
   const videoTileProps = useVideoTileContext();
   let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
   if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) && !isMobile) {
@@ -4087,7 +4107,7 @@ var InsetTile = () => {
     width = 240;
     height = width / aspectRatio;
   }
-  const nodeRef = useRef8(null);
+  const nodeRef = useRef7(null);
   useEffect10(() => {
     const node = nodeRef.current;
     if (!node || !window.ResizeObserver) {
@@ -4148,7 +4168,7 @@ var InsetTile = () => {
 
 // src/Prebuilt/components/Pagination.tsx
 import React47, { useEffect as useEffect11 } from "react";
-import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon2 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon3 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
   onPageChange,
@@ -4182,7 +4202,7 @@ var Pagination = ({
         onPageChange(i);
       }
     }
-  ))) : null, /* @__PURE__ */ React47.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React47.createElement(ChevronRightIcon2, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+  ))) : null, /* @__PURE__ */ React47.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React47.createElement(ChevronRightIcon3, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
 };
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
@@ -4226,7 +4246,7 @@ var Grid = React48.forwardRef(
 );
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-import { useEffect as useEffect12, useMemo as useMemo3, useState as useState24 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo2, useState as useState23 } from "react";
 import { useMeasure as useMeasure2, useMedia as useMedia12 } from "react-use";
 import {
   getPeersWithTiles,
@@ -4237,12 +4257,12 @@ var aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4
 var usePagesWithTiles = ({ peers, maxTileCount }) => {
   const vanillaStore = useHMSVanillaStore3();
   const tracksMap = vanillaStore.getState(selectTracksMap3);
-  const peersWithTiles = useMemo3(
+  const peersWithTiles = useMemo2(
     () => getPeersWithTiles(peers, tracksMap, () => false),
     [peers, tracksMap]
   );
   const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
-  const pagesList = useMemo3(() => {
+  const pagesList = useMemo2(() => {
     let sliceStart = 0;
     let remaining = peersWithTiles.length;
     const list = [];
@@ -4264,7 +4284,7 @@ var useTileLayout = ({
   const vanillaStore = useHMSVanillaStore3();
   const [ref, { width, height }] = useMeasure2();
   const isMobile = useMedia12(config.media.lg);
-  const [pagesWithTiles, setPagesWithTiles] = useState24([]);
+  const [pagesWithTiles, setPagesWithTiles] = useState23([]);
   useEffect12(() => {
     if (width === 0 || height === 0) {
       return;
@@ -4332,7 +4352,7 @@ var useTileLayout = ({
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore23(selectLocalPeer2);
+  const localPeer = useHMSStore24(selectLocalPeer2);
   const isMobile = useMedia13(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
@@ -4340,7 +4360,7 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     peers,
     maxTileCount
   });
-  const inputPeers = useMemo4(
+  const inputPeers = useMemo3(
     () => pageList.length === 0 ? localPeer ? [localPeer] : [] : peers,
     [pageList.length, peers, localPeer]
   );
@@ -4353,7 +4373,7 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     maxTileCount,
     edgeToEdge
   });
-  const [page, setPage] = useState25(0);
+  const [page, setPage] = useState24(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect13(() => {
     if (pageSize > 0) {
@@ -4374,11 +4394,11 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 }
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
-import React52, { useEffect as useEffect15, useState as useState27 } from "react";
-import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore24 } from "@100mslive/react-sdk";
+import React52, { useEffect as useEffect15, useState as useState26 } from "react";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore25 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-import React51, { useEffect as useEffect14, useState as useState26 } from "react";
+import React51, { useEffect as useEffect14, useState as useState25 } from "react";
 import { useMedia as useMedia14 } from "react-use";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
@@ -4450,7 +4470,7 @@ var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const isMobile = useMedia14(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
-  const [page, setPage] = useState26(0);
+  const [page, setPage] = useState25(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect14(() => {
     if (pageSize > 0) {
@@ -4471,10 +4491,10 @@ var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
 };
 
 // src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo4 } from "react";
 var useRoleProminencePeers = (prominentRoles, peers, isInsetEnabled) => {
   const pinnedTrack = usePinnedTrack();
-  const [prominentPeers, secondaryPeers] = useMemo5(() => {
+  const [prominentPeers, secondaryPeers] = useMemo4(() => {
     return peers.reduce(
       (acc, peer) => {
         if (pinnedTrack) {
@@ -4515,7 +4535,7 @@ function RoleProminence({
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore24(selectLocalPeer3);
+  const localPeer = useHMSStore25(selectLocalPeer3);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -4525,7 +4545,7 @@ function RoleProminence({
     pageList,
     maxTileCount
   });
-  const [page, setPage] = useState27(0);
+  const [page, setPage] = useState26(0);
   const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
   useEffect15(() => {
     if (pageSize > 0) {
@@ -4546,12 +4566,12 @@ function RoleProminence({
 }
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-import React55, { useEffect as useEffect16, useMemo as useMemo6, useState as useState29 } from "react";
+import React55, { useEffect as useEffect16, useMemo as useMemo5, useState as useState28 } from "react";
 import { useMedia as useMedia15 } from "react-use";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
+import { selectPeersScreenSharing, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-import React54, { useRef as useRef9, useState as useState28 } from "react";
+import React54, { useRef as useRef8, useState as useState27 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
@@ -4559,16 +4579,16 @@ import {
   selectPeerByID as selectPeerByID3,
   selectScreenShareAudioByPeerID,
   selectScreenShareByPeerID,
-  useHMSStore as useHMSStore25
+  useHMSStore as useHMSStore26
 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon3, ShrinkIcon as ShrinkIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
 import React53 from "react";
-import { useHMSActions as useHMSActions17 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions16 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon7, ShareScreenIcon as ShareScreenIcon3 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions17();
+  const hmsActions = useHMSActions16();
   return /* @__PURE__ */ React53.createElement(
     Flex,
     {
@@ -4609,19 +4629,19 @@ var labelStyles = {
   flexShrink: 0
 };
 var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore25(selectLocalPeerID7) === peerId;
-  const track = useHMSStore25(selectScreenShareByPeerID(peerId));
-  const peer = useHMSStore25(selectPeerByID3(peerId));
+  const isLocal = useHMSStore26(selectLocalPeerID7) === peerId;
+  const track = useHMSStore26(selectScreenShareByPeerID(peerId));
+  const peer = useHMSStore26(selectPeerByID3(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const [isMouseHovered, setIsMouseHovered] = useState28(false);
+  const [isMouseHovered, setIsMouseHovered] = useState27(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const fullscreenRef = useRef9(null);
-  const [fullscreen, setFullscreen] = useState28(false);
+  const fullscreenRef = useRef8(null);
+  const [fullscreen, setFullscreen] = useState27(false);
   const isFullscreen = useFullscreen2(fullscreenRef, fullscreen, {
     onClose: () => setFullscreen(false)
   });
   const isFullScreenSupported = screenfull2.isEnabled;
-  const audioTrack = useHMSStore25(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
+  const audioTrack = useHMSStore26(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
     return /* @__PURE__ */ React54.createElement(ScreenshareDisplay, null);
   }
@@ -4675,12 +4695,12 @@ var ScreenshareTile_default = ScreenshareTile;
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   var _a;
-  const peersSharing = useHMSStore26(selectPeersScreenSharing);
+  const peersSharing = useHMSStore27(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState29(0);
+  const [page, setPage] = useState28(0);
   const activeSharePeer = peersSharing[page];
   const isMobile = useMedia15(config.media.md);
-  const secondaryPeers = useMemo6(
+  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]
   );
@@ -4795,23 +4815,23 @@ var GridLayout = ({
   edge_to_edge = false,
   hide_metadata_on_tile = false
 }) => {
-  const peerSharing = useHMSStore27(selectPeerScreenSharing);
+  const peerSharing = useHMSStore28(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore27(selectPeers2);
+  const peers = useHMSStore28(selectPeers2);
   const isRoleProminence = prominentRoles.length && peers.some(
     (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
   ) || pinnedTrack;
-  const updatedPeers = useMemo7(() => {
+  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] = useState30(updatedPeers);
-  const peersSorter = useMemo7(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState30(0);
-  const [mainPage, setMainPage] = useState30(0);
+  const [sortedPeers, setSortedPeers] = useState29(updatedPeers);
+  const peersSorter = useMemo6(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
+  const [pageSize, setPageSize] = useState29(0);
+  const [mainPage, setMainPage] = useState29(0);
   const tileLayout = {
     enableSpotlightingPeer: enable_spotlighting_peer,
     hideParticipantNameOnTile: hide_participant_name_on_tile,
@@ -4866,22 +4886,22 @@ var GridLayout = ({
 };
 
 // src/Prebuilt/layouts/EmbedView.jsx
-import React57, { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo8, useRef as useRef10, useState as useState31 } from "react";
+import React57, { useCallback as useCallback9, useEffect as useEffect18, useMemo as useMemo7, useRef as useRef9, useState as useState30 } from "react";
 import {
   selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   throwErrorHandler,
-  useHMSStore as useHMSStore28,
+  useHMSStore as useHMSStore29,
   useScreenShare as useScreenShare3
 } from "@100mslive/react-sdk";
 var EmbedView = () => {
   return /* @__PURE__ */ React57.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React57.createElement(EmbedComponent, null));
 };
 var EmbebScreenShareView = ({ children }) => {
-  const peers = useHMSStore28(selectPeers3);
-  const peerPresenting = useHMSStore28(selectPeerScreenSharing2);
+  const peers = useHMSStore29(selectPeers3);
+  const peerPresenting = useHMSStore29(selectPeerScreenSharing2);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const smallTilePeers = useMemo8(() => {
+  const smallTilePeers = useMemo7(() => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
     return smallTilePeers2;
   }, [peers, peerPresenting]);
@@ -4896,11 +4916,11 @@ var EmbebScreenShareView = ({ children }) => {
 var EmbedComponent = () => {
   const { amIScreenSharing, toggleScreenShare } = useScreenShare3(throwErrorHandler);
   const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState31(false);
-  const screenShareAttemptInProgress = useRef10(false);
+  const [wasScreenShared, setWasScreenShared] = useState30(false);
+  const screenShareAttemptInProgress = useRef9(false);
   const src = embedConfig.url;
-  const iframeRef = useRef10();
-  const resetEmbedConfig = useCallback10(() => {
+  const iframeRef = useRef9();
+  const resetEmbedConfig = useCallback9(() => {
     if (src) {
       setEmbedConfig({ url: "" });
     }
@@ -4942,25 +4962,25 @@ var EmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
-import React58, { useCallback as useCallback11, useEffect as useEffect19, useRef as useRef11, useState as useState32 } from "react";
+import React58, { useCallback as useCallback10, useEffect as useEffect19, useRef as useRef10, useState as useState31 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 var PDFView = () => {
   return /* @__PURE__ */ React58.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React58.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
-  const ref = useRef11();
+  const ref = useRef10();
   const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState32(false);
+  const [isPDFLoaded, setIsPDFLoaded] = useState31(false);
   let pdfJSURL = define_process_env_default.REACT_APP_PDFJS_IFRAME_URL;
   const { amIScreenSharing, toggleScreenShare } = useScreenShare4(throwErrorHandler2);
   const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
   if (pdfConfig.url && !pdfConfig.file) {
     pdfJSURL = pdfJSURL + "?file=" + encodeURIComponent(pdfConfig.url);
   }
-  const [wasScreenShared, setWasScreenShared] = useState32(false);
-  const screenShareAttemptInProgress = useRef11(false);
-  const iframeRef = useRef11();
-  const resetEmbedConfig = useCallback11(() => {
+  const [wasScreenShared, setWasScreenShared] = useState31(false);
+  const screenShareAttemptInProgress = useRef10(false);
+  const iframeRef = useRef10();
+  const resetEmbedConfig = useCallback10(() => {
     setPDFConfig({ state: false });
   }, [setPDFConfig]);
   useEffect19(() => {
@@ -5031,18 +5051,18 @@ var PDFEmbedComponent = () => {
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
-import React65 from "react";
+import React66 from "react";
 import { useMedia as useMedia20 } from "react-use";
-import { selectAppData as selectAppData3, selectVideoTrackByPeerID as selectVideoTrackByPeerID3, useHMSStore as useHMSStore37 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData3, selectVideoTrackByPeerID as selectVideoTrackByPeerID3, useHMSStore as useHMSStore39 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SidePaneTabs.tsx
-import React62, { useEffect as useEffect24, useState as useState36 } from "react";
+import React63, { useEffect as useEffect25, useState as useState36 } from "react";
 import { useMedia as useMedia19 } from "react-use";
-import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
+import { selectPeerCount as selectPeerCount3, useHMSStore as useHMSStore36 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon10 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.jsx
-import React61, { useCallback as useCallback16, useEffect as useEffect23, useRef as useRef15, useState as useState35 } from "react";
+import React61, { useCallback as useCallback15, useEffect as useEffect23, useRef as useRef14, useState as useState34 } from "react";
 import { useMedia as useMedia18 } from "react-use";
 import {
   HMSNotificationTypes,
@@ -5050,14 +5070,14 @@ import {
   selectPeerNameByID as selectPeerNameByID4,
   selectPermissions as selectPermissions12,
   selectSessionStore as selectSessionStore3,
-  useHMSActions as useHMSActions22,
+  useHMSActions as useHMSActions21,
   useHMSNotifications,
-  useHMSStore as useHMSStore33
+  useHMSStore as useHMSStore34
 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon2, CrossIcon as CrossIcon8, PinIcon as PinIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.jsx
-import React59, { Fragment as Fragment10, useCallback as useCallback13, useEffect as useEffect20, useLayoutEffect, useMemo as useMemo9, useRef as useRef12, useState as useState33 } from "react";
+import React59, { Fragment as Fragment10, useCallback as useCallback12, useEffect as useEffect20, useLayoutEffect, useMemo as useMemo8, useRef as useRef11, useState as useState32 } from "react";
 import { useInView } from "react-intersection-observer";
 import { useMedia as useMedia16 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
@@ -5070,8 +5090,8 @@ import {
   selectMessagesByRole,
   selectPeerNameByID as selectPeerNameByID3,
   selectPermissions as selectPermissions11,
-  useHMSActions as useHMSActions19,
-  useHMSStore as useHMSStore31
+  useHMSActions as useHMSActions18,
+  useHMSStore as useHMSStore32
 } from "@100mslive/react-sdk";
 import { PinIcon as PinIcon2, VerticalMenuIcon as VerticalMenuIcon6 } from "@100mslive/react-icons";
 
@@ -5079,19 +5099,19 @@ import { PinIcon as PinIcon2, VerticalMenuIcon as VerticalMenuIcon6 } from "@100
 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 useCallback12 } from "react";
+import { useCallback as useCallback11 } from "react";
 import {
   selectPeerNameByID as selectPeerNameByID2,
   selectSessionMetadata,
-  useHMSActions as useHMSActions18,
-  useHMSStore as useHMSStore29,
+  useHMSActions as useHMSActions17,
+  useHMSStore as useHMSStore30,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions17();
   const vanillaStore = useHMSVanillaStore5();
-  const pinnedMessage = useHMSStore29(selectSessionMetadata);
-  const setPinnedMessage = useCallback12(
+  const pinnedMessage = useHMSStore30(selectSessionMetadata);
+  const setPinnedMessage = useCallback11(
     /**
      * @param {import("@100mslive/react-sdk").HMSMessage | undefined} message
      */
@@ -5112,11 +5132,11 @@ import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore30
+  useHMSStore as useHMSStore31
 } from "@100mslive/react-sdk";
 var useUnreadCount = ({ role, peerId }) => {
   const unreadCountSelector = role ? selectMessagesUnreadCountByRole(role) : peerId ? selectMessagesUnreadCountByPeerID(peerId) : selectUnreadHMSMessagesCount2;
-  const unreadCount = useHMSStore30(unreadCountSelector);
+  const unreadCount = useHMSStore31(unreadCountSelector);
   return unreadCount;
 };
 
@@ -5155,8 +5175,8 @@ var MessageTypeContainer = ({ left, right }) => {
   );
 };
 var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-  const peerName = useHMSStore31(selectPeerNameByID3(receiver));
-  const localPeerRoleName = useHMSStore31(selectLocalPeerRoleName2);
+  const peerName = useHMSStore32(selectPeerNameByID3(receiver));
+  const localPeerRoleName = useHMSStore32(selectLocalPeerRoleName2);
   if (receiver) {
     return /* @__PURE__ */ React59.createElement(
       MessageTypeContainer,
@@ -5194,7 +5214,7 @@ var getMessageType = ({ roles, receiver }) => {
   return receiver ? "private" : "";
 };
 var ChatActions = ({ onPin, showPinAction }) => {
-  const [open, setOpen] = useState33(false);
+  const [open, setOpen] = useState32(false);
   if (!showPinAction) {
     return null;
   }
@@ -5221,7 +5241,7 @@ var ChatMessage = React59.memo(
   ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
     var _a, _b;
     const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-    const rowRef = useRef12(null);
+    const rowRef = useRef11(null);
     useEffect20(() => {
       if (rowRef.current) {
         setRowHeight(index, rowRef.current.clientHeight);
@@ -5230,9 +5250,9 @@ var ChatMessage = React59.memo(
     const isMobile = useMedia16(config.media.md);
     const { elements } = useRoomLayoutConferencingScreen();
     const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
-    const hmsActions = useHMSActions19();
-    const localPeerId = useHMSStore31(selectLocalPeerID8);
-    const permissions = useHMSStore31(selectPermissions11);
+    const hmsActions = useHMSActions18();
+    const localPeerId = useHMSStore32(selectLocalPeerID8);
+    const permissions = useHMSStore32(selectPermissions11);
     const messageType = getMessageType({
       roles: message.recipientRoles,
       receiver: message.recipientPeer
@@ -5367,11 +5387,11 @@ var ChatList = React59.forwardRef(
   }
 );
 var VirtualizedChatMessages = React59.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
-  const rowHeights = useRef12({});
+  const rowHeights = useRef11({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
   }
-  const setRowHeight = useCallback13(
+  const setRowHeight = useCallback12(
     (index, size) => {
       listRef.current.resetAfterIndex(0);
       rowHeights.current = __spreadProps(__spreadValues({}, rowHeights.current), { [index]: size });
@@ -5413,8 +5433,8 @@ var VirtualizedChatMessages = React59.forwardRef(({ messages, unreadCount = 0, s
 var ChatBody = React59.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
   var _a;
   const storeMessageSelector = role ? selectMessagesByRole(role) : peerId ? selectMessagesByPeerID(peerId) : selectHMSMessages;
-  let messages = useHMSStore31(storeMessageSelector);
-  messages = useMemo9(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
+  let messages = useHMSStore32(storeMessageSelector);
+  messages = useMemo8(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
   const isMobile = useMedia16(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const unreadCount = useUnreadCount({ role, peerId });
@@ -5453,23 +5473,23 @@ var ChatBody = React59.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
 });
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
-import React60, { useCallback as useCallback15, useEffect as useEffect22, useRef as useRef14, useState as useState34 } from "react";
+import React60, { useCallback as useCallback14, useEffect as useEffect22, useRef as useRef13, useState as useState33 } from "react";
 import { useMedia as useMedia17 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { useHMSActions as useHMSActions21 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions20 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, SendIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AppData/useChatState.js
-import { useCallback as useCallback14 } from "react";
-import { selectAppData as selectAppData2, useHMSActions as useHMSActions20, useHMSStore as useHMSStore32 } from "@100mslive/react-sdk";
+import { useCallback as useCallback13 } from "react";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions19, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions20();
-  let chatDraftMessage = useHMSStore32(selectAppData2(APP_DATA.chatDraft));
+  const hmsActions = useHMSActions19();
+  let chatDraftMessage = useHMSStore33(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
-  const setDraftMessage = useCallback14(
+  const setDraftMessage = useCallback13(
     (message) => {
       hmsActions.setAppData(APP_DATA.chatDraft, message, true);
     },
@@ -5479,9 +5499,9 @@ var useChatDraftMessage = () => {
 };
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-import { useEffect as useEffect21, useRef as useRef13 } from "react";
+import { useEffect as useEffect21, useRef as useRef12 } from "react";
 var useEmojiPickerStyles = (showing) => {
-  const ref = useRef13(null);
+  const ref = useRef12(null);
   useEffect21(() => {
     if (showing) {
       setTimeout(() => {
@@ -5530,7 +5550,7 @@ var TextArea = styled("textarea", {
   }
 });
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState34(false);
+  const [showEmoji, setShowEmoji] = useState33(false);
   const ref = useEmojiPickerStyles(showEmoji);
   return /* @__PURE__ */ React60.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React60.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React60.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React60.createElement(EmojiIcon3, null))), /* @__PURE__ */ React60.createElement(Popover.Portal, null, /* @__PURE__ */ React60.createElement(
     Popover.Content,
@@ -5562,13 +5582,13 @@ var ChatFooter = ({
   children
 }) => {
   var _a;
-  const hmsActions = useHMSActions21();
-  const inputRef = useRef14(null);
+  const hmsActions = useHMSActions20();
+  const inputRef = useRef13(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia17(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isOverlayChat = (_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay;
-  const sendMessage = useCallback15(() => __async(void 0, null, function* () {
+  const sendMessage = useCallback14(() => __async(void 0, null, function* () {
     var _a2;
     const message = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value;
     if (!message || !message.trim().length) {
@@ -5683,8 +5703,8 @@ var ChatFooter = ({
 // src/Prebuilt/components/Chat/Chat.jsx
 var PINNED_MESSAGE_LENGTH = 80;
 var PinnedMessage = ({ clearPinnedMessage }) => {
-  const permissions = useHMSStore33(selectPermissions12);
-  const pinnedMessage = useHMSStore33(selectSessionStore3(SESSION_STORE_KEY.PINNED_MESSAGE));
+  const permissions = useHMSStore34(selectPermissions12);
+  const pinnedMessage = useHMSStore34(selectSessionStore3(SESSION_STORE_KEY.PINNED_MESSAGE));
   const formattedPinnedMessage = (pinnedMessage == null ? void 0 : pinnedMessage.length) && pinnedMessage.length > PINNED_MESSAGE_LENGTH ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...` : pinnedMessage;
   return pinnedMessage ? /* @__PURE__ */ React61.createElement(
     Flex,
@@ -5722,15 +5742,15 @@ var Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  const peerName = useHMSStore33(selectPeerNameByID4(peerSelector));
-  const [chatOptions, setChatOptions] = useState35({
+  const peerName = useHMSStore34(selectPeerNameByID4(peerSelector));
+  const [chatOptions, setChatOptions] = useState34({
     role: roleSelector || "",
     peerId: peerSelector && peerName ? peerSelector : "",
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : "Everyone"
   });
-  const [isSelectorOpen] = useState35(false);
-  const listRef = useRef15(null);
-  const hmsActions = useHMSActions22();
+  const [isSelectorOpen] = useState34(false);
+  const listRef = useRef14(null);
+  const hmsActions = useHMSActions21();
   const { setPinnedMessage } = useSetPinnedMessage();
   useEffect23(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
@@ -5750,8 +5770,8 @@ var Chat = ({ screenType }) => {
     const currentRef = listRef.current._outerRef;
     isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
   }
-  const messagesCount = useHMSStore33(storeMessageSelector) || 0;
-  const scrollToBottom = useCallback16(
+  const messagesCount = useHMSStore34(storeMessageSelector) || 0;
+  const scrollToBottom = useCallback15(
     (unreadCount = 0) => {
       var _a2;
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -5851,6 +5871,65 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   );
 };
 
+// src/Prebuilt/components/Footer/PaginatedParticipants.tsx
+import React62, { useEffect as useEffect24, useRef as useRef15, useState as useState35 } from "react";
+import { useMeasure as useMeasure3 } from "react-use";
+import { FixedSizeList as FixedSizeList2 } from "react-window";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom6, useHMSStore as useHMSStore35, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon4, CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
+var PaginatedParticipants = ({ roleName, onBack }) => {
+  const { peers, total, loadPeers, loadMorePeers } = usePaginatedParticipants2({ role: roleName, limit: 20 });
+  const [search, setSearch] = useState35("");
+  const [isLoading, setIsLoading] = useState35(false);
+  const filteredPeers = peers.filter((p) => {
+    var _a;
+    return (_a = p.name) == null ? void 0 : _a.toLowerCase().includes(search);
+  });
+  const isConnected = useHMSStore35(selectIsConnectedToRoom6);
+  const [ref, { width }] = useMeasure3();
+  const containerRef = useRef15(null);
+  const height = ROW_HEIGHT * peers.length;
+  const resetSidePane = useSidepaneReset();
+  const hasNext = total > peers.length;
+  useEffect24(() => {
+    loadPeers();
+  }, []);
+  return /* @__PURE__ */ React62.createElement(Flex, { ref, direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React62.createElement(Flex, { align: "center" }, /* @__PURE__ */ React62.createElement(Flex, { align: "center", css: { flex: "1 1 0", cursor: "pointer" }, onClick: onBack }, /* @__PURE__ */ React62.createElement(ChevronLeftIcon4, null), /* @__PURE__ */ React62.createElement(Text, { variant: "lg", css: { flex: "1 1 0" } }, "Participants")), /* @__PURE__ */ React62.createElement(
+    IconButton,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        resetSidePane();
+      },
+      "data-testid": "close_sidepane"
+    },
+    /* @__PURE__ */ React62.createElement(CrossIcon9, null)
+  )), /* @__PURE__ */ React62.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React62.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React62.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React62.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React62.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React62.createElement(
+    FixedSizeList2,
+    {
+      itemSize: ROW_HEIGHT,
+      itemData: { peerList: filteredPeers, isConnected: isConnected === true },
+      itemKey,
+      itemCount: filteredPeers.length,
+      width,
+      height,
+      outerRef: containerRef
+    },
+    VirtualizedParticipantItem
+  ), hasNext ? /* @__PURE__ */ React62.createElement(Flex, { justify: "center", css: { w: "100%" } }, /* @__PURE__ */ React62.createElement(
+    Button,
+    {
+      css: { w: "max-content", p: "$4" },
+      onClick: () => {
+        setIsLoading(true);
+        loadMorePeers().catch(console.error).finally(() => setIsLoading(false));
+      },
+      disabled: isLoading
+    },
+    isLoading ? /* @__PURE__ */ React62.createElement(Loading, { size: 16 }) : "Load More"
+  )) : null)));
+};
+
 // src/Prebuilt/components/SidePaneTabs.tsx
 var tabTriggerCSS = {
   color: "$on_surface_high",
@@ -5861,23 +5940,25 @@ var tabTriggerCSS = {
   justifyContent: "center"
 };
 var ParticipantCount2 = ({ count }) => {
-  return count < 1e3 ? /* @__PURE__ */ React62.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React62.createElement(Tooltip, { title: count }, /* @__PURE__ */ React62.createElement("span", null, "(", getFormattedCount(count), ")"));
+  return count < 1e3 ? /* @__PURE__ */ React63.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React63.createElement(Tooltip, { title: count }, /* @__PURE__ */ React63.createElement("span", null, "(", getFormattedCount(count), ")"));
 };
-var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+var SidePaneTabs = React63.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
   var _a;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
   const [activeTab, setActiveTab] = useState36(active);
-  const peerCount = useHMSStore34(selectPeerCount3);
+  const [activeRole, setActiveRole] = useState36("");
+  const peerCount = useHMSStore36(selectPeerCount3);
   const { elements } = useRoomLayoutConferencingScreen();
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
   const hideTabs = !(showChat && showParticipants);
   const isMobile = useMedia19(config.media.md);
   const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
+  const { off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  useEffect24(() => {
+  useEffect25(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
     } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
@@ -5886,10 +5967,26 @@ var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
       resetSidePane();
     }
   }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect24(() => {
+  useEffect25(() => {
     setActiveTab(active);
   }, [active]);
-  return /* @__PURE__ */ React62.createElement(
+  if (activeRole) {
+    return /* @__PURE__ */ React63.createElement(
+      Flex,
+      {
+        direction: "column",
+        css: {
+          color: "$on_primary_high",
+          h: "100%",
+          marginTop: hideControls && isOverlayChat ? "$17" : "0",
+          transition: "margin 0.3s ease-in-out",
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ React63.createElement(Box, { css: { position: "absolute", left: 0, top: 0, size: "100%", zIndex: 21, bg: "$surface_dim" } }, /* @__PURE__ */ React63.createElement(PaginatedParticipants, { roleName: activeRole, onBack: () => setActiveRole("") }))
+    );
+  }
+  return /* @__PURE__ */ React63.createElement(
     Flex,
     {
       direction: "column",
@@ -5900,7 +5997,7 @@ var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         transition: "margin 0.3s ease-in-out"
       }
     },
-    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React62.createElement(Chat, { screenType }) : /* @__PURE__ */ React62.createElement(React62.Fragment, null, hideTabs ? /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React62.createElement("span", null, "Participants ", /* @__PURE__ */ React62.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React62.createElement(Chat, { screenType }) : /* @__PURE__ */ React62.createElement(ParticipantList, null)) : /* @__PURE__ */ React62.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React63.createElement(Chat, { screenType }) : /* @__PURE__ */ React63.createElement(React63.Fragment, null, hideTabs ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React63.createElement("span", null, "Participants ", /* @__PURE__ */ React63.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React63.createElement(Chat, { screenType }) : /* @__PURE__ */ React63.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })) : /* @__PURE__ */ React63.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -5910,7 +6007,7 @@ var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           size: "100%"
         }
       },
-      /* @__PURE__ */ React62.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React62.createElement(
+      /* @__PURE__ */ React63.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React63.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.CHAT,
@@ -5920,7 +6017,7 @@ var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Chat"
-      ), /* @__PURE__ */ React62.createElement(
+      ), /* @__PURE__ */ React63.createElement(
         Tabs.Trigger,
         {
           value: SIDE_PANE_OPTIONS.PARTICIPANTS,
@@ -5930,15 +6027,15 @@ var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
           })
         },
         "Participants ",
-        /* @__PURE__ */ React62.createElement(ParticipantCount2, { count: peerCount })
+        /* @__PURE__ */ React63.createElement(ParticipantCount2, { count: peerCount })
       )),
-      /* @__PURE__ */ React62.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React62.createElement(ParticipantList, null)),
-      /* @__PURE__ */ React62.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React62.createElement(Chat, { screenType }))
+      /* @__PURE__ */ React63.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React63.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
+      /* @__PURE__ */ React63.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React63.createElement(Chat, { screenType }))
     )),
-    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React62.createElement(
+    isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React63.createElement(
       IconButton,
       {
-        css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
+        css: { position: "absolute", right: "$9", top: "$11", "@md": { top: "$8", right: "$6" } },
         onClick: (e) => {
           e.stopPropagation();
           if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -5949,22 +6046,22 @@ var SidePaneTabs = React62.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         },
         "data-testid": "close_chat"
       },
-      /* @__PURE__ */ React62.createElement(CrossIcon9, null)
+      /* @__PURE__ */ React63.createElement(CrossIcon10, null)
     )
   );
 });
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
-import React64, { Fragment as Fragment12, useState as useState38 } from "react";
-import { selectPermissions as selectPermissions13, useHMSStore as useHMSStore36, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
-import { ColoredHandIcon, CrossIcon as CrossIcon10, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
+import React65, { Fragment as Fragment12, useState as useState38 } from "react";
+import { selectPermissions as selectPermissions13, useHMSStore as useHMSStore38, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
+import { ColoredHandIcon, CrossIcon as CrossIcon11, GoLiveIcon as GoLiveIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/images/rtmp.png
 var rtmp_default = "data:image/png;base64,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";
 
 // src/Prebuilt/components/Streaming/HLSStreaming.jsx
-import React63, { Fragment as Fragment11, useCallback as useCallback17, useEffect as useEffect25, useState as useState37 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions23, useHMSStore as useHMSStore35, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+import React64, { Fragment as Fragment11, useCallback as useCallback16, useEffect as useEffect26, useState as useState37 } from "react";
+import { selectRoomID, useHMSActions as useHMSActions22, useHMSStore as useHMSStore37, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5983,7 +6080,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: "Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.",
-        icon: /* @__PURE__ */ React63.createElement(SupportIcon, null)
+        icon: /* @__PURE__ */ React64.createElement(SupportIcon, null)
       };
       break;
     }
@@ -5991,7 +6088,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: "HLS Viewer",
         content: "Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.",
-        icon: /* @__PURE__ */ React63.createElement(EyeOpenIcon, null)
+        icon: /* @__PURE__ */ React64.createElement(EyeOpenIcon, null)
       };
       break;
     }
@@ -5999,7 +6096,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
-        icon: /* @__PURE__ */ React63.createElement(WrenchIcon, null),
+        icon: /* @__PURE__ */ React64.createElement(WrenchIcon, null),
         order: 1
       };
   }
@@ -6008,7 +6105,7 @@ var getCardData = (roleName, roomId) => {
 };
 var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
   const [copied, setCopied] = useState37(false);
-  return isHLSRunning ? /* @__PURE__ */ React63.createElement(
+  return isHLSRunning ? /* @__PURE__ */ React64.createElement(
     Box,
     {
       key: title,
@@ -6019,9 +6116,9 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         borderRadius: "$2"
       }
     },
-    /* @__PURE__ */ React63.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React63.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-    /* @__PURE__ */ React63.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React64.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+    /* @__PURE__ */ React64.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+    /* @__PURE__ */ React64.createElement(
       Button,
       {
         variant: "standard",
@@ -6033,24 +6130,24 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
         icon: true
       },
-      copied ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, "Link copied!") : /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+      copied ? /* @__PURE__ */ React64.createElement(React64.Fragment, null, "Link copied!") : /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
     )
   ) : null;
 };
 var HLSStreaming = ({ onBack }) => {
   const roleNames = useFilteredRoles();
-  const roomId = useHMSStore35(selectRoomID);
+  const roomId = useHMSStore37(selectRoomID);
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
   const [showLinks, setShowLinks] = useState37(false);
-  return !showLinks ? /* @__PURE__ */ React63.createElement(Container, { rounded: true }, /* @__PURE__ */ React63.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React63.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React63.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React63.createElement(StartHLS, null)) : /* @__PURE__ */ React63.createElement(Container, { rounded: true }, /* @__PURE__ */ React63.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React63.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React63.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+  return !showLinks ? /* @__PURE__ */ React64.createElement(Container, { rounded: true }, /* @__PURE__ */ React64.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React64.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon2, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React64.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React64.createElement(StartHLS, null)) : /* @__PURE__ */ React64.createElement(Container, { rounded: true }, /* @__PURE__ */ React64.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React64.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React64.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
 };
 var StartHLS = () => {
   const [record, setRecord] = useState37(false);
   const [error, setError] = useState37(false);
-  const hmsActions = useHMSActions23();
+  const hmsActions = useHMSActions22();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback17(
+  const startHLS = useCallback16(
     (variants) => __async(void 0, null, function* () {
       try {
         if (isHLSStarted) {
@@ -6069,7 +6166,7 @@ var StartHLS = () => {
     }),
     [hmsActions, record, isHLSStarted, setHLSStarted]
   );
-  return /* @__PURE__ */ React63.createElement(Fragment11, null, /* @__PURE__ */ React63.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React63.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React63.createElement(ErrorText, { error }), /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(Fragment11, null, /* @__PURE__ */ React64.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React64.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React64.createElement(ErrorText, { error }), /* @__PURE__ */ React64.createElement(
     Button,
     {
       "data-testid": "start_hls",
@@ -6078,21 +6175,21 @@ var StartHLS = () => {
       onClick: () => startHLS(),
       disabled: isHLSStarted
     },
-    isHLSStarted ? /* @__PURE__ */ React63.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React63.createElement(GoLiveIcon2, null),
+    isHLSStarted ? /* @__PURE__ */ React64.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React64.createElement(GoLiveIcon2, null),
     isHLSStarted ? "Starting stream..." : "Go Live"
-  )), /* @__PURE__ */ React63.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React63.createElement(Text, null, /* @__PURE__ */ React63.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React63.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
+  )), /* @__PURE__ */ React64.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React64.createElement(Text, null, /* @__PURE__ */ React64.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React64.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
 };
 var EndHLS = ({ setShowLinks }) => {
-  const hmsActions = useHMSActions23();
+  const hmsActions = useHMSActions22();
   const [inProgress, setInProgress] = useState37(false);
   const [error, setError] = useState37("");
   const { isHLSRunning } = useRecordingStreaming6();
-  useEffect25(() => {
+  useEffect26(() => {
     if (inProgress && !isHLSRunning) {
       setInProgress(false);
     }
   }, [inProgress, isHLSRunning]);
-  return /* @__PURE__ */ React63.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React63.createElement(ErrorText, { error }), /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React64.createElement(ErrorText, { error }), /* @__PURE__ */ React64.createElement(
     Button,
     {
       "data-testid": "stop_hls",
@@ -6111,23 +6208,23 @@ var EndHLS = ({ setShowLinks }) => {
         }
       })
     },
-    /* @__PURE__ */ React63.createElement(EndStreamIcon2, null),
+    /* @__PURE__ */ React64.createElement(EndStreamIcon2, null),
     "End Stream"
-  ), /* @__PURE__ */ React63.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React63.createElement(PeopleIcon3, null), " Invite People"));
+  ), /* @__PURE__ */ React64.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React64.createElement(PeopleIcon3, null), " Invite People"));
 };
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
 var StreamingLanding = () => {
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming7();
-  const permissions = useHMSStore36(selectPermissions13);
+  const permissions = useHMSStore38(selectPermissions13);
   const [showHLS, setShowHLS] = useState38(isHLSRunning);
   const [showRTMP, setShowRTMP] = useState38(isRTMPRunning);
   if (!(permissions == null ? void 0 : permissions.hlsStreaming) && !(permissions == null ? void 0 : permissions.rtmpStreaming)) {
     toggleStreaming();
     return null;
   }
-  return /* @__PURE__ */ React64.createElement(Fragment12, null, /* @__PURE__ */ React64.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(Fragment12, null, /* @__PURE__ */ React65.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React65.createElement(
     Box,
     {
       css: {
@@ -6137,8 +6234,8 @@ var StreamingLanding = () => {
         r: "$round"
       }
     },
-    /* @__PURE__ */ React64.createElement(ColoredHandIcon, { width: 40, height: 40 })
-  ), /* @__PURE__ */ React64.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React64.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React64.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React64.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React64.createElement(CrossIcon10, null))), /* @__PURE__ */ React64.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.createElement(ColoredHandIcon, { width: 40, height: 40 })
+  ), /* @__PURE__ */ React65.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React65.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React65.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React65.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React65.createElement(CrossIcon11, null))), /* @__PURE__ */ React65.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React65.createElement(
     StreamCard,
     {
       testId: "hls_stream",
@@ -6148,7 +6245,7 @@ var StreamingLanding = () => {
       onClick: () => setShowHLS(true),
       Icon: GoLiveIcon3
     }
-  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React64.createElement(
+  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React65.createElement(
     StreamCard,
     {
       testId: "rtmp_stream",
@@ -6160,7 +6257,7 @@ var StreamingLanding = () => {
       },
       imgSrc: rtmp_default
     }
-  ), showHLS && /* @__PURE__ */ React64.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React64.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+  ), showHLS && /* @__PURE__ */ React65.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React65.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
 };
 
 // src/Prebuilt/layouts/SidePane.tsx
@@ -6171,15 +6268,15 @@ var SidePane = ({
 }) => {
   var _a, _b;
   const isMobile = useMedia20(config.media.md);
-  const sidepane = useHMSStore37(selectAppData3(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore37(selectAppData3(APP_DATA.activeScreensharePeerId));
-  const trackId = (_a = useHMSStore37(selectVideoTrackByPeerID3(activeScreensharePeerId))) == null ? void 0 : _a.id;
+  const sidepane = useHMSStore39(selectAppData3(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore39(selectAppData3(APP_DATA.activeScreensharePeerId));
+  const trackId = (_a = useHMSStore39(selectVideoTrackByPeerID3(activeScreensharePeerId))) == null ? void 0 : _a.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = /* @__PURE__ */ React65.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
+    ViewComponent = /* @__PURE__ */ React66.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = /* @__PURE__ */ React65.createElement(StreamingLanding, null);
+    ViewComponent = /* @__PURE__ */ React66.createElement(StreamingLanding, null);
   }
   if (!ViewComponent && !trackId) {
     return null;
@@ -6192,7 +6289,7 @@ var SidePane = ({
     objectFit: tileProps == null ? void 0 : tileProps.video_object_fit
   };
   const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay);
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     Flex,
     {
       direction: "column",
@@ -6205,16 +6302,17 @@ var SidePane = ({
         "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
       }
     },
-    trackId && /* @__PURE__ */ React65.createElement(
+    trackId && /* @__PURE__ */ React66.createElement(
       VideoTile_default,
       __spreadValues({
         peerId: activeScreensharePeerId,
         trackId,
+        width: "100%",
         height: 225,
         rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
       }, tileLayout)
     ),
-    !!ViewComponent && /* @__PURE__ */ React65.createElement(
+    !!ViewComponent && /* @__PURE__ */ React66.createElement(
       Box,
       {
         css: {
@@ -6250,10 +6348,10 @@ var SidePane = ({
 var SidePane_default = SidePane;
 
 // src/Prebuilt/layouts/WaitingView.jsx
-import React66 from "react";
+import React67 from "react";
 import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React66.memo(() => {
-  return /* @__PURE__ */ React66.createElement(
+var WaitingView = React67.memo(() => {
+  return /* @__PURE__ */ React67.createElement(
     Box,
     {
       css: {
@@ -6267,7 +6365,7 @@ var WaitingView = React66.memo(() => {
       },
       "data-testid": "waiting_view"
     },
-    /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React67.createElement(
       Flex,
       {
         align: "center",
@@ -6281,8 +6379,8 @@ var WaitingView = React66.memo(() => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React66.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React66.createElement(
+      /* @__PURE__ */ React67.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React67.createElement(
         Flex,
         {
           direction: "column",
@@ -6292,28 +6390,28 @@ var WaitingView = React66.memo(() => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React66.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React66.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+        /* @__PURE__ */ React67.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React67.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
       )
     )
   );
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React67.lazy(() => import("./HLSView-IQRPLYNH.js"));
+var HLSView = React68.lazy(() => import("./HLSView-DDGPZHA2.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
   hideControls = false
 }) => {
   var _a, _b;
-  const localPeerRole = useHMSStore38(selectLocalPeerRoleName3);
-  const isConnected = useHMSStore38(selectIsConnectedToRoom6);
-  const hmsActions = useHMSActions24();
+  const localPeerRole = useHMSStore40(selectLocalPeerRoleName3);
+  const isConnected = useHMSStore40(selectIsConnectedToRoom7);
+  const hmsActions = useHMSActions23();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  useEffect26(() => {
+  useEffect27(() => {
     if (!isConnected) {
       return;
     }
@@ -6324,17 +6422,17 @@ var VideoStreamingSection = ({
   }
   let ViewComponent;
   if (screenType === "hls_live_streaming") {
-    ViewComponent = /* @__PURE__ */ React67.createElement(HLSView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(HLSView, null);
   } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = /* @__PURE__ */ React67.createElement(WaitingView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(WaitingView, null);
   } else if (pdfAnnotatorActive) {
-    ViewComponent = /* @__PURE__ */ React67.createElement(PDFView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(PDFView, null);
   } else if (urlToIframe) {
-    ViewComponent = /* @__PURE__ */ React67.createElement(EmbedView, null);
+    ViewComponent = /* @__PURE__ */ React68.createElement(EmbedView, null);
   } else {
-    ViewComponent = /* @__PURE__ */ React67.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
+    ViewComponent = /* @__PURE__ */ React68.createElement(GridLayout, __spreadValues({}, (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid));
   }
-  return /* @__PURE__ */ React67.createElement(Suspense2, { fallback: /* @__PURE__ */ React67.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(Suspense2, { fallback: /* @__PURE__ */ React68.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React68.createElement(
     Flex,
     {
       css: {
@@ -6344,7 +6442,7 @@ var VideoStreamingSection = ({
       }
     },
     ViewComponent,
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(
       SidePane_default,
       {
         screenType,
@@ -6360,15 +6458,15 @@ var Conference = () => {
   var _a, _b, _c, _d, _e;
   const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const { userName, endpoints } = useHMSPrebuiltContext();
+  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore39(selectRoomState);
+  const roomState = useHMSStore41(selectRoomState);
   const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore39(selectIsConnectedToRoom7);
-  const hmsActions = useHMSActions25();
+  const isConnectedToRoom = useHMSStore41(selectIsConnectedToRoom8);
+  const hmsActions = useHMSActions24();
   const [hideControls, setHideControls] = useState39(false);
-  const dropdownList = useHMSStore39(selectAppData4(APP_DATA.dropdownList));
+  const dropdownList = useHMSStore41(selectAppData4(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef16();
   const footerRef = useRef16();
@@ -6382,7 +6480,7 @@ var Conference = () => {
     }
   };
   const autoRoomJoined = useRef16(isPreviewScreenEnabled);
-  useEffect27(() => {
+  useEffect28(() => {
     let timeout = null;
     dropdownListRef.current = dropdownList || [];
     if (dropdownListRef.current.length === 0) {
@@ -6397,7 +6495,7 @@ var Conference = () => {
       clearTimeout(timeout);
     };
   }, [dropdownList, hideControls, isMobileDevice]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!roomId) {
       navigate(`/`);
       return;
@@ -6412,7 +6510,7 @@ var Conference = () => {
         navigate(`/preview/${roomId || ""}`);
     }
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting && !autoRoomJoined.current) {
       hmsActions.join({
         userName,
@@ -6427,15 +6525,16 @@ var Conference = () => {
       autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-  useEffect27(() => {
+  useEffect28(() => {
+    onJoinFunc == null ? void 0 : onJoinFunc();
     return () => {
       PictureInPicture.stop().catch((error) => console.error("stopping pip", error));
     };
   }, []);
-  if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React68.createElement(FullPageProgress_default, { text: "Joining..." });
+  if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
+    return /* @__PURE__ */ React69.createElement(FullPageProgress_default, { text: roomState === HMSRoomState.Connecting ? "Joining..." : "" });
   }
-  return /* @__PURE__ */ React68.createElement(React68.Fragment, null, isHLSStarted ? /* @__PURE__ */ React68.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React68.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React68.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, isHLSStarted ? /* @__PURE__ */ React69.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React69.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React69.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React69.createElement(
     Box,
     {
       ref: headerRef,
@@ -6449,8 +6548,8 @@ var Conference = () => {
       },
       "data-testid": "header"
     },
-    /* @__PURE__ */ React68.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(Header, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React69.createElement(
     Box,
     {
       css: {
@@ -6468,7 +6567,7 @@ var Conference = () => {
       "data-testid": "conferencing",
       onClick: toggleControls
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       VideoStreamingSection,
       {
         screenType: screenProps.screenType,
@@ -6476,7 +6575,7 @@ var Conference = () => {
         hideControls
       }
     )
-  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React68.createElement(
+  ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ React69.createElement(
     Box,
     {
       ref: footerRef,
@@ -6493,11 +6592,11 @@ var Conference = () => {
       },
       "data-testid": "footer"
     },
-    /* @__PURE__ */ React68.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), /* @__PURE__ */ React68.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React68.createElement(HLSFailureModal, null), /* @__PURE__ */ React68.createElement(ActivatedPIP, null)));
+    /* @__PURE__ */ React69.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), /* @__PURE__ */ React69.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React69.createElement(HLSFailureModal, null), /* @__PURE__ */ React69.createElement(ActivatedPIP, null)));
 };
 var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-JD35TNH4.js.map
+//# sourceMappingURL=conference-N7S47TDK.js.map