@100mslive/roomkit-react 0.1.2 → 0.1.4-alpha.0

package/dist/{chunk-MJNJRHS3.js → chunk-NLZVUXR3.js}

@@ -1,12 +1,12 @@
 import {
   Loading,
   useIsFeatureEnabled
-} from "./chunk-PLKNFRDT.js";
+} from "./chunk-ORPC2GYB.js";
 import {
   Box,
   Flex,
   Text
-} from "./chunk-S4QRZ4VV.js";
+} from "./chunk-6GXDYWD5.js";
 import {
   APP_DATA,
   CHAT_SELECTOR,
@@ -66,7 +66,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-YJCBCMH4.js";
+} from "./chunk-YE4RPJYG.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,17 +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(
+  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__ */ React3.createElement(Loading, { color: "currentColor" })
-  ), /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React2.createElement(Loading, { color: "currentColor" })
+  ), /* @__PURE__ */ React2.createElement(
     Flex,
     {
       align: "center",
@@ -338,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
@@ -421,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
@@ -476,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",
@@ -515,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
@@ -523,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",
@@ -570,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,
@@ -584,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",
@@ -632,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
@@ -645,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, {
@@ -691,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, {});
@@ -709,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",
@@ -752,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({
@@ -779,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),
@@ -1180,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%",
@@ -1222,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
@@ -1367,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,
@@ -1449,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),
@@ -1463,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,
@@ -1537,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),
@@ -1559,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;
 }
@@ -1645,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) => {
@@ -1736,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, {
@@ -1754,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,
@@ -1772,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, {});
@@ -1824,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));
   }
 );
 
@@ -2034,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
@@ -2045,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",
@@ -2071,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
@@ -2112,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,
@@ -2124,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,
@@ -2266,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
@@ -2319,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));
@@ -2459,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();
@@ -2479,7 +2484,7 @@ var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
     hmsActions.setFrameworkInfo({
       type: "react-web",
       isPrebuilt: true,
-      version: React16.version
+      version: React15.version
     });
   }, [hmsActions]);
   useEffect3(() => {
@@ -2511,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();
@@ -2615,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";
@@ -2623,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: "",
@@ -2644,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,
@@ -2663,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",
@@ -2678,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",
@@ -2693,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"]);
@@ -2709,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%" } },
@@ -2736,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,
@@ -2757,7 +2762,7 @@ var DialogInputFile = (_a) => {
       },
       gap: "8"
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React17.createElement(
       IconButton,
       {
         variant: "standard",
@@ -2771,7 +2776,7 @@ var DialogInputFile = (_a) => {
           }
         }
       },
-      /* @__PURE__ */ React18.createElement(
+      /* @__PURE__ */ React17.createElement(
         CloudUploadIcon,
         {
           style: {
@@ -2781,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,
@@ -2793,7 +2798,7 @@ var DialogInputFile = (_a) => {
         type,
         hidden: true
       }, props)
-    ), /* @__PURE__ */ React18.createElement(
+    ), /* @__PURE__ */ React17.createElement(
       IconButton,
       {
         variant: "standard",
@@ -2807,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
@@ -2860,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();
@@ -2900,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;
 });
@@ -2944,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 {
@@ -2971,7 +2976,7 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.errorInfo) {
-      return /* @__PURE__ */ React20.createElement(
+      return /* @__PURE__ */ React19.createElement(
         Flex,
         {
           align: "center",
@@ -2984,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",
@@ -2995,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: () => {
@@ -3006,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: () => {
@@ -3022,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)))
         ))
       );
     }
@@ -3036,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,
@@ -3083,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
@@ -3196,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";
 
@@ -3205,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: {
@@ -3222,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)
       };
     }
   },
@@ -3242,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)
       };
     }
   },
@@ -3257,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)
       };
     }
   },
@@ -3272,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)
       };
     }
   },
@@ -3288,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)
       };
     }
   },
@@ -3304,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
       };
@@ -3316,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
       };
@@ -3423,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,
@@ -3438,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",
@@ -3454,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: "" });
@@ -3478,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
@@ -3549,7 +3554,7 @@ 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";
 
@@ -3586,22 +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 ? /* @__PURE__ */ React26.createElement("img", { src: android_perm_1_default, style: { maxWidth: "100%", maxHeight: "100%" } }) : null,
-    /* @__PURE__ */ React26.createElement(Text, { variant: "h6" }, "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 "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__ */ 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 ? /* @__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 = [
@@ -3638,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: {
@@ -3652,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 = () => {
@@ -3688,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",
@@ -3727,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 = () => {
@@ -3757,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",
@@ -3828,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: () => {
@@ -3900,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";
 
@@ -3914,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
@@ -4013,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,
@@ -4022,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",
@@ -4057,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,
@@ -4088,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";
 
@@ -4148,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,
@@ -4166,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",
@@ -4174,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",
@@ -4182,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",
@@ -4201,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";
 
@@ -4223,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,
@@ -4253,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",
@@ -4267,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",
@@ -4278,7 +4283,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
         mb: "$10"
       }
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React33.createElement(
       Box,
       {
         css: {
@@ -4287,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",
@@ -4300,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",
@@ -4309,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,
@@ -4325,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,
@@ -4333,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",
@@ -4351,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;
@@ -4364,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,
@@ -4376,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",
@@ -4389,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,
@@ -4414,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) => {
@@ -4422,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 }))
   );
 };
 
@@ -4445,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,
@@ -4453,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,
@@ -4482,7 +4487,7 @@ var ParticipantCount = () => {
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(
     IconButton_default,
     {
       css: {
@@ -4498,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) {
@@ -4507,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,
@@ -4516,7 +4521,7 @@ var VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId })
         mr: "-$10"
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React35.createElement(
       FixedSizeList,
       {
         itemSize: 68,
@@ -4530,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],
@@ -4541,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,
@@ -4549,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,
@@ -4563,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,
@@ -4576,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);
@@ -4592,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* () {
@@ -4602,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" },
@@ -4626,7 +4631,7 @@ var ParticipantVolume = ({ peerId }) => {
   )));
 };
 var ParticipantSearch = ({ onSearch, placeholder }) => {
-  const [value, setValue] = React36.useState("");
+  const [value, setValue] = React35.useState("");
   useDebounce(
     () => {
       onSearch(value);
@@ -4634,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: {
@@ -4645,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",
@@ -4667,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,
@@ -4682,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 = () => {
@@ -4700,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",
@@ -4710,7 +4715,7 @@ var GoLiveButton = () => {
       loading: isRTMPStartedFromUI || isHLSStartedFromUI,
       disabled: isBrowserRecordingOn && !isStreamingOn
     },
-    /* @__PURE__ */ React37.createElement(GoLiveIcon, null),
+    /* @__PURE__ */ React36.createElement(GoLiveIcon, null),
     "Go Live"
   ));
 };
@@ -4718,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);
@@ -4741,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",
@@ -4749,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`,
@@ -4763,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`,
@@ -4783,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({
@@ -4808,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",
@@ -4833,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: {
@@ -4857,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);
@@ -4893,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" },
@@ -4902,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,
@@ -4914,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",
@@ -4931,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",
@@ -4952,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",
@@ -4987,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 = () => {
@@ -5002,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",
@@ -5021,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`,
@@ -5053,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",
@@ -5076,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,
@@ -5100,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) => {
@@ -5109,7 +5114,7 @@ var AccordionHeader2 = ({ rtmp, setRTMPStreams }) => {
       },
       icon: PencilIcon
     }
-  ), /* @__PURE__ */ React40.createElement(
+  ), /* @__PURE__ */ React39.createElement(
     ActionIcon,
     {
       onClick: () => {
@@ -5142,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,
@@ -5348,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",
@@ -5361,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",
@@ -5378,7 +5383,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.selection.playing ? "Pause" : "Play"
-  ) : /* @__PURE__ */ React41.createElement(
+  ) : /* @__PURE__ */ React40.createElement(
     Text,
     {
       variant: "sm",
@@ -5389,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",
@@ -5400,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",
@@ -5420,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();
@@ -5432,7 +5437,7 @@ var RecordingStatus = () => {
   )) {
     return null;
   }
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React41.createElement(
     Tooltip,
     {
       title: getRecordingText({
@@ -5441,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);
@@ -5467,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",
@@ -5489,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",
@@ -5498,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",
@@ -5549,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",
@@ -5564,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 {
@@ -5656,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",
@@ -5667,7 +5672,7 @@ var EmojiReaction = () => {
     },
     "Reactions will be timed for Live Streaming viewers.",
     " "
-  ), /* @__PURE__ */ React44.createElement(
+  ), /* @__PURE__ */ React43.createElement(
     Text,
     {
       variant: "sm",
@@ -5677,7 +5682,7 @@ var EmojiReaction = () => {
         fontWeight: "$semiBold"
       }
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React43.createElement(
       "a",
       {
         href: HLS_TIMED_METADATA_DOC_URL,
@@ -5704,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";
@@ -5742,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",
@@ -5751,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,
@@ -5762,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)" },
@@ -5772,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,
@@ -5784,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, {
@@ -5816,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 }) => {
@@ -5827,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",
@@ -5851,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",
@@ -5863,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
@@ -5879,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",
@@ -5887,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",
@@ -5901,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: () => {
@@ -5916,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")
     ))
   ));
 };
@@ -5925,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,
@@ -5952,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";
@@ -6016,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",
@@ -6028,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",
@@ -6046,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;
 };
@@ -6060,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 }) => {
@@ -6074,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, {
@@ -6091,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(() => {
@@ -6112,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,
@@ -6128,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: {
@@ -6141,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",
@@ -6154,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,
@@ -6162,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",
@@ -6177,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(() => {
@@ -6189,7 +6194,7 @@ var ChatList = React50.forwardRef(
         scrollToBottom(1);
       }
     }, [listRef]);
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React49.createElement(
       VariableSizeList,
       {
         ref: listRef,
@@ -6201,7 +6206,7 @@ var ChatList = React50.forwardRef(
           overflowX: "hidden"
         }
       },
-      ({ index, style }) => /* @__PURE__ */ React50.createElement(
+      ({ index, style }) => /* @__PURE__ */ React49.createElement(
         ChatMessage,
         {
           style,
@@ -6215,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;
@@ -6227,7 +6232,7 @@ var VirtualizedChatMessages = React50.forwardRef(({ messages, scrollToBottom },
     },
     [listRef]
   );
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(
     Box,
     {
       css: {
@@ -6236,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,
@@ -6258,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: {
@@ -6274,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";
@@ -6360,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,
@@ -6370,7 +6375,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       Box,
       {
         css: {
@@ -6379,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" })
     )
   )));
 }
@@ -6420,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",
@@ -6435,7 +6440,7 @@ var ChatFooter = ({ role, peerId, onSend, children }) => {
       }
     },
     children,
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       TextArea,
       {
         placeholder: "Write something here",
@@ -6456,7 +6461,7 @@ var ChatFooter = ({ role, peerId, onSend, children }) => {
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React50.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -6464,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 {
@@ -6495,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",
@@ -6517,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,
@@ -6533,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,
@@ -6556,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,
@@ -6580,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,
@@ -6598,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,
@@ -6612,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,
@@ -6626,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: {
@@ -6638,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" },
@@ -6650,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)
     )
   );
 });
@@ -6673,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: {
@@ -6692,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 = () => {
@@ -6737,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,
@@ -6757,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",
@@ -6775,7 +6780,7 @@ var NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React53.createElement(
       Button,
       {
         onClick: () => {
@@ -6784,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";
 
@@ -6800,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,
@@ -6820,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;
     }
@@ -6828,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;
     }
@@ -6836,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
       };
   }
@@ -6845,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,
@@ -6856,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",
@@ -6870,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;
 };
@@ -6880,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);
@@ -6906,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",
@@ -6915,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();
@@ -6929,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",
@@ -6948,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
@@ -6964,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: {
@@ -6974,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",
@@ -6985,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",
@@ -6997,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
@@ -7014,7 +7019,7 @@ var SidePane = ({ css: css2 = {} }) => {
   if (!ViewComponent) {
     return null;
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React56.createElement(
     Box,
     {
       css: __spreadProps(__spreadValues({
@@ -7038,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,
@@ -7076,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",
@@ -7119,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,
@@ -7131,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,
@@ -7232,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",
@@ -7242,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({
@@ -7259,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",
@@ -7280,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";
@@ -7291,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,
@@ -7304,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,
@@ -7321,7 +7328,7 @@ var DialogDropdownTrigger = React60.forwardRef(({ title, css: css2, open, icon,
       }, css2),
       ref
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       Flex,
       {
         css: {
@@ -7332,7 +7339,7 @@ var DialogDropdownTrigger = React60.forwardRef(({ title, css: css2, open, icon,
         }
       },
       icon,
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React61.createElement(
         Text,
         {
           css: __spreadValues(__spreadProps(__spreadValues({
@@ -7344,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)
     )
   );
 });
@@ -7364,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: {
@@ -7375,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({
@@ -7400,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({
@@ -7412,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 }) => {
@@ -7420,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",
@@ -7432,7 +7439,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
         }
       }
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
       Box,
       {
         css: {
@@ -7445,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,
@@ -7453,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,
@@ -7486,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",
@@ -7503,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",
@@ -7532,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,
@@ -7550,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;
@@ -7574,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,
@@ -7586,7 +7593,7 @@ var LayoutSettings = () => {
       id: "activeSpeakerMode",
       label: "Active Speaker Mode"
     }
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     SwitchWithLabel_default,
     {
       label: "Active Speaker Sorting",
@@ -7598,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",
@@ -7610,7 +7617,7 @@ var LayoutSettings = () => {
         });
       }
     }
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     SwitchWithLabel_default,
     {
       label: "Hide Local Video",
@@ -7622,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,
@@ -7639,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,
@@ -7658,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
     }
   ));
@@ -7771,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: {
@@ -7781,7 +7788,7 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
         r: "$4"
       }
     },
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React66.createElement(
       Tabs.Root,
       {
         value: selection,
@@ -7789,7 +7796,7 @@ var SettingsModal = ({ open, onOpenChange, children }) => {
         onValueChange: setSelection,
         css: { size: "100%", position: "relative" }
       },
-      /* @__PURE__ */ React65.createElement(
+      /* @__PURE__ */ React66.createElement(
         Tabs.List,
         {
           css: {
@@ -7801,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",
@@ -7824,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";
@@ -7862,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,
@@ -7880,8 +7887,8 @@ var PreviewForm = ({
         autoFocus: true,
         autoComplete: "name"
       }
-    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React66.createElement(PreviewSettings, null) : null),
-    /* @__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)
+    ), 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", {
@@ -7898,7 +7905,7 @@ var Form = styled("form", {
 var PreviewForm_default = PreviewForm;
 
 // src/Prebuilt/components/Preview/PreviewJoin.jsx
-var VirtualBackground = React67.lazy(() => import("./VirtualBackground-4RPLPBOQ.js"));
+var VirtualBackground = React68.lazy(() => import("./VirtualBackground-BCKXNDTD.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -7958,29 +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(
+  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__ */ React67.createElement(
+  ), /* @__PURE__ */ React68.createElement(
     Text,
     {
       css: { c: "$on_surface_medium", my: "0", textAlign: "center", maxWidth: "100%", wordWrap: "break-word" },
       variant: "sm"
     },
     previewHeader.sub_title
-  ), /* @__PURE__ */ React67.createElement(Flex, { justify: "center", css: { mt: "$14", mb: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React67.createElement(
+  ), /* @__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",
@@ -7990,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,
@@ -8008,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%"
@@ -8028,7 +8035,7 @@ var PreviewTile = ({ name, error }) => {
   const {
     aspectRatio: { width, height }
   } = useTheme();
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -8044,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",
@@ -8066,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;
 
@@ -8113,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 && Object.keys(previewHeader).length > 0 ? /* @__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: {
@@ -8137,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,
@@ -8169,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({
@@ -8183,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;
@@ -8242,7 +8249,7 @@ function FlyingEmoji() {
   useEffect34(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Box,
     {
       css: {
@@ -8258,7 +8265,7 @@ function FlyingEmoji() {
       }
     },
     emojis.map((emoji) => {
-      return /* @__PURE__ */ React71.createElement(
+      return /* @__PURE__ */ React72.createElement(
         Flex,
         {
           key: emoji.id,
@@ -8274,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: {
@@ -8285,7 +8292,7 @@ function FlyingEmoji() {
               borderRadius: "$1"
             }
           },
-          /* @__PURE__ */ React71.createElement(
+          /* @__PURE__ */ React72.createElement(
             Text,
             {
               css: {
@@ -8304,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();
@@ -8315,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-DGJFMV3O.js"));
+var Conference = React74.lazy(() => import("./conference-ETISNCLN.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(",");
@@ -8328,7 +8335,7 @@ var getAspectRatio = ({ width, height }) => {
   }
   return { width, height };
 };
-var HMSPrebuilt = React73.forwardRef(
+var HMSPrebuilt = React74.forwardRef(
   ({
     roomCode = "",
     logo,
@@ -8351,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();
@@ -8394,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: {
@@ -8407,7 +8414,7 @@ var HMSPrebuilt = React73.forwardRef(
           endpoints
         }
       },
-      /* @__PURE__ */ React73.createElement(
+      /* @__PURE__ */ React74.createElement(
         HMSRoomProvider,
         {
           isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -8416,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;
@@ -8424,7 +8431,7 @@ 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}-${Date.now()}`,
@@ -8436,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: {
@@ -8448,7 +8455,7 @@ var HMSPrebuilt = React73.forwardRef(
                   "-webkit-text-size-adjust": "100%"
                 }
               },
-              /* @__PURE__ */ React73.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint })
+              /* @__PURE__ */ React74.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint })
             )
           );
         }))
@@ -8460,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);
@@ -8516,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
@@ -8629,4 +8636,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-MJNJRHS3.js.map
+//# sourceMappingURL=chunk-NLZVUXR3.js.map