@100mslive/roomkit-react 0.1.7 → 0.1.8

package/dist/{chunk-Z7P5WITU.js → chunk-PRM33R4R.js}

@@ -35,7 +35,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-5DQ3WTED.js";
+} from "./chunk-6SQTFOK6.js";
 
 // src/Button/Button.tsx
 import React2 from "react";
@@ -1221,7 +1221,7 @@ var StyledMenuTile = {
   RemoveItem: RemoveMenuItem
 };
 
-// src/AudioLevel/AudioLevel.tsx
+// src/AudioLevel/useBorderAudioLevel.tsx
 import { useCallback as useCallback2, useRef as useRef2 } from "react";
 import { useAudioLevelStyles } from "@100mslive/react-sdk";
 function useBorderAudioLevel(audioTrackId) {
@@ -1249,6 +1249,83 @@ var sigmoid = (z) => {
   return 1 / (1 + Math.exp(-z));
 };
 
+// src/AudioLevel/AudioLevel.tsx
+import React10, { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { selectTrackAudioByID, useHMSVanillaStore } from "@100mslive/react-sdk";
+
+// src/AudioLevel/audio-level.png
+var audio_level_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABABAMAAAAHc7SNAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAtUExURQAAAP///////////////////////////////////////////////////////6FIq5sAAAAOdFJOUwA/QJqbnJ2euLnc3d7+2IFKrQAAAa9JREFUaN7dmcFRxDAMRXNgW4AbV24ZSkgrlAAFUAqlpITtgT0QnB22BnY3iWXHSlYz5H/NoJNO8bP8JTlyVW1k923/MveYdnc623PuUe3jsux37tEDcN24eFR7HJb9TD2qvQ/LfqUexR7a41Xx7bDsMfWo2j+NlnpU7TsBiOKdAOqoeCcAUTwFYFK8pn0GgFLttWVxAEq1pwJo1Z4KoFV7KoBW7YEAT0uK729pfxuAZcX/3Fr2TwAx05cVDwWIu11RPBQg7lZ0XlR7JIDsdkXxCIDp5GXf2v0GBxBP3pTfAIB48qb83h7AWtlhANbKDgOwVnYYgLWywwCsn/u/AO5HMIqwcwOovdNwLESNG8BQioNfKa52YwBsakC04/MF9C1Rw4HdjhU1SCyKqOCvZCGLhXgMgKgGiUWRI9hr+aSG+bU8sP4LyliIxwW4xOI1j8pKZlB/Tjt794ANpKzdAzOgaOzdAzKiCVpmkACWM4MEIFVCyQzfQWXnPao9eA+rG+dxfXB8L1jNB4pN+bCfd4re59Gqoz9alflQ+zzb7ZROwTWlUziEIO8UZCs7hc1+AbiVW6XSE8knAAAAAElFTkSuQmCC";
+
+// src/AudioLevel/AudioLevel.tsx
+var positionValues = new Array(101).fill(0).reduce((acc, _, index) => {
+  acc[index] = Math.round(index / 100 * 4) / 4;
+  return acc;
+}, {});
+var barAnimation = keyframes({
+  from: {
+    maskSize: "4em .8em",
+    "-webkit-mask-position-y": ".1em",
+    maskPosition: "initial .1em"
+  },
+  "50%": {
+    maskSize: "4em 1em",
+    "-webkit-mask-position-y": 0,
+    maskPosition: "initial 0"
+  },
+  to: {
+    maskSize: "4em .8em",
+    "-webkit-mask-position-y": ".1em",
+    maskPosition: "initial 0.1em"
+  }
+});
+var AudioBar = () => {
+  return /* @__PURE__ */ React10.createElement(
+    Box,
+    {
+      css: {
+        width: ".25em",
+        height: "1em",
+        maskImage: `url(${audio_level_default})`,
+        "-webkit-mask-repeat": "no-repeat",
+        backgroundColor: "$on_primary_high",
+        maskSize: "4em 1em"
+      }
+    }
+  );
+};
+var AudioLevel = ({ trackId, size }) => {
+  const ref = useRef3(null);
+  const vanillaStore = useHMSVanillaStore();
+  useEffect3(() => {
+    const unsubscribe = vanillaStore.subscribe((audioLevel) => {
+      if (ref.current) {
+        let index = 0;
+        for (const child of ref.current.children) {
+          const positionX = `-${positionValues[audioLevel] * (index === 1 ? 2.5 : 1.25)}em`;
+          child.style["-webkit-mask-position-x"] = positionX;
+          child.style["mask-position"] = `${positionX} 0`;
+          child.style["animation"] = positionValues[audioLevel] > 0 ? `${barAnimation} 0.6s steps(3,jump-none) 0s infinite` : "none";
+          index++;
+        }
+      }
+    }, selectTrackAudioByID(trackId));
+    return unsubscribe;
+  }, [vanillaStore, trackId]);
+  return /* @__PURE__ */ React10.createElement(
+    Flex,
+    {
+      ref,
+      css: {
+        fontSize: size === "small" ? "0.75rem" : "1rem",
+        gap: size === "small" ? "$1" : "$2"
+      }
+    },
+    /* @__PURE__ */ React10.createElement(AudioBar, null),
+    /* @__PURE__ */ React10.createElement(AudioBar, null),
+    /* @__PURE__ */ React10.createElement(AudioBar, null)
+  );
+};
+
 // src/Popover/index.tsx
 import { Arrow as Arrow2, Close as Close2, Content as Content4, Popover as Root12, Portal as Portal3, Trigger as Trigger4 } from "@radix-ui/react-popover";
 var StyledContent2 = styled(Content4, __spreadValues({
@@ -1270,7 +1347,7 @@ var Popover2 = {
 };
 
 // src/Stats/Stats.tsx
-import React10, { Fragment } from "react";
+import React11, { Fragment } from "react";
 import {
   selectConnectionQualityByPeerID,
   selectHMSStats,
@@ -1350,7 +1427,7 @@ function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false })
   if (!(audioTrackStats || videoTrackStats)) {
     return null;
   }
-  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(
+  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(
     StatsRow,
     {
       show: isNotNullishAndNot0(availableOutgoingBitrate),
@@ -1364,71 +1441,71 @@ function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false })
       return null;
     }
     const layer = stat.rid ? simulcastMapping[stat.rid] : "";
-    return /* @__PURE__ */ React10.createElement(Fragment, null, layer && /* @__PURE__ */ React10.createElement(StatsRow, { label: layer.toUpperCase(), value: "" }), /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React11.createElement(Fragment, null, layer && /* @__PURE__ */ React11.createElement(StatsRow, { label: layer.toUpperCase(), value: "" }), /* @__PURE__ */ React11.createElement(
       StatsRow,
       {
         show: isNotNullishAndNot0(stat.frameWidth),
         label: "Width",
         value: (_a8 = stat.frameWidth) == null ? void 0 : _a8.toString()
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React11.createElement(
       StatsRow,
       {
         show: isNotNullishAndNot0(stat.frameHeight),
         label: "Height",
         value: (_b8 = stat.frameHeight) == null ? void 0 : _b8.toString()
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React11.createElement(
       StatsRow,
       {
         show: isNotNullishAndNot0(stat.framesPerSecond),
         label: "FPS",
         value: `${stat.framesPerSecond} ${isNotNullishAndNot0(stat.framesDropped) ? `(${stat.framesDropped} dropped)` : ""}`
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React11.createElement(
       StatsRow,
       {
         show: isNotNullish(stat.bitrate),
         label: "Bitrate(V)",
         value: formatBytes(stat.bitrate, "b/s")
       }
-    ), /* @__PURE__ */ React10.createElement(Stats.Gap, null));
-  })) : /* @__PURE__ */ React10.createElement(Fragment, null, /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React11.createElement(Stats.Gap, null));
+  })) : /* @__PURE__ */ React11.createElement(Fragment, null, /* @__PURE__ */ React11.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(videoTrackStats == null ? void 0 : videoTrackStats.frameWidth),
       label: "Width",
       value: (_b7 = videoTrackStats == null ? void 0 : videoTrackStats.frameWidth) == null ? void 0 : _b7.toString()
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.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__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.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__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     StatsRow,
     {
       show: isNotNullish(videoTrackStats == null ? void 0 : videoTrackStats.bitrate),
       label: "Bitrate(V)",
       value: formatBytes(videoTrackStats == null ? void 0 : videoTrackStats.bitrate, "b/s")
     }
-  )), /* @__PURE__ */ React10.createElement(
+  )), /* @__PURE__ */ React11.createElement(
     StatsRow,
     {
       show: isNotNullish(audioTrackStats == null ? void 0 : audioTrackStats.bitrate),
       label: "Bitrate(A)",
       value: formatBytes(audioTrackStats == null ? void 0 : audioTrackStats.bitrate, "b/s")
     }
-  ), /* @__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 }))));
+  ), /* @__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 }))));
 }
 var PacketLostAndJitter = ({
   audioTrackStats,
@@ -1438,14 +1515,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__ */ 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: (_a7 = videoStats == null ? void 0 : videoStats.jitter) == null ? void 0 : _a7.toFixed(4) }), /* @__PURE__ */ React10.createElement(StatsRow, { show: isNotNullish(audioStats == null ? void 0 : audioStats.jitter), label: "Jitter(A)", value: (_b7 = audioStats == null ? void 0 : audioStats.jitter) == null ? void 0 : _b7.toFixed(4) }));
+  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: (_a7 = videoStats == null ? void 0 : videoStats.jitter) == null ? void 0 : _a7.toFixed(4) }), /* @__PURE__ */ React11.createElement(StatsRow, { show: isNotNullish(audioStats == null ? void 0 : audioStats.jitter), label: "Jitter(A)", value: (_b7 = audioStats == null ? void 0 : audioStats.jitter) == null ? void 0 : _b7.toFixed(4) }));
 };
 var TrackPacketsLostRow = ({
   stats,
   label
 }) => {
   const packetsLostRate = `${(stats == null ? void 0 : stats.packetsLostRate) ? stats.packetsLostRate.toFixed(2) : 0}/s`;
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     StatsRow,
     {
       show: isNotNullishAndNot0(stats == null ? void 0 : stats.packetsLost),
@@ -1460,10 +1537,10 @@ var RawStatsRow = ({
   tooltip = "",
   show = true
 }) => {
-  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);
+  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);
 };
-var StatsRow = React10.memo(RawStatsRow);
+var StatsRow = React11.memo(RawStatsRow);
 function isNotNullishAndNot0(value) {
   return isNotNullish(value) && value !== 0;
 }
@@ -1542,7 +1619,7 @@ var RadioGroup = {
 };
 
 // src/Toast/Toast.tsx
-import React11 from "react";
+import React12 from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { CrossIcon as CrossIcon2 } from "@100mslive/react-icons";
 var getToastVariant = (base) => {
@@ -1633,7 +1710,7 @@ var ToastViewport = styled(ToastPrimitives.Viewport, {
   zIndex: 1e3
 });
 var DefaultClose = ({ css: css2 }) => {
-  return /* @__PURE__ */ React11.createElement(ToastClose, { css: css2, asChild: true }, /* @__PURE__ */ React11.createElement(IconButton, null, /* @__PURE__ */ React11.createElement(CrossIcon2, null)));
+  return /* @__PURE__ */ React12.createElement(ToastClose, { css: css2, asChild: true }, /* @__PURE__ */ React12.createElement(IconButton, null, /* @__PURE__ */ React12.createElement(CrossIcon2, null)));
 };
 var HMSToast = (_a7) => {
   var _b7 = _a7, {
@@ -1651,7 +1728,7 @@ var HMSToast = (_a7) => {
     "action",
     "inlineAction"
   ]);
-  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));
+  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));
 };
 var Toast = {
   Provider: ToastPrimitives.Provider,
@@ -1665,7 +1742,7 @@ var Toast = {
 };
 
 // src/Accordion/Accordion.tsx
-import React12 from "react";
+import React13 from "react";
 import * as BaseAccordion from "@radix-ui/react-accordion";
 import { ChevronUpIcon } from "@100mslive/react-icons";
 var StyledAccordion = styled(BaseAccordion.Root, {});
@@ -1717,14 +1794,14 @@ var StyledChevron = styled(ChevronUpIcon, {
 });
 var AccordionRoot = StyledAccordion;
 var AccordionItem = StyledItem;
-var AccordionHeader = React12.forwardRef((_a7, forwardedRef) => {
+var AccordionHeader = React13.forwardRef((_a7, forwardedRef) => {
   var _b7 = _a7, { children, iconStyles, css: css2 } = _b7, props = __objRest(_b7, ["children", "iconStyles", "css"]);
-  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 })));
+  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 })));
 });
-var AccordionContent = React12.forwardRef(
+var AccordionContent = React13.forwardRef(
   (_a7, forwardedRef) => {
     var _b7 = _a7, { children, contentStyles } = _b7, props = __objRest(_b7, ["children", "contentStyles"]);
-    return /* @__PURE__ */ React12.createElement(StyledContent3, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), /* @__PURE__ */ React12.createElement(Box, { css: contentStyles }, children));
+    return /* @__PURE__ */ React13.createElement(StyledContent3, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), /* @__PURE__ */ React13.createElement(Box, { css: contentStyles }, children));
   }
 );
 
@@ -1918,14 +1995,14 @@ var Tabs = {
 };
 
 // src/QRCode/QRCode.tsx
-import React13 from "react";
+import React14 from "react";
 import { QRCodeSVG } from "qrcode.react";
 var QRCode = (props) => {
-  return /* @__PURE__ */ React13.createElement(QRCodeSVG, __spreadValues({ style: { width: "100%", height: "100%" } }, props));
+  return /* @__PURE__ */ React14.createElement(QRCodeSVG, __spreadValues({ style: { width: "100%", height: "100%" } }, props));
 };
 
 // src/Link/Link.tsx
-import React14 from "react";
+import React15 from "react";
 import * as icons from "@100mslive/react-icons";
 var LinkComponent = styled("a", {
   textDecoration: "none",
@@ -1951,9 +2028,9 @@ var LinkComponent = styled("a", {
 });
 var Link = (_a7) => {
   var _b7 = _a7, { iconSide = "left", icon, color = "primary", children } = _b7, rest = __objRest(_b7, ["iconSide", "icon", "color", "children"]);
-  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);
+  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);
 };
 
 // src/Collapsible/Collapsible.tsx
@@ -1987,18 +2064,18 @@ var Collapsible = {
 };
 
 // src/Prebuilt/App.tsx
-import React61, { Suspense as Suspense2, useEffect as useEffect29, useRef as useRef10 } from "react";
+import React59, { Suspense as Suspense2, useEffect as useEffect29, useRef as useRef10 } from "react";
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams5 } from "react-router-dom";
 import {
   HMSReactiveStore,
   HMSRoomProvider,
   selectIsConnectedToRoom as selectIsConnectedToRoom6,
-  useHMSActions as useHMSActions20,
-  useHMSStore as useHMSStore30
+  useHMSActions as useHMSActions18,
+  useHMSStore as useHMSStore26
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/AppData/AppData.jsx
-import React15, { useEffect as useEffect3 } from "react";
+import React16, { useEffect as useEffect4 } from "react";
 import {
   HMSRoomState,
   selectAvailableRoleNames,
@@ -2084,7 +2161,7 @@ var useUserPreferences = (key, defaultPreference) => {
 
 // src/Prebuilt/components/AppData/useSidepane.js
 import { useCallback as useCallback3 } from "react";
-import { selectAppData, useHMSActions, useHMSStore as useHMSStore2, useHMSVanillaStore } from "@100mslive/react-sdk";
+import { selectAppData, useHMSActions, useHMSStore as useHMSStore2, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/common/constants.js
 import { parsedUserAgent } from "@100mslive/react-sdk";
@@ -2126,7 +2203,7 @@ var APP_DATA = {
   pdfConfig: "pdfConfig",
   minimiseInset: "minimiseInset",
   activeScreensharePeerId: "activeScreensharePeerId",
-  disableNotificiations: "disableNotificiations"
+  disableNotifications: "disableNotifications"
 };
 var UI_SETTINGS = {
   isAudioOnly: "isAudioOnly",
@@ -2182,7 +2259,7 @@ var useSidepaneState = () => {
 };
 var useSidepaneToggle = (sidepaneType) => {
   const hmsActions = useHMSActions();
-  const vanillaStore = useHMSVanillaStore();
+  const vanillaStore = useHMSVanillaStore2();
   const toggleSidepane = useCallback3(() => {
     const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sidePane)) === sidepaneType;
     hmsActions.setAppData(APP_DATA.sidePane, !isOpen ? sidepaneType : "");
@@ -2208,7 +2285,7 @@ import {
   selectVideoTrackByPeerID,
   useHMSActions as useHMSActions2,
   useHMSStore as useHMSStore3,
-  useHMSVanillaStore as useHMSVanillaStore2
+  useHMSVanillaStore as useHMSVanillaStore3
 } from "@100mslive/react-sdk";
 var useUISettings = (uiSettingKey) => {
   const uiSettings = useHMSStore3(selectAppDataByPath(APP_DATA.uiSettings, uiSettingKey));
@@ -2252,7 +2329,7 @@ var useSubscribedNotifications = (notificationKey) => {
   return notificationPreference;
 };
 var useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotificiations));
+  const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotifications));
   return notificationPreference;
 };
 var useSetSubscribedNotifications = (notificationKey) => {
@@ -2288,7 +2365,7 @@ var useSetAppDataByKey = (appDataKey) => {
 };
 var useSetAppData = ({ key1, key2 }) => {
   const actions = useHMSActions2();
-  const store = useHMSVanillaStore2();
+  const store = useHMSVanillaStore3();
   const [, setPreferences] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
   const setValue = useCallback4(
     (value) => {
@@ -2351,9 +2428,9 @@ var initialAppData = {
   [APP_DATA.authToken]: "",
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: "",
-  [APP_DATA.disableNotificiations]: false
+  [APP_DATA.disableNotifications]: false
 };
-var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
+var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions3();
   const isConnected = useHMSStore4(selectIsConnectedToRoom);
   const sidePane = useSidepaneState();
@@ -2363,27 +2440,27 @@ var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
   const rolesMap = useHMSStore4(selectRolesMap);
   const localPeerRole = useHMSStore4(selectLocalPeerRoleName);
   const appData = useHMSStore4(selectFullAppData);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
       resetSidePane();
     }
   }, [isConnected, sidePane, resetSidePane]);
-  useEffect3(() => {
+  useEffect4(() => {
     hmsActions.initAppData(__spreadValues(__spreadValues({}, initialAppData), appData));
     hmsActions.setFrameworkInfo({
       type: "react-web",
       isPrebuilt: true,
-      version: React15.version
+      version: React16.version
     });
   }, [hmsActions]);
-  useEffect3(() => {
+  useEffect4(() => {
     const uiSettings = preferences || {};
     const updatedSettings = __spreadProps(__spreadValues({}, uiSettings), {
       [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID
     });
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
   }, [preferences, hmsActions]);
-  useEffect3(() => {
+  useEffect4(() => {
     const appData2 = {
       [APP_DATA.tokenEndpoint]: tokenEndpoint,
       [APP_DATA.appConfig]: getAppDetails(appDetails)
@@ -2392,19 +2469,19 @@ var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
       hmsActions.setAppData([key], appData2[key]);
     }
   }, [appDetails, tokenEndpoint, hmsActions]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!preferences.subscribedNotifications) {
       return;
     }
     hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
   }, [preferences.subscribedNotifications, hmsActions]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (localPeerRole) {
       const config2 = normalizeAppPolicyConfig(roleNames, rolesMap);
       hmsActions.setAppData(APP_DATA.appLayout, config2[localPeerRole]);
     }
   }, [roleNames, rolesMap, localPeerRole, hmsActions]);
-  return /* @__PURE__ */ React15.createElement(ResetStreamingStart, null);
+  return /* @__PURE__ */ React16.createElement(ResetStreamingStart, null);
 });
 var ResetStreamingStart = () => {
   const { isHLSRunning, isRTMPRunning, isBrowserRecordingOn } = useRecordingStreaming();
@@ -2416,19 +2493,19 @@ var ResetStreamingStart = () => {
   const [rtmpStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
   const isStreamingOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isBrowserRecordingOn && recordingStarted) {
       setRecordingStarted(false);
     }
   }, [isBrowserRecordingOn, recordingStarted, setRecordingStarted]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (roomState === HMSRoomState.Disconnected) {
       setHLSStarted(false);
       setRecordingStarted(false);
       setRTMPStarted(false);
     }
   }, [roomState, setHLSStarted, setRTMPStarted, setRecordingStarted]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isHLSRunning || hlsError) {
       if (hlsStarted) {
         setHLSStarted(false);
@@ -2438,7 +2515,7 @@ var ResetStreamingStart = () => {
       }
     }
   }, [isHLSRunning, hlsStarted, setHLSStarted, hlsError, isStreamingOpen, toggleStreaming]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isRTMPRunning || rtmpError || isBrowserRecordingOn) {
       if (rtmpStarted) {
         setRTMPStarted(false);
@@ -2452,17 +2529,18 @@ var ResetStreamingStart = () => {
 };
 
 // src/Prebuilt/components/AuthToken.jsx
-import React18, { useEffect as useEffect4, useState as useState4 } from "react";
+import React20, { useEffect as useEffect5, useState as useState4 } from "react";
 import { useHMSActions as useHMSActions4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/AppContext.tsx
-import React16, { useContext } from "react";
-var HMSPrebuiltContext = React16.createContext({
+import React17, { useContext } from "react";
+var HMSPrebuiltContext = React17.createContext({
   roomCode: "",
   userName: "",
   userId: "",
   endpoints: {},
-  onLeave: void 0
+  onLeave: void 0,
+  onJoin: void 0
 });
 HMSPrebuiltContext.displayName = "HMSPrebuiltContext";
 var useHMSPrebuiltContext = () => {
@@ -2474,15 +2552,21 @@ var useHMSPrebuiltContext = () => {
 };
 
 // src/Prebuilt/primitives/DialogContent.jsx
-import React17, { useRef as useRef3 } from "react";
+import React19, { useRef as useRef4 } from "react";
 import { CheckIcon, CloudUploadIcon, CrossIcon as CrossIcon3 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/PrebuiltDialogPortal.tsx
+import React18 from "react";
+var PrebuiltDialogPortal = ({ children }) => /* @__PURE__ */ React18.createElement(Dialog.Portal, { container: document.getElementById("prebuilt-container") }, children);
+
+// src/Prebuilt/primitives/DialogContent.jsx
 var DialogContent = (_a7) => {
   var _b7 = _a7, { Icon: Icon2, title, closeable = true, children, css: css2, iconCSS = {} } = _b7, props = __objRest(_b7, ["Icon", "title", "closeable", "children", "css", "iconCSS"]);
-  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)));
+  return /* @__PURE__ */ React19.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React19.createElement(Dialog.Overlay, null), /* @__PURE__ */ React19.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ React19.createElement(Dialog.Title, null, /* @__PURE__ */ React19.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React19.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon2 ? /* @__PURE__ */ React19.createElement(Box, { css: __spreadValues({ mr: "$2", color: "$on_primary_high" }, iconCSS) }, /* @__PURE__ */ React19.createElement(Icon2, null)) : null, /* @__PURE__ */ React19.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ React19.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ React19.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ React19.createElement(Box, null, children)));
 };
 var ErrorDialog = (_a7) => {
   var _b7 = _a7, { open = true, onOpenChange, title, children } = _b7, props = __objRest(_b7, ["open", "onOpenChange", "title", "children"]);
-  return /* @__PURE__ */ React17.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React19.createElement(
     DialogContent,
     __spreadValues({
       Icon: CrossIcon3,
@@ -2493,10 +2577,10 @@ var ErrorDialog = (_a7) => {
       closeable: false,
       iconCSS: { color: "$alert_error_default" }
     }, props),
-    /* @__PURE__ */ React17.createElement(Box, { css: { mt: "$lg" } }, children)
+    /* @__PURE__ */ React19.createElement(Box, { css: { mt: "$lg" } }, children)
   ));
 };
-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)), typeof body === "string" ? /* @__PURE__ */ React17.createElement(
+var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon2 }) => /* @__PURE__ */ React19.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React19.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React19.createElement(Dialog.Overlay, null), /* @__PURE__ */ React19.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React19.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md" } }, Icon2 ? Icon2 : null, /* @__PURE__ */ React19.createElement(Text, { variant: "h6" }, title)), typeof body === "string" ? /* @__PURE__ */ React19.createElement(
   Text,
   {
     variant: "md",
@@ -2508,7 +2592,7 @@ var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Acc
     }
   },
   body
-) : /* @__PURE__ */ React17.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__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))))));
+) : /* @__PURE__ */ React19.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React19.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React19.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React19.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React19.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React19.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React19.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
 var DialogRow = ({ children, breakSm = false, css: css2, justify = "between" }) => {
   let finalCSS = {
     margin: "$10 0",
@@ -2523,7 +2607,7 @@ var DialogRow = ({ children, breakSm = false, css: css2, justify = "between" })
   if (css2) {
     finalCSS = Object.assign(finalCSS, css2);
   }
-  return /* @__PURE__ */ React17.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
+  return /* @__PURE__ */ React19.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
 };
 var DialogCol = (_a7) => {
   var _b7 = _a7, { children, breakSm = false, css: css2, align = "center", justify = "between" } = _b7, props = __objRest(_b7, ["children", "breakSm", "css", "align", "justify"]);
@@ -2539,20 +2623,20 @@ var DialogCol = (_a7) => {
   if (css2) {
     finalCSS = Object.assign(finalCSS, css2);
   }
-  return /* @__PURE__ */ React17.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
+  return /* @__PURE__ */ React19.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
 };
 var DialogSelect = (_a7) => {
   var _b7 = _a7, { title, options, keyField, labelField, selected, onChange } = _b7, props = __objRest(_b7, ["title", "options", "keyField", "labelField", "selected", "onChange"]);
-  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) => {
+  return /* @__PURE__ */ React19.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React19.createElement(Label3, null, title), /* @__PURE__ */ React19.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ React19.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ React19.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__ */ React17.createElement("option", { value: id, key: id }, label);
+    return /* @__PURE__ */ React19.createElement("option", { value: id, key: id }, label);
   }))));
 };
 var DialogInputFile = (_a7) => {
   var _b7 = _a7, { value, onChange, placeholder, disabled, type } = _b7, props = __objRest(_b7, ["value", "onChange", "placeholder", "disabled", "type"]);
-  const inputRef = useRef3();
-  return /* @__PURE__ */ React17.createElement(
+  const inputRef = useRef4();
+  return /* @__PURE__ */ React19.createElement(
     DialogCol,
     {
       breakSm: true,
@@ -2573,7 +2657,7 @@ var DialogInputFile = (_a7) => {
       },
       gap: "8"
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(
       IconButton,
       {
         variant: "standard",
@@ -2587,7 +2671,7 @@ var DialogInputFile = (_a7) => {
           }
         }
       },
-      /* @__PURE__ */ React17.createElement(
+      /* @__PURE__ */ React19.createElement(
         CloudUploadIcon,
         {
           style: {
@@ -2597,7 +2681,7 @@ var DialogInputFile = (_a7) => {
         }
       )
     ),
-    /* @__PURE__ */ React17.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React19.createElement(
       Input,
       __spreadValues({
         ref: inputRef,
@@ -2609,7 +2693,7 @@ var DialogInputFile = (_a7) => {
         type,
         hidden: true
       }, props)
-    ), /* @__PURE__ */ React17.createElement(
+    ), /* @__PURE__ */ React19.createElement(
       IconButton,
       {
         variant: "standard",
@@ -2623,20 +2707,20 @@ var DialogInputFile = (_a7) => {
           }
         }
       },
-      /* @__PURE__ */ React17.createElement(Text, { variant: "md" }, placeholder)
+      /* @__PURE__ */ React19.createElement(Text, { variant: "md" }, placeholder)
     ))
   );
 };
 
 // src/Prebuilt/components/AuthToken.jsx
-var AuthToken = React18.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
+var AuthToken = React20.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
   const hmsActions = useHMSActions4();
   const tokenEndpoint = useTokenEndpoint();
   const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState4({ title: "", body: "" });
   let authToken = defaultAuthToken;
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
-  useEffect4(() => {
+  useEffect5(() => {
     if (authToken) {
       setAuthTokenInAppData(authToken);
       return;
@@ -2647,7 +2731,7 @@ var AuthToken = React18.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
     hmsActions.getAuthTokenByRoomCode({ roomCode, userId }, { endpoint: authTokenByRoomCodeEndpoint }).then((token) => setAuthTokenInAppData(token)).catch((error2) => setError(convertError(error2)));
   }, [hmsActions, tokenEndpoint, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
   if (error.title) {
-    return /* @__PURE__ */ React18.createElement(ErrorDialog, { title: error.title }, error.body);
+    return /* @__PURE__ */ React20.createElement(ErrorDialog, { title: error.title }, error.body);
   }
   return null;
 });
@@ -2691,11 +2775,11 @@ var convertError = (error) => {
 var Link2 = styled("a", {
   color: "#2f80e1"
 });
-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 ErrorWithSupportLink = (errorMessage) => /* @__PURE__ */ React20.createElement("div", null, errorMessage, " If you think this is a mistake on our side, please create", " ", /* @__PURE__ */ React20.createElement(Link2, { target: "_blank", href: "https://github.com/100mslive/100ms-web/issues", rel: "noreferrer" }, "an issue"), " ", "or reach out over", " ", /* @__PURE__ */ React20.createElement(Link2, { target: "_blank", href: "https://discord.com/invite/kGdmszyzq2", rel: "noreferrer" }, "Discord"), ".");
 var AuthToken_default = AuthToken;
 
 // src/Prebuilt/components/ErrorBoundary.jsx
-import React19, { Component } from "react";
+import React21, { Component } from "react";
 import { CopyIcon as CopyIcon2 } from "@100mslive/react-icons";
 var ErrorBoundary = class extends Component {
   constructor(props) {
@@ -2711,7 +2795,7 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.errorInfo) {
-      return /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React21.createElement(
         Flex,
         {
           align: "center",
@@ -2724,7 +2808,7 @@ var ErrorBoundary = class extends Component {
             backgroundColor: "$background_default"
           }
         },
-        /* @__PURE__ */ React19.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React21.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ React21.createElement(
           Flex,
           {
             direction: "column",
@@ -2735,8 +2819,8 @@ var ErrorBoundary = class extends Component {
               left: 0
             }
           },
-          /* @__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(
+          /* @__PURE__ */ React21.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ React21.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ React21.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ React21.createElement("br", null), ErrorWithSupportLink(`Please reload to see if it works.`)),
+          /* @__PURE__ */ React21.createElement(Flex, null, /* @__PURE__ */ React21.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ React21.createElement(
             Button,
             {
               onClick: () => {
@@ -2746,7 +2830,7 @@ var ErrorBoundary = class extends Component {
               "data-testid": "join_again_btn"
             },
             "Reload"
-          )), /* @__PURE__ */ React19.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ React19.createElement(
+          )), /* @__PURE__ */ React21.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ React21.createElement(
             Button,
             {
               onClick: () => {
@@ -2762,11 +2846,11 @@ var ErrorBoundary = class extends Component {
               css: { mx: "$8" },
               "data-testid": "join_again_btn"
             },
-            /* @__PURE__ */ React19.createElement(CopyIcon2, null),
+            /* @__PURE__ */ React21.createElement(CopyIcon2, null),
             " ",
             this.state.isErrorCopied ? "Copied" : "Copy Details"
           ))),
-          /* @__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)))
+          /* @__PURE__ */ React21.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ React21.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ React21.createElement("br", null), /* @__PURE__ */ React21.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
         ))
       );
     }
@@ -2775,15 +2859,15 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/Prebuilt/components/FullPageProgress.jsx
-import React20 from "react";
-var FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ React20.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React20.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React20.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
+import React22 from "react";
+var FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ React22.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React22.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React22.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
 var FullPageProgress_default = FullPageProgress;
 
 // src/Prebuilt/components/init/Init.jsx
-import React21, { useEffect as useEffect6 } from "react";
+import React23, { useEffect as useEffect7 } from "react";
 
 // src/Prebuilt/services/FeatureFlags.jsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { selectRoomID, useHMSStore as useHMSStore5 } from "@100mslive/react-sdk";
 var FeatureFlags = class {
   static init(roomId) {
@@ -2810,7 +2894,7 @@ __publicField(FeatureFlags, "enableStatsForNerds", define_process_env_default.RE
 __publicField(FeatureFlags, "enableWhiteboard", define_process_env_default.REACT_APP_ENABLE_WHITEBOARD && define_process_env_default.REACT_APP_PUSHER_APP_KEY && define_process_env_default.REACT_APP_PUSHER_AUTHENDPOINT);
 function FeatureFlagsInit() {
   const roomId = useHMSStore5(selectRoomID);
-  useEffect5(() => {
+  useEffect6(() => {
     if (roomId) {
       FeatureFlags.init(roomId);
     }
@@ -2821,10 +2905,10 @@ function FeatureFlagsInit() {
 // src/Prebuilt/components/init/Init.jsx
 var Init = () => {
   const { toggleTheme } = useTheme();
-  useEffect6(() => {
+  useEffect7(() => {
     window.toggleUiTheme = toggleTheme;
   }, [toggleTheme]);
-  useEffect6(() => {
+  useEffect7(() => {
     function resetHeight() {
       var _a7;
       document.body.style.height = `${((_a7 = window.visualViewport) == null ? void 0 : _a7.height) || window.innerHeight}px`;
@@ -2835,17 +2919,17 @@ var Init = () => {
       window.removeEventListener("resize", resetHeight);
     };
   }, []);
-  return /* @__PURE__ */ React21.createElement(FeatureFlagsInit, null);
+  return /* @__PURE__ */ React23.createElement(FeatureFlagsInit, null);
 };
 
 // src/Prebuilt/components/Input/KeyboardInputManager.js
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import {
   selectAppData as selectAppData3,
   selectIsLocalAudioEnabled,
   selectIsLocalVideoEnabled,
   useHMSActions as useHMSActions5,
-  useHMSVanillaStore as useHMSVanillaStore3
+  useHMSVanillaStore as useHMSVanillaStore4
 } from "@100mslive/react-sdk";
 var isEvenListenersAttached = false;
 var _actions, _store, _toggleAudio, _toggleVideo, _hideSidepane, _toggleStatsForNerds, _toggleHlsStats, _keyDownHandler, _bind, _unbind;
@@ -2932,9 +3016,9 @@ _keyDownHandler = new WeakMap();
 _bind = new WeakMap();
 _unbind = new WeakMap();
 var KeyboardHandler = () => {
-  const store = useHMSVanillaStore3();
+  const store = useHMSVanillaStore4();
   const actions = useHMSActions5();
-  useEffect7(() => {
+  useEffect8(() => {
     const keyboardManager = new KeyboardInputManager(store, actions);
     keyboardManager.bindAllShortcuts();
     return keyboardManager.unbindAllShortcuts;
@@ -2943,7 +3027,7 @@ var KeyboardHandler = () => {
 };
 
 // src/Prebuilt/components/Notifications/Notifications.jsx
-import React30, { useCallback as useCallback8, useEffect as useEffect16 } from "react";
+import React32, { useCallback as useCallback8, useEffect as useEffect17 } from "react";
 import { useNavigate as useNavigate2, useParams as useParams2 } from "react-router-dom";
 import {
   HMSNotificationTypes as HMSNotificationTypes7,
@@ -2953,15 +3037,15 @@ import {
   useCustomEvent,
   useHMSNotifications as useHMSNotifications7,
   useHMSStore as useHMSStore7,
-  useHMSVanillaStore as useHMSVanillaStore4
+  useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/provider/roomLayoutProvider/index.tsx
-import React22 from "react";
+import React24 from "react";
 import merge from "lodash.merge";
 
 // src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef5, useState as useState5 } from "react";
 
 // src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
 import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
@@ -3030,8 +3114,8 @@ var useFetchRoomLayout = ({
   authToken = ""
 }) => {
   const [layout, setLayout] = useState5(void 0);
-  const layoutResp = useRef4();
-  const isFetchInProgress = useRef4(false);
+  const layoutResp = useRef5();
+  const isFetchInProgress = useRef5(false);
   const updateRoomLayoutForRole = useCallback5((role) => {
     var _a7;
     if (!layoutResp.current) {
@@ -3042,7 +3126,7 @@ var useFetchRoomLayout = ({
       setLayout(layout2);
     }
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     (() => __async(void 0, null, function* () {
       var _a7, _b7;
       if (isFetchInProgress.current || !authToken) {
@@ -3078,7 +3162,7 @@ var useFetchRoomLayout = ({
 };
 
 // src/Prebuilt/provider/roomLayoutProvider/index.tsx
-var RoomLayoutContext = React22.createContext(void 0);
+var RoomLayoutContext = React24.createContext(void 0);
 var RoomLayoutProvider = ({
   children,
   roomLayoutEndpoint,
@@ -3087,19 +3171,19 @@ var RoomLayoutProvider = ({
   const authToken = useAuthToken();
   const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
   const mergedLayout = authToken && layout ? merge(layout, overrideLayout) : layout;
-  return /* @__PURE__ */ React22.createElement(RoomLayoutContext.Provider, { value: { layout: mergedLayout, updateRoomLayoutForRole } }, children);
+  return /* @__PURE__ */ React24.createElement(RoomLayoutContext.Provider, { value: { layout: mergedLayout, updateRoomLayoutForRole } }, children);
 };
 var useRoomLayout = () => {
   var _a7;
-  return (_a7 = React22.useContext(RoomLayoutContext)) == null ? void 0 : _a7.layout;
+  return (_a7 = React24.useContext(RoomLayoutContext)) == null ? void 0 : _a7.layout;
 };
 var useUpdateRoomLayout = () => {
   var _a7;
-  return (_a7 = React22.useContext(RoomLayoutContext)) == null ? void 0 : _a7.updateRoomLayoutForRole;
+  return (_a7 = React24.useContext(RoomLayoutContext)) == null ? void 0 : _a7.updateRoomLayoutForRole;
 };
 
 // src/Prebuilt/components/Toast/ToastConfig.jsx
-import React23, { useCallback as useCallback6 } from "react";
+import React25, { useCallback as useCallback6 } from "react";
 import { selectPeerByID, useHMSActions as useHMSActions6, useHMSStore as useHMSStore6 } from "@100mslive/react-sdk";
 import {
   ChatUnreadIcon,
@@ -3109,15 +3193,15 @@ import {
   PeopleRemoveIcon,
   PoorConnectivityIcon
 } from "@100mslive/react-icons";
-var ChatAction = React23.forwardRef((_, ref) => {
+var ChatAction = React25.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__ */ React25.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
 });
-var HandRaiseAction = React23.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
+var HandRaiseAction = React25.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
   var _a7, _b7, _c;
   const hmsActions = useHMSActions6();
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
@@ -3139,7 +3223,7 @@ var HandRaiseAction = React23.forwardRef(({ id = "", isSingleHandRaise = true },
   if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
+  return /* @__PURE__ */ React25.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
 });
 var ToastConfig = {
   PEER_LIST: {
@@ -3148,18 +3232,18 @@ var ToastConfig = {
       if (notification.data.length === 1) {
         return {
           title: `${(_a7 = notification.data[0]) == null ? void 0 : _a7.name} joined`,
-          icon: /* @__PURE__ */ React23.createElement(PeopleAddIcon, null)
+          icon: /* @__PURE__ */ React25.createElement(PeopleAddIcon, null)
         };
       }
       return {
         title: `${(_b7 = notification.data[notification.data.length - 1]) == null ? void 0 : _b7.name} and ${notification.data.length - 1} others joined`,
-        icon: /* @__PURE__ */ React23.createElement(PeopleAddIcon, null)
+        icon: /* @__PURE__ */ React25.createElement(PeopleAddIcon, null)
       };
     },
     multiple: (notifications) => {
       return {
         title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: /* @__PURE__ */ React23.createElement(PeopleAddIcon, null)
+        icon: /* @__PURE__ */ React25.createElement(PeopleAddIcon, null)
       };
     }
   },
@@ -3168,13 +3252,13 @@ var ToastConfig = {
       var _a7;
       return {
         title: `${(_a7 = notification.data) == null ? void 0 : _a7.name} joined`,
-        icon: /* @__PURE__ */ React23.createElement(PeopleAddIcon, null)
+        icon: /* @__PURE__ */ React25.createElement(PeopleAddIcon, null)
       };
     },
     multiple: function(notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-        icon: /* @__PURE__ */ React23.createElement(PeopleAddIcon, null)
+        icon: /* @__PURE__ */ React25.createElement(PeopleAddIcon, null)
       };
     }
   },
@@ -3183,13 +3267,13 @@ var ToastConfig = {
       var _a7;
       return {
         title: `${(_a7 = notification.data) == null ? void 0 : _a7.name} left`,
-        icon: /* @__PURE__ */ React23.createElement(PeopleRemoveIcon, null)
+        icon: /* @__PURE__ */ React25.createElement(PeopleRemoveIcon, null)
       };
     },
     multiple: function(notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-        icon: /* @__PURE__ */ React23.createElement(PeopleRemoveIcon, null)
+        icon: /* @__PURE__ */ React25.createElement(PeopleRemoveIcon, null)
       };
     }
   },
@@ -3198,8 +3282,8 @@ var ToastConfig = {
       var _a7, _b7;
       return {
         title: `${(_a7 = notification.data) == null ? void 0 : _a7.name} raised hand`,
-        icon: /* @__PURE__ */ React23.createElement(HandIcon, null),
-        action: /* @__PURE__ */ React23.createElement(HandRaiseAction, { id: (_b7 = notification.data) == null ? void 0 : _b7.id })
+        icon: /* @__PURE__ */ React25.createElement(HandIcon, null),
+        action: /* @__PURE__ */ React25.createElement(HandRaiseAction, { id: (_b7 = notification.data) == null ? void 0 : _b7.id })
       };
     },
     multiple: (notifications) => {
@@ -3210,8 +3294,8 @@ var ToastConfig = {
       })).size;
       return {
         title: `${(_a7 = notifications[notifications.length - 1].data) == null ? void 0 : _a7.name} ${count > 1 ? `${count} and others` : ""} raised hand`,
-        icon: /* @__PURE__ */ React23.createElement(HandIcon, null),
-        action: /* @__PURE__ */ React23.createElement(HandRaiseAction, { isSingleHandRaise: false })
+        icon: /* @__PURE__ */ React25.createElement(HandIcon, null),
+        action: /* @__PURE__ */ React25.createElement(HandRaiseAction, { isSingleHandRaise: false })
       };
     }
   },
@@ -3220,15 +3304,15 @@ var ToastConfig = {
       var _a7;
       return {
         title: `New message from ${(_a7 = notification.data) == null ? void 0 : _a7.senderName}`,
-        icon: /* @__PURE__ */ React23.createElement(ChatUnreadIcon, null),
-        action: /* @__PURE__ */ React23.createElement(ChatAction, null)
+        icon: /* @__PURE__ */ React25.createElement(ChatUnreadIcon, null),
+        action: /* @__PURE__ */ React25.createElement(ChatAction, null)
       };
     },
     multiple: (notifications) => {
       return {
         title: `${notifications.length} new messages`,
-        icon: /* @__PURE__ */ React23.createElement(ChatUnreadIcon, null),
-        action: /* @__PURE__ */ React23.createElement(ChatAction, null)
+        icon: /* @__PURE__ */ React25.createElement(ChatUnreadIcon, null),
+        action: /* @__PURE__ */ React25.createElement(ChatAction, null)
       };
     }
   },
@@ -3236,7 +3320,7 @@ var ToastConfig = {
     single: () => {
       return {
         title: `You are now connected`,
-        icon: /* @__PURE__ */ React23.createElement(ConnectivityIcon, null),
+        icon: /* @__PURE__ */ React25.createElement(ConnectivityIcon, null),
         variant: "success",
         duration: 3e3
       };
@@ -3248,7 +3332,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__ */ React25.createElement(PoorConnectivityIcon, null),
         variant: "warning",
         duration: 3e4
       };
@@ -3353,11 +3437,11 @@ var ToastBatcher = {
 ToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));
 
 // src/Prebuilt/components/Notifications/AutoplayBlockedModal.jsx
-import React24 from "react";
+import React26 from "react";
 import { useAutoplayError } from "@100mslive/react-sdk";
 function AutoplayBlockedModal() {
   const { error, resetError, unblockAudio } = useAutoplayError();
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(
     Dialog.Root,
     {
       open: !!error,
@@ -3368,7 +3452,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__ */ React26.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ React26.createElement(DialogRow, null, /* @__PURE__ */ React26.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ React26.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React26.createElement(
       Button,
       {
         variant: "primary",
@@ -3383,11 +3467,11 @@ function AutoplayBlockedModal() {
 }
 
 // src/Prebuilt/components/Notifications/InitErrorModal.jsx
-import React25, { useEffect as useEffect9, useState as useState6 } from "react";
+import React27, { useEffect as useEffect10, useState as useState6 } from "react";
 var InitErrorModal = ({ notification }) => {
   const [showModal, setShowModal] = useState6(false);
   const [info, setInfo] = useState6({ title: "Init Error", description: "" });
-  useEffect9(() => {
+  useEffect10(() => {
     const data = notification == null ? void 0 : notification.data;
     if (!data || data.action !== "INIT") {
       return;
@@ -3407,11 +3491,11 @@ 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__ */ React27.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ React27.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ React27.createElement("br", null), "Current URL - ", window.location.href));
 };
 
 // src/Prebuilt/components/Notifications/PeerNotifications.jsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 import { HMSNotificationTypes, useHMSNotifications } from "@100mslive/react-sdk";
 var notificationTypes = [
   HMSNotificationTypes.PEER_LIST,
@@ -3422,7 +3506,7 @@ var PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!(notification == null ? void 0 : notification.data)) {
       return;
     }
@@ -3452,7 +3536,7 @@ var PeerNotifications = () => {
 };
 
 // src/Prebuilt/components/Notifications/PermissionErrorModal.jsx
-import React26, { useEffect as useEffect11, useState as useState7 } from "react";
+import React28, { useEffect as useEffect12, useState as useState7 } from "react";
 import { useMedia } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes2, useHMSNotifications as useHMSNotifications2 } from "@100mslive/react-sdk";
 
@@ -3468,7 +3552,7 @@ function PermissionErrorModal() {
   const [deviceType, setDeviceType] = useState7("");
   const [isSystemError, setIsSystemError] = useState7(false);
   const isMobile = useMedia(config.media.md);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a7, _b7, _c, _d, _e;
     if (!notification || ((_a7 = notification.data) == null ? void 0 : _a7.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
       return;
@@ -3489,15 +3573,15 @@ 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__ */ React28.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ React28.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React28.createElement(Dialog.Overlay, null), /* @__PURE__ */ React28.createElement(Dialog.Content, { css: { w: "min(380px, 90%)", p: "$8" } }, /* @__PURE__ */ React28.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, alt: "iOS Permission flow" }) : null,
-    isMobile && isAndroid ? /* @__PURE__ */ React26.createElement(
+    isMobile && isIOS ? /* @__PURE__ */ React28.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default, alt: "iOS Permission flow" }) : null,
+    isMobile && isAndroid ? /* @__PURE__ */ React28.createElement(
       "img",
       {
         src: android_perm_1_default,
@@ -3505,12 +3589,12 @@ function PermissionErrorModal() {
         alt: "Android Permission flow "
       }
     ) : 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;
+    /* @__PURE__ */ React28.createElement(Text, { variant: "h6" }, "We can't access your ", deviceType)
+  ), /* @__PURE__ */ React28.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__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ React28.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null, isMobile && isAndroid ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ React28.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null, !isMobile ? /* @__PURE__ */ React28.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ React28.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null))) : null;
 }
 
 // src/Prebuilt/components/Notifications/ReconnectNotifications.jsx
-import React27, { useEffect as useEffect12, useState as useState8 } from "react";
+import React29, { useEffect as useEffect13, useState as useState8 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes3, useHMSNotifications as useHMSNotifications3 } from "@100mslive/react-sdk";
 var notificationTypes2 = [
   HMSNotificationTypes3.RECONNECTED,
@@ -3521,7 +3605,7 @@ var notificationId = null;
 var ReconnectNotifications = () => {
   const notification = useHMSNotifications3(notificationTypes2);
   const [open, setOpen] = useState8(false);
-  useEffect12(() => {
+  useEffect13(() => {
     var _a7;
     if ((notification == null ? void 0 : notification.type) === HMSNotificationTypes3.ERROR && ((_a7 = notification == null ? void 0 : notification.data) == null ? void 0 : _a7.isTerminal)) {
       setOpen(false);
@@ -3537,7 +3621,7 @@ var ReconnectNotifications = () => {
   }, [notification]);
   if (!open)
     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__ */ React29.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ React29.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ React29.createElement(Dialog.Overlay, null), /* @__PURE__ */ React29.createElement(
     Dialog.Content,
     {
       css: {
@@ -3551,12 +3635,12 @@ 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__ */ React29.createElement(Flex, { align: "center" }, /* @__PURE__ */ React29.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ React29.createElement(Loading, { size: 16 })), /* @__PURE__ */ React29.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
   )));
 };
 
 // src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.jsx
-import React28, { useEffect as useEffect13, useState as useState9 } from "react";
+import React30, { useEffect as useEffect14, useState as useState9 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes4, useHMSActions as useHMSActions7, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
 import { MicOnIcon } from "@100mslive/react-icons";
 var TrackBulkUnmuteModal = () => {
@@ -3567,7 +3651,7 @@ var TrackBulkUnmuteModal = () => {
     HMSNotificationTypes4.ROOM_ENDED,
     HMSNotificationTypes4.REMOVED_FROM_ROOM
   ]);
-  useEffect13(() => {
+  useEffect14(() => {
     switch (notification == null ? void 0 : notification.type) {
       case HMSNotificationTypes4.REMOVED_FROM_ROOM:
       case HMSNotificationTypes4.ROOM_ENDED:
@@ -3586,7 +3670,7 @@ var TrackBulkUnmuteModal = () => {
     return null;
   }
   const { requestedBy: peer, tracks, enabled } = muteNotification;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React30.createElement(
     RequestDialog,
     {
       title: "Track Unmute Request",
@@ -3604,7 +3688,7 @@ var TrackBulkUnmuteModal = () => {
 };
 
 // src/Prebuilt/components/Notifications/TrackNotifications.jsx
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 var notificationTypes3 = [
   HMSNotificationTypes5.TRACK_ADDED,
@@ -3614,7 +3698,7 @@ var notificationTypes3 = [
 ];
 var TrackNotifications = () => {
   const notification = useHMSNotifications5(notificationTypes3);
-  useEffect14(() => {
+  useEffect15(() => {
     if (notification) {
       console.debug(`[${notification.type}]`, notification);
     }
@@ -3623,7 +3707,7 @@ var TrackNotifications = () => {
 };
 
 // src/Prebuilt/components/Notifications/TrackUnmuteModal.jsx
-import React29, { useEffect as useEffect15, useState as useState10 } from "react";
+import React31, { useEffect as useEffect16, useState as useState10 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes6, useHMSActions as useHMSActions8, useHMSNotifications as useHMSNotifications6 } from "@100mslive/react-sdk";
 import { MicOnIcon as MicOnIcon2 } from "@100mslive/react-icons";
 var TrackUnmuteModal = () => {
@@ -3634,7 +3718,7 @@ var TrackUnmuteModal = () => {
     HMSNotificationTypes6.REMOVED_FROM_ROOM
   ]);
   const [muteNotification, setMuteNotification] = useState10(null);
-  useEffect15(() => {
+  useEffect16(() => {
     switch (notification == null ? void 0 : notification.type) {
       case HMSNotificationTypes6.REMOVED_FROM_ROOM:
       case HMSNotificationTypes6.ROOM_ENDED:
@@ -3653,7 +3737,7 @@ var TrackUnmuteModal = () => {
     return null;
   }
   const { requestedBy: peer, track, enabled } = muteNotification;
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React31.createElement(
     RequestDialog,
     {
       title: "Track Unmute Request",
@@ -4162,12 +4246,6 @@ var formatTime = (timeInSeconds) => {
   const hour = hours !== 0 ? `${hours < 10 ? "0" : ""}${hours}:` : "";
   return `${hour}${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
 };
-var getAttributeBoxSize = (width, height) => {
-  if (!width || !height) {
-    return "";
-  }
-  return width < 180 || height < 180 ? "small" : "medium";
-};
 
 // src/Prebuilt/components/Notifications/Notifications.jsx
 function Notifications() {
@@ -4179,7 +4257,7 @@ function Notifications() {
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const { redirectToLeave } = useRedirectToLeave();
-  const vanillaStore = useHMSVanillaStore4();
+  const vanillaStore = useHMSVanillaStore5();
   const handleRoleChangeDenied = useCallback8((request) => {
     ToastManager.addToast({
       title: `${request.peerName} denied your request to join the ${request.role.name} role`,
@@ -4187,7 +4265,7 @@ function Notifications() {
     });
   }, []);
   useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
-  useEffect16(() => {
+  useEffect17(() => {
     var _a7, _b7, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     if (!notification || isNotificationDisabled) {
       return;
@@ -4228,7 +4306,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__ */ React32.createElement(
                 Button,
                 {
                   onClick: () => {
@@ -4294,35 +4372,53 @@ function Notifications() {
   if (isNotificationDisabled) {
     return null;
   }
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackNotifications, null), roomState === HMSRoomState2.Connected ? /* @__PURE__ */ React30.createElement(PeerNotifications, null) : null, /* @__PURE__ */ React30.createElement(ReconnectNotifications, null), /* @__PURE__ */ React30.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React30.createElement(PermissionErrorModal, null), /* @__PURE__ */ React30.createElement(InitErrorModal, { notification }));
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackNotifications, null), roomState === HMSRoomState2.Connected ? /* @__PURE__ */ React32.createElement(PeerNotifications, null) : null, /* @__PURE__ */ React32.createElement(ReconnectNotifications, null), /* @__PURE__ */ React32.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React32.createElement(PermissionErrorModal, null), /* @__PURE__ */ React32.createElement(InitErrorModal, { notification }));
+}
+
+// src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx
+import React33, { useEffect as useEffect18 } from "react";
+import { HMSNotificationTypes as HMSNotificationTypes8, useHMSNotifications as useHMSNotifications8 } from "@100mslive/react-sdk";
+function HeadlessEndRoomListener() {
+  const notification = useHMSNotifications8();
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+  useEffect18(() => {
+    if (!notification || !isNotificationDisabled) {
+      return;
+    }
+    if ([HMSNotificationTypes8.ROOM_ENDED, HMSNotificationTypes8.REMOVED_FROM_ROOM].includes(notification.type)) {
+      redirectToLeave(1e3);
+    }
+  }, [notification]);
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null);
 }
 
 // src/Prebuilt/components/PostLeave.jsx
-import React37 from "react";
+import React40 from "react";
 import { useNavigate as useNavigate3, useParams as useParams3 } from "react-router-dom";
 import { ExitIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/Header.tsx
-import React36 from "react";
+import React39 from "react";
 import { useMedia as useMedia3 } from "react-use";
 import { HMSRoomState as HMSRoomState4, selectRoomState as selectRoomState4, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
-import React31, { useEffect as useEffect17, useState as useState11 } from "react";
+import React34, { useEffect as useEffect19, useState as useState11 } from "react";
 import { selectDominantSpeaker, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
 var SpeakerTag = () => {
   const dominantSpeaker = useHMSStore8(selectDominantSpeaker);
-  return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React31.createElement(
+  return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React34.createElement(
     Flex,
     {
       align: "center",
       justify: "center",
       css: { flex: "1 1 0", color: "$on_primary_high", "@md": { display: "none" } }
     },
-    /* @__PURE__ */ React31.createElement(VerticalDivider, { css: { ml: "$8" } }),
-    /* @__PURE__ */ React31.createElement(VolumeOneIcon, null),
-    /* @__PURE__ */ React31.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
+    /* @__PURE__ */ React34.createElement(VerticalDivider, { css: { ml: "$8" } }),
+    /* @__PURE__ */ React34.createElement(VolumeOneIcon, null),
+    /* @__PURE__ */ React34.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
   );
 };
 var LogoImg = styled("img", {
@@ -4338,12 +4434,12 @@ var Logo = () => {
   const roomLayout = useRoomLayout();
   const logo = (_a7 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a7.url;
   const [hideImage, setHideImage] = useState11(false);
-  useEffect17(() => {
+  useEffect19(() => {
     if (hideImage) {
       setHideImage(false);
     }
   }, [logo]);
-  return logo && !hideImage ? /* @__PURE__ */ React31.createElement(
+  return logo && !hideImage ? /* @__PURE__ */ React34.createElement(
     LogoImg,
     {
       src: logo,
@@ -4357,7 +4453,7 @@ var Logo = () => {
 };
 
 // src/Prebuilt/components/Header/StreamActions.tsx
-import React34, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef5, useState as useState13 } from "react";
+import React37, { useCallback as useCallback13, useEffect as useEffect21, useRef as useRef6, useState as useState13 } from "react";
 import { useMedia as useMedia2 } from "react-use";
 import {
   HMSRoomState as HMSRoomState3,
@@ -4372,7 +4468,7 @@ import {
 import { AlertTriangleIcon, CrossIcon as CrossIcon4, RecordIcon } from "@100mslive/react-icons";
 
 // src/Sheet/Sheet.tsx
-import React32 from "react";
+import React35 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 var SheetRoot = styled(DialogPrimitive2.Root, {
   minHeight: "240px",
@@ -4446,10 +4542,10 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
     side: "bottom"
   }
 });
-var SheetContent = React32.forwardRef(
+var SheetContent = React35.forwardRef(
   (_a7, forwardedRef) => {
     var _b7 = _a7, { children } = _b7, props = __objRest(_b7, ["children"]);
-    return /* @__PURE__ */ React32.createElement(Dialog.Portal, null, /* @__PURE__ */ React32.createElement(StyledOverlay, null), /* @__PURE__ */ React32.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
+    return /* @__PURE__ */ React35.createElement(Dialog.Portal, null, /* @__PURE__ */ React35.createElement(StyledOverlay, null), /* @__PURE__ */ React35.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
   }
 );
 var SheetClose = Dialog.Close;
@@ -4469,7 +4565,7 @@ var Sheet = {
 };
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
-import React33, { useState as useState12 } from "react";
+import React36, { useState as useState12 } from "react";
 import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore13, useScreenShare } from "@100mslive/react-sdk";
 import {
   AudioPlayerIcon,
@@ -4482,7 +4578,7 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
-import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo2 } from "react";
 import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/hooks/useMetadata.jsx
@@ -4493,12 +4589,12 @@ import {
   selectPeerMetadata,
   useHMSActions as useHMSActions9,
   useHMSStore as useHMSStore9,
-  useHMSVanillaStore as useHMSVanillaStore5
+  useHMSVanillaStore as useHMSVanillaStore6
 } from "@100mslive/react-sdk";
 var useMyMetadata = () => {
   const hmsActions = useHMSActions9();
   const localPeerId = useHMSStore9(selectLocalPeerID);
-  const vanillaStore = useHMSVanillaStore5();
+  const vanillaStore = useHMSVanillaStore6();
   const metaData = useHMSStore9(selectPeerMetadata(localPeerId));
   const isHandRaised = useHMSStore9(selectHasPeerHandRaised2(localPeerId));
   const update = (updatedFields) => __async(void 0, null, function* () {
@@ -4564,7 +4660,7 @@ var useWhiteboardMetadata = () => {
       console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
     }
   }), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
-  useEffect18(() => {
+  useEffect20(() => {
     window.toggleWhiteboard = toggleWhiteboard;
   }, [toggleWhiteboard]);
   return {
@@ -4678,7 +4774,7 @@ var AdditionalRoomState = () => {
   if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState && !whiteboardOwner) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React33.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React36.createElement(
     Flex,
     {
       align: "center",
@@ -4691,13 +4787,13 @@ var AdditionalRoomState = () => {
       },
       "data-testid": "record_status_dropdown"
     },
-    !isAudioshareInactive && /* @__PURE__ */ React33.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React33.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React33.createElement(MusicIcon, { width: 24, height: 24 }))),
-    shouldShowScreenShareState && /* @__PURE__ */ React33.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React33.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React33.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
-    shouldShowVideoState && /* @__PURE__ */ React33.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React33.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React33.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
-    !isPlaylistInactive && /* @__PURE__ */ React33.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React33.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React33.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
-    whiteboardOwner && /* @__PURE__ */ React33.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React33.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React33.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
-    /* @__PURE__ */ React33.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React33.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React33.createElement(ChevronDownIcon2, null))
-  )), /* @__PURE__ */ React33.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React33.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React33.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React33.createElement(
+    !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }))),
+    shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
+    shouldShowVideoState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
+    !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
+    whiteboardOwner && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
+    /* @__PURE__ */ React36.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React36.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React36.createElement(ChevronDownIcon2, null))
+  )), /* @__PURE__ */ React36.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4708,7 +4804,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.selection.playing ? "Pause" : "Play"
-  ) : /* @__PURE__ */ React33.createElement(
+  ) : /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4719,7 +4815,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.track.volume === 0 ? "Unmute" : "Mute"
-  )), !isAudioshareInactive && /* @__PURE__ */ React33.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React33.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React33.createElement(
+  )), !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4730,7 +4826,7 @@ var AdditionalRoomState = () => {
       }
     },
     screenshareAudio.muted ? "Unmute" : "Mute"
-  )), shouldShowScreenShareState && /* @__PURE__ */ React33.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React33.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React33.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React33.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React33.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React33.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React33.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React33.createElement(
+  )), shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React36.createElement(
     Text,
     {
       variant: "sm",
@@ -4750,7 +4846,7 @@ var LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming2();
   const hlsState = useHMSStore14(selectHLSState2);
   const isMobile = useMedia2(config.media.md);
-  const intervalRef = useRef5(null);
+  const intervalRef = useRef6(null);
   const [liveTime, setLiveTime] = useState13(0);
   const startTimer = useCallback13(() => {
     intervalRef.current = setInterval(() => {
@@ -4760,7 +4856,7 @@ var LiveStatus = () => {
       }
     }, 1e3);
   }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
-  useEffect19(() => {
+  useEffect21(() => {
     if (hlsState == null ? void 0 : hlsState.running) {
       startTimer();
     }
@@ -4776,7 +4872,7 @@ var LiveStatus = () => {
   if (!isHLSRunning && !isRTMPRunning) {
     return null;
   }
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Flex,
     {
       align: "center",
@@ -4787,8 +4883,8 @@ var LiveStatus = () => {
         borderRadius: "$1"
       }
     },
-    /* @__PURE__ */ React34.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
-    /* @__PURE__ */ React34.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React34.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React34.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
+    /* @__PURE__ */ React37.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
+    /* @__PURE__ */ React37.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React37.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React37.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
   );
 };
 var RecordingStatus = () => {
@@ -4803,7 +4899,7 @@ var RecordingStatus = () => {
     if (!(isMobile && isRecordingOn))
       return null;
   }
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Tooltip,
     {
       boxCss: { zIndex: 1 },
@@ -4813,7 +4909,7 @@ var RecordingStatus = () => {
         isHLSRecordingOn
       })
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React37.createElement(
       Flex,
       {
         css: {
@@ -4821,7 +4917,7 @@ var RecordingStatus = () => {
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React34.createElement(RecordIcon, { width: 24, height: 24 })
+      /* @__PURE__ */ React37.createElement(RecordIcon, { width: 24, height: 24 })
     )
   );
 };
@@ -4835,7 +4931,7 @@ var StartRecording = () => {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React34.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React34.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React34.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React34.createElement(RecordIcon, null), /* @__PURE__ */ React34.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React34.createElement(Popover2.Portal, null, /* @__PURE__ */ React34.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React34.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React34.createElement(
+    return /* @__PURE__ */ React37.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React37.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React37.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React37.createElement(RecordIcon, null), /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React37.createElement(Popover2.Portal, null, /* @__PURE__ */ React37.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React37.createElement(
       Button,
       {
         "data-testid": "stop_recording_confirm",
@@ -4858,7 +4954,7 @@ var StartRecording = () => {
       "Stop"
     ))));
   }
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Button,
     {
       "data-testid": "start_recording",
@@ -4888,21 +4984,21 @@ var StartRecording = () => {
         }
       })
     },
-    recordingStarted ? /* @__PURE__ */ React34.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React34.createElement(RecordIcon, null),
-    /* @__PURE__ */ React34.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
+    recordingStarted ? /* @__PURE__ */ React37.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React37.createElement(RecordIcon, null),
+    /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
   );
 };
 var StreamActions = () => {
   const isConnected = useHMSStore14(selectIsConnectedToRoom2);
   const isMobile = useMedia2(config.media.md);
   const roomState = useHMSStore14(selectRoomState3);
-  return /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React34.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React34.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React34.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React34.createElement(StartRecording, null) : null);
+  return /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React37.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React37.createElement(StartRecording, null) : null);
 };
 var StopRecordingInSheet = ({
   onStopRecording,
   onClose
 }) => {
-  return /* @__PURE__ */ React34.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React34.createElement(Sheet.Content, null, /* @__PURE__ */ React34.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React34.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React34.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React34.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React34.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React34.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React34.createElement(CrossIcon4, null)))), /* @__PURE__ */ React34.createElement(HorizontalDivider, null), /* @__PURE__ */ React34.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React34.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React37.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React37.createElement(Sheet.Content, null, /* @__PURE__ */ React37.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React37.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React37.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React37.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React37.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React37.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React37.createElement(CrossIcon4, null)))), /* @__PURE__ */ React37.createElement(HorizontalDivider, null), /* @__PURE__ */ React37.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React37.createElement(
     Button,
     {
       variant: "danger",
@@ -4916,7 +5012,7 @@ var StopRecordingInSheet = ({
 };
 
 // src/Prebuilt/components/Header/common.jsx
-import React35 from "react";
+import React38 from "react";
 import {
   DeviceType,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
@@ -4937,7 +5033,7 @@ var CamaraFlipActions = () => {
   if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(
     IconButton_default,
     {
       disabled: !isVideoOn,
@@ -4952,7 +5048,7 @@ var CamaraFlipActions = () => {
         }
       })
     },
-    /* @__PURE__ */ React35.createElement(CameraFlipIcon, null)
+    /* @__PURE__ */ React38.createElement(CameraFlipIcon, null)
   ));
 };
 var AudioOutputActions = () => {
@@ -4964,7 +5060,7 @@ var AudioOutputActions = () => {
   if (!shouldShowAudioOutput || !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) > 0) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React38.createElement(
     AudioOutputSelectionSheet,
     {
       outputDevices: audioOutput,
@@ -4983,11 +5079,11 @@ var AudioOutputActions = () => {
         }
       })
     },
-    /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(IconButton_default, null, /* @__PURE__ */ React35.createElement(SpeakerIcon, null)))
+    /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(IconButton_default, null, /* @__PURE__ */ React38.createElement(SpeakerIcon, null)))
   );
 };
 var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => {
-  return /* @__PURE__ */ React35.createElement(Sheet.Root, null, /* @__PURE__ */ React35.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React35.createElement(Sheet.Content, null, /* @__PURE__ */ React35.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React35.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React35.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React35.createElement(Sheet.Close, null, /* @__PURE__ */ React35.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React35.createElement(CrossIcon5, null))))), /* @__PURE__ */ React35.createElement(HorizontalDivider, null), /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React38.createElement(Sheet.Root, null, /* @__PURE__ */ React38.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React38.createElement(Sheet.Content, null, /* @__PURE__ */ React38.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React38.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React38.createElement(Sheet.Close, null, /* @__PURE__ */ React38.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React38.createElement(CrossIcon5, null))))), /* @__PURE__ */ React38.createElement(HorizontalDivider, null), /* @__PURE__ */ React38.createElement(
     Flex,
     {
       direction: "column",
@@ -4998,7 +5094,7 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
       }
     },
     outputDevices.map((audioDevice) => {
-      return /* @__PURE__ */ React35.createElement(
+      return /* @__PURE__ */ React38.createElement(
         SelectWithLabel,
         {
           key: audioDevice.deviceId,
@@ -5011,8 +5107,8 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
     })
   )));
 };
-var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React35.createElement(React35.Fragment, null), checked, id, onChange }) => {
-  return /* @__PURE__ */ React35.createElement(
+var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React38.createElement(React38.Fragment, null), checked, id, onChange }) => {
+  return /* @__PURE__ */ React38.createElement(
     Flex,
     {
       align: "center",
@@ -5024,7 +5120,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React35.createElement(Rea
       },
       onClick: onChange
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React38.createElement(
       Label3,
       {
         htmlFor: id,
@@ -5042,7 +5138,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React35.createElement(Rea
       icon,
       label
     ),
-    checked && /* @__PURE__ */ React35.createElement(CheckIcon2, { width: 24, height: 24 })
+    checked && /* @__PURE__ */ React38.createElement(CheckIcon2, { width: 24, height: 24 })
   );
 };
 
@@ -5051,9 +5147,9 @@ var Header2 = () => {
   const roomState = useHMSStore16(selectRoomState4);
   const isMobile = useMedia3(config.media.md);
   if (roomState !== HMSRoomState4.Connected) {
-    return /* @__PURE__ */ React36.createElement(React36.Fragment, null);
+    return /* @__PURE__ */ React39.createElement(React39.Fragment, null);
   }
-  return /* @__PURE__ */ React36.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React36.createElement(Logo, null), /* @__PURE__ */ React36.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React36.createElement(LiveStatus, null), /* @__PURE__ */ React36.createElement(RecordingStatus, null))), /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React39.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React39.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React39.createElement(Logo, null), /* @__PURE__ */ React39.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React39.createElement(LiveStatus, null), /* @__PURE__ */ React39.createElement(RecordingStatus, null))), /* @__PURE__ */ React39.createElement(
     Flex,
     {
       align: "center",
@@ -5063,8 +5159,8 @@ var Header2 = () => {
         gap: "$4"
       }
     },
-    /* @__PURE__ */ React36.createElement(StreamActions, null),
-    isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(CamaraFlipActions, null), /* @__PURE__ */ React36.createElement(AudioOutputActions, null)) : null
+    /* @__PURE__ */ React39.createElement(StreamActions, null),
+    isMobile ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(CamaraFlipActions, null), /* @__PURE__ */ React39.createElement(AudioOutputActions, null)) : null
   ));
 };
 
@@ -5075,7 +5171,7 @@ var PostLeave = () => {
   const { roomCode } = useHMSPrebuiltContext();
   const { roomId, role } = useParams3();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-  return /* @__PURE__ */ React37.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React37.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React37.createElement(Header2, null)), /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React40.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React40.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React40.createElement(Header2, null)), /* @__PURE__ */ React40.createElement(
     Flex,
     {
       justify: "center",
@@ -5083,9 +5179,9 @@ var PostLeave = () => {
       align: "center",
       css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
     },
-    /* @__PURE__ */ React37.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
-    /* @__PURE__ */ React37.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React40.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
+    /* @__PURE__ */ React40.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
+    /* @__PURE__ */ React40.createElement(
       Text,
       {
         variant: "body1",
@@ -5097,10 +5193,10 @@ var PostLeave = () => {
         }
       },
       "Have a nice day",
-      previewPreference.name && /* @__PURE__ */ React37.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
+      previewPreference.name && /* @__PURE__ */ React40.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
       "!"
     ),
-    /* @__PURE__ */ React37.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React40.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React40.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React40.createElement(
       Button,
       {
         onClick: () => {
@@ -5112,37 +5208,37 @@ var PostLeave = () => {
         },
         "data-testid": "join_again_btn"
       },
-      /* @__PURE__ */ React37.createElement(ExitIcon, null),
-      /* @__PURE__ */ React37.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
+      /* @__PURE__ */ React40.createElement(ExitIcon, null),
+      /* @__PURE__ */ React40.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
     ))
   ));
 };
 var PostLeave_default = PostLeave;
 
 // src/Prebuilt/components/Preview/PreviewContainer.tsx
-import React56 from "react";
+import React54 from "react";
 import { useNavigate as useNavigate4, useParams as useParams4 } from "react-router-dom";
 import { useSearchParam } from "react-use";
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-import React55, { Fragment as Fragment6, Suspense, useCallback as useCallback17, useEffect as useEffect24, useState as useState19 } from "react";
-import { useMedia as useMedia10 } from "react-use";
+import React53, { Fragment as Fragment4, Suspense, useCallback as useCallback16, useEffect as useEffect24, useState as useState16 } from "react";
+import { useMedia as useMedia6 } from "react-use";
 import {
   HMSRoomState as HMSRoomState6,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled5,
   selectLocalPeer,
   selectRoomState as selectRoomState6,
-  selectVideoTrackByID as selectVideoTrackByID5,
+  selectVideoTrackByID as selectVideoTrackByID4,
   useAVToggle as useAVToggle2,
-  useHMSStore as useHMSStore25,
+  useHMSStore as useHMSStore21,
   useParticipants,
   usePreviewJoin,
   useRecordingStreaming as useRecordingStreaming4
 } from "@100mslive/react-sdk";
-import { MicOffIcon as MicOffIcon4, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
+import { MicOffIcon as MicOffIcon2, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AudioVideoToggle.jsx
-import React39, { Fragment as Fragment2 } from "react";
+import React42, { Fragment as Fragment2 } from "react";
 import {
   DeviceType as DeviceType2,
   HMSRoomState as HMSRoomState5,
@@ -5157,7 +5253,7 @@ import {
 import { CameraFlipIcon as CameraFlipIcon2, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, VideoOnIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx
-import React38 from "react";
+import React41 from "react";
 import { VerticalMenuIcon } from "@100mslive/react-icons";
 var IconSection = styled(IconButton_default, {
   w: "unset",
@@ -5209,7 +5305,7 @@ var IconButtonWithOptions = ({
 }) => {
   const bgCss = { backgroundColor: disabled ? "$surface_brighter" : active ? "$transparent" : "$secondary_dim" };
   const iconCss = { color: disabled ? "$on_surface_low" : active ? "$on_surface_high" : "$on_primary_high" };
-  return /* @__PURE__ */ React38.createElement(Flex, null, /* @__PURE__ */ React38.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React38.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React38.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React38.createElement(Dropdown.Root, null, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React41.createElement(Flex, null, /* @__PURE__ */ React41.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React41.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React41.createElement(Dropdown.Root, null, /* @__PURE__ */ React41.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -5220,8 +5316,8 @@ var IconButtonWithOptions = ({
         }
       }
     },
-    /* @__PURE__ */ React38.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React38.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React38.createElement(Box, { css: iconCss }, /* @__PURE__ */ React38.createElement(VerticalMenuIcon, null))))
-  ), /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React41.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React41.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React41.createElement(Box, { css: iconCss }, /* @__PURE__ */ React41.createElement(VerticalMenuIcon, null))))
+  ), /* @__PURE__ */ React41.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -5233,7 +5329,7 @@ var IconButtonWithOptions = ({
         border: "none"
       }
     },
-    options.map((option, index) => /* @__PURE__ */ React38.createElement(
+    options.map((option, index) => /* @__PURE__ */ React41.createElement(
       Dropdown.Item,
       {
         key: option.title,
@@ -5260,7 +5356,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   const { videoInput, audioInput } = allDevices;
   const formattedVideoInputList = videoInput == null ? void 0 : videoInput.map((videoInput2) => ({
     active: selectedDeviceIDs.videoInput === videoInput2.deviceId,
-    content: /* @__PURE__ */ React39.createElement(
+    content: /* @__PURE__ */ React42.createElement(
       Text,
       {
         variant: "sm",
@@ -5276,7 +5372,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   }));
   const formattedAudioInputList = audioInput == null ? void 0 : audioInput.map((audioInput2) => ({
     active: selectedDeviceIDs.audioInput === audioInput2.deviceId,
-    content: /* @__PURE__ */ React39.createElement(
+    content: /* @__PURE__ */ React42.createElement(
       Text,
       {
         variant: "sm",
@@ -5297,7 +5393,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   const roomState = useHMSStore17(selectRoomState5);
   const hasAudioDevices = (audioInput == null ? void 0 : audioInput.length) > 0;
   const hasVideoDevices = (videoInput == null ? void 0 : videoInput.length) > 0;
-  return /* @__PURE__ */ React39.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React39.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React42.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React42.createElement(
     IconButton_default,
     {
       active: isLocalAudioEnabled,
@@ -5307,20 +5403,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       "data-testid": "audio_btn",
       className: "__cancel-drag-event"
     },
-    !isLocalAudioEnabled ? /* @__PURE__ */ React39.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React39.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
-  )) : /* @__PURE__ */ React39.createElement(
+    !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
+  )) : /* @__PURE__ */ React42.createElement(
     IconButtonWithOptions,
     {
       options: formattedAudioInputList,
       disabled: !toggleAudio,
       onDisabledClick: toggleAudio,
       tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
-      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React39.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React39.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
+      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
       active: isLocalAudioEnabled,
       onClick: toggleAudio,
       key: "toggleAudio"
     }
-  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React39.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React39.createElement(
+  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React42.createElement(
     IconButton_default,
     {
       key: "toggleVideo",
@@ -5330,20 +5426,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       "data-testid": "video_btn",
       className: "__cancel-drag-event"
     },
-    !isLocalVideoEnabled ? /* @__PURE__ */ React39.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React39.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
-  )) : /* @__PURE__ */ React39.createElement(
+    !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
+  )) : /* @__PURE__ */ React42.createElement(
     IconButtonWithOptions,
     {
       disabled: !toggleVideo,
       onDisabledClick: toggleVideo,
       options: formattedVideoInputList,
       tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
-      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React39.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React39.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
+      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
       key: "toggleVideo",
       active: isLocalVideoEnabled,
       onClick: toggleVideo
     }
-  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React39.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React39.createElement(
+  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React42.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React42.createElement(
     IconButton_default,
     {
       onClick: () => __async(void 0, null, function* () {
@@ -5357,32 +5453,43 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         }
       })
     },
-    /* @__PURE__ */ React39.createElement(CameraFlipIcon2, null)
+    /* @__PURE__ */ React42.createElement(CameraFlipIcon2, null)
   )) : null);
 };
 
-// src/Prebuilt/components/Chip.jsx
-import React40 from "react";
+// src/Prebuilt/components/Chip.tsx
+import React43 from "react";
 var Chip = ({
-  icon = /* @__PURE__ */ React40.createElement(React40.Fragment, null),
+  icon = /* @__PURE__ */ React43.createElement(React43.Fragment, null),
   content = "",
   backgroundColor = "$surface_default",
   textColor = "$on_surface_high",
-  hideIfNoContent = false
+  hideIfNoContent = false,
+  onClick,
+  css: css2 = {}
 }) => {
   if (hideIfNoContent && !content) {
-    return;
+    return null;
   }
-  return /* @__PURE__ */ React40.createElement(Flex, { align: "center", css: { backgroundColor, p: "$4 $6", borderRadius: "$4" } }, icon, /* @__PURE__ */ React40.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor, ml: "$2" } }, content));
+  return /* @__PURE__ */ React43.createElement(
+    Flex,
+    {
+      align: "center",
+      css: __spreadValues({ backgroundColor, p: "$4 $6", gap: "$2", borderRadius: "$4" }, css2),
+      onClick: () => onClick == null ? void 0 : onClick()
+    },
+    icon,
+    /* @__PURE__ */ React43.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor } }, content)
+  );
 };
 var Chip_default = Chip;
 
 // src/Prebuilt/components/Connection/TileConnection.tsx
-import React42 from "react";
+import React45 from "react";
 import { PinIcon, SpotlightIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Connection/ConnectionIndicator.tsx
-import React41 from "react";
+import React44 from "react";
 import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
 
@@ -5444,10 +5551,10 @@ var ConnectionIndicator = ({
     return null;
   }
   if (downlinkQuality === 0) {
-    return /* @__PURE__ */ React41.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React41.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React41.createElement(PoorConnectivityIcon2, null)));
+    return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React44.createElement(PoorConnectivityIcon2, null)));
   }
   const size = isTile ? 12 : 16;
-  return /* @__PURE__ */ React41.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React41.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React44.createElement(
     "svg",
     {
       width: size,
@@ -5462,7 +5569,7 @@ var ConnectionIndicator = ({
         strokeMiterlimit: 2
       }
     },
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React44.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",
@@ -5470,7 +5577,7 @@ var ConnectionIndicator = ({
         transform: "translate(-.333)"
       }
     ),
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React44.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",
@@ -5478,14 +5585,14 @@ var ConnectionIndicator = ({
         transform: "translate(-.333)"
       }
     ),
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React44.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__ */ React41.createElement(
+    /* @__PURE__ */ React44.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",
@@ -5504,7 +5611,7 @@ var TileConnection = ({
   spotlighted,
   pinned
 }) => {
-  return /* @__PURE__ */ React42.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React42.createElement(IconWrapper, null, /* @__PURE__ */ React42.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React42.createElement(IconWrapper, null, /* @__PURE__ */ React42.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React45.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React45.createElement(
     Text,
     {
       css: __spreadValues({
@@ -5514,7 +5621,7 @@ var TileConnection = ({
       variant: "xs"
     },
     name
-  )), /* @__PURE__ */ React42.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
+  )), /* @__PURE__ */ React45.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
 };
 var IconWrapper = styled("div", { c: "$on_surface_high", ml: "$3", mt: "$1" });
 var Wrapper2 = styled("div", {
@@ -5533,8 +5640,12 @@ var Wrapper2 = styled("div", {
 });
 var TileConnection_default = TileConnection;
 
+// src/Prebuilt/components/PrebuiltTileElements.tsx
+var PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: "$12", width: "$12" });
+var PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: "$12", width: "$12" });
+
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-import React48, { useCallback as useCallback15, useEffect as useEffect21, useState as useState15 } from "react";
+import React51, { useCallback as useCallback15, useEffect as useEffect23, useState as useState15 } from "react";
 import { useMedia as useMedia4 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
 
@@ -5542,7 +5653,7 @@ import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons
 import { GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
-import React44, { Fragment as Fragment3, useEffect as useEffect20, useRef as useRef6, useState as useState14 } from "react";
+import React47, { Fragment as Fragment3, useEffect as useEffect22, useRef as useRef7, useState as useState14 } from "react";
 import {
   DeviceType as DeviceType3,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
@@ -5554,10 +5665,10 @@ import {
 import { MicOnIcon as MicOnIcon4, SpeakerIcon as SpeakerIcon2, VideoOnIcon as VideoOnIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/primitives/DropdownTrigger.jsx
-import React43 from "react";
+import React46 from "react";
 import { ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
-var DialogDropdownTrigger = React43.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
-  return /* @__PURE__ */ React43.createElement(
+var DialogDropdownTrigger = React46.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
+  return /* @__PURE__ */ React46.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -5571,7 +5682,7 @@ var DialogDropdownTrigger = React43.forwardRef(({ title, css: css2, open, icon,
       }, css2),
       ref
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React46.createElement(
       Flex,
       {
         css: {
@@ -5582,7 +5693,7 @@ var DialogDropdownTrigger = React43.forwardRef(({ title, css: css2, open, icon,
         }
       },
       icon,
-      /* @__PURE__ */ React43.createElement(
+      /* @__PURE__ */ React46.createElement(
         Text,
         {
           css: __spreadValues(__spreadProps(__spreadValues({
@@ -5594,14 +5705,14 @@ var DialogDropdownTrigger = React43.forwardRef(({ title, css: css2, open, icon,
         },
         title
       ),
-      open ? /* @__PURE__ */ React43.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React43.createElement(ChevronDownIcon3, null)
+      open ? /* @__PURE__ */ React46.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React46.createElement(ChevronDownIcon3, null)
     )
   );
 });
 
 // src/Prebuilt/components/hooks/useDropdownSelection.jsx
 var useDropdownSelection = () => {
-  return "$primary_dim";
+  return "$surface_bright";
 };
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
@@ -5619,7 +5730,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__ */ React44.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React44.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React47.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React47.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React47.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -5630,24 +5741,24 @@ var Settings = ({ setHide }) => {
         m: "$10 auto"
       }
     },
-    /* @__PURE__ */ React44.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
-  ), /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React47.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
+  ), /* @__PURE__ */ React47.createElement(
     DeviceSelector,
     {
       title: "Video",
       devices: videoInput,
-      icon: /* @__PURE__ */ React44.createElement(VideoOnIcon2, null),
+      icon: /* @__PURE__ */ React47.createElement(VideoOnIcon2, null),
       selection: selectedDeviceIDs.videoInput,
       onChange: (deviceId) => updateDevice({
         deviceId,
         deviceType: DeviceType3.videoInput
       })
     }
-  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React44.createElement(
+  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React47.createElement(
     DeviceSelector,
     {
       title: shouldShowAudioOutput ? "Microphone" : "Audio",
-      icon: /* @__PURE__ */ React44.createElement(MicOnIcon4, null),
+      icon: /* @__PURE__ */ React47.createElement(MicOnIcon4, null),
       devices: audioInput,
       selection: selectedDeviceIDs.audioInput,
       onChange: (deviceId) => updateDevice({
@@ -5655,11 +5766,11 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType3.audioInput
       })
     }
-  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React44.createElement(
+  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React47.createElement(
     DeviceSelector,
     {
       title: "Speaker",
-      icon: /* @__PURE__ */ React44.createElement(SpeakerIcon2, null),
+      icon: /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
       devices: audioOutput,
       selection: selectedDeviceIDs.audioOutput,
       onChange: (deviceId) => updateDevice({
@@ -5667,15 +5778,15 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType3.audioOutput
       })
     },
-    /* @__PURE__ */ React44.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
+    /* @__PURE__ */ React47.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
   ) : null);
 };
 var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
   var _a7, _b7;
   const [open, setOpen] = useState14(false);
   const selectionBg = useDropdownSelection();
-  const ref = useRef6(null);
-  return /* @__PURE__ */ React44.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React44.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React44.createElement(
+  const ref = useRef7(null);
+  return /* @__PURE__ */ React47.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React47.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React47.createElement(
     Flex,
     {
       align: "center",
@@ -5687,7 +5798,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
         }
       }
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React47.createElement(
       Box,
       {
         css: {
@@ -5701,7 +5812,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           }
         }
       },
-      /* @__PURE__ */ React44.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React47.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React47.createElement(
         DialogDropdownTrigger,
         {
           ref,
@@ -5709,8 +5820,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           title: ((_a7 = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a7.label) || "Select device from list",
           open
         }
-      ), /* @__PURE__ */ React44.createElement(Dropdown.Portal, null, /* @__PURE__ */ React44.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
-        return /* @__PURE__ */ React44.createElement(
+      ), /* @__PURE__ */ React47.createElement(Dropdown.Portal, null, /* @__PURE__ */ React47.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
+        return /* @__PURE__ */ React47.createElement(
           Dropdown.Item,
           {
             key: device.label,
@@ -5729,9 +5840,9 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
 };
 var TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";
 var TestAudio = ({ id }) => {
-  const audioRef = useRef6(null);
+  const audioRef = useRef7(null);
   const [playing, setPlaying] = useState14(false);
-  useEffect20(() => {
+  useEffect22(() => {
     if (audioRef.current && id) {
       try {
         if (typeof audioRef.current.setSinkId !== "undefined") {
@@ -5742,7 +5853,7 @@ var TestAudio = ({ id }) => {
       }
     }
   }, [id]);
-  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
     Button,
     {
       variant: "standard",
@@ -5759,22 +5870,22 @@ var TestAudio = ({ id }) => {
       },
       disabled: playing
     },
-    /* @__PURE__ */ React44.createElement(SpeakerIcon2, null),
+    /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
     "\xA0Test",
     " ",
-    /* @__PURE__ */ React44.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
-  ), /* @__PURE__ */ React44.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
+    /* @__PURE__ */ React47.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
+  ), /* @__PURE__ */ React47.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
 };
 var DeviceSettings_default = Settings;
 
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
-import React46, { useCallback as useCallback14 } from "react";
+import React49, { useCallback as useCallback14 } from "react";
 import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Settings/SwitchWithLabel.jsx
-import React45 from "react";
+import React48 from "react";
 var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React48.createElement(
     Flex,
     {
       align: "center",
@@ -5786,7 +5897,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
         display: hide ? "none" : "flex"
       }
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React48.createElement(
       Label3,
       {
         htmlFor: id,
@@ -5804,7 +5915,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
       icon,
       label
     ),
-    /* @__PURE__ */ React45.createElement(Switch, { id, checked, onCheckedChange: onChange })
+    /* @__PURE__ */ React48.createElement(Switch, { id, checked, onCheckedChange: onChange })
   );
 };
 var SwitchWithLabel_default = SwitchWithLabel;
@@ -5825,7 +5936,7 @@ var LayoutSettings = () => {
     }),
     [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings]
   );
-  return /* @__PURE__ */ React46.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React46.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React49.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React49.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React49.createElement(
     SwitchWithLabel_default,
     {
       label: "Mirror Local Video",
@@ -5837,7 +5948,7 @@ var LayoutSettings = () => {
         });
       }
     }
-  ), /* @__PURE__ */ React46.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React46.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React46.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React46.createElement(
+  ), /* @__PURE__ */ React49.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React49.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React49.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React49.createElement(
     Slider,
     {
       step: 1,
@@ -5853,11 +5964,11 @@ var LayoutSettings = () => {
 };
 
 // src/Prebuilt/components/Settings/NotificationSettings.jsx
-import React47 from "react";
+import React50 from "react";
 import { AlertOctagonIcon, HandIcon as HandIcon2, PeopleAddIcon as PeopleAddIcon2, PeopleRemoveIcon as PeopleRemoveIcon2 } from "@100mslive/react-icons";
 var NotificationItem = ({ type, label, icon, checked }) => {
   const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React50.createElement(
     SwitchWithLabel_default,
     {
       label,
@@ -5872,36 +5983,36 @@ var NotificationItem = ({ type, label, icon, checked }) => {
 };
 var NotificationSettings = () => {
   const subscribedNotifications = useSubscribedNotifications();
-  return /* @__PURE__ */ React47.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React50.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Peer Joined",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
-      icon: /* @__PURE__ */ React47.createElement(PeopleAddIcon2, null),
+      icon: /* @__PURE__ */ React50.createElement(PeopleAddIcon2, null),
       checked: subscribedNotifications.PEER_JOINED
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Peer Leave",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
-      icon: /* @__PURE__ */ React47.createElement(PeopleRemoveIcon2, null),
+      icon: /* @__PURE__ */ React50.createElement(PeopleRemoveIcon2, null),
       checked: subscribedNotifications.PEER_LEFT
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Hand Raised",
       type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
-      icon: /* @__PURE__ */ React47.createElement(HandIcon2, null),
+      icon: /* @__PURE__ */ React50.createElement(HandIcon2, null),
       checked: subscribedNotifications.METADATA_UPDATED
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     NotificationItem,
     {
       label: "Error",
       type: SUBSCRIBED_NOTIFICATIONS.ERROR,
-      icon: /* @__PURE__ */ React47.createElement(AlertOctagonIcon, null),
+      icon: /* @__PURE__ */ React50.createElement(AlertOctagonIcon, null),
       checked: subscribedNotifications.ERROR
     }
   ));
@@ -5943,7 +6054,7 @@ var settingsList = [
 ];
 
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React48.createElement(React48.Fragment, null) }) => {
+var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React51.createElement(React51.Fragment, null) }) => {
   const mediaQueryLg = config.media.md;
   const isMobile = useMedia4(mediaQueryLg);
   const [showSetting, setShowSetting] = useState15(
@@ -5953,7 +6064,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
     (key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
     [setShowSetting]
   );
-  useEffect21(() => {
+  useEffect23(() => {
     if (screenType === "hls_live_streaming") {
       hideSettingByTabName("layout")(true);
     }
@@ -5965,7 +6076,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
   const resetSelection = useCallback15(() => {
     setSelection("");
   }, []);
-  useEffect21(() => {
+  useEffect23(() => {
     var _a7;
     if (isMobile) {
       setSelection("");
@@ -5974,7 +6085,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
       setSelection(firstNotHiddenTabName);
     }
   }, [isMobile, showSetting]);
-  return isMobile ? /* @__PURE__ */ React48.createElement(
+  return isMobile ? /* @__PURE__ */ React51.createElement(
     MobileSettingModal,
     {
       open,
@@ -5986,7 +6097,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
       resetSelection,
       children
     }
-  ) : /* @__PURE__ */ React48.createElement(
+  ) : /* @__PURE__ */ React51.createElement(
     DesktopSettingModal,
     {
       open,
@@ -6008,9 +6119,9 @@ var MobileSettingModal = ({
   showSetting,
   hideSettingByTabName,
   resetSelection,
-  children = /* @__PURE__ */ React48.createElement(React48.Fragment, null)
+  children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
 }) => {
-  return /* @__PURE__ */ React48.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React48.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React51.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(
     Sheet.Content,
     {
       css: {
@@ -6018,9 +6129,9 @@ var MobileSettingModal = ({
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React48.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React48.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React48.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React48.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React48.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React48.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React48.createElement(Sheet.Close, null, /* @__PURE__ */ React48.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React48.createElement(CrossIcon6, null))))),
-    /* @__PURE__ */ React48.createElement(HorizontalDivider, null),
-    !selection ? /* @__PURE__ */ React48.createElement(
+    /* @__PURE__ */ React51.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React51.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React51.createElement(Sheet.Close, null, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null))))),
+    /* @__PURE__ */ React51.createElement(HorizontalDivider, null),
+    !selection ? /* @__PURE__ */ React51.createElement(
       Flex,
       {
         direction: "column",
@@ -6031,7 +6142,7 @@ var MobileSettingModal = ({
         }
       },
       settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
-        return /* @__PURE__ */ React48.createElement(
+        return /* @__PURE__ */ React51.createElement(
           Box,
           {
             key: tabName,
@@ -6061,18 +6172,18 @@ var MobileSettingModal = ({
               borderBottom: "1px solid $border_default"
             }
           },
-          /* @__PURE__ */ React48.createElement(Icon2, null),
+          /* @__PURE__ */ React51.createElement(Icon2, null),
           title
         );
       })
-    ) : /* @__PURE__ */ React48.createElement(
+    ) : /* @__PURE__ */ React51.createElement(
       Box,
       {
         direction: "column",
         css: { overflowY: "scroll", px: "$8", py: "$10", maxHeight: "70vh", overflowX: "hidden" }
       },
       settingsList.filter(({ tabName }) => showSetting[tabName] && selection === tabName).map(({ content: Content10, title, tabName }) => {
-        return /* @__PURE__ */ React48.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
+        return /* @__PURE__ */ React51.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
       })
     )
   ));
@@ -6085,9 +6196,9 @@ var DesktopSettingModal = ({
   showSetting,
   hideSettingByTabName,
   resetSelection,
-  children = /* @__PURE__ */ React48.createElement(React48.Fragment, null)
+  children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
 }) => {
-  return /* @__PURE__ */ React48.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React48.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React48.createElement(Dialog.Portal, null, /* @__PURE__ */ React48.createElement(Dialog.Overlay, null), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React51.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React51.createElement(Dialog.Overlay, null), /* @__PURE__ */ React51.createElement(
     Dialog.Content,
     {
       css: {
@@ -6097,7 +6208,7 @@ var DesktopSettingModal = ({
         r: "$4"
       }
     },
-    /* @__PURE__ */ React48.createElement(
+    /* @__PURE__ */ React51.createElement(
       Tabs.Root,
       {
         value: selection,
@@ -6105,7 +6216,7 @@ var DesktopSettingModal = ({
         onValueChange: setSelection,
         css: { size: "100%", position: "relative" }
       },
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React51.createElement(
         Tabs.List,
         {
           css: {
@@ -6117,12 +6228,12 @@ var DesktopSettingModal = ({
             borderBottomLeftRadius: "$4"
           }
         },
-        /* @__PURE__ */ React48.createElement(Text, { variant: "h5" }, "Settings "),
-        /* @__PURE__ */ React48.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
-          return /* @__PURE__ */ React48.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React48.createElement(Icon2, null), title);
+        /* @__PURE__ */ React51.createElement(Text, { variant: "h5" }, "Settings "),
+        /* @__PURE__ */ React51.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
+          return /* @__PURE__ */ React51.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React51.createElement(Icon2, null), title);
         }))
       ),
-      selection && /* @__PURE__ */ React48.createElement(
+      selection && /* @__PURE__ */ React51.createElement(
         Flex,
         {
           direction: "column",
@@ -6133,731 +6244,21 @@ var DesktopSettingModal = ({
           }
         },
         settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content10, title, tabName }) => {
-          return /* @__PURE__ */ React48.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React48.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React48.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
+          return /* @__PURE__ */ React51.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React51.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React51.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
         })
       )
     ),
-    /* @__PURE__ */ React48.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React48.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React48.createElement(CrossIcon6, null)))
+    /* @__PURE__ */ React51.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null)))
   )));
 };
 var SettingsContentHeader = ({ children, isMobile, onBack }) => {
-  return /* @__PURE__ */ React48.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React48.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React48.createElement(ChevronLeftIcon, null)), children);
+  return /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), children);
 };
 var SettingsModal_default = SettingsModal;
 
-// src/Prebuilt/components/VideoTile.jsx
-import React53, { Fragment as Fragment5, useCallback as useCallback16, useEffect as useEffect23, useMemo as useMemo3, useRef as useRef7, useState as useState18 } from "react";
-import { useMedia as useMedia8 } from "react-use";
-import {
-  selectAudioTrackByPeerID as selectAudioTrackByPeerID2,
-  selectHasPeerHandRaised as selectHasPeerHandRaised3,
-  selectIsPeerAudioEnabled,
-  selectLocalPeerID as selectLocalPeerID5,
-  selectPeerMetadata as selectPeerMetadata2,
-  selectPeerNameByID,
-  selectSessionStore as selectSessionStore3,
-  selectTrackAudioByID,
-  selectVideoTrackByID as selectVideoTrackByID4,
-  selectVideoTrackByPeerID as selectVideoTrackByPeerID3,
-  useHMSStore as useHMSStore24,
-  useHMSVanillaStore as useHMSVanillaStore6
-} from "@100mslive/react-sdk";
-import { BrbTileIcon, HandIcon as HandIcon3, MicOffIcon as MicOffIcon3 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/TileMenu/TileMenu.jsx
-import React52, { useState as useState17 } from "react";
-import { useMedia as useMedia7 } from "react-use";
-import {
-  selectLocalPeerID as selectLocalPeerID4,
-  selectPeerByID as selectPeerByID2,
-  selectPermissions as selectPermissions3,
-  selectTrackByID as selectTrackByID3,
-  selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
-  useHMSStore as useHMSStore23,
-  useRemoteAVToggle as useRemoteAVToggle2
-} from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon8, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
-import React50, { useState as useState16 } from "react";
-import { useMedia as useMedia5 } from "react-use";
-import { selectLocalPeerName, useHMSActions as useHMSActions16, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
-import React49 from "react";
-import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
-var ChangeNameContent = ({
-  changeName,
-  setCurrentName,
-  currentName,
-  localPeerName,
-  isMobile,
-  onExit,
-  onBackClick
-}) => {
-  return /* @__PURE__ */ React49.createElement(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        yield changeName();
-      })
-    },
-    /* @__PURE__ */ React49.createElement(
-      Text,
-      {
-        variant: isMobile ? "md" : "lg",
-        css: {
-          color: "$on_surface_high",
-          fontWeight: "$semiBold",
-          display: "flex",
-          pb: "$4",
-          "@md": { px: "$8", borderBottom: "1px solid $border_default" }
-        }
-      },
-      isMobile ? /* @__PURE__ */ React49.createElement(ChevronLeftIcon2, { onClick: onBackClick, style: { marginRight: "0.5rem" } }) : null,
-      "Change Name",
-      /* @__PURE__ */ React49.createElement(
-        Box,
-        {
-          css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
-          onClick: onExit
-        },
-        /* @__PURE__ */ React49.createElement(CrossIcon7, null)
-      )
-    ),
-    /* @__PURE__ */ React49.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$6", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "Your name will be visible to other participants in the session."),
-    /* @__PURE__ */ React49.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%", "@md": { px: "$8" } } }, /* @__PURE__ */ React49.createElement(
-      Input,
-      {
-        css: { width: "100%", bg: "$surface_default" },
-        value: currentName,
-        type: isMobile ? "search" : "text",
-        onChange: (e) => {
-          setCurrentName(e.target.value);
-        },
-        autoComplete: "name",
-        required: true,
-        "data-testid": "change_name_field",
-        onKeyDown: (e) => __async(void 0, null, function* () {
-          if (e.key === "Enter" && currentName.trim().length > 0 && currentName !== localPeerName) {
-            e.preventDefault();
-            if (isMobile) {
-              return;
-            }
-            changeName();
-          }
-        })
-      }
-    )),
-    /* @__PURE__ */ React49.createElement(
-      Flex,
-      {
-        justify: "between",
-        align: "center",
-        css: {
-          width: "100%",
-          gap: "$md",
-          mt: "$10",
-          "@md": { px: "$4" }
-        }
-      },
-      isMobile ? null : /* @__PURE__ */ React49.createElement(
-        Button,
-        {
-          variant: "standard",
-          css: { w: "100%" },
-          outlined: true,
-          type: "submit",
-          disabled: !localPeerName,
-          onClick: onExit
-        },
-        "Cancel"
-      ),
-      /* @__PURE__ */ React49.createElement(
-        Button,
-        {
-          variant: "primary",
-          css: { width: "100%" },
-          type: "submit",
-          disabled: !currentName.trim() || currentName.trim() === localPeerName,
-          "data-testid": "popup_change_btn"
-        },
-        "Change"
-      )
-    )
-  );
-};
-
-// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
-var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
-  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions16();
-  const localPeerName = useHMSStore21(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState16(localPeerName);
-  const isMobile = useMedia5(config.media.md);
-  const changeName = () => __async(void 0, null, function* () {
-    const name = currentName.trim();
-    if (!name || name === localPeerName) {
-      return;
-    }
-    try {
-      yield hmsActions.changeName(name);
-      setPreviewPreference(__spreadProps(__spreadValues({}, previewPreference || {}), {
-        name
-      }));
-    } catch (error) {
-      console.error("failed to update name", error);
-      ToastManager.addToast({ title: error.message });
-    } finally {
-      onOpenChange(false);
-    }
-  });
-  const props = {
-    changeName,
-    setCurrentName,
-    currentName,
-    localPeerName,
-    isMobile,
-    onExit: () => onOpenChange(false),
-    onBackClick: () => {
-      onOpenChange(false);
-      openParentSheet();
-    }
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ React50.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React50.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ React50.createElement(ChangeNameContent, __spreadValues({}, props))));
-  }
-  return /* @__PURE__ */ React50.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React50.createElement(Dialog.Portal, null, /* @__PURE__ */ React50.createElement(Dialog.Overlay, null), /* @__PURE__ */ React50.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React50.createElement(ChangeNameContent, __spreadValues({}, props)))));
-};
-
-// src/Prebuilt/components/TileMenu/TileMenuContent.jsx
-import React51, { Fragment as Fragment4 } from "react";
-import { useMedia as useMedia6 } from "react-use";
-import {
-  selectPermissions as selectPermissions2,
-  selectSessionStore as selectSessionStore2,
-  selectTrackByID as selectTrackByID2,
-  useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions17,
-  useHMSStore as useHMSStore22,
-  useRemoteAVToggle
-} from "@100mslive/react-sdk";
-import {
-  MicOffIcon as MicOffIcon2,
-  MicOnIcon as MicOnIcon5,
-  PencilIcon,
-  PinIcon as PinIcon2,
-  RemoveUserIcon,
-  ShareScreenIcon as ShareScreenIcon2,
-  ShrinkIcon,
-  SpeakerIcon as SpeakerIcon3,
-  StarIcon,
-  VideoOffIcon as VideoOffIcon2,
-  VideoOnIcon as VideoOnIcon3
-} from "@100mslive/react-icons";
-var isSameTile = ({ trackId, videoTrackID, audioTrackID }) => trackId && (videoTrackID && videoTrackID === trackId || audioTrackID && audioTrackID === trackId);
-var spacingCSS = { "@md": { my: "$8", fontWeight: "$semiBold", fontSize: "sm" } };
-var SpotlightActions = ({
-  peerId,
-  onSpotLightClick = () => {
-    return;
-  }
-}) => {
-  const hmsActions = useHMSActions17();
-  const spotlightPeerId = useHMSStore22(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT));
-  const isTileSpotlighted = spotlightPeerId === peerId;
-  const setSpotlightPeerId = (peer) => hmsActions.sessionStore.set(SESSION_STORE_KEY.SPOTLIGHT, peer).catch((err) => ToastManager.addToast({ title: err.description }));
-  return /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => {
-        if (isTileSpotlighted) {
-          setSpotlightPeerId();
-        } else {
-          setSpotlightPeerId(peerId);
-        }
-        onSpotLightClick();
-      }
-    },
-    /* @__PURE__ */ React51.createElement(StarIcon, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement("span", null, isTileSpotlighted ? "Remove from Spotlight" : "Spotlight Tile for everyone")
-  );
-};
-var PinActions = ({ audioTrackID, videoTrackID }) => {
-  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
-  const isTilePinned = isSameTile({
-    trackId: pinnedTrackId,
-    videoTrackID,
-    audioTrackID
-  });
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID)
-    },
-    /* @__PURE__ */ React51.createElement(PinIcon2, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement("span", null, isTilePinned ? "Unpin" : "Pin", " Tile for myself")
-  ));
-};
-var MinimiseInset = () => {
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(StyledMenuTile.ItemButton, { css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React51.createElement(ShrinkIcon, { height: 20, width: 20 }), /* @__PURE__ */ React51.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
-};
-var SimulcastLayers = ({ trackId }) => {
-  var _a7;
-  const track = useHMSStore22(selectTrackByID2(trackId));
-  const actions = useHMSActions17();
-  const bg = useDropdownSelection();
-  if (!((_a7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a7.length) || track.degraded || !track.enabled) {
-    return null;
-  }
-  const currentLayer = track.layerDefinitions.find((layer) => layer.layer === track.layer);
-  return /* @__PURE__ */ React51.createElement(Fragment4, null, /* @__PURE__ */ React51.createElement(StyledMenuTile.ItemButton, { css: { color: "$on_surface_medium", cursor: "default" } }, "Select maximum resolution"), track.layerDefinitions.map((layer) => {
-    return /* @__PURE__ */ React51.createElement(
-      StyledMenuTile.ItemButton,
-      {
-        key: layer.layer,
-        onClick: () => __async(void 0, null, function* () {
-          yield actions.setPreferredLayer(trackId, layer.layer);
-        }),
-        css: {
-          justifyContent: "space-between",
-          bg: track.preferredLayer === layer.layer ? bg : void 0,
-          "&:hover": {
-            bg: track.preferredLayer === layer.layer ? bg : void 0
-          }
-        }
-      },
-      /* @__PURE__ */ React51.createElement(
-        Text,
-        {
-          as: "span",
-          css: {
-            textTransform: "capitalize",
-            mr: "$2",
-            fontWeight: track.preferredLayer === layer.layer ? "$semiBold" : "$regular",
-            color: track.preferredLayer === layer.layer ? "$on_primary_high" : "$on_surface_high"
-          }
-        },
-        layer.layer
-      ),
-      /* @__PURE__ */ React51.createElement(
-        Text,
-        {
-          as: "span",
-          variant: "xs",
-          css: {
-            color: track.preferredLayer === layer.layer ? "$on_primary_high" : "$on_surface_high"
-          }
-        },
-        layer.resolution.width,
-        "x",
-        layer.resolution.height
-      )
-    );
-  }), /* @__PURE__ */ React51.createElement(StyledMenuTile.ItemButton, null, /* @__PURE__ */ React51.createElement(Text, { as: "span", variant: "xs", css: { color: "$on_surface_medium" } }, "Currently streaming:", /* @__PURE__ */ React51.createElement(
-    Text,
-    {
-      as: "span",
-      variant: "xs",
-      css: {
-        fontWeight: "$semiBold",
-        textTransform: "capitalize",
-        color: "$on_surface_medium",
-        ml: "$2"
-      }
-    },
-    currentLayer ? /* @__PURE__ */ React51.createElement(React51.Fragment, null, track.layer, " (", currentLayer.resolution.width, "x", currentLayer.resolution.height, ")") : "-"
-  ))));
-};
-var TileMenuContent = (props) => {
-  const actions = useHMSActions17();
-  const { removeOthers } = useHMSStore22(selectPermissions2);
-  const {
-    videoTrackID,
-    audioTrackID,
-    isLocal,
-    isScreenshare,
-    showSpotlight,
-    showPinAction,
-    peerID,
-    canMinimise,
-    closeSheetOnClick = () => {
-      return;
-    },
-    openNameChangeModal = () => {
-      return;
-    }
-  } = props;
-  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
-    audioTrackID,
-    videoTrackID
-  );
-  const { sendEvent } = useCustomEvent2({
-    type: REMOTE_STOP_SCREENSHARE_TYPE
-  });
-  const isMobile = useMedia6(config.media.md);
-  return isLocal ? (showPinAction || canMinimise) && /* @__PURE__ */ React51.createElement(React51.Fragment, null, showPinAction && /* @__PURE__ */ React51.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React51.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React51.createElement(MinimiseInset, null), /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      onClick: () => {
-        openNameChangeModal();
-        closeSheetOnClick();
-      }
-    },
-    /* @__PURE__ */ React51.createElement(PencilIcon, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement(Text, { variant: "sm", css: { "@md": { fontWeight: "$semiBold" }, c: "$on_surface_high" } }, "Change Name")
-  )) : /* @__PURE__ */ React51.createElement(React51.Fragment, null, toggleVideo ? /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => {
-        toggleVideo();
-        closeSheetOnClick();
-      },
-      "data-testid": isVideoEnabled ? "mute_video_participant_btn" : "unmute_video_participant_btn"
-    },
-    isVideoEnabled ? /* @__PURE__ */ React51.createElement(VideoOnIcon3, { height: 20, width: 20 }) : /* @__PURE__ */ React51.createElement(VideoOffIcon2, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement("span", null, isVideoEnabled ? "Mute" : "Request Unmute")
-  ) : null, toggleAudio ? /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => {
-        toggleAudio();
-        closeSheetOnClick();
-      },
-      "data-testid": isVideoEnabled ? "mute_audio_participant_btn" : "unmute_audio_participant_btn"
-    },
-    isAudioEnabled ? /* @__PURE__ */ React51.createElement(MicOnIcon5, { height: 20, width: 20 }) : /* @__PURE__ */ React51.createElement(MicOffIcon2, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement("span", null, isAudioEnabled ? "Mute" : "Request Unmute")
-  ) : null, audioTrackID ? /* @__PURE__ */ React51.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React51.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React51.createElement(SpeakerIcon3, { height: 20, width: 20 }), /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React51.createElement(Slider, { css: { my: "0.5rem" }, step: 5, value: [volume], onValueChange: (e) => setVolume(e[0]) })) : null, showPinAction && /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React51.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), isMobile ? null : /* @__PURE__ */ React51.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.RemoveItem,
-    {
-      css: __spreadProps(__spreadValues({}, spacingCSS), { borderTop: "none" }),
-      onClick: () => __async(void 0, null, function* () {
-        try {
-          yield actions.removePeer(peerID, "");
-        } catch (error) {
-        }
-        closeSheetOnClick();
-      }),
-      "data-testid": "remove_participant_btn"
-    },
-    /* @__PURE__ */ React51.createElement(RemoveUserIcon, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement("span", null, "Remove Participant")
-  ) : null, removeOthers && isScreenshare ? /* @__PURE__ */ React51.createElement(
-    StyledMenuTile.RemoveItem,
-    {
-      onClick: () => {
-        sendEvent({});
-        closeSheetOnClick();
-      },
-      css: spacingCSS
-    },
-    /* @__PURE__ */ React51.createElement(ShareScreenIcon2, { height: 20, width: 20 }),
-    /* @__PURE__ */ React51.createElement("span", null, "Stop Screenshare")
-  ) : null);
-};
-
-// src/Prebuilt/components/hooks/useDropdownList.jsx
-import { useEffect as useEffect22 } from "react";
-var useDropdownList = ({ name, open }) => {
-  const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
-  useEffect22(() => {
-    if (open) {
-      if (!dropdownList.includes(name)) {
-        setDropdownList([...dropdownList, name]);
-      }
-    } else {
-      const index = dropdownList.indexOf(name);
-      if (index >= 0) {
-        const newDropdownList = [...dropdownList];
-        newDropdownList.splice(index, 1);
-        setDropdownList(newDropdownList);
-      }
-    }
-  }, [open, name]);
-};
-
-// src/Prebuilt/components/TileMenu/TileMenu.jsx
-var TileMenu = ({
-  audioTrackID,
-  videoTrackID,
-  peerID,
-  isScreenshare = false,
-  canMinimise,
-  enableSpotlightingPeer = true
-}) => {
-  var _a7, _b7;
-  const [open, setOpen] = useState17(false);
-  const { theme: theme2 } = useTheme();
-  const localPeerID = useHMSStore23(selectLocalPeerID4);
-  const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore23(selectPermissions3);
-  const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
-  const showSpotlight = enableSpotlightingPeer;
-  const isPrimaryVideoTrack = ((_a7 = useHMSStore23(selectVideoTrackByPeerID2(peerID))) == null ? void 0 : _a7.id) === videoTrackID;
-  const showPinAction = audioTrackID || videoTrackID && isPrimaryVideoTrack;
-  const track = useHMSStore23(selectTrackByID3(videoTrackID));
-  const hideSimulcastLayers = !((_b7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b7.length) || track.degraded || !track.enabled;
-  const isMobile = useMedia7(config.media.md);
-  const peer = useHMSStore23(selectPeerByID2(peerID));
-  const [showNameChangeModal, setShowNameChangeModal] = useState17(false);
-  useDropdownList({ open, name: "TileMenu" });
-  if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
-    return null;
-  }
-  const openNameChangeModal = () => setShowNameChangeModal(true);
-  const props = {
-    isLocal,
-    isScreenshare,
-    audioTrackID,
-    videoTrackID,
-    peerID,
-    isPrimaryVideoTrack,
-    showSpotlight,
-    showPinAction,
-    canMinimise,
-    openNameChangeModal
-  };
-  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(StyledMenuTile.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React52.createElement(
-    StyledMenuTile.Trigger,
-    {
-      "data-testid": "participant_menu_btn",
-      css: { bg: `${theme2.colors.background_dim.value}A3`, p: "$2", w: "unset", h: "unset" },
-      onClick: (e) => e.stopPropagation(),
-      className: isMobile ? "__cancel-drag-event" : ""
-    },
-    /* @__PURE__ */ React52.createElement(VerticalMenuIcon2, { width: 20, height: 20 })
-  ), isMobile ? /* @__PURE__ */ React52.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React52.createElement(Sheet.Content, { css: { bg: "$surface_dim", pt: "$8" } }, /* @__PURE__ */ React52.createElement(
-    Flex,
-    {
-      css: {
-        color: "$on_surface_high",
-        display: "flex",
-        w: "100%",
-        justifyContent: "space-between",
-        alignItems: "center",
-        px: "$10",
-        pb: "$8",
-        borderBottom: "1px solid $border_default"
-      }
-    },
-    /* @__PURE__ */ React52.createElement(Box, null, /* @__PURE__ */ React52.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer.name, isLocal ? ` (You)` : null), (peer == null ? void 0 : peer.roleName) ? /* @__PURE__ */ React52.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
-    /* @__PURE__ */ React52.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React52.createElement(CrossIcon8, null))
-  ), /* @__PURE__ */ React52.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React52.createElement(TileMenuContent, __spreadProps(__spreadValues({}, props), { closeSheetOnClick: () => setOpen(false) }))))) : /* @__PURE__ */ React52.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React52.createElement(TileMenuContent, __spreadValues({}, props)))), showNameChangeModal && /* @__PURE__ */ React52.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
-};
-var TileMenu_default = TileMenu;
-
-// src/Prebuilt/components/peerTileUtils.jsx
-var PEER_NAME_PLACEHOLDER = "peerName";
-var labelMap = /* @__PURE__ */ new Map([
-  [[true, "screen"].toString(), "Your Screen"],
-  [[true, "regular"].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
-  [[false, "screen"].toString(), `${PEER_NAME_PLACEHOLDER}'s Screen`],
-  [[false, "regular"].toString(), PEER_NAME_PLACEHOLDER],
-  [[true, void 0].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
-  [[false, void 0].toString(), `${PEER_NAME_PLACEHOLDER}`]
-]);
-var getVideoTileLabel = ({ peerName, isLocal, track }) => {
-  const isPeerPresent = peerName !== void 0;
-  if (!isPeerPresent || !track) {
-    return isPeerPresent ? labelMap.get([isLocal, void 0].toString()).replace(PEER_NAME_PLACEHOLDER, peerName) : "";
-  }
-  const isLocallyMuted = track.volume === 0;
-  let label = labelMap.get([isLocal, track.source].toString());
-  if (label) {
-    label = label.replace(PEER_NAME_PLACEHOLDER, peerName);
-  } else {
-    label = `${peerName} ${track.source}`;
-  }
-  return `${label}${isLocallyMuted ? " (Muted for you)" : ""}`;
-};
-
-// src/Prebuilt/components/VideoTile.jsx
-var Tile = ({
-  peerId,
-  trackId,
-  width,
-  height,
-  objectFit = "cover",
-  canMinimise = false,
-  isDragabble = false,
-  rootCSS = {},
-  containerCSS = {},
-  enableSpotlightingPeer = true,
-  hideParticipantNameOnTile = false,
-  roundedVideoTile = true,
-  hideAudioMuteOnTile = false,
-  hideMetadataOnTile = false
-}) => {
-  var _a7, _b7;
-  const trackSelector = trackId ? selectVideoTrackByID4(trackId) : selectVideoTrackByPeerID3(peerId);
-  const track = useHMSStore24(trackSelector);
-  const isMobile = useMedia8(config.media.md);
-  const peerName = useHMSStore24(selectPeerNameByID(peerId));
-  const audioTrack = useHMSStore24(selectAudioTrackByPeerID2(peerId));
-  const localPeerID = useHMSStore24(selectLocalPeerID5);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isAudioMuted = !useHMSStore24(selectIsPeerAudioEnabled(peerId));
-  const isVideoMuted = !(track == null ? void 0 : track.enabled);
-  const [isMouseHovered, setIsMouseHovered] = useState18(false);
-  const isVideoDegraded = track == null ? void 0 : track.degraded;
-  const isLocal = localPeerID === peerId;
-  const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
-  const pinned = isSameTile({
-    trackId: pinnedTrackId,
-    videoTrackID: track == null ? void 0 : track.id,
-    audioTrackID: audioTrack == null ? void 0 : audioTrack.id
-  });
-  const spotlighted = useHMSStore24(selectSessionStore3(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
-  const label = getVideoTileLabel({
-    peerName,
-    track,
-    isLocal
-  });
-  const onHoverHandler = useCallback16((event) => {
-    setIsMouseHovered(event.type === "mouseenter");
-  }, []);
-  const ref = useRef7(null);
-  const calculatedHeight = ((_a7 = ref.current) == null ? void 0 : _a7.clientHeight) || "";
-  const calculatedWidth = ((_b7 = ref.current) == null ? void 0 : _b7.clientWidth) || "";
-  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
-  const avatarSize = useMemo3(() => {
-    if (!calculatedWidth || !calculatedHeight) {
-      return void 0;
-    }
-    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-      return "small";
-    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-      return "medium";
-    }
-    return "large";
-  }, [calculatedWidth, calculatedHeight]);
-  return /* @__PURE__ */ React53.createElement(
-    StyledVideoTile.Root,
-    {
-      ref,
-      css: __spreadValues({
-        width,
-        height
-      }, rootCSS),
-      "data-testid": `participant_tile_${peerName}`
-    },
-    peerName !== void 0 ? /* @__PURE__ */ React53.createElement(
-      StyledVideoTile.Container,
-      {
-        onMouseEnter: onHoverHandler,
-        onMouseLeave: onHoverHandler,
-        noRadius: !roundedVideoTile,
-        css: containerCSS
-      },
-      showStatsOnTiles && isTileBigEnoughToShowStats ? /* @__PURE__ */ React53.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-      /* @__PURE__ */ React53.createElement(
-        Video,
-        {
-          trackId: track == null ? void 0 : track.id,
-          attach: isLocal ? void 0 : !isAudioOnly,
-          mirror: mirrorLocalVideo && peerId === localPeerID && (track == null ? void 0 : track.source) === "regular" && (track == null ? void 0 : track.facingMode) !== "environment",
-          noRadius: !roundedVideoTile,
-          "data-testid": "participant_video_tile",
-          css: {
-            objectFit,
-            filter: isVideoDegraded ? "blur($space$2)" : void 0,
-            bg: "transparent"
-          }
-        }
-      ),
-      isVideoMuted || !isLocal && isAudioOnly ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React53.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null,
-      !hideAudioMuteOnTile ? isAudioMuted ? /* @__PURE__ */ React53.createElement(
-        StyledVideoTile.AudioIndicator,
-        {
-          "data-testid": "participant_audio_mute_icon",
-          size: getAttributeBoxSize(calculatedWidth, calculatedHeight)
-        },
-        /* @__PURE__ */ React53.createElement(MicOffIcon3, null)
-      ) : /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id }) : null,
-      isMouseHovered || isDragabble && isMobile ? /* @__PURE__ */ React53.createElement(
-        TileMenu_default,
-        {
-          peerID: peerId,
-          audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
-          videoTrackID: track == null ? void 0 : track.id,
-          canMinimise,
-          enableSpotlightingPeer
-        }
-      ) : null,
-      !hideMetadataOnTile && /* @__PURE__ */ React53.createElement(PeerMetadata, { peerId, height: calculatedHeight, width: calculatedWidth }),
-      /* @__PURE__ */ React53.createElement(
-        TileConnection_default,
-        {
-          hideLabel: hideParticipantNameOnTile,
-          name: label,
-          isTile: true,
-          peerId,
-          width,
-          pinned,
-          spotlighted
-        }
-      )
-    ) : null
-  );
-};
-var heightAnimation = (value) => keyframes({
-  "50%": {
-    transform: `scale3d(1,${value},1)`
-  },
-  "100%": {
-    transform: `scale3d(1,1,1)`
-  }
-});
-var AudioLevelIndicator = ({ trackId, value, delay }) => {
-  const vanillaStore = useHMSVanillaStore6();
-  const ref = useRef7();
-  useEffect23(() => {
-    const unsubscribe = vanillaStore.subscribe((audioLevel) => {
-      if (ref.current) {
-        ref.current.style["animation"] = `${heightAnimation(
-          audioLevel ? value : 1
-        )} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
-      }
-    }, selectTrackAudioByID(trackId));
-    return unsubscribe;
-  }, [vanillaStore, trackId, value, delay]);
-  return /* @__PURE__ */ React53.createElement(
-    Box,
-    {
-      ref,
-      css: {
-        w: 4,
-        height: 6,
-        r: 2,
-        bg: "$on_primary_high"
-      }
-    }
-  );
-};
-var AudioLevel = ({ trackId }) => {
-  return /* @__PURE__ */ React53.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ React53.createElement(Flex, { align: "center", justify: "center", css: { gap: "$2" } }, [3, 2, 3].map((v, i) => /* @__PURE__ */ React53.createElement(AudioLevelIndicator, { trackId, value: v, delay: i * 0.15, key: i }))));
-};
-var PeerMetadata = ({ peerId, height, width }) => {
-  const metaData = useHMSStore24(selectPeerMetadata2(peerId));
-  const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
-  const isHandRaised = useHMSStore24(selectHasPeerHandRaised3(peerId));
-  return /* @__PURE__ */ React53.createElement(Fragment5, null, isHandRaised ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AttributeBox, { size: getAttributeBoxSize(width, height), "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React53.createElement(HandIcon3, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AttributeBox, { size: getAttributeBoxSize(width, height), "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React53.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
-};
-var VideoTile = React53.memo(Tile);
-var VideoTile_default = VideoTile;
-
 // src/Prebuilt/components/Preview/PreviewForm.tsx
-import React54 from "react";
-import { useMedia as useMedia9 } from "react-use";
+import React52 from "react";
+import { useMedia as useMedia5 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
 import { useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { RadioIcon } from "@100mslive/react-icons";
@@ -6873,18 +6274,18 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia5(config.media.md);
   const { isHLSRunning } = useRecordingStreaming3();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = ((_c = (_b7 = (_a7 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
   const showGoLive = (joinForm == null ? void 0 : joinForm.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Form,
     {
       css: { flexDirection: cannotPublishVideo ? "column" : "row", "@md": { flexDirection: "row" } },
       onSubmit: formSubmit
     },
-    /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React52.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React52.createElement(
       Input,
       {
         required: true,
@@ -6905,8 +6306,8 @@ var PreviewForm = ({
           }
         }
       }
-    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React54.createElement(PreviewSettings, null) : null),
-    /* @__PURE__ */ React54.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React54.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
+    ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React52.createElement(PreviewSettings, null) : null),
+    /* @__PURE__ */ React52.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React52.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
   );
 };
 var Form = styled("form", {
@@ -6923,7 +6324,7 @@ var Form = styled("form", {
 var PreviewForm_default = PreviewForm;
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-var VirtualBackground = React55.lazy(() => import("./VirtualBackground-3TI5NA4V.js"));
+var VirtualBackground = React53.lazy(() => import("./VirtualBackground-UVZJVOA2.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -6944,9 +6345,9 @@ var PreviewJoin = ({
   );
   const { isStreamingOn } = useRecordingStreaming4();
   const authToken = useAuthToken();
-  const [name, setName] = useState19(initialName || previewPreference.name);
+  const [name, setName] = useState16(initialName || previewPreference.name);
   const { toggleAudio, toggleVideo } = useAVToggle2();
-  const [previewError, setPreviewError] = useState19(false);
+  const [previewError, setPreviewError] = useState16(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants();
   const { enableJoin, preview, join } = usePreviewJoin({
@@ -6966,8 +6367,8 @@ var PreviewJoin = ({
     },
     asRole
   });
-  const roomState = useHMSStore25(selectRoomState6);
-  const savePreferenceAndJoin = useCallback17(() => {
+  const roomState = useHMSStore21(selectRoomState6);
+  const savePreferenceAndJoin = useCallback16(() => {
     setPreviewPreference({
       name
     });
@@ -6976,9 +6377,9 @@ var PreviewJoin = ({
   }, [join, name, setPreviewPreference, onJoin]);
   const roomLayout = useRoomLayout();
   const { preview_header: previewHeader = {} } = ((_c = (_b7 = (_a7 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
-  const localPeer = useHMSStore25(selectLocalPeer);
-  const videoTrack = useHMSStore25(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isMobile = useMedia10(config.media.md);
+  const localPeer = useHMSStore21(selectLocalPeer);
+  const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isMobile = useMedia6(config.media.md);
   const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
   useEffect24(() => {
     if (authToken) {
@@ -6994,29 +6395,29 @@ var PreviewJoin = ({
       setName(initialName);
     }
   }, [initialName]);
-  return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React55.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React55.createElement(Box, null), /* @__PURE__ */ React55.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React55.createElement(Logo, null), /* @__PURE__ */ React55.createElement(
+  return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React53.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React53.createElement(Box, null), /* @__PURE__ */ React53.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React53.createElement(Logo, null), /* @__PURE__ */ React53.createElement(
     Text,
     {
       variant: "h4",
       css: { wordBreak: "break-word", textAlign: "center", mt: "$14", mb: "$4", "@md": { mt: "$8", mb: "$2" } }
     },
     previewHeader.title
-  ), /* @__PURE__ */ React55.createElement(
+  ), /* @__PURE__ */ React53.createElement(
     Text,
     {
       css: { c: "$on_surface_medium", my: "0", textAlign: "center", maxWidth: "100%", wordWrap: "break-word" },
       variant: "sm"
     },
     previewHeader.sub_title
-  ), /* @__PURE__ */ React55.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React55.createElement(
+  ), /* @__PURE__ */ React53.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React53.createElement(
     Chip_default,
     {
       content: "LIVE",
       backgroundColor: "$alert_error_default",
       textColor: "#FFF",
-      icon: /* @__PURE__ */ React55.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
+      icon: /* @__PURE__ */ React53.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
     }
-  ) : null, /* @__PURE__ */ React55.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React55.createElement(
+  ) : null, /* @__PURE__ */ React53.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React53.createElement(
     Flex,
     {
       align: "center",
@@ -7028,8 +6429,8 @@ var PreviewJoin = ({
         flexDirection: "column"
       }
     },
-    /* @__PURE__ */ React55.createElement(PreviewTile, { name, error: previewError })
-  ) : null, /* @__PURE__ */ React55.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React55.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React53.createElement(PreviewTile, { name, error: previewError })
+  ) : null, /* @__PURE__ */ React53.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React53.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React53.createElement(
     PreviewForm_default,
     {
       name,
@@ -7039,7 +6440,7 @@ var PreviewJoin = ({
       cannotPublishVideo: !toggleVideo,
       cannotPublishAudio: !toggleAudio
     }
-  ))) : /* @__PURE__ */ React55.createElement(FullPageProgress_default, null);
+  ))) : /* @__PURE__ */ React53.createElement(FullPageProgress_default, null);
 };
 var Container3 = styled("div", __spreadProps(__spreadValues({
   width: "100%"
@@ -7048,17 +6449,17 @@ var Container3 = styled("div", __spreadProps(__spreadValues({
   px: "$10"
 }));
 var PreviewTile = ({ name, error }) => {
-  const localPeer = useHMSStore25(selectLocalPeer);
+  const localPeer = useHMSStore21(selectLocalPeer);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle2();
-  const isVideoOn = useHMSStore25(selectIsLocalVideoEnabled5);
+  const isVideoOn = useHMSStore21(selectIsLocalVideoEnabled5);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const trackSelector = selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack);
-  const track = useHMSStore25(trackSelector);
+  const trackSelector = selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack);
+  const track = useHMSStore21(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-  const videoTrack = useHMSStore25(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isMobile = useMedia10(config.media.md);
+  const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isMobile = useMedia6(config.media.md);
   const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React53.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -7074,20 +6475,20 @@ var PreviewTile = ({ name, error }) => {
         }
       }
     },
-    localPeer ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React55.createElement(
+    localPeer ? /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React53.createElement(
       Video,
       {
         mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
         trackId: localPeer.videoTrack,
         "data-testid": "preview_tile"
       }
-    ), !isVideoOn ? /* @__PURE__ */ React55.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React55.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ React55.createElement(FullPageProgress_default, null) : null,
-    showMuteIcon ? /* @__PURE__ */ React55.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ React55.createElement(MicOffIcon4, null)) : /* @__PURE__ */ React55.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })
+    ), !isVideoOn ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React53.createElement(Avatar, { name, "data-testid": "preview_avatar_tile", size: "medium" })) : null) : !error ? /* @__PURE__ */ React53.createElement(FullPageProgress_default, null) : null,
+    showMuteIcon ? /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(MicOffIcon2, { height: 16, width: 16 })) : /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack }))
   );
 };
 var PreviewControls = ({ hideSettings }) => {
-  const isMobile = useMedia10(config.media.md);
-  return /* @__PURE__ */ React55.createElement(
+  const isMobile = useMedia6(config.media.md);
+  return /* @__PURE__ */ React53.createElement(
     Flex,
     {
       justify: hideSettings && isMobile ? "center" : "between",
@@ -7096,13 +6497,13 @@ var PreviewControls = ({ hideSettings }) => {
         mt: "$8"
       }
     },
-    /* @__PURE__ */ React55.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React55.createElement(AudioVideoToggle, null), /* @__PURE__ */ React55.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React55.createElement(VirtualBackground, null) : null)),
-    !hideSettings ? /* @__PURE__ */ React55.createElement(PreviewSettings, null) : null
+    /* @__PURE__ */ React53.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React53.createElement(AudioVideoToggle, null), /* @__PURE__ */ React53.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React53.createElement(VirtualBackground, null) : null)),
+    !hideSettings ? /* @__PURE__ */ React53.createElement(PreviewSettings, null) : null
   );
 };
-var PreviewSettings = React55.memo(() => {
-  const [open, setOpen] = useState19(false);
-  return /* @__PURE__ */ React55.createElement(Fragment6, null, /* @__PURE__ */ React55.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React55.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React55.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
+var PreviewSettings = React53.memo(() => {
+  const [open, setOpen] = useState16(false);
+  return /* @__PURE__ */ React53.createElement(Fragment4, null, /* @__PURE__ */ React53.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React53.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React53.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
 });
 var PreviewJoin_default = PreviewJoin;
 
@@ -7126,14 +6527,14 @@ var PreviewContainer = () => {
     }
     navigate(meetingURL);
   };
-  return /* @__PURE__ */ React56.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React54.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__ */ React56.createElement(
+    authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React54.createElement(
       PreviewJoin_default,
       {
         initialName,
@@ -7141,20 +6542,20 @@ var PreviewContainer = () => {
         asRole: previewAsRole != null ? previewAsRole : void 0,
         onJoin
       }
-    ) : /* @__PURE__ */ React56.createElement(FullPageProgress_default, null)
+    ) : /* @__PURE__ */ React54.createElement(FullPageProgress_default, null)
   ));
 };
 var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-import React58, { useEffect as useEffect25, useState as useState20 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
+import React56, { useEffect as useEffect25, useState as useState17 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
-import React57 from "react";
+import React55 from "react";
 var Toast2 = (_a7) => {
   var _b7 = _a7, { title, description, close = true, open, duration, onOpenChange, icon } = _b7, props = __objRest(_b7, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React55.createElement(
     Toast.HMSToast,
     __spreadValues({
       title,
@@ -7170,17 +6571,17 @@ var Toast2 = (_a7) => {
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 var ToastContainer = () => {
-  const isConnected = useHMSStore26(selectIsConnectedToRoom3);
-  const [toasts, setToast] = useState20([]);
+  const isConnected = useHMSStore22(selectIsConnectedToRoom3);
+  const [toasts, setToast] = useState17([]);
   useEffect25(() => {
     ToastManager.addListener(setToast);
     return () => {
       ToastManager.removeListener(setToast);
     };
   }, []);
-  return /* @__PURE__ */ React58.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
-    return /* @__PURE__ */ React58.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
-  }), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React56.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
+    return /* @__PURE__ */ React56.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
+  }), /* @__PURE__ */ React56.createElement(
     Toast.Viewport,
     {
       css: __spreadValues({
@@ -7191,13 +6592,13 @@ var ToastContainer = () => {
 };
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
-import React59, { useCallback as useCallback18, useEffect as useEffect26, useMemo as useMemo4, useState as useState21 } from "react";
-import { useMedia as useMedia11 } from "react-use";
+import React57, { useCallback as useCallback17, useEffect as useEffect26, useMemo as useMemo3, useState as useState18 } from "react";
+import { useMedia as useMedia7 } from "react-use";
 import {
-  selectLocalPeerID as selectLocalPeerID6,
-  selectPeerNameByID as selectPeerNameByID2,
-  useCustomEvent as useCustomEvent3,
-  useHMSStore as useHMSStore27,
+  selectLocalPeerID as selectLocalPeerID4,
+  selectPeerNameByID,
+  useCustomEvent as useCustomEvent2,
+  useHMSStore as useHMSStore23,
   useHMSVanillaStore as useHMSVanillaStore7
 } from "@100mslive/react-sdk";
 var emojiCount = 1;
@@ -7224,17 +6625,17 @@ var getStartingPoints = (isMobile) => {
   return arr;
 };
 function FlyingEmoji() {
-  const localPeerId = useHMSStore27(selectLocalPeerID6);
+  const localPeerId = useHMSStore23(selectLocalPeerID4);
   const vanillaStore = useHMSVanillaStore7();
-  const [emojis, setEmojis] = useState21([]);
-  const isMobile = useMedia11(config.media.md);
-  const startingPoints = useMemo4(() => getStartingPoints(isMobile), [isMobile]);
-  const showFlyingEmoji = useCallback18(
+  const [emojis, setEmojis] = useState18([]);
+  const isMobile = useMedia7(config.media.md);
+  const startingPoints = useMemo3(() => getStartingPoints(isMobile), [isMobile]);
+  const showFlyingEmoji = useCallback17(
     ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
       }
-      const senderPeerName = vanillaStore.getState(selectPeerNameByID2(senderId));
+      const senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));
       const nameToShow = localPeerId === senderId ? "You" : senderPeerName;
       const startingPoint = startingPoints[emojiCount % startingPoints.length];
       const id = emojiCount++;
@@ -7253,14 +6654,14 @@ function FlyingEmoji() {
     },
     [localPeerId, vanillaStore, startingPoints]
   );
-  useCustomEvent3({
+  useCustomEvent2({
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
   useEffect26(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React57.createElement(
     Box,
     {
       css: {
@@ -7276,7 +6677,7 @@ function FlyingEmoji() {
       }
     },
     emojis.map((emoji) => {
-      return /* @__PURE__ */ React59.createElement(
+      return /* @__PURE__ */ React57.createElement(
         Flex,
         {
           key: emoji.id,
@@ -7292,8 +6693,8 @@ function FlyingEmoji() {
             setEmojis(emojis.filter((item) => item.id !== emoji.id));
           }
         },
-        /* @__PURE__ */ React59.createElement(Box, null, /* @__PURE__ */ React59.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
-        /* @__PURE__ */ React59.createElement(
+        /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
+        /* @__PURE__ */ React57.createElement(
           Box,
           {
             css: {
@@ -7303,7 +6704,7 @@ function FlyingEmoji() {
               borderRadius: "$1"
             }
           },
-          /* @__PURE__ */ React59.createElement(
+          /* @__PURE__ */ React57.createElement(
             Text,
             {
               css: {
@@ -7321,45 +6722,45 @@ function FlyingEmoji() {
 }
 
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
-import React60, { useCallback as useCallback19 } from "react";
-import { useCustomEvent as useCustomEvent4, useHMSActions as useHMSActions18 } from "@100mslive/react-sdk";
+import React58, { useCallback as useCallback18 } from "react";
+import { useCustomEvent as useCustomEvent3, useHMSActions as useHMSActions16 } from "@100mslive/react-sdk";
 function RemoteStopScreenshare() {
-  const actions = useHMSActions18();
-  const onRemoteStopScreenshare = useCallback19(() => __async(this, null, function* () {
+  const actions = useHMSActions16();
+  const onRemoteStopScreenshare = useCallback18(() => __async(this, null, function* () {
     yield actions.setScreenShareEnabled(false);
   }), [actions]);
-  useCustomEvent4({
+  useCustomEvent3({
     type: REMOTE_STOP_SCREENSHARE_TYPE,
     onEvent: onRemoteStopScreenshare
   });
-  return /* @__PURE__ */ React60.createElement(React60.Fragment, null);
+  return /* @__PURE__ */ React58.createElement(React58.Fragment, null);
 }
 
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
-import { useCallback as useCallback20, useEffect as useEffect28, useRef as useRef9 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef9 } from "react";
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
-  selectPermissions as selectPermissions4,
-  useHMSActions as useHMSActions19,
-  useHMSStore as useHMSStore29,
+  selectPermissions as selectPermissions2,
+  useHMSActions as useHMSActions17,
+  useHMSStore as useHMSStore25,
   useRecordingStreaming as useRecordingStreaming5
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/common/hooks.js
-import { useEffect as useEffect27, useRef as useRef8, useState as useState22 } from "react";
+import { useEffect as useEffect27, useRef as useRef8, useState as useState19 } from "react";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
 import {
   selectAvailableRoleNames as selectAvailableRoleNames2,
   selectIsConnectedToRoom as selectIsConnectedToRoom4,
   selectPeerCount,
-  selectPeerMetadata as selectPeerMetadata3,
+  selectPeerMetadata as selectPeerMetadata2,
   selectPeers,
   selectRemotePeers,
-  useHMSStore as useHMSStore28,
+  useHMSStore as useHMSStore24,
   useHMSVanillaStore as useHMSVanillaStore8
 } from "@100mslive/react-sdk";
 var useFilteredRoles = () => {
-  const roles = useHMSStore28(selectAvailableRoleNames2);
+  const roles = useHMSStore24(selectAvailableRoleNames2);
   return roles;
 };
 var useShowStreamingUI = () => {
@@ -7370,15 +6771,15 @@ var useShowStreamingUI = () => {
 };
 var useParticipants2 = (params) => {
   var _a7;
-  const isConnected = useHMSStore28(selectIsConnectedToRoom4);
-  const peerCount = useHMSStore28(selectPeerCount);
-  const availableRoles = useHMSStore28(selectAvailableRoleNames2);
-  let participantList = useHMSStore28(isConnected ? selectPeers : selectRemotePeers);
+  const isConnected = useHMSStore24(selectIsConnectedToRoom4);
+  const peerCount = useHMSStore24(selectPeerCount);
+  const availableRoles = useHMSStore24(selectAvailableRoleNames2);
+  let participantList = useHMSStore24(isConnected ? selectPeers : selectRemotePeers);
   const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
   const vanillaStore = useHMSVanillaStore8();
   if ((_a7 = params == null ? void 0 : params.metadata) == null ? void 0 : _a7.isHandRaised) {
     participantList = participantList.filter((peer) => {
-      return vanillaStore.getState(selectPeerMetadata3(peer.id)).isHandRaised;
+      return vanillaStore.getState(selectPeerMetadata2(peer.id)).isHandRaised;
     });
   }
   if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
@@ -7394,13 +6795,13 @@ var useParticipants2 = (params) => {
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
 var useAutoStartStreaming = () => {
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore29(selectPermissions4);
+  const permissions = useHMSStore25(selectPermissions2);
   const showStreamingUI = useShowStreamingUI();
-  const hmsActions = useHMSActions19();
-  const isConnected = useHMSStore29(selectIsConnectedToRoom5);
+  const hmsActions = useHMSActions17();
+  const isConnected = useHMSStore25(selectIsConnectedToRoom5);
   const { isHLSRunning } = useRecordingStreaming5();
   const streamStartedRef = useRef9(false);
-  const startHLS = useCallback20(() => __async(void 0, null, function* () {
+  const startHLS = useCallback19(() => __async(void 0, null, function* () {
     var _a7;
     try {
       if (isHLSStarted || !showStreamingUI || isHLSRunning) {
@@ -7431,8 +6832,8 @@ var useAutoStartStreaming = () => {
 };
 
 // src/Prebuilt/App.tsx
-var Conference = React61.lazy(() => import("./conference-JNABIZBG.js"));
-var HMSPrebuilt = React61.forwardRef(
+var Conference = React59.lazy(() => import("./conference-N7S47TDK.js"));
+var HMSPrebuilt = React59.forwardRef(
   ({
     roomCode = "",
     authToken = "",
@@ -7443,12 +6844,13 @@ var HMSPrebuilt = React61.forwardRef(
     themes,
     options: { userName = "", userId = "", endpoints } = {},
     screens,
-    onLeave
+    onLeave,
+    onJoin
   }, ref) => {
     var _a7, _b7, _c, _d;
     const metadata = "";
     const reactiveStore = useRef10();
-    const [hydrated, setHydrated] = React61.useState(false);
+    const [hydrated, setHydrated] = React59.useState(false);
     useEffect29(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
@@ -7500,7 +6902,7 @@ var HMSPrebuilt = React61.forwardRef(
       return null;
     }
     globalStyles();
-    return /* @__PURE__ */ React61.createElement(ErrorBoundary, null, /* @__PURE__ */ React61.createElement(
+    return /* @__PURE__ */ React59.createElement(ErrorBoundary, null, /* @__PURE__ */ React59.createElement(
       HMSPrebuiltContext.Provider,
       {
         value: {
@@ -7508,6 +6910,7 @@ var HMSPrebuilt = React61.forwardRef(
           roomId,
           role,
           onLeave,
+          onJoin,
           userName,
           userId,
           endpoints: {
@@ -7518,7 +6921,7 @@ var HMSPrebuilt = React61.forwardRef(
           }
         }
       },
-      /* @__PURE__ */ React61.createElement(
+      /* @__PURE__ */ React59.createElement(
         HMSRoomProvider,
         {
           isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -7527,7 +6930,7 @@ var HMSPrebuilt = React61.forwardRef(
           notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
           stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
         },
-        /* @__PURE__ */ React61.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React61.createElement(RoomLayoutContext.Consumer, null, (data) => {
+        /* @__PURE__ */ React59.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React59.createElement(RoomLayoutContext.Consumer, null, (data) => {
           var _a8;
           const layout = data == null ? void 0 : data.layout;
           const theme2 = ((_a8 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a8[0]) || {};
@@ -7536,7 +6939,7 @@ var HMSPrebuilt = React61.forwardRef(
           if (typography2 == null ? void 0 : typography2.font_family) {
             fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
           }
-          return /* @__PURE__ */ React61.createElement(
+          return /* @__PURE__ */ React59.createElement(
             HMSThemeProvider,
             {
               themeType: `${theme2.name}-${Date.now()}`,
@@ -7549,11 +6952,12 @@ var HMSPrebuilt = React61.forwardRef(
                 }
               }
             },
-            /* @__PURE__ */ React61.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
-            /* @__PURE__ */ React61.createElement(Init, null),
-            /* @__PURE__ */ React61.createElement(
+            /* @__PURE__ */ React59.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
+            /* @__PURE__ */ React59.createElement(Init, null),
+            /* @__PURE__ */ React59.createElement(
               Box,
               {
+                id: "prebuilt-container",
                 css: {
                   bg: "$background_dim",
                   size: "100%",
@@ -7561,7 +6965,7 @@ var HMSPrebuilt = React61.forwardRef(
                   "-webkit-text-size-adjust": "100%"
                 }
               },
-              /* @__PURE__ */ React61.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
+              /* @__PURE__ */ React59.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
             )
           );
         }))
@@ -7572,41 +6976,41 @@ var HMSPrebuilt = React61.forwardRef(
 HMSPrebuilt.displayName = "HMSPrebuilt";
 var Redirector = ({ showPreview }) => {
   const { roomId, role } = useParams5();
-  return /* @__PURE__ */ React61.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
+  return /* @__PURE__ */ React59.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
 };
 var RouteList = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   useAutoStartStreaming();
-  return /* @__PURE__ */ React61.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React61.createElement(Route, { path: "preview" }, /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React59.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "preview" }, /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React61.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
     }
-  ), /* @__PURE__ */ React61.createElement(
+  ), /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React61.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
     }
-  )) : null, /* @__PURE__ */ React61.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React61.createElement(
+  )) : null, /* @__PURE__ */ React59.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React61.createElement(Conference, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
     }
-  ), /* @__PURE__ */ React61.createElement(
+  ), /* @__PURE__ */ React59.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React61.createElement(Conference, null))
+      element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
     }
-  )), isLeaveScreenEnabled ? /* @__PURE__ */ React61.createElement(Route, { path: "leave" }, /* @__PURE__ */ React61.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React61.createElement(PostLeave_default, null) }), /* @__PURE__ */ React61.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React61.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React61.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React61.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React61.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React61.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
+  )), isLeaveScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "leave" }, /* @__PURE__ */ React59.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) }), /* @__PURE__ */ React59.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
 };
 var BackSwipe = () => {
-  const isConnectedToRoom = useHMSStore30(selectIsConnectedToRoom6);
-  const hmsActions = useHMSActions20();
+  const isConnectedToRoom = useHMSStore26(selectIsConnectedToRoom6);
+  const hmsActions = useHMSActions18();
   useEffect29(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
       if (isConnectedToRoom) {
@@ -7622,7 +7026,7 @@ var BackSwipe = () => {
 };
 var Router = ({ children }) => {
   const { roomId, role, roomCode } = useHMSPrebuiltContext();
-  return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React61.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React61.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
+  return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React59.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React59.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
 };
 function AppRoutes({
   authTokenByRoomCodeEndpoint,
@@ -7630,7 +7034,7 @@ function AppRoutes({
 }) {
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
-  return /* @__PURE__ */ React61.createElement(Router, null, /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(ToastContainer, null), /* @__PURE__ */ React61.createElement(Notifications, null), /* @__PURE__ */ React61.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React61.createElement(FlyingEmoji, null), /* @__PURE__ */ React61.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React61.createElement(KeyboardHandler, null), /* @__PURE__ */ React61.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React61.createElement(Routes, null, /* @__PURE__ */ React61.createElement(Route, { path: "/*", element: /* @__PURE__ */ React61.createElement(RouteList, null) }))));
+  return /* @__PURE__ */ React59.createElement(Router, null, /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(ToastContainer, null), /* @__PURE__ */ React59.createElement(Notifications, null), /* @__PURE__ */ React59.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React59.createElement(FlyingEmoji, null), /* @__PURE__ */ React59.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React59.createElement(HeadlessEndRoomListener, null), /* @__PURE__ */ React59.createElement(KeyboardHandler, null), /* @__PURE__ */ React59.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React59.createElement(Routes, null, /* @__PURE__ */ React59.createElement(Route, { path: "/*", element: /* @__PURE__ */ React59.createElement(RouteList, null) }))));
 }
 
 // src/Progress/index.tsx
@@ -7673,6 +7077,7 @@ export {
   Video,
   StyledMenuTile,
   useBorderAudioLevel,
+  AudioLevel,
   Popover2 as Popover,
   VideoTileStats,
   Checkbox,
@@ -7697,6 +7102,7 @@ export {
   APP_DATA,
   UI_SETTINGS,
   SIDE_PANE_OPTIONS,
+  REMOTE_STOP_SCREENSHARE_TYPE,
   isChrome,
   isIOS,
   isMacOS,
@@ -7717,6 +7123,7 @@ export {
   useSetSubscribedChatSelector,
   useSetAppDataByKey,
   useHMSPrebuiltContext,
+  PrebuiltDialogPortal,
   DialogContent,
   DialogRow,
   DialogCol,
@@ -7737,14 +7144,12 @@ export {
   Header2 as Header,
   AudioVideoToggle,
   ConnectionIndicator,
+  TileConnection_default,
+  PrebuiltAudioIndicator,
+  PrebuiltAttributeBox,
   DialogDropdownTrigger,
   useDropdownSelection,
   SettingsModal_default,
-  ChangeNameModal,
-  useDropdownList,
-  TileMenu_default,
-  getVideoTileLabel,
-  VideoTile_default,
   PreviewTile,
   PreviewControls,
   useFilteredRoles,
@@ -7752,4 +7157,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-Z7P5WITU.js.map
+//# sourceMappingURL=chunk-PRM33R4R.js.map