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

package/dist/{chunk-TZJCHZPD.js → chunk-LMSP5ETL.js}

@@ -1,12 +1,12 @@
 import {
   Loading,
   useIsFeatureEnabled
-} from "./chunk-DH3QSV4E.js";
+} from "./chunk-E7WZYH2U.js";
 import {
   Box,
   Flex,
   Text
-} from "./chunk-INRXWU7L.js";
+} from "./chunk-GEPWMIT4.js";
 import {
   APP_DATA,
   CHAT_SELECTOR,
@@ -66,7 +66,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-DRKV2LAC.js";
+} from "./chunk-G24GH7QG.js";
 
 // src/index.ts
 init_define_process_env();
@@ -76,11 +76,11 @@ init_define_process_env();
 
 // src/Button/Button.tsx
 init_define_process_env();
-import React3 from "react";
+import React2 from "react";
 
 // src/Theme/ThemeProvider.tsx
 init_define_process_env();
-import React2, { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import React, { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 
 // src/Theme/useSSR.tsx
 init_define_process_env();
@@ -117,7 +117,7 @@ var defaultContext = {
     return;
   }
 };
-var ThemeContext = React2.createContext(defaultContext);
+var ThemeContext = React.createContext(defaultContext);
 var HMSThemeProvider = ({
   themeType,
   theme: userTheme,
@@ -155,7 +155,7 @@ var HMSThemeProvider = ({
       setCurrentTheme(themeType);
     }
   }, [themeType]);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React.createElement(
     ThemeContext.Provider,
     {
       value: { themeType: currentTheme, theme: updatedTheme, aspectRatio, toggleTheme }
@@ -163,7 +163,7 @@ var HMSThemeProvider = ({
     children
   );
 };
-var useTheme = () => React2.useContext(ThemeContext);
+var useTheme = () => React.useContext(ThemeContext);
 
 // src/Button/Button.tsx
 var getOutlinedVariants = (base, hover, active, disabled, text, textDisabled) => {
@@ -312,9 +312,17 @@ var StyledButton = styled("button", __spreadProps(__spreadValues({}, flexCenter)
     variant: "primary"
   }
 }));
-var Button = React3.forwardRef((_a, ref) => {
+var Button = React2.forwardRef((_a, ref) => {
   var _b = _a, { children, loading = false, icon } = _b, buttonProps = __objRest(_b, ["children", "loading", "icon"]);
-  return /* @__PURE__ */ React3.createElement(StyledButton, __spreadProps(__spreadValues({}, buttonProps), { ref }), /* @__PURE__ */ React3.createElement(React3.Fragment, null, loading && /* @__PURE__ */ React3.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", position: "absolute", left: "0" } }, /* @__PURE__ */ React3.createElement(Loading, null)), /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement(StyledButton, __spreadProps(__spreadValues({}, buttonProps), { ref }), /* @__PURE__ */ React2.createElement(React2.Fragment, null, loading && /* @__PURE__ */ React2.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "center",
+      css: { w: "100%", position: "absolute", left: "0", color: "$on_primary_low" }
+    },
+    /* @__PURE__ */ React2.createElement(Loading, { color: "currentColor" })
+  ), /* @__PURE__ */ React2.createElement(
     Flex,
     {
       align: "center",
@@ -330,7 +338,7 @@ init_define_process_env();
 
 // src/Avatar/Avatar.tsx
 init_define_process_env();
-import React4 from "react";
+import React3 from "react";
 import { PersonIcon } from "@100mslive/react-icons";
 
 // src/Avatar/getAvatarBg.ts
@@ -413,7 +421,7 @@ var Avatar = (_a) => {
   if (!name) {
     color = "#7E47EB";
   }
-  return /* @__PURE__ */ React4.createElement(StyledAvatar, __spreadValues({ css: __spreadValues({ bg: color }, css2) }, props), initials || /* @__PURE__ */ React4.createElement(PersonIcon, { height: 40, width: 40 }));
+  return /* @__PURE__ */ React3.createElement(StyledAvatar, __spreadValues({ css: __spreadValues({ bg: color }, css2) }, props), initials || /* @__PURE__ */ React3.createElement(PersonIcon, { height: 40, width: 40 }));
 };
 
 // src/Divider/index.ts
@@ -468,7 +476,7 @@ init_define_process_env();
 
 // src/Switch/Switch.tsx
 init_define_process_env();
-import React5 from "react";
+import React4 from "react";
 import * as BaseSwitch from "@radix-ui/react-switch";
 var SwitchRoot = styled(BaseSwitch.Root, {
   all: "unset",
@@ -507,7 +515,7 @@ var SwitchThumb = styled(BaseSwitch.Thumb, {
     backgroundColor: "$on_primary_high"
   }
 });
-var Switch = (props) => /* @__PURE__ */ React5.createElement(SwitchRoot, __spreadValues({}, props), /* @__PURE__ */ React5.createElement(SwitchThumb, null));
+var Switch = (props) => /* @__PURE__ */ React4.createElement(SwitchRoot, __spreadValues({}, props), /* @__PURE__ */ React4.createElement(SwitchThumb, null));
 Switch.displayName = "Switch";
 
 // src/Select/index.ts
@@ -515,7 +523,7 @@ init_define_process_env();
 
 // src/Select/Select.tsx
 init_define_process_env();
-import React6 from "react";
+import React5 from "react";
 import { ChevronDownIcon } from "@100mslive/react-icons";
 var Root2 = styled("div", {
   color: "$on_primary_high",
@@ -562,7 +570,7 @@ var Arrow = styled("span", {
 });
 var DefaultDownIcon = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ React6.createElement(Arrow, __spreadValues({}, props), /* @__PURE__ */ React6.createElement(ChevronDownIcon, null));
+  return /* @__PURE__ */ React5.createElement(Arrow, __spreadValues({}, props), /* @__PURE__ */ React5.createElement(ChevronDownIcon, null));
 };
 var Select = {
   Root: Root2,
@@ -576,7 +584,7 @@ init_define_process_env();
 
 // src/Slider/Slider.tsx
 init_define_process_env();
-import React7 from "react";
+import React6 from "react";
 import * as BaseSlider from "@radix-ui/react-slider";
 var Root4 = styled(BaseSlider.Root, {
   position: "relative",
@@ -624,7 +632,7 @@ var Slider = (_a) => {
     "thumbStyles"
   ]);
   var _a2;
-  return /* @__PURE__ */ React7.createElement(Root4, __spreadValues({}, props), /* @__PURE__ */ React7.createElement(Track2, null, /* @__PURE__ */ React7.createElement(Range2, null)), showTooltip ? /* @__PURE__ */ React7.createElement(Tooltip, { title: String((_a2 = props.value) == null ? void 0 : _a2[0]) }, /* @__PURE__ */ React7.createElement(Thumb3, { css: thumbStyles })) : /* @__PURE__ */ React7.createElement(Thumb3, { css: thumbStyles }));
+  return /* @__PURE__ */ React6.createElement(Root4, __spreadValues({}, props), /* @__PURE__ */ React6.createElement(Track2, null, /* @__PURE__ */ React6.createElement(Range2, null)), showTooltip ? /* @__PURE__ */ React6.createElement(Tooltip, { title: String((_a2 = props.value) == null ? void 0 : _a2[0]) }, /* @__PURE__ */ React6.createElement(Thumb3, { css: thumbStyles })) : /* @__PURE__ */ React6.createElement(Thumb3, { css: thumbStyles }));
 };
 
 // src/Modal/index.ts
@@ -637,7 +645,7 @@ import { styled as styled2 } from "@stitches/react";
 
 // src/Modal/DialogContent.tsx
 init_define_process_env();
-import React8 from "react";
+import React7 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { CrossIcon } from "@100mslive/react-icons";
 var DialogClose = styled(DialogPrimitive.Close, {
@@ -683,7 +691,7 @@ var DialogTitle = styled(DialogPrimitive.Title, {
   margin: 0
 });
 var DialogDescription = styled(DialogPrimitive.Description, {});
-var DialogDefaultCloseIcon = (props) => /* @__PURE__ */ React8.createElement(DialogClose, { asChild: true }, /* @__PURE__ */ React8.createElement(IconButton, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(CrossIcon, null)));
+var DialogDefaultCloseIcon = (props) => /* @__PURE__ */ React7.createElement(DialogClose, { asChild: true }, /* @__PURE__ */ React7.createElement(IconButton, __spreadValues({}, props), /* @__PURE__ */ React7.createElement(CrossIcon, null)));
 
 // src/Modal/Dialog.tsx
 var StyledDialog = styled2(Root5, {});
@@ -701,7 +709,7 @@ var Dialog = {
 
 // src/Input/Input.tsx
 init_define_process_env();
-import React9 from "react";
+import React8 from "react";
 import { CopyIcon, EyeCloseIcon, EyeOpenIcon } from "@100mslive/react-icons";
 var Input = styled("input", {
   fontFamily: "$sans",
@@ -744,16 +752,16 @@ var PasswordShowIcon = (_a) => {
     "showPassword",
     "css"
   ]);
-  return /* @__PURE__ */ React9.createElement(Flex, __spreadValues({ css: __spreadValues({}, css2) }, props), showPassword ? /* @__PURE__ */ React9.createElement(EyeOpenIcon, null) : /* @__PURE__ */ React9.createElement(EyeCloseIcon, null));
+  return /* @__PURE__ */ React8.createElement(Flex, __spreadValues({ css: __spreadValues({}, css2) }, props), showPassword ? /* @__PURE__ */ React8.createElement(EyeOpenIcon, null) : /* @__PURE__ */ React8.createElement(EyeCloseIcon, null));
 };
 var PasswordCopyIcon = (_a) => {
   var _b = _a, { css: css2 } = _b, props = __objRest(_b, ["css"]);
-  return /* @__PURE__ */ React9.createElement(Flex, __spreadValues({ css: __spreadValues({}, css2) }, props), /* @__PURE__ */ React9.createElement(CopyIcon, null));
+  return /* @__PURE__ */ React8.createElement(Flex, __spreadValues({ css: __spreadValues({}, css2) }, props), /* @__PURE__ */ React8.createElement(CopyIcon, null));
 };
-var PasswordIcons = React9.forwardRef(
+var PasswordIcons = React8.forwardRef(
   (_a, ref) => {
     var _b = _a, { css: css2 } = _b, props = __objRest(_b, ["css"]);
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React8.createElement(
       Flex,
       __spreadValues({
         css: __spreadValues({
@@ -771,9 +779,9 @@ var PasswordIcons = React9.forwardRef(
     );
   }
 );
-var ReactInput = React9.forwardRef((_a, ref) => {
+var ReactInput = React8.forwardRef((_a, ref) => {
   var _b = _a, { showPassword = false, css: css2 } = _b, props = __objRest(_b, ["showPassword", "css"]);
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Input,
     __spreadProps(__spreadValues({
       css: __spreadValues({ flexGrow: 1, width: "100%" }, css2),
@@ -811,7 +819,7 @@ var Container = styled("div", {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  background: "$surface_default",
+  background: "$background_default",
   variants: {
     transparentBg: {
       true: {
@@ -1172,7 +1180,7 @@ init_define_process_env();
 
 // src/Video/Video.tsx
 init_define_process_env();
-import React10 from "react";
+import React9 from "react";
 import { useVideo } from "@100mslive/react-sdk";
 var StyledVideo = styled("video", {
   width: "100%",
@@ -1214,7 +1222,7 @@ var StyledVideo = styled("video", {
 var Video = (_a) => {
   var _b = _a, { trackId, attach } = _b, props = __objRest(_b, ["trackId", "attach"]);
   const { videoRef } = useVideo({ trackId, attach });
-  return /* @__PURE__ */ React10.createElement(StyledVideo, __spreadValues({ autoPlay: true, muted: true, playsInline: true, controls: false, ref: videoRef }, props));
+  return /* @__PURE__ */ React9.createElement(StyledVideo, __spreadValues({ autoPlay: true, muted: true, playsInline: true, controls: false, ref: videoRef }, props));
 };
 
 // src/TileMenu/index.tsx
@@ -1359,7 +1367,7 @@ init_define_process_env();
 
 // src/Stats/Stats.tsx
 init_define_process_env();
-import React11, { Fragment } from "react";
+import React10, { Fragment } from "react";
 import {
   selectConnectionQualityByPeerID,
   selectHMSStats,
@@ -1441,7 +1449,7 @@ function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false })
   if (!(audioTrackStats || videoTrackStats)) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(Stats.Root, null, /* @__PURE__ */ React11.createElement("table", null, /* @__PURE__ */ React11.createElement("tbody", null, isLocal ? /* @__PURE__ */ React11.createElement(Fragment, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(Stats.Root, null, /* @__PURE__ */ React10.createElement("table", null, /* @__PURE__ */ React10.createElement("tbody", null, isLocal ? /* @__PURE__ */ React10.createElement(Fragment, null, /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(availableOutgoingBitrate),
@@ -1455,71 +1463,71 @@ function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false })
       return null;
     }
     const layer = stat.rid ? simulcastMapping[stat.rid] : "";
-    return /* @__PURE__ */ React11.createElement(Fragment, null, layer && /* @__PURE__ */ React11.createElement(StatsRow, { label: layer.toUpperCase(), value: "" }), /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React10.createElement(Fragment, null, layer && /* @__PURE__ */ React10.createElement(StatsRow, { label: layer.toUpperCase(), value: "" }), /* @__PURE__ */ React10.createElement(
       StatsRow,
       {
         show: isNotNullishAndNot0(stat.frameWidth),
         label: "Width",
         value: (_a2 = stat.frameWidth) == null ? void 0 : _a2.toString()
       }
-    ), /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React10.createElement(
       StatsRow,
       {
         show: isNotNullishAndNot0(stat.frameHeight),
         label: "Height",
         value: (_b2 = stat.frameHeight) == null ? void 0 : _b2.toString()
       }
-    ), /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React10.createElement(
       StatsRow,
       {
         show: isNotNullishAndNot0(stat.framesPerSecond),
         label: "FPS",
         value: `${stat.framesPerSecond} ${isNotNullishAndNot0(stat.framesDropped) ? `(${stat.framesDropped} dropped)` : ""}`
       }
-    ), /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React10.createElement(
       StatsRow,
       {
         show: isNotNullish(stat.bitrate),
         label: "Bitrate(V)",
         value: formatBytes(stat.bitrate, "b/s")
       }
-    ), /* @__PURE__ */ React11.createElement(Stats.Gap, null));
-  })) : /* @__PURE__ */ React11.createElement(Fragment, null, /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React10.createElement(Stats.Gap, null));
+  })) : /* @__PURE__ */ React10.createElement(Fragment, null, /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(videoTrackStats == null ? void 0 : videoTrackStats.frameWidth),
       label: "Width",
       value: (_b = videoTrackStats == null ? void 0 : videoTrackStats.frameWidth) == null ? void 0 : _b.toString()
     }
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(videoTrackStats == null ? void 0 : videoTrackStats.frameHeight),
       label: "Height",
       value: (_c = videoTrackStats == null ? void 0 : videoTrackStats.frameHeight) == null ? void 0 : _c.toString()
     }
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(videoTrackStats == null ? void 0 : videoTrackStats.framesPerSecond),
       label: "FPS",
       value: `${videoTrackStats == null ? void 0 : videoTrackStats.framesPerSecond} ${isNotNullishAndNot0(videoTrackStats == null ? void 0 : videoTrackStats.framesDropped) ? `(${videoTrackStats == null ? void 0 : videoTrackStats.framesDropped} dropped)` : ""}`
     }
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullish(videoTrackStats == null ? void 0 : videoTrackStats.bitrate),
       label: "Bitrate(V)",
       value: formatBytes(videoTrackStats == null ? void 0 : videoTrackStats.bitrate, "b/s")
     }
-  )), /* @__PURE__ */ React11.createElement(
+  )), /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullish(audioTrackStats == null ? void 0 : audioTrackStats.bitrate),
       label: "Bitrate(A)",
       value: formatBytes(audioTrackStats == null ? void 0 : audioTrackStats.bitrate, "b/s")
     }
-  ), /* @__PURE__ */ React11.createElement(StatsRow, { show: isNotNullish(downlinkScore), label: "Downlink", value: downlinkScore }), /* @__PURE__ */ React11.createElement(StatsRow, { show: isNotNullish(videoTrackStats == null ? void 0 : videoTrackStats.codec), label: "Codec(V)", value: videoTrackStats == null ? void 0 : videoTrackStats.codec }), /* @__PURE__ */ React11.createElement(StatsRow, { show: isNotNullish(audioTrackStats == null ? void 0 : audioTrackStats.codec), label: "Codec(A)", value: audioTrackStats == null ? void 0 : audioTrackStats.codec }), /* @__PURE__ */ React11.createElement(PacketLostAndJitter, { audioTrackStats, videoTrackStats }))));
+  ), /* @__PURE__ */ React10.createElement(StatsRow, { show: isNotNullish(downlinkScore), label: "Downlink", value: downlinkScore }), /* @__PURE__ */ React10.createElement(StatsRow, { show: isNotNullish(videoTrackStats == null ? void 0 : videoTrackStats.codec), label: "Codec(V)", value: videoTrackStats == null ? void 0 : videoTrackStats.codec }), /* @__PURE__ */ React10.createElement(StatsRow, { show: isNotNullish(audioTrackStats == null ? void 0 : audioTrackStats.codec), label: "Codec(A)", value: audioTrackStats == null ? void 0 : audioTrackStats.codec }), /* @__PURE__ */ React10.createElement(PacketLostAndJitter, { audioTrackStats, videoTrackStats }))));
 }
 var PacketLostAndJitter = ({
   audioTrackStats,
@@ -1529,14 +1537,14 @@ var PacketLostAndJitter = ({
   const isLocalPeer = (audioTrackStats == null ? void 0 : audioTrackStats.type.includes("outbound")) || (videoTrackStats == null ? void 0 : videoTrackStats.type.includes("outbound"));
   const audioStats = isLocalPeer ? audioTrackStats == null ? void 0 : audioTrackStats.remote : audioTrackStats;
   const videoStats = isLocalPeer ? videoTrackStats == null ? void 0 : videoTrackStats.remote : videoTrackStats;
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(TrackPacketsLostRow, { label: "Packet Loss(V)", stats: videoStats }), /* @__PURE__ */ React11.createElement(TrackPacketsLostRow, { label: "Packet Loss(A)", stats: audioStats }), /* @__PURE__ */ React11.createElement(StatsRow, { show: isNotNullish(videoStats == null ? void 0 : videoStats.jitter), label: "Jitter(V)", value: (_a = videoStats == null ? void 0 : videoStats.jitter) == null ? void 0 : _a.toFixed(4) }), /* @__PURE__ */ React11.createElement(StatsRow, { show: isNotNullish(audioStats == null ? void 0 : audioStats.jitter), label: "Jitter(A)", value: (_b = audioStats == null ? void 0 : audioStats.jitter) == null ? void 0 : _b.toFixed(4) }));
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(TrackPacketsLostRow, { label: "Packet Loss(V)", stats: videoStats }), /* @__PURE__ */ React10.createElement(TrackPacketsLostRow, { label: "Packet Loss(A)", stats: audioStats }), /* @__PURE__ */ React10.createElement(StatsRow, { show: isNotNullish(videoStats == null ? void 0 : videoStats.jitter), label: "Jitter(V)", value: (_a = videoStats == null ? void 0 : videoStats.jitter) == null ? void 0 : _a.toFixed(4) }), /* @__PURE__ */ React10.createElement(StatsRow, { show: isNotNullish(audioStats == null ? void 0 : audioStats.jitter), label: "Jitter(A)", value: (_b = audioStats == null ? void 0 : audioStats.jitter) == null ? void 0 : _b.toFixed(4) }));
 };
 var TrackPacketsLostRow = ({
   stats,
   label
 }) => {
   const packetsLostRate = `${(stats == null ? void 0 : stats.packetsLostRate) ? stats.packetsLostRate.toFixed(2) : 0}/s`;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(stats == null ? void 0 : stats.packetsLost),
@@ -1551,10 +1559,10 @@ var RawStatsRow = ({
   tooltip = "",
   show = true
 }) => {
-  const statsLabel = /* @__PURE__ */ React11.createElement(Stats.Label, { css: { fontWeight: !value ? "$semiBold" : "$regular" } }, label);
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, show ? /* @__PURE__ */ React11.createElement(Stats.Row, null, tooltip ? /* @__PURE__ */ React11.createElement(Tooltip, { side: "top", title: tooltip }, statsLabel) : statsLabel, value === "" ? /* @__PURE__ */ React11.createElement(Stats.Value, null) : /* @__PURE__ */ React11.createElement(Stats.Value, null, value)) : null);
+  const statsLabel = /* @__PURE__ */ React10.createElement(Stats.Label, { css: { fontWeight: !value ? "$semiBold" : "$regular" } }, label);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, show ? /* @__PURE__ */ React10.createElement(Stats.Row, null, tooltip ? /* @__PURE__ */ React10.createElement(Tooltip, { side: "top", title: tooltip }, statsLabel) : statsLabel, value === "" ? /* @__PURE__ */ React10.createElement(Stats.Value, null) : /* @__PURE__ */ React10.createElement(Stats.Value, null, value)) : null);
 };
-var StatsRow = React11.memo(RawStatsRow);
+var StatsRow = React10.memo(RawStatsRow);
 function isNotNullishAndNot0(value) {
   return isNotNullish(value) && value !== 0;
 }
@@ -1637,7 +1645,7 @@ var RadioGroup = {
 
 // src/Toast/Toast.tsx
 init_define_process_env();
-import React12 from "react";
+import React11 from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { CrossIcon as CrossIcon2 } from "@100mslive/react-icons";
 var getToastVariant = (base) => {
@@ -1728,7 +1736,7 @@ var ToastViewport = styled(ToastPrimitives.Viewport, {
   zIndex: 1e3
 });
 var DefaultClose = ({ css: css2 }) => {
-  return /* @__PURE__ */ React12.createElement(ToastClose, { css: css2, asChild: true }, /* @__PURE__ */ React12.createElement(IconButton, null, /* @__PURE__ */ React12.createElement(CrossIcon2, null)));
+  return /* @__PURE__ */ React11.createElement(ToastClose, { css: css2, asChild: true }, /* @__PURE__ */ React11.createElement(IconButton, null, /* @__PURE__ */ React11.createElement(CrossIcon2, null)));
 };
 var HMSToast = (_a) => {
   var _b = _a, {
@@ -1746,7 +1754,7 @@ var HMSToast = (_a) => {
     "action",
     "inlineAction"
   ]);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(ToastRoot, __spreadValues({}, props), /* @__PURE__ */ React12.createElement(ToastTitle, null, /* @__PURE__ */ React12.createElement(Flex, { align: "center", css: { gap: "$4", flex: "1 1 0", minWidth: 0 } }, icon ? /* @__PURE__ */ React12.createElement(Box, { css: { w: "$10", h: "$10", alignSelf: "start", mt: "$2" } }, icon) : null, /* @__PURE__ */ React12.createElement(Text, { variant: "sub1", css: { c: "inherit", wordBreak: "break-word" } }, title)), isClosable ? /* @__PURE__ */ React12.createElement(DefaultClose, null) : null, !isClosable && inlineAction && action ? /* @__PURE__ */ React12.createElement(ToastAction, { altText: `${title}Action` }, action) : null), description ? /* @__PURE__ */ React12.createElement(ToastDescription, null, /* @__PURE__ */ React12.createElement(Text, { variant: "body1", css: { fontWeight: "$regular", c: "$on_surface_medium" } }, description)) : null, !inlineAction && action ? /* @__PURE__ */ React12.createElement(ToastAction, { altText: `${title}Action`, css: { mt: "$10" } }, action) : null));
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ToastRoot, __spreadValues({}, props), /* @__PURE__ */ React11.createElement(ToastTitle, null, /* @__PURE__ */ React11.createElement(Flex, { align: "center", css: { gap: "$4", flex: "1 1 0", minWidth: 0 } }, icon ? /* @__PURE__ */ React11.createElement(Box, { css: { w: "$10", h: "$10", alignSelf: "start", mt: "$2" } }, icon) : null, /* @__PURE__ */ React11.createElement(Text, { variant: "sub1", css: { c: "inherit", wordBreak: "break-word" } }, title)), isClosable ? /* @__PURE__ */ React11.createElement(DefaultClose, null) : null, !isClosable && inlineAction && action ? /* @__PURE__ */ React11.createElement(ToastAction, { altText: `${title}Action` }, action) : null), description ? /* @__PURE__ */ React11.createElement(ToastDescription, null, /* @__PURE__ */ React11.createElement(Text, { variant: "body1", css: { fontWeight: "$regular", c: "$on_surface_medium" } }, description)) : null, !inlineAction && action ? /* @__PURE__ */ React11.createElement(ToastAction, { altText: `${title}Action`, css: { mt: "$10" } }, action) : null));
 };
 var Toast = {
   Provider: ToastPrimitives.Provider,
@@ -1764,7 +1772,7 @@ init_define_process_env();
 
 // src/Accordion/Accordion.tsx
 init_define_process_env();
-import React13 from "react";
+import React12 from "react";
 import * as BaseAccordion from "@radix-ui/react-accordion";
 import { ChevronUpIcon } from "@100mslive/react-icons";
 var StyledAccordion = styled(BaseAccordion.Root, {});
@@ -1816,14 +1824,14 @@ var StyledChevron = styled(ChevronUpIcon, {
 });
 var AccordionRoot = StyledAccordion;
 var AccordionItem = StyledItem;
-var AccordionHeader = React13.forwardRef((_a, forwardedRef) => {
+var AccordionHeader = React12.forwardRef((_a, forwardedRef) => {
   var _b = _a, { children, iconStyles, css: css2 } = _b, props = __objRest(_b, ["children", "iconStyles", "css"]);
-  return /* @__PURE__ */ React13.createElement(StyledHeader, { css: css2 }, /* @__PURE__ */ React13.createElement(StyledTrigger3, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children, /* @__PURE__ */ React13.createElement(StyledChevron, { "aria-hidden": true, css: iconStyles })));
+  return /* @__PURE__ */ React12.createElement(StyledHeader, { css: css2 }, /* @__PURE__ */ React12.createElement(StyledTrigger3, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children, /* @__PURE__ */ React12.createElement(StyledChevron, { "aria-hidden": true, css: iconStyles })));
 });
-var AccordionContent = React13.forwardRef(
+var AccordionContent = React12.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { children, contentStyles } = _b, props = __objRest(_b, ["children", "contentStyles"]);
-    return /* @__PURE__ */ React13.createElement(StyledContent3, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), /* @__PURE__ */ React13.createElement(Box, { css: contentStyles }, children));
+    return /* @__PURE__ */ React12.createElement(StyledContent3, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), /* @__PURE__ */ React12.createElement(Box, { css: contentStyles }, children));
   }
 );
 
@@ -2026,10 +2034,10 @@ var Tabs = {
 
 // src/QRCode/QRCode.tsx
 init_define_process_env();
-import React14 from "react";
+import React13 from "react";
 import { QRCodeSVG } from "qrcode.react";
 var QRCode = (props) => {
-  return /* @__PURE__ */ React14.createElement(QRCodeSVG, __spreadValues({ style: { width: "100%", height: "100%" } }, props));
+  return /* @__PURE__ */ React13.createElement(QRCodeSVG, __spreadValues({ style: { width: "100%", height: "100%" } }, props));
 };
 
 // src/Link/index.tsx
@@ -2037,7 +2045,7 @@ init_define_process_env();
 
 // src/Link/Link.tsx
 init_define_process_env();
-import React15 from "react";
+import React14 from "react";
 import * as icons from "@100mslive/react-icons";
 var LinkComponent = styled("a", {
   textDecoration: "none",
@@ -2063,9 +2071,9 @@ var LinkComponent = styled("a", {
 });
 var Link = (_a) => {
   var _b = _a, { iconSide = "left", icon, color = "primary", children } = _b, rest = __objRest(_b, ["iconSide", "icon", "color", "children"]);
-  const Icon2 = icon ? icons[icon] : React15.Fragment;
-  const renderedIcon = icon ? /* @__PURE__ */ React15.createElement(Flex, { as: "span" }, /* @__PURE__ */ React15.createElement(Icon2, { height: 13.33, width: 13.33 }), " ") : null;
-  return /* @__PURE__ */ React15.createElement(LinkComponent, __spreadProps(__spreadValues({}, rest), { color }), iconSide === "left" && renderedIcon, /* @__PURE__ */ React15.createElement(Text, { as: "span", variant: "body2", css: { color: "inherit" } }, children), iconSide === "right" && renderedIcon);
+  const Icon2 = icon ? icons[icon] : React14.Fragment;
+  const renderedIcon = icon ? /* @__PURE__ */ React14.createElement(Flex, { as: "span" }, /* @__PURE__ */ React14.createElement(Icon2, { height: 13.33, width: 13.33 }), " ") : null;
+  return /* @__PURE__ */ React14.createElement(LinkComponent, __spreadProps(__spreadValues({}, rest), { color }), iconSide === "left" && renderedIcon, /* @__PURE__ */ React14.createElement(Text, { as: "span", variant: "body2", css: { color: "inherit" } }, children), iconSide === "right" && renderedIcon);
 };
 
 // src/Collapsible/Collapsible.tsx
@@ -2104,7 +2112,7 @@ init_define_process_env();
 
 // src/Prebuilt/App.jsx
 init_define_process_env();
-import React73, { Suspense as Suspense2, useEffect as useEffect35, useRef as useRef13 } from "react";
+import React74, { Suspense as Suspense2, useEffect as useEffect35, useRef as useRef13 } from "react";
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams4 } from "react-router-dom";
 import {
   HMSReactiveStore,
@@ -2116,7 +2124,7 @@ import {
 
 // src/Prebuilt/components/AppData/AppData.jsx
 init_define_process_env();
-import React16, { useEffect as useEffect3 } from "react";
+import React15, { useEffect as useEffect3 } from "react";
 import { useSearchParam } from "react-use";
 import {
   HMSRoomState,
@@ -2258,8 +2266,10 @@ import { useCallback as useCallback4 } from "react";
 import {
   selectAppData as selectAppData2,
   selectAppDataByPath,
+  selectAudioTrackByPeerID,
   selectSessionStore,
   selectTrackByID,
+  selectVideoTrackByPeerID,
   useHMSActions as useHMSActions2,
   useHMSStore as useHMSStore3,
   useHMSVanillaStore as useHMSVanillaStore2
@@ -2311,9 +2321,12 @@ var usePDFAnnotator = () => {
   return (_a = useHMSStore3(selectAppData2(APP_DATA.pdfConfig))) == null ? void 0 : _a.state;
 };
 var usePinnedTrack = () => {
+  var _a, _b;
   const pinnedTrackId = useHMSStore3(selectAppData2(APP_DATA.pinnedTrackId));
-  const spotlightTrackId = useHMSStore3(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  return useHMSStore3(selectTrackByID(pinnedTrackId || spotlightTrackId));
+  const spotlightPeerId = useHMSStore3(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const spotlightVideoTrackId = (_a = useHMSStore3(selectVideoTrackByPeerID(spotlightPeerId))) == null ? void 0 : _a.id;
+  const spotlightAudioTrackId = (_b = useHMSStore3(selectAudioTrackByPeerID(spotlightPeerId))) == null ? void 0 : _b.id;
+  return useHMSStore3(selectTrackByID(pinnedTrackId || spotlightVideoTrackId || spotlightAudioTrackId));
 };
 var useSubscribedNotifications = (notificationKey) => {
   const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
@@ -2451,7 +2464,7 @@ var initialAppData = {
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: ""
 };
-var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
+var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions3();
   const isConnected = useHMSStore4(selectIsConnectedToRoom);
   const sidePane = useSidepaneState();
@@ -2471,7 +2484,7 @@ var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
     hmsActions.setFrameworkInfo({
       type: "react-web",
       isPrebuilt: true,
-      version: React16.version
+      version: React15.version
     });
   }, [hmsActions]);
   useEffect3(() => {
@@ -2503,7 +2516,7 @@ var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
       hmsActions.setAppData(APP_DATA.appLayout, config2[localPeerRole]);
     }
   }, [roleNames, rolesMap, localPeerRole, hmsActions]);
-  return /* @__PURE__ */ React16.createElement(ResetStreamingStart, null);
+  return /* @__PURE__ */ React15.createElement(ResetStreamingStart, null);
 });
 var ResetStreamingStart = () => {
   const { isHLSRunning, isRTMPRunning, isBrowserRecordingOn } = useRecordingStreaming();
@@ -2607,7 +2620,7 @@ function BeamSpeakerLabelsLogging() {
 
 // src/Prebuilt/components/AuthToken.jsx
 init_define_process_env();
-import React19, { useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
+import React18, { useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 import { matchPath, useLocation } from "react-router-dom";
 import { useSearchParam as useSearchParam2 } from "react-use";
 import { v4 as uuid } from "uuid";
@@ -2615,8 +2628,8 @@ import { useHMSActions as useHMSActions5 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/AppContext.jsx
 init_define_process_env();
-import React17, { useContext } from "react";
-var HMSPrebuiltContext = React17.createContext({
+import React16, { useContext } from "react";
+var HMSPrebuiltContext = React16.createContext({
   showPreview: true,
   showLeave: true,
   roomCode: "",
@@ -2636,15 +2649,15 @@ var useHMSPrebuiltContext = () => {
 
 // src/Prebuilt/primitives/DialogContent.jsx
 init_define_process_env();
-import React18, { useRef as useRef3 } from "react";
+import React17, { useRef as useRef3 } from "react";
 import { CheckIcon, CloudUploadIcon, CrossIcon as CrossIcon3 } from "@100mslive/react-icons";
 var DialogContent = (_a) => {
   var _b = _a, { Icon: Icon2, title, closeable = true, children, css: css2, iconCSS = {} } = _b, props = __objRest(_b, ["Icon", "title", "closeable", "children", "css", "iconCSS"]);
-  return /* @__PURE__ */ React18.createElement(Dialog.Portal, null, /* @__PURE__ */ React18.createElement(Dialog.Overlay, null), /* @__PURE__ */ React18.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ React18.createElement(Dialog.Title, null, /* @__PURE__ */ React18.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React18.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon2 ? /* @__PURE__ */ React18.createElement(Box, { css: __spreadValues({ mr: "$2", color: "$on_primary_high" }, iconCSS) }, /* @__PURE__ */ React18.createElement(Icon2, null)) : null, /* @__PURE__ */ React18.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ React18.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ React18.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ React18.createElement(Box, null, children)));
+  return /* @__PURE__ */ React17.createElement(Dialog.Portal, null, /* @__PURE__ */ React17.createElement(Dialog.Overlay, null), /* @__PURE__ */ React17.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ React17.createElement(Dialog.Title, null, /* @__PURE__ */ React17.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React17.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon2 ? /* @__PURE__ */ React17.createElement(Box, { css: __spreadValues({ mr: "$2", color: "$on_primary_high" }, iconCSS) }, /* @__PURE__ */ React17.createElement(Icon2, null)) : null, /* @__PURE__ */ React17.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ React17.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ React17.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ React17.createElement(Box, null, children)));
 };
 var ErrorDialog = (_a) => {
   var _b = _a, { open = true, onOpenChange, title, children } = _b, props = __objRest(_b, ["open", "onOpenChange", "title", "children"]);
-  return /* @__PURE__ */ React18.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React17.createElement(
     DialogContent,
     __spreadValues({
       Icon: CrossIcon3,
@@ -2655,10 +2668,10 @@ var ErrorDialog = (_a) => {
       closeable: false,
       iconCSS: { color: "$alert_error_default" }
     }, props),
-    /* @__PURE__ */ React18.createElement(Box, { css: { mt: "$lg" } }, children)
+    /* @__PURE__ */ React17.createElement(Box, { css: { mt: "$lg" } }, children)
   ));
 };
-var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon2 }) => /* @__PURE__ */ React18.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React18.createElement(Dialog.Portal, null, /* @__PURE__ */ React18.createElement(Dialog.Overlay, null), /* @__PURE__ */ React18.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React18.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md" } }, Icon2 ? Icon2 : null, /* @__PURE__ */ React18.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React18.createElement(
+var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon2 }) => /* @__PURE__ */ React17.createElement(Dialog.Root, { open, 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, display: "flex", flexDirection: "row", gap: "$md" } }, Icon2 ? Icon2 : null, /* @__PURE__ */ React17.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React17.createElement(
   Text,
   {
     variant: "md",
@@ -2670,7 +2683,7 @@ var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Acc
     }
   },
   body
-), /* @__PURE__ */ React18.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React18.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React18.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React18.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React18.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React18.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
+), /* @__PURE__ */ React17.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React17.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React17.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React17.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React17.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React17.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
 var DialogRow = ({ children, breakSm = false, css: css2, justify = "between" }) => {
   let finalCSS = {
     margin: "$10 0",
@@ -2685,7 +2698,7 @@ var DialogRow = ({ children, breakSm = false, css: css2, justify = "between" })
   if (css2) {
     finalCSS = Object.assign(finalCSS, css2);
   }
-  return /* @__PURE__ */ React18.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
+  return /* @__PURE__ */ React17.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
 };
 var DialogCol = (_a) => {
   var _b = _a, { children, breakSm = false, css: css2, align = "center", justify = "between" } = _b, props = __objRest(_b, ["children", "breakSm", "css", "align", "justify"]);
@@ -2701,19 +2714,19 @@ var DialogCol = (_a) => {
   if (css2) {
     finalCSS = Object.assign(finalCSS, css2);
   }
-  return /* @__PURE__ */ React18.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
+  return /* @__PURE__ */ React17.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
 };
 var DialogSelect = (_a) => {
   var _b = _a, { title, options, keyField, labelField, selected, onChange } = _b, props = __objRest(_b, ["title", "options", "keyField", "labelField", "selected", "onChange"]);
-  return /* @__PURE__ */ React18.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React18.createElement(Label3, null, title), /* @__PURE__ */ React18.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ React18.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ React18.createElement(Select.Select, { onChange: (e) => onChange(e.target.value), value: selected, css: { width: "100%" } }, options.map((option) => {
+  return /* @__PURE__ */ React17.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React17.createElement(Label3, null, title), /* @__PURE__ */ React17.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ React17.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ React17.createElement(Select.Select, { onChange: (e) => onChange(e.target.value), value: selected, css: { width: "100%" } }, options.map((option) => {
     const id = keyField ? option[keyField] : option;
     const label = labelField ? option[labelField] : option;
-    return /* @__PURE__ */ React18.createElement("option", { value: id, key: id }, label);
+    return /* @__PURE__ */ React17.createElement("option", { value: id, key: id }, label);
   }))));
 };
 var DialogInput = (_a) => {
   var _b = _a, { title, value, onChange, placeholder, disabled, type } = _b, props = __objRest(_b, ["title", "value", "onChange", "placeholder", "disabled", "type"]);
-  return /* @__PURE__ */ React18.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React18.createElement(Label3, null, title), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React17.createElement(Label3, null, title), /* @__PURE__ */ React17.createElement(
     Input,
     __spreadValues({
       css: { width: "70%", "@sm": { width: "100%" } },
@@ -2728,7 +2741,7 @@ var DialogInput = (_a) => {
 var DialogInputFile = (_a) => {
   var _b = _a, { value, onChange, placeholder, disabled, type } = _b, props = __objRest(_b, ["value", "onChange", "placeholder", "disabled", "type"]);
   const inputRef = useRef3();
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(
     DialogCol,
     {
       breakSm: true,
@@ -2749,7 +2762,7 @@ var DialogInputFile = (_a) => {
       },
       gap: "8"
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React17.createElement(
       IconButton,
       {
         variant: "standard",
@@ -2763,7 +2776,7 @@ var DialogInputFile = (_a) => {
           }
         }
       },
-      /* @__PURE__ */ React18.createElement(
+      /* @__PURE__ */ React17.createElement(
         CloudUploadIcon,
         {
           style: {
@@ -2773,7 +2786,7 @@ var DialogInputFile = (_a) => {
         }
       )
     ),
-    /* @__PURE__ */ React18.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React17.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React17.createElement(
       Input,
       __spreadValues({
         ref: inputRef,
@@ -2785,7 +2798,7 @@ var DialogInputFile = (_a) => {
         type,
         hidden: true
       }, props)
-    ), /* @__PURE__ */ React18.createElement(
+    ), /* @__PURE__ */ React17.createElement(
       IconButton,
       {
         variant: "standard",
@@ -2799,12 +2812,12 @@ var DialogInputFile = (_a) => {
           }
         }
       },
-      /* @__PURE__ */ React18.createElement(Text, { variant: "md" }, placeholder)
+      /* @__PURE__ */ React17.createElement(Text, { variant: "md" }, placeholder)
     ))
   );
 };
 var DialogCheckbox = ({ title, value, onChange, disabled, css: css2, id }) => {
-  return /* @__PURE__ */ React18.createElement(DialogRow, { css: css2 }, /* @__PURE__ */ React18.createElement(Label3, { htmlFor: id, css: { cursor: "pointer" } }, title), /* @__PURE__ */ React18.createElement(Checkbox.Root, { checked: value, onCheckedChange: (value2) => onChange(value2), disabled, id }, /* @__PURE__ */ React18.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React18.createElement(CheckIcon, { width: 16, height: 16 }))));
+  return /* @__PURE__ */ React17.createElement(DialogRow, { css: css2 }, /* @__PURE__ */ React17.createElement(Label3, { htmlFor: id, css: { cursor: "pointer" } }, title), /* @__PURE__ */ React17.createElement(Checkbox.Root, { checked: value, onCheckedChange: (value2) => onChange(value2), disabled, id }, /* @__PURE__ */ React17.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React17.createElement(CheckIcon, { width: 16, height: 16 }))));
 };
 
 // src/Prebuilt/services/tokenService.js
@@ -2852,7 +2865,7 @@ function getToken(tokenEndpoint, userId, role, roomId) {
 }
 
 // src/Prebuilt/components/AuthToken.jsx
-var AuthToken = React19.memo(({ authTokenByRoomCodeEndpoint }) => {
+var AuthToken = React18.memo(({ authTokenByRoomCodeEndpoint }) => {
   const hmsActions = useHMSActions5();
   const tokenEndpoint = useTokenEndpoint();
   const { showPreview, roomCode } = useHMSPrebuiltContext();
@@ -2892,7 +2905,7 @@ var AuthToken = React19.memo(({ authTokenByRoomCodeEndpoint }) => {
     roomCode
   ]);
   if (error.title) {
-    return /* @__PURE__ */ React19.createElement(ErrorDialog, { title: error.title }, error.body);
+    return /* @__PURE__ */ React18.createElement(ErrorDialog, { title: error.title }, error.body);
   }
   return null;
 });
@@ -2936,12 +2949,12 @@ var convertError = (error) => {
 var Link2 = styled("a", {
   color: "#2f80e1"
 });
-var ErrorWithSupportLink = (errorMessage) => /* @__PURE__ */ React19.createElement("div", null, errorMessage, " If you think this is a mistake on our side, please create", " ", /* @__PURE__ */ React19.createElement(Link2, { target: "_blank", href: "https://github.com/100mslive/100ms-web/issues", rel: "noreferrer" }, "an issue"), " ", "or reach out over", " ", /* @__PURE__ */ React19.createElement(Link2, { target: "_blank", href: "https://discord.com/invite/kGdmszyzq2", rel: "noreferrer" }, "Discord"), ".");
+var ErrorWithSupportLink = (errorMessage) => /* @__PURE__ */ React18.createElement("div", null, errorMessage, " If you think this is a mistake on our side, please create", " ", /* @__PURE__ */ React18.createElement(Link2, { target: "_blank", href: "https://github.com/100mslive/100ms-web/issues", rel: "noreferrer" }, "an issue"), " ", "or reach out over", " ", /* @__PURE__ */ React18.createElement(Link2, { target: "_blank", href: "https://discord.com/invite/kGdmszyzq2", rel: "noreferrer" }, "Discord"), ".");
 var AuthToken_default = AuthToken;
 
 // src/Prebuilt/components/ErrorBoundary.jsx
 init_define_process_env();
-import React20, { Component } from "react";
+import React19, { Component } from "react";
 import { logMessage } from "zipyai";
 import { CopyIcon as CopyIcon2 } from "@100mslive/react-icons";
 var ErrorBoundary = class extends Component {
@@ -2963,7 +2976,7 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.errorInfo) {
-      return /* @__PURE__ */ React20.createElement(
+      return /* @__PURE__ */ React19.createElement(
         Flex,
         {
           align: "center",
@@ -2976,7 +2989,7 @@ var ErrorBoundary = class extends Component {
             backgroundColor: "$background_default"
           }
         },
-        /* @__PURE__ */ React20.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ React20.createElement(
+        /* @__PURE__ */ React19.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ React19.createElement(
           Flex,
           {
             direction: "column",
@@ -2987,8 +3000,8 @@ var ErrorBoundary = class extends Component {
               left: 0
             }
           },
-          /* @__PURE__ */ React20.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ React20.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ React20.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ React20.createElement("br", null), ErrorWithSupportLink(`Please reload to see if it works.`)),
-          /* @__PURE__ */ React20.createElement(Flex, null, /* @__PURE__ */ React20.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ React20.createElement(
+          /* @__PURE__ */ React19.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ React19.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ React19.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ React19.createElement("br", null), ErrorWithSupportLink(`Please reload to see if it works.`)),
+          /* @__PURE__ */ React19.createElement(Flex, null, /* @__PURE__ */ React19.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ React19.createElement(
             Button,
             {
               onClick: () => {
@@ -2998,7 +3011,7 @@ var ErrorBoundary = class extends Component {
               "data-testid": "join_again_btn"
             },
             "Reload"
-          )), /* @__PURE__ */ React20.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ React20.createElement(
+          )), /* @__PURE__ */ React19.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ React19.createElement(
             Button,
             {
               onClick: () => {
@@ -3014,11 +3027,11 @@ var ErrorBoundary = class extends Component {
               css: { mx: "$8" },
               "data-testid": "join_again_btn"
             },
-            /* @__PURE__ */ React20.createElement(CopyIcon2, null),
+            /* @__PURE__ */ React19.createElement(CopyIcon2, null),
             " ",
             this.state.isErrorCopied ? "Copied" : "Copy Details"
           ))),
-          /* @__PURE__ */ React20.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ React20.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ React20.createElement("br", null), /* @__PURE__ */ React20.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
+          /* @__PURE__ */ React19.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ React19.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ React19.createElement("br", null), /* @__PURE__ */ React19.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
         ))
       );
     }
@@ -3028,13 +3041,13 @@ var ErrorBoundary = class extends Component {
 
 // src/Prebuilt/components/FullPageProgress.jsx
 init_define_process_env();
-import React21 from "react";
-var FullPageProgress = ({ loaderColor = "$primary_default", loadingText = "" }) => /* @__PURE__ */ React21.createElement(Flex, { direction: "column", justify: "center", align: "center", css: { size: "100%", color: loaderColor } }, /* @__PURE__ */ React21.createElement(Loading, { color: "currentColor", size: 100 }), loadingText ? /* @__PURE__ */ React21.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, loadingText) : null);
+import React20 from "react";
+var FullPageProgress = ({ loaderColor = "$primary_default", loadingText = "" }) => /* @__PURE__ */ React20.createElement(Flex, { direction: "column", justify: "center", align: "center", css: { size: "100%", color: loaderColor } }, /* @__PURE__ */ React20.createElement(Loading, { color: "currentColor", size: 100 }), loadingText ? /* @__PURE__ */ React20.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, loadingText) : null);
 var FullPageProgress_default = FullPageProgress;
 
 // src/Prebuilt/components/init/Init.jsx
 init_define_process_env();
-import React22, { useEffect as useEffect7 } from "react";
+import React21, { useEffect as useEffect7 } from "react";
 import {
   selectLocalPeerID,
   selectLocalPeerName,
@@ -3075,7 +3088,7 @@ var Init = () => {
       setUpZipy(peerData);
     }
   }, [localPeerID, localPeerName, localPeerRole, sessionId]);
-  return /* @__PURE__ */ React22.createElement(FeatureFlagsInit, null);
+  return /* @__PURE__ */ React21.createElement(FeatureFlagsInit, null);
 };
 
 // src/Prebuilt/components/Input/KeyboardInputManager.js
@@ -3188,7 +3201,7 @@ init_define_process_env();
 
 // src/Prebuilt/components/Notifications/Notifications.jsx
 init_define_process_env();
-import React30, { useEffect as useEffect17 } from "react";
+import React29, { useEffect as useEffect17 } from "react";
 import { logMessage as logMessage3 } from "zipyai";
 import { HMSNotificationTypes as HMSNotificationTypes8, useHMSNotifications as useHMSNotifications8 } from "@100mslive/react-sdk";
 
@@ -3197,15 +3210,15 @@ init_define_process_env();
 
 // src/Prebuilt/components/Toast/ToastConfig.jsx
 init_define_process_env();
-import React23 from "react";
+import React22 from "react";
 import { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon as PersonIcon2, PoorConnectivityIcon } from "@100mslive/react-icons";
-var ChatAction = React23.forwardRef((_, ref) => {
+var ChatAction = React22.forwardRef((_, ref) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   if (isChatOpen) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
+  return /* @__PURE__ */ React22.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
 });
 var ToastConfig = {
   PEER_LIST: {
@@ -3214,18 +3227,18 @@ var ToastConfig = {
       if (notification.data.length === 1) {
         return {
           title: `${(_a = notification.data[0]) == null ? void 0 : _a.name} joined`,
-          icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+          icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
         };
       }
       return {
         title: `${(_b = notification.data[notification.data.length - 1]) == null ? void 0 : _b.name} and ${notification.data.length - 1} others joined`,
-        icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+        icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
       };
     },
     multiple: (notifications) => {
       return {
         title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+        icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
       };
     }
   },
@@ -3234,13 +3247,13 @@ var ToastConfig = {
       var _a;
       return {
         title: `${(_a = notification.data) == null ? void 0 : _a.name} joined`,
-        icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+        icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
       };
     },
     multiple: function(notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-        icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+        icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
       };
     }
   },
@@ -3249,13 +3262,13 @@ var ToastConfig = {
       var _a;
       return {
         title: `${(_a = notification.data) == null ? void 0 : _a.name} left`,
-        icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+        icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
       };
     },
     multiple: function(notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-        icon: /* @__PURE__ */ React23.createElement(PersonIcon2, null)
+        icon: /* @__PURE__ */ React22.createElement(PersonIcon2, null)
       };
     }
   },
@@ -3264,14 +3277,14 @@ var ToastConfig = {
       var _a;
       return {
         title: `${(_a = notification.data) == null ? void 0 : _a.name} raised hand`,
-        icon: /* @__PURE__ */ React23.createElement(HandIcon, null)
+        icon: /* @__PURE__ */ React22.createElement(HandIcon, null)
       };
     },
     multiple: (notifications) => {
       var _a;
       return {
         title: `${(_a = notifications[notifications.length - 1].data) == null ? void 0 : _a.name} and ${notifications.length - 1} others raised hand`,
-        icon: /* @__PURE__ */ React23.createElement(HandIcon, null)
+        icon: /* @__PURE__ */ React22.createElement(HandIcon, null)
       };
     }
   },
@@ -3280,15 +3293,15 @@ var ToastConfig = {
       var _a;
       return {
         title: `New message from ${(_a = notification.data) == null ? void 0 : _a.senderName}`,
-        icon: /* @__PURE__ */ React23.createElement(ChatIcon, null),
-        action: /* @__PURE__ */ React23.createElement(ChatAction, null)
+        icon: /* @__PURE__ */ React22.createElement(ChatIcon, null),
+        action: /* @__PURE__ */ React22.createElement(ChatAction, null)
       };
     },
     multiple: (notifications) => {
       return {
         title: `${notifications.length} new messages`,
-        icon: /* @__PURE__ */ React23.createElement(ChatIcon, null),
-        action: /* @__PURE__ */ React23.createElement(ChatAction, null)
+        icon: /* @__PURE__ */ React22.createElement(ChatIcon, null),
+        action: /* @__PURE__ */ React22.createElement(ChatAction, null)
       };
     }
   },
@@ -3296,7 +3309,7 @@ var ToastConfig = {
     single: () => {
       return {
         title: `You are now connected`,
-        icon: /* @__PURE__ */ React23.createElement(ConnectivityIcon, null),
+        icon: /* @__PURE__ */ React22.createElement(ConnectivityIcon, null),
         variant: "success",
         duration: 3e3
       };
@@ -3308,7 +3321,7 @@ var ToastConfig = {
         title: `You are offline for now. while we try to reconnect, please check
         your internet connection. ${message}.
       `,
-        icon: /* @__PURE__ */ React23.createElement(PoorConnectivityIcon, null),
+        icon: /* @__PURE__ */ React22.createElement(PoorConnectivityIcon, null),
         variant: "warning",
         duration: 3e4
       };
@@ -3415,11 +3428,11 @@ ToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));
 
 // src/Prebuilt/components/Notifications/AutoplayBlockedModal.jsx
 init_define_process_env();
-import React24 from "react";
+import React23 from "react";
 import { useAutoplayError } from "@100mslive/react-sdk";
 function AutoplayBlockedModal() {
   const { error, resetError, unblockAudio } = useAutoplayError();
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React23.createElement(
     Dialog.Root,
     {
       open: !!error,
@@ -3430,7 +3443,7 @@ function AutoplayBlockedModal() {
         resetError();
       }
     },
-    /* @__PURE__ */ React24.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ React24.createElement(DialogRow, null, /* @__PURE__ */ React24.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ React24.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React23.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ React23.createElement(DialogRow, null, /* @__PURE__ */ React23.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ React23.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React23.createElement(
       Button,
       {
         variant: "primary",
@@ -3446,7 +3459,7 @@ function AutoplayBlockedModal() {
 
 // src/Prebuilt/components/Notifications/InitErrorModal.jsx
 init_define_process_env();
-import React25, { useEffect as useEffect9, useState as useState5 } from "react";
+import React24, { useEffect as useEffect9, useState as useState5 } from "react";
 var InitErrorModal = ({ notification }) => {
   const [showModal, setShowModal] = useState5(false);
   const [info, setInfo] = useState5({ title: "Init Error", description: "" });
@@ -3470,7 +3483,7 @@ var InitErrorModal = ({ notification }) => {
     setInfo({ title, description });
     setShowModal(true);
   }, [notification]);
-  return /* @__PURE__ */ React25.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ React25.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ React25.createElement("br", null), "Current URL - ", window.location.href));
+  return /* @__PURE__ */ React24.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ React24.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ React24.createElement("br", null), "Current URL - ", window.location.href));
 };
 
 // src/Prebuilt/components/Notifications/MessageNotifications.jsx
@@ -3510,14 +3523,14 @@ var PeerNotifications = () => {
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
   useEffect11(() => {
-    var _a;
-    if (!notification) {
+    var _a, _b;
+    if (!notification || ((_a = notification == null ? void 0 : notification.data) == null ? void 0 : _a.roleName) && isInternalRole(notification.data.roleName)) {
       return;
     }
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
       case HMSNotificationTypes2.PEER_LIST:
-        if (!isPeerJoinSubscribed || ((_a = notification.data) == null ? void 0 : _a.length) === 0) {
+        if (!isPeerJoinSubscribed || ((_b = notification.data) == null ? void 0 : _b.length) === 0) {
           return;
         }
         break;
@@ -3541,13 +3554,10 @@ var PeerNotifications = () => {
 
 // src/Prebuilt/components/Notifications/PermissionErrorModal.jsx
 init_define_process_env();
-import React26, { useEffect as useEffect12, useState as useState6 } from "react";
+import React25, { useEffect as useEffect12, useState as useState6 } from "react";
 import { useMedia } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes3, useHMSNotifications as useHMSNotifications3 } from "@100mslive/react-sdk";
 
-// src/assets/android-perm-0.png
-var android_perm_0_default = "data:image/png;base64,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";
-
 // src/assets/android-perm-1.png
 var android_perm_1_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAngAAAC8CAYAAADrcdOxAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAB4DSURBVHgB7d0NjBzlfcfx/6yxjeGMLyYJNlHjJfEZQ9KwPquJ1DT2kjaJglNhnKoQKcRHCG2gVXwmDSAVsHlJlUDhTNSStLzZkCg2UvwiYVraCp+dgpJUnNel8dsZex0Cd7zZZ98Zv+/0+c/e7M3Ozezt693t7PcjDdztzu7Ozq20P///z/OMCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAY88SlGzu3ERcYpLMiMRFYrNE7IQ5kc3mbDaLbTYAAFAaS/rMd2if+X9abKvPlswO83sqZrbdu1NpQUkIeEWIxxPN554nizMSW2iJnRQn2AEAgFGStsXqFDuz6dRx6UynU32Cggh4Bcz9ZCJpZ2LLxDKhjsocAADjggl7q2OZzBpT2esUBCLgBZh7eaItI9Yyc3ISAgAAxqu0bdkr9/42tUaQh4DnocHO/KtghdCCBQCgnhD0fAh4xuWXJxJnLavD1HyTAgAA6lXaythXMilDJCYN7tJPtHacFWs74Q4AgLoXt2PWgTmXt66QBtewFTxd6iQTszZUOs7OPud8kSkzRC6Ynb1hykVDd54+JnK8V+TMgMjRfWKdOSYAAGBUNHQ1ryEDnjM71rY2lDMz1gl0F/2J2NM/JTI9kR/oRqJh7+hrYr39ssihlFjH3xIAAFAzGvJuaMTZtg0X8C795PxlksmsKuUxTqgzYc6OLzH/v0Kqpt+EvfR6wh4AALVk28v37EqV9N1f7xoq4GlP3hJ7ZbH7O8Eu/tVssDunSWrqjRfE2vc0QQ8AgBqwxVq5d2fXPdIgJkiDKDnczVoi9vx7RT74RyKxSVJzOobPhEllmTauZE4JAACoDlPRSl74oYvlvXd6tkoDaIiAp21Zy7Z/UMy+9gUfF/uKO0U++uejE+z8TAvYnpkUOXNMLNPCBQAA1aEh74MfnHHkvXd7fyURF/kWbfZyY9aWYvZ1qnYt36h9O7ZY6fUS2/2oAACA6hmcXdspERbpgKdLodgxJ9zFR9rXvuwWJ+CNOzoRo+tuxuYBAFA9fSbkzYvyEiqRXui4mHCnEykyn/3J+Ax3aqppGX/6IbFLWY4FAAAU0qxr4UqERXYMXnZShSwutI+GO/szD5kQNVvGtYmmZXzRZ0XefonFkgEAqAKTEWZ88MMXT3vvnZ4XJIIi2aIdbM0eGGk/rdyN+3DndbxXrN98l3YtAADVYWdO263d3amUREwkW7SDrdnC+1x2S32FOzVlhtit946fSSAAANQ3KzbJelgiKHIt2rmXJ9rM36ut0D7ObNnZ35C6NHm6CbCTxHr3fwQAAFQsfuGHZ6Tfe6d3h0RI5Cp4tlgrCt4/5aJs9a6exZdkr64BAAAqZVl24exQjyIV8LLVuxFmzX76IYkC++PjaL0+AADqW3zOJxJLJUIiFfBGrN595EvOOLZImNgkmctuFgAAUDHLEmuZREhkAt7cuYmkFKjeOa3Z2ddLKaaea8l1n5koLReN09NkAqs9/QoBAAAVsiUxmCUiITIBL2MVnlghZVTvFlx6jtz6pXPlZ399vnzliokyHtXtZBEAAMYXy47FviMREYmAF08kmk1ttWDv3P7IF6VUPX2Z3M93X33u+Ax5poJnT/24AACAStnJeDzRLBEQiYA36aQkC91f7ti7roNn5Z5NJ3K/j9uQp+8PAABUqnnieYWvglUvItKitQpfkqyM6p1r847T4z7kOe+PGbUAAFTKNARlgUTAORIB5q+xMOw+nVwhFU5E2LbnjLySPivz49l1oTXkqedM+PPSSRmLrjjH+b/fc6nT0nPElpqY2CT2BR8X61Ck1mhEHWiZ3SLXXfc16ep6RTY/v1kAoN5ZYiUlAur+WrQjXXdW27P2H35PyqXVuuVfmhwY2u41lT1vyLtp4SSzTQ59rse2njLbSakFK71erN2PCoZMbZoq7cuWy8yZM53fNz//XMEQ0traKt/65k3S0tIiU6dOdW7r6uoa8XGuRVctMttXco/v7++Xbdu2yeNPPCY9vT1Sr9z3pfznYsMvNubO7y1/e7NzvgCgztknM/bH0rtTaaljdV/By1iSKJRS7emfknLNnBbLVeuC+Ct5nabSt8gEwoubgzvfGgBfOXhGukw1sNrsi/6YgOdx7V9eJ9+68Vu5oKa6tr8Suv+3brzJ2d9PQ59uM2de7AS1MHf9/d2yaNGivNv0tfU23VY90iFr162VeqQBTs+B8p/DpiaGBgCInokxZ2z/aqlj9d+iNQGv4P1TZ0u5Fs4dulTvt9e870y6UBriVgyGO2/I6+7NyOIfHRv2PDNN4Nv0nfOdn5NzzgkMePNnTZC7zHNpWP36v74v/SdKbOfqJBIdh3dmQBrZzBkz5a47784FkmJohcob7rZu2yrd3XudYONWrvT+gYH+wJCm4dAb7tY9u9ap3mklb+GCpHObVhL3mueMWoXrG23XO+dP31fXdqp3ACJBx+HFpc7Vf8CzY1eIFRKGJprAc0H5S4h427JuuFObByt2QSEviC638qbZtLLXNGV4vVHX2tMFlV0tM2JlVfkYhzdUcVM6LkxDhwawQrz3a5Xu8Scez/2uwUUDo7rRhLzNmzdLvwl6Lg2U3nB4y9/cnBd0NNhdd+112dcx7d9buqJ19ZGenp688wUAEfFRqXN1H/AssUPXq6nl+nClhrwgbgvYnbxRMQ2zVQp4GpK0etU6LxuW9Itcq1pawfKPJ2tqmioP/OAB52etUmk70h23pVUwfWzYODatci1fdqvzs7b/NCxo4Fq4YKHT/iv02DBaPdNj0MfocRR8n/Nac2PIgsJK9jm+4pwPHdM3r3WeM67Oe568+/qrWPp8egzars22erPnw6XhUUPiwMCA3HbH94adN60GakVRFXtOlR7rtSZY6vmd0zLHeX49L6Wey5G4x6/u+/69uff26D/9OLfP7XfclheKlZ53N1i7nxkvfU4Nxq2t83Ofg7DPHwBUmyVWQupcFFq08dD7arx0SCUhzz95Q1uyQRM5SnJuda6zGzSezB2HdZW5XatU3d3dufumTm3yBB172Hg297HXXfs157HeL3sNIu5j9YvbW/HyPrbFhBR/CAiiAWvJX1zjhJlieAPatsEg5bd1W2duv/nz5ucFPLeF6+7np23dbb/cmttPg83mnqGA1TpvnjO+TwNM2HnTyQut5nWD7gs6LxqOHv3nH+eCq//9Bv0dyuUef+B9g+esZU7LsNa0hlX3fg2dXkHjJ72fv/vvvy8XegGgRup+seP6XwfPKvBHmFj7AeClrpPXNNlyWrK6nxvo1v7qlNy27rhUbOL5UinveDINHR2rHpb77r839yU81anWPRj6+JY5c5wvZ22ParvT++Wt1aQbAyYyuBZ8boET7tzHegOT3u4NfmH0mIsNd0qrW65XQiZh9PT05n7W9+DlnWQQVlnau3dv4OvlPY8Jye5503OWV+UzgTvsPj0n/iD3Q1NNHZo5vNn5+912+225x+l7uPbaa6WWvH+7hZ8bvorRggVDt/krosvbl+dmIWsF0//5u/POu3JVQwCokboPeBEYg1fgj6Br4I2CUip5yblDp1zH5mk41PF9OsliPOjvP+oECf2Cve2OoVCgQWHmjItzbUatynTv7R72eP0CXmfaaB2eqpKOW9OKktJA8oRpWwZVj/Q1/WPgdH+t6ikNh9WeiartZZe2MYN07xsKaP5q1Zw5Q4Gt983ewMd7n7fJU5Xy0vPmfe96jp9e/YxzTvRnN6i5tAXqVsC8VUF9P+4x6d/O+xitbj7wgx86577Ws183P/+8848FPX6tunk/D3q8bnVOK3Hez0L7d5bnftbKpVsp1vfvfo70XOnnoqOIii4AlIkKHrJGquR979njeTNjX0mfkW8//X7e5I1K2VMqb9Gue3ad+WK9Ra5fen1epUgN+FqrYdY+mx/CNFh4W3QLFgQvEh40Bs4Zc9XzZu41NViOV5W2PL1j4/RcaGt36L78NmahJV9cTXmt8+zfT/+2t99xu2nrrpJa0tfaPjge0duGV95xkd73pVU5N5xmZzLn/wNCP0duNdRbAQQADBeJK1mMF4UqebqEiga6W784WbbuOSNrf138ZIxiWaert0SKM75rdov5wr3UqfZoazFoTJeffgH7g6HyjmMLex4dbB9Ev9gXDVbO5syeE1g5rCVvmPW3f/V3txql+1US8oLOWzH3eWmw0jDtTgrRSp8+NrtEyyvSleoatfOn4dwNYtqmdUO+TpxQToj1tGdbPO1r/bx5J2q43M+O/r/S8w0AURaFSRZ9oW3a42/JaBsp5N38dBXG2oWpwhp4Guoe+OGDgSHMG2bCDIR84Ya1P4vZp9hwU46eXq0ODgbPkHFd3nam//3p7+450YpZUODwnku3GllL2lpf3t6em9ihr6/bwsGwpUFLW7e1no2qwdz9zGjQ05aq9x8K/hnHOlnH5R5zIWHnGwAQjTF4fTLOeuXVWEKlLKePSSWc5U484U7bZDqzVKs/vb290r6sPW/WaJCwGZXFVP/CxoV5JyZU+wtdK46Lrhp6nc0SvJSLy9821N/d9+yfIevyHn9YlbKaNHTed/99Tru7xVQ858/PVmPdyplW93R5Ex3jVmvadnYnguh2VUh7dvjjnnPG3BVSy+APoOGlpc7VfcCzRfpCFxc5uk/GypiEvBO9UgnvmnD+Qf2q0Lg7V1jrTJf5cIWFHLet6H+st3VXTCWwFN7AppMBHg+YAKLLiri2/jJ/eY5XTNvTbUNq+PWvMadVQe94MX9ArCUNQN6xfN6JG2Hnutr0Hwju7GdnaRTPuor+pVO8FT2d0MOVMQCMGctOS52r/0kWtpUOu8s6MfotWq9Sl1Cp2NHXpBLeFtmAb6yZBpWWkCU+/NxZry5d18w7yD4s5Gjg8C+jojMxvQsR+0OBPreO1VpY5qB77wSQcl5fZ4u64/Kya8zlL+XiPRca/mpdddIAteEXG+U/X/gvZ3kVr0Kv7V7iTR9TzSVI3Dat0su2uZMogsKb9/x6r0jiPUZ9b8+s+emw9wYAVWXLEalz9X8lCytzUCSkhqeTDnRc2jm1Xw8vzGhW8qzjlVXwvF+6Ws16s+dN6d7X7bT3tIpVTJtVK0K6jp5+OWv1ZoZn7Jda58yKDQ4aGgQ0IGlLU8eH6Re690telxHx0jCja6Y5P5v9vvDFPyurIqXP+2jr0DIuerx6LkZ6faXt0CeefDwX5PT/Cz630Dl+b0VU31vQ46ttrwnP2urWKp27nqE741YrjGHLk+g6e+7sVh3bplefqBZdy06DsrfVvfbZnwfu6/1baHDXNq0ev34mrhq8Ikj2+DsFAGolY9OiHXMm2qXsQjvopbs+/FkZSxryblo4ybkWrQoKed4lVMqi4a7CSSXZZUoey65fZqpZy9tvzbuvmEt/DfQPOOvcadC51lfN0lmchdYu00tR6essWjR8nN/mzSNfYqvcQfca5rQd7V5zVkPZopn57zO7aHPw6+tsUQ1V7qW3/JUnDXe3e9YUrCUNnHplCz3/bsjzX5VEK6jDrgri+TfS1CqvkedU5W4c+l3HPYbN5NW/hfsZVEHHr/9I4Pq3AGrIjlnSKXWu/idZZMwfoUCj2Xpvh9hlBrw3+4ZC100LJ5tAdkrKMX/WOblw5/KHvL1vZZyfZ06zpCtd+tp4VpWuQatfnE7IMkFOg06/CWw6hkvXx8uOn8qek0JXi9DAo/frc+jEDZ2pqsthFHMN1Pu+f192WZTB19fxeuvWrQts6blhQI9r2y+3BQYo95qtqtD4N/c6slrJ0okJbrtab8tWkQqPB9PzpkFGrxCh48fcx+txrS1QtdTz0jQ1OFB528EanL30vbjvyz8b1n0vWo3U6qtbRdRzGfZ30ON3J7n418jzvpb/HHqP33+Mufcx+Hdyj8O7NEoQPRZ3coZ7/Po51AWni/lbAEClMqfloNS5Ci9+Oj5c+ol5h0OXSplykWQW/kzKoZcSe+avzhsWzsqlVbq1vz7lhEXXvZtOVKVda736gFhv/IeMBf0C1rFRSoPMNV9dXPRjNZy5V7nQCp8uxAsAwBg6vGfn9ulS5yJxJQs7Y3WG3qltyzKrWxrIdN26N/syUil9Ll3o+LGtp2oy8cJ662UBAACVsrdKBETiShZWLLNVbCu0bKTtS3v6FVIOvV7s4h8dk9ZZE5yKXtO5pRc99751VnpNu9cdZ1ftiRfWGy9UZZFjAAAanG1nZKNEQCQC3smJsnryKQkdvW8dXC92fElFs2mrec1YVdWQN0atWQAAosa0NiNRwYvEGDx16WXztph3kwy73579DWcbbxaZ9qwb8lTJY/KO90ps69dlLOlEijmDS2DoLNZSFvOt5LEAAFSVZW/Z89vU5yUCIhPw5lyWWGxZ1obQHSY2SWbhT8d0Tbww/pD3pw8MFL1sylhOrgAAIEJMe9Zu27s79bREQCQmWahTk6XTxNW+0B1OD4iVXi/jkf+KF03nFvnAQzsIdwAAVIMt6aiEOzVBIqKvt/fEhR+aMcUSKxm2j9X/mtgzk041r/rCKm7FFUm7nXXwzjjt2YPvFle9i/3muyJnjgkAAKiIbVn2I+++0xuJ8XcqEpMsXKcmyarJp2VZ6Jp4WsV79UGxP/2QVFPmZJ8c7voXOf76S3L89y/lbp/yB5+VCy6/Ti74hF6sfuSg11PCcizWvqcrvnIFAAAQp3pntjUSIZGp4KmiqngairSC13yZVMPpowfl9Z9/WY699rycOfp63n36+7HX/k36f7tWzp/9ZZkwuVmqor9bYjv+QQAAQMWc6t3uXalNEiGRGYPn0iqeSeEHCu1j7XpU5Og+qZSGu98/u9gEud+NsN/v5A2zX+bEEanY8R6Jda0UAABQBaZ6t3tn6h6JmMgFvHQq1WfZ9jdH2i+2fYUTlirxTuedw8KdZVm5zUtD3nu/ekAqcqbfHPdKWrMAAFSHbayUCIpcwFO7d6c6TdTaUHAnE5Jiv/m7skPeyXdelWP7ns+7rb29XQ4dOiSZTEb2798v11xzTd79fV0/qaCKZ4v1vw+ayuNrAgAAKmbbYq+O0sxZr0gGPHVyUuabI7VqKwl5A75wl0wmpaOjQ5qbs+Ps4vG4rF+/XhKJRN5+R3b+XEpmKneWOU7rba43CwBAVZjWbCwj90pERTbgeVq1hdccKTPknXz7//J+b2trC9zPf/tI4/WG0TF3Gu4O7RAAAFAV9gTLXmI6fmmJqMgGPOW0am371hF31JD38s3ONWtHyoOuzKn8VuusWbMC95s2bVr+404elaIdSmXDJ21ZAACqxbbEvmfnzlRKIizSAU/t2ZVaZf6Wq0bcUdfI2/Wos05epZMvKmc769xlK4tMqAAAoEqccBfFWbN+kQ94as/O1HLLltXF7KuX/nJaom/8uxRbzaseO1u1e/nb2YWMAQBAtdiWba9phHCnGiLgqd27tt9QbMjTqpn16j9KbOvXRynoZYOdTqSgJQsAQNVlw92u1A3SICJ1qbKRaMi79PJEn6nTtRf1gMGgZ+17RuzZ14s9/QqRKTOk2OvLFmZC3ZkBkfd2iHVwA5MoAACoDVts50oVy6WBNFTAU9qunXt54ogt1t1SbFJzg5750Ql5H/mCM2avLPo4UxW0Dr0q1lv/bULeMQEAADWRHXO3qzHasl4NF/CU6b+vnHNZImWJ9bBJbZeU8lin0mY2q8w2qvX2SxJ79fcCAABq6rCVcZZC6ZQG1DBj8Pz27kptNP34z5vC7RYZ/dkUAACgNrQlu8WEu9ZGDXeqYQOe0gUO9+za/nnzIRj5qhdVcvbsWTl9+qQAAICqO6zr3+7Zlfp8lBcxLkZDBzyX+RCs1mqebdurpcbVvIH+I7K/e6fs2bld3nh9v7x/rF8AAEBFtGq36uT79sey69+CgDdIk75p295gqnkf8wS9moe91w/uk7d7GZMHAEAZDmdMsNPvbhPslqfTqT6BoyEnWRQyWNK9Ye7chM64SdqWdbdYEpfqrI0S6PChd+TkieMy4yMfldOnTklswgSZNHGy838AAJDHFF/stPlSfvrE+7KKUBeMgBdiMOit1s2EveRZS662LFloiZUY3KXkwPeBD3xA4vG4pNNp6evrM9XkoQLh++8POK1br/POa5ILmqfLtOYLBQCABjX4ZWmnM7ZsmmC2Rp48USwC3sgs80Haav6vm23CXjxjSeLMmdMd5vd4sU/S3NwsXV1dTsBTqVRKlixZIgcOhM/t0NCn29G+QzLj4lkycdIk793M/AUARJSdNv9JmUB3cIIlO0ylbiOVutIQ8MJ9wGxarbvabNPMdsRsqcGwt9Fsy6SEgJdIJHLhzv39xRdflHnz5jnVvEI05L1+sFumTZueW6jxwgsvcgKnZdWscwwAwKiIxaQvkxHny7DRZ7+itvRSZodlaKKFf1tpti3e27Zs2WIHeeqpp5z7k8lk4P0rV67MPYdp4dom8DmbCW52gde3B4/vKbOVtFAzAACIPmbRDrfSbNp+bS6wzwqzJaUKtJLn0hauu+3fv9+p7hWgx9dmthfNdqUAAAAMIuDla5NseMujbdBatUKnTZuW+9nbwtWf3RbuCPRBhDwAAJBDwMuXF+501mt7e7s8+eST0tHRIZdcMrrdUJ2Y8fDDD+cdz5VXXhl2HOulhDGBAAAAjSApvnFuBw4cyBsvp7+bylrgmLhyx+Dp49znCHL48OHA1/CO3fNsTwkAAGh4VPCGJL2/tLW15bVMlf6+YsUKqSat0pVzvx6HCXn+m9uk8NhBAADQAAh4IfzhzrV48eIRQ5l/fx1Hd/XVVwfer5MstO2qreBSacgzlUH/zaU/EQAAQERpMMq1O00Fzw4T1B4Na9FWwyWXXOIsm7J9+/Zh961atcp/LFsEAAAAjqR4gpKp0oUGLu+4OBmFgKdj/1avXm0XeywCAAAAh/Zd8xY3LhTadNKEjFLAG0nAxI+4AACAhsUYvCF6iZQ13hs2bdoUunO1J1tUImBMYFwAAEDDIuDl2+j9xbRFQ3fUyQ0BExzGRCmTPgAAQPQR8PJ1SraS5+jr65POzs7QnXWGLAAAwHhDwBuu6Dbt0qVLqZ4BAIBxh4A33LA2rVbygmi40/XranWdWgAAAFRP0bNpdZmSDRs22GPJP6NXfFflAAAAjYUKXrC8Nu2aNWtCd9QqHmPxAADAeELAC5bXpt24cWNomxYAAGC8IeAF6xTfbNpUKiUAAAD1gIAXrug27VhLp9PDbhIAAAAMkxTftWl1QsV4JMOvRcvaLQAANDAqeOE6pYRFj8dKQOu4TzzHDQAAGg8Br7C8vuwjjzwi483Bgwf9NzFYEACABkfAKyxvNq1W8MbbbNqAquIOAQAADY2AV1jn4JYz3qp4AQFviwAAAKCgNvFNtjh06JA9Huzfvz9ogkVcAAAAMKJD4glR7e3t9niwdOlSf7ijegcAAFCkdvFVyl588UV7LB04cMCOx+P+gLdUAAAAULT94glTGq7GslW7cuVKf7g7IAAAAChJUnxVvLa2NnsshIy9WykAAAAoWYf4gpVW0kaTVg0DWrNaXeTqFQAAAGXQEJXXqpXBkJfJZOxa03CXSCSCqneMvQMAAKhAXHyzamVwZm0tQ16BcNchAAAAqFhCAkKetk51fFw1g54+l87YDWjL6tYltGYBAACqRkPesHatDE6+qDToucEumUwGBTt33F1cAAAAUFVxCQl5umk4e+qpp3Jhz938Qc676b4dHR2Fgp1uLwqVOwAAEMISVEqDlo6D04kOoeezublZEomEmFars7kOHz4sR44ckVQqJel0Wvr6+qQADXd6MdzlAgAAgJpbLNlqXkbCK2/lbvqcWrVLCgAAAEZdm2TDWEYqC3vu4wl2AAAA40TcbMskG9B0xm1GwkOf975Dg4/RxzLODgAAlIwxeKNHZ91qYIvL8NmvabPp4LvU4M8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACoL/8PX2v2g+o1Gz8AAAAASUVORK5CYII=";
 
@@ -3559,13 +3569,7 @@ function PermissionErrorModal() {
   const notification = useHMSNotifications3(HMSNotificationTypes3.ERROR);
   const [deviceType, setDeviceType] = useState6("");
   const [isSystemError, setIsSystemError] = useState6(false);
-  const [showAndroidPrompt, setShowAndroidPrompt] = useState6(true);
   const isMobile = useMedia(config.media.md);
-  useEffect12(() => {
-    if (showAndroidPrompt && isAndroid && isMobile) {
-      setDeviceType("camera and microphone");
-    }
-  }, []);
   useEffect12(() => {
     var _a, _b, _c, _d, _e;
     if (!notification || ((_a = notification.data) == null ? void 0 : _a.code) !== 3001 && ((_b = notification.data) == null ? void 0 : _b.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
@@ -3587,32 +3591,22 @@ function PermissionErrorModal() {
     }
     setIsSystemError(notification.data.code === 3011);
   }, [notification]);
-  return deviceType ? /* @__PURE__ */ React26.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ React26.createElement(Dialog.Portal, null, /* @__PURE__ */ React26.createElement(Dialog.Overlay, null), /* @__PURE__ */ React26.createElement(Dialog.Content, { css: { w: "min(380px, 90%)", p: "$8" } }, /* @__PURE__ */ React26.createElement(
+  return deviceType ? /* @__PURE__ */ React25.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ React25.createElement(Dialog.Portal, null, /* @__PURE__ */ React25.createElement(Dialog.Overlay, null), /* @__PURE__ */ React25.createElement(Dialog.Content, { css: { w: "min(380px, 90%)", p: "$8" } }, /* @__PURE__ */ React25.createElement(
     Dialog.Title,
     {
       css: {
         borderBottom: "1px solid $border_default"
       }
     },
-    isMobile && isIOS ? /* @__PURE__ */ React26.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default }) : null,
-    isMobile && isAndroid ? showAndroidPrompt ? /* @__PURE__ */ React26.createElement("img", { src: android_perm_0_default, style: { maxWidth: "100%", maxHeight: "100%" } }) : /* @__PURE__ */ React26.createElement("img", { src: android_perm_1_default, style: { maxWidth: "100%", maxHeight: "100%" } }) : null,
-    /* @__PURE__ */ React26.createElement(Text, { variant: "h6" }, showAndroidPrompt ? `Allow access to your ${deviceType}` : `We can't access your ${deviceType}`)
-  ), /* @__PURE__ */ React26.createElement(Text, { variant: "sm", css: { pt: "$4", pb: "$10", color: "$on_surface_medium" } }, isMobile && isIOS ? "Enable permissions by reloading this page and clicking \u201CAllow\u201D on the pop-up, or change settings from the address bar." : null, isMobile && showAndroidPrompt && isAndroid ? "In order for others to see and hear you, your browser will request camera and microphone access." : null, isMobile && !showAndroidPrompt && isAndroid ? "To allow other users to see and hear you, click the blocked camera icon in your browser\u2019s address bar." : null, !isMobile ? `Access to ${deviceType} is required. ` : null, isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from sytem settings` : null, !isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from address bar or browser settings.` : null), isMobile && isIOS ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ React26.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null, isMobile && isAndroid ? showAndroidPrompt ? /* @__PURE__ */ React26.createElement(
-    Button,
-    {
-      css: { w: "100%" },
-      onClick: () => {
-        setDeviceType("");
-        setShowAndroidPrompt(false);
-      }
-    },
-    "Continue"
-  ) : /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ React26.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null, !isMobile ? /* @__PURE__ */ React26.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ React26.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null))) : null;
+    isMobile && isIOS ? /* @__PURE__ */ React25.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default }) : null,
+    isMobile && isAndroid ? /* @__PURE__ */ React25.createElement("img", { src: android_perm_1_default, style: { maxWidth: "100%", maxHeight: "100%" } }) : null,
+    /* @__PURE__ */ React25.createElement(Text, { variant: "h6" }, "We can't access your ", deviceType)
+  ), /* @__PURE__ */ React25.createElement(Text, { variant: "sm", css: { pt: "$4", pb: "$10", color: "$on_surface_medium" } }, isMobile && isIOS ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.' : null, isMobile && isAndroid ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.` : null, !isMobile ? `Access to ${deviceType} is required. ` : null, isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from sytem settings` : null, !isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from address bar or browser settings.` : null), isMobile && isIOS ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ React25.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null, isMobile && isAndroid ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ React25.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null, !isMobile ? /* @__PURE__ */ React25.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ React25.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null))) : null;
 }
 
 // src/Prebuilt/components/Notifications/ReconnectNotifications.jsx
 init_define_process_env();
-import React27, { useEffect as useEffect13, useState as useState7 } from "react";
+import React26, { useEffect as useEffect13, useState as useState7 } from "react";
 import { logMessage as logMessage2 } from "zipyai";
 import { HMSNotificationTypes as HMSNotificationTypes4, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
 var notificationTypes2 = [
@@ -3649,7 +3643,7 @@ var ReconnectNotifications = () => {
   }, [notification]);
   if (!open || !isQA)
     return null;
-  return /* @__PURE__ */ React27.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ React27.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ React27.createElement(Dialog.Overlay, null), /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ React26.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ React26.createElement(Dialog.Overlay, null), /* @__PURE__ */ React26.createElement(
     Dialog.Content,
     {
       css: {
@@ -3663,13 +3657,13 @@ var ReconnectNotifications = () => {
         animation: "none !important"
       }
     },
-    /* @__PURE__ */ React27.createElement(Flex, { align: "center" }, /* @__PURE__ */ React27.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ React27.createElement(Loading, { size: 16 })), /* @__PURE__ */ React27.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
+    /* @__PURE__ */ React26.createElement(Flex, { align: "center" }, /* @__PURE__ */ React26.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ React26.createElement(Loading, { size: 16 })), /* @__PURE__ */ React26.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
   )));
 };
 
 // src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.jsx
 init_define_process_env();
-import React28, { useEffect as useEffect14, useState as useState8 } from "react";
+import React27, { useEffect as useEffect14, useState as useState8 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSActions as useHMSActions7, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 import { MicOnIcon } from "@100mslive/react-icons";
 var TrackBulkUnmuteModal = () => {
@@ -3699,7 +3693,7 @@ var TrackBulkUnmuteModal = () => {
     return null;
   }
   const { requestedBy: peer, tracks, enabled } = muteNotification;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React27.createElement(
     RequestDialog,
     {
       title: "Track Unmute Request",
@@ -3738,7 +3732,7 @@ var TrackNotifications = () => {
 
 // src/Prebuilt/components/Notifications/TrackUnmuteModal.jsx
 init_define_process_env();
-import React29, { useEffect as useEffect16, useState as useState9 } from "react";
+import React28, { useEffect as useEffect16, useState as useState9 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes7, useHMSActions as useHMSActions8, useHMSNotifications as useHMSNotifications7 } from "@100mslive/react-sdk";
 import { MicOnIcon as MicOnIcon2 } from "@100mslive/react-icons";
 var TrackUnmuteModal = () => {
@@ -3768,7 +3762,7 @@ var TrackUnmuteModal = () => {
     return null;
   }
   const { requestedBy: peer, track, enabled } = muteNotification;
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React28.createElement(
     RequestDialog,
     {
       title: "Track Unmute Request",
@@ -3839,7 +3833,7 @@ function Notifications() {
             const toastId = ToastManager.addToast({
               title: ((_f = notification.data) == null ? void 0 : _f.message) || "We couldn\u2019t reconnect you. When you\u2019re back online, try joining the room.",
               inlineAction: true,
-              action: /* @__PURE__ */ React30.createElement(
+              action: /* @__PURE__ */ React29.createElement(
                 Button,
                 {
                   onClick: () => {
@@ -3911,12 +3905,12 @@ function Notifications() {
         break;
     }
   }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, !isHeadless && /* @__PURE__ */ React30.createElement(TrackUnmuteModal, null), !isHeadless && /* @__PURE__ */ React30.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackNotifications, null), /* @__PURE__ */ React30.createElement(PeerNotifications, null), /* @__PURE__ */ React30.createElement(ReconnectNotifications, null), /* @__PURE__ */ React30.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React30.createElement(PermissionErrorModal, null), /* @__PURE__ */ React30.createElement(MessageNotifications, null), /* @__PURE__ */ React30.createElement(InitErrorModal, { notification }));
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, !isHeadless && /* @__PURE__ */ React29.createElement(TrackUnmuteModal, null), !isHeadless && /* @__PURE__ */ React29.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React29.createElement(TrackNotifications, null), /* @__PURE__ */ React29.createElement(PeerNotifications, null), /* @__PURE__ */ React29.createElement(ReconnectNotifications, null), /* @__PURE__ */ React29.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React29.createElement(PermissionErrorModal, null), /* @__PURE__ */ React29.createElement(MessageNotifications, null), /* @__PURE__ */ React29.createElement(InitErrorModal, { notification }));
 }
 
 // src/Prebuilt/components/PostLeave.jsx
 init_define_process_env();
-import React49 from "react";
+import React48 from "react";
 import { useParams as useParams2 } from "react-router-dom";
 import { ExitIcon as ExitIcon2 } from "@100mslive/react-icons";
 
@@ -3925,22 +3919,22 @@ init_define_process_env();
 
 // src/Prebuilt/components/Header/Header.jsx
 init_define_process_env();
-import React48 from "react";
+import React47 from "react";
 
 // src/Prebuilt/components/Header/ConferencingHeader.jsx
 init_define_process_env();
-import React43 from "react";
+import React42 from "react";
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
 init_define_process_env();
-import React32 from "react";
+import React31 from "react";
 import { useMedia as useMedia2 } from "react-use";
 import { selectDominantSpeaker, selectIsConnectedToRoom as selectIsConnectedToRoom2, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/provider/roomLayoutProvider/index.tsx
 init_define_process_env();
-import React31 from "react";
+import React30 from "react";
 import merge from "lodash.merge";
 
 // src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
@@ -4024,7 +4018,7 @@ var useFetchRoomLayout = ({
 };
 
 // src/Prebuilt/provider/roomLayoutProvider/index.tsx
-var RoomLayoutContext = React31.createContext(void 0);
+var RoomLayoutContext = React30.createContext(void 0);
 var RoomLayoutProvider = ({
   children,
   roomLayoutEndpoint,
@@ -4033,23 +4027,23 @@ var RoomLayoutProvider = ({
   const authToken = useAuthToken();
   let { layout } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
   layout = merge(layout, overrideLayout);
-  return /* @__PURE__ */ React31.createElement(RoomLayoutContext.Provider, { value: layout }, children);
+  return /* @__PURE__ */ React30.createElement(RoomLayoutContext.Provider, { value: layout }, children);
 };
-var useRoomLayout = () => React31.useContext(RoomLayoutContext);
+var useRoomLayout = () => React30.useContext(RoomLayoutContext);
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
 var SpeakerTag = () => {
   const dominantSpeaker = useHMSStore7(selectDominantSpeaker);
-  return dominantSpeaker && dominantSpeaker.name ? /* @__PURE__ */ React32.createElement(
+  return dominantSpeaker && dominantSpeaker.name ? /* @__PURE__ */ React31.createElement(
     Flex,
     {
       align: "center",
       justify: "center",
       css: { flex: "1 1 0", color: "$on_primary_high", "@md": { display: "none" } }
     },
-    /* @__PURE__ */ React32.createElement(VolumeOneIcon, null),
-    /* @__PURE__ */ React32.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
-  ) : /* @__PURE__ */ React32.createElement(React32.Fragment, null);
+    /* @__PURE__ */ React31.createElement(VolumeOneIcon, null),
+    /* @__PURE__ */ React31.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
+  ) : /* @__PURE__ */ React31.createElement(React31.Fragment, null);
 };
 var LogoImg = styled("img", {
   maxHeight: "$14",
@@ -4068,16 +4062,16 @@ var Logo = () => {
   if (isConnected && isMobile && isStreamingKit()) {
     return null;
   }
-  return logo ? /* @__PURE__ */ React32.createElement(LogoImg, { src: logo, alt: "Brand Logo" }) : null;
+  return logo ? /* @__PURE__ */ React31.createElement(LogoImg, { src: logo, alt: "Brand Logo" }) : null;
 };
 
 // src/Prebuilt/components/Header/ParticipantList.jsx
 init_define_process_env();
-import React36, { Fragment as Fragment2, useCallback as useCallback7, useEffect as useEffect20, useState as useState14 } from "react";
+import React35, { Fragment as Fragment2, useCallback as useCallback7, useEffect as useEffect20, useState as useState14 } from "react";
 import { useDebounce, useMeasure } from "react-use";
 import { FixedSizeList } from "react-window";
 import {
-  selectAudioTrackByPeerID,
+  selectAudioTrackByPeerID as selectAudioTrackByPeerID2,
   selectLocalPeerID as selectLocalPeerID2,
   selectPeerCount as selectPeerCount2,
   selectPeerMetadata,
@@ -4099,7 +4093,7 @@ import {
 
 // src/Prebuilt/components/Connection/ConnectionIndicator.jsx
 init_define_process_env();
-import React33 from "react";
+import React32 from "react";
 import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
 import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
 
@@ -4159,10 +4153,10 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
     return null;
   }
   if (downlinkQuality === 0) {
-    return /* @__PURE__ */ React33.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React33.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React33.createElement(PoorConnectivityIcon2, null)));
+    return /* @__PURE__ */ React32.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React32.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React32.createElement(PoorConnectivityIcon2, null)));
   }
   const size = isTile ? 12 : 16;
-  return /* @__PURE__ */ React33.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React33.createElement(Wrapper, { isTile, "data-testid": "tile_network" }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React32.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React32.createElement(Wrapper, { isTile, "data-testid": "tile_network" }, /* @__PURE__ */ React32.createElement(
     "svg",
     {
       width: size,
@@ -4177,7 +4171,7 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
         strokeMiterlimit: 2
       }
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React32.createElement(
       "path",
       {
         d: "M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z",
@@ -4185,7 +4179,7 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
         transform: "translate(-.333)"
       }
     ),
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React32.createElement(
       "path",
       {
         d: "M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z",
@@ -4193,14 +4187,14 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
         transform: "translate(-.333)"
       }
     ),
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React32.createElement(
       "path",
       {
         d: "M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z",
         fill: getColor(2, downlinkQuality, defaultColor, theme2)
       }
     ),
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React32.createElement(
       "path",
       {
         d: "M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z",
@@ -4212,7 +4206,7 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
 
 // src/Prebuilt/components/RoleChangeModal.jsx
 init_define_process_env();
-import React34, { forwardRef, useRef as useRef6, useState as useState12 } from "react";
+import React33, { forwardRef, useRef as useRef6, useState as useState12 } from "react";
 import { selectPeerByID, useHMSActions as useHMSActions9, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
 import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon as ChevronUpIcon2 } from "@100mslive/react-icons";
 
@@ -4234,7 +4228,7 @@ var useFilteredRoles = () => {
 // src/Prebuilt/components/RoleChangeModal.jsx
 var PeerName = forwardRef((_a, ref) => {
   var _b = _a, { children, maxWidth } = _b, rest = __objRest(_b, ["children", "maxWidth"]);
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React33.createElement(
     Text,
     __spreadProps(__spreadValues({}, rest), {
       ref,
@@ -4264,7 +4258,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
     return null;
   }
   const peerNameMaxWidth = 200;
-  return /* @__PURE__ */ React34.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React34.createElement(Dialog.Portal, null, /* @__PURE__ */ React34.createElement(Dialog.Overlay, null), /* @__PURE__ */ React34.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React34.createElement(Dialog.Title, { css: { p: 0 }, asChild: true }, /* @__PURE__ */ React34.createElement(Text, { as: "h6", variant: "h6" }, "Change Role")), /* @__PURE__ */ React34.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React33.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React33.createElement(Dialog.Portal, null, /* @__PURE__ */ React33.createElement(Dialog.Overlay, null), /* @__PURE__ */ React33.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React33.createElement(Dialog.Title, { css: { p: 0 }, asChild: true }, /* @__PURE__ */ React33.createElement(Text, { as: "h6", variant: "h6" }, "Change Role")), /* @__PURE__ */ React33.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React33.createElement(
     Text,
     {
       variant: "body2",
@@ -4278,9 +4272,9 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
       }
     },
     "Change the role of",
-    peerNameRef && peerNameRef.clientWidth === peerNameMaxWidth ? /* @__PURE__ */ React34.createElement(Tooltip, { title: peer.name, side: "top" }, /* @__PURE__ */ React34.createElement(PeerName, { ref: setPeerNameRef, maxWidth: peerNameMaxWidth }, peer.name)) : /* @__PURE__ */ React34.createElement(PeerName, { ref: setPeerNameRef, maxWidth: peerNameMaxWidth }, peer.name),
+    peerNameRef && peerNameRef.clientWidth === peerNameMaxWidth ? /* @__PURE__ */ React33.createElement(Tooltip, { title: peer.name, side: "top" }, /* @__PURE__ */ React33.createElement(PeerName, { ref: setPeerNameRef, maxWidth: peerNameMaxWidth }, peer.name)) : /* @__PURE__ */ React33.createElement(PeerName, { ref: setPeerNameRef, maxWidth: peerNameMaxWidth }, peer.name),
     "to"
-  )), /* @__PURE__ */ React34.createElement(
+  )), /* @__PURE__ */ React33.createElement(
     Flex,
     {
       align: "center",
@@ -4289,7 +4283,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
         mb: "$10"
       }
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React33.createElement(
       Box,
       {
         css: {
@@ -4298,7 +4292,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
           minWidth: 0
         }
       },
-      /* @__PURE__ */ React34.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React33.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ React33.createElement(
         Dropdown.Trigger,
         {
           "data-testid": "open_role_selection_dropdown",
@@ -4311,8 +4305,8 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
           },
           ref
         },
-        /* @__PURE__ */ React34.createElement(Flex, { align: "center", justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React34.createElement(Text, null, selectedRole), open ? /* @__PURE__ */ React34.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React34.createElement(ChevronDownIcon2, null))
-      ), /* @__PURE__ */ React34.createElement(Dropdown.Portal, null, /* @__PURE__ */ React34.createElement(
+        /* @__PURE__ */ React33.createElement(Flex, { align: "center", justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React33.createElement(Text, null, selectedRole), open ? /* @__PURE__ */ React33.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React33.createElement(ChevronDownIcon2, null))
+      ), /* @__PURE__ */ React33.createElement(Dropdown.Portal, null, /* @__PURE__ */ React33.createElement(
         Dropdown.Content,
         {
           align: "start",
@@ -4320,7 +4314,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
           css: { zIndex: 1e3, width: (_a = ref.current) == null ? void 0 : _a.clientWidth }
         },
         roles.map((role) => {
-          return /* @__PURE__ */ React34.createElement(
+          return /* @__PURE__ */ React33.createElement(
             Dropdown.Item,
             {
               "data-testid": role,
@@ -4336,7 +4330,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
         })
       )))
     )
-  ), !peer.isLocal && /* @__PURE__ */ React34.createElement(Flex, { justify: "between", css: { w: "100%", mb: "$10" } }, /* @__PURE__ */ React34.createElement(Label3, { htmlFor: "requestRoleChangePermission", css: { cursor: "pointer" } }, "Request Permission"), /* @__PURE__ */ React34.createElement(
+  ), !peer.isLocal && /* @__PURE__ */ React33.createElement(Flex, { justify: "between", css: { w: "100%", mb: "$10" } }, /* @__PURE__ */ React33.createElement(Label3, { htmlFor: "requestRoleChangePermission", css: { cursor: "pointer" } }, "Request Permission"), /* @__PURE__ */ React33.createElement(
     Checkbox.Root,
     {
       checked: requestPermission,
@@ -4344,8 +4338,8 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
       id: "requestRoleChangePermission",
       "data-testid": "force_role_change_checkbox"
     },
-    /* @__PURE__ */ React34.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React34.createElement(CheckIcon2, { width: 16, height: 16 }))
-  )), /* @__PURE__ */ React34.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React34.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React34.createElement(Dialog.Close, { css: { width: "100%", p: "$4 $8" }, asChild: true }, /* @__PURE__ */ React34.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" }, "data-testid": "cancel_button" }, "Cancel"))), /* @__PURE__ */ React34.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React33.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React33.createElement(CheckIcon2, { width: 16, height: 16 }))
+  )), /* @__PURE__ */ React33.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React33.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React33.createElement(Dialog.Close, { css: { width: "100%", p: "$4 $8" }, asChild: true }, /* @__PURE__ */ React33.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" }, "data-testid": "cancel_button" }, "Cancel"))), /* @__PURE__ */ React33.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React33.createElement(
     Button,
     {
       "data-testid": "change_button",
@@ -4362,7 +4356,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
 
 // src/Prebuilt/components/Header/ParticipantFilter.jsx
 init_define_process_env();
-import React35, { useCallback as useCallback6, useState as useState13 } from "react";
+import React34, { useCallback as useCallback6, useState as useState13 } from "react";
 import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3, HandRaiseIcon, PeopleIcon } from "@100mslive/react-icons";
 var ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
   var _a, _b;
@@ -4375,7 +4369,7 @@ var ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
   if (!isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React34.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React34.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -4387,8 +4381,8 @@ var ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
       },
       tabIndex: 0
     },
-    /* @__PURE__ */ React35.createElement(Flex, { align: "center" }, /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: __spreadValues({}, textEllipsis(80)) }, selectionValue || "Everyone"), /* @__PURE__ */ React35.createElement(Box, { css: { ml: "$2", color: "$on_surface_low" } }, open ? /* @__PURE__ */ React35.createElement(ChevronUpIcon3, { width: 14, height: 14 }) : /* @__PURE__ */ React35.createElement(ChevronDownIcon3, { width: 14, height: 14 })))
-  ), /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React34.createElement(Flex, { align: "center" }, /* @__PURE__ */ React34.createElement(Text, { variant: "sm", css: __spreadValues({}, textEllipsis(80)) }, selectionValue || "Everyone"), /* @__PURE__ */ React34.createElement(Box, { css: { ml: "$2", color: "$on_surface_low" } }, open ? /* @__PURE__ */ React34.createElement(ChevronUpIcon3, { width: 14, height: 14 }) : /* @__PURE__ */ React34.createElement(ChevronDownIcon3, { width: 14, height: 14 })))
+  ), /* @__PURE__ */ React34.createElement(
     Dropdown.Content,
     {
       align: "start",
@@ -4400,19 +4394,19 @@ var ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
         w: "$48"
       }
     },
-    /* @__PURE__ */ React35.createElement(Item5, { selected: !selection, title: "Everyone", onSelection: onItemClick, icon: /* @__PURE__ */ React35.createElement(PeopleIcon, null) }),
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React34.createElement(Item5, { selected: !selection, title: "Everyone", onSelection: onItemClick, icon: /* @__PURE__ */ React34.createElement(PeopleIcon, null) }),
+    /* @__PURE__ */ React34.createElement(
       Item5,
       {
         selected: (_b = selection == null ? void 0 : selection.metadata) == null ? void 0 : _b.isHandRaised,
         title: "Raised Hand",
         onSelection: onItemClick,
-        icon: /* @__PURE__ */ React35.createElement(HandRaiseIcon, null),
+        icon: /* @__PURE__ */ React34.createElement(HandRaiseIcon, null),
         value: { metadata: { isHandRaised: true }, role: "" }
       }
     ),
-    /* @__PURE__ */ React35.createElement(Dropdown.ItemSeparator, null),
-    roles.filter((role) => !isInternalRole(role)).map((role) => /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React34.createElement(Dropdown.ItemSeparator, null),
+    roles.filter((role) => !isInternalRole(role)).map((role) => /* @__PURE__ */ React34.createElement(
       Item5,
       {
         key: role,
@@ -4425,7 +4419,7 @@ var ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
   ));
 };
 var Item5 = ({ selected, title, onSelection, value, icon }) => {
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React34.createElement(
     Dropdown.Item,
     {
       onClick: (e) => {
@@ -4433,8 +4427,8 @@ var Item5 = ({ selected, title, onSelection, value, icon }) => {
         onSelection(value);
       }
     },
-    /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { flex: "1 1 0" } }, icon && /* @__PURE__ */ React35.createElement(Text, null, icon), /* @__PURE__ */ React35.createElement(Text, { css: { ml: "$4" } }, title)),
-    selected && /* @__PURE__ */ React35.createElement(Text, null, /* @__PURE__ */ React35.createElement(CheckIcon3, { widht: 16, height: 16 }))
+    /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { flex: "1 1 0" } }, icon && /* @__PURE__ */ React34.createElement(Text, null, icon), /* @__PURE__ */ React34.createElement(Text, { css: { ml: "$4" } }, title)),
+    selected && /* @__PURE__ */ React34.createElement(Text, null, /* @__PURE__ */ React34.createElement(CheckIcon3, { widht: 16, height: 16 }))
   );
 };
 
@@ -4456,7 +4450,7 @@ var ParticipantList = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(Fragment2, null, /* @__PURE__ */ React36.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { w: "100%", mb: "$10" } }, /* @__PURE__ */ React36.createElement(Text, { css: { fontWeight: "$semiBold", mr: "$4" } }, "Participants"), /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Fragment2, null, /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { w: "100%", mb: "$10" } }, /* @__PURE__ */ React35.createElement(Text, { css: { fontWeight: "$semiBold", mr: "$4" } }, "Participants"), /* @__PURE__ */ React35.createElement(
     ParticipantFilter,
     {
       selection: filter,
@@ -4464,14 +4458,14 @@ var ParticipantList = () => {
       isConnected,
       roles: rolesWithParticipants
     }
-  ), /* @__PURE__ */ React36.createElement(IconButton_default, { onClick: toggleSidepane, css: { w: "$11", h: "$11", ml: "auto" } }, /* @__PURE__ */ React36.createElement(CrossIcon4, null))), !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React36.createElement(ParticipantSearch, { onSearch }), participants.length === 0 && /* @__PURE__ */ React36.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", p: "$8 0" } }, /* @__PURE__ */ React36.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")), /* @__PURE__ */ React36.createElement(
+  ), /* @__PURE__ */ React35.createElement(IconButton_default, { onClick: toggleSidepane, css: { w: "$11", h: "$11", ml: "auto" } }, /* @__PURE__ */ React35.createElement(CrossIcon4, null))), !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React35.createElement(ParticipantSearch, { onSearch }), participants.length === 0 && /* @__PURE__ */ React35.createElement(Flex, { align: "center", justify: "center", css: { w: "100%", p: "$8 0" } }, /* @__PURE__ */ React35.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")), /* @__PURE__ */ React35.createElement(
     VirtualizedParticipants,
     {
       participants,
       isConnected,
       setSelectedPeerId
     }
-  )), selectedPeerId && /* @__PURE__ */ React36.createElement(
+  )), selectedPeerId && /* @__PURE__ */ React35.createElement(
     RoleChangeModal,
     {
       peerId: selectedPeerId,
@@ -4493,7 +4487,7 @@ var ParticipantCount = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     IconButton_default,
     {
       css: {
@@ -4509,8 +4503,8 @@ var ParticipantCount = () => {
       active: !isParticipantsOpen,
       "data-testid": "participant_list"
     },
-    /* @__PURE__ */ React36.createElement(PeopleIcon2, null),
-    /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
+    /* @__PURE__ */ React35.createElement(PeopleIcon2, null),
+    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
   );
 };
 function itemKey(index, data3) {
@@ -4518,7 +4512,7 @@ function itemKey(index, data3) {
 }
 var VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId }) => {
   const [ref, { width, height }] = useMeasure();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Box,
     {
       ref,
@@ -4527,7 +4521,7 @@ var VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId })
         mr: "-$10"
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(
       FixedSizeList,
       {
         itemSize: 68,
@@ -4541,8 +4535,8 @@ var VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId })
     )
   );
 };
-var VirtualisedParticipantListItem = React36.memo(({ style, index, data: data3 }) => {
-  return /* @__PURE__ */ React36.createElement("div", { style, key: data3.participants[index].id }, /* @__PURE__ */ React36.createElement(
+var VirtualisedParticipantListItem = React35.memo(({ style, index, data: data3 }) => {
+  return /* @__PURE__ */ React35.createElement("div", { style, key: data3.participants[index].id }, /* @__PURE__ */ React35.createElement(
     Participant,
     {
       peer: data3.participants[index],
@@ -4552,7 +4546,7 @@ var VirtualisedParticipantListItem = React36.memo(({ style, index, data: data3 }
   ));
 });
 var Participant = ({ peer, isConnected, setSelectedPeerId }) => {
-  return /* @__PURE__ */ React36.createElement(Fragment2, null, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Fragment2, null, /* @__PURE__ */ React35.createElement(
     Flex,
     {
       key: peer.id,
@@ -4560,7 +4554,7 @@ var Participant = ({ peer, isConnected, setSelectedPeerId }) => {
       align: "center",
       "data-testid": "participant_" + peer.name
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(
       Avatar,
       {
         name: peer.name,
@@ -4574,8 +4568,8 @@ var Participant = ({ peer, isConnected, setSelectedPeerId }) => {
         }
       }
     ),
-    /* @__PURE__ */ React36.createElement(Flex, { direction: "column", css: { flex: "1 1 0" } }, /* @__PURE__ */ React36.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(150)), { fontWeight: "$semiBold" }) }, peer.name), /* @__PURE__ */ React36.createElement(Text, { variant: "sub2" }, peer.roleName)),
-    isConnected && /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { flex: "1 1 0" } }, /* @__PURE__ */ React35.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(150)), { fontWeight: "$semiBold" }) }, peer.name), /* @__PURE__ */ React35.createElement(Text, { variant: "sub2" }, peer.roleName)),
+    isConnected && /* @__PURE__ */ React35.createElement(
       ParticipantActions,
       {
         peerId: peer.id,
@@ -4587,15 +4581,15 @@ var Participant = ({ peer, isConnected, setSelectedPeerId }) => {
     )
   ));
 };
-var ParticipantActions = React36.memo(({ onSettings, peerId, role }) => {
+var ParticipantActions = React35.memo(({ onSettings, peerId, role }) => {
   var _a, _b;
   const isHandRaised = (_a = useHMSStore11(selectPeerMetadata(peerId))) == null ? void 0 : _a.isHandRaised;
   const canChangeRole = (_b = useHMSStore11(selectPermissions)) == null ? void 0 : _b.changeRole;
-  const audioTrack = useHMSStore11(selectAudioTrackByPeerID(peerId));
+  const audioTrack = useHMSStore11(selectAudioTrackByPeerID2(peerId));
   const localPeerId = useHMSStore11(selectLocalPeerID2);
   const canChangeVolume = peerId !== localPeerId && audioTrack;
   const shouldShowMoreActions = canChangeRole || canChangeVolume;
-  return /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { flexShrink: 0 } }, /* @__PURE__ */ React36.createElement(ConnectionIndicator, { peerId }), isHandRaised && /* @__PURE__ */ React36.createElement(HandRaiseIcon2, null), shouldShowMoreActions && !isInternalRole(role) && /* @__PURE__ */ React36.createElement(ParticipantMoreActions, { onRoleChange: onSettings, peerId, role }));
+  return /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { flexShrink: 0 } }, /* @__PURE__ */ React35.createElement(ConnectionIndicator, { peerId }), isHandRaised && /* @__PURE__ */ React35.createElement(HandRaiseIcon2, null), shouldShowMoreActions && !isInternalRole(role) && /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { onRoleChange: onSettings, peerId, role }));
 });
 var ParticipantMoreActions = ({ onRoleChange, peerId }) => {
   const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore11(selectPermissions);
@@ -4603,7 +4597,7 @@ var ParticipantMoreActions = ({ onRoleChange, peerId }) => {
   const isLocal = localPeerId === peerId;
   const actions = useHMSActions10();
   const [open, setOpen] = useState14(false);
-  return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React36.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "participant_more_actions", css: { p: "$2", r: "$0" }, tabIndex: 0 }, /* @__PURE__ */ React36.createElement(Text, null, /* @__PURE__ */ React36.createElement(VerticalMenuIcon, null))), /* @__PURE__ */ React36.createElement(Dropdown.Portal, null, /* @__PURE__ */ React36.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, canChangeRole && /* @__PURE__ */ React36.createElement(Dropdown.Item, { onClick: () => onRoleChange(peerId) }, /* @__PURE__ */ React36.createElement(ChangeRoleIcon, null), /* @__PURE__ */ React36.createElement(Text, { css: { ml: "$4" } }, "Change Role")), /* @__PURE__ */ React36.createElement(ParticipantVolume, { peerId }), !isLocal && canRemoveOthers && /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React35.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "participant_more_actions", css: { p: "$2", r: "$0" }, tabIndex: 0 }, /* @__PURE__ */ React35.createElement(Text, null, /* @__PURE__ */ React35.createElement(VerticalMenuIcon, null))), /* @__PURE__ */ React35.createElement(Dropdown.Portal, null, /* @__PURE__ */ React35.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, canChangeRole && /* @__PURE__ */ React35.createElement(Dropdown.Item, { onClick: () => onRoleChange(peerId) }, /* @__PURE__ */ React35.createElement(ChangeRoleIcon, null), /* @__PURE__ */ React35.createElement(Text, { css: { ml: "$4" } }, "Change Role")), /* @__PURE__ */ React35.createElement(ParticipantVolume, { peerId }), !isLocal && canRemoveOthers && /* @__PURE__ */ React35.createElement(
     Dropdown.Item,
     {
       onClick: () => __async(void 0, null, function* () {
@@ -4613,18 +4607,18 @@ var ParticipantMoreActions = ({ onRoleChange, peerId }) => {
         }
       })
     },
-    /* @__PURE__ */ React36.createElement(RemoveUserIcon, null),
-    /* @__PURE__ */ React36.createElement(Text, { css: { ml: "$4", color: "$alert_error_default" } }, "Remove Participant")
+    /* @__PURE__ */ React35.createElement(RemoveUserIcon, null),
+    /* @__PURE__ */ React35.createElement(Text, { css: { ml: "$4", color: "$alert_error_default" } }, "Remove Participant")
   ))));
 };
 var ParticipantVolume = ({ peerId }) => {
-  const audioTrack = useHMSStore11(selectAudioTrackByPeerID(peerId));
+  const audioTrack = useHMSStore11(selectAudioTrackByPeerID2(peerId));
   const localPeerId = useHMSStore11(selectLocalPeerID2);
   const hmsActions = useHMSActions10();
   if (peerId === localPeerId || !audioTrack) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { h: "auto" } }, /* @__PURE__ */ React36.createElement(Flex, { direction: "column", css: { w: "100%" } }, /* @__PURE__ */ React36.createElement(Flex, { align: "center" }, /* @__PURE__ */ React36.createElement(SpeakerIcon, null), /* @__PURE__ */ React36.createElement(Text, { css: { ml: "$4" } }, "Volume", audioTrack.volume ? `(${audioTrack.volume})` : "")), /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { h: "auto" } }, /* @__PURE__ */ React35.createElement(Flex, { direction: "column", css: { w: "100%" } }, /* @__PURE__ */ React35.createElement(Flex, { align: "center" }, /* @__PURE__ */ React35.createElement(SpeakerIcon, null), /* @__PURE__ */ React35.createElement(Text, { css: { ml: "$4" } }, "Volume", audioTrack.volume ? `(${audioTrack.volume})` : "")), /* @__PURE__ */ React35.createElement(
     Slider,
     {
       css: { my: "0.5rem" },
@@ -4637,7 +4631,7 @@ var ParticipantVolume = ({ peerId }) => {
   )));
 };
 var ParticipantSearch = ({ onSearch, placeholder }) => {
-  const [value, setValue] = React36.useState("");
+  const [value, setValue] = React35.useState("");
   useDebounce(
     () => {
       onSearch(value);
@@ -4645,7 +4639,7 @@ var ParticipantSearch = ({ onSearch, placeholder }) => {
     300,
     [value, onSearch]
   );
-  return /* @__PURE__ */ React36.createElement(Box, { css: { p: "$4 0", my: "$8", position: "relative" } }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(Box, { css: { p: "$4 0", my: "$8", position: "relative" } }, /* @__PURE__ */ React35.createElement(
     Box,
     {
       css: {
@@ -4656,8 +4650,8 @@ var ParticipantSearch = ({ onSearch, placeholder }) => {
         color: "$on_surface_medium"
       }
     },
-    /* @__PURE__ */ React36.createElement(SearchIcon, null)
-  ), /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(SearchIcon, null)
+  ), /* @__PURE__ */ React35.createElement(
     Input,
     {
       type: "text",
@@ -4678,7 +4672,7 @@ var ParticipantSearch = ({ onSearch, placeholder }) => {
 
 // src/Prebuilt/components/Header/StreamActions.jsx
 init_define_process_env();
-import React42, { Fragment as Fragment3, useState as useState19 } from "react";
+import React41, { Fragment as Fragment3, useState as useState19 } from "react";
 import { useMedia as useMedia3 } from "react-use";
 import {
   HMSRoomState as HMSRoomState2,
@@ -4693,7 +4687,7 @@ import { RecordIcon as RecordIcon2, WrenchIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/GoLiveButton.jsx
 init_define_process_env();
-import React37 from "react";
+import React36 from "react";
 import { useRecordingStreaming as useRecordingStreaming2 } from "@100mslive/react-sdk";
 import { GoLiveIcon } from "@100mslive/react-icons";
 var GoLiveButton = () => {
@@ -4711,7 +4705,7 @@ var GoLiveButton = () => {
       tooltipText = "RTMP start in progress";
     }
   }
-  return /* @__PURE__ */ React37.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React36.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React36.createElement(
     Button,
     {
       "data-testid": "go_live",
@@ -4721,7 +4715,7 @@ var GoLiveButton = () => {
       loading: isRTMPStartedFromUI || isHLSStartedFromUI,
       disabled: isBrowserRecordingOn && !isStreamingOn
     },
-    /* @__PURE__ */ React37.createElement(GoLiveIcon, null),
+    /* @__PURE__ */ React36.createElement(GoLiveIcon, null),
     "Go Live"
   ));
 };
@@ -4729,7 +4723,7 @@ var GoLiveButton_default = GoLiveButton;
 
 // src/Prebuilt/components/Streaming/ResolutionInput.jsx
 init_define_process_env();
-import React38, { useCallback as useCallback8, useState as useState15 } from "react";
+import React37, { useCallback as useCallback8, useState as useState15 } from "react";
 import { InfoIcon } from "@100mslive/react-icons";
 var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, testId }) => {
   const [resolution, setResolution] = useState15(RTMP_RECORD_DEFAULT_RESOLUTION);
@@ -4752,7 +4746,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
     },
     [resolution]
   );
-  return /* @__PURE__ */ React38.createElement(DialogRow, { breakSm: true, css: css2 }, /* @__PURE__ */ React38.createElement(Flex, { gap: 1 }, /* @__PURE__ */ React38.createElement(Label3, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ React38.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React38.createElement("div", null, /* @__PURE__ */ React38.createElement(InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React37.createElement(DialogRow, { breakSm: true, css: css2 }, /* @__PURE__ */ React37.createElement(Flex, { gap: 1 }, /* @__PURE__ */ React37.createElement(Label3, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ React37.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React37.createElement("div", null, /* @__PURE__ */ React37.createElement(InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ React37.createElement(
     Flex,
     {
       justify: "between",
@@ -4760,7 +4754,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
       gap: 2,
       direction: "column"
     },
-    /* @__PURE__ */ React38.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ React38.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React37.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ React37.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ React37.createElement(
       Input,
       {
         "data-testid": `${testId}_width`,
@@ -4774,7 +4768,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
         onBlur: () => onResolutionChange(resolution),
         type: "number"
       }
-    )), /* @__PURE__ */ React38.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ React38.createElement(
+    )), /* @__PURE__ */ React37.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ React37.createElement(
       Input,
       {
         "data-testid": `${testId}_height`,
@@ -4794,17 +4788,17 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
 
 // src/Prebuilt/components/Streaming/RTMPStreaming.jsx
 init_define_process_env();
-import React40, { useEffect as useEffect21, useRef as useRef7, useState as useState16 } from "react";
+import React39, { useEffect as useEffect21, useRef as useRef7, useState as useState16 } from "react";
 import { useHMSActions as useHMSActions11, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { AddCircleIcon, EndStreamIcon, GoLiveIcon as GoLiveIcon2, PencilIcon, SettingsIcon, TrashIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Streaming/Common.jsx
 init_define_process_env();
-import React39 from "react";
+import React38 from "react";
 import { selectPermissions as selectPermissions2, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
 import { ChevronLeftIcon, ChevronRightIcon, CrossIcon as CrossIcon5, RecordIcon } from "@100mslive/react-icons";
 var StreamCard = ({ title, subtitle, Icon: Icon2, imgSrc = "", css: css2 = {}, onClick, testId }) => {
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React38.createElement(
     Flex,
     {
       css: __spreadValues({
@@ -4819,21 +4813,21 @@ var StreamCard = ({ title, subtitle, Icon: Icon2, imgSrc = "", css: css2 = {}, o
       "data-testid": testId,
       onClick
     },
-    /* @__PURE__ */ React39.createElement(Text, { css: { alignSelf: "center", p: "$4" } }, imgSrc ? /* @__PURE__ */ React39.createElement("img", { src: imgSrc, height: 40, width: 40 }) : /* @__PURE__ */ React39.createElement(Icon2, { width: 40, height: 40 })),
-    /* @__PURE__ */ React39.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React39.createElement(Text, { variant: "h6", css: { mb: "$4" } }, title), /* @__PURE__ */ React39.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, subtitle)),
-    /* @__PURE__ */ React39.createElement(Text, { css: { alignSelf: "center" } }, /* @__PURE__ */ React39.createElement(ChevronRightIcon, null))
+    /* @__PURE__ */ React38.createElement(Text, { css: { alignSelf: "center", p: "$4" } }, imgSrc ? /* @__PURE__ */ React38.createElement("img", { src: imgSrc, height: 40, width: 40 }) : /* @__PURE__ */ React38.createElement(Icon2, { width: 40, height: 40 })),
+    /* @__PURE__ */ React38.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6", css: { mb: "$4" } }, title), /* @__PURE__ */ React38.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, subtitle)),
+    /* @__PURE__ */ React38.createElement(Text, { css: { alignSelf: "center" } }, /* @__PURE__ */ React38.createElement(ChevronRightIcon, null))
   );
 };
 var ContentHeader = ({ onBack, title, content }) => {
-  return /* @__PURE__ */ React39.createElement(Flex, { css: { w: "100%", py: "$8", px: "$10", cursor: "pointer" } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React38.createElement(Flex, { css: { w: "100%", py: "$8", px: "$10", cursor: "pointer" } }, /* @__PURE__ */ React38.createElement(
     Text,
     {
       css: { p: "$2", bg: "$surface_bright", r: "$round", alignSelf: "center" },
       onClick: onBack,
       "data-testid": "go_back"
     },
-    /* @__PURE__ */ React39.createElement(ChevronLeftIcon, { width: 16, height: 16 })
-  ), /* @__PURE__ */ React39.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React38.createElement(ChevronLeftIcon, { width: 16, height: 16 })
+  ), /* @__PURE__ */ React38.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React38.createElement(
     Text,
     {
       variant: "tiny",
@@ -4844,10 +4838,10 @@ var ContentHeader = ({ onBack, title, content }) => {
       }
     },
     title
-  ), /* @__PURE__ */ React39.createElement(Text, { variant: "h6" }, content)), /* @__PURE__ */ React39.createElement(IconButton, { onClick: onBack, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React39.createElement(CrossIcon5, { width: 16, height: 16 })));
+  ), /* @__PURE__ */ React38.createElement(Text, { variant: "h6" }, content)), /* @__PURE__ */ React38.createElement(IconButton, { onClick: onBack, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React38.createElement(CrossIcon5, { width: 16, height: 16 })));
 };
 var Container3 = ({ children, rounded = false }) => {
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React38.createElement(
     Box,
     {
       css: {
@@ -4868,23 +4862,23 @@ var Container3 = ({ children, rounded = false }) => {
   );
 };
 var ContentBody = ({ Icon: Icon2, title, removeVerticalPadding = false, children }) => {
-  return /* @__PURE__ */ React39.createElement(Box, { css: { p: removeVerticalPadding ? "$0 $10" : "$10" } }, /* @__PURE__ */ React39.createElement(Text, { css: { display: "flex", alignItems: "center", mb: "$4" } }, /* @__PURE__ */ React39.createElement(Icon2, null), /* @__PURE__ */ React39.createElement(Text, { as: "span", css: { fontWeight: "$semiBold", ml: "$4" } }, title)), /* @__PURE__ */ React39.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, children));
+  return /* @__PURE__ */ React38.createElement(Box, { css: { p: removeVerticalPadding ? "$0 $10" : "$10" } }, /* @__PURE__ */ React38.createElement(Text, { css: { display: "flex", alignItems: "center", mb: "$4" } }, /* @__PURE__ */ React38.createElement(Icon2, null), /* @__PURE__ */ React38.createElement(Text, { as: "span", css: { fontWeight: "$semiBold", ml: "$4" } }, title)), /* @__PURE__ */ React38.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, children));
 };
 var RecordStream = ({ record, setRecord, testId }) => {
   const permissions = useHMSStore12(selectPermissions2);
-  return (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { bg: "$surface_bright", m: "$8 $10", p: "$8", r: "$0" } }, /* @__PURE__ */ React39.createElement(Text, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ React39.createElement(RecordIcon, null)), /* @__PURE__ */ React39.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$8" } }, "Record the stream"), /* @__PURE__ */ React39.createElement(Switch, { checked: record, onCheckedChange: setRecord, "data-testid": testId })) : null;
+  return (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React38.createElement(Flex, { align: "center", css: { bg: "$surface_bright", m: "$8 $10", p: "$8", r: "$0" } }, /* @__PURE__ */ React38.createElement(Text, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ React38.createElement(RecordIcon, null)), /* @__PURE__ */ React38.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$8" } }, "Record the stream"), /* @__PURE__ */ React38.createElement(Switch, { checked: record, onCheckedChange: setRecord, "data-testid": testId })) : null;
 };
 var ErrorText = ({ error }) => {
   if (!error) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Text, { variant: "sm", css: { mb: "$8", color: "$alert_error_default" } }, error);
+  return /* @__PURE__ */ React38.createElement(Text, { variant: "sm", css: { mb: "$8", color: "$alert_error_default" } }, error);
 };
 
 // src/Prebuilt/components/Streaming/RTMPStreaming.jsx
 var RTMPStreaming = ({ onBack }) => {
   const { isRTMPRunning } = useRecordingStreaming3();
-  return /* @__PURE__ */ React40.createElement(Container3, null, /* @__PURE__ */ React40.createElement(ContentHeader, { title: "Start Streaming", content: "Choose a destination", onBack }), /* @__PURE__ */ React40.createElement(ContentBody, { Icon: SettingsIcon, title: "RTMP" }, "Live Stream your call to Twitch, YouTube, Facebook and any app which supports RTMP, all at the same time"), !isRTMPRunning ? /* @__PURE__ */ React40.createElement(StartRTMP, null) : /* @__PURE__ */ React40.createElement(EndRTMP, null));
+  return /* @__PURE__ */ React39.createElement(Container3, null, /* @__PURE__ */ React39.createElement(ContentHeader, { title: "Start Streaming", content: "Choose a destination", onBack }), /* @__PURE__ */ React39.createElement(ContentBody, { Icon: SettingsIcon, title: "RTMP" }, "Live Stream your call to Twitch, YouTube, Facebook and any app which supports RTMP, all at the same time"), !isRTMPRunning ? /* @__PURE__ */ React39.createElement(StartRTMP, null) : /* @__PURE__ */ React39.createElement(EndRTMP, null));
 };
 var StartRTMP = () => {
   const [rtmpPreference = [], setRTMPPreference] = useUserPreferences(UserPreferencesKeys.RTMP_URLS);
@@ -4904,7 +4898,7 @@ var StartRTMP = () => {
   const [resolution, setResolution] = useState16(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [isRTMPStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);
   const hasRTMPURL = rtmpStreams.some((value) => value.rtmpURL && value.streamKey);
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React39.createElement(
     Box,
     {
       css: { overflowY: "auto" },
@@ -4913,8 +4907,8 @@ var StartRTMP = () => {
         e.preventDefault();
       }
     },
-    rtmpStreams.length > 0 && /* @__PURE__ */ React40.createElement(Box, { css: { px: "$10" } }, /* @__PURE__ */ React40.createElement(Accordion.Root, { type: "single", collapsible: true, defaultValue: rtmpStreams[0].id }, rtmpStreams.map((rtmp, index) => {
-      return /* @__PURE__ */ React40.createElement(
+    rtmpStreams.length > 0 && /* @__PURE__ */ React39.createElement(Box, { css: { px: "$10" } }, /* @__PURE__ */ React39.createElement(Accordion.Root, { type: "single", collapsible: true, defaultValue: rtmpStreams[0].id }, rtmpStreams.map((rtmp, index) => {
+      return /* @__PURE__ */ React39.createElement(
         Accordion.Item,
         {
           value: rtmp.id,
@@ -4925,11 +4919,11 @@ var StartRTMP = () => {
             my: "$4"
           }
         },
-        /* @__PURE__ */ React40.createElement(AccordionHeader2, { rtmp, setRTMPStreams }),
-        /* @__PURE__ */ React40.createElement(Accordion.Content, { css: { px: "$8", py: 0 } }, /* @__PURE__ */ React40.createElement(RTMPForm, __spreadProps(__spreadValues({}, rtmp), { setRTMPStreams, testId: `${index}_rtmp` })))
+        /* @__PURE__ */ React39.createElement(AccordionHeader2, { rtmp, setRTMPStreams }),
+        /* @__PURE__ */ React39.createElement(Accordion.Content, { css: { px: "$8", py: 0 } }, /* @__PURE__ */ React39.createElement(RTMPForm, __spreadProps(__spreadValues({}, rtmp), { setRTMPStreams, testId: `${index}_rtmp` })))
       );
     }))),
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React39.createElement(
       ResolutionInput,
       {
         testId: "rtmp_resolution",
@@ -4942,8 +4936,8 @@ var StartRTMP = () => {
         }
       }
     ),
-    /* @__PURE__ */ React40.createElement(RecordStream, { record, setRecord, testId: "rtmp_recording" }),
-    /* @__PURE__ */ React40.createElement(Box, { css: { p: "$8 $10", "@lg": { display: "flex", gap: "$4" } } }, rtmpStreams.length < 3 && /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React39.createElement(RecordStream, { record, setRecord, testId: "rtmp_recording" }),
+    /* @__PURE__ */ React39.createElement(Box, { css: { p: "$8 $10", "@lg": { display: "flex", gap: "$4" } } }, rtmpStreams.length < 3 && /* @__PURE__ */ React39.createElement(
       Button,
       {
         "data-testid": "add_stream",
@@ -4963,9 +4957,9 @@ var StartRTMP = () => {
           ]);
         }
       },
-      /* @__PURE__ */ React40.createElement(AddCircleIcon, null),
+      /* @__PURE__ */ React39.createElement(AddCircleIcon, null),
       " Add Stream"
-    ), /* @__PURE__ */ React40.createElement(
+    ), /* @__PURE__ */ React39.createElement(
       Button,
       {
         "data-testid": "start_rtmp",
@@ -4998,9 +4992,9 @@ var StartRTMP = () => {
           }
         })
       },
-      isRTMPStarted ? /* @__PURE__ */ React40.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React40.createElement(GoLiveIcon2, null),
+      isRTMPStarted ? /* @__PURE__ */ React39.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React39.createElement(GoLiveIcon2, null),
       isRTMPStarted ? "Starting stream..." : "Go Live"
-    ), /* @__PURE__ */ React40.createElement(ErrorText, { error }))
+    ), /* @__PURE__ */ React39.createElement(ErrorText, { error }))
   );
 };
 var EndRTMP = () => {
@@ -5013,7 +5007,7 @@ var EndRTMP = () => {
       setInProgress(false);
     }
   }, [inProgress, isRTMPRunning]);
-  return /* @__PURE__ */ React40.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React40.createElement(ErrorText, { error }), /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React39.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React39.createElement(ErrorText, { error }), /* @__PURE__ */ React39.createElement(
     Button,
     {
       "data-testid": "stop_rtmp",
@@ -5032,19 +5026,19 @@ var EndRTMP = () => {
         }
       })
     },
-    /* @__PURE__ */ React40.createElement(EndStreamIcon, null),
+    /* @__PURE__ */ React39.createElement(EndStreamIcon, null),
     "End Stream"
   ));
 };
 var ActionIcon = ({ icon: Icon2, onClick }) => {
-  return /* @__PURE__ */ React40.createElement(Text, { as: "span", css: { mx: "$2", cursor: "pointer" }, onClick }, /* @__PURE__ */ React40.createElement(Icon2, { width: 16, height: 16 }));
+  return /* @__PURE__ */ React39.createElement(Text, { as: "span", css: { mx: "$2", cursor: "pointer" }, onClick }, /* @__PURE__ */ React39.createElement(Icon2, { width: 16, height: 16 }));
 };
 var FormLabel = ({ id, children }) => {
-  return /* @__PURE__ */ React40.createElement(Label3, { htmlFor: id, css: { color: "$on_surface_high", my: "$4", fontSize: "$sm" } }, children);
+  return /* @__PURE__ */ React39.createElement(Label3, { htmlFor: id, css: { color: "$on_surface_high", my: "$4", fontSize: "$sm" } }, children);
 };
 var RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {
   const formRef = useRef7(null);
-  return /* @__PURE__ */ React40.createElement(Flex, { id, direction: "column", css: { mb: "$8", px: "$8" }, ref: formRef }, /* @__PURE__ */ React40.createElement(FormLabel, { id: "rtmpURL" }, "RTMP URL", /* @__PURE__ */ React40.createElement(Asterik, null)), /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React39.createElement(Flex, { id, direction: "column", css: { mb: "$8", px: "$8" }, ref: formRef }, /* @__PURE__ */ React39.createElement(FormLabel, { id: "rtmpURL" }, "RTMP URL", /* @__PURE__ */ React39.createElement(Asterik, null)), /* @__PURE__ */ React39.createElement(
     Input,
     {
       "data-testid": `${testId}_url`,
@@ -5064,7 +5058,7 @@ var RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {
       },
       required: true
     }
-  ), /* @__PURE__ */ React40.createElement(FormLabel, { id: "streamKey" }, "Stream Key", /* @__PURE__ */ React40.createElement(Asterik, null)), /* @__PURE__ */ React40.createElement(
+  ), /* @__PURE__ */ React39.createElement(FormLabel, { id: "streamKey" }, "Stream Key", /* @__PURE__ */ React39.createElement(Asterik, null)), /* @__PURE__ */ React39.createElement(
     Input,
     {
       placeholder: "Enter Stream Key",
@@ -5087,11 +5081,11 @@ var RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {
   ));
 };
 var Asterik = () => {
-  return /* @__PURE__ */ React40.createElement(Text, { variant: "sm", as: "span", css: { color: "$alert_error_default", mx: "$2" } }, "*");
+  return /* @__PURE__ */ React39.createElement(Text, { variant: "sm", as: "span", css: { color: "$alert_error_default", mx: "$2" } }, "*");
 };
 var AccordionHeader2 = ({ rtmp, setRTMPStreams }) => {
   const [edit, setEdit] = useState16(false);
-  return /* @__PURE__ */ React40.createElement(Accordion.Header, { css: { px: "$8" } }, edit ? /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React39.createElement(Accordion.Header, { css: { px: "$8" } }, edit ? /* @__PURE__ */ React39.createElement(
     Input,
     {
       defaultValue: rtmp.name,
@@ -5111,7 +5105,7 @@ var AccordionHeader2 = ({ rtmp, setRTMPStreams }) => {
         }
       }
     }
-  ) : /* @__PURE__ */ React40.createElement(Text, { css: { flex: "1 1 0" } }, rtmp.name), /* @__PURE__ */ React40.createElement(Flex, { css: { mx: "$4", gap: "$2" } }, /* @__PURE__ */ React40.createElement(
+  ) : /* @__PURE__ */ React39.createElement(Text, { css: { flex: "1 1 0" } }, rtmp.name), /* @__PURE__ */ React39.createElement(Flex, { css: { mx: "$4", gap: "$2" } }, /* @__PURE__ */ React39.createElement(
     ActionIcon,
     {
       onClick: (e) => {
@@ -5120,7 +5114,7 @@ var AccordionHeader2 = ({ rtmp, setRTMPStreams }) => {
       },
       icon: PencilIcon
     }
-  ), /* @__PURE__ */ React40.createElement(
+  ), /* @__PURE__ */ React39.createElement(
     ActionIcon,
     {
       onClick: () => {
@@ -5153,7 +5147,7 @@ function getResolution(recordingResolution) {
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
 init_define_process_env();
-import React41, { useState as useState18 } from "react";
+import React40, { useState as useState18 } from "react";
 import { selectLocalPeerID as selectLocalPeerID5, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore17, useScreenShare } from "@100mslive/react-sdk";
 import {
   AudioPlayerIcon,
@@ -5359,7 +5353,7 @@ var AdditionalRoomState = () => {
   if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState && !whiteboardOwner) {
     return null;
   }
-  return /* @__PURE__ */ React41.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React41.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React40.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React40.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React40.createElement(
     Flex,
     {
       align: "center",
@@ -5372,13 +5366,13 @@ var AdditionalRoomState = () => {
       },
       "data-testid": "record_status_dropdown"
     },
-    !isAudioshareInactive && /* @__PURE__ */ React41.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React41.createElement(MusicIcon, { width: 24, height: 24 }))),
-    shouldShowScreenShareState && /* @__PURE__ */ React41.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React41.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
-    shouldShowVideoState && /* @__PURE__ */ React41.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React41.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
-    !isPlaylistInactive && /* @__PURE__ */ React41.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React41.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
-    whiteboardOwner && /* @__PURE__ */ React41.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React41.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
-    /* @__PURE__ */ React41.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React41.createElement(ChevronUpIcon4, null) : /* @__PURE__ */ React41.createElement(ChevronDownIcon4, null))
-  )), /* @__PURE__ */ React41.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React41.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React41.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React41.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React41.createElement(
+    !isAudioshareInactive && /* @__PURE__ */ React40.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React40.createElement(MusicIcon, { width: 24, height: 24 }))),
+    shouldShowScreenShareState && /* @__PURE__ */ React40.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React40.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
+    shouldShowVideoState && /* @__PURE__ */ React40.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React40.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
+    !isPlaylistInactive && /* @__PURE__ */ React40.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React40.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
+    whiteboardOwner && /* @__PURE__ */ React40.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React40.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
+    /* @__PURE__ */ React40.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React40.createElement(ChevronUpIcon4, null) : /* @__PURE__ */ React40.createElement(ChevronDownIcon4, null))
+  )), /* @__PURE__ */ React40.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React40.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React40.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React40.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React40.createElement(
     Text,
     {
       variant: "sm",
@@ -5389,7 +5383,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.selection.playing ? "Pause" : "Play"
-  ) : /* @__PURE__ */ React41.createElement(
+  ) : /* @__PURE__ */ React40.createElement(
     Text,
     {
       variant: "sm",
@@ -5400,7 +5394,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.track.volume === 0 ? "Unmute" : "Mute"
-  )), !isAudioshareInactive && /* @__PURE__ */ React41.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React41.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React41.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React41.createElement(
+  )), !isAudioshareInactive && /* @__PURE__ */ React40.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React40.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React40.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React40.createElement(
     Text,
     {
       variant: "sm",
@@ -5411,7 +5405,7 @@ var AdditionalRoomState = () => {
       }
     },
     screenshareAudio.muted ? "Unmute" : "Mute"
-  )), shouldShowScreenShareState && /* @__PURE__ */ React41.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React41.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React41.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React41.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React41.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React41.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React41.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React41.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React41.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React41.createElement(
+  )), shouldShowScreenShareState && /* @__PURE__ */ React40.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React40.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React40.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React40.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React40.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React40.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React40.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React40.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React40.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React40.createElement(
     Text,
     {
       variant: "sm",
@@ -5431,7 +5425,7 @@ var LiveStatus = () => {
   if (!isHLSRunning && !isRTMPRunning) {
     return null;
   }
-  return /* @__PURE__ */ React42.createElement(Flex, { align: "center" }, /* @__PURE__ */ React42.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }), /* @__PURE__ */ React42.createElement(Text, null, "Live", /* @__PURE__ */ React42.createElement(Text, { as: "span", css: { "@md": { display: "none" } } }, "\xA0with ", isHLSRunning ? "HLS" : "RTMP")));
+  return /* @__PURE__ */ React41.createElement(Flex, { align: "center" }, /* @__PURE__ */ React41.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }), /* @__PURE__ */ React41.createElement(Text, null, "Live", /* @__PURE__ */ React41.createElement(Text, { as: "span", css: { "@md": { display: "none" } } }, "\xA0with ", isHLSRunning ? "HLS" : "RTMP")));
 };
 var RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming4();
@@ -5443,7 +5437,7 @@ var RecordingStatus = () => {
   )) {
     return null;
   }
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React41.createElement(
     Tooltip,
     {
       title: getRecordingText({
@@ -5452,20 +5446,20 @@ var RecordingStatus = () => {
         isHLSRecordingOn
       })
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React41.createElement(
       Box,
       {
         css: {
           color: "$alert_error_default"
         }
       },
-      /* @__PURE__ */ React42.createElement(RecordIcon2, { width: 24, height: 24 })
+      /* @__PURE__ */ React41.createElement(RecordIcon2, { width: 24, height: 24 })
     )
   );
 };
 var EndStream = () => {
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
-  return /* @__PURE__ */ React42.createElement(Button, { "data-testid": "end_stream", variant: "danger", icon: true, onClick: toggleStreaming }, /* @__PURE__ */ React42.createElement(WrenchIcon, null), "Manage Stream");
+  return /* @__PURE__ */ React41.createElement(Button, { "data-testid": "end_stream", variant: "danger", icon: true, onClick: toggleStreaming }, /* @__PURE__ */ React41.createElement(WrenchIcon, null), "Manage Stream");
 };
 var StartRecording = () => {
   const permissions = useHMSStore18(selectPermissions3);
@@ -5478,7 +5472,7 @@ var StartRecording = () => {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React42.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React42.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React42.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React42.createElement(RecordIcon2, null), /* @__PURE__ */ React42.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React42.createElement(Popover2.Portal, null, /* @__PURE__ */ React42.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React42.createElement(Text, { variant: "body", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React41.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React41.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React41.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React41.createElement(RecordIcon2, null), /* @__PURE__ */ React41.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React41.createElement(Popover2.Portal, null, /* @__PURE__ */ React41.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React41.createElement(Text, { variant: "body", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React41.createElement(
       Button,
       {
         "data-testid": "stop_recording_confirm",
@@ -5500,7 +5494,7 @@ var StartRecording = () => {
       "Stop"
     ))));
   }
-  return /* @__PURE__ */ React42.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React42.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React41.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React41.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React41.createElement(
     Button,
     {
       "data-testid": "start_recording",
@@ -5509,16 +5503,16 @@ var StartRecording = () => {
       disabled: recordingStarted || isStreamingOn,
       onClick: () => setOpen(true)
     },
-    recordingStarted ? /* @__PURE__ */ React42.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React42.createElement(RecordIcon2, null),
-    /* @__PURE__ */ React42.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
-  )), /* @__PURE__ */ React42.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React42.createElement(
+    recordingStarted ? /* @__PURE__ */ React41.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React41.createElement(RecordIcon2, null),
+    /* @__PURE__ */ React41.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
+  )), /* @__PURE__ */ React41.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React41.createElement(
     ResolutionInput,
     {
       testId: "recording_resolution",
       css: { flexDirection: "column", alignItems: "start" },
       onResolutionChange: setResolution
     }
-  ), /* @__PURE__ */ React42.createElement(
+  ), /* @__PURE__ */ React41.createElement(
     Button,
     {
       "data-testid": "start_recording_confirm",
@@ -5560,12 +5554,12 @@ var StreamActions = () => {
   const isMobile = useMedia3(config.media.md);
   const { isStreamingOn } = useRecordingStreaming4();
   const roomState = useHMSStore18(selectRoomState2);
-  return /* @__PURE__ */ React42.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React42.createElement(AdditionalRoomState, null), /* @__PURE__ */ React42.createElement(Flex, { align: "center", css: { gap: "$4", "@md": { display: "none" } } }, roomState !== HMSRoomState2.Preview ? /* @__PURE__ */ React42.createElement(LiveStatus, null) : null, /* @__PURE__ */ React42.createElement(RecordingStatus, null)), isConnected && !isMobile ? /* @__PURE__ */ React42.createElement(StartRecording, null) : null, isConnected && (permissions.hlsStreaming || permissions.rtmpStreaming) && /* @__PURE__ */ React42.createElement(Fragment3, null, isStreamingOn ? /* @__PURE__ */ React42.createElement(EndStream, null) : /* @__PURE__ */ React42.createElement(GoLiveButton_default, null)));
+  return /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React41.createElement(AdditionalRoomState, null), /* @__PURE__ */ React41.createElement(Flex, { align: "center", css: { gap: "$4", "@md": { display: "none" } } }, roomState !== HMSRoomState2.Preview ? /* @__PURE__ */ React41.createElement(LiveStatus, null) : null, /* @__PURE__ */ React41.createElement(RecordingStatus, null)), isConnected && !isMobile ? /* @__PURE__ */ React41.createElement(StartRecording, null) : null, isConnected && (permissions.hlsStreaming || permissions.rtmpStreaming) && /* @__PURE__ */ React41.createElement(Fragment3, null, isStreamingOn ? /* @__PURE__ */ React41.createElement(EndStream, null) : /* @__PURE__ */ React41.createElement(GoLiveButton_default, null)));
 };
 
 // src/Prebuilt/components/Header/ConferencingHeader.jsx
 var ConferencingHeader = () => {
-  return /* @__PURE__ */ React43.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React43.createElement(Flex, { align: "center", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React43.createElement(SpeakerTag, null)), /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React42.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React42.createElement(Flex, { align: "center", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React42.createElement(SpeakerTag, null)), /* @__PURE__ */ React42.createElement(
     Flex,
     {
       align: "center",
@@ -5575,19 +5569,19 @@ var ConferencingHeader = () => {
         gap: "$4"
       }
     },
-    /* @__PURE__ */ React43.createElement(StreamActions, null),
-    /* @__PURE__ */ React43.createElement(ParticipantCount, null)
+    /* @__PURE__ */ React42.createElement(StreamActions, null),
+    /* @__PURE__ */ React42.createElement(ParticipantCount, null)
   ));
 };
 
 // src/Prebuilt/components/Header/StreamingHeader.jsx
 init_define_process_env();
-import React47 from "react";
+import React46 from "react";
 import { useMedia as useMedia4 } from "react-use";
 
 // src/Prebuilt/components/EmojiReaction.jsx
 init_define_process_env();
-import React44, { Fragment as Fragment4, useCallback as useCallback13, useMemo as useMemo4, useState as useState20 } from "react";
+import React43, { Fragment as Fragment4, useCallback as useCallback13, useMemo as useMemo4, useState as useState20 } from "react";
 import data from "@emoji-mart/data/sets/14/apple.json";
 import { init } from "emoji-mart";
 import {
@@ -5667,7 +5661,7 @@ var EmojiReaction = () => {
   if (!isConnected || localPeerRole === hlsViewerRole || !isFeatureEnabled) {
     return null;
   }
-  return /* @__PURE__ */ React44.createElement(Fragment4, null, /* @__PURE__ */ React44.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React44.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React44.createElement(IconButton_default, null, /* @__PURE__ */ React44.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React44.createElement(EmojiIcon, null)))), /* @__PURE__ */ React44.createElement(Dropdown.Content, { sideOffset: 5, align: "center", css: { p: "$8", bg: "$surface_default" } }, emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React44.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React44.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React44.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" }))))), /* @__PURE__ */ React44.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React43.createElement(Fragment4, null, /* @__PURE__ */ React43.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React43.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React43.createElement(IconButton_default, null, /* @__PURE__ */ React43.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React43.createElement(EmojiIcon, null)))), /* @__PURE__ */ React43.createElement(Dropdown.Content, { sideOffset: 5, align: "center", css: { p: "$8", bg: "$surface_default" } }, emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React43.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React43.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React43.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" }))))), /* @__PURE__ */ React43.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React43.createElement(
     Text,
     {
       variant: "sm",
@@ -5678,7 +5672,7 @@ var EmojiReaction = () => {
     },
     "Reactions will be timed for Live Streaming viewers.",
     " "
-  ), /* @__PURE__ */ React44.createElement(
+  ), /* @__PURE__ */ React43.createElement(
     Text,
     {
       variant: "sm",
@@ -5688,7 +5682,7 @@ var EmojiReaction = () => {
         fontWeight: "$semiBold"
       }
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React43.createElement(
       "a",
       {
         href: HLS_TIMED_METADATA_DOC_URL,
@@ -5715,7 +5709,7 @@ var EmojiContainer = styled("span", {
 
 // src/Prebuilt/components/LeaveRoom.jsx
 init_define_process_env();
-import React45, { Fragment as Fragment5, useState as useState21 } from "react";
+import React44, { Fragment as Fragment5, useState as useState21 } from "react";
 import { useParams } from "react-router-dom";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectPermissions as selectPermissions4, useHMSActions as useHMSActions17, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon, ExitIcon, HangUpIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
@@ -5753,7 +5747,7 @@ var LeaveRoom = () => {
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React45.createElement(Fragment5, null, permissions.endRoom ? /* @__PURE__ */ React45.createElement(Flex, null, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(Fragment5, null, permissions.endRoom ? /* @__PURE__ */ React44.createElement(Flex, null, /* @__PURE__ */ React44.createElement(
     LeaveIconButton,
     {
       variant: "danger",
@@ -5762,8 +5756,8 @@ var LeaveRoom = () => {
       css: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
       onClick: leaveRoom
     },
-    /* @__PURE__ */ React45.createElement(Tooltip, { title: "Leave Room" }, !isStreamKit ? /* @__PURE__ */ React45.createElement(Box, null, /* @__PURE__ */ React45.createElement(HangUpIcon, { key: "hangUp" })) : /* @__PURE__ */ React45.createElement(Flex, { gap: 2 }, /* @__PURE__ */ React45.createElement(Box, { css: { "@md": { transform: "rotate(180deg)" } } }, /* @__PURE__ */ React45.createElement(ExitIcon, { key: "hangUp" })), /* @__PURE__ */ React45.createElement(Text, { css: { "@md": { display: "none" }, color: "inherit" }, variant: "button" }, "Leave Studio")))
-  ), /* @__PURE__ */ React45.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(Tooltip, { title: "Leave Room" }, !isStreamKit ? /* @__PURE__ */ React44.createElement(Box, null, /* @__PURE__ */ React44.createElement(HangUpIcon, { key: "hangUp" })) : /* @__PURE__ */ React44.createElement(Flex, { gap: 2 }, /* @__PURE__ */ React44.createElement(Box, { css: { "@md": { transform: "rotate(180deg)" } } }, /* @__PURE__ */ React44.createElement(ExitIcon, { key: "hangUp" })), /* @__PURE__ */ React44.createElement(Text, { css: { "@md": { display: "none" }, color: "inherit" }, variant: "button" }, "Leave Studio")))
+  ), /* @__PURE__ */ React44.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React44.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -5773,8 +5767,8 @@ var LeaveRoom = () => {
         }
       }
     },
-    /* @__PURE__ */ React45.createElement(MenuTriggerButton, { variant: "danger", "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React45.createElement(VerticalMenuIcon2, null))
-  ), /* @__PURE__ */ React45.createElement(Dropdown.Content, { css: { p: 0 }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(MenuTriggerButton, { variant: "danger", "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React44.createElement(VerticalMenuIcon2, null))
+  ), /* @__PURE__ */ React44.createElement(Dropdown.Content, { css: { p: 0 }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React44.createElement(
     Dropdown.Item,
     {
       css: { w: "100%", bg: "rgba(178, 71, 81, 0.1)" },
@@ -5783,8 +5777,8 @@ var LeaveRoom = () => {
       },
       "data-testid": "end_room_btn"
     },
-    /* @__PURE__ */ React45.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React45.createElement(Box, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ React45.createElement(AlertTriangleIcon, null)), /* @__PURE__ */ React45.createElement(Flex, { direction: "column", align: "start" }, /* @__PURE__ */ React45.createElement(Text, { variant: "lg", css: { c: "$alert_error_default" } }, "End Room for All"), /* @__PURE__ */ React45.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", mt: "$2" } }, "Warning: You can\u2019t undo this action")))
-  ), /* @__PURE__ */ React45.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: leaveRoom, "data-testid": "just_leave_btn" }, /* @__PURE__ */ React45.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React45.createElement(Box, null, /* @__PURE__ */ React45.createElement(ExitIcon, null)), /* @__PURE__ */ React45.createElement(Flex, { direction: "column", align: "start" }, /* @__PURE__ */ React45.createElement(Text, { variant: "lg" }, "Leave ", isStreamKit ? "Studio" : "Room"), /* @__PURE__ */ React45.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", mt: "$2" } }, "You can always rejoin later"))))))) : /* @__PURE__ */ React45.createElement(LeaveIconButton, { onClick: leaveRoom, variant: "danger", key: "LeaveRoom", "data-testid": "leave_room_btn" }, /* @__PURE__ */ React45.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React45.createElement(Box, null, isStreamKit ? /* @__PURE__ */ React45.createElement(Box, { css: { "@md": { transform: "rotate(180deg)" } } }, /* @__PURE__ */ React45.createElement(ExitIcon, null)) : /* @__PURE__ */ React45.createElement(HangUpIcon, { key: "hangUp" })))), /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React44.createElement(Box, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ React44.createElement(AlertTriangleIcon, null)), /* @__PURE__ */ React44.createElement(Flex, { direction: "column", align: "start" }, /* @__PURE__ */ React44.createElement(Text, { variant: "lg", css: { c: "$alert_error_default" } }, "End Room for All"), /* @__PURE__ */ React44.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", mt: "$2" } }, "Warning: You can\u2019t undo this action")))
+  ), /* @__PURE__ */ React44.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: leaveRoom, "data-testid": "just_leave_btn" }, /* @__PURE__ */ React44.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React44.createElement(Box, null, /* @__PURE__ */ React44.createElement(ExitIcon, null)), /* @__PURE__ */ React44.createElement(Flex, { direction: "column", align: "start" }, /* @__PURE__ */ React44.createElement(Text, { variant: "lg" }, "Leave ", isStreamKit ? "Studio" : "Room"), /* @__PURE__ */ React44.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", mt: "$2" } }, "You can always rejoin later"))))))) : /* @__PURE__ */ React44.createElement(LeaveIconButton, { onClick: leaveRoom, variant: "danger", key: "LeaveRoom", "data-testid": "leave_room_btn" }, /* @__PURE__ */ React44.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React44.createElement(Box, null, isStreamKit ? /* @__PURE__ */ React44.createElement(Box, { css: { "@md": { transform: "rotate(180deg)" } } }, /* @__PURE__ */ React44.createElement(ExitIcon, null)) : /* @__PURE__ */ React44.createElement(HangUpIcon, { key: "hangUp" })))), /* @__PURE__ */ React44.createElement(
     Dialog.Root,
     {
       open: showEndRoomModal,
@@ -5795,7 +5789,7 @@ var LeaveRoom = () => {
         setShowEndRoomModal(value);
       }
     },
-    /* @__PURE__ */ React45.createElement(DialogContent, { title: "End Room", Icon: HangUpIcon }, /* @__PURE__ */ React45.createElement(DialogCheckbox, { id: "lockRoom", title: "Disable future joins", value: lockRoom, onChange: setLockRoom }), /* @__PURE__ */ React45.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React45.createElement(Button, { variant: "danger", onClick: endRoom, "data-testid": "lock_end_room" }, "End Room")))
+    /* @__PURE__ */ React44.createElement(DialogContent, { title: "End Room", Icon: HangUpIcon }, /* @__PURE__ */ React44.createElement(DialogCheckbox, { id: "lockRoom", title: "Disable future joins", value: lockRoom, onChange: setLockRoom }), /* @__PURE__ */ React44.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React44.createElement(Button, { variant: "danger", onClick: endRoom, "data-testid": "lock_end_room" }, "End Room")))
   ));
 };
 var LeaveIconButton = styled(IconButton, {
@@ -5827,7 +5821,7 @@ var MenuTriggerButton = styled(LeaveIconButton, {
 
 // src/Prebuilt/components/MetaActions.jsx
 init_define_process_env();
-import React46 from "react";
+import React45 from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom7, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
 import { BrbIcon, HandIcon as HandIcon2 } from "@100mslive/react-icons";
 var MetaActions = ({ isMobile = false, compact = false }) => {
@@ -5838,22 +5832,22 @@ var MetaActions = ({ isMobile = false, compact = false }) => {
   if (!isConnected || !isHandRaiseEnabled && !isBRBEnabled) {
     return null;
   }
-  return /* @__PURE__ */ React46.createElement(Flex, { align: "center", css: { gap: compact ? "$4" : "$8" } }, isHandRaiseEnabled && /* @__PURE__ */ React46.createElement(Tooltip, { title: `${!isHandRaised ? "Raise" : "Unraise"} hand` }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React45.createElement(Flex, { align: "center", css: { gap: compact ? "$4" : "$8" } }, isHandRaiseEnabled && /* @__PURE__ */ React45.createElement(Tooltip, { title: `${!isHandRaised ? "Raise" : "Unraise"} hand` }, /* @__PURE__ */ React45.createElement(
     IconButton_default,
     {
       onClick: toggleHandRaise,
       active: !isHandRaised,
       "data-testid": isMobile ? "raise_hand_btn_mobile" : "raise_hand_btn"
     },
-    /* @__PURE__ */ React46.createElement(HandIcon2, null)
-  )), isBRBEnabled && /* @__PURE__ */ React46.createElement(Tooltip, { title: isBRBOn ? `I'm back` : `I'll be right back` }, /* @__PURE__ */ React46.createElement(IconButton_default, { onClick: toggleBRB, active: !isBRBOn, "data-testid": "brb_btn" }, /* @__PURE__ */ React46.createElement(BrbIcon, null))));
+    /* @__PURE__ */ React45.createElement(HandIcon2, null)
+  )), isBRBEnabled && /* @__PURE__ */ React45.createElement(Tooltip, { title: isBRBOn ? `I'm back` : `I'll be right back` }, /* @__PURE__ */ React45.createElement(IconButton_default, { onClick: toggleBRB, active: !isBRBOn, "data-testid": "brb_btn" }, /* @__PURE__ */ React45.createElement(BrbIcon, null))));
 };
 var MetaActions_default = MetaActions;
 
 // src/Prebuilt/components/Header/StreamingHeader.jsx
 var StreamingHeader = () => {
   const isMobile = useMedia4(config.media.md);
-  return /* @__PURE__ */ React47.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React46.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React46.createElement(
     Flex,
     {
       align: "center",
@@ -5862,9 +5856,9 @@ var StreamingHeader = () => {
         left: "$10"
       }
     },
-    isMobile ? /* @__PURE__ */ React47.createElement(Flex, { align: "center", gap: 2 }, /* @__PURE__ */ React47.createElement(LeaveRoom, null), /* @__PURE__ */ React47.createElement(LiveStatus, null), /* @__PURE__ */ React47.createElement(RecordingStatus, null)) : null,
-    /* @__PURE__ */ React47.createElement(SpeakerTag, null)
-  ), /* @__PURE__ */ React47.createElement(
+    isMobile ? /* @__PURE__ */ React46.createElement(Flex, { align: "center", gap: 2 }, /* @__PURE__ */ React46.createElement(LeaveRoom, null), /* @__PURE__ */ React46.createElement(LiveStatus, null), /* @__PURE__ */ React46.createElement(RecordingStatus, null)) : null,
+    /* @__PURE__ */ React46.createElement(SpeakerTag, null)
+  ), /* @__PURE__ */ React46.createElement(
     Flex,
     {
       align: "center",
@@ -5874,14 +5868,14 @@ var StreamingHeader = () => {
         gap: "$4"
       }
     },
-    isMobile ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(EmojiReaction, null), /* @__PURE__ */ React47.createElement(MetaActions_default, { compact: true })) : /* @__PURE__ */ React47.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React47.createElement(StreamActions, null)),
-    /* @__PURE__ */ React47.createElement(ParticipantCount, null)
+    isMobile ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(EmojiReaction, null), /* @__PURE__ */ React46.createElement(MetaActions_default, { compact: true })) : /* @__PURE__ */ React46.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React46.createElement(StreamActions, null)),
+    /* @__PURE__ */ React46.createElement(ParticipantCount, null)
   ));
 };
 
 // src/Prebuilt/components/Header/Header.jsx
 var Header2 = () => {
-  return isStreamingKit() ? /* @__PURE__ */ React48.createElement(StreamingHeader, null) : /* @__PURE__ */ React48.createElement(ConferencingHeader, null);
+  return isStreamingKit() ? /* @__PURE__ */ React47.createElement(StreamingHeader, null) : /* @__PURE__ */ React47.createElement(ConferencingHeader, null);
 };
 
 // src/Prebuilt/components/PostLeave.jsx
@@ -5890,7 +5884,7 @@ var PostLeave = () => {
   const { showPreview, roomCode } = useHMSPrebuiltContext();
   const { roomId, role } = useParams2();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-  return /* @__PURE__ */ React49.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React49.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React49.createElement(Header2, null)), /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React48.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React48.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React48.createElement(Header2, null)), /* @__PURE__ */ React48.createElement(
     Flex,
     {
       justify: "center",
@@ -5898,9 +5892,9 @@ var PostLeave = () => {
       align: "center",
       css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
     },
-    /* @__PURE__ */ React49.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
-    /* @__PURE__ */ React49.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the ", getRoutePrefix() ? "stream" : "room"),
-    /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React48.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
+    /* @__PURE__ */ React48.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the ", getRoutePrefix() ? "stream" : "room"),
+    /* @__PURE__ */ React48.createElement(
       Text,
       {
         variant: "body1",
@@ -5912,10 +5906,10 @@ var PostLeave = () => {
         }
       },
       "Have a nice day",
-      previewPreference.name && /* @__PURE__ */ React49.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
+      previewPreference.name && /* @__PURE__ */ React48.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
       "!"
     ),
-    /* @__PURE__ */ React49.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React49.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React48.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React48.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React48.createElement(
       Button,
       {
         onClick: () => {
@@ -5927,8 +5921,8 @@ var PostLeave = () => {
         },
         "data-testid": "join_again_btn"
       },
-      /* @__PURE__ */ React49.createElement(ExitIcon2, null),
-      /* @__PURE__ */ React49.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
+      /* @__PURE__ */ React48.createElement(ExitIcon2, null),
+      /* @__PURE__ */ React48.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
     ))
   ));
 };
@@ -5936,19 +5930,19 @@ var PostLeave_default = PostLeave;
 
 // src/Prebuilt/components/Preview/PreviewContainer.jsx
 init_define_process_env();
-import React68 from "react";
+import React69 from "react";
 import { useParams as useParams3 } from "react-router-dom";
 import { useSearchParam as useSearchParam4 } from "react-use";
 import { HMSRoomState as HMSRoomState4, selectRoomState as selectRoomState4, useHMSStore as useHMSStore37 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/layouts/SidePane.jsx
 init_define_process_env();
-import React57 from "react";
+import React56 from "react";
 import { selectAppData as selectAppData5, useHMSStore as useHMSStore30 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Chat/Chat.jsx
 init_define_process_env();
-import React54, { useCallback as useCallback18, useEffect as useEffect27, useRef as useRef11, useState as useState26 } from "react";
+import React53, { useCallback as useCallback18, useEffect as useEffect27, useRef as useRef11, useState as useState26 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes9,
   selectHMSMessagesCount,
@@ -5963,7 +5957,7 @@ import { ChevronDownIcon as ChevronDownIcon6, CrossIcon as CrossIcon7, PinIcon a
 
 // src/Prebuilt/components/Chat/ChatBody.jsx
 init_define_process_env();
-import React50, { Fragment as Fragment6, useCallback as useCallback15, useEffect as useEffect24, useLayoutEffect, useRef as useRef8, useState as useState22 } from "react";
+import React49, { Fragment as Fragment6, useCallback as useCallback15, useEffect as useEffect24, useLayoutEffect, useRef as useRef8, useState as useState22 } from "react";
 import { useInView } from "react-intersection-observer";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
@@ -6027,7 +6021,7 @@ var formatTime = (date) => {
   return `${hours}:${mins} ${suffix}`;
 };
 var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(
     Flex,
     {
       align: "center",
@@ -6039,16 +6033,16 @@ var MessageTypeContainer = ({ left, right }) => {
         r: "$0"
       }
     },
-    left && /* @__PURE__ */ React50.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
-    left && right && /* @__PURE__ */ React50.createElement(Box, { css: { borderLeft: "1px solid $on_surface_low", mx: "$4", h: "$8" } }),
-    right && /* @__PURE__ */ React50.createElement(SenderName, { as: "span", variant: "tiny" }, right)
+    left && /* @__PURE__ */ React49.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
+    left && right && /* @__PURE__ */ React49.createElement(Box, { css: { borderLeft: "1px solid $on_surface_low", mx: "$4", h: "$8" } }),
+    right && /* @__PURE__ */ React49.createElement(SenderName, { as: "span", variant: "tiny" }, right)
   );
 };
 var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
   const peerName = useHMSStore23(selectPeerNameByID2(receiver));
   const localPeerRoleName = useHMSStore23(selectLocalPeerRoleName4);
   if (receiver) {
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React49.createElement(
       MessageTypeContainer,
       {
         left: hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ""}` : "TO YOU",
@@ -6057,7 +6051,7 @@ var MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
     );
   }
   if (roles && roles.length) {
-    return /* @__PURE__ */ React50.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
+    return /* @__PURE__ */ React49.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
   }
   return null;
 };
@@ -6071,10 +6065,10 @@ var Link3 = styled("a", {
 });
 var AnnotisedMessage = ({ message }) => {
   if (!message) {
-    return /* @__PURE__ */ React50.createElement(Fragment6, null);
+    return /* @__PURE__ */ React49.createElement(Fragment6, null);
   }
-  return /* @__PURE__ */ React50.createElement(Fragment6, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React50.createElement(Link3, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
+  return /* @__PURE__ */ React49.createElement(Fragment6, null, message.trim().split(/(\s)/).map(
+    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React49.createElement(Link3, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
   ));
 };
 var getMessageType = ({ roles, receiver }) => {
@@ -6085,14 +6079,14 @@ var getMessageType = ({ roles, receiver }) => {
 };
 var ChatActions = ({ onPin }) => {
   const [open, setOpen] = useState22(false);
-  return /* @__PURE__ */ React50.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React50.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React50.createElement(IconButton, null, /* @__PURE__ */ React50.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React50.createElement(HorizontalMenuIcon, null)))), /* @__PURE__ */ React50.createElement(Dropdown.Portal, null, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React49.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React49.createElement(IconButton, null, /* @__PURE__ */ React49.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React49.createElement(HorizontalMenuIcon, null)))), /* @__PURE__ */ React49.createElement(Dropdown.Portal, null, /* @__PURE__ */ React49.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: "end",
       css: { width: "$48", backgroundColor: "$surface_bright", py: "$0" }
     },
-    /* @__PURE__ */ React50.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React50.createElement(PinIcon, null), /* @__PURE__ */ React50.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
+    /* @__PURE__ */ React49.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ React49.createElement(PinIcon, null), /* @__PURE__ */ React49.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
   )));
 };
 var SenderName = styled(Text, {
@@ -6102,7 +6096,7 @@ var SenderName = styled(Text, {
   maxWidth: "24ch",
   minWidth: 0
 });
-var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
+var ChatMessage = React49.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
   const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
   const rowRef = useRef8(null);
   useEffect24(() => {
@@ -6123,7 +6117,7 @@ var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPi
       hmsActions.setMessageRead(true, message.id);
     }
   }, [message.read, hmsActions, inView, message.id]);
-  return /* @__PURE__ */ React50.createElement(Box, { ref, as: "div", css: { mb: "$10", pr: "$10" }, style }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(Box, { ref, as: "div", css: { mb: "$10", pr: "$10" }, style }, /* @__PURE__ */ React49.createElement(
     Flex,
     {
       ref: rowRef,
@@ -6139,7 +6133,7 @@ var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPi
       key: message.time,
       "data-testid": "chat_msg"
     },
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React49.createElement(
       Text,
       {
         css: {
@@ -6152,7 +6146,7 @@ var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPi
         },
         as: "div"
       },
-      /* @__PURE__ */ React50.createElement(Flex, { align: "center" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React50.createElement(SenderName, { as: "span" }, message.senderName || "Anonymous") : /* @__PURE__ */ React50.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React50.createElement(SenderName, { as: "span" }, message.senderName)), /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React49.createElement(Flex, { align: "center" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React49.createElement(SenderName, { as: "span" }, message.senderName || "Anonymous") : /* @__PURE__ */ React49.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React49.createElement(SenderName, { as: "span" }, message.senderName)), /* @__PURE__ */ React49.createElement(
         Text,
         {
           as: "span",
@@ -6165,7 +6159,7 @@ var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPi
         },
         formatTime(message.time)
       )),
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React49.createElement(
         MessageType,
         {
           hasCurrentUserSent: message.sender === localPeerId,
@@ -6173,9 +6167,9 @@ var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPi
           roles: message.recipientRoles
         }
       ),
-      showPinAction && /* @__PURE__ */ React50.createElement(ChatActions, { onPin })
+      showPinAction && /* @__PURE__ */ React49.createElement(ChatActions, { onPin })
     ),
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React49.createElement(
       Text,
       {
         variant: "body2",
@@ -6188,11 +6182,11 @@ var ChatMessage = React50.memo(({ index, style = {}, message, setRowHeight, onPi
         },
         onClick: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ React50.createElement(AnnotisedMessage, { message: message.message })
+      /* @__PURE__ */ React49.createElement(AnnotisedMessage, { message: message.message })
     )
   ));
 });
-var ChatList = React50.forwardRef(
+var ChatList = React49.forwardRef(
   ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
@@ -6200,7 +6194,7 @@ var ChatList = React50.forwardRef(
         scrollToBottom(1);
       }
     }, [listRef]);
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React49.createElement(
       VariableSizeList,
       {
         ref: listRef,
@@ -6212,7 +6206,7 @@ var ChatList = React50.forwardRef(
           overflowX: "hidden"
         }
       },
-      ({ index, style }) => /* @__PURE__ */ React50.createElement(
+      ({ index, style }) => /* @__PURE__ */ React49.createElement(
         ChatMessage,
         {
           style,
@@ -6226,7 +6220,7 @@ var ChatList = React50.forwardRef(
     );
   }
 );
-var VirtualizedChatMessages = React50.forwardRef(({ messages, scrollToBottom }, listRef) => {
+var VirtualizedChatMessages = React49.forwardRef(({ messages, scrollToBottom }, listRef) => {
   const rowHeights = useRef8({});
   function getRowHeight(index) {
     return rowHeights.current[index] + 16 || 72;
@@ -6238,7 +6232,7 @@ var VirtualizedChatMessages = React50.forwardRef(({ messages, scrollToBottom },
     },
     [listRef]
   );
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(
     Box,
     {
       css: {
@@ -6247,14 +6241,14 @@ var VirtualizedChatMessages = React50.forwardRef(({ messages, scrollToBottom },
       },
       as: "div"
     },
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React49.createElement(
       AutoSizer,
       {
         style: {
           width: "90%"
         }
       },
-      ({ height, width }) => /* @__PURE__ */ React50.createElement(
+      ({ height, width }) => /* @__PURE__ */ React49.createElement(
         ChatList,
         {
           width,
@@ -6269,11 +6263,11 @@ var VirtualizedChatMessages = React50.forwardRef(({ messages, scrollToBottom },
     )
   );
 });
-var ChatBody = React50.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+var ChatBody = React49.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
   const storeMessageSelector = role ? selectMessagesByRole(role) : peerId ? selectMessagesByPeerID(peerId) : selectHMSMessages;
   const messages = useHMSStore23(storeMessageSelector) || [];
   if (messages.length === 0) {
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React49.createElement(
       Flex,
       {
         css: {
@@ -6285,15 +6279,15 @@ var ChatBody = React50.forwardRef(({ role, peerId, scrollToBottom }, listRef) =>
         align: "center",
         justify: "center"
       },
-      /* @__PURE__ */ React50.createElement(Text, null, "There are no messages here")
+      /* @__PURE__ */ React49.createElement(Text, null, "There are no messages here")
     );
   }
-  return /* @__PURE__ */ React50.createElement(Fragment6, null, /* @__PURE__ */ React50.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
+  return /* @__PURE__ */ React49.createElement(Fragment6, null, /* @__PURE__ */ React49.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
 });
 
 // src/Prebuilt/components/Chat/ChatFooter.jsx
 init_define_process_env();
-import React51, { useCallback as useCallback17, useEffect as useEffect26, useRef as useRef10, useState as useState23 } from "react";
+import React50, { useCallback as useCallback17, useEffect as useEffect26, useRef as useRef10, useState as useState23 } from "react";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import { useHMSActions as useHMSActions21 } from "@100mslive/react-sdk";
@@ -6371,7 +6365,7 @@ var TextArea = styled("textarea", {
 function EmojiPicker({ onSelect }) {
   const [showEmoji, setShowEmoji] = useState23(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React51.createElement(Popover2.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React51.createElement(Popover2.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React51.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React51.createElement(EmojiIcon2, null))), /* @__PURE__ */ React51.createElement(Popover2.Portal, null, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement(Popover2.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React50.createElement(Popover2.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React50.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React50.createElement(EmojiIcon2, null))), /* @__PURE__ */ React50.createElement(Popover2.Portal, null, /* @__PURE__ */ React50.createElement(
     Popover2.Content,
     {
       alignOffset: -40,
@@ -6381,7 +6375,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       Box,
       {
         css: {
@@ -6390,7 +6384,7 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ React51.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ React50.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
@@ -6431,7 +6425,7 @@ var ChatFooter = ({ role, peerId, onSend, children }) => {
       setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
     };
   }, [setDraftMessage]);
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement(
     Flex,
     {
       align: "center",
@@ -6446,7 +6440,7 @@ var ChatFooter = ({ role, peerId, onSend, children }) => {
       }
     },
     children,
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       TextArea,
       {
         placeholder: "Write something here",
@@ -6467,7 +6461,7 @@ var ChatFooter = ({ role, peerId, onSend, children }) => {
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -6475,26 +6469,26 @@ var ChatFooter = ({ role, peerId, onSend, children }) => {
         }
       }
     ),
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       IconButton,
       {
         onClick: sendMessage,
         css: { ml: "auto", height: "max-content", mr: "$4" },
         "data-testid": "send_msg_btn"
       },
-      /* @__PURE__ */ React51.createElement(SendIcon, null)
+      /* @__PURE__ */ React50.createElement(SendIcon, null)
     )
   );
 };
 
 // src/Prebuilt/components/Chat/ChatHeader.jsx
 init_define_process_env();
-import React53, { useState as useState25 } from "react";
+import React52, { useState as useState25 } from "react";
 import { ChevronDownIcon as ChevronDownIcon5, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelector.jsx
 init_define_process_env();
-import React52, { Fragment as Fragment7, useMemo as useMemo5, useState as useState24 } from "react";
+import React51, { Fragment as Fragment7, useMemo as useMemo5, useState as useState24 } from "react";
 import { useMeasure as useMeasure2 } from "react-use";
 import { FixedSizeList as FixedSizeList2 } from "react-window";
 import {
@@ -6506,17 +6500,17 @@ import {
 } from "@100mslive/react-sdk";
 import { CheckIcon as CheckIcon4 } from "@100mslive/react-icons";
 var ChatDotIcon = () => {
-  return /* @__PURE__ */ React52.createElement(Box, { css: { size: "$6", bg: "$primary_default", mx: "$2", r: "$round" } });
+  return /* @__PURE__ */ React51.createElement(Box, { css: { size: "$6", bg: "$primary_default", mx: "$2", r: "$round" } });
 };
 var SelectorItem = ({ value, active, onClick, unreadCount }) => {
-  return /* @__PURE__ */ React52.createElement(Dropdown.Item, { "data-testid": "chat_members", css: { align: "center", px: "$10" }, onClick }, /* @__PURE__ */ React52.createElement(Text, { variant: "sm" }, value), /* @__PURE__ */ React52.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React52.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React52.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React52.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React52.createElement(CheckIcon4, { width: 16, height: 16 })));
+  return /* @__PURE__ */ React51.createElement(Dropdown.Item, { "data-testid": "chat_members", css: { align: "center", px: "$10" }, onClick }, /* @__PURE__ */ React51.createElement(Text, { variant: "sm" }, value), /* @__PURE__ */ React51.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React51.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React51.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React51.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React51.createElement(CheckIcon4, { width: 16, height: 16 })));
 };
-var SelectorHeader = React52.memo(({ children }) => {
-  return /* @__PURE__ */ React52.createElement(Box, { css: { flexShrink: 0 } }, /* @__PURE__ */ React52.createElement(HorizontalDivider, { space: 4 }), /* @__PURE__ */ React52.createElement(Text, { variant: "md", css: { p: "$4 $10", fontWeight: "$semiBold" } }, children));
+var SelectorHeader = React51.memo(({ children }) => {
+  return /* @__PURE__ */ React51.createElement(Box, { css: { flexShrink: 0 } }, /* @__PURE__ */ React51.createElement(HorizontalDivider, { space: 4 }), /* @__PURE__ */ React51.createElement(Text, { variant: "md", css: { p: "$4 $10", fontWeight: "$semiBold" } }, children));
 });
-var Everyone = React52.memo(({ onSelect, active }) => {
+var Everyone = React51.memo(({ onSelect, active }) => {
   const unreadCount = useHMSStore25(selectUnreadHMSMessagesCount);
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React51.createElement(
     SelectorItem,
     {
       value: "Everyone",
@@ -6528,9 +6522,9 @@ var Everyone = React52.memo(({ onSelect, active }) => {
     }
   );
 });
-var RoleItem = React52.memo(({ onSelect, role, active }) => {
+var RoleItem = React51.memo(({ onSelect, role, active }) => {
   const unreadCount = useHMSStore25(selectMessagesUnreadCountByRole(role));
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React51.createElement(
     SelectorItem,
     {
       value: role,
@@ -6544,7 +6538,7 @@ var RoleItem = React52.memo(({ onSelect, role, active }) => {
 });
 var PeerItem = ({ onSelect, peerId, name, active }) => {
   const unreadCount = useHMSStore25(selectMessagesUnreadCountByPeerID(peerId));
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React51.createElement(
     SelectorItem,
     {
       value: name,
@@ -6567,17 +6561,17 @@ var VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchVa
     [peers, searchValue]
   );
   const listItems = useMemo5(() => {
-    const selectItems = [/* @__PURE__ */ React52.createElement(Everyone, { onSelect, active: !selectedRole && !selectedPeerId })];
-    roles.length > 0 && selectItems.push(/* @__PURE__ */ React52.createElement(SelectorHeader, null, "Roles"));
+    const selectItems = [/* @__PURE__ */ React51.createElement(Everyone, { onSelect, active: !selectedRole && !selectedPeerId })];
+    roles.length > 0 && selectItems.push(/* @__PURE__ */ React51.createElement(SelectorHeader, null, "Roles"));
     roles.forEach(
       (userRole) => selectItems.push(
-        /* @__PURE__ */ React52.createElement(RoleItem, { key: userRole, active: selectedRole === userRole, role: userRole, onSelect })
+        /* @__PURE__ */ React51.createElement(RoleItem, { key: userRole, active: selectedRole === userRole, role: userRole, onSelect })
       )
     );
-    filteredPeers.length > 0 && selectItems.push(/* @__PURE__ */ React52.createElement(SelectorHeader, null, "Participants"));
+    filteredPeers.length > 0 && selectItems.push(/* @__PURE__ */ React51.createElement(SelectorHeader, null, "Participants"));
     filteredPeers.forEach(
       (peer) => selectItems.push(
-        /* @__PURE__ */ React52.createElement(
+        /* @__PURE__ */ React51.createElement(
           PeerItem,
           {
             key: peer.id,
@@ -6591,12 +6585,12 @@ var VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchVa
     );
     return selectItems;
   }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
-  return /* @__PURE__ */ React52.createElement(Dropdown.Group, { ref, css: { height: "$64", overflowY: "auto" } }, /* @__PURE__ */ React52.createElement(FixedSizeList2, { itemSize: 52, itemCount: listItems.length, width, height }, ({ index, style }) => /* @__PURE__ */ React52.createElement("div", { style, key: index }, listItems[index])));
+  return /* @__PURE__ */ React51.createElement(Dropdown.Group, { ref, css: { height: "$64", overflowY: "auto" } }, /* @__PURE__ */ React51.createElement(FixedSizeList2, { itemSize: 52, itemCount: listItems.length, width, height }, ({ index, style }) => /* @__PURE__ */ React51.createElement("div", { style, key: index }, listItems[index])));
 };
 var ChatSelector = ({ role, peerId, onSelect }) => {
   const peers = useHMSStore25(selectRemotePeers);
   const [search, setSearch] = useState24("");
-  return /* @__PURE__ */ React52.createElement(Fragment7, null, peers.length > 0 && /* @__PURE__ */ React52.createElement(Box, { css: { px: "$8" } }, /* @__PURE__ */ React52.createElement(ParticipantSearch, { onSearch: setSearch, placeholder: "Search participants" })), /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React51.createElement(Fragment7, null, peers.length > 0 && /* @__PURE__ */ React51.createElement(Box, { css: { px: "$8" } }, /* @__PURE__ */ React51.createElement(ParticipantSearch, { onSearch: setSearch, placeholder: "Search participants" })), /* @__PURE__ */ React51.createElement(
     VirtualizedSelectItemList,
     {
       selectedRole: role,
@@ -6609,10 +6603,10 @@ var ChatSelector = ({ role, peerId, onSelect }) => {
 };
 
 // src/Prebuilt/components/Chat/ChatHeader.jsx
-var ChatHeader = React53.memo(({ selection, selectorOpen, onToggle, onSelect, role, peerId }) => {
+var ChatHeader = React52.memo(({ selection, selectorOpen, onToggle, onSelect, role, peerId }) => {
   const [open, setOpen] = useState25(false);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Flex,
     {
       onClick: onToggle,
@@ -6623,8 +6617,8 @@ var ChatHeader = React53.memo(({ selection, selectorOpen, onToggle, onSelect, ro
         mb: "$2"
       }
     },
-    /* @__PURE__ */ React53.createElement(Text, { variant: "h6" }, "Chat "),
-    /* @__PURE__ */ React53.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React52.createElement(Text, { variant: "h6" }, "Chat "),
+    /* @__PURE__ */ React52.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React52.createElement(
       Dropdown.Trigger,
       {
         asChild: true,
@@ -6637,8 +6631,8 @@ var ChatHeader = React53.memo(({ selection, selectorOpen, onToggle, onSelect, ro
         },
         tabIndex: 0
       },
-      /* @__PURE__ */ React53.createElement(Flex, { align: "center" }, /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: __spreadValues({}, textEllipsis(80)) }, selection), /* @__PURE__ */ React53.createElement(Box, { css: { ml: "$2", color: "$on_surface_low" } }, open ? /* @__PURE__ */ React53.createElement(ChevronUpIcon5, { width: 14, height: 14 }) : /* @__PURE__ */ React53.createElement(ChevronDownIcon5, { width: 14, height: 14 })))
-    ), /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React52.createElement(Flex, { align: "center" }, /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: __spreadValues({}, textEllipsis(80)) }, selection), /* @__PURE__ */ React52.createElement(Box, { css: { ml: "$2", color: "$on_surface_low" } }, open ? /* @__PURE__ */ React52.createElement(ChevronUpIcon5, { width: 14, height: 14 }) : /* @__PURE__ */ React52.createElement(ChevronDownIcon5, { width: 14, height: 14 })))
+    ), /* @__PURE__ */ React52.createElement(
       Dropdown.Content,
       {
         css: {
@@ -6649,9 +6643,9 @@ var ChatHeader = React53.memo(({ selection, selectorOpen, onToggle, onSelect, ro
         align: "start",
         sideOffset: 8
       },
-      /* @__PURE__ */ React53.createElement(ChatSelector, { onSelect, role, peerId })
+      /* @__PURE__ */ React52.createElement(ChatSelector, { onSelect, role, peerId })
     )),
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React52.createElement(
       IconButton,
       {
         css: { ml: "auto" },
@@ -6661,7 +6655,7 @@ var ChatHeader = React53.memo(({ selection, selectorOpen, onToggle, onSelect, ro
         },
         "data-testid": "close_chat"
       },
-      /* @__PURE__ */ React53.createElement(CrossIcon6, null)
+      /* @__PURE__ */ React52.createElement(CrossIcon6, null)
     )
   );
 });
@@ -6684,15 +6678,15 @@ var useUnreadCount = ({ role, peerId }) => {
 var PinnedMessage = ({ clearPinnedMessage }) => {
   const permissions = useHMSStore27(selectPermissions6);
   const pinnedMessage = useHMSStore27(selectSessionStore2(SESSION_STORE_KEY.PINNED_MESSAGE));
-  return pinnedMessage ? /* @__PURE__ */ React54.createElement(
+  return pinnedMessage ? /* @__PURE__ */ React53.createElement(
     Flex,
     {
       css: { p: "$8", color: "$on_surface_medium", bg: "$surface_bright", r: "$1" },
       align: "center",
       justify: "between"
     },
-    /* @__PURE__ */ React54.createElement(Box, null, /* @__PURE__ */ React54.createElement(PinIcon2, null)),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React53.createElement(Box, null, /* @__PURE__ */ React53.createElement(PinIcon2, null)),
+    /* @__PURE__ */ React53.createElement(
       Box,
       {
         css: {
@@ -6703,9 +6697,9 @@ var PinnedMessage = ({ clearPinnedMessage }) => {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React54.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React54.createElement(AnnotisedMessage, { message: pinnedMessage }))
+      /* @__PURE__ */ React53.createElement(Text, { variant: "sm" }, /* @__PURE__ */ React53.createElement(AnnotisedMessage, { message: pinnedMessage }))
     ),
-    permissions.removeOthers && /* @__PURE__ */ React54.createElement(IconButton_default, { onClick: () => clearPinnedMessage() }, /* @__PURE__ */ React54.createElement(CrossIcon7, null))
+    permissions.removeOthers && /* @__PURE__ */ React53.createElement(IconButton_default, { onClick: () => clearPinnedMessage() }, /* @__PURE__ */ React53.createElement(CrossIcon7, null))
   ) : null;
 };
 var Chat = () => {
@@ -6748,7 +6742,7 @@ var Chat = () => {
     },
     [hmsActions, messagesCount]
   );
-  return /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React53.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React53.createElement(
     ChatHeader,
     {
       selectorOpen: isSelectorOpen,
@@ -6768,14 +6762,14 @@ var Chat = () => {
         setSelectorOpen((value) => !value);
       }
     }
-  ), /* @__PURE__ */ React54.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }), /* @__PURE__ */ React54.createElement(ChatBody, { role: chatOptions.role, peerId: chatOptions.peerId, ref: listRef, scrollToBottom }), /* @__PURE__ */ React54.createElement(ChatFooter, { role: chatOptions.role, peerId: chatOptions.peerId, onSend: () => scrollToBottom(1) }, !isSelectorOpen && /* @__PURE__ */ React54.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })));
+  ), /* @__PURE__ */ React53.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }), /* @__PURE__ */ React53.createElement(ChatBody, { role: chatOptions.role, peerId: chatOptions.peerId, ref: listRef, scrollToBottom }), /* @__PURE__ */ React53.createElement(ChatFooter, { role: chatOptions.role, peerId: chatOptions.peerId, onSend: () => scrollToBottom(1) }, !isSelectorOpen && /* @__PURE__ */ React53.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })));
 };
 var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
   const unreadCount = useUnreadCount({ role, peerId });
   if (!unreadCount) {
     return null;
   }
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React53.createElement(
     Flex,
     {
       justify: "center",
@@ -6786,7 +6780,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React53.createElement(
       Button,
       {
         onClick: () => {
@@ -6795,14 +6789,14 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         css: { p: "$2 $4", "& > svg": { ml: "$4" } }
       },
       "New Messages",
-      /* @__PURE__ */ React54.createElement(ChevronDownIcon6, { width: 16, height: 16 })
+      /* @__PURE__ */ React53.createElement(ChevronDownIcon6, { width: 16, height: 16 })
     )
   );
 };
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
 init_define_process_env();
-import React56, { Fragment as Fragment9, useState as useState28 } from "react";
+import React55, { Fragment as Fragment9, useState as useState28 } from "react";
 import { selectPermissions as selectPermissions7, useHMSStore as useHMSStore29, useRecordingStreaming as useRecordingStreaming7 } from "@100mslive/react-sdk";
 import { ColoredHandIcon, CrossIcon as CrossIcon8, GoLiveIcon as GoLiveIcon4 } from "@100mslive/react-icons";
 
@@ -6811,7 +6805,7 @@ var rtmp_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABlCAYAAA
 
 // src/Prebuilt/components/Streaming/HLSStreaming.jsx
 init_define_process_env();
-import React55, { Fragment as Fragment8, useCallback as useCallback19, useEffect as useEffect28, useState as useState27 } from "react";
+import React54, { Fragment as Fragment8, useCallback as useCallback19, useEffect as useEffect28, useState as useState27 } from "react";
 import { selectRoomID as selectRoomID2, useHMSActions as useHMSActions23, useHMSStore as useHMSStore28, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
@@ -6831,7 +6825,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: "Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.",
-        icon: /* @__PURE__ */ React55.createElement(SupportIcon, null)
+        icon: /* @__PURE__ */ React54.createElement(SupportIcon, null)
       };
       break;
     }
@@ -6839,7 +6833,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: "HLS Viewer",
         content: "Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.",
-        icon: /* @__PURE__ */ React55.createElement(EyeOpenIcon2, null)
+        icon: /* @__PURE__ */ React54.createElement(EyeOpenIcon2, null)
       };
       break;
     }
@@ -6847,7 +6841,7 @@ var getCardData = (roleName, roomId) => {
       data3 = {
         title: formattedRoleName,
         content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
-        icon: /* @__PURE__ */ React55.createElement(WrenchIcon2, null),
+        icon: /* @__PURE__ */ React54.createElement(WrenchIcon2, null),
         order: 1
       };
   }
@@ -6856,7 +6850,7 @@ var getCardData = (roleName, roomId) => {
 };
 var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
   const [copied, setCopied] = useState27(false);
-  return isHLSRunning ? /* @__PURE__ */ React55.createElement(
+  return isHLSRunning ? /* @__PURE__ */ React54.createElement(
     Box,
     {
       key: title,
@@ -6867,9 +6861,9 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         borderRadius: "$2"
       }
     },
-    /* @__PURE__ */ React55.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React55.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-    /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React54.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ React54.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+    /* @__PURE__ */ React54.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+    /* @__PURE__ */ React54.createElement(
       Button,
       {
         variant: "standard",
@@ -6881,7 +6875,7 @@ var Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
         css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
         icon: true
       },
-      copied ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, "Link copied!") : /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+      copied ? /* @__PURE__ */ React54.createElement(React54.Fragment, null, "Link copied!") : /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
     )
   ) : null;
 };
@@ -6891,7 +6885,7 @@ var HLSStreaming = ({ onBack }) => {
   const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
   const { isHLSRunning } = useRecordingStreaming6();
   const [showLinks, setShowLinks] = useState27(false);
-  return !showLinks ? /* @__PURE__ */ React55.createElement(Container3, { rounded: true }, /* @__PURE__ */ React55.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React55.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon3, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React55.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React55.createElement(StartHLS, null)) : /* @__PURE__ */ React55.createElement(Container3, { rounded: true }, /* @__PURE__ */ React55.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React55.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React55.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+  return !showLinks ? /* @__PURE__ */ React54.createElement(Container3, { rounded: true }, /* @__PURE__ */ React54.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ React54.createElement(ContentBody, { title: "HLS Streaming", Icon: GoLiveIcon3, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ React54.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ React54.createElement(StartHLS, null)) : /* @__PURE__ */ React54.createElement(Container3, { rounded: true }, /* @__PURE__ */ React54.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ React54.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
 };
 var StartHLS = () => {
   const [record, setRecord] = useState27(false);
@@ -6917,7 +6911,7 @@ var StartHLS = () => {
     }),
     [hmsActions, record, isHLSStarted, setHLSStarted]
   );
-  return /* @__PURE__ */ React55.createElement(Fragment8, null, /* @__PURE__ */ React55.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React55.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React55.createElement(ErrorText, { error }), /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React54.createElement(Fragment8, null, /* @__PURE__ */ React54.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ React54.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React54.createElement(ErrorText, { error }), /* @__PURE__ */ React54.createElement(
     Button,
     {
       "data-testid": "start_hls",
@@ -6926,9 +6920,9 @@ var StartHLS = () => {
       onClick: () => startHLS(),
       disabled: isHLSStarted
     },
-    isHLSStarted ? /* @__PURE__ */ React55.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React55.createElement(GoLiveIcon3, null),
+    isHLSStarted ? /* @__PURE__ */ React54.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React54.createElement(GoLiveIcon3, null),
     isHLSStarted ? "Starting stream..." : "Go Live"
-  )), /* @__PURE__ */ React55.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React55.createElement(Text, null, /* @__PURE__ */ React55.createElement(InfoIcon2, { width: 16, height: 16 })), /* @__PURE__ */ React55.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
+  )), /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React54.createElement(Text, null, /* @__PURE__ */ React54.createElement(InfoIcon2, { width: 16, height: 16 })), /* @__PURE__ */ React54.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
 };
 var EndHLS = ({ setShowLinks }) => {
   const hmsActions = useHMSActions23();
@@ -6940,7 +6934,7 @@ var EndHLS = ({ setShowLinks }) => {
       setInProgress(false);
     }
   }, [inProgress, isHLSRunning]);
-  return /* @__PURE__ */ React55.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React55.createElement(ErrorText, { error }), /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React54.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ React54.createElement(ErrorText, { error }), /* @__PURE__ */ React54.createElement(
     Button,
     {
       "data-testid": "stop_hls",
@@ -6959,9 +6953,9 @@ var EndHLS = ({ setShowLinks }) => {
         }
       })
     },
-    /* @__PURE__ */ React55.createElement(EndStreamIcon2, null),
+    /* @__PURE__ */ React54.createElement(EndStreamIcon2, null),
     "End Stream"
-  ), /* @__PURE__ */ React55.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React55.createElement(PeopleIcon3, null), " Invite People"));
+  ), /* @__PURE__ */ React54.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ React54.createElement(PeopleIcon3, null), " Invite People"));
 };
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
@@ -6975,7 +6969,7 @@ var StreamingLanding = () => {
     toggleStreaming();
     return null;
   }
-  return /* @__PURE__ */ React56.createElement(Fragment9, null, /* @__PURE__ */ React56.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React55.createElement(Fragment9, null, /* @__PURE__ */ React55.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ React55.createElement(
     Box,
     {
       css: {
@@ -6985,8 +6979,8 @@ var StreamingLanding = () => {
         r: "$round"
       }
     },
-    /* @__PURE__ */ React56.createElement(ColoredHandIcon, { width: 40, height: 40 })
-  ), /* @__PURE__ */ React56.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React56.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React56.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React56.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React56.createElement(CrossIcon8, null))), /* @__PURE__ */ React56.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React55.createElement(ColoredHandIcon, { width: 40, height: 40 })
+  ), /* @__PURE__ */ React55.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ React55.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ React55.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ React55.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ React55.createElement(CrossIcon8, null))), /* @__PURE__ */ React55.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ React55.createElement(
     StreamCard,
     {
       testId: "hls_stream",
@@ -6996,7 +6990,7 @@ var StreamingLanding = () => {
       onClick: () => setShowHLS(true),
       Icon: GoLiveIcon4
     }
-  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React56.createElement(
+  ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ React55.createElement(
     StreamCard,
     {
       testId: "rtmp_stream",
@@ -7008,7 +7002,7 @@ var StreamingLanding = () => {
       },
       imgSrc: rtmp_default
     }
-  ), showHLS && /* @__PURE__ */ React56.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React56.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+  ), showHLS && /* @__PURE__ */ React55.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ React55.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
 };
 
 // src/Prebuilt/layouts/SidePane.jsx
@@ -7025,7 +7019,7 @@ var SidePane = ({ css: css2 = {} }) => {
   if (!ViewComponent) {
     return null;
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React56.createElement(
     Box,
     {
       css: __spreadProps(__spreadValues({
@@ -7049,14 +7043,14 @@ var SidePane = ({ css: css2 = {} }) => {
         }, css2["@lg"] || {})
       })
     },
-    /* @__PURE__ */ React57.createElement(ViewComponent, null)
+    /* @__PURE__ */ React56.createElement(ViewComponent, null)
   );
 };
 var SidePane_default = SidePane;
 
 // src/Prebuilt/components/Preview/PreviewJoin.jsx
 init_define_process_env();
-import React67, { Fragment as Fragment12, Suspense, useCallback as useCallback22, useEffect as useEffect31, useState as useState31 } from "react";
+import React68, { Fragment as Fragment12, Suspense, useCallback as useCallback22, useEffect as useEffect31, useState as useState31 } from "react";
 import {
   HMSRoomState as HMSRoomState3,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4,
@@ -7087,6 +7081,7 @@ import { CameraFlipIcon, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, Vide
 
 // src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx
 init_define_process_env();
+import React57 from "react";
 import { VerticalMenuIcon as VerticalMenuIcon3 } from "@100mslive/react-icons";
 var IconSection = styled(IconButton_default, {
   w: "unset",
@@ -7130,7 +7125,7 @@ var IconButtonWithOptions = ({
 }) => {
   const bgCss = { backgroundColor: active ? "$transparent" : "$secondary_dim" };
   const iconCss = { color: active ? "$on_surface_high" : "$on_primary_high" };
-  return /* @__PURE__ */ React.createElement(Flex, null, /* @__PURE__ */ React.createElement(IconSection, { css: bgCss, onClick, key }, /* @__PURE__ */ React.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React.createElement(Dropdown.Root, null, /* @__PURE__ */ React.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React.createElement(Box, { css: iconCss }, /* @__PURE__ */ React.createElement(VerticalMenuIcon3, null))))), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React57.createElement(Flex, null, /* @__PURE__ */ React57.createElement(IconSection, { css: bgCss, onClick, key }, /* @__PURE__ */ React57.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React57.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React57.createElement(Dropdown.Root, null, /* @__PURE__ */ React57.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React57.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React57.createElement(Box, { css: iconCss }, /* @__PURE__ */ React57.createElement(VerticalMenuIcon3, null))))), /* @__PURE__ */ React57.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -7142,7 +7137,7 @@ var IconButtonWithOptions = ({
         border: "none"
       }
     },
-    options.map((option, index) => /* @__PURE__ */ React.createElement(
+    options.map((option, index) => /* @__PURE__ */ React57.createElement(
       Dropdown.Item,
       {
         key: option.title,
@@ -7243,8 +7238,9 @@ var AudioVideoToggle = () => {
 
 // src/Prebuilt/components/Chip.jsx
 init_define_process_env();
+import React59 from "react";
 var Chip = ({
-  icon = /* @__PURE__ */ React.createElement(React.Fragment, null),
+  icon = /* @__PURE__ */ React59.createElement(React59.Fragment, null),
   content = "",
   backgroundColor = "$surface_default",
   textColor = "$on_surface_high",
@@ -7253,15 +7249,15 @@ var Chip = ({
   if (hideIfNoContent && !content) {
     return;
   }
-  return /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { backgroundColor, p: "$4 $6", borderRadius: "$4" } }, icon, /* @__PURE__ */ React.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor, ml: "$2" } }, content));
+  return /* @__PURE__ */ React59.createElement(Flex, { align: "center", css: { backgroundColor, p: "$4 $6", borderRadius: "$4" } }, icon, /* @__PURE__ */ React59.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor, ml: "$2" } }, content));
 };
 var Chip_default = Chip;
 
 // src/Prebuilt/components/Connection/TileConnection.jsx
 init_define_process_env();
-import React59 from "react";
+import React60 from "react";
 var TileConnection = ({ name, peerId, hideLabel, width }) => {
-  return /* @__PURE__ */ React59.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React60.createElement(
     Text,
     {
       css: __spreadValues({
@@ -7270,7 +7266,7 @@ var TileConnection = ({ name, peerId, hideLabel, width }) => {
       variant: "xs"
     },
     name
-  ) : null, /* @__PURE__ */ React59.createElement(ConnectionIndicator, { isTile: true, peerId }));
+  ) : null, /* @__PURE__ */ React60.createElement(ConnectionIndicator, { isTile: true, peerId }));
 };
 var Wrapper2 = styled("div", {
   display: "flex",
@@ -7291,7 +7287,7 @@ var TileConnection_default = TileConnection;
 
 // src/Prebuilt/components/Settings/SettingsModal.jsx
 init_define_process_env();
-import React65, { useCallback as useCallback21, useEffect as useEffect30, useState as useState30 } from "react";
+import React66, { useCallback as useCallback21, useEffect as useEffect30, useState as useState30 } from "react";
 import { useMedia as useMedia5 } from "react-use";
 import { selectLocalPeerRoleName as selectLocalPeerRoleName5, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
 import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
@@ -7302,7 +7298,7 @@ import { GridFourIcon, NotificationsIcon, SettingsIcon as SettingsIcon2 } from "
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
 init_define_process_env();
-import React61, { Fragment as Fragment11, useEffect as useEffect29, useRef as useRef12, useState as useState29 } from "react";
+import React62, { Fragment as Fragment11, useEffect as useEffect29, useRef as useRef12, useState as useState29 } from "react";
 import {
   DeviceType as DeviceType2,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
@@ -7315,10 +7311,10 @@ import { MicOnIcon as MicOnIcon4, SpeakerIcon as SpeakerIcon2, VideoOnIcon as Vi
 
 // src/Prebuilt/primitives/DropdownTrigger.jsx
 init_define_process_env();
-import React60 from "react";
+import React61 from "react";
 import { ChevronDownIcon as ChevronDownIcon7, ChevronUpIcon as ChevronUpIcon6 } from "@100mslive/react-icons";
-var DialogDropdownTrigger = React60.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
-  return /* @__PURE__ */ React60.createElement(
+var DialogDropdownTrigger = React61.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
+  return /* @__PURE__ */ React61.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -7332,7 +7328,7 @@ var DialogDropdownTrigger = React60.forwardRef(({ title, css: css2, open, icon,
       }, css2),
       ref
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       Flex,
       {
         css: {
@@ -7343,7 +7339,7 @@ var DialogDropdownTrigger = React60.forwardRef(({ title, css: css2, open, icon,
         }
       },
       icon,
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React61.createElement(
         Text,
         {
           css: __spreadValues(__spreadProps(__spreadValues({
@@ -7355,7 +7351,7 @@ var DialogDropdownTrigger = React60.forwardRef(({ title, css: css2, open, icon,
         },
         title
       ),
-      open ? /* @__PURE__ */ React60.createElement(ChevronUpIcon6, null) : /* @__PURE__ */ React60.createElement(ChevronDownIcon7, null)
+      open ? /* @__PURE__ */ React61.createElement(ChevronUpIcon6, null) : /* @__PURE__ */ React61.createElement(ChevronDownIcon7, null)
     )
   );
 });
@@ -7375,7 +7371,7 @@ var Settings = ({ setHide }) => {
   if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
     setHide(true);
   }
-  return /* @__PURE__ */ React61.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React61.createElement(Fragment11, null, isVideoOn && /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React62.createElement(Fragment11, null, isVideoOn && /* @__PURE__ */ React62.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -7386,24 +7382,24 @@ var Settings = ({ setHide }) => {
         m: "$10 auto"
       }
     },
-    /* @__PURE__ */ React61.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
-  ), /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
+  ), /* @__PURE__ */ React62.createElement(
     DeviceSelector,
     {
       title: "Video",
       devices: videoInput,
-      icon: /* @__PURE__ */ React61.createElement(VideoOnIcon2, null),
+      icon: /* @__PURE__ */ React62.createElement(VideoOnIcon2, null),
       selection: selectedDeviceIDs.videoInput,
       onChange: (deviceId) => updateDevice({
         deviceId,
         deviceType: DeviceType2.videoInput
       })
     }
-  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React61.createElement(
+  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React62.createElement(
     DeviceSelector,
     {
       title: shouldShowAudioOutput ? "Microphone" : "Audio",
-      icon: /* @__PURE__ */ React61.createElement(MicOnIcon4, null),
+      icon: /* @__PURE__ */ React62.createElement(MicOnIcon4, null),
       devices: audioInput,
       selection: selectedDeviceIDs.audioInput,
       onChange: (deviceId) => updateDevice({
@@ -7411,11 +7407,11 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType2.audioInput
       })
     }
-  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React61.createElement(
+  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React62.createElement(
     DeviceSelector,
     {
       title: "Speaker",
-      icon: /* @__PURE__ */ React61.createElement(SpeakerIcon2, null),
+      icon: /* @__PURE__ */ React62.createElement(SpeakerIcon2, null),
       devices: audioOutput,
       selection: selectedDeviceIDs.audioOutput,
       onChange: (deviceId) => updateDevice({
@@ -7423,7 +7419,7 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType2.audioOutput
       })
     },
-    /* @__PURE__ */ React61.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
+    /* @__PURE__ */ React62.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
   ) : null);
 };
 var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
@@ -7431,7 +7427,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
   const [open, setOpen] = useState29(false);
   const selectionBg = useDropdownSelection();
   const ref = useRef12(null);
-  return /* @__PURE__ */ React61.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React61.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React62.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React62.createElement(
     Flex,
     {
       align: "center",
@@ -7443,7 +7439,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
         }
       }
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
       Box,
       {
         css: {
@@ -7456,7 +7452,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           }
         }
       },
-      /* @__PURE__ */ React61.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React61.createElement(
+      /* @__PURE__ */ React62.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React62.createElement(
         DialogDropdownTrigger,
         {
           ref,
@@ -7464,8 +7460,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           title: ((_a = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a.label) || "Select device from list",
           open
         }
-      ), /* @__PURE__ */ React61.createElement(Dropdown.Portal, null, /* @__PURE__ */ React61.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b = ref.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, devices.map((device) => {
-        return /* @__PURE__ */ React61.createElement(
+      ), /* @__PURE__ */ React62.createElement(Dropdown.Portal, null, /* @__PURE__ */ React62.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b = ref.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, devices.map((device) => {
+        return /* @__PURE__ */ React62.createElement(
           Dropdown.Item,
           {
             key: device.label,
@@ -7497,7 +7493,7 @@ var TestAudio = ({ id }) => {
       }
     }
   }, [id]);
-  return /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
     Button,
     {
       variant: "standard",
@@ -7514,24 +7510,24 @@ var TestAudio = ({ id }) => {
       },
       disabled: playing
     },
-    /* @__PURE__ */ React61.createElement(SpeakerIcon2, null),
+    /* @__PURE__ */ React62.createElement(SpeakerIcon2, null),
     "\xA0Test",
     " ",
-    /* @__PURE__ */ React61.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
-  ), /* @__PURE__ */ React61.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
+    /* @__PURE__ */ React62.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
+  ), /* @__PURE__ */ React62.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
 };
 var DeviceSettings_default = Settings;
 
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
 init_define_process_env();
-import React63, { useCallback as useCallback20 } from "react";
+import React64, { useCallback as useCallback20 } from "react";
 import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3, useHMSActions as useHMSActions25, useHMSStore as useHMSStore33 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Settings/SwitchWithLabel.jsx
 init_define_process_env();
-import React62 from "react";
+import React63 from "react";
 var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     Flex,
     {
       align: "center",
@@ -7543,7 +7539,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
         display: hide ? "none" : "flex"
       }
     },
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(
       Label3,
       {
         htmlFor: id,
@@ -7561,7 +7557,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
       icon,
       label
     ),
-    /* @__PURE__ */ React62.createElement(Switch, { id, checked, onCheckedChange: onChange })
+    /* @__PURE__ */ React63.createElement(Switch, { id, checked, onCheckedChange: onChange })
   );
 };
 var SwitchWithLabel_default = SwitchWithLabel;
@@ -7585,7 +7581,7 @@ var LayoutSettings = () => {
     }),
     [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings]
   );
-  return /* @__PURE__ */ React63.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React64.createElement(
     SwitchWithLabel_default,
     {
       checked: uiViewMode === UI_MODE_ACTIVE_SPEAKER,
@@ -7597,7 +7593,7 @@ var LayoutSettings = () => {
       id: "activeSpeakerMode",
       label: "Active Speaker Mode"
     }
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     SwitchWithLabel_default,
     {
       label: "Active Speaker Sorting",
@@ -7609,7 +7605,7 @@ var LayoutSettings = () => {
         });
       }
     }
-  ), /* @__PURE__ */ React63.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React64.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React64.createElement(
     SwitchWithLabel_default,
     {
       label: "Mirror Local Video",
@@ -7621,7 +7617,7 @@ var LayoutSettings = () => {
         });
       }
     }
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     SwitchWithLabel_default,
     {
       label: "Hide Local Video",
@@ -7633,7 +7629,7 @@ var LayoutSettings = () => {
         });
       }
     }
-  ), /* @__PURE__ */ React63.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React63.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React63.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React64.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React64.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React64.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React64.createElement(
     Slider,
     {
       step: 1,
@@ -7650,11 +7646,11 @@ var LayoutSettings = () => {
 
 // src/Prebuilt/components/Settings/NotificationSettings.jsx
 init_define_process_env();
-import React64 from "react";
+import React65 from "react";
 import { AlertOctagonIcon, ChatIcon as ChatIcon2, ExitIcon as ExitIcon3, HandIcon as HandIcon3, PersonIcon as PersonIcon3 } from "@100mslive/react-icons";
 var NotificationItem = ({ type, label, icon, checked }) => {
   const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     SwitchWithLabel_default,
     {
       label,
@@ -7669,44 +7665,44 @@ var NotificationItem = ({ type, label, icon, checked }) => {
 };
 var NotificationSettings = () => {
   const subscribedNotifications = useSubscribedNotifications();
-  return /* @__PURE__ */ React64.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React65.createElement(
     NotificationItem,
     {
       label: "Peer Joined",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
-      icon: /* @__PURE__ */ React64.createElement(PersonIcon3, null),
+      icon: /* @__PURE__ */ React65.createElement(PersonIcon3, null),
       checked: subscribedNotifications.PEER_JOINED
     }
-  ), /* @__PURE__ */ React64.createElement(
+  ), /* @__PURE__ */ React65.createElement(
     NotificationItem,
     {
       label: "Peer Leave",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
-      icon: /* @__PURE__ */ React64.createElement(ExitIcon3, null),
+      icon: /* @__PURE__ */ React65.createElement(ExitIcon3, null),
       checked: subscribedNotifications.PEER_LEFT
     }
-  ), /* @__PURE__ */ React64.createElement(
+  ), /* @__PURE__ */ React65.createElement(
     NotificationItem,
     {
       label: "New Message",
       type: SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE,
-      icon: /* @__PURE__ */ React64.createElement(ChatIcon2, null),
+      icon: /* @__PURE__ */ React65.createElement(ChatIcon2, null),
       checked: subscribedNotifications.NEW_MESSAGE
     }
-  ), /* @__PURE__ */ React64.createElement(
+  ), /* @__PURE__ */ React65.createElement(
     NotificationItem,
     {
       label: "Hand Raised",
       type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
-      icon: /* @__PURE__ */ React64.createElement(HandIcon3, null),
+      icon: /* @__PURE__ */ React65.createElement(HandIcon3, null),
       checked: subscribedNotifications.METADATA_UPDATED
     }
-  ), /* @__PURE__ */ React64.createElement(
+  ), /* @__PURE__ */ React65.createElement(
     NotificationItem,
     {
       label: "Error",
       type: SUBSCRIBED_NOTIFICATIONS.ERROR,
-      icon: /* @__PURE__ */ React64.createElement(AlertOctagonIcon, null),
+      icon: /* @__PURE__ */ React65.createElement(AlertOctagonIcon, null),
       checked: subscribedNotifications.ERROR
     }
   ));
@@ -7782,7 +7778,7 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
       setSelection(firstNotHiddenTabName);
     }
   }, [isMobile, showSetting]);
-  return /* @__PURE__ */ React65.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React65.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React65.createElement(Dialog.Portal, null, /* @__PURE__ */ React65.createElement(Dialog.Overlay, null), /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React66.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React66.createElement(Dialog.Portal, null, /* @__PURE__ */ React66.createElement(Dialog.Overlay, null), /* @__PURE__ */ React66.createElement(
     Dialog.Content,
     {
       css: {
@@ -7792,7 +7788,7 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
         r: "$4"
       }
     },
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React66.createElement(
       Tabs.Root,
       {
         value: selection,
@@ -7800,7 +7796,7 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
         onValueChange: setSelection,
         css: { size: "100%", position: "relative" }
       },
-      /* @__PURE__ */ React65.createElement(
+      /* @__PURE__ */ React66.createElement(
         Tabs.List,
         {
           css: {
@@ -7812,12 +7808,12 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
             borderBottomLeftRadius: "$4"
           }
         },
-        /* @__PURE__ */ React65.createElement(Text, { variant: "h5" }, "Settings "),
-        /* @__PURE__ */ React65.createElement(Flex, { direction: "column", css: { mx: isMobile ? "-$8" : 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
-          return /* @__PURE__ */ React65.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React65.createElement(Icon2, null), title);
+        /* @__PURE__ */ React66.createElement(Text, { variant: "h5" }, "Settings "),
+        /* @__PURE__ */ React66.createElement(Flex, { direction: "column", css: { mx: isMobile ? "-$8" : 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
+          return /* @__PURE__ */ React66.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React66.createElement(Icon2, null), title);
         }))
       ),
-      selection && /* @__PURE__ */ React65.createElement(
+      selection && /* @__PURE__ */ React66.createElement(
         Flex,
         {
           direction: "column",
@@ -7835,21 +7831,21 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
           } : {})
         },
         settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content9, title, tabName }) => {
-          return /* @__PURE__ */ React65.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React65.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile }, title), /* @__PURE__ */ React65.createElement(Content9, { setHide: hideSettingByTabName(tabName) }));
+          return /* @__PURE__ */ React66.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React66.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile }, title), /* @__PURE__ */ React66.createElement(Content9, { setHide: hideSettingByTabName(tabName) }));
         })
       )
     ),
-    /* @__PURE__ */ React65.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React65.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React65.createElement(CrossIcon9, null)))
+    /* @__PURE__ */ React66.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React66.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React66.createElement(CrossIcon9, null)))
   )));
 };
 var SettingsContentHeader = ({ children, isMobile, onBack }) => {
-  return /* @__PURE__ */ React65.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React65.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React65.createElement(ChevronLeftIcon2, null)), children);
+  return /* @__PURE__ */ React66.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React66.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React66.createElement(ChevronLeftIcon2, null)), children);
 };
 var SettingsModal_default = SettingsModal;
 
 // src/Prebuilt/components/Preview/PreviewForm.jsx
 init_define_process_env();
-import React66 from "react";
+import React67 from "react";
 import { useMedia as useMedia6 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
 import { selectPermissions as selectPermissions8, useHMSStore as useHMSStore35, useRecordingStreaming as useRecordingStreaming8 } from "@100mslive/react-sdk";
@@ -7873,13 +7869,13 @@ var PreviewForm = ({
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = ((_c = (_b = (_a = layout == null ? void 0 : layout.screens) == null ? void 0 : _a.preview) == null ? void 0 : _b.default) == null ? void 0 : _c.elements) || {};
   const showGoLive = joinForm.join_btn_type === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning && (permissions == null ? void 0 : permissions.hlsStreaming);
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(
     Form,
     {
       css: { flexDirection: cannotPublishVideo ? "column" : "row", "@md": { flexDirection: "row" } },
       onSubmit: formSubmit
     },
-    /* @__PURE__ */ React66.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React67.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React67.createElement(
       Input,
       {
         required: true,
@@ -7891,8 +7887,8 @@ var PreviewForm = ({
         autoFocus: true,
         autoComplete: "name"
       }
-    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React66.createElement(PreviewSettings, null) : null),
-    Object.keys(joinForm).length > 0 ? /* @__PURE__ */ React66.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React66.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label) : null
+    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React67.createElement(PreviewSettings, null) : null),
+    /* @__PURE__ */ React67.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React67.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
   );
 };
 var Form = styled("form", {
@@ -7909,7 +7905,7 @@ var Form = styled("form", {
 var PreviewForm_default = PreviewForm;
 
 // src/Prebuilt/components/Preview/PreviewJoin.jsx
-var VirtualBackground = React67.lazy(() => import("./VirtualBackground-R3JHARN5.js"));
+var VirtualBackground = React68.lazy(() => import("./VirtualBackground-PPX7DVS3.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -7969,15 +7965,29 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
       }
     }
   }, [authToken, skipPreview]);
-  return roomState === HMSRoomState3.Preview ? /* @__PURE__ */ React67.createElement(Container4, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React67.createElement(Box, null), /* @__PURE__ */ React67.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "360px" } }, /* @__PURE__ */ React67.createElement(Logo, null), /* @__PURE__ */ React67.createElement(Text, { variant: "h4", css: { wordBreak: "break-word", textAlign: "center", mt: "$14", "@md": { mt: "$8" } } }, previewHeader.title), /* @__PURE__ */ React67.createElement(Text, { css: { c: "$on_surface_medium", my: "0", textAlign: "center" }, variant: "body1" }, previewHeader.sub_title), /* @__PURE__ */ React67.createElement(Flex, { justify: "center", css: { my: "$8", gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React67.createElement(
+  return roomState === HMSRoomState3.Preview ? /* @__PURE__ */ React68.createElement(Container4, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React68.createElement(Box, null), /* @__PURE__ */ React68.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "360px" } }, /* @__PURE__ */ React68.createElement(Logo, null), /* @__PURE__ */ React68.createElement(
+    Text,
+    {
+      variant: "h4",
+      css: { wordBreak: "break-word", textAlign: "center", mt: "$14", mb: "$4", "@md": { mt: "$8", mb: "$2" } }
+    },
+    previewHeader.title
+  ), /* @__PURE__ */ React68.createElement(
+    Text,
+    {
+      css: { c: "$on_surface_medium", my: "0", textAlign: "center", maxWidth: "100%", wordWrap: "break-word" },
+      variant: "sm"
+    },
+    previewHeader.sub_title
+  ), /* @__PURE__ */ React68.createElement(Flex, { justify: "center", css: { mt: "$14", mb: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React68.createElement(
     Chip_default,
     {
       content: "LIVE",
       backgroundColor: "$alert_error_default",
       textColor: "#FFF",
-      icon: /* @__PURE__ */ React67.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
+      icon: /* @__PURE__ */ React68.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
     }
-  ) : null, /* @__PURE__ */ React67.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React67.createElement(
+  ) : null, /* @__PURE__ */ React68.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React68.createElement(
     Flex,
     {
       align: "center",
@@ -7987,15 +7997,15 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
         flexDirection: "column"
       }
     },
-    /* @__PURE__ */ React67.createElement(PreviewTile, { name, error: previewError })
-  ) : null, /* @__PURE__ */ React67.createElement(Box, { css: { w: "100%", maxWidth: "360px" } }, /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(PreviewTile, { name, error: previewError })
+  ) : null, /* @__PURE__ */ React68.createElement(Box, { css: { w: "100%", maxWidth: "360px" } }, /* @__PURE__ */ React68.createElement(
     PreviewControls,
     {
       enableJoin,
       savePreferenceAndJoin,
       hideSettings: !toggleVideo && !toggleAudio
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React68.createElement(
     PreviewForm_default,
     {
       name,
@@ -8005,7 +8015,7 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
       cannotPublishVideo: !toggleVideo,
       cannotPublishAudio: !toggleAudio
     }
-  ))) : /* @__PURE__ */ React67.createElement(FullPageProgress_default, null);
+  ))) : /* @__PURE__ */ React68.createElement(FullPageProgress_default, null);
 };
 var Container4 = styled("div", __spreadProps(__spreadValues({
   width: "100%"
@@ -8025,7 +8035,7 @@ var PreviewTile = ({ name, error }) => {
   const {
     aspectRatio: { width, height }
   } = useTheme();
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -8041,20 +8051,20 @@ var PreviewTile = ({ name, error }) => {
       },
       ref: borderAudioRef
     },
-    localPeer ? /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React67.createElement(
+    localPeer ? /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React68.createElement(
       Video,
       {
         mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
         trackId: localPeer.videoTrack,
         "data-testid": "preview_tile"
       }
-    ), !isVideoOn ? /* @__PURE__ */ React67.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React67.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ React67.createElement(FullPageProgress_default, null) : null,
-    showMuteIcon ? /* @__PURE__ */ React67.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ React67.createElement(MicOffIcon2, null)) : null
+    ), !isVideoOn ? /* @__PURE__ */ React68.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React68.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ React68.createElement(FullPageProgress_default, null) : null,
+    showMuteIcon ? /* @__PURE__ */ React68.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ React68.createElement(MicOffIcon2, null)) : null
   );
 };
 var PreviewControls = ({ hideSettings }) => {
   const isVideoOn = useHMSStore36(selectIsLocalVideoEnabled4);
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     Flex,
     {
       justify: "between",
@@ -8063,13 +8073,13 @@ var PreviewControls = ({ hideSettings }) => {
         mt: "$8"
       }
     },
-    /* @__PURE__ */ React67.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React67.createElement(AudioVideoToggle, { compact: true }), /* @__PURE__ */ React67.createElement(Suspense, { fallback: "" }, isVideoOn ? /* @__PURE__ */ React67.createElement(VirtualBackground, null) : null)),
-    !hideSettings ? /* @__PURE__ */ React67.createElement(PreviewSettings, null) : null
+    /* @__PURE__ */ React68.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React68.createElement(AudioVideoToggle, { compact: true }), /* @__PURE__ */ React68.createElement(Suspense, { fallback: "" }, isVideoOn ? /* @__PURE__ */ React68.createElement(VirtualBackground, null) : null)),
+    !hideSettings ? /* @__PURE__ */ React68.createElement(PreviewSettings, null) : null
   );
 };
-var PreviewSettings = React67.memo(() => {
+var PreviewSettings = React68.memo(() => {
   const [open, setOpen] = useState31(false);
-  return /* @__PURE__ */ React67.createElement(Fragment12, null, /* @__PURE__ */ React67.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React67.createElement(SettingsIcon3, null)), open && /* @__PURE__ */ React67.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
+  return /* @__PURE__ */ React68.createElement(Fragment12, null, /* @__PURE__ */ React68.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React68.createElement(SettingsIcon3, null)), open && /* @__PURE__ */ React68.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
 });
 var PreviewJoin_default = PreviewJoin;
 
@@ -8092,12 +8102,15 @@ var useSkipPreview = () => {
 
 // src/Prebuilt/components/Preview/PreviewContainer.jsx
 var PreviewContainer = () => {
+  var _a, _b, _c;
   const navigate = useNavigation();
   const skipPreview = useSkipPreview();
   const previewAsRole = useSearchParam4(QUERY_PARAM_PREVIEW_AS_ROLE);
   const initialName = useSearchParam4(QUERY_PARAM_NAME) || (skipPreview ? "Beam" : "");
   const { roomId: urlRoomId, role: userRole } = useParams3();
   const authToken = useAuthToken();
+  const roomLayout = useRoomLayout();
+  const { preview_header: previewHeader = {} } = ((_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 roomState = useHMSStore37(selectRoomState4);
   const isPreview = roomState === HMSRoomState4.Preview;
   const onJoin = () => {
@@ -8107,15 +8120,15 @@ var PreviewContainer = () => {
     }
     navigate(meetingURL);
   };
-  return /* @__PURE__ */ React68.createElement(Flex, { direction: "column", css: { size: "100%" } }, isPreview ? null : /* @__PURE__ */ React68.createElement(Box, { css: { h: "$18", "@md": { h: "$17", flexShrink: 0 } }, "data-testid": "header" }, /* @__PURE__ */ React68.createElement(Header2, null)), /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(Flex, { direction: "column", css: { size: "100%" } }, isPreview ? null : /* @__PURE__ */ React69.createElement(Box, { css: { h: "$18", "@md": { h: "$17", flexShrink: 0 } }, "data-testid": "header" }, /* @__PURE__ */ React69.createElement(Header2, null)), /* @__PURE__ */ React69.createElement(
     Flex,
     {
       css: { flex: "1 1 0", position: "relative", overflowY: "auto", color: "$primary_default" },
       justify: "center",
       align: "center"
     },
-    authToken ? /* @__PURE__ */ React68.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole, onJoin }) : /* @__PURE__ */ React68.createElement(FullPageProgress_default, null),
-    /* @__PURE__ */ React68.createElement(
+    authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React69.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole, onJoin }) : /* @__PURE__ */ React69.createElement(FullPageProgress_default, null),
+    /* @__PURE__ */ React69.createElement(
       SidePane_default,
       {
         css: {
@@ -8131,15 +8144,15 @@ var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 init_define_process_env();
-import React70, { useEffect as useEffect33, useState as useState32 } from "react";
+import React71, { useEffect as useEffect33, useState as useState32 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom8, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
 init_define_process_env();
-import React69 from "react";
+import React70 from "react";
 var Toast2 = (_a) => {
   var _b = _a, { title, description, close = true, open, duration, onOpenChange, icon } = _b, props = __objRest(_b, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Toast.HMSToast,
     __spreadValues({
       title,
@@ -8163,9 +8176,9 @@ var ToastContainer = () => {
       ToastManager.removeListener(setToast);
     };
   }, []);
-  return /* @__PURE__ */ React70.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
-    return /* @__PURE__ */ React70.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
-  }), /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
+    return /* @__PURE__ */ React71.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
+  }), /* @__PURE__ */ React71.createElement(
     Toast.Viewport,
     {
       css: __spreadValues({
@@ -8177,7 +8190,7 @@ var ToastContainer = () => {
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 init_define_process_env();
-import React71, { useCallback as useCallback23, useEffect as useEffect34, useMemo as useMemo6, useState as useState33 } from "react";
+import React72, { useCallback as useCallback23, useEffect as useEffect34, useMemo as useMemo6, useState as useState33 } from "react";
 import { useMedia as useMedia7 } from "react-use";
 import { selectLocalPeerID as selectLocalPeerID8, selectPeerNameByID as selectPeerNameByID4, useHMSStore as useHMSStore39, useHMSVanillaStore as useHMSVanillaStore5 } from "@100mslive/react-sdk";
 var emojiCount = 1;
@@ -8236,7 +8249,7 @@ function FlyingEmoji() {
   useEffect34(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Box,
     {
       css: {
@@ -8252,7 +8265,7 @@ function FlyingEmoji() {
       }
     },
     emojis.map((emoji) => {
-      return /* @__PURE__ */ React71.createElement(
+      return /* @__PURE__ */ React72.createElement(
         Flex,
         {
           key: emoji.id,
@@ -8268,8 +8281,8 @@ function FlyingEmoji() {
             setEmojis(emojis.filter((item) => item.id !== emoji.id));
           }
         },
-        /* @__PURE__ */ React71.createElement(Box, null, /* @__PURE__ */ React71.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
-        /* @__PURE__ */ React71.createElement(
+        /* @__PURE__ */ React72.createElement(Box, null, /* @__PURE__ */ React72.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
+        /* @__PURE__ */ React72.createElement(
           Box,
           {
             css: {
@@ -8279,7 +8292,7 @@ function FlyingEmoji() {
               borderRadius: "$1"
             }
           },
-          /* @__PURE__ */ React71.createElement(
+          /* @__PURE__ */ React72.createElement(
             Text,
             {
               css: {
@@ -8298,7 +8311,7 @@ function FlyingEmoji() {
 
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
 init_define_process_env();
-import React72, { useCallback as useCallback24 } from "react";
+import React73, { useCallback as useCallback24 } from "react";
 import { useCustomEvent as useCustomEvent2, useHMSActions as useHMSActions26 } from "@100mslive/react-sdk";
 function RemoteStopScreenshare() {
   const actions = useHMSActions26();
@@ -8309,11 +8322,11 @@ function RemoteStopScreenshare() {
     type: REMOTE_STOP_SCREENSHARE_TYPE,
     onEvent: onRemoteStopScreenshare
   });
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null);
+  return /* @__PURE__ */ React73.createElement(React73.Fragment, null);
 }
 
 // src/Prebuilt/App.jsx
-var Conference = React73.lazy(() => import("./conference-IKSFGLVK.js"));
+var Conference = React74.lazy(() => import("./conference-ORQKXGY3.js"));
 var getAspectRatio = ({ width, height }) => {
   const host = define_process_env_default.REACT_APP_HOST_NAME;
   const portraitDomains = (define_process_env_default.REACT_APP_PORTRAIT_MODE_DOMAINS || "").split(",");
@@ -8322,7 +8335,7 @@ var getAspectRatio = ({ width, height }) => {
   }
   return { width, height };
 };
-var HMSPrebuilt = React73.forwardRef(
+var HMSPrebuilt = React74.forwardRef(
   ({
     roomCode = "",
     logo,
@@ -8345,7 +8358,7 @@ var HMSPrebuilt = React73.forwardRef(
     const metadata = "";
     const { 0: width, 1: height } = aspectRatio.split("-").map((el) => parseInt(el));
     const reactiveStore = useRef13();
-    const [hydrated, setHydrated] = React73.useState(false);
+    const [hydrated, setHydrated] = React74.useState(false);
     useEffect35(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
@@ -8388,7 +8401,7 @@ var HMSPrebuilt = React73.forwardRef(
       return null;
     }
     globalStyles();
-    return /* @__PURE__ */ React73.createElement(ErrorBoundary, null, /* @__PURE__ */ React73.createElement(
+    return /* @__PURE__ */ React74.createElement(ErrorBoundary, null, /* @__PURE__ */ React74.createElement(
       HMSPrebuiltContext.Provider,
       {
         value: {
@@ -8401,7 +8414,7 @@ var HMSPrebuilt = React73.forwardRef(
           endpoints
         }
       },
-      /* @__PURE__ */ React73.createElement(
+      /* @__PURE__ */ React74.createElement(
         HMSRoomProvider,
         {
           isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -8410,7 +8423,7 @@ var HMSPrebuilt = React73.forwardRef(
           notifications: reactiveStore.current.hmsNotifications,
           stats: reactiveStore.current.hmsStats
         },
-        /* @__PURE__ */ React73.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React73.createElement(RoomLayoutContext.Consumer, null, (layout) => {
+        /* @__PURE__ */ React74.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React74.createElement(RoomLayoutContext.Consumer, null, (layout) => {
           var _a;
           const theme2 = ((_a = layout.themes) == null ? void 0 : _a[0]) || {};
           const { typography: typography2 } = layout;
@@ -8418,10 +8431,10 @@ var HMSPrebuilt = React73.forwardRef(
           if (typography2 == null ? void 0 : typography2.font_family) {
             fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
           }
-          return /* @__PURE__ */ React73.createElement(
+          return /* @__PURE__ */ React74.createElement(
             HMSThemeProvider,
             {
-              themeType: theme2.name,
+              themeType: `${theme2.name}-${Date.now()}`,
               aspectRatio: getAspectRatio({ width, height }),
               theme: {
                 colors: theme2.palette,
@@ -8430,9 +8443,9 @@ var HMSPrebuilt = React73.forwardRef(
                 }
               }
             },
-            /* @__PURE__ */ React73.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
-            /* @__PURE__ */ React73.createElement(Init, null),
-            /* @__PURE__ */ React73.createElement(
+            /* @__PURE__ */ React74.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
+            /* @__PURE__ */ React74.createElement(Init, null),
+            /* @__PURE__ */ React74.createElement(
               Box,
               {
                 css: {
@@ -8442,7 +8455,7 @@ var HMSPrebuilt = React73.forwardRef(
                   "-webkit-text-size-adjust": "100%"
                 }
               },
-              /* @__PURE__ */ React73.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint })
+              /* @__PURE__ */ React74.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint })
             )
           );
         }))
@@ -8454,43 +8467,43 @@ HMSPrebuilt.displayName = "HMSPrebuilt";
 var Redirector = ({ showPreview }) => {
   const { roomId, role } = useParams4();
   if (!roomId && !role) {
-    return /* @__PURE__ */ React73.createElement(Navigate, { to: "/" });
+    return /* @__PURE__ */ React74.createElement(Navigate, { to: "/" });
   }
   if (!roomId) {
-    return /* @__PURE__ */ React73.createElement(Navigate, { to: "/" });
+    return /* @__PURE__ */ React74.createElement(Navigate, { to: "/" });
   }
   if (["streaming", "preview", "meeting", "leave"].includes(roomId) && !role) {
-    return /* @__PURE__ */ React73.createElement(Navigate, { to: "/" });
+    return /* @__PURE__ */ React74.createElement(Navigate, { to: "/" });
   }
-  return /* @__PURE__ */ React73.createElement(Navigate, { to: `${getRoutePrefix()}/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
+  return /* @__PURE__ */ React74.createElement(Navigate, { to: `${getRoutePrefix()}/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
 };
 var RouteList = () => {
   const { showPreview, showLeave } = useHMSPrebuiltContext();
-  return /* @__PURE__ */ React73.createElement(Routes, null, showPreview && /* @__PURE__ */ React73.createElement(Route, { path: "preview" }, /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(Routes, null, showPreview && /* @__PURE__ */ React74.createElement(Route, { path: "preview" }, /* @__PURE__ */ React74.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React73.createElement(Suspense2, { fallback: /* @__PURE__ */ React73.createElement(FullPageProgress_default, { loadingText: "Loading preview..." }) }, /* @__PURE__ */ React73.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React74.createElement(Suspense2, { fallback: /* @__PURE__ */ React74.createElement(FullPageProgress_default, { loadingText: "Loading preview..." }) }, /* @__PURE__ */ React74.createElement(PreviewContainer_default, null))
     }
-  ), /* @__PURE__ */ React73.createElement(
+  ), /* @__PURE__ */ React74.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React73.createElement(Suspense2, { fallback: /* @__PURE__ */ React73.createElement(FullPageProgress_default, { loadingText: "Loading preview..." }) }, /* @__PURE__ */ React73.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React74.createElement(Suspense2, { fallback: /* @__PURE__ */ React74.createElement(FullPageProgress_default, { loadingText: "Loading preview..." }) }, /* @__PURE__ */ React74.createElement(PreviewContainer_default, null))
     }
-  )), /* @__PURE__ */ React73.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React73.createElement(
+  )), /* @__PURE__ */ React74.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React74.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React73.createElement(Suspense2, { fallback: /* @__PURE__ */ React73.createElement(FullPageProgress_default, { loadingText: "Joining..." }) }, /* @__PURE__ */ React73.createElement(Conference, null))
+      element: /* @__PURE__ */ React74.createElement(Suspense2, { fallback: /* @__PURE__ */ React74.createElement(FullPageProgress_default, { loadingText: "Joining..." }) }, /* @__PURE__ */ React74.createElement(Conference, null))
     }
-  ), /* @__PURE__ */ React73.createElement(
+  ), /* @__PURE__ */ React74.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React73.createElement(Suspense2, { fallback: /* @__PURE__ */ React73.createElement(FullPageProgress_default, { loadingText: "Joining..." }) }, /* @__PURE__ */ React73.createElement(Conference, null))
+      element: /* @__PURE__ */ React74.createElement(Suspense2, { fallback: /* @__PURE__ */ React74.createElement(FullPageProgress_default, { loadingText: "Joining..." }) }, /* @__PURE__ */ React74.createElement(Conference, null))
     }
-  )), showLeave && /* @__PURE__ */ React73.createElement(Route, { path: "leave" }, /* @__PURE__ */ React73.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React73.createElement(PostLeave_default, null) }), /* @__PURE__ */ React73.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React73.createElement(PostLeave_default, null) })), /* @__PURE__ */ React73.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React73.createElement(Redirector, { showPreview }) }), /* @__PURE__ */ React73.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React73.createElement(Redirector, { showPreview }) }));
+  )), showLeave && /* @__PURE__ */ React74.createElement(Route, { path: "leave" }, /* @__PURE__ */ React74.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React74.createElement(PostLeave_default, null) }), /* @__PURE__ */ React74.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React74.createElement(PostLeave_default, null) })), /* @__PURE__ */ React74.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React74.createElement(Redirector, { showPreview }) }), /* @__PURE__ */ React74.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React74.createElement(Redirector, { showPreview }) }));
 };
 var BackSwipe = () => {
   const isConnectedToRoom = useHMSStore40(selectIsConnectedToRoom9);
@@ -8510,10 +8523,10 @@ var BackSwipe = () => {
 };
 var Router = ({ children }) => {
   const { roomId, role, roomCode } = useHMSPrebuiltContext();
-  return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React73.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React73.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
+  return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React74.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React74.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
 };
 function AppRoutes({ authTokenByRoomCodeEndpoint }) {
-  return /* @__PURE__ */ React73.createElement(Router, null, /* @__PURE__ */ React73.createElement(ToastContainer, null), /* @__PURE__ */ React73.createElement(Notifications, null), /* @__PURE__ */ React73.createElement(BackSwipe, null), /* @__PURE__ */ React73.createElement(FlyingEmoji, null), /* @__PURE__ */ React73.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React73.createElement(KeyboardHandler, null), /* @__PURE__ */ React73.createElement(BeamSpeakerLabelsLogging, null), /* @__PURE__ */ React73.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint }), /* @__PURE__ */ React73.createElement(Routes, null, /* @__PURE__ */ React73.createElement(Route, { path: "/*", element: /* @__PURE__ */ React73.createElement(RouteList, null) }), /* @__PURE__ */ React73.createElement(Route, { path: "/streaming/*", element: /* @__PURE__ */ React73.createElement(RouteList, null) })));
+  return /* @__PURE__ */ React74.createElement(Router, null, /* @__PURE__ */ React74.createElement(ToastContainer, null), /* @__PURE__ */ React74.createElement(Notifications, null), /* @__PURE__ */ React74.createElement(BackSwipe, null), /* @__PURE__ */ React74.createElement(FlyingEmoji, null), /* @__PURE__ */ React74.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React74.createElement(KeyboardHandler, null), /* @__PURE__ */ React74.createElement(BeamSpeakerLabelsLogging, null), /* @__PURE__ */ React74.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint }), /* @__PURE__ */ React74.createElement(Routes, null, /* @__PURE__ */ React74.createElement(Route, { path: "/*", element: /* @__PURE__ */ React74.createElement(RouteList, null) }), /* @__PURE__ */ React74.createElement(Route, { path: "/streaming/*", element: /* @__PURE__ */ React74.createElement(RouteList, null) })));
 }
 
 // src/Progress/index.tsx
@@ -8623,4 +8636,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-TZJCHZPD.js.map
+//# sourceMappingURL=chunk-LMSP5ETL.js.map