@100mslive/roomkit-react 0.3.22-alpha.3 → 0.3.22-alpha.5

package/dist/chunk-2J5WS52X.js

@@ -1,2595 +0,0 @@
-import {
-  StopRecordingInSheet
-} from "./chunk-QKXHQ6DV.js";
-import {
-  EmojiReaction
-} from "./chunk-LO4BXA4G.js";
-import {
-  useMyMetadata
-} from "./chunk-RTWNTT77.js";
-import {
-  Accordion,
-  ActionTile,
-  Button,
-  ChangeNameModal,
-  Checkbox,
-  Dialog,
-  DialogContent,
-  DialogDropdownTrigger,
-  DialogRow,
-  DialogSelect,
-  Ee,
-  HorizontalDivider,
-  Input,
-  Label,
-  Loading,
-  NoiseCancellation,
-  PictureInPicture,
-  RadioGroup,
-  RoleChangeModal,
-  SettingsModal_default,
-  Sheet,
-  Switch,
-  TextArea,
-  formatBytes,
-  trackSourceOptions,
-  trackTypeOptions,
-  useDropdownSelection,
-  useIsSidepaneTypeOpen,
-  usePIPWindow,
-  usePollViewToggle,
-  useSheetToggle,
-  useSidepaneToggle
-} from "./chunk-26D5FDBW.js";
-import {
-  Text
-} from "./chunk-JKWX7W4K.js";
-import {
-  Dropdown,
-  ToastManager,
-  useDropdownList,
-  useFilteredRoles,
-  useLandscapeHLSStream,
-  useMobileHLSStream,
-  useRecordingHandler
-} from "./chunk-BQOT4DK7.js";
-import {
-  Box,
-  Flex
-} from "./chunk-7QZJMUHM.js";
-import {
-  IconButton,
-  IconButton_default,
-  Tooltip,
-  getFormattedCount,
-  usePinnedTrack,
-  useRoomLayoutConferencingScreen,
-  useRoomLayoutHeader,
-  useSetAppDataByKey,
-  useSetIsCaptionEnabled,
-  useSetSubscribedChatSelector,
-  useSetUiSettings,
-  useShowPolls
-} from "./chunk-ENHSO6YN.js";
-import {
-  APP_DATA,
-  CAPTION_TOAST,
-  CHAT_SELECTOR,
-  DEFAULT_PORTAL_CONTAINER,
-  RTMP_RECORD_DEFAULT_RESOLUTION,
-  RTMP_RECORD_RESOLUTION_MAX,
-  RTMP_RECORD_RESOLUTION_MIN,
-  SHEET_OPTIONS,
-  SIDE_PANE_OPTIONS,
-  UI_SETTINGS,
-  __async,
-  __publicField,
-  __spreadValues,
-  config,
-  getCssText,
-  init_define_process_env,
-  isMacOS,
-  styled
-} from "./chunk-TBXRX6MK.js";
-
-// src/Prebuilt/components/MoreSettings/MoreSettings.tsx
-init_define_process_env();
-import React20 from "react";
-import { useMedia as useMedia4 } from "react-use";
-
-// src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
-init_define_process_env();
-import React18, { Fragment as Fragment2, useState as useState12 } from "react";
-import { HMSHLSPlayer } from "@100mslive/hls-player";
-import { match as match2 } from "ts-pattern";
-import {
-  HMSTranscriptionMode as HMSTranscriptionMode2,
-  selectAppData,
-  selectIsTranscriptionAllowedByMode,
-  selectIsTranscriptionEnabled as selectIsTranscriptionEnabled2,
-  selectLocalPeerID as selectLocalPeerID4,
-  useHMSActions as useHMSActions12,
-  useHMSStore as useHMSStore11
-} from "@100mslive/react-sdk";
-import {
-  BrbIcon,
-  CheckIcon as CheckIcon2,
-  HamburgerMenuIcon,
-  InfoIcon as InfoIcon2,
-  OpenCaptionIcon,
-  PipIcon as PipIcon2,
-  SettingsIcon
-} from "@100mslive/react-icons";
-
-// src/Prebuilt/components/PIP/index.jsx
-init_define_process_env();
-import React2 from "react";
-
-// src/Prebuilt/components/PIP/PIPComponent.tsx
-init_define_process_env();
-import React, { useCallback, useEffect, useState } from "react";
-import { selectPeers, selectTracksMap, useHMSActions, useHMSVanillaStore } from "@100mslive/react-sdk";
-import { PipIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/PIP/SetupMediaSession.js
-init_define_process_env();
-import { selectIsLocalAudioEnabled, selectIsLocalVideoEnabled } from "@100mslive/react-sdk";
-var SetupMediaSession = class {
-  constructor() {
-    __publicField(this, "setup", (actions, store) => {
-      this.actions = actions;
-      this.store = store;
-      this.initState();
-      this.setUpHandlers();
-    });
-    __publicField(this, "initState", () => {
-      var _a, _b, _c, _d;
-      const isMicActive = this.store.getState(selectIsLocalAudioEnabled);
-      const isCamActive = this.store.getState(selectIsLocalVideoEnabled);
-      (_b = (_a = navigator.mediaSession) == null ? void 0 : _a.setMicrophoneActive) == null ? void 0 : _b.call(_a, isMicActive);
-      (_d = (_c = navigator.mediaSession) == null ? void 0 : _c.setCameraActive) == null ? void 0 : _d.call(_c, isCamActive);
-      this.store.subscribe((isMicActive2) => {
-        var _a2, _b2;
-        (_b2 = (_a2 = navigator.mediaSession) == null ? void 0 : _a2.setMicrophoneActive) == null ? void 0 : _b2.call(_a2, isMicActive2);
-      }, selectIsLocalAudioEnabled);
-      this.store.subscribe((isCamActive2) => {
-        var _a2, _b2;
-        (_b2 = (_a2 = navigator.mediaSession) == null ? void 0 : _a2.setCameraActive) == null ? void 0 : _b2.call(_a2, isCamActive2);
-      }, selectIsLocalVideoEnabled);
-    });
-    __publicField(this, "toggleMic", () => __async(this, null, function* () {
-      console.log("toggle mic clicked in pip");
-      const current = this.store.getState(selectIsLocalAudioEnabled);
-      yield this.actions.setLocalAudioEnabled(!current);
-    }));
-    __publicField(this, "toggleCam", () => __async(this, null, function* () {
-      console.log("toggle cam clicked in pip");
-      const current = this.store.getState(selectIsLocalVideoEnabled);
-      yield this.actions.setLocalVideoEnabled(!current);
-    }));
-    __publicField(this, "leave", () => {
-      console.log("leave called from pip");
-      this.actions.leave();
-    });
-    __publicField(this, "setUpHandlers", () => {
-      if (navigator.mediaSession) {
-        try {
-          navigator.mediaSession.setActionHandler("togglemicrophone", this.toggleMic);
-          navigator.mediaSession.setActionHandler("togglecamera", this.toggleCam);
-          navigator.mediaSession.setActionHandler("hangup", this.leave);
-        } catch (err) {
-          console.error("error in setting media session handlers", err);
-        }
-      }
-    });
-  }
-};
-var MediaSession = new SetupMediaSession();
-
-// src/Prebuilt/components/PIP/PIPComponent.tsx
-var PIPComponent = ({ content = null }) => {
-  const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
-  const hmsActions = useHMSActions();
-  const store = useHMSVanillaStore();
-  const onPipToggle = useCallback(() => {
-    if (!isPipOn) {
-      PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
-      MediaSession.setup(hmsActions, store);
-    } else {
-      PictureInPicture.stop().catch((err) => console.error("error in stopping pip", err));
-    }
-  }, [hmsActions, isPipOn, store]);
-  if (!PictureInPicture.isSupported()) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, content ? /* @__PURE__ */ React.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React.createElement(PipIcon, null))));
-};
-var ActivatedPIP = () => {
-  const store = useHMSVanillaStore();
-  const pinnedTrack = usePinnedTrack();
-  useEffect(() => {
-    function subscribeToStore() {
-      return store.subscribe((tracksMap) => {
-        let pipPeers = store.getState(selectPeers);
-        if (pinnedTrack) {
-          pipPeers = pipPeers.filter((peer) => pinnedTrack.peerId === peer.id);
-        }
-        PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch((err) => {
-          console.error("error in updating pip", err);
-        });
-      }, selectTracksMap);
-    }
-    let unsubscribe = PictureInPicture.isOn() ? subscribeToStore() : void 0;
-    PictureInPicture.listenToStateChange((isOn) => {
-      if (isOn) {
-        if (!unsubscribe) {
-          unsubscribe = subscribeToStore();
-        }
-      } else {
-        unsubscribe == null ? void 0 : unsubscribe();
-        unsubscribe = void 0;
-      }
-    });
-    return () => {
-      unsubscribe == null ? void 0 : unsubscribe();
-      unsubscribe = void 0;
-    };
-  }, [pinnedTrack, store]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
-};
-var PIPComponent_default = PIPComponent;
-
-// src/Prebuilt/components/PIP/index.jsx
-var PIP = ({ content = null }) => {
-  return /* @__PURE__ */ React2.createElement(PIPComponent_default, { content });
-};
-
-// src/Prebuilt/components/PIP/PIPChat.tsx
-init_define_process_env();
-import React7, { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo2, useState as useState5 } from "react";
-import {
-  selectHMSMessages as selectHMSMessages2,
-  selectLocalPeerID as selectLocalPeerID2,
-  selectPeerNameByID as selectPeerNameByID3,
-  selectSessionStore as selectSessionStore5,
-  selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSStore as useHMSStore5
-} from "@100mslive/react-sdk";
-import { SendIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/ChatBody.tsx
-init_define_process_env();
-import React6, { Fragment, useCallback as useCallback5, useEffect as useEffect3, useLayoutEffect, useMemo, useRef, useState as useState4 } from "react";
-import { useMedia as useMedia2 } from "react-use";
-import AutoSizer from "react-virtualized-auto-sizer";
-import { VariableSizeList } from "react-window";
-import {
-  selectHMSMessages,
-  selectLocalPeerID,
-  selectLocalPeerName as selectLocalPeerName2,
-  selectLocalPeerRoleName,
-  selectPeerNameByID as selectPeerNameByID2,
-  selectSessionStore as selectSessionStore4,
-  selectUnreadHMSMessagesCount,
-  useHMSActions as useHMSActions5,
-  useHMSStore as useHMSStore4,
-  useHMSVanillaStore as useHMSVanillaStore3
-} from "@100mslive/react-sdk";
-import { SolidPinIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/ChatActions.tsx
-init_define_process_env();
-import React4, { useCallback as useCallback4, useState as useState2 } from "react";
-import { selectLocalPeerName, selectPermissions, useHMSActions as useHMSActions4, useHMSStore as useHMSStore2 } from "@100mslive/react-sdk";
-import {
-  CopyIcon,
-  CrossCircleIcon,
-  CrossIcon,
-  EyeCloseIcon,
-  PeopleRemoveIcon,
-  PinIcon,
-  ReplyGroupIcon,
-  ReplyIcon,
-  VerticalMenuIcon
-} from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/MwebChatOption.tsx
-init_define_process_env();
-import React3 from "react";
-var MwebChatOption = ({
-  icon,
-  text,
-  onClick,
-  color = "$on_surface_high"
-}) => {
-  return /* @__PURE__ */ React3.createElement(Flex, { align: "center", css: { w: "100%", color, cursor: "pointer", gap: "$4", p: "$8" }, onClick }, icon, /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { color, fontWeight: "$semiBold" } }, text));
-};
-
-// src/Prebuilt/components/hooks/useChatBlacklist.ts
-init_define_process_env();
-import { useCallback as useCallback2 } from "react";
-import { selectLocalPeer, selectSessionStore, useHMSActions as useHMSActions2, useHMSStore } from "@100mslive/react-sdk";
-var useChatBlacklist = (sessionStoreKey) => {
-  const hmsActions = useHMSActions2();
-  const blacklistedIDs = useHMSStore(selectSessionStore(sessionStoreKey));
-  const blacklistItem = useCallback2(
-    (blacklistID) => __async(void 0, null, function* () {
-      yield hmsActions.sessionStore.set(sessionStoreKey, [...blacklistedIDs || [], blacklistID]).catch((err) => ToastManager.addToast({ title: err.description }));
-    }),
-    [hmsActions, sessionStoreKey, blacklistedIDs]
-  );
-  return { blacklistItem, blacklistedIDs };
-};
-var useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = "" }) => {
-  const localPeer = useHMSStore(selectLocalPeer);
-  const blacklistedPeerIDs = useHMSStore(selectSessionStore("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
-  return blacklistedPeerIDs == null ? void 0 : blacklistedPeerIDs.includes(local ? localPeer == null ? void 0 : localPeer.customerUserId : peerCustomerUserId);
-};
-
-// src/Prebuilt/components/hooks/usePinnedMessages.ts
-init_define_process_env();
-import { useCallback as useCallback3 } from "react";
-import {
-  selectPeerNameByID,
-  selectSessionStore as selectSessionStore2,
-  useHMSActions as useHMSActions3,
-  useHMSVanillaStore as useHMSVanillaStore2
-} from "@100mslive/react-sdk";
-var usePinnedMessages = () => {
-  const hmsActions = useHMSActions3();
-  const vanillaStore = useHMSVanillaStore2();
-  const setPinnedMessages = useCallback3(
-    (message, pinnedBy) => __async(void 0, null, function* () {
-      const peerName = vanillaStore.getState(selectPeerNameByID(message == null ? void 0 : message.sender)) || (message == null ? void 0 : message.senderName);
-      const newPinnedMessage = { text: "", id: message.id, pinnedBy };
-      if (message && peerName) {
-        newPinnedMessage["text"] = `${peerName}: ${message.message}`;
-      } else if (message) {
-        newPinnedMessage["text"] = message.message;
-      }
-      const pinnedMessages = vanillaStore.getState(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */)) || [];
-      if (!(pinnedMessages == null ? void 0 : pinnedMessages.find((pinnedMessage) => pinnedMessage.id === newPinnedMessage.id))) {
-        yield hmsActions.sessionStore.set("pinnedMessages" /* PINNED_MESSAGES */, [...pinnedMessages, newPinnedMessage].slice(-3)).catch((err) => ToastManager.addToast({ title: err.description }));
-      }
-    }),
-    [hmsActions, vanillaStore]
-  );
-  const removePinnedMessage = useCallback3(
-    (indexToRemove) => __async(void 0, null, function* () {
-      const pinnedMessages = vanillaStore.getState(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */)) || [];
-      if (pinnedMessages[indexToRemove]) {
-        yield hmsActions.sessionStore.set(
-          "pinnedMessages" /* PINNED_MESSAGES */,
-          pinnedMessages.filter((_, index) => index !== indexToRemove)
-        ).catch((err) => ToastManager.addToast({ title: err.description }));
-      }
-    }),
-    [hmsActions, vanillaStore]
-  );
-  const unpinBlacklistedMessages = useCallback3(
-    (blacklistedMessageIDSet) => __async(void 0, null, function* () {
-      const pinnedMessages = vanillaStore.getState(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */)) || [];
-      const filteredPinnedMessages = pinnedMessages == null ? void 0 : pinnedMessages.filter(
-        (pinnedMessage) => !(blacklistedMessageIDSet == null ? void 0 : blacklistedMessageIDSet.has(pinnedMessage.id))
-      );
-      yield hmsActions.sessionStore.set("pinnedMessages" /* PINNED_MESSAGES */, filteredPinnedMessages).catch((err) => ToastManager.addToast({ title: err.description }));
-    }),
-    [hmsActions, vanillaStore]
-  );
-  return { setPinnedMessages, removePinnedMessage, unpinBlacklistedMessages };
-};
-
-// src/Prebuilt/components/Chat/ChatActions.tsx
-var iconStyle = { height: "1.125rem", width: "1.125rem" };
-var tooltipBoxCSS = {
-  fontSize: "$xs",
-  backgroundColor: "$surface_default",
-  p: "$1 $5",
-  fontWeight: "$regular",
-  borderRadius: "$3"
-};
-var ChatActions = ({
-  showPinAction,
-  onReply,
-  onReplyGroup,
-  showReply,
-  message,
-  sentByLocalPeer,
-  isMobile,
-  openSheet,
-  setOpenSheet
-}) => {
-  var _a, _b;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { can_hide_message = false, can_block_user = false } = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.real_time_controls) || {};
-  const { roles_whitelist = [] } = (elements == null ? void 0 : elements.chat) || {};
-  const [open, setOpen] = useState2(false);
-  const actions = useHMSActions4();
-  const canRemoveOthers = (_b = useHMSStore2(selectPermissions)) == null ? void 0 : _b.removeOthers;
-  const { blacklistItem: blacklistPeer } = useChatBlacklist("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */);
-  const localPeerName = useHMSStore2(selectLocalPeerName);
-  const { setPinnedMessages, unpinBlacklistedMessages } = usePinnedMessages();
-  const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
-    "chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */
-  );
-  const isSenderBlocked = useIsPeerBlacklisted({ peerCustomerUserId: message.senderUserId });
-  const updatePinnedMessages = useCallback4(
-    (messageID = "") => {
-      const blacklistedMessageIDSet = /* @__PURE__ */ new Set([...blacklistedMessageIDs || [], messageID]);
-      unpinBlacklistedMessages(blacklistedMessageIDSet);
-    },
-    [blacklistedMessageIDs, unpinBlacklistedMessages]
-  );
-  const copyMessageContent = useCallback4(() => {
-    try {
-      navigator == null ? void 0 : navigator.clipboard.writeText(message.message);
-      ToastManager.addToast({
-        title: "Message copied successfully"
-      });
-    } catch (e) {
-      console.log(e);
-      ToastManager.addToast({
-        title: "Could not copy message"
-      });
-    }
-  }, [message]);
-  const options = {
-    reply: {
-      text: "Reply privately",
-      tooltipText: "Reply privately",
-      icon: /* @__PURE__ */ React4.createElement(ReplyIcon, { style: iconStyle }),
-      onClick: onReply,
-      show: showReply
-    },
-    replyGroup: {
-      text: "Reply to group",
-      tooltipText: "Reply to group",
-      icon: /* @__PURE__ */ React4.createElement(ReplyGroupIcon, { style: iconStyle }),
-      onClick: onReplyGroup,
-      show: !!message.senderRole && roles_whitelist.includes(message.senderRole)
-    },
-    pin: {
-      text: "Pin message",
-      tooltipText: "Pin",
-      icon: /* @__PURE__ */ React4.createElement(PinIcon, { style: iconStyle }),
-      onClick: () => setPinnedMessages(message, localPeerName || ""),
-      show: showPinAction
-    },
-    copy: {
-      text: "Copy text",
-      tooltipText: "Copy",
-      icon: /* @__PURE__ */ React4.createElement(CopyIcon, { style: iconStyle }),
-      onClick: copyMessageContent,
-      show: true
-    },
-    hide: {
-      text: message.recipientPeer ? "Hide for both" : "Hide for everyone",
-      icon: /* @__PURE__ */ React4.createElement(EyeCloseIcon, { style: iconStyle }),
-      onClick: () => __async(void 0, null, function* () {
-        blacklistMessage(message.id);
-        updatePinnedMessages(message.id);
-      }),
-      show: !!can_hide_message
-    },
-    block: {
-      text: "Block from chat",
-      icon: /* @__PURE__ */ React4.createElement(CrossCircleIcon, { style: iconStyle }),
-      onClick: () => __async(void 0, null, function* () {
-        if (message.senderUserId) {
-          blacklistPeer(message.senderUserId);
-        }
-      }),
-      color: "$alert_error_default",
-      show: !!can_block_user && !sentByLocalPeer && !isSenderBlocked
-    },
-    remove: {
-      text: "Remove participant",
-      icon: /* @__PURE__ */ React4.createElement(PeopleRemoveIcon, { style: iconStyle }),
-      color: "$alert_error_default",
-      show: !!canRemoveOthers && !sentByLocalPeer,
-      onClick: () => __async(void 0, null, function* () {
-        if (!message.sender) {
-          return;
-        }
-        try {
-          yield actions.removePeer(message.sender, "");
-        } catch (error) {
-          ToastManager.addToast({ title: error.message, variant: "error" });
-        }
-      })
-    }
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ React4.createElement(Sheet.Root, { open: openSheet, onOpenChange: setOpenSheet }, /* @__PURE__ */ React4.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$14" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React4.createElement(
-      Sheet.Title,
-      {
-        css: {
-          display: "flex",
-          color: "$on_surface_high",
-          w: "100%",
-          justifyContent: "space-between",
-          mt: "$8",
-          fontSize: "$md",
-          px: "$10",
-          pb: "$8",
-          borderBottom: "1px solid $border_bright",
-          alignItems: "center"
-        }
-      },
-      "Message options",
-      /* @__PURE__ */ React4.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React4.createElement(CrossIcon, null))
-    ), Object.keys(options).map((optionKey) => {
-      const option = options[optionKey];
-      return option.show ? /* @__PURE__ */ React4.createElement(
-        MwebChatOption,
-        {
-          key: optionKey,
-          text: option.text,
-          icon: option.icon,
-          onClick: option.onClick,
-          color: option == null ? void 0 : option.color
-        }
-      ) : null;
-    })));
-  }
-  return /* @__PURE__ */ React4.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { "@md": { display: "none" } } }, /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      className: "chat_actions",
-      css: {
-        background: "$surface_bright",
-        borderRadius: "$1",
-        p: "$2",
-        opacity: open ? 1 : 0,
-        position: "absolute",
-        top: 0,
-        right: 0,
-        zIndex: 1,
-        "@md": { opacity: 1 }
-      }
-    },
-    options.reply.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.reply.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { "data-testid": "reply_message_btn", onClick: options.reply.onClick }, options.reply.icon)) : null,
-    options.replyGroup.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.replyGroup.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { "data-testid": "reply_group_message_btn", onClick: options.replyGroup.onClick }, options.replyGroup.icon)) : null,
-    options.pin.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.pin.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { "data-testid": "pin_message_btn", onClick: options.pin.onClick }, options.pin.icon)) : null,
-    options.copy.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.copy.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { onClick: options.copy.onClick, "data-testid": "copy_message_btn" }, /* @__PURE__ */ React4.createElement(CopyIcon, { style: iconStyle }))) : null,
-    options.block.show || options.hide.show || options.remove.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: "More actions" }, /* @__PURE__ */ React4.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React4.createElement(IconButton, null, /* @__PURE__ */ React4.createElement(VerticalMenuIcon, { style: iconStyle })))) : null
-  ), /* @__PURE__ */ React4.createElement(Dropdown.Portal, null, /* @__PURE__ */ React4.createElement(
-    Dropdown.Content,
-    {
-      sideOffset: 5,
-      align: "end",
-      css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
-    },
-    options.hide.show ? /* @__PURE__ */ React4.createElement(Dropdown.Item, { "data-testid": "hide_message_btn", onClick: options.hide.onClick }, options.hide.icon, /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold" } }, options.hide.text)) : null,
-    options.block.show ? /* @__PURE__ */ React4.createElement(
-      Dropdown.Item,
-      {
-        "data-testid": "block_peer_btn",
-        onClick: options.block.onClick,
-        css: { color: options.block.color }
-      },
-      options.block.icon,
-      /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.block.text)
-    ) : null,
-    options.remove.show ? /* @__PURE__ */ React4.createElement(
-      Dropdown.Item,
-      {
-        "data-testid": "remove_peer_btn",
-        onClick: options.remove.onClick,
-        css: { color: options.remove.color }
-      },
-      options.remove.icon,
-      /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.remove.text)
-    ) : null
-  )));
-};
-
-// src/Prebuilt/components/Chat/EmptyChat.tsx
-init_define_process_env();
-import React5 from "react";
-import { useMedia } from "react-use";
-
-// src/Prebuilt/images/empty-chat.svg
-var empty_chat_default = "./empty-chat.svg";
-
-// src/Prebuilt/components/Chat/EmptyChat.tsx
-var EmptyChat = () => {
-  var _a;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const isMobile = useMedia(config.media.md);
-  const canSendMessages = elements.chat && (elements.chat.public_chat_enabled || elements.chat.private_chat_enabled || elements.chat.roles_whitelist && elements.chat.roles_whitelist.length) && !isLocalPeerBlacklisted;
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-  const streaming = isMobileHLSStream || isLandscapeStream;
-  if (isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && !streaming)
-    return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
-  return /* @__PURE__ */ React5.createElement(
-    Flex,
-    {
-      css: {
-        width: "100%",
-        flex: "1 1 0",
-        textAlign: "center",
-        px: "$4"
-      },
-      align: "center",
-      justify: "center"
-    },
-    /* @__PURE__ */ React5.createElement(Box, null, /* @__PURE__ */ React5.createElement(Box, { css: { m: "0 auto", mt: "$4", "@media (max-height: 575px)": { display: "none" } } }, /* @__PURE__ */ React5.createElement("img", { src: empty_chat_default, style: { display: "inline" }, alt: "Empty Chat", height: 132, width: 185 })), /* @__PURE__ */ React5.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, canSendMessages ? "Start a conversation" : "No messages yet"), canSendMessages ? /* @__PURE__ */ React5.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: { mt: "$4", maxWidth: "80%", textAlign: "center", mx: "auto", c: "$on_surface_medium" }
-      },
-      "There are no messages here yet. Start a conversation by sending a message."
-    ) : null)
-  );
-};
-
-// src/Prebuilt/components/hooks/usePinnedBy.tsx
-init_define_process_env();
-import { useEffect as useEffect2, useState as useState3 } from "react";
-import { selectSessionStore as selectSessionStore3, useHMSStore as useHMSStore3 } from "@100mslive/react-sdk";
-var usePinnedBy = (messageId) => {
-  const pinnedMessages = useHMSStore3(selectSessionStore3("pinnedMessages" /* PINNED_MESSAGES */));
-  const [pinnedBy, setPinnedBy] = useState3("");
-  useEffect2(() => {
-    let match4 = "";
-    pinnedMessages == null ? void 0 : pinnedMessages.forEach((pinnedMessage) => {
-      if (pinnedMessage.id === messageId) {
-        match4 = pinnedMessage.pinnedBy;
-      }
-    });
-    setPinnedBy(match4);
-  }, [messageId, pinnedMessages]);
-  return pinnedBy;
-};
-
-// src/Prebuilt/components/Chat/utils.ts
-init_define_process_env();
-var formatTime = (date) => {
-  if (!(date instanceof Date)) {
-    return "";
-  }
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  const suffix = hours > 11 ? "PM" : "AM";
-  return `${hours < 10 ? "0" : ""}${hours}:${minutes < 10 ? "0" : ""}${minutes} ${suffix}`;
-};
-var CHAT_MESSAGE_LIMIT = 2e3;
-
-// src/Prebuilt/components/Chat/ChatBody.tsx
-var rowHeights = {};
-var listInstance = null;
-function getRowHeight(index) {
-  var _a;
-  return ((_a = rowHeights[index]) == null ? void 0 : _a.size) || 72;
-}
-var setRowHeight = (index, id, size) => {
-  var _a, _b;
-  if (((_a = rowHeights[index]) == null ? void 0 : _a.id) === id && ((_b = rowHeights[index]) == null ? void 0 : _b.size) === size) {
-    return;
-  }
-  listInstance == null ? void 0 : listInstance.resetAfterIndex(Math.max(index - 1, 0));
-  Object.assign(rowHeights, { [index]: { size, id } });
-};
-var getMessageBackgroundColor = (messageType, selectedPeerID, selectedRole, isOverlay) => {
-  if (messageType && !(selectedPeerID || selectedRole)) {
-    return isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default";
-  }
-  return "";
-};
-var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React6.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        ml: "$2",
-        mr: "$4",
-        gap: "$space$2",
-        flexWrap: "nowrap"
-      }
-    },
-    left && /* @__PURE__ */ React6.createElement(
-      Text,
-      {
-        variant: "xs",
-        as: "span",
-        css: {
-          color: "$on_surface_medium",
-          textTransform: "capitalize",
-          fontWeight: "$regular",
-          whiteSpace: "nowrap"
-        }
-      },
-      left
-    ),
-    right && /* @__PURE__ */ React6.createElement(
-      Text,
-      {
-        as: "span",
-        variant: "overline",
-        css: {
-          color: "$on_surface_medium",
-          fontWeight: "$regular",
-          whiteSpace: "nowrap"
-        }
-      },
-      right
-    )
-  );
-};
-var MessageType = ({
-  roles,
-  hasCurrentUserSent,
-  receiver
-}) => {
-  const peerName = useHMSStore4(selectPeerNameByID2(receiver));
-  const localPeerRoleName = useHMSStore4(selectLocalPeerRoleName);
-  if (receiver) {
-    return /* @__PURE__ */ React6.createElement(MessageTypeContainer, { left: hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ""}` : "to You", right: "(DM)" });
-  }
-  if (roles && roles.length) {
-    return /* @__PURE__ */ React6.createElement(MessageTypeContainer, { left: `to ${hasCurrentUserSent ? roles[0] : localPeerRoleName}`, right: "(Group)" });
-  }
-  return null;
-};
-var URL_REGEX = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
-var Link = styled("a", {
-  color: "$primary_default",
-  wordBreak: "break-word",
-  "&:hover": {
-    textDecoration: "underline"
-  }
-});
-var AnnotisedMessage = ({ message, length }) => {
-  if (!message) {
-    return /* @__PURE__ */ React6.createElement(Fragment, null);
-  }
-  return /* @__PURE__ */ React6.createElement(Fragment, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React6.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part.slice(0, length)) : part.slice(0, length)
-  ));
-};
-var getMessageType = ({ roles, receiver }) => {
-  if (roles && roles.length > 0) {
-    return "role";
-  }
-  return receiver ? "private" : "";
-};
-var SenderName = styled(Text, {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  width: "100%",
-  minWidth: 0,
-  color: "$on_surface_high",
-  fontWeight: "$semiBold"
-});
-var ChatMessage = React6.memo(
-  ({ index, style = {}, message }) => {
-    var _a, _b, _c;
-    const { elements } = useRoomLayoutConferencingScreen();
-    const rowRef = useRef(null);
-    const isMobile = useMedia2(config.media.md);
-    const isPrivateChatEnabled = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.private_chat_enabled);
-    const isOverlay = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) && isMobile;
-    const localPeerId = useHMSStore4(selectLocalPeerID);
-    const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-    const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-    const messageType = getMessageType({
-      roles: message.recipientRoles,
-      receiver: message.recipientPeer
-    });
-    const [openSheet, setOpenSheetBare] = useState4(false);
-    const showPinAction = !!((_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.allow_pinning_messages);
-    const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
-    useLayoutEffect(() => {
-      if (rowRef.current) {
-        setRowHeight(index, message.id, rowRef.current.clientHeight);
-      }
-    }, [index, message.id]);
-    const setOpenSheet = (value, e) => {
-      e == null ? void 0 : e.stopPropagation();
-      setOpenSheetBare(value);
-    };
-    return /* @__PURE__ */ React6.createElement(
-      Box,
-      {
-        css: {
-          mb: "$5",
-          pr: "$10",
-          mt: "$4",
-          "&:not(:hover} .chat_actions": { display: "none" },
-          "&:hover .chat_actions": { display: "flex", opacity: 1 }
-        },
-        style
-      },
-      /* @__PURE__ */ React6.createElement(
-        Flex,
-        {
-          ref: rowRef,
-          align: "center",
-          css: {
-            flexWrap: "wrap",
-            position: "relative",
-            // Theme independent color, token should not be used for transparent chat
-            background: getMessageBackgroundColor(messageType, selectedPeer.id, selectedRole, !!isOverlay),
-            r: "$1",
-            p: "$4",
-            userSelect: "none",
-            "@md": {
-              cursor: "pointer"
-            },
-            "&:hover": {
-              background: "linear-gradient(277deg, $surface_default 0%, $surface_dim 60.87%)"
-            }
-          },
-          "data-testid": "chat_msg",
-          onClick: (e) => {
-            if (isMobile) {
-              setOpenSheet(true, e);
-            }
-          }
-        },
-        /* @__PURE__ */ React6.createElement(PinnedBy, { messageId: message.id, index, rowRef }),
-        /* @__PURE__ */ React6.createElement(
-          Text,
-          {
-            css: {
-              color: isOverlay ? "#FFF" : "$on_surface_high",
-              fontWeight: "$semiBold",
-              display: "flex",
-              alignItems: "center",
-              alignSelf: "stretch",
-              width: "100%"
-            },
-            as: "div"
-          },
-          /* @__PURE__ */ React6.createElement(
-            Flex,
-            {
-              align: "baseline",
-              css: {
-                flexWrap: "nowrap",
-                maxWidth: "calc(100% - 10ch)",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              }
-            },
-            message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React6.createElement(
-              SenderName,
-              {
-                as: "span",
-                variant: "sub2",
-                css: { color: isOverlay ? "#FFF" : "$on_surface_high", fontWeight: "$semiBold" }
-              },
-              message.senderName || "Anonymous"
-            ) : /* @__PURE__ */ React6.createElement(Tooltip, { title: message.senderName, side: "top", align: "start", boxCss: { zIndex: 50 } }, /* @__PURE__ */ React6.createElement(
-              SenderName,
-              {
-                as: "span",
-                variant: "sub2",
-                css: { color: isOverlay ? "#FFF" : "$on_surface_high", fontWeight: "$semiBold" }
-              },
-              message.sender === localPeerId ? `${message.senderName} (You)` : message.senderName
-            )),
-            /* @__PURE__ */ React6.createElement(
-              MessageType,
-              {
-                hasCurrentUserSent: message.sender === localPeerId,
-                receiver: message.recipientPeer,
-                roles: message.recipientRoles
-              }
-            )
-          ),
-          !isOverlay ? /* @__PURE__ */ React6.createElement(
-            Text,
-            {
-              as: "span",
-              variant: "caption",
-              css: {
-                color: "$on_surface_medium",
-                flexShrink: 0,
-                position: "absolute",
-                right: 0,
-                zIndex: 1,
-                mr: "$4",
-                p: "$2"
-              }
-            },
-            formatTime(message.time)
-          ) : null,
-          /* @__PURE__ */ React6.createElement(
-            ChatActions,
-            {
-              showPinAction,
-              message,
-              sentByLocalPeer: message.sender === localPeerId,
-              onReply: () => {
-                setRoleSelector("");
-                setPeerSelector({ id: message.sender, name: message.senderName });
-              },
-              onReplyGroup: () => {
-                if (message.senderRole) {
-                  setRoleSelector(message.senderRole);
-                  setPeerSelector({});
-                }
-              },
-              showReply,
-              isMobile,
-              openSheet,
-              setOpenSheet
-            }
-          )
-        ),
-        /* @__PURE__ */ React6.createElement(
-          Text,
-          {
-            variant: "sm",
-            css: {
-              w: "100%",
-              mt: "$2",
-              wordBreak: "break-word",
-              whiteSpace: "pre-wrap",
-              userSelect: "all",
-              color: isOverlay ? "#FFF" : "$on_surface_high"
-            },
-            onClick: (e) => {
-              setOpenSheet(true, e);
-            }
-          },
-          /* @__PURE__ */ React6.createElement(AnnotisedMessage, { message: message.message })
-        )
-      )
-    );
-  }
-);
-var MessageWrapper = React6.memo(
-  ({ index, style, data }) => {
-    return /* @__PURE__ */ React6.createElement(ChatMessage, { style, index, key: data[index].id, message: data[index] });
-  }
-);
-var VirtualizedChatMessages = React6.forwardRef(({ messages, scrollToBottom }, listRef) => {
-  const hmsActions = useHMSActions5();
-  const itemKey = useCallback5((index, data) => {
-    return data[index].id;
-  }, []);
-  useEffect3(() => {
-    requestAnimationFrame(() => scrollToBottom(1));
-  }, [scrollToBottom]);
-  return /* @__PURE__ */ React6.createElement(
-    Box,
-    {
-      css: {
-        mr: "-$10",
-        h: "100%"
-      }
-    },
-    /* @__PURE__ */ React6.createElement(
-      AutoSizer,
-      {
-        style: {
-          width: "90%"
-        }
-      },
-      ({ height, width }) => /* @__PURE__ */ React6.createElement(
-        VariableSizeList,
-        {
-          ref: (node) => {
-            if (node) {
-              listRef.current = node;
-              listInstance = node;
-            }
-          },
-          itemCount: messages.length,
-          itemSize: getRowHeight,
-          itemData: messages,
-          width,
-          height,
-          style: {
-            overflowX: "hidden"
-          },
-          itemKey,
-          onItemsRendered: ({ visibleStartIndex, visibleStopIndex }) => {
-            for (let i = visibleStartIndex; i <= visibleStopIndex; i++) {
-              if (!messages[i].read) {
-                hmsActions.setMessageRead(true, messages[i].id);
-              }
-            }
-          }
-        },
-        MessageWrapper
-      )
-    )
-  );
-});
-var ChatBody = React6.forwardRef(
-  ({ scrollToBottom }, listRef) => {
-    const messages = useHMSStore4(selectHMSMessages);
-    const blacklistedMessageIDs = useHMSStore4(selectSessionStore4("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
-    const filteredMessages = useMemo(() => {
-      const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
-      return (messages == null ? void 0 : messages.filter((message) => message.type === "chat" && !blacklistedMessageIDSet.has(message.id))) || [];
-    }, [blacklistedMessageIDs, messages]);
-    const vanillaStore = useHMSVanillaStore3();
-    const rerenderOnFirstMount = useRef(false);
-    useEffect3(() => {
-      const unsubscribe = vanillaStore.subscribe(() => {
-        if (!listRef.current) {
-          return;
-        }
-        const outerElement = listRef.current._outerRef;
-        if (outerElement && outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
-          requestAnimationFrame(() => scrollToBottom(1));
-        }
-      }, selectUnreadHMSMessagesCount);
-      return unsubscribe;
-    }, [vanillaStore, listRef, scrollToBottom]);
-    useEffect3(() => {
-      if (filteredMessages.length > 0 && (listRef == null ? void 0 : listRef.current) && !rerenderOnFirstMount.current) {
-        rerenderOnFirstMount.current = true;
-        listRef.current.resetAfterIndex(0);
-      }
-    }, [listRef, filteredMessages]);
-    return filteredMessages.length === 0 ? /* @__PURE__ */ React6.createElement(EmptyChat, null) : /* @__PURE__ */ React6.createElement(VirtualizedChatMessages, { messages: filteredMessages, ref: listRef, scrollToBottom });
-  }
-);
-var PinnedBy = ({
-  messageId,
-  index,
-  rowRef
-}) => {
-  const pinnedBy = usePinnedBy(messageId);
-  const localPeerName = useHMSStore4(selectLocalPeerName2);
-  useLayoutEffect(() => {
-    if (rowRef == null ? void 0 : rowRef.current) {
-      if (pinnedBy) {
-        rowRef.current.style.background = "linear-gradient(277deg, var(--hms-ui-colors-surface_default) 0%, var(--hms-ui-colors-surface_dim) 60.87%)";
-      } else {
-        rowRef.current.style.background = "";
-      }
-      setRowHeight(index, messageId, rowRef == null ? void 0 : rowRef.current.clientHeight);
-    }
-  }, [index, messageId, pinnedBy, rowRef]);
-  if (!pinnedBy) {
-    return null;
-  }
-  return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { gap: "$2", mb: "$2", color: "$on_surface_low" } }, /* @__PURE__ */ React6.createElement(SolidPinIcon, { height: 12, width: 12 }), /* @__PURE__ */ React6.createElement(Text, { variant: "xs", css: { color: "inherit" } }, "Pinned by ", localPeerName === pinnedBy ? "you" : pinnedBy));
-};
-
-// src/Prebuilt/components/PIP/PIPChat.tsx
-var PIPChat = () => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const messages = useHMSStore5(selectHMSMessages2);
-  const localPeerID = useHMSStore5(selectLocalPeerID2);
-  const count = useHMSStore5(selectUnreadHMSMessagesCount2);
-  const [unreadMessageCount, setUnreadMessageCount] = useState5(0);
-  const getSenderName = useCallback6(
-    (senderName, senderID) => {
-      const slicedName = senderName.length > 10 ? senderName.slice(0, 10) + "..." : senderName;
-      return slicedName + (senderID === localPeerID ? " (You)" : "");
-    },
-    [localPeerID]
-  );
-  useEffect4(() => {
-    const timeoutId = setTimeout(() => {
-      setUnreadMessageCount(count);
-    }, 100);
-    return () => clearTimeout(timeoutId);
-  }, [count]);
-  const blacklistedMessageIDs = useHMSStore5(selectSessionStore5("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
-  const filteredMessages = useMemo2(() => {
-    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
-    return (messages == null ? void 0 : messages.filter((message) => message.type === "chat" && !blacklistedMessageIDSet.has(message.id))) || [];
-  }, [blacklistedMessageIDs, messages]);
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore5(selectSessionStore5("chatState" /* CHAT_STATE */)) || {};
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const { elements } = useRoomLayoutConferencingScreen();
-  const message_placeholder = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.message_placeholder) || "Send a message";
-  const canSendChatMessages = !!((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.public_chat_enabled) || !!((_d = (_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.roles_whitelist) == null ? void 0 : _d.length) || !!((_e = elements == null ? void 0 : elements.chat) == null ? void 0 : _e.private_chat_enabled);
-  const getChatStatus = useCallback6(() => {
-    if (isLocalPeerBlacklisted)
-      return "You've been blocked from sending messages";
-    if (!isChatEnabled)
-      return `Chat has been paused by ${chatStateUpdatedBy.peerId === localPeerID ? "you" : chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.userName}`;
-    return message_placeholder;
-  }, [
-    chatStateUpdatedBy.peerId,
-    chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.userName,
-    isChatEnabled,
-    isLocalPeerBlacklisted,
-    localPeerID,
-    message_placeholder
-  ]);
-  return /* @__PURE__ */ React7.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React7.createElement(
-    Box,
-    {
-      id: "chat-container",
-      css: {
-        bg: "$surface_dim",
-        overflowY: "auto",
-        // Subtracting height of footer
-        h: canSendChatMessages ? "calc(100% - 87px)" : "100%",
-        position: "relative"
-      }
-    },
-    unreadMessageCount ? /* @__PURE__ */ React7.createElement(
-      Box,
-      {
-        id: "new-message-notif",
-        style: {
-          position: "fixed",
-          bottom: "76px",
-          right: "4px"
-        }
-      },
-      /* @__PURE__ */ React7.createElement(
-        Text,
-        {
-          variant: "xs",
-          css: { cursor: "pointer" },
-          style: { color: "white", background: "gray", padding: "4px", borderRadius: "4px" }
-        },
-        unreadMessageCount === 1 ? "New message" : `${unreadMessageCount} new messages`
-      )
-    ) : "",
-    filteredMessages.length === 0 ? /* @__PURE__ */ React7.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      },
-      /* @__PURE__ */ React7.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, canSendChatMessages ? "Start a conversation" : "No messages yet"),
-      canSendChatMessages ? /* @__PURE__ */ React7.createElement(Text, { variant: "sm", style: { maxWidth: "80%", textAlign: "center", marginTop: "4px" } }, "There are no messages here yet. Start a conversation by sending a message.") : ""
-    ) : filteredMessages.map((message) => /* @__PURE__ */ React7.createElement(Box, { className: "pip-message", key: message.id, id: message.id, style: { padding: "8px 0.75rem" } }, /* @__PURE__ */ React7.createElement(Flex, { style: { width: "100%", alignItems: "center", justifyContent: "between" } }, /* @__PURE__ */ React7.createElement(
-      Text,
-      {
-        style: { display: "flex", justifyContent: "between", width: "100%", alignItems: "center" },
-        css: {
-          color: "$on_surface_high",
-          fontWeight: "$semiBold"
-        }
-      },
-      /* @__PURE__ */ React7.createElement(Flex, { style: { flexGrow: 1, gap: "2px", alignItems: "center" } }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React7.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, getSenderName(message.senderName, message == null ? void 0 : message.sender))), /* @__PURE__ */ React7.createElement(
-        MessageTitle,
-        {
-          localPeerID,
-          recipientPeer: message.recipientPeer,
-          recipientRoles: message.recipientRoles
-        }
-      )),
-      /* @__PURE__ */ React7.createElement(
-        Text,
-        {
-          variant: "xs",
-          css: {
-            color: "$on_surface_medium",
-            flexShrink: 0,
-            p: "$2",
-            whitespace: "nowrap"
-          }
-        },
-        formatTime(message.time)
-      )
-    )), /* @__PURE__ */ React7.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: {
-          w: "100%",
-          mt: "$2",
-          wordBreak: "break-word",
-          whiteSpace: "pre-wrap",
-          userSelect: "all",
-          color: "$on_surface_high"
-        }
-      },
-      /* @__PURE__ */ React7.createElement(AnnotisedMessage, { message: message.message })
-    ))),
-    /* @__PURE__ */ React7.createElement("div", { id: "marker", style: { height: filteredMessages.length ? "1px" : 0 } })
-  ), canSendChatMessages && /* @__PURE__ */ React7.createElement(Box, { css: { bg: "$surface_dim" } }, /* @__PURE__ */ React7.createElement(Flex, { css: { px: "$4", pb: "3px", gap: "$2", alignItems: "center" } }, /* @__PURE__ */ React7.createElement(Text, { variant: "caption" }, "To:"), /* @__PURE__ */ React7.createElement(Flex, { css: { bg: "$primary_bright", color: "$on_primary_high", r: "$2" } }, /* @__PURE__ */ React7.createElement(
-    "select",
-    {
-      id: "selector",
-      style: {
-        background: "inherit",
-        color: "inherit",
-        border: "none",
-        outline: "none",
-        borderRadius: "4px",
-        padding: "0 2px"
-      },
-      defaultValue: ((_f = elements.chat) == null ? void 0 : _f.public_chat_enabled) ? "Everyone" : (_h = (_g = elements.chat) == null ? void 0 : _g.roles_whitelist) == null ? void 0 : _h[0]
-    },
-    (_j = (_i = elements.chat) == null ? void 0 : _i.roles_whitelist) == null ? void 0 : _j.map((role) => /* @__PURE__ */ React7.createElement("option", { key: role, value: role }, role)),
-    ((_k = elements.chat) == null ? void 0 : _k.public_chat_enabled) ? /* @__PURE__ */ React7.createElement("option", { value: "Everyone" }, "Everyone") : ""
-  ))), /* @__PURE__ */ React7.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        bg: "$surface_default",
-        minHeight: "$16",
-        width: "100%",
-        py: "$6",
-        pl: "$4",
-        boxSizing: "border-box",
-        gap: "$2",
-        r: "$2"
-      }
-    },
-    /* @__PURE__ */ React7.createElement(
-      TextArea,
-      {
-        id: "chat-input",
-        maxLength: CHAT_MESSAGE_LIMIT,
-        disabled: !isChatEnabled || isLocalPeerBlacklisted,
-        rows: 1,
-        css: {
-          w: "100%",
-          c: "$on_surface_high",
-          p: "0.75rem 0.75rem !important",
-          border: "none",
-          resize: "none"
-        },
-        placeholder: getChatStatus(),
-        required: true,
-        autoComplete: "off",
-        "aria-autocomplete": "none"
-      }
-    ),
-    /* @__PURE__ */ React7.createElement(
-      IconButton_default,
-      {
-        id: "send-btn",
-        disabled: !isChatEnabled || isLocalPeerBlacklisted,
-        title: getChatStatus(),
-        css: {
-          ml: "auto",
-          height: "max-content",
-          mr: "$4",
-          "&:hover": { c: "$on_surface_medium" }
-        },
-        "data-testid": "send_msg_btn"
-      },
-      /* @__PURE__ */ React7.createElement(SendIcon, null)
-    )
-  )));
-};
-var MessageTitle = ({
-  recipientPeer,
-  recipientRoles,
-  localPeerID
-}) => {
-  const peerName = useHMSStore5(selectPeerNameByID3(recipientPeer));
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, recipientRoles ? /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "to ", recipientRoles, " (Group)") : null, recipientPeer ? /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "to ", recipientPeer === localPeerID ? "You" : peerName, " (DM)") : null);
-};
-
-// src/Prebuilt/components/PIP/PIPChatOption.tsx
-init_define_process_env();
-import React8 from "react";
-import { ExternalLinkIcon } from "@100mslive/react-icons";
-var PIPChatOption = ({ openChat, showPIPChat }) => {
-  if (!showPIPChat) {
-    return /* @__PURE__ */ React8.createElement(React8.Fragment, null);
-  }
-  return /* @__PURE__ */ React8.createElement(Dropdown.Item, { onClick: openChat, "data-testid": "pip_chat_btn" }, /* @__PURE__ */ React8.createElement(ExternalLinkIcon, null), /* @__PURE__ */ React8.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Pop out Chat"));
-};
-
-// src/Prebuilt/components/PIP/PIPWindow.tsx
-init_define_process_env();
-import { createPortal } from "react-dom";
-var PIPWindow = ({ pipWindow, children }) => {
-  pipWindow.document.body.style.margin = "0";
-  pipWindow.document.body.style.overflow = "clip";
-  return createPortal(children, pipWindow.document.body);
-};
-
-// src/Prebuilt/components/Settings/StartRecording.jsx
-init_define_process_env();
-import React10, { useState as useState7 } from "react";
-import { selectPermissions as selectPermissions2, useHMSActions as useHMSActions6, useHMSStore as useHMSStore6, useRecordingStreaming } from "@100mslive/react-sdk";
-import { AlertTriangleIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Streaming/ResolutionInput.jsx
-init_define_process_env();
-import React9, { useCallback as useCallback7, useState as useState6 } from "react";
-import { InfoIcon } from "@100mslive/react-icons";
-var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {
-  const [resolution, setResolution] = useState6(RTMP_RECORD_DEFAULT_RESOLUTION);
-  const resolutionChangeHandler = useCallback7(
-    (event) => {
-      const { name, value } = event.target;
-      let width = name === "resWidth" ? Number(value) : resolution.width;
-      let height = name === "resHeight" ? Number(value) : resolution.height;
-      if (width === 0) {
-        width = null;
-      }
-      if (height === 0) {
-        height = null;
-      }
-      const newResolution = {
-        width: !isNaN(width) ? width : RTMP_RECORD_DEFAULT_RESOLUTION.width,
-        height: !isNaN(height) ? height : RTMP_RECORD_DEFAULT_RESOLUTION.height
-      };
-      setResolution(newResolution);
-    },
-    [resolution]
-  );
-  return /* @__PURE__ */ React9.createElement(DialogRow, { breakSm: true, css }, /* @__PURE__ */ React9.createElement(Flex, { gap: 1 }, /* @__PURE__ */ React9.createElement(Label, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ React9.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ React9.createElement(
-    Flex,
-    {
-      justify: "between",
-      css: { width: !tooltipText ? "100%" : "70%", "@sm": { width: "100%" } },
-      gap: 2,
-      direction: "column"
-    },
-    /* @__PURE__ */ React9.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React9.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ React9.createElement(
-      Input,
-      {
-        "data-testid": `${testId}_width`,
-        css: { width: "100%", mt: "$4" },
-        name: "resWidth",
-        value: resolution.width,
-        onChange: resolutionChangeHandler,
-        readOnly: disabled,
-        min: RTMP_RECORD_RESOLUTION_MIN,
-        max: RTMP_RECORD_RESOLUTION_MAX,
-        onBlur: () => onResolutionChange(resolution),
-        type: "number"
-      }
-    )), /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React9.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ React9.createElement(
-      Input,
-      {
-        "data-testid": `${testId}_height`,
-        css: { width: "100%", mt: "$4" },
-        name: "resHeight",
-        value: resolution.height,
-        onChange: resolutionChangeHandler,
-        onBlur: () => onResolutionChange(resolution),
-        readOnly: disabled,
-        min: RTMP_RECORD_RESOLUTION_MIN,
-        max: RTMP_RECORD_RESOLUTION_MAX,
-        type: "number"
-      }
-    )))
-  ));
-};
-
-// src/Prebuilt/components/Settings/StartRecording.jsx
-var StartRecording = ({ open, onOpenChange }) => {
-  const permissions = useHMSStore6(selectPermissions2);
-  const [resolution, setResolution] = useState7(RTMP_RECORD_DEFAULT_RESOLUTION);
-  const { startRecording, recordingStarted } = useRecordingHandler();
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-  const hmsActions = useHMSActions6();
-  if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
-    return null;
-  }
-  if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React10.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React10.createElement(Dialog.Portal, null, /* @__PURE__ */ React10.createElement(
-      Dialog.Content,
-      {
-        css: {
-          width: "min(400px,80%)",
-          p: "$10",
-          bg: "#201617"
-        }
-      },
-      /* @__PURE__ */ React10.createElement(Dialog.Title, null, /* @__PURE__ */ React10.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ React10.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React10.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
-      /* @__PURE__ */ React10.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
-      /* @__PURE__ */ React10.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React10.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React10.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React10.createElement(
-        Button,
-        {
-          "data-testid": "stop_recording_confirm_mobile",
-          variant: "danger",
-          icon: true,
-          onClick: () => __async(void 0, null, function* () {
-            try {
-              yield hmsActions.stopRTMPAndRecording();
-            } catch (error) {
-              ToastManager.addToast({
-                title: error.message,
-                variant: "error"
-              });
-            }
-            onOpenChange(false);
-          })
-        },
-        "End recording"
-      ))
-    )));
-  }
-  return /* @__PURE__ */ React10.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React10.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React10.createElement(Dialog.Title, null, /* @__PURE__ */ React10.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React10.createElement(
-    ResolutionInput,
-    {
-      testId: "recording_resolution_mobile",
-      css: { flexDirection: "column", alignItems: "start" },
-      onResolutionChange: setResolution
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    Button,
-    {
-      "data-testid": "start_recording_confirm_mobile",
-      variant: "primary",
-      icon: true,
-      css: { ml: "auto" },
-      type: "submit",
-      disabled: recordingStarted || isStreamingOn,
-      onClick: () => __async(void 0, null, function* () {
-        yield startRecording(resolution);
-        onOpenChange(false);
-      })
-    },
-    "Start"
-  )));
-};
-var StartRecording_default = StartRecording;
-
-// src/Prebuilt/components/StatsForNerds.jsx
-init_define_process_env();
-import React11, { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState8 } from "react";
-import { match, P } from "ts-pattern";
-import {
-  selectHMSStats,
-  selectLocalPeerID as selectLocalPeerID3,
-  selectPeersMap,
-  selectTracksMap as selectTracksMap2,
-  useHMSActions as useHMSActions7,
-  useHMSStatsStore,
-  useHMSStore as useHMSStore7
-} from "@100mslive/react-sdk";
-var StatsForNerds = ({ onOpenChange }) => {
-  var _a;
-  const tracksWithLabels = useTracksWithLabel();
-  const statsOptions = useMemo3(
-    () => [{ id: "local-peer", label: "Local Peer Stats" }, ...tracksWithLabels],
-    [tracksWithLabels]
-  );
-  const hmsActions = useHMSActions7();
-  const details = hmsActions.getDebugInfo();
-  const [selectedStat, setSelectedStat] = useState8(statsOptions[0]);
-  const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
-  const [open, setOpen] = useState8(false);
-  const ref = useRef2();
-  const selectionBg = useDropdownSelection();
-  useEffect5(() => {
-    if (selectedStat.id !== "local-peer" && !tracksWithLabels.find((track) => track.id === selectedStat.id)) {
-      setSelectedStat("local-peer");
-    }
-  }, [tracksWithLabels, selectedStat]);
-  return /* @__PURE__ */ React11.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React11.createElement(Dialog.Portal, null, /* @__PURE__ */ React11.createElement(Dialog.Overlay, null), /* @__PURE__ */ React11.createElement(
-    Dialog.Content,
-    {
-      css: {
-        width: "min(500px, 95%)",
-        height: "min(656px, 90%)",
-        overflowY: "auto"
-      }
-    },
-    /* @__PURE__ */ React11.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React11.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React11.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React11.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React11.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
-    /* @__PURE__ */ React11.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
-    /* @__PURE__ */ React11.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React11.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React11.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
-    /* @__PURE__ */ React11.createElement(
-      Flex,
-      {
-        direction: "column",
-        css: {
-          mb: "$12",
-          position: "relative",
-          minWidth: 0
-        }
-      },
-      /* @__PURE__ */ React11.createElement(Label, { variant: "body2", css: { c: "$on_surface_high" } }, "Stats For"),
-      /* @__PURE__ */ React11.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React11.createElement(
-        DialogDropdownTrigger,
-        {
-          title: selectedStat.label || "Select Stats",
-          css: { mt: "$4" },
-          titleCSS: { mx: 0 },
-          open,
-          ref
-        }
-      ), /* @__PURE__ */ React11.createElement(Dropdown.Portal, null, /* @__PURE__ */ React11.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
-        const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
-        return /* @__PURE__ */ React11.createElement(
-          Dropdown.Item,
-          {
-            key: `${option.id}-${option.layer || ""}`,
-            onClick: () => {
-              setSelectedStat(option);
-            },
-            css: {
-              px: "$9",
-              bg: isSelected ? selectionBg : void 0,
-              c: isSelected ? "$on_primary_high" : "$on_primary_high"
-            }
-          },
-          option.label
-        );
-      }))))
-    ),
-    selectedStat.id === "local-peer" ? /* @__PURE__ */ React11.createElement(LocalPeerStats, null) : /* @__PURE__ */ React11.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local }),
-    /* @__PURE__ */ React11.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0", w: "100%" } }, /* @__PURE__ */ React11.createElement(DebugInfo, { details }))
-  )));
-};
-var useTracksWithLabel = () => {
-  const tracksMap = useHMSStore7(selectTracksMap2);
-  const peersMap = useHMSStore7(selectPeersMap);
-  const localPeerID = useHMSStore7(selectLocalPeerID3);
-  const tracksWithLabels = useMemo3(
-    () => Object.values(tracksMap).reduce((res, track) => {
-      var _a, _b;
-      const peerName = (_a = peersMap[track.peerId]) == null ? void 0 : _a.name;
-      const isLocalTrack = track.peerId === localPeerID;
-      if (isLocalTrack && ((_b = track.layerDefinitions) == null ? void 0 : _b.length)) {
-        res = res.concat(
-          track.layerDefinitions.map(({ layer }) => {
-            return {
-              id: track.id,
-              layer,
-              local: true,
-              label: `${peerName} ${track.source} ${track.type} - ${layer}`
-            };
-          })
-        );
-        return res;
-      }
-      res.push({
-        id: track.id,
-        local: isLocalTrack,
-        label: `${peerName} ${track.source} ${track.type}`
-      });
-      return res;
-    }, []),
-    [tracksMap, peersMap, localPeerID]
-  );
-  return tracksWithLabels;
-};
-var LocalPeerStats = () => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const stats = useHMSStatsStore(selectHMSStats.localPeerStats);
-  if (!stats) {
-    return null;
-  }
-  return /* @__PURE__ */ React11.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React11.createElement(StatsRow, { label: "Packets Lost", value: (_a = stats.subscribe) == null ? void 0 : _a.packetsLost }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Jitter", value: (_b = stats.subscribe) == null ? void 0 : _b.jitter }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Publish Bitrate", value: formatBytes((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Subscribe Bitrate", value: formatBytes((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React11.createElement(
-    StatsRow,
-    {
-      label: "Available Outgoing Bitrate",
-      value: formatBytes((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
-    }
-  ), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Total Bytes Sent", value: formatBytes((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Total Bytes Received", value: formatBytes((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React11.createElement(
-    StatsRow,
-    {
-      label: "Round Trip Time",
-      value: `${(((((_h = stats.publish) == null ? void 0 : _h.currentRoundTripTime) || 0) + (((_i = stats.subscribe) == null ? void 0 : _i.currentRoundTripTime) || 0)) / 2).toFixed(3) * 1e3} ms`
-    }
-  ));
-};
-var TrackStats = ({ trackID, layer, local }) => {
-  var _a;
-  const selector = match({ trackID, layer, local }).with(
-    {
-      layer: P.when((layer2) => !!layer2)
-    },
-    () => selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID)
-  ).with({ local: P.when((local2) => !!local2) }, () => selectHMSStats.localAudioTrackStatsByID(trackID)).otherwise(() => selectHMSStats.trackStatsByID(trackID));
-  const stats = useHMSStatsStore(selector);
-  if (!stats) {
-    return null;
-  }
-  const inbound = stats.type.includes("inbound");
-  return /* @__PURE__ */ React11.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React11.createElement(StatsRow, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Bitrate", value: formatBytes(stats.bitrate, "b/s") }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Jitter", value: (_a = stats.jitter) == null ? void 0 : _a.toFixed(3) }), /* @__PURE__ */ React11.createElement(
-    StatsRow,
-    {
-      label: inbound ? "Bytes Received" : "Bytes Sent",
-      value: formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)
-    }
-  ), stats.kind === "video" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(StatsRow, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React11.createElement(StatsRow, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React11.createElement(
-    StatsRow,
-    {
-      label: "Round Trip Time",
-      value: stats.roundTripTime ? `${(stats.roundTripTime * 1e3).toFixed(3)} ms` : "-"
-    }
-  ));
-};
-var DebugInfo = ({ details }) => {
-  var _a;
-  return /* @__PURE__ */ React11.createElement(Accordion.Root, { type: "single", collapsible: true, css: { w: "100%" } }, /* @__PURE__ */ React11.createElement(Accordion.Item, { value: "Debug Info" }, /* @__PURE__ */ React11.createElement(Accordion.Header, null, /* @__PURE__ */ React11.createElement(Label, { variant: "body2", css: { c: "$on_surface_high" } }, "Debug Info")), /* @__PURE__ */ React11.createElement(Accordion.Content, null, /* @__PURE__ */ React11.createElement(Flex, { css: { flexWrap: "wrap", mt: "$10", gap: "$10" } }, /* @__PURE__ */ React11.createElement(StatsRow, { css: { w: "100%" }, label: "Websocket URL", value: details == null ? void 0 : details.websocketURL }), /* @__PURE__ */ React11.createElement(StatsRow, { css: { w: "100%" }, label: "Init Endpoint", value: details == null ? void 0 : details.initEndpoint }), /* @__PURE__ */ React11.createElement(StatsRow, { css: { w: "100%" }, label: "Enabled flags", value: (_a = details == null ? void 0 : details.enabledFlags) == null ? void 0 : _a.join(", ") })))));
-};
-var StatsRow = React11.memo(({ label, value, css }) => /* @__PURE__ */ React11.createElement(Box, { css: __spreadValues({ bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" }, css) }, /* @__PURE__ */ React11.createElement(
-  Text,
-  {
-    variant: "overline",
-    css: {
-      fontWeight: "$semiBold",
-      color: "$on_surface_medium",
-      textTransform: "uppercase"
-    }
-  },
-  label
-), /* @__PURE__ */ React11.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
-
-// src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
-init_define_process_env();
-import React12, { useCallback as useCallback8, useRef as useRef3, useState as useState9 } from "react";
-import { useHMSActions as useHMSActions8 } from "@100mslive/react-sdk";
-import { AlertTriangleIcon as AlertTriangleIcon2, ChangeRoleIcon, CheckIcon } from "@100mslive/react-icons";
-var BulkRoleChangeModal = ({ onOpenChange }) => {
-  var _a, _b;
-  const roles = useFilteredRoles();
-  const hmsActions = useHMSActions8();
-  const ref = useRef3(null);
-  const roleRef = useRef3(null);
-  const [selectedBulkRole, setBulkRole] = useState9([]);
-  const [selectedRole, setRole] = useState9("");
-  const [bulkRoleDialog, setBulkRoleDialog] = useState9(false);
-  const [roleDialog, setRoleDialog] = useState9(false);
-  const [errorMessage, setErrorMessage] = useState9("");
-  const [isSubmiting, setIsSubmiting] = useState9(false);
-  const changeBulkRole = useCallback8(() => __async(void 0, null, function* () {
-    if (selectedBulkRole.length > 0 && selectedRole) {
-      try {
-        setIsSubmiting(true);
-        yield hmsActions.changeRoleOfPeersWithRoles(selectedBulkRole, selectedRole);
-        setIsSubmiting(false);
-        setErrorMessage("");
-        onOpenChange(false);
-      } catch (err) {
-        setErrorMessage((err == null ? void 0 : err.message) ? err == null ? void 0 : err.message : "Unknown error");
-        setIsSubmiting(false);
-      }
-    }
-  }), [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
-  return /* @__PURE__ */ React12.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React12.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React12.createElement(DialogRow, null, /* @__PURE__ */ React12.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React12.createElement(
-    Dropdown.Root,
-    {
-      open: bulkRoleDialog,
-      onOpenChange: (value) => {
-        if (value) {
-          setBulkRoleDialog(value);
-        }
-      },
-      modal: false
-    },
-    /* @__PURE__ */ React12.createElement(
-      DialogDropdownTrigger,
-      {
-        ref,
-        title: selectedBulkRole.length === 0 ? "Select Multiple Roles" : selectedBulkRole.toString(),
-        css: {
-          w: "70%",
-          p: "$8"
-        },
-        open: bulkRoleDialog
-      }
-    ),
-    /* @__PURE__ */ React12.createElement(
-      Dropdown.Content,
-      {
-        css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 },
-        onInteractOutside: () => {
-          if (bulkRoleDialog) {
-            setBulkRoleDialog(false);
-          }
-        }
-      },
-      roles && roles.map((role) => {
-        return /* @__PURE__ */ React12.createElement(
-          Dropdown.CheckboxItem,
-          {
-            key: role,
-            checked: selectedBulkRole.includes(role),
-            onCheckedChange: (value) => {
-              setBulkRole((selection) => {
-                return value ? [...selection, role] : selection.filter((selectedRole2) => selectedRole2 !== role);
-              });
-              setErrorMessage("");
-            }
-          },
-          /* @__PURE__ */ React12.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React12.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React12.createElement(CheckIcon, { width: 16, height: 16 }))),
-          role
-        );
-      })
-    )
-  )), /* @__PURE__ */ React12.createElement(DialogRow, null, /* @__PURE__ */ React12.createElement(Text, null, "To Role: "), /* @__PURE__ */ React12.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React12.createElement(
-    DialogDropdownTrigger,
-    {
-      ref: roleRef,
-      title: selectedRole || "Select Role",
-      css: {
-        w: "70%",
-        p: "$8"
-      },
-      open: roleDialog
-    }
-  ), /* @__PURE__ */ React12.createElement(Dropdown.Content, { css: { w: (_b = roleRef.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
-    return /* @__PURE__ */ React12.createElement(
-      Dropdown.Item,
-      {
-        key: role,
-        onSelect: () => {
-          setRole(role);
-          setErrorMessage("");
-        }
-      },
-      role
-    );
-  })))), /* @__PURE__ */ React12.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React12.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ React12.createElement(AlertTriangleIcon2, null), /* @__PURE__ */ React12.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React12.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React12.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React12.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
-};
-
-// src/Prebuilt/components/MoreSettings/CaptionModal.tsx
-init_define_process_env();
-import React14 from "react";
-import { useMedia as useMedia3 } from "react-use";
-
-// src/Prebuilt/components/MoreSettings/CaptionContent.tsx
-init_define_process_env();
-import React13 from "react";
-import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions as useHMSActions9, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
-import { AlertTriangleIcon as AlertTriangleIcon3, CrossIcon as CrossIcon2 } from "@100mslive/react-icons";
-var CaptionContent = ({ isMobile, onExit }) => {
-  const DURATION = 2e3;
-  const actions = useHMSActions9();
-  const isTranscriptionEnabled = useHMSStore8(selectIsTranscriptionEnabled);
-  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
-  const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
-    Text,
-    {
-      variant: isMobile ? "md" : "lg",
-      css: {
-        color: "$on_surface_high",
-        fontWeight: "$semiBold",
-        display: "flex",
-        "@md": { px: "$8" }
-      }
-    },
-    isTranscriptionEnabled ? "Disable" : "Enable",
-    " Closed Caption (CC) for this session?",
-    /* @__PURE__ */ React13.createElement(
-      Box,
-      {
-        css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
-        onClick: onExit
-      },
-      /* @__PURE__ */ React13.createElement(CrossIcon2, null)
-    )
-  ), !isMobile ? /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$4", "@md": { px: "$8" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later.") : null, /* @__PURE__ */ React13.createElement(
-    Flex,
-    {
-      justify: "between",
-      align: "center",
-      css: {
-        width: "100%",
-        gap: "$md",
-        mt: "$10",
-        "@md": { px: "$4" }
-      }
-    },
-    isMobile ? null : /* @__PURE__ */ React13.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, onClick: onExit }, "Cancel"),
-    /* @__PURE__ */ React13.createElement(
-      Flex,
-      {
-        direction: "column",
-        justify: "between",
-        align: "center",
-        css: {
-          width: "100%",
-          "@md": { px: "$4" }
-        }
-      },
-      isMobile && isTranscriptionEnabled ? /* @__PURE__ */ React13.createElement(
-        Button,
-        {
-          variant: "standard",
-          css: { w: "100%", mb: "$4" },
-          outlined: true,
-          onClick: () => {
-            setIsCaptionEnabled(!isCaptionEnabled);
-            onExit();
-          }
-        },
-        isCaptionEnabled ? "Hide For Me" : "Show For Me"
-      ) : null,
-      /* @__PURE__ */ React13.createElement(
-        Button,
-        {
-          variant: isTranscriptionEnabled ? "danger" : "primary",
-          css: { width: "100%" },
-          "data-testid": "popup_change_btn",
-          onClick: () => __async(void 0, null, function* () {
-            try {
-              if (isTranscriptionEnabled) {
-                yield actions.stopTranscription({
-                  mode: HMSTranscriptionMode.CAPTION
-                });
-                setIsCaptionEnabled(false);
-                const id2 = ToastManager.replaceToast(toastId, {
-                  title: `Disabling Closed Caption for everyone.`,
-                  variant: "standard",
-                  duration: DURATION,
-                  icon: /* @__PURE__ */ React13.createElement(Loading, { color: "currentColor" })
-                });
-                setToastId(id2);
-                onExit();
-                return;
-              }
-              yield actions.startTranscription({
-                mode: HMSTranscriptionMode.CAPTION
-              });
-              const id = ToastManager.replaceToast(toastId, {
-                title: `Enabling Closed Caption for everyone.`,
-                variant: "standard",
-                duration: DURATION,
-                icon: /* @__PURE__ */ React13.createElement(Loading, { color: "currentColor" })
-              });
-              setToastId(id);
-            } catch (err) {
-              const id = ToastManager.replaceToast(toastId, {
-                title: `Failed to ${isTranscriptionEnabled ? "disable" : "enable"} closed caption`,
-                variant: "error",
-                icon: /* @__PURE__ */ React13.createElement(AlertTriangleIcon3, { style: { marginRight: "0.5rem" } })
-              });
-              setToastId(id);
-            } finally {
-              setIsCaptionEnabled(true);
-            }
-            onExit();
-          })
-        },
-        isTranscriptionEnabled ? "Disable" : "Enable",
-        " for Everyone"
-      )
-    )
-  ), isMobile && /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$4", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later."));
-};
-
-// src/Prebuilt/components/MoreSettings/CaptionModal.tsx
-var CaptionModal = ({ onOpenChange }) => {
-  const isMobile = useMedia3(config.media.md);
-  const props = {
-    isMobile,
-    onExit: () => {
-      onOpenChange(false);
-    }
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ React14.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React14.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ React14.createElement(CaptionContent, __spreadValues({}, props))));
-  }
-  return /* @__PURE__ */ React14.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Portal, null, /* @__PURE__ */ React14.createElement(Dialog.Overlay, null), /* @__PURE__ */ React14.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React14.createElement(CaptionContent, __spreadValues({}, props)))));
-};
-
-// src/Prebuilt/components/MoreSettings/FullScreenItem.tsx
-init_define_process_env();
-import React15 from "react";
-import { ExpandIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/hooks/useFullscreen.ts
-init_define_process_env();
-import { useCallback as useCallback9, useEffect as useEffect6, useState as useState10 } from "react";
-import screenfull from "screenfull";
-var useFullscreen = () => {
-  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState10(screenfull.isFullscreen);
-  const toggle = useCallback9(() => __async(void 0, null, function* () {
-    if (!screenfull.isEnabled) {
-      ToastManager.addToast({ title: "Fullscreen feature not supported" });
-      return;
-    }
-    try {
-      const container = document.querySelector(DEFAULT_PORTAL_CONTAINER);
-      if (isFullScreenEnabled) {
-        yield screenfull.exit();
-      } else if (container) {
-        yield screenfull.request(container);
-      }
-    } catch (err) {
-      ToastManager.addToast({ title: err.message });
-    }
-  }), [isFullScreenEnabled]);
-  useEffect6(() => {
-    const onChange = () => {
-      setIsFullScreenEnabled(screenfull.isFullscreen);
-    };
-    if (screenfull.isEnabled) {
-      screenfull.on("change", onChange);
-    }
-    return () => {
-      if (screenfull.isEnabled) {
-        screenfull.off("change", onChange);
-      }
-    };
-  }, []);
-  return {
-    allowed: screenfull.isEnabled,
-    isFullscreen: isFullScreenEnabled,
-    toggleFullscreen: toggle
-  };
-};
-
-// src/Prebuilt/components/MoreSettings/FullScreenItem.tsx
-var FullScreenItem = () => {
-  const { allowed, isFullscreen, toggleFullscreen } = useFullscreen();
-  if (!allowed) {
-    return null;
-  }
-  return /* @__PURE__ */ React15.createElement(
-    Dropdown.Item,
-    {
-      onClick: () => {
-        toggleFullscreen();
-      },
-      "data-testid": "full_screen_btn"
-    },
-    /* @__PURE__ */ React15.createElement(ExpandIcon, null),
-    /* @__PURE__ */ React15.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
-  );
-};
-
-// src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
-init_define_process_env();
-import React17, { useCallback as useCallback10, useState as useState11 } from "react";
-import {
-  selectAvailableRoleNames,
-  useHMSActions as useHMSActions10,
-  useHMSStore as useHMSStore10
-} from "@100mslive/react-sdk";
-import { MicOffIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/MoreSettings/MuteAllContent.tsx
-init_define_process_env();
-import React16 from "react";
-import { selectPermissions as selectPermissions3, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
-var MuteAllContent = (props) => {
-  const roles = props.roles || [];
-  const permissions = useHMSStore9(selectPermissions3);
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
-    DialogSelect,
-    {
-      title: "Role",
-      options: [{ label: "All Roles", value: "" }, ...roles.map((role) => ({ label: role, value: role }))],
-      selected: props.selectedRole,
-      keyField: "value",
-      labelField: "label",
-      onChange: props.setRole
-    }
-  ), /* @__PURE__ */ React16.createElement(
-    DialogSelect,
-    {
-      title: "Track type",
-      options: trackTypeOptions,
-      selected: props.trackType,
-      onChange: props.setTrackType,
-      keyField: "value",
-      labelField: "label"
-    }
-  ), /* @__PURE__ */ React16.createElement(
-    DialogSelect,
-    {
-      title: "Track source",
-      options: trackSourceOptions,
-      selected: props.selectedSource,
-      onChange: props.setSource,
-      keyField: "value",
-      labelField: "label"
-    }
-  ), /* @__PURE__ */ React16.createElement(DialogRow, null, /* @__PURE__ */ React16.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React16.createElement(RadioGroup.Root, { value: String(props.enabled), onValueChange: (value) => props.setEnabled(value === "true") }, (permissions == null ? void 0 : permissions.mute) && /* @__PURE__ */ React16.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Item, { value: "false", id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React16.createElement(Label, { htmlFor: "trackDisableRadio" }, "Mute")), (permissions == null ? void 0 : permissions.unmute) && /* @__PURE__ */ React16.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Item, { value: "true", id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React16.createElement(Label, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React16.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React16.createElement(Button, { variant: "primary", onClick: props.muteAll, css: { w: (props == null ? void 0 : props.isMobile) ? "100%" : "" } }, "Apply")));
-};
-
-// src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
-var MuteAllModal = ({
-  onOpenChange,
-  isMobile = false
-}) => {
-  const roles = useHMSStore10(selectAvailableRoleNames);
-  const hmsActions = useHMSActions10();
-  const [enabled, setEnabled] = useState11(false);
-  const [trackType, setTrackType] = useState11();
-  const [selectedRole, setRole] = useState11();
-  const [selectedSource, setSource] = useState11();
-  const muteAll = useCallback10(() => __async(void 0, null, function* () {
-    yield hmsActions.setRemoteTracksEnabled({
-      enabled,
-      type: trackType,
-      source: selectedSource,
-      roles: selectedRole ? [selectedRole] : void 0
-    });
-    onOpenChange(false);
-  }), [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
-  const props = {
-    muteAll,
-    roles,
-    enabled,
-    setEnabled,
-    trackType,
-    setTrackType,
-    selectedRole,
-    setRole,
-    selectedSource,
-    setSource,
-    isMobile
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ React17.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React17.createElement(Sheet.Content, { css: { px: "$10" } }, /* @__PURE__ */ React17.createElement(MuteAllContent, __spreadValues({}, props))));
-  }
-  return /* @__PURE__ */ React17.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React17.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon }, /* @__PURE__ */ React17.createElement(MuteAllContent, __spreadValues({}, props))));
-};
-
-// src/Prebuilt/components/PIP/usePIPChat.tsx
-init_define_process_env();
-import { useEffect as useEffect7 } from "react";
-import { useHMSActions as useHMSActions11 } from "@100mslive/react-sdk";
-var usePIPChat = () => {
-  const hmsActions = useHMSActions11();
-  const { isSupported, requestPipWindow, pipWindow, closePipWindow } = usePIPWindow();
-  useEffect7(() => {
-    if (document && pipWindow) {
-      const style = document.createElement("style");
-      style.id = "stitches";
-      style.textContent = getCssText();
-      pipWindow.document.head.appendChild(style);
-    }
-  }, [pipWindow]);
-  useEffect7(() => {
-    if (pipWindow) {
-      const chatContainer = pipWindow.document.getElementById("chat-container");
-      const selector = pipWindow.document.getElementById("selector");
-      const sendBtn = pipWindow.document.getElementById("send-btn");
-      const pipChatInput = pipWindow.document.getElementById("chat-input");
-      const marker = pipWindow.document.getElementById("marker");
-      marker == null ? void 0 : marker.scrollIntoView({ block: "end" });
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && entry.target.id) {
-              hmsActions.setMessageRead(true, entry.target.id);
-            }
-          });
-        },
-        {
-          root: chatContainer,
-          threshold: 0.8
-        }
-      );
-      const mutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.addedNodes.length > 0) {
-            const newMessages = mutation.addedNodes;
-            newMessages.forEach((message) => {
-              const messageId = message == null ? void 0 : message.id;
-              if (messageId === "new-message-notif") {
-                message.addEventListener(
-                  "click",
-                  () => setTimeout(() => marker == null ? void 0 : marker.scrollIntoView({ block: "end", behavior: "smooth" }), 0)
-                );
-              } else if (messageId)
-                observer.observe(message);
-            });
-          }
-        });
-      });
-      mutationObserver.observe(chatContainer, {
-        childList: true
-      });
-      const sendMessage = () => __async(void 0, null, function* () {
-        const selection = (selector == null ? void 0 : selector.value) || "Everyone";
-        if (selection === "Everyone") {
-          yield hmsActions.sendBroadcastMessage(pipChatInput.value.trim());
-        } else {
-          yield hmsActions.sendGroupMessage(pipChatInput.value.trim(), [selection]);
-        }
-        pipChatInput.value = "";
-        setTimeout(() => marker == null ? void 0 : marker.scrollIntoView({ block: "end", behavior: "smooth" }), 0);
-      });
-      if (sendBtn && hmsActions && pipChatInput) {
-        const pipMessages = pipWindow.document.getElementsByClassName("pip-message");
-        [...pipMessages].forEach((message) => {
-          if (message.id) {
-            hmsActions.setMessageRead(true, message.id);
-          }
-        });
-        const sendOnEnter = (e) => {
-          if (e.key === "Enter")
-            sendMessage();
-        };
-        sendBtn.addEventListener("click", sendMessage);
-        pipChatInput.addEventListener("keypress", sendOnEnter);
-        return () => {
-          sendBtn.removeEventListener("click", sendMessage);
-          pipChatInput.removeEventListener("keypress", sendOnEnter);
-          mutationObserver.disconnect();
-          observer.disconnect();
-        };
-      }
-    }
-  }, [pipWindow, hmsActions]);
-  useEffect7(() => {
-    return () => {
-      pipWindow && closePipWindow();
-    };
-  }, [closePipWindow, pipWindow]);
-  return { isSupported, requestPipWindow, pipWindow };
-};
-
-// src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
-var MODALS = {
-  CHANGE_NAME: "changeName",
-  SELF_ROLE_CHANGE: "selfRoleChange",
-  MORE_SETTINGS: "moreSettings",
-  START_RECORDING: "startRecording",
-  DEVICE_SETTINGS: "deviceSettings",
-  STATS_FOR_NERDS: "statsForNerds",
-  BULK_ROLE_CHANGE: "bulkRoleChange",
-  MUTE_ALL: "muteAll",
-  EMBED_URL: "embedUrl",
-  CAPTION: "caption"
-};
-var DesktopOptions = ({
-  elements,
-  screenType
-}) => {
-  const localPeerId = useHMSStore11(selectLocalPeerID4);
-  const hmsActions = useHMSActions12();
-  const enablHlsStats = useHMSStore11(selectAppData(APP_DATA.hlsStats));
-  const [openModals, setOpenModals] = useState12(/* @__PURE__ */ new Set());
-  const { isBRBOn, toggleBRB } = useMyMetadata();
-  const isPipOn = PictureInPicture.isOn();
-  const isBRBEnabled = !!(elements == null ? void 0 : elements.brb);
-  const isTranscriptionAllowed = useHMSStore11(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode2.CAPTION));
-  const isTranscriptionEnabled = useHMSStore11(selectIsTranscriptionEnabled2);
-  const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const showPipChatOption = !!(elements == null ? void 0 : elements.chat) && isSupported && !pipWindow;
-  useDropdownList({ open: openModals.size > 0, name: "MoreSettings" });
-  const updateState = (modalName, value) => {
-    setOpenModals((modals) => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.clear();
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-  return /* @__PURE__ */ React18.createElement(Fragment2, null, isSupported && pipWindow ? /* @__PURE__ */ React18.createElement(PIPWindow, { pipWindow }, /* @__PURE__ */ React18.createElement(PIPChat, null)) : null, /* @__PURE__ */ React18.createElement(
-    Dropdown.Root,
-    {
-      open: openModals.has(MODALS.MORE_SETTINGS),
-      onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value),
-      modal: false
-    },
-    /* @__PURE__ */ React18.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React18.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React18.createElement(IconButton_default, null, /* @__PURE__ */ React18.createElement(HamburgerMenuIcon, null)))),
-    /* @__PURE__ */ React18.createElement(
-      Dropdown.Content,
-      {
-        sideOffset: 5,
-        align: "end",
-        css: {
-          py: "$0",
-          maxHeight: "unset",
-          "@md": { w: "$64" },
-          "div[role='separator']:first-child": {
-            display: "none"
-          }
-        }
-      },
-      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React18.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React18.createElement(BrbIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React18.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React18.createElement(CheckIcon2, null) : null)) : null,
-      isTranscriptionAllowed ? /* @__PURE__ */ React18.createElement(
-        Dropdown.Item,
-        {
-          "data-testid": "closed_caption_admin",
-          onClick: () => {
-            updateState(MODALS.CAPTION, true);
-          }
-        },
-        /* @__PURE__ */ React18.createElement(OpenCaptionIcon, null),
-        /* @__PURE__ */ React18.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Closed Captions"), /* @__PURE__ */ React18.createElement(Text, { variant: "caption", css: { ml: "$4", color: "$on_surface_medium" } }, isTranscriptionEnabled ? "Enabled" : "Disabled")),
-        /* @__PURE__ */ React18.createElement(Switch, { id: "closed_caption_start_stop", checked: isTranscriptionEnabled, disabled: false })
-      ) : null,
-      screenType !== "hls_live_streaming" ? /* @__PURE__ */ React18.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ React18.createElement(
-        PIP,
-        {
-          content: /* @__PURE__ */ React18.createElement(Flex, { css: { w: "100%", h: "100%", p: "$8" } }, /* @__PURE__ */ React18.createElement(PipIcon2, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isPipOn ? "Disable" : "Enable", " Picture-in-Picture"))
-        }
-      )) : null,
-      /* @__PURE__ */ React18.createElement(
-        PIPChatOption,
-        {
-          showPIPChat: showPipChatOption,
-          openChat: () => __async(void 0, null, function* () {
-            isChatOpen && toggleChat();
-            yield requestPipWindow(350, 500);
-          })
-        }
-      ),
-      /* @__PURE__ */ React18.createElement(FullScreenItem, null),
-      /* @__PURE__ */ React18.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
-      /* @__PURE__ */ React18.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React18.createElement(SettingsIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
-      match2({ screenType, isSupported: HMSHLSPlayer.isSupported() }).with({ screenType: "hls_live_streaming", isSupported: false }, () => null).with({ screenType: "hls_live_streaming", isSupported: true }, () => {
-        return /* @__PURE__ */ React18.createElement(
-          Dropdown.Item,
-          {
-            onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
-            "data-testid": "hls_stats"
-          },
-          /* @__PURE__ */ React18.createElement(
-            Checkbox.Root,
-            {
-              css: { margin: "$2" },
-              checked: enablHlsStats,
-              onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
-            },
-            /* @__PURE__ */ React18.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React18.createElement(CheckIcon2, { width: 16, height: 16 }))
-          ),
-          /* @__PURE__ */ React18.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
-        );
-      }).otherwise(() => /* @__PURE__ */ React18.createElement(
-        Dropdown.Item,
-        {
-          onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
-          "data-testid": "stats_for_nerds_btn"
-        },
-        /* @__PURE__ */ React18.createElement(InfoIcon2, null),
-        /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
-      ))
-    )
-  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React18.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React18.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React18.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React18.createElement(
-    SettingsModal_default,
-    {
-      open: true,
-      onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value),
-      screenType
-    }
-  ), openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React18.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React18.createElement(
-    RoleChangeModal,
-    {
-      peerId: localPeerId,
-      onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value)
-    }
-  ), openModals.has(MODALS.CAPTION) && /* @__PURE__ */ React18.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS.CAPTION, value) }));
-};
-
-// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
-init_define_process_env();
-import React19, { useRef as useRef4, useState as useState14 } from "react";
-import { useClickAway } from "react-use";
-import { match as match3 } from "ts-pattern";
-import {
-  HMSTranscriptionMode as HMSTranscriptionMode3,
-  selectIsConnectedToRoom,
-  selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
-  selectIsTranscriptionAllowedByMode as selectIsTranscriptionAllowedByMode2,
-  selectIsTranscriptionEnabled as selectIsTranscriptionEnabled3,
-  selectPeerCount,
-  selectPermissions as selectPermissions4,
-  useHMSActions as useHMSActions13,
-  useHMSStore as useHMSStore13,
-  useRecordingStreaming as useRecordingStreaming2
-} from "@100mslive/react-sdk";
-import {
-  BrbIcon as BrbIcon2,
-  ClosedCaptionIcon,
-  CrossIcon as CrossIcon3,
-  EmojiIcon,
-  HamburgerMenuIcon as HamburgerMenuIcon2,
-  HandIcon,
-  HandRaiseSlashedIcon,
-  InfoIcon as InfoIcon3,
-  OpenCaptionIcon as OpenCaptionIcon2,
-  PeopleIcon,
-  QuizActiveIcon,
-  QuizIcon,
-  RecordIcon,
-  SettingsIcon as SettingsIcon2,
-  VirtualBackgroundIcon
-} from "@100mslive/react-icons";
-
-// src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx
-init_define_process_env();
-import { useEffect as useEffect8, useState as useState13 } from "react";
-import { HMSNotificationTypes, useHMSNotifications, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
-var useUnreadPollQuizPresent = () => {
-  const localPeerID = useHMSStore12(Ee);
-  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STARTED);
-  const [unreadPollQuiz, setUnreadPollQuiz] = useState13(false);
-  useEffect8(() => {
-    if (!notification) {
-      return;
-    }
-    setUnreadPollQuiz(notification.data.startedBy !== localPeerID);
-  }, [localPeerID, notification]);
-  return { unreadPollQuiz, setUnreadPollQuiz };
-};
-
-// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
-var MODALS2 = {
-  CHANGE_NAME: "changeName",
-  SELF_ROLE_CHANGE: "selfRoleChange",
-  MORE_SETTINGS: "moreSettings",
-  START_RECORDING: "startRecording",
-  DEVICE_SETTINGS: "deviceSettings",
-  STATS_FOR_NERDS: "statsForNerds",
-  BULK_ROLE_CHANGE: "bulkRoleChange",
-  MUTE_ALL: "muteAll",
-  EMBED_URL: "embedUrl",
-  CAPTION: "caption"
-};
-var MwebOptions = ({
-  elements,
-  screenType
-}) => {
-  const hmsActions = useHMSActions13();
-  const permissions = useHMSStore13(selectPermissions4);
-  const isConnected = useHMSStore13(selectIsConnectedToRoom);
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
-  const [openModals, setOpenModals] = useState14(/* @__PURE__ */ new Set());
-  const [openOptionsSheet, setOpenOptionsSheet] = useState14(false);
-  const [openSettingsSheet, setOpenSettingsSheet] = useState14(false);
-  const [showEmojiCard, setShowEmojiCard] = useState14(false);
-  const [showRecordingOn, setShowRecordingOn] = useState14(false);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const { showPolls } = useShowPolls();
-  const togglePollView = usePollViewToggle();
-  const peerCount = useHMSStore13(selectPeerCount);
-  const emojiCardRef = useRef4(null);
-  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const { title, description } = useRoomLayoutHeader();
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const isLocalVideoEnabled = useHMSStore13(selectIsLocalVideoEnabled2);
-  const { startRecording, isRecordingLoading } = useRecordingHandler();
-  const isTranscriptionAllowed = useHMSStore13(selectIsTranscriptionAllowedByMode2(HMSTranscriptionMode3.CAPTION));
-  const isTranscriptionEnabled = useHMSStore13(selectIsTranscriptionEnabled3);
-  const [isCaptionEnabled] = useSetIsCaptionEnabled();
-  useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
-  const updateState = (modalName, value) => {
-    setOpenModals((modals) => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-  useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React19.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React19.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React19.createElement(IconButton_default, { css: { bg: isMobileHLSStream || isLandscapeHLSStream ? "$surface_default" : "" } }, /* @__PURE__ */ React19.createElement(HamburgerMenuIcon2, null)))), /* @__PURE__ */ React19.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React19.createElement(
-    Sheet.Title,
-    {
-      css: {
-        display: "flex",
-        color: "$on_surface_high",
-        w: "100%",
-        justifyContent: "space-between",
-        fontSize: "$md",
-        mt: "$8",
-        px: "$10",
-        pb: "$8",
-        borderBottom: "1px solid $border_default",
-        mb: "$8",
-        alignItems: "center"
-      }
-    },
-    "Options",
-    /* @__PURE__ */ React19.createElement(Sheet.Close, null, /* @__PURE__ */ React19.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React19.createElement(CrossIcon3, null)))
-  ), /* @__PURE__ */ React19.createElement(
-    Box,
-    {
-      css: {
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr 1fr",
-        gridTemplateRows: "auto",
-        gridColumnGap: "$6",
-        gridRowGap: "$8",
-        px: "$9"
-      }
-    },
-    (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          toggleParticipants();
-          setOpenOptionsSheet(false);
-        }
-      },
-      /* @__PURE__ */ React19.createElement(ActionTile.Count, null, getFormattedCount(peerCount)),
-      /* @__PURE__ */ React19.createElement(PeopleIcon, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Participants")
-    ),
-    elements.hand_raise ? /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        active: isHandRaised,
-        onClick: () => {
-          toggleHandRaise();
-          setOpenOptionsSheet(false);
-        }
-      },
-      isHandRaised ? /* @__PURE__ */ React19.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React19.createElement(HandIcon, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
-    ) : null,
-    /* @__PURE__ */ React19.createElement(NoiseCancellation, { setOpenOptionsSheet, actionTile: true }),
-    isTranscriptionAllowed ? /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          setOpenOptionsSheet(false);
-          updateState(MODALS2.CAPTION, true);
-        }
-      },
-      isTranscriptionEnabled && isCaptionEnabled ? /* @__PURE__ */ React19.createElement(ClosedCaptionIcon, null) : /* @__PURE__ */ React19.createElement(OpenCaptionIcon2, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Closed Caption")
-    ) : null,
-    isLocalVideoEnabled && !!(elements == null ? void 0 : elements.virtual_background) ? /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          toggleVB();
-          setOpenOptionsSheet(false);
-        }
-      },
-      /* @__PURE__ */ React19.createElement(VirtualBackgroundIcon, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Virtual Background")
-    ) : null,
-    (elements == null ? void 0 : elements.emoji_reactions) && !(isLandscapeHLSStream || isMobileHLSStream) && /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          setShowEmojiCard(true);
-          setOpenOptionsSheet(false);
-        }
-      },
-      /* @__PURE__ */ React19.createElement(EmojiIcon, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Emoji Reactions")
-    ),
-    showPolls && /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          togglePollView();
-          setOpenOptionsSheet(false);
-          setUnreadPollQuiz(false);
-        }
-      },
-      unreadPollQuiz ? /* @__PURE__ */ React19.createElement(QuizActiveIcon, null) : /* @__PURE__ */ React19.createElement(QuizIcon, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Polls and Quizzes")
-    ),
-    (elements == null ? void 0 : elements.brb) && /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        active: isBRBOn,
-        onClick: () => {
-          toggleBRB();
-          setOpenOptionsSheet(false);
-        }
-      },
-      /* @__PURE__ */ React19.createElement(BrbIcon2, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Be Right Back")
-    ),
-    /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          setOpenSettingsSheet(true);
-          setOpenOptionsSheet(false);
-        }
-      },
-      /* @__PURE__ */ React19.createElement(SettingsIcon2, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Settings")
-    ),
-    isConnected && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        disabled: isHLSRunning,
-        onClick: () => __async(void 0, null, function* () {
-          if (isRecordingLoading) {
-            return;
-          }
-          if (isBrowserRecordingOn || isStreamingOn) {
-            setOpenOptionsSheet(false);
-            setShowRecordingOn(true);
-          } else {
-            yield startRecording();
-            setOpenOptionsSheet(false);
-          }
-          if (isHLSRunning) {
-            setOpenOptionsSheet(false);
-          }
-        })
-      },
-      isRecordingLoading ? /* @__PURE__ */ React19.createElement(Loading, null) : /* @__PURE__ */ React19.createElement(RecordIcon, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, match3({ isBrowserRecordingOn, isRecordingLoading }).with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => "Recording On").with({ isRecordingLoading: true }, () => "Starting Recording").with({ isRecordingLoading: false }, () => "Start Recording").otherwise(() => null))
-    ) : null,
-    title || description ? /* @__PURE__ */ React19.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          setOpenOptionsSheet(false);
-          toggleDetailsSheet();
-        }
-      },
-      /* @__PURE__ */ React19.createElement(InfoIcon3, null),
-      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "About Session")
-    ) : null
-  ))), /* @__PURE__ */ React19.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet, screenType }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React19.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React19.createElement(
-    ChangeNameModal,
-    {
-      onOpenChange: (value) => updateState(MODALS2.CHANGE_NAME, value),
-      openParentSheet: () => setOpenOptionsSheet(true)
-    }
-  ), openModals.has(MODALS2.CAPTION) && /* @__PURE__ */ React19.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS2.CAPTION, value) }), showEmojiCard && /* @__PURE__ */ React19.createElement(
-    Box,
-    {
-      ref: emojiCardRef,
-      css: {
-        maxWidth: "100%",
-        w: "100%",
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: "$18",
-        bg: "$surface_default",
-        zIndex: "10",
-        p: "$8",
-        pb: 0,
-        r: "$1",
-        mx: "$4"
-      }
-    },
-    /* @__PURE__ */ React19.createElement(EmojiReaction, { showCard: true })
-  ), showRecordingOn && /* @__PURE__ */ React19.createElement(
-    StopRecordingInSheet,
-    {
-      onClose: () => setShowRecordingOn(false),
-      onStopRecording: () => __async(void 0, null, function* () {
-        try {
-          yield hmsActions.stopRTMPAndRecording();
-          setShowRecordingOn(false);
-        } catch (error) {
-          ToastManager.addToast({
-            // @ts-ignore
-            title: error.message,
-            variant: "error"
-          });
-        }
-      })
-    }
-  ));
-};
-
-// src/Prebuilt/components/MoreSettings/MoreSettings.tsx
-var MoreSettings = ({
-  elements,
-  screenType
-}) => {
-  const isMobile = useMedia4(config.media.md);
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  return isMobile || isLandscapeHLSStream ? /* @__PURE__ */ React20.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React20.createElement(DesktopOptions, { elements, screenType });
-};
-
-export {
-  useIsPeerBlacklisted,
-  usePinnedMessages,
-  CHAT_MESSAGE_LIMIT,
-  AnnotisedMessage,
-  ChatBody,
-  ActivatedPIP,
-  useUnreadPollQuizPresent,
-  MoreSettings
-};
-//# sourceMappingURL=chunk-2J5WS52X.js.map