@100mslive/roomkit-react 0.1.1 → 0.1.2-alpha.1

package/dist/{conference-YHO2J3Z6.js → conference-IKSFGLVK.js}

@@ -6,7 +6,7 @@ import {
   VideoList_default,
   VideoTile_default,
   useAppConfig
-} from "./chunk-TEHZYXCJ.js";
+} from "./chunk-G56Z3JA5.js";
 import {
   AudioVideoToggle,
   Button,
@@ -39,6 +39,7 @@ import {
   Slider,
   StreamActions,
   Switch,
+  ThemeTypes,
   ToastManager,
   UserPreferencesKeys,
   Video,
@@ -58,6 +59,7 @@ import {
   useNavigation,
   usePDFAnnotator,
   usePinnedTrack,
+  useRoomLayout,
   useSetAppDataByKey,
   useSetUiSettings,
   useSidepaneToggle,
@@ -68,17 +70,17 @@ import {
   useUserPreferences,
   useWaitingViewerRole,
   useWhiteboardMetadata
-} from "./chunk-ZET2HMGS.js";
+} from "./chunk-TZJCHZPD.js";
 import {
   Loading,
   useIsFeatureEnabled,
   useRolePreference
-} from "./chunk-BSQIN5RC.js";
+} from "./chunk-DH3QSV4E.js";
 import {
   Box,
   Flex,
   Text
-} from "./chunk-A2PNZIK7.js";
+} from "./chunk-INRXWU7L.js";
 import {
   APP_DATA,
   DEFAULT_HLS_VIEWER_ROLE,
@@ -106,39 +108,92 @@ import {
   isMacOS,
   isSafari,
   styled
-} from "./chunk-4VY5NUK7.js";
+} from "./chunk-DRKV2LAC.js";
 
 // src/Prebuilt/components/conference.jsx
 init_define_process_env();
-import React39, { useEffect as useEffect9, useRef as useRef7, useState as useState17 } from "react";
+import React38, { useEffect as useEffect9, useRef as useRef7, useState as useState17 } from "react";
 import { useParams } from "react-router-dom";
 import { usePrevious } from "react-use";
 import {
   HMSRoomState,
-  selectAppData as selectAppData4,
+  selectAppData as selectAppData3,
   selectIsConnectedToRoom as selectIsConnectedToRoom2,
   selectRoomState,
-  useHMSActions as useHMSActions15,
+  useHMSActions as useHMSActions16,
   useHMSStore as useHMSStore21
 } from "@100mslive/react-sdk";
 
+// src/Prebuilt/components/Notifications/HLSFailureModal.jsx
+init_define_process_env();
+import React, { useCallback, useState } from "react";
+import { selectHLSState, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
+function HLSFailureModal() {
+  const { hlsError } = useHMSStore(selectHLSState).error || false;
+  const [openModal, setOpenModal] = useState(!!hlsError);
+  const hmsActions = useHMSActions();
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const startHLS = useCallback(() => __async(this, null, function* () {
+    try {
+      if (isHLSStarted) {
+        return;
+      }
+      setHLSStarted(true);
+      yield hmsActions.startHLSStreaming({});
+    } catch (error) {
+      if (error.message.includes("invalid input")) {
+        yield startHLS();
+        return;
+      }
+      setHLSStarted(false);
+    }
+  }), [hmsActions, isHLSStarted, setHLSStarted]);
+  return hlsError ? /* @__PURE__ */ React.createElement(
+    Dialog.Root,
+    {
+      open: openModal,
+      onOpenChange: (value) => {
+        if (!value) {
+          setOpenModal(false);
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, null), /* @__PURE__ */ React.createElement(Dialog.Content, { css: { w: "min(360px, 90%)" } }, /* @__PURE__ */ React.createElement(
+      Dialog.Title,
+      {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          borderBottom: "1px solid $border_default",
+          mt: "$4"
+        }
+      },
+      /* @__PURE__ */ React.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, "Failed to Go Live")
+    ), /* @__PURE__ */ React.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ React.createElement(Button, { css: { w: "100%" } }, "Go Live"))))
+  ) : null;
+}
+
 // src/Prebuilt/layouts/mainView.jsx
 init_define_process_env();
-import React11, { Suspense, useEffect as useEffect5 } from "react";
+import React12, { Suspense, useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
 import {
   selectIsConnectedToRoom,
   selectLocalPeerRoleName as selectLocalPeerRoleName3,
   selectPeerScreenSharing as selectPeerScreenSharing3,
   selectPeerSharingAudio,
   selectPeerSharingVideoPlaylist as selectPeerSharingVideoPlaylist3,
+  selectPermissions,
   selectTemplateAppData,
-  useHMSActions as useHMSActions5,
-  useHMSStore as useHMSStore9
+  useHMSActions as useHMSActions6,
+  useHMSStore as useHMSStore10,
+  useRecordingStreaming
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/layouts/EmbedView.jsx
 init_define_process_env();
-import React5, { useCallback as useCallback2, useEffect, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+import React6, { useCallback as useCallback3, useEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { useMedia as useMedia2 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID2,
@@ -146,13 +201,13 @@ import {
   selectPeers as selectPeers2,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   throwErrorHandler,
-  useHMSStore as useHMSStore5,
+  useHMSStore as useHMSStore6,
   useScreenShare
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/layouts/screenShareView.jsx
 init_define_process_env();
-import React4, { Fragment, useCallback, useMemo } from "react";
+import React5, { Fragment, useCallback as useCallback2, useMemo } from "react";
 import { useMedia } from "react-use";
 import {
   selectLocalPeerID,
@@ -161,26 +216,26 @@ import {
   selectPeerScreenSharing,
   selectPeerSharingVideoPlaylist as selectPeerSharingVideoPlaylist2,
   selectScreenShareByPeerID,
-  useHMSStore as useHMSStore4
+  useHMSStore as useHMSStore5
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Playlist/VideoPlayer.jsx
 init_define_process_env();
-import React2, { useRef } from "react";
+import React3, { useRef } from "react";
 import { useFullscreen, useToggle } from "react-use";
 import screenfull from "screenfull";
 import {
   selectVideoPlaylist as selectVideoPlaylist3,
   selectVideoPlaylistAudioTrackByPeerID as selectVideoPlaylistAudioTrackByPeerID2,
   selectVideoPlaylistVideoTrackByPeerID,
-  useHMSActions as useHMSActions3,
-  useHMSStore as useHMSStore3
+  useHMSActions as useHMSActions4,
+  useHMSStore as useHMSStore4
 } from "@100mslive/react-sdk";
 import { CrossIcon, ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Playlist/PlaylistControls.jsx
 init_define_process_env();
-import React from "react";
+import React2 from "react";
 import {
   HMSPlaylistType as HMSPlaylistType2,
   selectAudioPlaylist as selectAudioPlaylist2,
@@ -188,8 +243,8 @@ import {
   selectPeerSharingVideoPlaylist,
   selectVideoPlaylist as selectVideoPlaylist2,
   selectVideoPlaylistAudioTrackByPeerID,
-  useHMSActions as useHMSActions2,
-  useHMSStore as useHMSStore2
+  useHMSActions as useHMSActions3,
+  useHMSStore as useHMSStore3
 } from "@100mslive/react-sdk";
 import { NextIcon, PauseIcon, PlayIcon, PlaylistIcon, PrevIcon, SpeakerIcon } from "@100mslive/react-icons";
 
@@ -199,16 +254,16 @@ import {
   HMSPlaylistType,
   selectAudioPlaylist,
   selectVideoPlaylist,
-  useHMSActions,
-  useHMSStore
+  useHMSActions as useHMSActions2,
+  useHMSStore as useHMSStore2
 } from "@100mslive/react-sdk";
 var usePlaylist = (type) => {
   const isAudioPlaylist = type === HMSPlaylistType.audio;
   const selector = isAudioPlaylist ? selectAudioPlaylist : selectVideoPlaylist;
-  const active = useHMSStore(selector.selectedItem);
-  const selection = useHMSStore(selector.selection);
-  const playlist = useHMSStore(selector.list);
-  const hmsActions = useHMSActions();
+  const active = useHMSStore2(selector.selectedItem);
+  const selection = useHMSStore2(selector.selection);
+  const playlist = useHMSStore2(selector.list);
+  const hmsActions = useHMSActions2();
   const playlistAction = isAudioPlaylist ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
   return {
     active,
@@ -222,13 +277,13 @@ var usePlaylist = (type) => {
 // src/Prebuilt/components/Playlist/PlaylistControls.jsx
 var Progress = ({ type, duration }) => {
   const selectPlaylist = type === HMSPlaylistType2.audio ? selectAudioPlaylist2 : selectVideoPlaylist2;
-  const progress = useHMSStore2(selectPlaylist.progress);
-  const hmsActions = useHMSActions2();
+  const progress = useHMSStore3(selectPlaylist.progress);
+  const hmsActions = useHMSActions3();
   const playlistAction = type === HMSPlaylistType2.audio ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
   if (!duration) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React2.createElement(
     Slider,
     {
       step: 1,
@@ -239,22 +294,12 @@ var Progress = ({ type, duration }) => {
     }
   );
 };
-var PlaylistActive = ({ type, onToggle }) => {
-  var _a, _b;
-  const isAudioPlaylist = type === HMSPlaylistType2.audio;
-  const selector = isAudioPlaylist ? selectAudioPlaylist2 : selectVideoPlaylist2;
-  const active = useHMSStore2(selector.selectedItem);
-  if (!active) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Box, { css: { mt: "$8" } }, /* @__PURE__ */ React.createElement(Flex, { justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { variant: "md" }, active.name), ((_a = active.metadata) == null ? void 0 : _a.description) && /* @__PURE__ */ React.createElement(Text, { variant: "xs" }, (_b = active.metadata) == null ? void 0 : _b.description)), /* @__PURE__ */ React.createElement(IconButton, { onClick: onToggle, css: { alignSelf: "center" }, "data-testid": "playlist_collapse_btn" }, /* @__PURE__ */ React.createElement(PlaylistIcon, null))));
-};
 var Controls = ({ type, css = {} }) => {
   const { active, hasNext, hasPrevious, actions } = usePlaylist(type);
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Flex, { justify: "center", css }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React2.createElement(Flex, { justify: "center", css }, /* @__PURE__ */ React2.createElement(
     IconButton,
     {
       disabled: !hasPrevious,
@@ -263,8 +308,8 @@ var Controls = ({ type, css = {} }) => {
       },
       "data-testid": "playlist_prev_btn"
     },
-    /* @__PURE__ */ React.createElement(PrevIcon, null)
-  ), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React2.createElement(PrevIcon, null)
+  ), /* @__PURE__ */ React2.createElement(
     IconButton,
     {
       onClick: () => {
@@ -272,8 +317,8 @@ var Controls = ({ type, css = {} }) => {
       },
       "data-testid": "playlist_play_pause_btn"
     },
-    active.playing ? /* @__PURE__ */ React.createElement(PauseIcon, { width: 32, height: 32 }) : /* @__PURE__ */ React.createElement(PlayIcon, { width: 32, height: 32 })
-  ), /* @__PURE__ */ React.createElement(
+    active.playing ? /* @__PURE__ */ React2.createElement(PauseIcon, { width: 32, height: 32 }) : /* @__PURE__ */ React2.createElement(PlayIcon, { width: 32, height: 32 })
+  ), /* @__PURE__ */ React2.createElement(
     IconButton,
     {
       disabled: !hasNext,
@@ -282,18 +327,18 @@ var Controls = ({ type, css = {} }) => {
       },
       "data-testid": "playlist_next_btn"
     },
-    /* @__PURE__ */ React.createElement(NextIcon, null)
+    /* @__PURE__ */ React2.createElement(NextIcon, null)
   ));
 };
 var VolumeControl = () => {
-  const hmsActions = useHMSActions2();
-  const volume = useHMSStore2(selectVideoPlaylist2.volume);
-  const active = useHMSStore2(selectVideoPlaylist2.selectedItem);
-  const peerSharingPlaylist = useHMSStore2(selectPeerSharingVideoPlaylist);
-  const audioTrack = useHMSStore2(selectVideoPlaylistAudioTrackByPeerID(peerSharingPlaylist == null ? void 0 : peerSharingPlaylist.id));
-  const audioTrackVolume = useHMSStore2(selectAudioTrackVolume(audioTrack == null ? void 0 : audioTrack.id));
+  const hmsActions = useHMSActions3();
+  const volume = useHMSStore3(selectVideoPlaylist2.volume);
+  const active = useHMSStore3(selectVideoPlaylist2.selectedItem);
+  const peerSharingPlaylist = useHMSStore3(selectPeerSharingVideoPlaylist);
+  const audioTrack = useHMSStore3(selectVideoPlaylistAudioTrackByPeerID(peerSharingPlaylist == null ? void 0 : peerSharingPlaylist.id));
+  const audioTrackVolume = useHMSStore3(selectAudioTrackVolume(audioTrack == null ? void 0 : audioTrack.id));
   const sliderVolume = active ? volume : audioTrackVolume;
-  return /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { color: "$white" } }, /* @__PURE__ */ React.createElement(SpeakerIcon, null), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React2.createElement(Flex, { align: "center", css: { color: "$on_primary_high" } }, /* @__PURE__ */ React2.createElement(SpeakerIcon, null), /* @__PURE__ */ React2.createElement(
     Slider,
     {
       css: { mx: "$4", w: "$20" },
@@ -313,28 +358,9 @@ var VolumeControl = () => {
     }
   ));
 };
-var AudioPlaylistControls = ({ onToggle }) => {
-  const { active } = usePlaylist(HMSPlaylistType2.audio);
-  if (!active) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      css: {
-        p: "$8",
-        borderTop: "1px solid $borderLight",
-        bg: "$menuBg"
-      }
-    },
-    /* @__PURE__ */ React.createElement(Controls, { type: HMSPlaylistType2.audio }),
-    /* @__PURE__ */ React.createElement(Progress, { type: HMSPlaylistType2.audio, duration: active.duration }),
-    /* @__PURE__ */ React.createElement(PlaylistActive, { type: HMSPlaylistType2.audio, onToggle })
-  );
-};
 var VideoPlaylistControls = ({ children }) => {
   const { active } = usePlaylist(HMSPlaylistType2.video);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React2.createElement(
     Box,
     {
       css: {
@@ -348,51 +374,51 @@ var VideoPlaylistControls = ({ children }) => {
         }
       }
     },
-    active && /* @__PURE__ */ React.createElement(Progress, { type: HMSPlaylistType2.video, duration: active.duration }),
-    /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "between" }, /* @__PURE__ */ React.createElement(VolumeControl, null), active && /* @__PURE__ */ React.createElement(Controls, { css: { flex: "1 1 0" } }), children)
+    active && /* @__PURE__ */ React2.createElement(Progress, { type: HMSPlaylistType2.video, duration: active.duration }),
+    /* @__PURE__ */ React2.createElement(Flex, { align: "center", justify: "between" }, /* @__PURE__ */ React2.createElement(VolumeControl, null), active && /* @__PURE__ */ React2.createElement(Controls, { css: { flex: "1 1 0" } }), children)
   );
 };
 
 // src/Prebuilt/components/Playlist/VideoPlayer.jsx
-var VideoPlayer = React2.memo(({ peerId }) => {
-  const videoTrack = useHMSStore3(selectVideoPlaylistVideoTrackByPeerID(peerId));
-  const audioTrack = useHMSStore3(selectVideoPlaylistAudioTrackByPeerID2(peerId));
-  const active = useHMSStore3(selectVideoPlaylist3.selectedItem);
+var VideoPlayer = React3.memo(({ peerId }) => {
+  const videoTrack = useHMSStore4(selectVideoPlaylistVideoTrackByPeerID(peerId));
+  const audioTrack = useHMSStore4(selectVideoPlaylistAudioTrackByPeerID2(peerId));
+  const active = useHMSStore4(selectVideoPlaylist3.selectedItem);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const hmsActions = useHMSActions3();
+  const hmsActions = useHMSActions4();
   const ref = useRef(null);
   const [show, toggle] = useToggle(false);
   const isFullscreen = useFullscreen(ref, show, {
     onClose: () => toggle(false)
   });
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", h: "100%" }, ref }, active && /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", h: "100%" }, ref }, active && /* @__PURE__ */ React3.createElement(
     Flex,
     {
       justify: "between",
       align: "center",
       css: {
-        bg: "$menuBg",
+        bg: "$surface_default",
         p: "$2 $2 $2 $6",
         borderTopLeftRadius: "$1",
         borderTopRightRadius: "$1"
       }
     },
-    /* @__PURE__ */ React2.createElement(Text, { css: { color: "$textPrimary" } }, active.name),
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(Text, { css: { color: "$on_primary_high" } }, active.name),
+    /* @__PURE__ */ React3.createElement(
       IconButton,
       {
         css: {
-          color: "$white"
+          color: "$on_primary_high"
         },
         onClick: () => {
           hmsActions.videoPlaylist.stop();
         },
         "data-testid": "videoplaylist_cross_btn"
       },
-      /* @__PURE__ */ React2.createElement(CrossIcon, null)
+      /* @__PURE__ */ React3.createElement(CrossIcon, null)
     )
-  ), showStatsOnTiles ? /* @__PURE__ */ React2.createElement(Box, { css: { "& > div": { top: "$14", left: "$8" } } }, /* @__PURE__ */ React2.createElement(
+  ), showStatsOnTiles ? /* @__PURE__ */ React3.createElement(Box, { css: { "& > div": { top: "$14", left: "$8" } } }, /* @__PURE__ */ React3.createElement(
     VideoTileStats,
     {
       audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
@@ -400,7 +426,7 @@ var VideoPlayer = React2.memo(({ peerId }) => {
       peerID: peerId,
       isLocal: active
     }
-  )) : null, /* @__PURE__ */ React2.createElement(
+  )) : null, /* @__PURE__ */ React3.createElement(
     Video,
     {
       trackId: videoTrack == null ? void 0 : videoTrack.id,
@@ -413,29 +439,29 @@ var VideoPlayer = React2.memo(({ peerId }) => {
         borderTopRightRadius: 0
       }
     }
-  ), /* @__PURE__ */ React2.createElement(VideoPlaylistControls, null, screenfull.enabled && /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement(VideoPlaylistControls, null, screenfull.enabled && /* @__PURE__ */ React3.createElement(
     IconButton,
     {
       onClick: () => toggle(),
       css: {
-        color: "$white",
+        color: "$on_primary_high",
         height: "max-content",
         alignSelf: "center",
         cursor: "pointer"
       }
     },
-    isFullscreen ? /* @__PURE__ */ React2.createElement(ShrinkIcon, null) : /* @__PURE__ */ React2.createElement(ExpandIcon, null)
+    isFullscreen ? /* @__PURE__ */ React3.createElement(ShrinkIcon, null) : /* @__PURE__ */ React3.createElement(ExpandIcon, null)
   )));
 });
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
 init_define_process_env();
-import React3 from "react";
-import { useHMSActions as useHMSActions4 } from "@100mslive/react-sdk";
+import React4 from "react";
+import { useHMSActions as useHMSActions5 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon2, ShareScreenIcon } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions4();
-  return /* @__PURE__ */ React3.createElement(
+  const hmsActions = useHMSActions5();
+  return /* @__PURE__ */ React4.createElement(
     Flex,
     {
       direction: "column",
@@ -449,14 +475,14 @@ var ScreenshareDisplay = () => {
         h: "100%",
         r: "$3",
         m: "0 auto",
-        color: "$textPrimary",
-        bg: "$surfaceDefault",
+        color: "$on_surface_high",
+        bg: "$surface_default",
         textAlign: "center"
       }
     },
-    /* @__PURE__ */ React3.createElement(ShareScreenIcon, { width: 48, height: 48 }),
-    /* @__PURE__ */ React3.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(ShareScreenIcon, { width: 48, height: 48 }),
+    /* @__PURE__ */ React4.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
+    /* @__PURE__ */ React4.createElement(
       Button,
       {
         variant: "danger",
@@ -465,7 +491,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React3.createElement(CrossIcon2, { width: 18, height: 18 }),
+      /* @__PURE__ */ React4.createElement(CrossIcon2, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -476,11 +502,11 @@ var ScreenShareView = () => {
   var _a;
   const mediaQueryLg = config.media.xl;
   const showSidebarInBottom = useMedia(mediaQueryLg);
-  const peers = useHMSStore4(selectPeers);
-  const localPeerID = useHMSStore4(selectLocalPeerID);
-  const localPeerRole = useHMSStore4(selectLocalPeerRoleName);
-  const peerPresenting = useHMSStore4(selectPeerScreenSharing);
-  const peerSharingPlaylist = useHMSStore4(selectPeerSharingVideoPlaylist2);
+  const peers = useHMSStore5(selectPeers);
+  const localPeerID = useHMSStore5(selectLocalPeerID);
+  const localPeerRole = useHMSStore5(selectLocalPeerRoleName);
+  const peerPresenting = useHMSStore5(selectPeerScreenSharing);
+  const peerSharingPlaylist = useHMSStore5(selectPeerSharingVideoPlaylist2);
   const isPresenterFromMyRole = ((_a = peerPresenting == null ? void 0 : peerPresenting.roleName) == null ? void 0 : _a.toLowerCase()) === (localPeerRole == null ? void 0 : localPeerRole.toLowerCase());
   const amIPresenting = localPeerID === (peerPresenting == null ? void 0 : peerPresenting.id);
   const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
@@ -491,7 +517,7 @@ var ScreenShareView = () => {
     }
     return smallTilePeers2;
   }, [peers, peerPresenting, showPresenterInSmallTile]);
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Flex,
     {
       css: {
@@ -499,7 +525,7 @@ var ScreenShareView = () => {
       },
       direction: showSidebarInBottom ? "column" : "row"
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       ScreenShareComponent,
       {
         amIPresenting,
@@ -507,7 +533,7 @@ var ScreenShareView = () => {
         peerSharingPlaylist
       }
     ),
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       Flex,
       {
         direction: { "@initial": "column", "@lg": "row" },
@@ -520,7 +546,7 @@ var ScreenShareView = () => {
           }
         }
       },
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(
         SidePane,
         {
           showSidebarInBottom,
@@ -540,11 +566,11 @@ var SidePane = ({
   smallTilePeers,
   showSidebarInBottom
 }) => {
-  const shouldShowScreenFn = useCallback(
+  const shouldShowScreenFn = useCallback2(
     (peer) => peerScreenSharing && peer.id !== peerScreenSharing.id,
     [peerScreenSharing]
   );
-  return /* @__PURE__ */ React4.createElement(Fragment, null, !isPresenterInSmallTiles && /* @__PURE__ */ React4.createElement(LargeTilePeerView, { peerScreenSharing }), /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(Fragment, null, !isPresenterInSmallTiles && /* @__PURE__ */ React5.createElement(LargeTilePeerView, { peerScreenSharing }), /* @__PURE__ */ React5.createElement(
     SmallTilePeersView,
     {
       showSidebarInBottom,
@@ -554,9 +580,9 @@ var SidePane = ({
   ));
 };
 var ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlaylist }) => {
-  const screenshareTrack = useHMSStore4(selectScreenShareByPeerID(peerPresenting == null ? void 0 : peerPresenting.id));
+  const screenshareTrack = useHMSStore5(selectScreenShareByPeerID(peerPresenting == null ? void 0 : peerPresenting.id));
   if (peerSharingPlaylist) {
-    return /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React5.createElement(
       Box,
       {
         css: {
@@ -569,10 +595,10 @@ var ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlaylist
           }
         }
       },
-      /* @__PURE__ */ React4.createElement(VideoPlayer, { peerId: peerSharingPlaylist.id })
+      /* @__PURE__ */ React5.createElement(VideoPlayer, { peerId: peerSharingPlaylist.id })
     );
   }
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Box,
     {
       css: {
@@ -581,18 +607,18 @@ var ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlaylist
         "@xl": { ml: "$4", maxHeight: "80%", minHeight: 0 }
       }
     },
-    peerPresenting && (amIPresenting && !["browser", "window", "application"].includes(screenshareTrack == null ? void 0 : screenshareTrack.displaySurface) ? /* @__PURE__ */ React4.createElement(Box, { css: { objectFit: "contain", h: "100%" } }, /* @__PURE__ */ React4.createElement(ScreenshareDisplay, null)) : /* @__PURE__ */ React4.createElement(ScreenshareTile_default, { peerId: peerPresenting == null ? void 0 : peerPresenting.id }))
+    peerPresenting && (amIPresenting && !["browser", "window", "application"].includes(screenshareTrack == null ? void 0 : screenshareTrack.displaySurface) ? /* @__PURE__ */ React5.createElement(Box, { css: { objectFit: "contain", h: "100%" } }, /* @__PURE__ */ React5.createElement(ScreenshareDisplay, null)) : /* @__PURE__ */ React5.createElement(ScreenshareTile_default, { peerId: peerPresenting == null ? void 0 : peerPresenting.id }))
   );
 };
 var SmallTilePeersView = ({ smallTilePeers, shouldShowScreenFn, showSidebarInBottom }) => {
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Flex,
     {
       css: {
         flex: "2 1 0"
       }
     },
-    smallTilePeers && smallTilePeers.length > 0 && /* @__PURE__ */ React4.createElement(
+    smallTilePeers && smallTilePeers.length > 0 && /* @__PURE__ */ React5.createElement(
       VideoList_default,
       {
         peers: smallTilePeers,
@@ -604,7 +630,7 @@ var SmallTilePeersView = ({ smallTilePeers, shouldShowScreenFn, showSidebarInBot
   );
 };
 var LargeTilePeerView = ({ peerScreenSharing, showStatsOnTiles }) => {
-  return peerScreenSharing ? /* @__PURE__ */ React4.createElement(
+  return peerScreenSharing ? /* @__PURE__ */ React5.createElement(
     Box,
     {
       css: {
@@ -623,23 +649,23 @@ var LargeTilePeerView = ({ peerScreenSharing, showStatsOnTiles }) => {
         }
       }
     },
-    /* @__PURE__ */ React4.createElement(VideoTile_default, { showStatsOnTiles, width: "100%", height: "100%", peerId: peerScreenSharing.id })
+    /* @__PURE__ */ React5.createElement(VideoTile_default, { showStatsOnTiles, width: "100%", height: "100%", peerId: peerScreenSharing.id })
   ) : null;
 };
 var screenShareView_default = ScreenShareView;
 
 // src/Prebuilt/layouts/EmbedView.jsx
 var EmbedView = () => {
-  return /* @__PURE__ */ React5.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React5.createElement(EmbedComponent, null));
+  return /* @__PURE__ */ React6.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React6.createElement(EmbedComponent, null));
 };
 var EmbebScreenShareView = ({ children }) => {
   var _a;
-  const peers = useHMSStore5(selectPeers2);
+  const peers = useHMSStore6(selectPeers2);
   const mediaQueryLg = config.media.xl;
   const showSidebarInBottom = useMedia2(mediaQueryLg);
-  const localPeerID = useHMSStore5(selectLocalPeerID2);
-  const localPeerRole = useHMSStore5(selectLocalPeerRoleName2);
-  const peerPresenting = useHMSStore5(selectPeerScreenSharing2);
+  const localPeerID = useHMSStore6(selectLocalPeerID2);
+  const localPeerRole = useHMSStore6(selectLocalPeerRoleName2);
+  const peerPresenting = useHMSStore6(selectPeerScreenSharing2);
   const isPresenterFromMyRole = ((_a = peerPresenting == null ? void 0 : peerPresenting.roleName) == null ? void 0 : _a.toLowerCase()) === (localPeerRole == null ? void 0 : localPeerRole.toLowerCase());
   const amIPresenting = localPeerID === (peerPresenting == null ? void 0 : peerPresenting.id);
   const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
@@ -650,7 +676,7 @@ var EmbebScreenShareView = ({ children }) => {
     }
     return smallTilePeers2;
   }, [peers, peerPresenting, showPresenterInSmallTile]);
-  return /* @__PURE__ */ React5.createElement(Flex, { css: { size: "100%" }, direction: showSidebarInBottom ? "column" : "row" }, children, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(Flex, { css: { size: "100%" }, direction: showSidebarInBottom ? "column" : "row" }, children, /* @__PURE__ */ React6.createElement(
     Flex,
     {
       direction: { "@initial": "column", "@lg": "row" },
@@ -663,7 +689,7 @@ var EmbebScreenShareView = ({ children }) => {
         }
       }
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       SidePane,
       {
         showSidebarInBottom,
@@ -678,11 +704,11 @@ var EmbebScreenShareView = ({ children }) => {
 var EmbedComponent = () => {
   const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler);
   const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState(false);
+  const [wasScreenShared, setWasScreenShared] = useState2(false);
   const screenShareAttemptInProgress = useRef2(false);
   const src = embedConfig.url;
   const iframeRef = useRef2();
-  const resetEmbedConfig = useCallback2(() => {
+  const resetEmbedConfig = useCallback3(() => {
     if (src) {
       setEmbedConfig({ url: "" });
     }
@@ -711,7 +737,7 @@ var EmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     Box,
     {
       ref: iframeRef,
@@ -725,7 +751,7 @@ var EmbedComponent = () => {
         }
       }
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       "iframe",
       {
         src,
@@ -740,10 +766,10 @@ var EmbedComponent = () => {
 
 // src/Prebuilt/layouts/InsetView.jsx
 init_define_process_env();
-import React6, { Fragment as Fragment2, useEffect as useEffect2, useRef as useRef3 } from "react";
+import React7, { Fragment as Fragment2, useEffect as useEffect2, useRef as useRef3 } from "react";
 import Draggable from "react-draggable";
 import { useMedia as useMedia3 } from "react-use";
-import { selectAppData, selectLocalPeer, selectRemotePeers, selectRolesMap, useHMSStore as useHMSStore6 } from "@100mslive/react-sdk";
+import { selectAppData, selectLocalPeer, selectRemotePeers, selectRolesMap, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
 var getAspectRatio = ({ roleMap, roleName, isMobile }) => {
   const role = roleMap[roleName];
   const { width, height } = role.publishParams.video;
@@ -751,11 +777,11 @@ var getAspectRatio = ({ roleMap, roleName, isMobile }) => {
 };
 function InsetView() {
   var _a;
-  const remotePeers = useHMSStore6(selectRemotePeers);
-  const localPeer = useHMSStore6(selectLocalPeer);
+  const remotePeers = useHMSStore7(selectRemotePeers);
+  const localPeer = useHMSStore7(selectLocalPeer);
   const isMobile = useMedia3(config.media.md);
   const isLandscape = useMedia3(config.media.ls);
-  const roleMap = useHMSStore6(selectRolesMap);
+  const roleMap = useHMSStore7(selectRolesMap);
   const rolePreference = useRolePreference();
   let centerPeers = [];
   let sidepanePeers = [];
@@ -776,7 +802,7 @@ function InsetView() {
     centerPeers = remotePeers;
   }
   const hideInset = sidepanePeers.length > 0 && (isMobile || isLandscape);
-  return /* @__PURE__ */ React6.createElement(Fragment2, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(Fragment2, null, /* @__PURE__ */ React7.createElement(
     Box,
     {
       css: {
@@ -792,7 +818,7 @@ function InsetView() {
         }
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       Flex,
       {
         align: "center",
@@ -808,7 +834,7 @@ function InsetView() {
           "@ls": { flexFlow: "row" }
         }
       },
-      centerPeers.length > 0 ? centerPeers.map((peer) => /* @__PURE__ */ React6.createElement(
+      centerPeers.length > 0 ? centerPeers.map((peer) => /* @__PURE__ */ React7.createElement(
         VideoTile_default,
         {
           key: peer.videoTrack || peer.id,
@@ -836,9 +862,9 @@ function InsetView() {
           },
           objectFit: "contain"
         }
-      )) : /* @__PURE__ */ React6.createElement(FirstPersonDisplay, null)
+      )) : /* @__PURE__ */ React7.createElement(FirstPersonDisplay, null)
     ),
-    sidepanePeers.length > 0 && /* @__PURE__ */ React6.createElement(
+    sidepanePeers.length > 0 && /* @__PURE__ */ React7.createElement(
       Flex,
       {
         align: "center",
@@ -850,7 +876,7 @@ function InsetView() {
           placeContent: "center"
         }
       },
-      (hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => /* @__PURE__ */ React6.createElement(
+      (hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => /* @__PURE__ */ React7.createElement(
         VideoTile_default,
         {
           key: peer.videoTrack || peer.id,
@@ -880,11 +906,11 @@ function InsetView() {
         }
       ))
     )
-  ), !hideInset && /* @__PURE__ */ React6.createElement(InsetTile, { roleMap, isMobile, isLandscape }));
+  ), !hideInset && /* @__PURE__ */ React7.createElement(InsetTile, { roleMap, isMobile, isLandscape }));
 }
 var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
-  const localPeer = useHMSStore6(selectLocalPeer);
-  const sidepane = useHMSStore6(selectAppData(APP_DATA.sidePane));
+  const localPeer = useHMSStore7(selectLocalPeer);
+  const sidepane = useHMSStore7(selectAppData(APP_DATA.sidePane));
   const aspectRatio = getAspectRatio({
     roleMap,
     roleName: localPeer.roleName,
@@ -915,7 +941,7 @@ var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
       resizeObserver == null ? void 0 : resizeObserver.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ React6.createElement(Draggable, { bounds: "parent", nodeRef }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(Draggable, { bounds: "parent", nodeRef }, /* @__PURE__ */ React7.createElement(
     Box,
     {
       ref: nodeRef,
@@ -930,7 +956,7 @@ var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
         h: height
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       VideoTile_default,
       {
         peerId: localPeer.id,
@@ -939,9 +965,6 @@ var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
           size: "100%",
           padding: 0
         },
-        containerCSS: {
-          bg: "$surfaceDefault"
-        },
         width,
         height
       }
@@ -951,22 +974,22 @@ var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
 
 // src/Prebuilt/layouts/mainGridView.jsx
 init_define_process_env();
-import React8, { useEffect as useEffect3, useState as useState2 } from "react";
+import React9, { useEffect as useEffect3, useState as useState3 } from "react";
 import {
   selectLocalPeerID as selectLocalPeerID3,
   selectLocalPeerRole,
   selectPeers as selectPeers3,
   selectPeersByRoles,
   selectRolesMap as selectRolesMap2,
-  useHMSStore as useHMSStore8
+  useHMSStore as useHMSStore9
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/layouts/NonPublisherView.jsx
 init_define_process_env();
-import React7 from "react";
+import React8 from "react";
 import { ShieldAlertIcon } from "@100mslive/react-icons";
-var NonPublisherView = React7.memo(({ message }) => {
-  return /* @__PURE__ */ React7.createElement(
+var NonPublisherView = React8.memo(({ message }) => {
+  return /* @__PURE__ */ React8.createElement(
     Box,
     {
       css: {
@@ -975,12 +998,12 @@ var NonPublisherView = React7.memo(({ message }) => {
         maxWidth: "96%",
         h: "100%",
         m: "auto",
-        background: "$surfaceDefault",
+        background: "$surface_default",
         borderRadius: "$3"
       },
       "data-testid": "non_publisher_view"
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       Flex,
       {
         align: "center",
@@ -994,8 +1017,8 @@ var NonPublisherView = React7.memo(({ message }) => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React7.createElement(ShieldAlertIcon, { color: "#C3D0E5", width: "80px", height: "80px" }),
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement(ShieldAlertIcon, { color: "#C3D0E5", width: "80px", height: "80px" }),
+      /* @__PURE__ */ React8.createElement(
         Flex,
         {
           direction: "column",
@@ -1005,8 +1028,8 @@ var NonPublisherView = React7.memo(({ message }) => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React7.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, message),
-        /* @__PURE__ */ React7.createElement(Text, { color: "$textMedEmp", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Please go to dashboard and reconfigure role settings or contact the role admin.")
+        /* @__PURE__ */ React8.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, message),
+        /* @__PURE__ */ React8.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Please go to dashboard and reconfigure role settings or contact the role admin.")
       )
     )
   );
@@ -1014,9 +1037,9 @@ var NonPublisherView = React7.memo(({ message }) => {
 
 // src/Prebuilt/components/AppData/useAppLayout.js
 init_define_process_env();
-import { selectAppDataByPath, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
+import { selectAppDataByPath, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
 var useAppLayout = (path) => {
-  return useHMSStore7(selectAppDataByPath(APP_DATA.appLayout, path));
+  return useHMSStore8(selectAppDataByPath(APP_DATA.appLayout, path));
 };
 
 // src/Prebuilt/layouts/mainGridView.jsx
@@ -1025,14 +1048,14 @@ var MainGridView = () => {
   const centerRoles = useAppLayout("center") || [];
   const sidepaneRoles = useAppLayout("sidepane") || [];
   const maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  const peers = useHMSStore8(selectPeers3);
-  const roles = useHMSStore8(selectRolesMap2);
-  const localPeerId = useHMSStore8(selectLocalPeerID3);
+  const peers = useHMSStore9(selectPeers3);
+  const roles = useHMSStore9(selectRolesMap2);
+  const localPeerId = useHMSStore9(selectLocalPeerID3);
   const centerPeers = peers.filter((peer) => centerRoles.includes(peer.roleName));
   const sidebarPeers = peers.filter((peer) => sidepaneRoles.includes(peer.roleName));
-  const localRole = useHMSStore8(selectLocalPeerRole);
-  const peersByRoles = useHMSStore8(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
-  const [placeholder, setPlaceholder] = useState2("");
+  const localRole = useHMSStore9(selectLocalPeerRole);
+  const peersByRoles = useHMSStore9(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
+  const [placeholder, setPlaceholder] = useState3("");
   useEffect3(() => {
     var _a2;
     const hasPublishingPeers = peers.some((peer) => {
@@ -1065,7 +1088,7 @@ var MainGridView = () => {
     const nooneIsPublishing = sidebarPeers.length === 0;
     showSidePane = itsOnlyMeInTheRoom || nooneIsPublishing;
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Flex,
     {
       css: {
@@ -1076,7 +1099,7 @@ var MainGridView = () => {
         "@md": "column"
       }
     },
-    placeholder ? /* @__PURE__ */ React8.createElement(NonPublisherView, { message: placeholder }) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+    placeholder ? /* @__PURE__ */ React9.createElement(NonPublisherView, { message: placeholder }) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
       GridCenterView,
       {
         peers: showSidePane ? centerPeers : peers,
@@ -1085,38 +1108,38 @@ var MainGridView = () => {
         hideSidePane: !showSidePane,
         totalPeers: peers.length
       }
-    ), showSidePane && /* @__PURE__ */ React8.createElement(GridSidePaneView, { peers: sidebarPeers, totalPeers: peers.length }))
+    ), showSidePane && /* @__PURE__ */ React9.createElement(GridSidePaneView, { peers: sidebarPeers, totalPeers: peers.length }))
   );
 };
 
 // src/Prebuilt/layouts/PDFView.jsx
 init_define_process_env();
-import React9, { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+import React10, { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
 var PDFView = () => {
-  return /* @__PURE__ */ React9.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React9.createElement(PDFEmbedComponent, null));
+  return /* @__PURE__ */ React10.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React10.createElement(PDFEmbedComponent, null));
 };
 var PDFEmbedComponent = () => {
   const ref = useRef4();
   const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState3(false);
+  const [isPDFLoaded, setIsPDFLoaded] = useState4(false);
   let pdfJSURL = define_process_env_default.REACT_APP_PDFJS_IFRAME_URL;
   const { amIScreenSharing, toggleScreenShare } = useScreenShare2(throwErrorHandler2);
   const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
   if (pdfConfig.url && !pdfConfig.file) {
     pdfJSURL = pdfJSURL + "?file=" + encodeURIComponent(pdfConfig.url);
   }
-  const [wasScreenShared, setWasScreenShared] = useState3(false);
+  const [wasScreenShared, setWasScreenShared] = useState4(false);
   const screenShareAttemptInProgress = useRef4(false);
   const iframeRef = useRef4();
-  const resetEmbedConfig = useCallback3(() => {
+  const resetEmbedConfig = useCallback4(() => {
     setPDFConfig({ state: false });
   }, [setPDFConfig]);
   useEffect4(() => {
     if (isPDFLoaded && ref.current) {
       ref.current.contentWindow.postMessage(
         {
-          theme: themeType === "dark" /* dark */ ? 2 : 1
+          theme: themeType === ThemeTypes.dark ? 2 : 1
         },
         "*"
       );
@@ -1147,7 +1170,7 @@ var PDFEmbedComponent = () => {
       }
     };
   }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Box,
     {
       ref: iframeRef,
@@ -1161,7 +1184,7 @@ var PDFEmbedComponent = () => {
         }
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       "iframe",
       {
         src: pdfJSURL,
@@ -1181,7 +1204,7 @@ var PDFEmbedComponent = () => {
               ref.current.contentWindow.postMessage(
                 {
                   file: pdfConfig.file,
-                  theme: themeType === "dark" /* dark */ ? 2 : 1
+                  theme: themeType === ThemeTypes.dark ? 2 : 1
                 },
                 "*"
               );
@@ -1196,10 +1219,10 @@ var PDFEmbedComponent = () => {
 
 // src/Prebuilt/layouts/WaitingView.jsx
 init_define_process_env();
-import React10 from "react";
+import React11 from "react";
 import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React10.memo(() => {
-  return /* @__PURE__ */ React10.createElement(
+var WaitingView = React11.memo(() => {
+  return /* @__PURE__ */ React11.createElement(
     Box,
     {
       css: {
@@ -1208,12 +1231,12 @@ var WaitingView = React10.memo(() => {
         maxWidth: "96%",
         h: "100%",
         m: "auto",
-        background: "$surfaceDefault",
+        background: "$surface_default",
         borderRadius: "$3"
       },
       "data-testid": "waiting_view"
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       Flex,
       {
         align: "center",
@@ -1227,8 +1250,8 @@ var WaitingView = React10.memo(() => {
           gap: "$8"
         }
       },
-      /* @__PURE__ */ React10.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React11.createElement(
         Flex,
         {
           direction: "column",
@@ -1238,8 +1261,8 @@ var WaitingView = React10.memo(() => {
             gap: "$4"
           }
         },
-        /* @__PURE__ */ React10.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React10.createElement(Text, { color: "$textMedEmp", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+        /* @__PURE__ */ React11.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React11.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
       )
     )
   );
@@ -1249,26 +1272,47 @@ var WaitingView = React10.memo(() => {
 init_define_process_env();
 
 // src/Prebuilt/layouts/mainView.jsx
-var HLSView = React11.lazy(() => import("./HLSView-ZYNT3HJD.js"));
-var ActiveSpeakerView = React11.lazy(() => import("./ActiveSpeakerView-G32BDM5F.js"));
-var PinnedTrackView = React11.lazy(() => import("./PinnedTrackView-GTXL2UTS.js"));
+var HLSView = React12.lazy(() => import("./HLSView-3ILTIGBT.js"));
+var ActiveSpeakerView = React12.lazy(() => import("./ActiveSpeakerView-N7C6WL27.js"));
+var PinnedTrackView = React12.lazy(() => import("./PinnedTrackView-6N6N5WOF.js"));
 var ConferenceMainView = () => {
-  const localPeerRole = useHMSStore9(selectLocalPeerRoleName3);
+  var _a, _b, _c;
+  const localPeerRole = useHMSStore10(selectLocalPeerRoleName3);
   const pinnedTrack = usePinnedTrack();
-  const peerSharing = useHMSStore9(selectPeerScreenSharing3);
-  const peerSharingAudio = useHMSStore9(selectPeerSharingAudio);
-  const peerSharingPlaylist = useHMSStore9(selectPeerSharingVideoPlaylist3);
+  const peerSharing = useHMSStore10(selectPeerScreenSharing3);
+  const peerSharingAudio = useHMSStore10(selectPeerSharingAudio);
+  const peerSharingPlaylist = useHMSStore10(selectPeerSharingVideoPlaylist3);
   const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
-  const isConnected = useHMSStore9(selectIsConnectedToRoom);
-  const uiMode = useHMSStore9(selectTemplateAppData).uiMode;
-  const hmsActions = useHMSActions5();
+  const isConnected = useHMSStore10(selectIsConnectedToRoom);
+  const uiMode = useHMSStore10(selectTemplateAppData).uiMode;
+  const hmsActions = useHMSActions6();
   const isHeadless = useIsHeadless();
   const headlessUIMode = useAppConfig("headlessConfig", "uiMode");
   const { uiViewMode, isAudioOnly } = useUISettings();
   const hlsViewerRole = useHLSViewerRole();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
-  const pdfAnntatorActive = usePDFAnnotator();
+  const pdfAnnotatorActive = usePDFAnnotator();
+  const { isHLSRunning } = useRecordingStreaming();
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const permissions = useHMSStore10(selectPermissions);
+  const roomLayout = useRoomLayout();
+  const { join_form: joinForm = {} } = ((_c = (_b = (_a = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a.preview) == null ? void 0 : _b.default) == null ? void 0 : _c.elements) || {};
+  const startHLS = useCallback5(() => __async(void 0, null, function* () {
+    try {
+      if (isHLSStarted) {
+        return;
+      }
+      setHLSStarted(true);
+      yield hmsActions.startHLSStreaming({});
+    } catch (error) {
+      if (error.message.includes("invalid input")) {
+        yield startHLS();
+        return;
+      }
+      setHLSStarted(false);
+    }
+  }), [hmsActions, isHLSStarted, setHLSStarted]);
   useEffect5(() => {
     if (!isConnected) {
       return;
@@ -1281,8 +1325,11 @@ var ConferenceMainView = () => {
     if (audioPlaylist.length > 0) {
       hmsActions.audioPlaylist.setList(audioPlaylist);
     }
+    if ((permissions == null ? void 0 : permissions.hlsStreaming) && !isHLSRunning && joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE) {
+      startHLS();
+    }
     hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
-  }, [isConnected, hmsActions]);
+  }, [isConnected, hmsActions, permissions, joinForm]);
   if (!localPeerRole) {
     return null;
   }
@@ -1291,7 +1338,7 @@ var ConferenceMainView = () => {
     ViewComponent = HLSView;
   } else if (localPeerRole === waitingViewerRole) {
     ViewComponent = WaitingView;
-  } else if (pdfAnntatorActive) {
+  } else if (pdfAnnotatorActive) {
     ViewComponent = PDFView;
   } else if (urlToIframe) {
     ViewComponent = EmbedView;
@@ -1307,7 +1354,7 @@ var ConferenceMainView = () => {
   } else {
     ViewComponent = MainGridView;
   }
-  return /* @__PURE__ */ React11.createElement(Suspense, { fallback: /* @__PURE__ */ React11.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(Suspense, { fallback: /* @__PURE__ */ React12.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React12.createElement(
     Flex,
     {
       css: {
@@ -1315,183 +1362,36 @@ var ConferenceMainView = () => {
         position: "relative"
       }
     },
-    /* @__PURE__ */ React11.createElement(ViewComponent, null),
-    /* @__PURE__ */ React11.createElement(SidePane_default, null)
+    /* @__PURE__ */ React12.createElement(ViewComponent, null),
+    /* @__PURE__ */ React12.createElement(SidePane_default, null)
   ));
 };
 
 // src/Prebuilt/components/Footer.jsx
 init_define_process_env();
-import React37 from "react";
+import React36 from "react";
 
 // src/Prebuilt/components/Footer/ConferencingFooter.jsx
 init_define_process_env();
-import React35, { Fragment as Fragment7, Suspense as Suspense2, useState as useState16 } from "react";
+import React34, { Fragment as Fragment6, Suspense as Suspense2, useState as useState16 } from "react";
 import { useMedia as useMedia6 } from "react-use";
-import { HMSPlaylistType as HMSPlaylistType4, selectIsAllowedToPublish as selectIsAllowedToPublish4, useHMSStore as useHMSStore19, useScreenShare as useScreenShare5 } from "@100mslive/react-sdk";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish3, useHMSStore as useHMSStore19, useScreenShare as useScreenShare5 } from "@100mslive/react-sdk";
 import { MusicIcon } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/Playlist/Playlist.jsx
-init_define_process_env();
-import React13, { Fragment as Fragment3, useState as useState4 } from "react";
-import { HMSPlaylistType as HMSPlaylistType3, selectIsAllowedToPublish, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
-import { AudioPlayerIcon, CrossIcon as CrossIcon3, VideoPlayerIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Playlist/PlaylistItem.jsx
-init_define_process_env();
-import React12 from "react";
-function formatDuration(duration) {
-  if (!duration) {
-    return "";
-  }
-  let mins = Math.floor(duration / 60);
-  if (mins < 10) {
-    mins = `0${String(mins)}`;
-  }
-  let secs = Math.floor(duration % 60);
-  if (secs < 10) {
-    secs = `0${String(secs)}`;
-  }
-  return `${mins}:${secs}`;
-}
-var PlaylistItem = React12.memo(({ name, metadata, duration, selected, onClick }) => {
-  return /* @__PURE__ */ React12.createElement(
-    Dropdown.Item,
-    {
-      css: {
-        flexDirection: "column",
-        alignItems: "flex-start",
-        h: "$18",
-        p: "$8",
-        "&:hover": {
-          cursor: "pointer",
-          bg: "$menuBg"
-        },
-        "&:focus-visible": {
-          bg: "$menuBg"
-        }
-      },
-      onClick
-    },
-    /* @__PURE__ */ React12.createElement(Flex, { align: "center", justify: "between", css: { width: "100%", minHeight: 0 } }, /* @__PURE__ */ React12.createElement(Text, { variant: "md", css: { color: selected ? "$brandDefault" : "$textPrimary" } }, name), /* @__PURE__ */ React12.createElement(Text, { variant: "xs" }, formatDuration(duration))),
-    (metadata == null ? void 0 : metadata.description) && /* @__PURE__ */ React12.createElement(Text, { variant: "xs", css: { mt: "$4" } }, metadata == null ? void 0 : metadata.description)
-  );
-});
-
-// src/Prebuilt/components/Playlist/Playlist.jsx
-var BrowseAndPlayFromLocal = ({ type, actions }) => {
-  return /* @__PURE__ */ React13.createElement(Fragment3, null, /* @__PURE__ */ React13.createElement(Text, { as: "label", htmlFor: `${type}PlaylistBrowse`, variant: "sm", css: { cursor: "pointer", mr: "$2" } }, "Browse"), /* @__PURE__ */ React13.createElement(
-    "input",
-    {
-      type: "file",
-      id: `${type}PlaylistBrowse`,
-      accept: type === HMSPlaylistType3.audio ? "audio/*" : "video/*",
-      onChange: (e) => {
-        const file = e.target.files[0];
-        const id = file.lastModified;
-        actions.setList([
-          {
-            type,
-            id,
-            name: file.name,
-            url: URL.createObjectURL(file)
-          }
-        ]);
-        actions.play(id);
-      },
-      style: { display: "none" }
-    }
-  ));
-};
-var Playlist = ({ type }) => {
-  const isAudioPlaylist = type === HMSPlaylistType3.audio;
-  const { active, list: playlist, actions } = usePlaylist(type);
-  const [open, setOpen] = useState4(false);
-  const [collapse, setCollapse] = useState4(false);
-  const isAllowedToPublish = useHMSStore10(selectIsAllowedToPublish);
-  const isFeatureEnabled = useIsFeatureEnabled(
-    isAudioPlaylist ? FEATURE_LIST.AUDIO_PLAYLIST : FEATURE_LIST.VIDEO_PLAYLIST
-  );
-  if (!isAllowedToPublish.screen || playlist.length === 0 || !isFeatureEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ React13.createElement(Fragment3, null, /* @__PURE__ */ React13.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React13.createElement(Dropdown.Trigger, { asChild: true, "data-testid": type === HMSPlaylistType3.audio ? "audio_playlist" : "video_playlist" }, /* @__PURE__ */ React13.createElement(IconButton_default, { active: !active }, /* @__PURE__ */ React13.createElement(Tooltip, { title: isAudioPlaylist ? "Audio Playlist" : "Video Playlist" }, /* @__PURE__ */ React13.createElement(Box, null, isAudioPlaylist ? /* @__PURE__ */ React13.createElement(AudioPlayerIcon, null) : /* @__PURE__ */ React13.createElement(VideoPlayerIcon, null))))), /* @__PURE__ */ React13.createElement(
-    Dropdown.Content,
-    {
-      sideOffset: 5,
-      align: "center",
-      css: {
-        maxHeight: "unset",
-        width: "$60",
-        p: "$0",
-        bg: "$bgSecondary",
-        border: "1px solid $menuBg"
-      }
-    },
-    /* @__PURE__ */ React13.createElement(
-      Flex,
-      {
-        align: "center",
-        css: {
-          p: "$4 $8",
-          borderBottom: "1px solid $borderLight",
-          bg: "$menuBg"
-        }
-      },
-      /* @__PURE__ */ React13.createElement(Text, { variant: "md", css: { flex: "1 1 0" } }, isAudioPlaylist ? "Audio Player" : "Video Playlist"),
-      /* @__PURE__ */ React13.createElement(BrowseAndPlayFromLocal, { type, actions }),
-      /* @__PURE__ */ React13.createElement(
-        IconButton_default,
-        {
-          css: { mr: "-$4" },
-          onClick: () => __async(void 0, null, function* () {
-            if (active) {
-              yield actions.stop();
-            }
-            setOpen(false);
-            setCollapse(false);
-          })
-        },
-        /* @__PURE__ */ React13.createElement(CrossIcon3, { width: 24, height: 24 })
-      )
-    ),
-    !collapse && /* @__PURE__ */ React13.createElement(Box, { css: { maxHeight: "$96", overflowY: "auto" } }, playlist.map((playlistItem) => {
-      return /* @__PURE__ */ React13.createElement(
-        PlaylistItem,
-        __spreadProps(__spreadValues({
-          key: playlistItem.id
-        }, playlistItem), {
-          onClick: (e) => __async(void 0, null, function* () {
-            e.preventDefault();
-            try {
-              yield actions.play(playlistItem.id);
-            } catch (e2) {
-            }
-            if (!isAudioPlaylist) {
-              setOpen(false);
-            }
-          })
-        })
-      );
-    })),
-    isAudioPlaylist && /* @__PURE__ */ React13.createElement(AudioPlaylistControls, { onToggle: () => setCollapse((value) => !value) })
-  )));
-};
-
 // src/Prebuilt/components/MoreSettings/MoreSettings.jsx
 init_define_process_env();
-import React22, { Fragment as Fragment4, useState as useState12 } from "react";
+import React21, { Fragment as Fragment3, useState as useState12 } from "react";
 import { useMedia as useMedia5 } from "react-use";
 import Hls from "hls.js";
 import {
-  selectAppData as selectAppData3,
-  selectIsAllowedToPublish as selectIsAllowedToPublish2,
+  selectAppData as selectAppData2,
+  selectIsAllowedToPublish,
   selectLocalPeerID as selectLocalPeerID6,
   selectLocalPeerRoleName as selectLocalPeerRoleName5,
-  selectPermissions as selectPermissions3,
-  useHMSActions as useHMSActions11,
+  selectPermissions as selectPermissions4,
+  useHMSActions as useHMSActions12,
   useHMSStore as useHMSStore15,
-  useRecordingStreaming as useRecordingStreaming2
+  useRecordingStreaming as useRecordingStreaming3
 } from "@100mslive/react-sdk";
 import {
   ChangeRoleIcon as ChangeRoleIcon2,
@@ -1506,27 +1406,20 @@ import {
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
 init_define_process_env();
-import React14, { useState as useState5 } from "react";
-import {
-  selectAppData as selectAppData2,
-  selectPermissions,
-  useHMSActions as useHMSActions6,
-  useHMSStore as useHMSStore11,
-  useRecordingStreaming
-} from "@100mslive/react-sdk";
+import React13, { useState as useState5 } from "react";
+import { selectPermissions as selectPermissions2, useHMSActions as useHMSActions7, useHMSStore as useHMSStore11, useRecordingStreaming as useRecordingStreaming2 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon } from "@100mslive/react-icons";
 var StartRecording = ({ open, onOpenChange }) => {
-  const permissions = useHMSStore11(selectPermissions);
-  const recordingUrl = useHMSStore11(selectAppData2(APP_DATA.recordingUrl));
+  const permissions = useHMSStore11(selectPermissions2);
   const [resolution, setResolution] = useState5(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-  const hmsActions = useHMSActions6();
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
+  const hmsActions = useHMSActions7();
   if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React14.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Portal, null, /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React13.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Dialog.Portal, null, /* @__PURE__ */ React13.createElement(
       Dialog.Content,
       {
         css: {
@@ -1535,9 +1428,9 @@ var StartRecording = ({ open, onOpenChange }) => {
           bg: "#201617"
         }
       },
-      /* @__PURE__ */ React14.createElement(Dialog.Title, null, /* @__PURE__ */ React14.createElement(Flex, { gap: 2, css: { c: "$error" } }, /* @__PURE__ */ React14.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React14.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
-      /* @__PURE__ */ React14.createElement(Text, { variant: "sm", css: { c: "$textMedEmp", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
-      /* @__PURE__ */ React14.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React14.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React14.createElement(Button, { outlined: true, css: { borderColor: "$secondaryLight", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React13.createElement(Dialog.Title, null, /* @__PURE__ */ React13.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ React13.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React13.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
+      /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
+      /* @__PURE__ */ React13.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React13.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React13.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React13.createElement(
         Button,
         {
           "data-testid": "stop_recording_confirm_mobile",
@@ -1559,14 +1452,14 @@ var StartRecording = ({ open, onOpenChange }) => {
       ))
     )));
   }
-  return /* @__PURE__ */ React14.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React14.createElement(Dialog.Title, null, /* @__PURE__ */ React14.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React13.createElement(Dialog.Title, null, /* @__PURE__ */ React13.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React13.createElement(
     ResolutionInput,
     {
       testId: "recording_resolution_mobile",
       css: { flexDirection: "column", alignItems: "start" },
       onResolutionChange: setResolution
     }
-  ), /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     Button,
     {
       "data-testid": "start_recording_confirm_mobile",
@@ -1579,7 +1472,6 @@ var StartRecording = ({ open, onOpenChange }) => {
         try {
           setRecordingState(true);
           yield hmsActions.startRTMPOrRecording({
-            meetingURL: recordingUrl,
             resolution: getResolution(resolution),
             record: true
           });
@@ -1607,7 +1499,7 @@ var StartRecording_default = StartRecording;
 
 // src/Prebuilt/components/StatsForNerds.jsx
 init_define_process_env();
-import React15, { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
+import React14, { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
 import {
   selectHMSStats,
   selectLocalPeerID as selectLocalPeerID4,
@@ -1633,7 +1525,7 @@ var StatsForNerds = ({ onOpenChange }) => {
       setSelectedStat("local-peer");
     }
   }, [tracksWithLabels, selectedStat]);
-  return /* @__PURE__ */ React15.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React15.createElement(Dialog.Portal, null, /* @__PURE__ */ React15.createElement(Dialog.Overlay, null), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Portal, null, /* @__PURE__ */ React14.createElement(Dialog.Overlay, null), /* @__PURE__ */ React14.createElement(
     Dialog.Content,
     {
       css: {
@@ -1642,10 +1534,10 @@ var StatsForNerds = ({ onOpenChange }) => {
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React15.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React15.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React15.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React15.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React15.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
-    /* @__PURE__ */ React15.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
-    /* @__PURE__ */ React15.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React15.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React15.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React14.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React14.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React14.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React14.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
+    /* @__PURE__ */ React14.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
+    /* @__PURE__ */ React14.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React14.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React14.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
+    /* @__PURE__ */ React14.createElement(
       Flex,
       {
         direction: "column",
@@ -1655,8 +1547,8 @@ var StatsForNerds = ({ onOpenChange }) => {
           minWidth: 0
         }
       },
-      /* @__PURE__ */ React15.createElement(Label, { variant: "body2" }, "Stats For"),
-      /* @__PURE__ */ React15.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React15.createElement(
+      /* @__PURE__ */ React14.createElement(Label, { variant: "body2" }, "Stats For"),
+      /* @__PURE__ */ React14.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React14.createElement(
         DialogDropdownTrigger,
         {
           title: selectedStat.label || "Select Stats",
@@ -1665,9 +1557,9 @@ var StatsForNerds = ({ onOpenChange }) => {
           open,
           ref
         }
-      ), /* @__PURE__ */ React15.createElement(Dropdown.Portal, null, /* @__PURE__ */ React15.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
+      ), /* @__PURE__ */ React14.createElement(Dropdown.Portal, null, /* @__PURE__ */ React14.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
         const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React14.createElement(
           Dropdown.Item,
           {
             key: `${option.id}-${option.layer || ""}`,
@@ -1677,14 +1569,14 @@ var StatsForNerds = ({ onOpenChange }) => {
             css: {
               px: "$9",
               bg: isSelected ? selectionBg : void 0,
-              c: isSelected ? "$white" : "$textPrimary"
+              c: isSelected ? "$on_primary_high" : "$on_primary_high"
             }
           },
           option.label
         );
       }))))
     ),
-    selectedStat.id === "local-peer" ? /* @__PURE__ */ React15.createElement(LocalPeerStats, null) : /* @__PURE__ */ React15.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
+    selectedStat.id === "local-peer" ? /* @__PURE__ */ React14.createElement(LocalPeerStats, null) : /* @__PURE__ */ React14.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
   )));
 };
 var useTracksWithLabel = () => {
@@ -1726,13 +1618,13 @@ var LocalPeerStats = () => {
   if (!stats) {
     return null;
   }
-  return /* @__PURE__ */ React15.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React15.createElement(StatsRow, { label: "Packets Lost", value: (_a = stats.subscribe) == null ? void 0 : _a.packetsLost }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Jitter", value: (_b = stats.subscribe) == null ? void 0 : _b.jitter }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Publish Bitrate", value: formatBytes((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Subscribe Bitrate", value: formatBytes((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React14.createElement(StatsRow, { label: "Packets Lost", value: (_a = stats.subscribe) == null ? void 0 : _a.packetsLost }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Jitter", value: (_b = stats.subscribe) == null ? void 0 : _b.jitter }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Publish Bitrate", value: formatBytes((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Subscribe Bitrate", value: formatBytes((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React14.createElement(
     StatsRow,
     {
       label: "Available Outgoing Bitrate",
       value: formatBytes((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
     }
-  ), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Total Bytes Sent", value: formatBytes((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Total Bytes Received", value: formatBytes((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Total Bytes Sent", value: formatBytes((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Total Bytes Received", value: formatBytes((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React14.createElement(
     StatsRow,
     {
       label: "Round Trip Time",
@@ -1748,27 +1640,26 @@ var TrackStats = ({ trackID, layer, local }) => {
     return null;
   }
   const inbound = stats.type.includes("inbound");
-  return /* @__PURE__ */ React15.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React15.createElement(StatsRow, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Bitrate", value: formatBytes(stats.bitrate, "b/s") }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Jitter", value: (_a = stats.jitter) == null ? void 0 : _a.toFixed(3) }), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React14.createElement(StatsRow, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Bitrate", value: formatBytes(stats.bitrate, "b/s") }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Jitter", value: (_a = stats.jitter) == null ? void 0 : _a.toFixed(3) }), /* @__PURE__ */ React14.createElement(
     StatsRow,
     {
       label: inbound ? "Bytes Received" : "Bytes Sent",
       value: formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)
     }
-  ), stats.kind === "video" && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(StatsRow, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React15.createElement(StatsRow, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Round Trip Time", value: stats.roundTripTime ? `${stats.roundTripTime * 1e3} ms` : "-" }));
+  ), stats.kind === "video" && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(StatsRow, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React14.createElement(StatsRow, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Round Trip Time", value: stats.roundTripTime ? `${stats.roundTripTime * 1e3} ms` : "-" }));
 };
-var StatsRow = React15.memo(({ label, value }) => /* @__PURE__ */ React15.createElement(Box, { css: { bg: "$surfaceLight", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ React15.createElement(
+var StatsRow = React14.memo(({ label, value }) => /* @__PURE__ */ React14.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ React14.createElement(
   Text,
   {
     variant: "overline",
     css: {
       fontWeight: "$semiBold",
-      color: "$textMedEmp",
+      color: "$on_surface_medium",
       textTransform: "uppercase"
     }
   },
-  label,
-  " "
-), /* @__PURE__ */ React15.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$textHighEmp" } }, value || "-")));
+  label
+), /* @__PURE__ */ React14.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
 var formatBytes = (bytes, unit = "B", decimals = 2) => {
   if (bytes === void 0)
     return "-";
@@ -1783,13 +1674,13 @@ var formatBytes = (bytes, unit = "B", decimals = 2) => {
 
 // src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
 init_define_process_env();
-import React16, { useCallback as useCallback4, useRef as useRef6, useState as useState7 } from "react";
-import { useHMSActions as useHMSActions7 } from "@100mslive/react-sdk";
+import React15, { useCallback as useCallback6, useRef as useRef6, useState as useState7 } from "react";
+import { useHMSActions as useHMSActions8 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon2, ChangeRoleIcon, CheckIcon } from "@100mslive/react-icons";
 var BulkRoleChangeModal = ({ onOpenChange }) => {
   var _a, _b;
   const roles = useFilteredRoles();
-  const hmsActions = useHMSActions7();
+  const hmsActions = useHMSActions8();
   const ref = useRef6(null);
   const roleRef = useRef6(null);
   const [selectedBulkRole, setBulkRole] = useState7([]);
@@ -1798,7 +1689,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
   const [roleDialog, setRoleDialog] = useState7(false);
   const [errorMessage, setErrorMessage] = useState7("");
   const [isSubmiting, setIsSubmiting] = useState7(false);
-  const changeBulkRole = useCallback4(() => __async(void 0, null, function* () {
+  const changeBulkRole = useCallback6(() => __async(void 0, null, function* () {
     if (selectedBulkRole.length > 0 && selectedRole) {
       try {
         setIsSubmiting(true);
@@ -1812,7 +1703,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       }
     }
   }), [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
-  return /* @__PURE__ */ React16.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React16.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React16.createElement(DialogRow, null, /* @__PURE__ */ React16.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React15.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React15.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React15.createElement(DialogRow, null, /* @__PURE__ */ React15.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React15.createElement(
     Dropdown.Root,
     {
       open: bulkRoleDialog,
@@ -1823,7 +1714,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       },
       modal: false
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React15.createElement(
       DialogDropdownTrigger,
       {
         ref,
@@ -1835,7 +1726,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
         open: bulkRoleDialog
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React15.createElement(
       Dropdown.Content,
       {
         css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 },
@@ -1846,7 +1737,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
         }
       },
       roles && roles.map((role) => {
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React15.createElement(
           Dropdown.CheckboxItem,
           {
             key: role,
@@ -1858,12 +1749,12 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
               setErrorMessage("");
             }
           },
-          /* @__PURE__ */ React16.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React16.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React16.createElement(CheckIcon, { width: 16, height: 16 }))),
+          /* @__PURE__ */ React15.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React15.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React15.createElement(CheckIcon, { width: 16, height: 16 }))),
           role
         );
       })
     )
-  )), /* @__PURE__ */ React16.createElement(DialogRow, null, /* @__PURE__ */ React16.createElement(Text, null, "To Role: "), /* @__PURE__ */ React16.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React16.createElement(
+  )), /* @__PURE__ */ React15.createElement(DialogRow, null, /* @__PURE__ */ React15.createElement(Text, null, "To Role: "), /* @__PURE__ */ React15.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React15.createElement(
     DialogDropdownTrigger,
     {
       ref: roleRef,
@@ -1874,8 +1765,8 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       },
       open: roleDialog
     }
-  ), /* @__PURE__ */ React16.createElement(Dropdown.Content, { css: { w: (_b = roleRef.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
-    return /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React15.createElement(Dropdown.Content, { css: { w: (_b = roleRef.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
+    return /* @__PURE__ */ React15.createElement(
       Dropdown.Item,
       {
         key: role,
@@ -1886,16 +1777,16 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       },
       role
     );
-  })))), /* @__PURE__ */ React16.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React16.createElement(Flex, { gap: 2, css: { c: "$error", w: "70%", ml: "auto" } }, /* @__PURE__ */ React16.createElement(AlertTriangleIcon2, null), /* @__PURE__ */ React16.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React16.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React16.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React16.createElement(Loading, { css: { color: "$textSecondary" } }), "Apply"))));
+  })))), /* @__PURE__ */ React15.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React15.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ React15.createElement(AlertTriangleIcon2, null), /* @__PURE__ */ React15.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React15.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React15.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React15.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
 };
 
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
 init_define_process_env();
-import React17, { useState as useState8 } from "react";
-import { selectLocalPeerName, useHMSActions as useHMSActions8, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
+import React16, { useState as useState8 } from "react";
+import { selectLocalPeerName, useHMSActions as useHMSActions9, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
 var ChangeNameModal = ({ onOpenChange }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions8();
+  const hmsActions = useHMSActions9();
   const localPeerName = useHMSStore13(selectLocalPeerName);
   const [currentName, setCurrentName] = useState8(localPeerName);
   const changeName = () => __async(void 0, null, function* () {
@@ -1915,7 +1806,7 @@ var ChangeNameModal = ({ onOpenChange }) => {
       onOpenChange(false);
     }
   });
-  return /* @__PURE__ */ React17.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React17.createElement(Dialog.Portal, null, /* @__PURE__ */ React17.createElement(Dialog.Overlay, null), /* @__PURE__ */ React17.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React17.createElement(Dialog.Title, { css: { p: "0 $4" } }, /* @__PURE__ */ React17.createElement(Text, { variant: "h6" }, " Change Name")), /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React16.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React16.createElement(Dialog.Portal, null, /* @__PURE__ */ React16.createElement(Dialog.Overlay, null), /* @__PURE__ */ React16.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React16.createElement(Dialog.Title, { css: { p: "0 $4" } }, /* @__PURE__ */ React16.createElement(Text, { variant: "h6" }, " Change Name")), /* @__PURE__ */ React16.createElement(
     "form",
     {
       onSubmit: (e) => __async(void 0, null, function* () {
@@ -1923,7 +1814,7 @@ var ChangeNameModal = ({ onOpenChange }) => {
         yield changeName();
       })
     },
-    /* @__PURE__ */ React17.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%" } }, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React16.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%" } }, /* @__PURE__ */ React16.createElement(
       Input,
       {
         css: { width: "100%" },
@@ -1936,7 +1827,7 @@ var ChangeNameModal = ({ onOpenChange }) => {
         "data-testid": "change_name_field"
       }
     )),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React16.createElement(
       Flex,
       {
         justify: "between",
@@ -1947,8 +1838,8 @@ var ChangeNameModal = ({ onOpenChange }) => {
           mt: "$10"
         }
       },
-      /* @__PURE__ */ React17.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React17.createElement(Dialog.Close, { css: { w: "100%" } }, /* @__PURE__ */ React17.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, type: "submit", disabled: !localPeerName }, "Cancel"))),
-      /* @__PURE__ */ React17.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React17.createElement(
+      /* @__PURE__ */ React16.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React16.createElement(Dialog.Close, { css: { w: "100%" } }, /* @__PURE__ */ React16.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, type: "submit", disabled: !localPeerName }, "Cancel"))),
+      /* @__PURE__ */ React16.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React16.createElement(
         Button,
         {
           variant: "primary",
@@ -1965,29 +1856,29 @@ var ChangeNameModal = ({ onOpenChange }) => {
 
 // src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx
 init_define_process_env();
-import React18, { useMemo as useMemo4 } from "react";
+import React17, { useMemo as useMemo4 } from "react";
 import { useMedia as useMedia4 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID5,
   selectLocalPeerRoleName as selectLocalPeerRoleName4,
-  selectPermissions as selectPermissions2,
-  useHMSActions as useHMSActions9,
+  selectPermissions as selectPermissions3,
+  useHMSActions as useHMSActions10,
   useHMSStore as useHMSStore14
 } from "@100mslive/react-sdk";
 import { ArrowRightIcon, CheckIcon as CheckIcon2, PersonIcon } from "@100mslive/react-icons";
 var ChangeSelfRole = ({ onClick }) => {
   const roles = useFilteredRoles();
-  const permissions = useHMSStore14(selectPermissions2);
+  const permissions = useHMSStore14(selectPermissions3);
   const localPeerId = useHMSStore14(selectLocalPeerID5);
   const localPeerRole = useHMSStore14(selectLocalPeerRoleName4);
-  const hmsActions = useHMSActions9();
+  const hmsActions = useHMSActions10();
   const hideTriggerItem = useMedia4(config.media.sm);
   const selfRoleChangeTo = useAppLayout("selfRoleChangeTo");
   const availableSelfChangeRoles = useMemo4(() => arrayIntersection(selfRoleChangeTo, roles), [roles, selfRoleChangeTo]);
   if (!permissions.changeRole) {
     return null;
   }
-  return hideTriggerItem ? /* @__PURE__ */ React18.createElement(Dropdown.Item, { onClick }, /* @__PURE__ */ React18.createElement(PersonIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { mx: "$4" } }, "Change My Role")) : /* @__PURE__ */ React18.createElement(Dropdown.SubMenu, null, /* @__PURE__ */ React18.createElement(Dropdown.TriggerItem, { "data-testid": "change_my_role_btn" }, /* @__PURE__ */ React18.createElement(PersonIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$4" } }, "Change My Role"), /* @__PURE__ */ React18.createElement(ArrowRightIcon, null)), /* @__PURE__ */ React18.createElement(Dropdown.SubMenuContent, { sideOffset: 8, alignOffset: -5, css: { "@md": { w: "$64" } } }, availableSelfChangeRoles.map((role) => /* @__PURE__ */ React18.createElement(
+  return hideTriggerItem ? /* @__PURE__ */ React17.createElement(Dropdown.Item, { onClick }, /* @__PURE__ */ React17.createElement(PersonIcon, null), /* @__PURE__ */ React17.createElement(Text, { variant: "sm", css: { mx: "$4" } }, "Change My Role")) : /* @__PURE__ */ React17.createElement(Dropdown.SubMenu, null, /* @__PURE__ */ React17.createElement(Dropdown.TriggerItem, { "data-testid": "change_my_role_btn" }, /* @__PURE__ */ React17.createElement(PersonIcon, null), /* @__PURE__ */ React17.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$4" } }, "Change My Role"), /* @__PURE__ */ React17.createElement(ArrowRightIcon, null)), /* @__PURE__ */ React17.createElement(Dropdown.SubMenuContent, { sideOffset: 8, alignOffset: -5, css: { py: "$0", "@md": { w: "$64" } } }, availableSelfChangeRoles.map((role) => /* @__PURE__ */ React17.createElement(
     Dropdown.Item,
     {
       key: role,
@@ -2001,20 +1892,20 @@ var ChangeSelfRole = ({ onClick }) => {
       }),
       "data-testid": "change_to_role_" + role
     },
-    /* @__PURE__ */ React18.createElement(Text, { variant: "sm" }, role),
-    localPeerRole === role && /* @__PURE__ */ React18.createElement(CheckIcon2, { width: 16, height: 16 })
+    /* @__PURE__ */ React17.createElement(Text, { variant: "sm" }, role),
+    localPeerRole === role && /* @__PURE__ */ React17.createElement(CheckIcon2, { width: 16, height: 16 })
   ))));
 };
 
 // src/Prebuilt/components/MoreSettings/EmbedUrl.jsx
 init_define_process_env();
-import React19, { useState as useState9 } from "react";
+import React18, { useState as useState9 } from "react";
 import { ViewIcon } from "@100mslive/react-icons";
 var EmbedUrl = ({ setShowOpenUrl }) => {
   if (!window.CropTarget) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Dropdown.Item,
     {
       onClick: () => {
@@ -2022,8 +1913,8 @@ var EmbedUrl = ({ setShowOpenUrl }) => {
       },
       "data-testid": "embed_url_btn"
     },
-    /* @__PURE__ */ React19.createElement(ViewIcon, null),
-    /* @__PURE__ */ React19.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Embed URL")
+    /* @__PURE__ */ React18.createElement(ViewIcon, null),
+    /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Embed URL")
   );
 };
 function EmbedUrlModal({ onOpenChange }) {
@@ -2031,7 +1922,7 @@ function EmbedUrlModal({ onOpenChange }) {
   const [url, setUrl] = useState9((embedConfig == null ? void 0 : embedConfig.url) || "");
   const isAnythingEmbedded = !!(embedConfig == null ? void 0 : embedConfig.url);
   const isModifying = isAnythingEmbedded && url && url !== embedConfig.url;
-  return /* @__PURE__ */ React19.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React19.createElement(DialogContent, { title: "Embed URL", Icon: ViewIcon }, /* @__PURE__ */ React19.createElement(DialogInput, { title: "URL", value: url, onChange: setUrl, placeholder: "https://www.tldraw.com/", type: "url" }), /* @__PURE__ */ React19.createElement(DialogRow, null, /* @__PURE__ */ React19.createElement(Text, null, "Embed a url and share with everyone in the room. Ensure that you're sharing the current tab when the prompt opens. Note that not all websites support being embedded.")), /* @__PURE__ */ React19.createElement(DialogRow, { justify: "end" }, isAnythingEmbedded ? /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React18.createElement(DialogContent, { title: "Embed URL", Icon: ViewIcon }, /* @__PURE__ */ React18.createElement(DialogInput, { title: "URL", value: url, onChange: setUrl, placeholder: "https://www.tldraw.com/", type: "url" }), /* @__PURE__ */ React18.createElement(DialogRow, null, /* @__PURE__ */ React18.createElement(Text, null, "Embed a url and share with everyone in the room. Ensure that you're sharing the current tab when the prompt opens. Note that not all websites support being embedded.")), /* @__PURE__ */ React18.createElement(DialogRow, { justify: "end" }, isAnythingEmbedded ? /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     Button,
     {
       variant: "primary",
@@ -2045,7 +1936,7 @@ function EmbedUrlModal({ onOpenChange }) {
       css: { mr: "$4" }
     },
     "Update Embed"
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React18.createElement(
     Button,
     {
       variant: "danger",
@@ -2057,7 +1948,7 @@ function EmbedUrlModal({ onOpenChange }) {
       "data-testid": "embed_url_btn"
     },
     "Stop Embed"
-  )) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  )) : /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     Button,
     {
       variant: "primary",
@@ -2071,7 +1962,7 @@ function EmbedUrlModal({ onOpenChange }) {
       css: { mr: "$4" }
     },
     "Just Embed"
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React18.createElement(
     Button,
     {
       variant: "primary",
@@ -2089,16 +1980,16 @@ function EmbedUrlModal({ onOpenChange }) {
 
 // src/Prebuilt/components/MoreSettings/FullScreenItem.jsx
 init_define_process_env();
-import React20 from "react";
+import React19 from "react";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useFullscreen.js
 init_define_process_env();
-import { useCallback as useCallback5, useEffect as useEffect7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useState as useState10 } from "react";
 import screenfull2 from "screenfull";
 var useFullscreen2 = () => {
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState10(screenfull2.isFullscreen);
-  const toggle = useCallback5(() => __async(void 0, null, function* () {
+  const toggle = useCallback7(() => __async(void 0, null, function* () {
     if (!screenfull2.isEnabled) {
       ToastManager.addToast({ title: "Fullscreen feature not supported" });
       return;
@@ -2140,7 +2031,7 @@ var FullScreenItem = () => {
   if (!isFullscreenEnabled || !allowed) {
     return null;
   }
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Dropdown.Item,
     {
       onClick: () => {
@@ -2148,15 +2039,15 @@ var FullScreenItem = () => {
       },
       "data-testid": "full_screen_btn"
     },
-    /* @__PURE__ */ React20.createElement(ExpandIcon2, null),
-    /* @__PURE__ */ React20.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
+    /* @__PURE__ */ React19.createElement(ExpandIcon2, null),
+    /* @__PURE__ */ React19.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
   );
 };
 
 // src/Prebuilt/components/MoreSettings/MuteAllModal.jsx
 init_define_process_env();
-import React21, { useCallback as useCallback6, useState as useState11 } from "react";
-import { useHMSActions as useHMSActions10 } from "@100mslive/react-sdk";
+import React20, { useCallback as useCallback8, useState as useState11 } from "react";
+import { useHMSActions as useHMSActions11 } from "@100mslive/react-sdk";
 import { MicOffIcon } from "@100mslive/react-icons";
 var trackSourceOptions = [
   { label: "All Track Sources", value: "" },
@@ -2172,12 +2063,12 @@ var trackTypeOptions = [
 ];
 var MuteAllModal = ({ onOpenChange }) => {
   const roles = useFilteredRoles();
-  const hmsActions = useHMSActions10();
+  const hmsActions = useHMSActions11();
   const [enabled, setEnabled] = useState11(false);
   const [trackType, setTrackType] = useState11();
   const [selectedRole, setRole] = useState11();
   const [selectedSource, setSource] = useState11();
-  const muteAll = useCallback6(() => __async(void 0, null, function* () {
+  const muteAll = useCallback8(() => __async(void 0, null, function* () {
     yield hmsActions.setRemoteTracksEnabled({
       enabled,
       type: trackType,
@@ -2186,7 +2077,7 @@ var MuteAllModal = ({ onOpenChange }) => {
     });
     onOpenChange(false);
   }), [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
-  return /* @__PURE__ */ React21.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React21.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React20.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React20.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon }, /* @__PURE__ */ React20.createElement(
     DialogSelect,
     {
       title: "Role",
@@ -2196,7 +2087,7 @@ var MuteAllModal = ({ onOpenChange }) => {
       labelField: "label",
       onChange: setRole
     }
-  ), /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     DialogSelect,
     {
       title: "Track type",
@@ -2206,7 +2097,7 @@ var MuteAllModal = ({ onOpenChange }) => {
       keyField: "value",
       labelField: "label"
     }
-  ), /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     DialogSelect,
     {
       title: "Track source",
@@ -2216,7 +2107,7 @@ var MuteAllModal = ({ onOpenChange }) => {
       keyField: "value",
       labelField: "label"
     }
-  ), /* @__PURE__ */ React21.createElement(DialogRow, null, /* @__PURE__ */ React21.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React21.createElement(RadioGroup.Root, { value: enabled, onValueChange: setEnabled }, /* @__PURE__ */ React21.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Item, { value: false, id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React21.createElement(Label, { htmlFor: "trackDisableRadio" }, "Mute")), /* @__PURE__ */ React21.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Item, { value: true, id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React21.createElement(Label, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React21.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React21.createElement(Button, { variant: "primary", onClick: muteAll }, "Apply"))));
+  ), /* @__PURE__ */ React20.createElement(DialogRow, null, /* @__PURE__ */ React20.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React20.createElement(RadioGroup.Root, { value: enabled, onValueChange: setEnabled }, /* @__PURE__ */ React20.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Item, { value: false, id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React20.createElement(Label, { htmlFor: "trackDisableRadio" }, "Mute")), /* @__PURE__ */ React20.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Item, { value: true, id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React20.createElement(Label, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React20.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React20.createElement(Button, { variant: "primary", onClick: muteAll }, "Apply"))));
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.jsx
@@ -2233,14 +2124,14 @@ var MODALS = {
   EMBED_URL: "embedUrl"
 };
 var MoreSettings = () => {
-  const permissions = useHMSStore15(selectPermissions3);
-  const isAllowedToPublish = useHMSStore15(selectIsAllowedToPublish2);
+  const permissions = useHMSStore15(selectPermissions4);
+  const isAllowedToPublish = useHMSStore15(selectIsAllowedToPublish);
   const localPeerId = useHMSStore15(selectLocalPeerID6);
   const localPeerRole = useHMSStore15(selectLocalPeerRoleName5);
-  const hmsActions = useHMSActions11();
-  const enablHlsStats = useHMSStore15(selectAppData3(APP_DATA.hlsStats));
+  const hmsActions = useHMSActions12();
+  const enablHlsStats = useHMSStore15(selectAppData2(APP_DATA.hlsStats));
   const isMobile = useMedia5(config.media.md);
-  const { isBrowserRecordingOn } = useRecordingStreaming2();
+  const { isBrowserRecordingOn } = useRecordingStreaming3();
   const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
   const isEmbedEnabled = useIsFeatureEnabled(FEATURE_LIST.EMBED_URL);
   const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
@@ -2257,19 +2148,20 @@ var MoreSettings = () => {
       return copy;
     });
   };
-  return /* @__PURE__ */ React22.createElement(Fragment4, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(Fragment3, null, /* @__PURE__ */ React21.createElement(
     Dropdown.Root,
     {
       open: openModals.has(MODALS.MORE_SETTINGS),
       onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value)
     },
-    /* @__PURE__ */ React22.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React22.createElement(IconButton_default, null, /* @__PURE__ */ React22.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React22.createElement(Box, null, /* @__PURE__ */ React22.createElement(VerticalMenuIcon, null))))),
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React21.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React21.createElement(IconButton_default, null, /* @__PURE__ */ React21.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React21.createElement(Box, null, /* @__PURE__ */ React21.createElement(VerticalMenuIcon, null))))),
+    /* @__PURE__ */ React21.createElement(
       Dropdown.Content,
       {
         sideOffset: 5,
         align: "center",
         css: {
+          py: "$0",
           maxHeight: "$96",
           "@md": { w: "$64" },
           "div[role='separator']:first-child": {
@@ -2277,65 +2169,65 @@ var MoreSettings = () => {
           }
         }
       },
-      isMobile && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.START_RECORDING, true) }, /* @__PURE__ */ React22.createElement(RecordIcon, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isBrowserRecordingOn ? "Stop" : "Start", " Recording")), /* @__PURE__ */ React22.createElement(Dropdown.ItemSeparator, null)) : null,
-      isChangeNameEnabled && /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.CHANGE_NAME, true), "data-testid": "change_name_btn" }, /* @__PURE__ */ React22.createElement(PencilIcon, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Change Name")),
-      /* @__PURE__ */ React22.createElement(ChangeSelfRole, { onClick: () => updateState(MODALS.SELF_ROLE_CHANGE, true) }),
-      (permissions == null ? void 0 : permissions.changeRole) && /* @__PURE__ */ React22.createElement(
+      isMobile && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.START_RECORDING, true) }, /* @__PURE__ */ React21.createElement(RecordIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isBrowserRecordingOn ? "Stop" : "Start", " Recording")), /* @__PURE__ */ React21.createElement(Dropdown.ItemSeparator, null)) : null,
+      isChangeNameEnabled && /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.CHANGE_NAME, true), "data-testid": "change_name_btn" }, /* @__PURE__ */ React21.createElement(PencilIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Change Name")),
+      /* @__PURE__ */ React21.createElement(ChangeSelfRole, { onClick: () => updateState(MODALS.SELF_ROLE_CHANGE, true) }),
+      (permissions == null ? void 0 : permissions.changeRole) && /* @__PURE__ */ React21.createElement(
         Dropdown.Item,
         {
           onClick: () => updateState(MODALS.BULK_ROLE_CHANGE, true),
           "data-testid": "bulk_role_change_btn"
         },
-        /* @__PURE__ */ React22.createElement(ChangeRoleIcon2, null),
-        /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Bulk Role Change")
+        /* @__PURE__ */ React21.createElement(ChangeRoleIcon2, null),
+        /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Bulk Role Change")
       ),
-      /* @__PURE__ */ React22.createElement(FullScreenItem, null),
-      isAllowedToPublish.screen && isEmbedEnabled && /* @__PURE__ */ React22.createElement(EmbedUrl, { setShowOpenUrl: () => updateState(MODALS.EMBED_URL, true) }),
-      permissions.mute && /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.MUTE_ALL, true), "data-testid": "mute_all_btn" }, /* @__PURE__ */ React22.createElement(MicOffIcon2, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Mute All")),
-      /* @__PURE__ */ React22.createElement(Dropdown.ItemSeparator, null),
-      /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React22.createElement(SettingsIcon, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
-      FeatureFlags.enableStatsForNerds && isSFNEnabled && (localPeerRole === "hls-viewer" ? Hls.isSupported() ? /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React21.createElement(FullScreenItem, null),
+      isAllowedToPublish.screen && isEmbedEnabled && /* @__PURE__ */ React21.createElement(EmbedUrl, { setShowOpenUrl: () => updateState(MODALS.EMBED_URL, true) }),
+      permissions.mute && /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.MUTE_ALL, true), "data-testid": "mute_all_btn" }, /* @__PURE__ */ React21.createElement(MicOffIcon2, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Mute All")),
+      /* @__PURE__ */ React21.createElement(Dropdown.ItemSeparator, null),
+      /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React21.createElement(SettingsIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
+      FeatureFlags.enableStatsForNerds && isSFNEnabled && (localPeerRole === "hls-viewer" ? Hls.isSupported() ? /* @__PURE__ */ React21.createElement(
         Dropdown.Item,
         {
           onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
           "data-testid": "hls_stats"
         },
-        /* @__PURE__ */ React22.createElement(
+        /* @__PURE__ */ React21.createElement(
           Checkbox.Root,
           {
             css: { margin: "$2" },
             checked: enablHlsStats,
             onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
           },
-          /* @__PURE__ */ React22.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React22.createElement(CheckIcon3, { width: 16, height: 16 }))
+          /* @__PURE__ */ React21.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React21.createElement(CheckIcon3, { width: 16, height: 16 }))
         ),
-        /* @__PURE__ */ React22.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), !isMobileOS ? /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`) : null)
-      ) : null : /* @__PURE__ */ React22.createElement(
+        /* @__PURE__ */ React21.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), !isMobileOS ? /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`) : null)
+      ) : null : /* @__PURE__ */ React21.createElement(
         Dropdown.Item,
         {
           onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
           "data-testid": "stats_for_nreds_btn"
         },
-        /* @__PURE__ */ React22.createElement(InfoIcon, null),
-        /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
+        /* @__PURE__ */ React21.createElement(InfoIcon, null),
+        /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
       ))
     )
-  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React22.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React22.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.CHANGE_NAME) && /* @__PURE__ */ React22.createElement(ChangeNameModal, { onOpenChange: (value) => updateState(MODALS.CHANGE_NAME, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React22.createElement(SettingsModal_default, { open: true, onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value) }), FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React22.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React22.createElement(RoleChangeModal, { peerId: localPeerId, onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React22.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.EMBED_URL) && /* @__PURE__ */ React22.createElement(EmbedUrlModal, { onOpenChange: (value) => updateState(MODALS.EMBED_URL, value) }));
+  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React21.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React21.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.CHANGE_NAME) && /* @__PURE__ */ React21.createElement(ChangeNameModal, { onOpenChange: (value) => updateState(MODALS.CHANGE_NAME, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React21.createElement(SettingsModal_default, { open: true, onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value) }), FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React21.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React21.createElement(RoleChangeModal, { peerId: localPeerId, onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React21.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.EMBED_URL) && /* @__PURE__ */ React21.createElement(EmbedUrlModal, { onOpenChange: (value) => updateState(MODALS.EMBED_URL, value) }));
 };
 
 // src/Prebuilt/components/PIP/index.jsx
 init_define_process_env();
-import React24 from "react";
+import React23 from "react";
 
 // src/Prebuilt/components/PIP/PIPComponent.jsx
 init_define_process_env();
-import React23, { useCallback as useCallback7, useEffect as useEffect8, useState as useState13 } from "react";
+import React22, { useCallback as useCallback9, useEffect as useEffect8, useState as useState13 } from "react";
 import {
   selectLocalPeerRoleName as selectLocalPeerRoleName6,
   selectPeers as selectPeers4,
   selectRemotePeers as selectRemotePeers2,
   selectTracksMap as selectTracksMap2,
-  useHMSActions as useHMSActions12,
+  useHMSActions as useHMSActions13,
   useHMSStore as useHMSStore16,
   useHMSVanillaStore
 } from "@100mslive/react-sdk";
@@ -2351,10 +2243,10 @@ var CANVAS_FILL_COLOR;
 var CANVAS_STROKE_COLOR;
 function setPIPCanvasColors() {
   if (!CANVAS_FILL_COLOR) {
-    CANVAS_FILL_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-surfaceLight");
+    CANVAS_FILL_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-surface_bright");
   }
   if (!CANVAS_STROKE_COLOR) {
-    CANVAS_STROKE_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-borderLight");
+    CANVAS_STROKE_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-border_bright");
   }
 }
 function resetPIPCanvasColors() {
@@ -2785,10 +2677,10 @@ var MediaSession = new SetupMediaSession();
 var PIPComponent = ({ peers, showLocalPeer }) => {
   const localPeerRole = useHMSStore16(selectLocalPeerRoleName6);
   const [isPipOn, setIsPipOn] = useState13(PictureInPicture.isOn());
-  const hmsActions = useHMSActions12();
+  const hmsActions = useHMSActions13();
   const store = useHMSVanillaStore();
   const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
-  const onPipToggle = useCallback7(() => {
+  const onPipToggle = useCallback9(() => {
     if (!isPipOn) {
       PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
       MediaSession.setup(hmsActions, store);
@@ -2804,7 +2696,7 @@ var PIPComponent = ({ peers, showLocalPeer }) => {
   if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React23.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React23.createElement(PipIcon, null))), isPipOn && /* @__PURE__ */ React23.createElement(ActivatedPIP, { showLocalPeer, peers }));
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React22.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React22.createElement(PipIcon, null))), isPipOn && /* @__PURE__ */ React22.createElement(ActivatedPIP, { showLocalPeer, peers }));
 };
 var ActivatedPIP = ({ showLocalPeer, peers }) => {
   const tracksMap = useHMSStore16(selectTracksMap2);
@@ -2825,18 +2717,18 @@ var PIPComponent_default = PIPComponent;
 // src/Prebuilt/components/PIP/index.jsx
 var PIP = () => {
   const pinnedTrack = usePinnedTrack();
-  return /* @__PURE__ */ React24.createElement(PIPComponent_default, { peers: pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : void 0, showLocalPeer: true });
+  return /* @__PURE__ */ React23.createElement(PIPComponent_default, { peers: pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : void 0, showLocalPeer: true });
 };
 
 // src/Prebuilt/components/ScreenShare.jsx
 init_define_process_env();
-import React32, { Fragment as Fragment6 } from "react";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish3, useHMSStore as useHMSStore17, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
+import React31, { Fragment as Fragment5 } from "react";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, useHMSStore as useHMSStore17, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
 import { ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
 init_define_process_env();
-import React31, { Fragment as Fragment5, useState as useState15 } from "react";
+import React30, { Fragment as Fragment4, useState as useState15 } from "react";
 import { useScreenShare as useScreenShare3 } from "@100mslive/react-sdk";
 import { PdfShare, ScreenShare, StarIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
@@ -2867,30 +2759,30 @@ var ShareMenuIcon = styled(ScreenShareButton, {
 
 // src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
 init_define_process_env();
-import React30, { useState as useState14 } from "react";
+import React29, { useState as useState14 } from "react";
 
 // src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx
 init_define_process_env();
-import React25 from "react";
+import React24 from "react";
 import { InfoIcon as InfoIcon2 } from "@100mslive/react-icons";
 var PdfErrorView = ({ isPDFUrlValid }) => {
-  return !isPDFUrlValid && /* @__PURE__ */ React25.createElement(
+  return !isPDFUrlValid && /* @__PURE__ */ React24.createElement(
     DialogRow,
     {
       css: {
         mt: "-$8",
-        color: "$error",
+        color: "$alert_error_default",
         justifyContent: "start"
       }
     },
-    /* @__PURE__ */ React25.createElement(InfoIcon2, { width: "12px", height: "12px" }),
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React24.createElement(InfoIcon2, { width: "12px", height: "12px" }),
+    /* @__PURE__ */ React24.createElement(
       Text,
       {
         variant: "caption",
         css: {
           pl: "$1",
-          color: "$error"
+          color: "$alert_error_default"
         }
       },
       "Please enter a valid PDF URL"
@@ -2900,9 +2792,9 @@ var PdfErrorView = ({ isPDFUrlValid }) => {
 
 // src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx
 init_define_process_env();
-import React26 from "react";
+import React25 from "react";
 var PDFHeader = () => {
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React25.createElement(
     DialogCol,
     {
       align: "start",
@@ -2911,13 +2803,13 @@ var PDFHeader = () => {
         mb: "$6"
       }
     },
-    /* @__PURE__ */ React26.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React26.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
-    /* @__PURE__ */ React26.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React25.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
+    /* @__PURE__ */ React25.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React25.createElement(
       Text,
       {
         variant: "sm",
         css: {
-          c: "$textMedEmp"
+          c: "$on_surface_medium"
         }
       },
       "Choose PDF you want to annotate and share"
@@ -2927,23 +2819,23 @@ var PDFHeader = () => {
 
 // src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx
 init_define_process_env();
-import React27 from "react";
+import React26 from "react";
 import { InfoIcon as InfoIcon3 } from "@100mslive/react-icons";
 var PDFInfo = () => {
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(
     DialogRow,
     {
       css: {
         px: "$8",
         py: "$3",
-        bg: "$surfaceLight",
+        bg: "$surface_bright",
         r: "$1",
         outline: "none",
-        border: "1px solid $borderLight",
+        border: "1px solid $border_bright",
         minHeight: "$11"
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React26.createElement(
       InfoIcon3,
       {
         width: "64px",
@@ -2953,13 +2845,13 @@ var PDFInfo = () => {
         }
       }
     ),
-    /* @__PURE__ */ React27.createElement(Text, { variant: "caption" }, "On the next screen, ensure you select \u201CThis Tab\u201D and click on share. Only the PDF viewer will be seen by other participants")
+    /* @__PURE__ */ React26.createElement(Text, { variant: "caption" }, "On the next screen, ensure you select \u201CThis Tab\u201D and click on share. Only the PDF viewer will be seen by other participants")
   );
 };
 
 // src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
 init_define_process_env();
-import React28, { useCallback as useCallback8 } from "react";
+import React27, { useCallback as useCallback10 } from "react";
 var SubmitPDF = ({
   pdfFile,
   pdfURL,
@@ -2969,7 +2861,7 @@ var SubmitPDF = ({
   onOpenChange
 }) => {
   const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  const isValidPDF = useCallback8(
+  const isValidPDF = useCallback10(
     (pdfURL2) => {
       const extension = pdfURL2.split(".").pop().toLowerCase();
       setIsValidateProgress(true);
@@ -2996,7 +2888,7 @@ var SubmitPDF = ({
     },
     [onOpenChange, pdfFile, setIsPDFUrlValid, setIsValidateProgress, setPDFConfig]
   );
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Flex,
     {
       direction: "row",
@@ -3006,7 +2898,7 @@ var SubmitPDF = ({
         gap: "$8"
       }
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React27.createElement(
       Button,
       {
         variant: "standard",
@@ -3019,7 +2911,7 @@ var SubmitPDF = ({
       },
       "Cancel"
     ),
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React27.createElement(
       Button,
       {
         variant: "primary",
@@ -3046,7 +2938,7 @@ var SubmitPDF = ({
 
 // src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
 init_define_process_env();
-import React29 from "react";
+import React28 from "react";
 import { TrashIcon } from "@100mslive/react-icons";
 var UploadedFile = ({
   pdfFile,
@@ -3058,7 +2950,7 @@ var UploadedFile = ({
   onOpenChange
 }) => {
   const [fileName, ext] = pdfFile.name.split(".");
-  return /* @__PURE__ */ React29.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React29.createElement(Dialog.Portal, null, /* @__PURE__ */ React29.createElement(Dialog.Overlay, null), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React28.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React28.createElement(Dialog.Portal, null, /* @__PURE__ */ React28.createElement(Dialog.Overlay, null), /* @__PURE__ */ React28.createElement(
     Dialog.Content,
     {
       css: {
@@ -3067,29 +2959,29 @@ var UploadedFile = ({
         p: "$10"
       }
     },
-    /* @__PURE__ */ React29.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React29.createElement(PDFHeader, null), /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React28.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React28.createElement(PDFHeader, null), /* @__PURE__ */ React28.createElement(
       DialogRow,
       {
         css: {
           fontFamily: "$sans",
-          bg: "$surfaceLight",
+          bg: "$surface_bright",
           r: "$1",
           outline: "none",
-          border: "1px solid $borderLight",
+          border: "1px solid $border_bright",
           p: "$4 $6",
           minHeight: "$11",
-          c: "$textPrimary",
+          c: "$on_primary_high",
           fs: "$md",
           w: "100%",
           "&:focus": {
-            boxShadow: "0 0 0 1px $colors$borderAccent",
+            boxShadow: "0 0 0 1px $colors$primary_default",
             border: "1px solid $transparent"
           },
           mb: 0,
           mt: "$6"
         }
       },
-      /* @__PURE__ */ React29.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React28.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React28.createElement(
         Text,
         {
           css: {
@@ -3099,8 +2991,8 @@ var UploadedFile = ({
           }
         },
         fileName
-      ), /* @__PURE__ */ React29.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
-      /* @__PURE__ */ React29.createElement(
+      ), /* @__PURE__ */ React28.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
+      /* @__PURE__ */ React28.createElement(
         TrashIcon,
         {
           onClick: () => setPDFFile(null),
@@ -3109,7 +3001,7 @@ var UploadedFile = ({
           }
         }
       )
-    ), /* @__PURE__ */ React29.createElement(PDFInfo, null), /* @__PURE__ */ React29.createElement(
+    ), /* @__PURE__ */ React28.createElement(PDFInfo, null), /* @__PURE__ */ React28.createElement(
       SubmitPDF,
       {
         pdfFile,
@@ -3129,7 +3021,7 @@ function PDFFileOptions({ onOpenChange }) {
   const [isValidateProgress, setIsValidateProgress] = useState14(false);
   const [pdfFile, setPDFFile] = useState14(null);
   const [pdfURL, setPDFURL] = useState14("");
-  return !pdfFile ? /* @__PURE__ */ React30.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React30.createElement(Dialog.Portal, null, /* @__PURE__ */ React30.createElement(Dialog.Overlay, null), /* @__PURE__ */ React30.createElement(
+  return !pdfFile ? /* @__PURE__ */ React29.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React29.createElement(Dialog.Portal, null, /* @__PURE__ */ React29.createElement(Dialog.Overlay, null), /* @__PURE__ */ React29.createElement(
     Dialog.Content,
     {
       css: {
@@ -3138,7 +3030,7 @@ function PDFFileOptions({ onOpenChange }) {
         p: "$10"
       }
     },
-    /* @__PURE__ */ React30.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React30.createElement(PDFHeader, null), /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React29.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React29.createElement(PDFHeader, null), /* @__PURE__ */ React29.createElement(
       DialogInputFile,
       {
         onChange: (target) => {
@@ -3148,14 +3040,14 @@ function PDFFileOptions({ onOpenChange }) {
         type: "file",
         accept: ".pdf"
       }
-    ), /* @__PURE__ */ React30.createElement(
+    ), /* @__PURE__ */ React29.createElement(
       DialogRow,
       {
         css: {
           m: "$10 0"
         }
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React29.createElement(
         HorizontalDivider,
         {
           css: {
@@ -3163,17 +3055,17 @@ function PDFFileOptions({ onOpenChange }) {
           }
         }
       ),
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React29.createElement(
         Text,
         {
           variant: "tiny",
           css: {
-            color: "$textDisabled"
+            color: "$on_surface_low"
           }
         },
         "OR"
       ),
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React29.createElement(
         HorizontalDivider,
         {
           css: {
@@ -3181,7 +3073,7 @@ function PDFFileOptions({ onOpenChange }) {
           }
         }
       )
-    ), /* @__PURE__ */ React30.createElement(
+    ), /* @__PURE__ */ React29.createElement(
       Text,
       {
         variant: "sm",
@@ -3190,7 +3082,7 @@ function PDFFileOptions({ onOpenChange }) {
         }
       },
       "Import from URL"
-    ), /* @__PURE__ */ React30.createElement(
+    ), /* @__PURE__ */ React29.createElement(
       Input,
       {
         css: { w: "100%", mb: "$10" },
@@ -3206,7 +3098,7 @@ function PDFFileOptions({ onOpenChange }) {
         type: "text",
         error: !isPDFUrlValid
       }
-    ), !isPDFUrlValid && /* @__PURE__ */ React30.createElement(PdfErrorView, { isPDFUrlValid }), /* @__PURE__ */ React30.createElement(PDFInfo, null), /* @__PURE__ */ React30.createElement(
+    ), !isPDFUrlValid && /* @__PURE__ */ React29.createElement(PdfErrorView, { isPDFUrlValid }), /* @__PURE__ */ React29.createElement(PDFInfo, null), /* @__PURE__ */ React29.createElement(
       SubmitPDF,
       {
         pdfFile,
@@ -3217,7 +3109,7 @@ function PDFFileOptions({ onOpenChange }) {
         onOpenChange
       }
     ))
-  ))) : /* @__PURE__ */ React30.createElement(
+  ))) : /* @__PURE__ */ React29.createElement(
     UploadedFile,
     {
       pdfFile,
@@ -3252,7 +3144,7 @@ function ShareScreenOptions() {
     });
   };
   const { toggleScreenShare } = useScreenShare3();
-  return /* @__PURE__ */ React31.createElement(Fragment5, null, /* @__PURE__ */ React31.createElement(Dropdown.Root, { open: openModals.has(MODALS2.SHARE), onOpenChange: (value) => updateState(MODALS2.SHARE, value) }, /* @__PURE__ */ React31.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React31.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React31.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React31.createElement(Box, null, /* @__PURE__ */ React31.createElement(VerticalMenuIcon2, null))))), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React30.createElement(Fragment4, null, /* @__PURE__ */ React30.createElement(Dropdown.Root, { open: openModals.has(MODALS2.SHARE), onOpenChange: (value) => updateState(MODALS2.SHARE, value) }, /* @__PURE__ */ React30.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React30.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React30.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React30.createElement(Box, null, /* @__PURE__ */ React30.createElement(VerticalMenuIcon2, null))))), /* @__PURE__ */ React30.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -3262,7 +3154,7 @@ function ShareScreenOptions() {
         p: 0
       }
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       Dropdown.Item,
       {
         css: {
@@ -3277,10 +3169,10 @@ function ShareScreenOptions() {
           }
         }
       },
-      /* @__PURE__ */ React31.createElement(Text, { variant: "h6" }, "Start Sharing"),
-      /* @__PURE__ */ React31.createElement(Text, { variant: "sm" }, "Choose what you want to share")
+      /* @__PURE__ */ React30.createElement(Text, { variant: "h6" }, "Start Sharing"),
+      /* @__PURE__ */ React30.createElement(Text, { variant: "sm" }, "Choose what you want to share")
     ),
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       Dropdown.Item,
       {
         css: {
@@ -3295,7 +3187,7 @@ function ShareScreenOptions() {
           }
         }
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React30.createElement(
         Flex,
         {
           direction: "column",
@@ -3304,7 +3196,7 @@ function ShareScreenOptions() {
             gap: "$6"
           }
         },
-        /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React30.createElement(
           IconButton,
           {
             as: "div",
@@ -3313,13 +3205,13 @@ function ShareScreenOptions() {
               p: "$6",
               display: "flex",
               justifyContent: "center",
-              border: "1px solid $grayDefault",
+              border: "1px solid $border_bright",
               r: "$2",
-              bg: "$surfaceLighter",
+              bg: "$surface_brighter",
               pb: "0"
             }
           },
-          /* @__PURE__ */ React31.createElement(
+          /* @__PURE__ */ React30.createElement(
             ScreenShare,
             {
               width: "100%",
@@ -3331,19 +3223,19 @@ function ShareScreenOptions() {
             }
           )
         ),
-        /* @__PURE__ */ React31.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React31.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React30.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React30.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React30.createElement(
           Text,
           {
             variant: "caption",
             css: {
-              c: "$textDisabled",
+              c: "$on_surface_low",
               textAlign: "center"
             }
           },
           "Share your tab, window or your entire screen"
         ))
       ),
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React30.createElement(
         Flex,
         {
           direction: "column",
@@ -3352,7 +3244,7 @@ function ShareScreenOptions() {
             gap: "$6"
           }
         },
-        /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React30.createElement(
           IconButton,
           {
             onClick: () => {
@@ -3363,13 +3255,13 @@ function ShareScreenOptions() {
               p: "$6",
               display: "flex",
               justifyContent: "center",
-              border: "$grayDefault 1px solid",
+              border: "$border_bright 1px solid",
               r: "$2",
-              bg: "$surfaceLight",
+              bg: "$surface_bright",
               pb: "0"
             }
           },
-          /* @__PURE__ */ React31.createElement(
+          /* @__PURE__ */ React30.createElement(
             PdfShare,
             {
               width: "100%",
@@ -3380,41 +3272,30 @@ function ShareScreenOptions() {
               }
             }
           ),
-          /* @__PURE__ */ React31.createElement(
+          /* @__PURE__ */ React30.createElement(
             Flex,
             {
               direction: "row",
+              align: "center",
               css: {
                 position: "absolute",
                 top: "29%",
                 left: "54%",
                 padding: "$2 $4",
                 r: "$2",
-                bg: "$primaryLight",
-                zIndex: "2"
+                bg: "$primary_bright",
+                zIndex: "2",
+                gap: "$2"
               }
             },
-            /* @__PURE__ */ React31.createElement(
-              IconButton,
-              {
-                css: {
-                  w: "$10",
-                  h: "$8",
-                  "&:hover": {
-                    bg: "$transparent !important",
-                    border: "none"
-                  }
-                }
-              },
-              /* @__PURE__ */ React31.createElement(StarIcon, null)
-            ),
-            /* @__PURE__ */ React31.createElement(
+            /* @__PURE__ */ React30.createElement(StarIcon, { height: 14, width: 14 }),
+            /* @__PURE__ */ React30.createElement(
               Text,
               {
                 variant: "xs",
                 css: {
                   fontWeight: "$semiBold",
-                  c: "$white",
+                  c: "$on_primary_high",
                   pr: "$4"
                 }
               },
@@ -3422,12 +3303,12 @@ function ShareScreenOptions() {
             )
           )
         ),
-        /* @__PURE__ */ React31.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React31.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React30.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React30.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React30.createElement(
           Text,
           {
             variant: "caption",
             css: {
-              c: "$textDisabled",
+              c: "$on_surface_low",
               textAlign: "center"
             }
           },
@@ -3435,7 +3316,7 @@ function ShareScreenOptions() {
         ))
       )
     ),
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React30.createElement(
       Dropdown.Item,
       {
         css: {
@@ -3448,7 +3329,7 @@ function ShareScreenOptions() {
           }
         }
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React30.createElement(
         Button,
         {
           variant: "standard",
@@ -3465,19 +3346,19 @@ function ShareScreenOptions() {
         "Cancel"
       )
     )
-  )), openModals.has(MODALS2.PDF_SHARE) && /* @__PURE__ */ React31.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS2.PDF_SHARE, value) }));
+  )), openModals.has(MODALS2.PDF_SHARE) && /* @__PURE__ */ React30.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS2.PDF_SHARE, value) }));
 }
 
 // src/Prebuilt/components/ScreenShare.jsx
 var ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore17(selectIsAllowedToPublish3);
+  const isAllowedToPublish = useHMSStore17(selectIsAllowedToPublish2);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare4();
   const isVideoScreenshare = amIScreenSharing && !!video;
   if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(Fragment6, null, /* @__PURE__ */ React32.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React31.createElement(Fragment5, null, /* @__PURE__ */ React31.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React31.createElement(
     ScreenShareButton,
     {
       variant: "standard",
@@ -3489,24 +3370,24 @@ var ScreenshareToggle = ({ css = {} }) => {
         toggleScreenShare();
       }
     },
-    /* @__PURE__ */ React32.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(ShareScreenIcon2, null)))
-  ), /* @__PURE__ */ React32.createElement(ShareScreenOptions, null)));
+    /* @__PURE__ */ React31.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React31.createElement(Box, null, /* @__PURE__ */ React31.createElement(ShareScreenIcon2, null)))
+  ), /* @__PURE__ */ React31.createElement(ShareScreenOptions, null)));
 };
 
 // src/Prebuilt/components/ScreenshareHintModal.jsx
 init_define_process_env();
-import React33 from "react";
-import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
+import React32 from "react";
+import { useHMSActions as useHMSActions14 } from "@100mslive/react-sdk";
 var ScreenShareHintModal = ({ onClose }) => {
-  const hmsActions = useHMSActions13();
-  return /* @__PURE__ */ React33.createElement(Dialog.Root, { defaultOpen: true, onOpenChange: (value) => !value && onClose() }, /* @__PURE__ */ React33.createElement(DialogContent, { title: "AudioOnly Screenshare" }, /* @__PURE__ */ React33.createElement(
+  const hmsActions = useHMSActions14();
+  return /* @__PURE__ */ React32.createElement(Dialog.Root, { defaultOpen: true, onOpenChange: (value) => !value && onClose() }, /* @__PURE__ */ React32.createElement(DialogContent, { title: "AudioOnly Screenshare" }, /* @__PURE__ */ React32.createElement(
     "img",
     {
       src: "https://images.app.100ms.live/share-audio.png",
       alt: "AudioOnly Screenshare instructions",
       width: "100%"
     }
-  ), /* @__PURE__ */ React33.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React33.createElement(
+  ), /* @__PURE__ */ React32.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React32.createElement(
     Button,
     {
       variant: "primary",
@@ -3525,7 +3406,7 @@ var ScreenShareHintModal = ({ onClose }) => {
 
 // src/Prebuilt/components/Footer/ChatToggle.jsx
 init_define_process_env();
-import React34 from "react";
+import React33 from "react";
 import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
 var ChatToggle = () => {
@@ -3536,12 +3417,12 @@ var ChatToggle = () => {
   if (!isFeatureEnabled) {
     return;
   }
-  return /* @__PURE__ */ React34.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React34.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React34.createElement(ChatIcon, null) : /* @__PURE__ */ React34.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
+  return /* @__PURE__ */ React33.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React33.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React33.createElement(ChatIcon, null) : /* @__PURE__ */ React33.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
 };
 
 // src/Prebuilt/components/Footer/ConferencingFooter.jsx
-var TranscriptionButton = React35.lazy(() => import("./transcription-L6VBK75V.js"));
-var VirtualBackground = React35.lazy(() => import("./VirtualBackground-HWU22Q6S.js"));
+var TranscriptionButton = React34.lazy(() => import("./transcription-XYVVYRAS.js"));
+var VirtualBackground = React34.lazy(() => import("./VirtualBackground-R3JHARN5.js"));
 var ScreenshareAudio = () => {
   const {
     amIScreenSharing,
@@ -3549,14 +3430,14 @@ var ScreenshareAudio = () => {
     screenShareAudioTrackId: audio,
     toggleScreenShare
   } = useScreenShare5();
-  const isAllowedToPublish = useHMSStore19(selectIsAllowedToPublish4);
+  const isAllowedToPublish = useHMSStore19(selectIsAllowedToPublish3);
   const isAudioScreenshare = amIScreenSharing && !video && !!audio;
   const [showModal, setShowModal] = useState16(false);
   const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.AUDIO_ONLY_SCREENSHARE);
   if (!isFeatureEnabled || !isAllowedToPublish.screen || !isScreenshareSupported()) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(Fragment7, null, /* @__PURE__ */ React35.createElement(Tooltip, { title: `${!isAudioScreenshare ? "Start" : "Stop"} audio sharing`, key: "shareAudio" }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React34.createElement(Fragment6, null, /* @__PURE__ */ React34.createElement(Tooltip, { title: `${!isAudioScreenshare ? "Start" : "Stop"} audio sharing`, key: "shareAudio" }, /* @__PURE__ */ React34.createElement(
     IconButton_default,
     {
       active: !isAudioScreenshare,
@@ -3569,12 +3450,12 @@ var ScreenshareAudio = () => {
       },
       "data-testid": "screenshare_audio"
     },
-    /* @__PURE__ */ React35.createElement(MusicIcon, null)
-  )), showModal && /* @__PURE__ */ React35.createElement(ScreenShareHintModal, { onClose: () => setShowModal(false) }));
+    /* @__PURE__ */ React34.createElement(MusicIcon, null)
+  )), showModal && /* @__PURE__ */ React34.createElement(ScreenShareHintModal, { onClose: () => setShowModal(false) }));
 };
 var ConferencingFooter = () => {
   const isMobile = useMedia6(config.media.md);
-  return /* @__PURE__ */ React35.createElement(Footer.Root, null, /* @__PURE__ */ React35.createElement(Footer.Left, null, /* @__PURE__ */ React35.createElement(ScreenshareAudio, null), /* @__PURE__ */ React35.createElement(Playlist, { type: HMSPlaylistType4.audio }), /* @__PURE__ */ React35.createElement(Playlist, { type: HMSPlaylistType4.video }), /* @__PURE__ */ React35.createElement(Suspense2, { fallback: "" }, /* @__PURE__ */ React35.createElement(VirtualBackground, null)), FeatureFlags.enableTranscription ? /* @__PURE__ */ React35.createElement(TranscriptionButton, null) : null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React34.createElement(Footer.Root, null, /* @__PURE__ */ React34.createElement(Footer.Left, null, /* @__PURE__ */ React34.createElement(ScreenshareAudio, null), /* @__PURE__ */ React34.createElement(Suspense2, { fallback: "" }, /* @__PURE__ */ React34.createElement(VirtualBackground, null)), FeatureFlags.enableTranscription ? /* @__PURE__ */ React34.createElement(TranscriptionButton, null) : null, /* @__PURE__ */ React34.createElement(
     Flex,
     {
       align: "center",
@@ -3586,16 +3467,16 @@ var ConferencingFooter = () => {
         }
       }
     },
-    isMobile && /* @__PURE__ */ React35.createElement(EmojiReaction, null),
-    /* @__PURE__ */ React35.createElement(MetaActions_default, { isMobile: true })
-  )), /* @__PURE__ */ React35.createElement(Footer.Center, null, /* @__PURE__ */ React35.createElement(AudioVideoToggle, null), /* @__PURE__ */ React35.createElement(ScreenshareToggle, null), /* @__PURE__ */ React35.createElement(PIP, null), /* @__PURE__ */ React35.createElement(MoreSettings, null), /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React35.createElement(ChatToggle, null)), /* @__PURE__ */ React35.createElement(LeaveRoom, null)), /* @__PURE__ */ React35.createElement(Footer.Right, null, !isMobile && /* @__PURE__ */ React35.createElement(EmojiReaction, null), /* @__PURE__ */ React35.createElement(MetaActions_default, null), /* @__PURE__ */ React35.createElement(ChatToggle, null)));
+    isMobile && /* @__PURE__ */ React34.createElement(EmojiReaction, null),
+    /* @__PURE__ */ React34.createElement(MetaActions_default, { isMobile: true })
+  )), /* @__PURE__ */ React34.createElement(Footer.Center, null, /* @__PURE__ */ React34.createElement(AudioVideoToggle, null), /* @__PURE__ */ React34.createElement(ScreenshareToggle, null), /* @__PURE__ */ React34.createElement(PIP, null), /* @__PURE__ */ React34.createElement(MoreSettings, null), /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React34.createElement(ChatToggle, null)), /* @__PURE__ */ React34.createElement(LeaveRoom, null)), /* @__PURE__ */ React34.createElement(Footer.Right, null, !isMobile && /* @__PURE__ */ React34.createElement(EmojiReaction, null), /* @__PURE__ */ React34.createElement(MetaActions_default, null), /* @__PURE__ */ React34.createElement(ChatToggle, null)));
 };
 
 // src/Prebuilt/components/Footer/StreamingFooter.jsx
 init_define_process_env();
-import React36 from "react";
+import React35 from "react";
 var StreamingFooter = () => {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Footer.Root,
     {
       css: {
@@ -3605,7 +3486,7 @@ var StreamingFooter = () => {
         }
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(
       Footer.Left,
       {
         css: {
@@ -3615,9 +3496,9 @@ var StreamingFooter = () => {
           }
         }
       },
-      /* @__PURE__ */ React36.createElement(AudioVideoToggle, null)
+      /* @__PURE__ */ React35.createElement(AudioVideoToggle, null)
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(
       Footer.Center,
       {
         css: {
@@ -3626,9 +3507,9 @@ var StreamingFooter = () => {
           }
         }
       },
-      /* @__PURE__ */ React36.createElement(ScreenshareToggle, { css: { "@sm": { display: "none" } } }),
-      /* @__PURE__ */ React36.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React36.createElement(PIP, null)),
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React35.createElement(ScreenshareToggle, { css: { "@sm": { display: "none" } } }),
+      /* @__PURE__ */ React35.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React35.createElement(PIP, null)),
+      /* @__PURE__ */ React35.createElement(
         Box,
         {
           css: {
@@ -3640,34 +3521,34 @@ var StreamingFooter = () => {
             }
           }
         },
-        /* @__PURE__ */ React36.createElement(StreamActions, null)
+        /* @__PURE__ */ React35.createElement(StreamActions, null)
       ),
-      /* @__PURE__ */ React36.createElement(MoreSettings, null),
-      /* @__PURE__ */ React36.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React36.createElement(LeaveRoom, null)),
-      /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React36.createElement(ChatToggle, null))
+      /* @__PURE__ */ React35.createElement(MoreSettings, null),
+      /* @__PURE__ */ React35.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React35.createElement(LeaveRoom, null)),
+      /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React35.createElement(ChatToggle, null))
     ),
-    /* @__PURE__ */ React36.createElement(Footer.Right, null, /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(MetaActions_default, null), /* @__PURE__ */ React36.createElement(ChatToggle, null))
+    /* @__PURE__ */ React35.createElement(Footer.Right, null, /* @__PURE__ */ React35.createElement(EmojiReaction, null), /* @__PURE__ */ React35.createElement(MetaActions_default, null), /* @__PURE__ */ React35.createElement(ChatToggle, null))
   );
 };
 
 // src/Prebuilt/components/Footer.jsx
 var Footer2 = () => {
-  return isStreamingKit() ? /* @__PURE__ */ React37.createElement(StreamingFooter, null) : /* @__PURE__ */ React37.createElement(ConferencingFooter, null);
+  return isStreamingKit() ? /* @__PURE__ */ React36.createElement(StreamingFooter, null) : /* @__PURE__ */ React36.createElement(ConferencingFooter, null);
 };
 
 // src/Prebuilt/components/RoleChangeRequestModal.jsx
 init_define_process_env();
-import React38 from "react";
-import { selectRoleChangeRequest, useHMSActions as useHMSActions14, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+import React37 from "react";
+import { selectRoleChangeRequest, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 var RoleChangeRequestModal = () => {
   var _a, _b;
-  const hmsActions = useHMSActions14();
+  const hmsActions = useHMSActions15();
   const isHeadless = useIsHeadless();
   const roleChangeRequest = useHMSStore20(selectRoleChangeRequest);
   if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role) || isHeadless) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React37.createElement(
     RequestDialog,
     {
       title: "Role Change Request",
@@ -3690,9 +3571,9 @@ var Conference = () => {
   const roomState = useHMSStore21(selectRoomState);
   const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore21(selectIsConnectedToRoom2);
-  const hmsActions = useHMSActions15();
+  const hmsActions = useHMSActions16();
   const [hideControls, setHideControls] = useState17(false);
-  const dropdownList = useHMSStore21(selectAppData4(APP_DATA.dropdownList));
+  const dropdownList = useHMSStore21(selectAppData3(APP_DATA.dropdownList));
   const skipPreview = useSkipPreview();
   const { showPreview } = useHMSPrebuiltContext();
   const authTokenInAppData = useAuthToken();
@@ -3700,6 +3581,7 @@ var Conference = () => {
   const footerRef = useRef7();
   const dropdownListRef = useRef7();
   const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
+  const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const toggleControls = () => {
     var _a2;
     if (((_a2 = dropdownListRef.current) == null ? void 0 : _a2.length) === 0) {
@@ -3756,9 +3638,12 @@ var Conference = () => {
     }
   }, [isHeadless, hmsActions]);
   if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React39.createElement(FullPageProgress_default, null);
+    return /* @__PURE__ */ React38.createElement(FullPageProgress_default, { loadingText: "Joining..." });
+  }
+  if (isHLSStarted) {
+    return /* @__PURE__ */ React38.createElement(FullPageProgress_default, { loadingText: "Starting live stream..." });
   }
-  return /* @__PURE__ */ React39.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !isHeadless && /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React38.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !isHeadless && /* @__PURE__ */ React38.createElement(
     Box,
     {
       ref: headerRef,
@@ -3772,8 +3657,8 @@ var Conference = () => {
       },
       "data-testid": "header"
     },
-    /* @__PURE__ */ React39.createElement(Header, null)
-  ), /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React38.createElement(Header, null)
+  ), /* @__PURE__ */ React38.createElement(
     Box,
     {
       css: {
@@ -3786,8 +3671,8 @@ var Conference = () => {
       "data-testid": "conferencing",
       onClick: toggleControls
     },
-    /* @__PURE__ */ React39.createElement(ConferenceMainView, null)
-  ), !isHeadless && /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React38.createElement(ConferenceMainView, null)
+  ), !isHeadless && /* @__PURE__ */ React38.createElement(
     Box,
     {
       ref: footerRef,
@@ -3802,11 +3687,11 @@ var Conference = () => {
       },
       "data-testid": "footer"
     },
-    /* @__PURE__ */ React39.createElement(Footer2, null)
-  ), /* @__PURE__ */ React39.createElement(RoleChangeRequestModal, null));
+    /* @__PURE__ */ React38.createElement(Footer2, null)
+  ), /* @__PURE__ */ React38.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React38.createElement(HLSFailureModal, null));
 };
 var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-YHO2J3Z6.js.map
+//# sourceMappingURL=conference-IKSFGLVK.js.map