@100mslive/roomkit-react 0.2.8-alpha.7 → 0.2.8-alpha.9

package/dist/{chunk-DRBTAFKN.js → chunk-FUDX3LDB.js}

@@ -106,7 +106,7 @@ var __async = (__this, __arguments, generator) => {
 var define_process_env_default;
 var init_define_process_env = __esm({
   "<define:process.env>"() {
-    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_185c518e-14fa-4a8e-bf76-523e6a97de22", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.21 npm/? node/v18.19.1 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.9.8-alpha.7", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_185c518e-14fa-4a8e-bf76-523e6a97de22", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.1/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.12.8-alpha.7", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.7", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.6", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.2.11394342", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "593", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240225.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.0/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.0-alpha.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:20547", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.2.8-alpha.7", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", GITHUB_RUN_ID: "8081355382", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "48bc1b57113a4245b79055a80f4f1f5d3b8795aa", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "examples/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "f6aeb3782206d0c2fca9cbf488ceb0a35487be7c645191f5cf0163a3eb01e719", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/publish-alpha", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_scripts_prebuilt: "cd packages/roomkit-react && yarn start", npm_package_devDependencies_postcss_loader: "^6.2.1", npm_package_devDependencies_esbuild_loader: "^4.0.2", PATH: "/tmp/yarn--1709127809318-0.9086977243625547:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709127809126-0.6095770090936108:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709127787109-0.0814847064321016:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709127786931-0.6972012578357483:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.19.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_2ee04255-38bc-4c51-b269-6782657e4adf", INVOCATION_ID: "18dfc21d5d544d1b8eb77f790b149ed9", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "456", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", npm_package_devDependencies__rollup_plugin_typescript: "^8.3.1", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies_rollup_plugin_terser: "^7.0.2", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 141", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.9.8-alpha.7", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.2.8-alpha.7", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "48bc1b57113a4245b79055a80f4f1f5d3b8795aa", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_185c518e-14fa-4a8e-bf76-523e6a97de22", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_185c518e-14fa-4a8e-bf76-523e6a97de22", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.154/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_185c518e-14fa-4a8e-bf76-523e6a97de22" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_cf01f7b0-2724-4e4f-b298-ff7feccfe357", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.21 npm/? node/v18.19.1 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.9.8-alpha.9", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_cf01f7b0-2724-4e4f-b298-ff7feccfe357", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.1/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.12.8-alpha.9", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.7", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.6", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.2.11394342", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "591", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240225.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.0/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.0-alpha.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:19780", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.2.8-alpha.9", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", GITHUB_RUN_ID: "8109554901", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "2a735b6edf0b63927744abb555b47ab9be6e5891", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "examples/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "7312e8d1b6dc1c3c88807c4efcd1e1b66331c074df1f1b56194f927df7add041", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/publish-alpha", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_scripts_prebuilt: "cd packages/roomkit-react && yarn start", npm_package_devDependencies_postcss_loader: "^6.2.1", npm_package_devDependencies_esbuild_loader: "^4.0.2", PATH: "/tmp/yarn--1709286943827-0.6891216397962161:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709286943630-0.9971913087997049:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709286921685-0.8303138139294286:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709286921507-0.5830472582556345:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.19.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_105a33c3-e668-4c3a-9613-d5a1981afa4e", INVOCATION_ID: "546f5e1c56564beaa3ea908eafaed9c6", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "459", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", npm_package_devDependencies__rollup_plugin_typescript: "^8.3.1", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies_rollup_plugin_terser: "^7.0.2", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 59", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.9.8-alpha.9", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.2.8-alpha.9", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "2a735b6edf0b63927744abb555b47ab9be6e5891", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_cf01f7b0-2724-4e4f-b298-ff7feccfe357", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_cf01f7b0-2724-4e4f-b298-ff7feccfe357", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.154/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_cf01f7b0-2724-4e4f-b298-ff7feccfe357" };
   }
 });
 
@@ -2928,8 +2928,8 @@ var require_lodash = __commonJS({
           return { "start": start, "end": end };
         }
         function getWrapDetails(source) {
-          var match8 = source.match(reWrapDetails);
-          return match8 ? match8[1].split(reSplitDetails) : [];
+          var match10 = source.match(reWrapDetails);
+          return match10 ? match10[1].split(reSplitDetails) : [];
         }
         function hasPath(object, path, hasFunc) {
           path = castPath(path, object);
@@ -3197,8 +3197,8 @@ var require_lodash = __commonJS({
           if (string.charCodeAt(0) === 46) {
             result2.push("");
           }
-          string.replace(rePropName, function(match8, number, quote, subString) {
-            result2.push(quote ? subString.replace(reEscapeChar, "$1") : number || match8);
+          string.replace(rePropName, function(match10, number, quote, subString) {
+            result2.push(quote ? subString.replace(reEscapeChar, "$1") : number || match10);
           });
           return result2;
         });
@@ -4764,7 +4764,7 @@ var require_lodash = __commonJS({
             "g"
           );
           var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options, "sourceURL") ? (options.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
-          string.replace(reDelimiters, function(match8, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
+          string.replace(reDelimiters, function(match10, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
             interpolateValue || (interpolateValue = esTemplateValue);
             source += string.slice(index, offset).replace(reUnescapedString, escapeStringChar);
             if (escapeValue) {
@@ -4778,8 +4778,8 @@ var require_lodash = __commonJS({
             if (interpolateValue) {
               source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'";
             }
-            index = offset + match8.length;
-            return match8;
+            index = offset + match10.length;
+            return match10;
           });
           source += "';\n";
           var variable = hasOwnProperty.call(options, "variable") && options.variable;
@@ -4867,13 +4867,13 @@ var require_lodash = __commonJS({
           }
           if (isRegExp(separator)) {
             if (string.slice(end).search(separator)) {
-              var match8, substring = result2;
+              var match10, substring = result2;
               if (!separator.global) {
                 separator = RegExp2(separator.source, toString(reFlags.exec(separator)) + "g");
               }
               separator.lastIndex = 0;
-              while (match8 = separator.exec(substring)) {
-                var newEnd = match8.index;
+              while (match10 = separator.exec(substring)) {
+                var newEnd = match10.index;
               }
               result2 = result2.slice(0, newEnd === undefined2 ? end : newEnd);
             }
@@ -5628,7 +5628,7 @@ var require_ua_parser = __commonJS({
         }
       };
       var rgxMapper = function(ua, arrays) {
-        var i = 0, j, k2, p, q2, matches, match8;
+        var i = 0, j, k2, p, q2, matches, match10;
         while (i < arrays.length && !matches) {
           var regex = arrays[i], props = arrays[i + 1];
           j = k2 = 0;
@@ -5639,26 +5639,26 @@ var require_ua_parser = __commonJS({
             matches = regex[j++].exec(ua);
             if (!!matches) {
               for (p = 0; p < props.length; p++) {
-                match8 = matches[++k2];
+                match10 = matches[++k2];
                 q2 = props[p];
                 if (typeof q2 === OBJ_TYPE && q2.length > 0) {
                   if (q2.length === 2) {
                     if (typeof q2[1] == FUNC_TYPE) {
-                      this[q2[0]] = q2[1].call(this, match8);
+                      this[q2[0]] = q2[1].call(this, match10);
                     } else {
                       this[q2[0]] = q2[1];
                     }
                   } else if (q2.length === 3) {
                     if (typeof q2[1] === FUNC_TYPE && !(q2[1].exec && q2[1].test)) {
-                      this[q2[0]] = match8 ? q2[1].call(this, match8, q2[2]) : undefined2;
+                      this[q2[0]] = match10 ? q2[1].call(this, match10, q2[2]) : undefined2;
                     } else {
-                      this[q2[0]] = match8 ? match8.replace(q2[1], q2[2]) : undefined2;
+                      this[q2[0]] = match10 ? match10.replace(q2[1], q2[2]) : undefined2;
                     }
                   } else if (q2.length === 4) {
-                    this[q2[0]] = match8 ? q2[3].call(this, match8.replace(q2[1], q2[2])) : undefined2;
+                    this[q2[0]] = match10 ? q2[3].call(this, match10.replace(q2[1], q2[2])) : undefined2;
                   }
                 } else {
-                  this[q2] = match8 ? match8 : undefined2;
+                  this[q2] = match10 ? match10 : undefined2;
                 }
               }
             }
@@ -8636,13 +8636,13 @@ var require_parser = __commonJS({
     var toIntIfInt = function(v2) {
       return String(Number(v2)) === v2 ? Number(v2) : v2;
     };
-    var attachProperties = function(match8, location, names, rawName) {
+    var attachProperties = function(match10, location, names, rawName) {
       if (rawName && !names) {
-        location[rawName] = toIntIfInt(match8[1]);
+        location[rawName] = toIntIfInt(match10[1]);
       } else {
         for (var i = 0; i < names.length; i += 1) {
-          if (match8[i + 1] != null) {
-            location[names[i]] = toIntIfInt(match8[i + 1]);
+          if (match10[i + 1] != null) {
+            location[names[i]] = toIntIfInt(match10[i + 1]);
           }
         }
       }
@@ -9483,22 +9483,22 @@ var textEllipsis = (width) => ({
 // src/Button/Button.tsx
 var getOutlinedVariants = (base, hover, active, disabled, text, textDisabled) => {
   return {
-    bg: "$transparent",
+    bg: "transparent",
     border: `solid $space$px $colors${base}`,
     c: text,
     "&[disabled]": {
       c: textDisabled,
-      bg: "$transparent",
+      bg: "transparent",
       border: `solid $space$px $colors${disabled}`,
       cursor: "not-allowed"
     },
     "&:not([disabled]):hover": {
       border: `solid $space$px $colors${hover}`,
-      bg: "$transparent"
+      bg: "transparent"
     },
     "&:not([disabled]):active": {
       border: `solid $space$px $colors${active}`,
-      bg: "$transparent"
+      bg: "transparent"
     },
     "&:not([disabled]):focus-visible": {
       boxShadow: `0 0 0 3px $colors${base}`
@@ -11642,7 +11642,7 @@ var StyledFieldset = styled("fieldset", {
   alignItems: "center",
   justifyContent: "space-between",
   border: "none",
-  backgroundColor: "$transparent"
+  backgroundColor: "transparent"
 });
 var Fieldset = StyledFieldset;
 
@@ -12956,7 +12956,7 @@ var IconButton2 = styled(IconButton, {
     active: {
       true: {
         color: "$on_surface_high",
-        backgroundColor: "$transparent"
+        backgroundColor: "transparent"
       },
       false: {
         border: "1px solid transparent",
@@ -12991,7 +12991,7 @@ var IconSection = styled(IconButton_default, {
   h: "$14",
   p: "$4",
   r: "$1",
-  bg: "$transparent",
+  bg: "transparent",
   borderTopRightRadius: 0,
   borderColor: "$border_bright",
   borderBottomRightRadius: 0,
@@ -13186,8 +13186,8 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
 });
 var SheetContent = React27.forwardRef(
   (_a8, forwardedRef) => {
-    var _b7 = _a8, { children } = _b7, props = __objRest(_b7, ["children"]);
-    return /* @__PURE__ */ React27.createElement(Dialog.Portal, null, /* @__PURE__ */ React27.createElement(StyledOverlay, null), /* @__PURE__ */ React27.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
+    var _b7 = _a8, { children, container } = _b7, props = __objRest(_b7, ["children", "container"]);
+    return /* @__PURE__ */ React27.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React27.createElement(StyledOverlay, null), /* @__PURE__ */ React27.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
   }
 );
 var SheetClose = Dialog.Close;
@@ -14020,16 +14020,16 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
 
 // src/Prebuilt/components/EmojiReaction.jsx
 init_define_process_env();
-import React34, { Fragment as Fragment4, useState as useState11 } from "react";
-import { useMedia as useMedia4 } from "react-use";
+import React34, { useState as useState12 } from "react";
+import { useMedia as useMedia5 } from "react-use";
 import data from "@emoji-mart/data/sets/14/apple.json";
 import { init } from "emoji-mart";
 import {
-  selectAvailableRoleNames,
-  selectIsConnectedToRoom,
+  selectAvailableRoleNames as selectAvailableRoleNames2,
+  selectIsConnectedToRoom as selectIsConnectedToRoom2,
   selectLocalPeerID,
   useCustomEvent,
-  useHMSStore as useHMSStore9
+  useHMSStore as useHMSStore10
 } from "@100mslive/react-sdk";
 import { EmojiIcon } from "@100mslive/react-icons";
 
@@ -14077,15 +14077,95 @@ var useDropdownList = ({ name, open }) => {
   }, [open, name]);
 };
 
+// src/Prebuilt/common/hooks.ts
+init_define_process_env();
+import { useEffect as useEffect12, useRef as useRef8, useState as useState11 } from "react";
+import { useMedia as useMedia4 } from "react-use";
+import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
+import {
+  parsedUserAgent as parsedUserAgent2,
+  selectAvailableRoleNames,
+  selectIsConnectedToRoom,
+  selectPeerCount as selectPeerCount2,
+  selectPeerMetadata,
+  selectPeers,
+  selectRemotePeers,
+  useHMSStore as useHMSStore9,
+  useHMSVanillaStore as useHMSVanillaStore4
+} from "@100mslive/react-sdk";
+var useFilteredRoles = () => {
+  var _a8;
+  const { elements } = useRoomLayoutConferencingScreen();
+  return ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.roles_whitelist) || [];
+};
+var useDefaultChatSelection = () => {
+  var _a8;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const roles = useFilteredRoles();
+  if ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.public_chat_enabled) {
+    return CHAT_SELECTOR.EVERYONE;
+  }
+  if (roles.length > 0) {
+    return roles[0];
+  }
+  return "";
+};
+var useShowStreamingUI = () => {
+  var _a8, _b7, _c;
+  const layout = useRoomLayout();
+  const { join_form } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
+  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
+};
+var useParticipants = (params) => {
+  var _a8;
+  const isConnected = useHMSStore9(selectIsConnectedToRoom);
+  const peerCount = useHMSStore9(selectPeerCount2);
+  const availableRoles = useHMSStore9(selectAvailableRoleNames);
+  let participantList = useHMSStore9(isConnected ? selectPeers : selectRemotePeers);
+  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
+  const vanillaStore = useHMSVanillaStore4();
+  if ((_a8 = params == null ? void 0 : params.metadata) == null ? void 0 : _a8.isHandRaised) {
+    participantList = participantList.filter((peer) => {
+      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
+    });
+  }
+  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
+    participantList = participantList.filter((peer) => peer.roleName === params.role);
+  }
+  if (params == null ? void 0 : params.search) {
+    const search = params.search;
+    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
+  }
+  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
+};
+var useIsLandscape = () => {
+  const isMobile = parsedUserAgent2.getDevice().type === "mobile";
+  const isLandscape = useMedia4(config.media.ls);
+  return isMobile && isLandscape;
+};
+var useLandscapeHLSStream = () => {
+  const isLandscape = useIsLandscape();
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isLandscape && screenType === "hls_live_streaming";
+};
+var useMobileHLSStream = () => {
+  const isMobile = useMedia4(config.media.md);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isMobile && screenType === "hls_live_streaming";
+};
+
 // src/Prebuilt/components/EmojiReaction.jsx
 init({ data });
 var EmojiReaction = () => {
-  const [open, setOpen] = useState11(false);
-  const isConnected = useHMSStore9(selectIsConnectedToRoom);
+  const [open, setOpen] = useState12(false);
+  const isConnected = useHMSStore10(selectIsConnectedToRoom2);
   useDropdownList({ open, name: "EmojiReaction" });
-  const roles = useHMSStore9(selectAvailableRoleNames);
-  const localPeerId = useHMSStore9(selectLocalPeerID);
-  const isMobile = useMedia4(config.media.md);
+  const roles = useHMSStore10(selectAvailableRoleNames2);
+  const localPeerId = useHMSStore10(selectLocalPeerID);
+  const isMobile = useMedia5(config.media.md);
+  const isLandscape = useMedia5(config.media.ls);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE
   });
@@ -14102,7 +14182,24 @@ var EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React34.createElement(EmojiCard, { sendReaction }) : /* @__PURE__ */ React34.createElement(Fragment4, null, /* @__PURE__ */ React34.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React34.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React34.createElement(IconButton_default, null, /* @__PURE__ */ React34.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React34.createElement(Box, null, /* @__PURE__ */ React34.createElement(EmojiIcon, null))))), /* @__PURE__ */ React34.createElement(Dropdown.Content, { sideOffset: 5, align: "center", css: { p: "$8", bg: "$surface_default" } }, /* @__PURE__ */ React34.createElement(EmojiCard, { sendReaction }))));
+  if ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+    return /* @__PURE__ */ React34.createElement(EmojiCard, { sendReaction });
+  }
+  return /* @__PURE__ */ React34.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React34.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React34.createElement(
+    IconButton_default,
+    {
+      css: isMobile || isLandscape ? { bg: "$surface_default", r: "$round", border: "1px solid $border_bright" } : {}
+    },
+    /* @__PURE__ */ React34.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React34.createElement(Box, null, /* @__PURE__ */ React34.createElement(EmojiIcon, null)))
+  )), /* @__PURE__ */ React34.createElement(
+    Dropdown.Content,
+    {
+      sideOffset: 5,
+      align: isMobileHLSStream || isLandscapeStream ? "end" : "center",
+      css: { p: "$8", bg: "$surface_default" }
+    },
+    /* @__PURE__ */ React34.createElement(EmojiCard, { sendReaction })
+  ));
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
@@ -14121,8 +14218,8 @@ import {
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 init_define_process_env();
-import React38, { Fragment as Fragment5, useState as useState12 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom2, selectPermissions as selectPermissions2, useHMSStore as useHMSStore10, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
+import React38, { Fragment as Fragment4, useState as useState13 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions as selectPermissions2, useHMSStore as useHMSStore11, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { ExitIcon, StopIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Leave/EndSessionContent.tsx
@@ -14262,13 +14359,14 @@ var LeaveSessionContent = ({
 var DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
-  endRoom
+  endRoom,
+  container
 }) => {
-  const [open, setOpen] = useState12(false);
-  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState12(false);
-  const [showEndStreamAlert, setShowEndStreamAlert] = useState12(false);
-  const isConnected = useHMSStore10(selectIsConnectedToRoom2);
-  const permissions = useHMSStore10(selectPermissions2);
+  const [open, setOpen] = useState13(false);
+  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState13(false);
+  const [showEndStreamAlert, setShowEndStreamAlert] = useState13(false);
+  const isConnected = useHMSStore11(selectIsConnectedToRoom3);
+  const permissions = useHMSStore11(selectPermissions2);
   const { isStreamingOn } = useRecordingStreaming3();
   const showStream = screenType !== "hls_live_streaming" && isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming);
   const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
@@ -14276,7 +14374,7 @@ var DesktopLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(Fragment5, null, showLeaveOptions ? /* @__PURE__ */ React38.createElement(Flex, null, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React38.createElement(Fragment4, null, showLeaveOptions ? /* @__PURE__ */ React38.createElement(Flex, null, /* @__PURE__ */ React38.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -14299,7 +14397,7 @@ var DesktopLeaveRoom = ({
       }
     },
     /* @__PURE__ */ React38.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React38.createElement(VerticalMenuIcon2, null))
-  ), /* @__PURE__ */ React38.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React38.createElement(
+  ), /* @__PURE__ */ React38.createElement(Dropdown.Portal, { container }, /* @__PURE__ */ React38.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React38.createElement(
     Dropdown.Item,
     {
       css: {
@@ -14350,7 +14448,7 @@ var DesktopLeaveRoom = ({
         css: { p: "$8 $4" }
       }
     )
-  )))) : /* @__PURE__ */ React38.createElement(
+  ))))) : /* @__PURE__ */ React38.createElement(
     LeaveIconButton,
     {
       onClick: () => {
@@ -14373,91 +14471,13 @@ var DesktopLeaveRoom = ({
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
 init_define_process_env();
-import React39, { Fragment as Fragment6, useState as useState14 } from "react";
+import React39, { Fragment as Fragment5, useState as useState14 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom4, selectPermissions as selectPermissions3, useHMSStore as useHMSStore12, useRecordingStreaming as useRecordingStreaming4 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon6, ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/common/hooks.ts
-init_define_process_env();
-import { useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
-import { useMedia as useMedia5 } from "react-use";
-import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
-import {
-  parsedUserAgent as parsedUserAgent2,
-  selectAvailableRoleNames as selectAvailableRoleNames2,
-  selectIsConnectedToRoom as selectIsConnectedToRoom3,
-  selectPeerCount as selectPeerCount2,
-  selectPeerMetadata,
-  selectPeers,
-  selectRemotePeers,
-  useHMSStore as useHMSStore11,
-  useHMSVanillaStore as useHMSVanillaStore4
-} from "@100mslive/react-sdk";
-var useFilteredRoles = () => {
-  var _a8;
-  const { elements } = useRoomLayoutConferencingScreen();
-  return ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.roles_whitelist) || [];
-};
-var useDefaultChatSelection = () => {
-  var _a8;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const roles = useFilteredRoles();
-  if ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.public_chat_enabled) {
-    return CHAT_SELECTOR.EVERYONE;
-  }
-  if (roles.length > 0) {
-    return roles[0];
-  }
-  return "";
-};
-var useShowStreamingUI = () => {
-  var _a8, _b7, _c;
-  const layout = useRoomLayout();
-  const { join_form } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
-  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
-};
-var useParticipants = (params) => {
-  var _a8;
-  const isConnected = useHMSStore11(selectIsConnectedToRoom3);
-  const peerCount = useHMSStore11(selectPeerCount2);
-  const availableRoles = useHMSStore11(selectAvailableRoleNames2);
-  let participantList = useHMSStore11(isConnected ? selectPeers : selectRemotePeers);
-  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore4();
-  if ((_a8 = params == null ? void 0 : params.metadata) == null ? void 0 : _a8.isHandRaised) {
-    participantList = participantList.filter((peer) => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
-    participantList = participantList.filter((peer) => peer.roleName === params.role);
-  }
-  if (params == null ? void 0 : params.search) {
-    const search = params.search;
-    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};
-var useIsLandscape = () => {
-  const isMobile = parsedUserAgent2.getDevice().type === "mobile";
-  const isLandscape = useMedia5(config.media.ls);
-  return isMobile && isLandscape;
-};
-var useLandscapeHLSStream = () => {
-  const isLandscape = useIsLandscape();
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isLandscape && screenType === "hls_live_streaming";
-};
-var useMobileHLSStream = () => {
-  const isMobile = useMedia5(config.media.md);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isMobile && screenType === "hls_live_streaming";
-};
-
-// src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
 var MwebLeaveRoom = ({
   leaveRoom,
-  endRoom
+  endRoom,
+  container
 }) => {
   const [open, setOpen] = useState14(false);
   const { screenType } = useRoomLayoutConferencingScreen();
@@ -14472,7 +14492,14 @@ var MwebLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Fragment6, null, showLeaveOptions ? /* @__PURE__ */ React39.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React39.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React39.createElement(LeaveButton, { onClick: () => setOpen(!open) })), /* @__PURE__ */ React39.createElement(Sheet.Content, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React39.createElement(Fragment5, null, showLeaveOptions ? /* @__PURE__ */ React39.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React39.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React39.createElement(
+    LeaveButton,
+    {
+      onClick: () => {
+        setOpen((open2) => !open2);
+      }
+    }
+  )), /* @__PURE__ */ React39.createElement(Sheet.Content, { container }, /* @__PURE__ */ React39.createElement(
     LeaveCard,
     {
       title: showStream ? "Leave Stream" : "Leave Session",
@@ -14499,19 +14526,19 @@ var MwebLeaveRoom = ({
         setShowEndStreamAlert(true);
       }
     }
-  ))) : /* @__PURE__ */ React39.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React39.createElement(
+  ))) : /* @__PURE__ */ React39.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ React39.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
       leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn
     }
-  ))), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React39.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
+  ))), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ React39.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
 };
 var LeaveButton = ({ onClick }) => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ React39.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => onClick() }, /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(CrossIcon6, null)))) : /* @__PURE__ */ React39.createElement(
+  return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ React39.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick }, /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(CrossIcon6, null)))) : /* @__PURE__ */ React39.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -14520,14 +14547,17 @@ var LeaveButton = ({ onClick }) => {
         borderTopRightRadius: "$1",
         borderBottomRightRadius: "$1"
       },
-      onClick: () => onClick()
+      onClick
     },
     /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
   );
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
-var LeaveRoom = ({ screenType }) => {
+var LeaveRoom = ({
+  screenType,
+  container
+}) => {
   const isConnected = useHMSStore13(selectIsConnectedToRoom5);
   const permissions = useHMSStore13(selectPermissions4);
   const isMobile = useMedia6(config.media.md);
@@ -14568,9 +14598,9 @@ var LeaveRoom = ({ screenType }) => {
     return null;
   }
   if (isMobileHLSStream || isLandscapeHLSStream) {
-    return /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, endRoom });
+    return /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container });
   }
-  return isMobile ? /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, endRoom }) : /* @__PURE__ */ React40.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
+  return isMobile ? /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container }) : /* @__PURE__ */ React40.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom, container });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
@@ -14580,7 +14610,7 @@ import { useMedia as useMedia9 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
 init_define_process_env();
-import React52, { Fragment as Fragment7, useState as useState23 } from "react";
+import React52, { Fragment as Fragment6, useState as useState23 } from "react";
 import { HMSHLSPlayer } from "@100mslive/hls-player";
 import { match as match3 } from "ts-pattern";
 import { selectAppData as selectAppData3, selectLocalPeerID as selectLocalPeerID4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
@@ -15351,7 +15381,7 @@ var DialogInputFile = (_a8) => {
           "&:hover": {
             border: "none",
             background: "none",
-            bg: "$transparent !important"
+            bg: "transparent !important"
           }
         }
       },
@@ -16119,7 +16149,7 @@ var DesktopOptions = ({
       return copy;
     });
   };
-  return /* @__PURE__ */ React52.createElement(Fragment7, null, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React52.createElement(Fragment6, null, /* @__PURE__ */ React52.createElement(
     Dropdown.Root,
     {
       open: openModals.has(MODALS.MORE_SETTINGS),
@@ -16326,8 +16356,8 @@ init_define_process_env();
 var logDisabled_ = true;
 var deprecationWarnings_ = true;
 function extractVersion(uastring, expr, pos) {
-  const match8 = uastring.match(expr);
-  return match8 && match8.length >= pos && parseInt(match8[pos], 10);
+  const match10 = uastring.match(expr);
+  return match10 && match10.length >= pos && parseInt(match10[pos], 10);
 }
 function wrapPeerConnectionEvent(window2, eventNameToWrap, wrapper) {
   if (!window2.RTCPeerConnection) {
@@ -16629,7 +16659,7 @@ function shimGetUserMedia(window2, browserDetails) {
         if (matches) {
           return navigator2.mediaDevices.enumerateDevices().then((devices) => {
             devices = devices.filter((d2) => d2.kind === "videoinput");
-            let dev = devices.find((d2) => matches.some((match8) => d2.label.toLowerCase().includes(match8)));
+            let dev = devices.find((d2) => matches.some((match10) => d2.label.toLowerCase().includes(match10)));
             if (!dev && devices.length && matches.includes("back")) {
               dev = devices[devices.length - 1];
             }
@@ -18056,11 +18086,11 @@ function shimMaxMessageSize(window2, browserDetails) {
     });
   };
   const getRemoteFirefoxVersion = function(description) {
-    const match8 = description.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
-    if (match8 === null || match8.length < 2) {
+    const match10 = description.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
+    if (match10 === null || match10.length < 2) {
       return -1;
     }
-    const version = parseInt(match8[1], 10);
+    const version = parseInt(match10[1], 10);
     return version !== version ? -1 : version;
   };
   const getCanSendMaxMessageSize = function(remoteIsFirefox) {
@@ -18085,12 +18115,12 @@ function shimMaxMessageSize(window2, browserDetails) {
     if (browserDetails.browser === "firefox" && browserDetails.version === 57) {
       maxMessageSize = 65535;
     }
-    const match8 = import_sdp.default.matchPrefix(
+    const match10 = import_sdp.default.matchPrefix(
       description.sdp,
       "a=max-message-size:"
     );
-    if (match8.length > 0) {
-      maxMessageSize = parseInt(match8[0].substring(19), 10);
+    if (match10.length > 0) {
+      maxMessageSize = parseInt(match10[0].substring(19), 10);
     } else if (browserDetails.browser === "firefox" && remoteIsFirefox !== -1) {
       maxMessageSize = 2147483637;
     }
@@ -18436,7 +18466,7 @@ var S = (a2, e) => {
       $r.call(e, t) && Fr(a2, t, e[t]);
   return a2;
 };
-var y = (a2, e) => ya(a2, ka(e));
+var M = (a2, e) => ya(a2, ka(e));
 var Yi = (a2, e) => {
   var t = {};
   for (var i in a2)
@@ -18448,7 +18478,7 @@ var Yi = (a2, e) => {
 };
 var ba = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
 var dr = ba((Xc, $a) => {
-  $a.exports = { version: "0.11.8-alpha.7", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
+  $a.exports = { version: "0.11.8-alpha.9", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
 });
 var Xi = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(Xi || {});
 var Aa = ((e) => (e.CHAT = "chat", e))(Aa || {});
@@ -18939,12 +18969,12 @@ var R = class {
     this.name = e, this.level = t, this.includesPII = r || false, this.properties = i || {}, this.timestamp = s || (/* @__PURE__ */ new Date()).getTime(), this.event_id = Wa(), this.device_id = vs();
   }
   toSignalParams() {
-    return { name: this.name, info: y(S({}, this.properties), { timestamp: this.timestamp, domain: Be }), timestamp: (/* @__PURE__ */ new Date()).getTime() };
+    return { name: this.name, info: M(S({}, this.properties), { timestamp: this.timestamp, domain: Be }), timestamp: (/* @__PURE__ */ new Date()).getTime() };
   }
 };
-var M = class {
+var y = class {
   static connect(e, t, i = /* @__PURE__ */ new Date(), r = /* @__PURE__ */ new Date(), s) {
-    let o = this.eventNameFor("connect", e === void 0), n = e ? 2 : 1, l = this.getPropertiesWithError(y(S({}, t), { [this.KEY_REQUESTED_AT]: i == null ? void 0 : i.getTime(), [this.KEY_RESPONDED_AT]: r == null ? void 0 : r.getTime(), endpoint: s }), e);
+    let o = this.eventNameFor("connect", e === void 0), n = e ? 2 : 1, l = this.getPropertiesWithError(M(S({}, t), { [this.KEY_REQUESTED_AT]: i == null ? void 0 : i.getTime(), [this.KEY_RESPONDED_AT]: r == null ? void 0 : r.getTime(), endpoint: s }), e);
     return new R({ name: o, level: n, properties: l });
   }
   static disconnect(e, t) {
@@ -18958,7 +18988,7 @@ var M = class {
   }
   static join(i) {
     var r = i, { error: e } = r, t = Yi(r, ["error"]);
-    let s = this.eventNameFor("join", e === void 0), o = e ? 2 : 1, n = this.getPropertiesWithError(y(S({}, t), { is_preview_called: !!t.is_preview_called }), e);
+    let s = this.eventNameFor("join", e === void 0), o = e ? 2 : 1, n = this.getPropertiesWithError(M(S({}, t), { is_preview_called: !!t.is_preview_called }), e);
     return new R({ name: s, level: o, properties: n });
   }
   static publish({ devices: e, settings: t, error: i }) {
@@ -19001,7 +19031,7 @@ var M = class {
     let i = "video.degradation.stats", r = 1, s = { degradedAt: e.degradedAt, trackId: e.trackId };
     if (!t && e.degradedAt instanceof Date) {
       let o = /* @__PURE__ */ new Date(), n = o.valueOf() - e.degradedAt.valueOf();
-      s = y(S({}, s), { duration: n, restoredAt: o });
+      s = M(S({}, s), { duration: n, restoredAt: o });
     }
     return new R({ name: i, level: r, properties: s });
   }
@@ -19029,7 +19059,7 @@ var M = class {
     return e ? e instanceof f ? e.toAnalyticsProperties() : { error_name: e.name, error_message: e.message, error_description: e.cause } : {};
   }
 };
-M.KEY_REQUESTED_AT = "requested_at", M.KEY_RESPONDED_AT = "responded_at";
+y.KEY_REQUESTED_AT = "requested_at", y.KEY_RESPONDED_AT = "responded_at";
 var ur = class {
   constructor() {
     this.storage = new ne("hms-device-selection");
@@ -20184,6 +20214,8 @@ var MwebOptions = ({
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -20197,7 +20229,7 @@ var MwebOptions = ({
     });
   };
   useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React58.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React58.createElement(IconButton_default, { css: { "@md": { bg: screenType === "hls_live_streaming" ? "$surface_default" : "" } } }, /* @__PURE__ */ React58.createElement(HamburgerMenuIcon2, null)))), /* @__PURE__ */ React58.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React58.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React58.createElement(IconButton_default, { css: { bg: isMobileHLSStream || isLandscapeHLSStream ? "$surface_default" : "" } }, /* @__PURE__ */ React58.createElement(HamburgerMenuIcon2, null)))), /* @__PURE__ */ React58.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React58.createElement(
     Sheet.Title,
     {
       css: {
@@ -20252,7 +20284,7 @@ var MwebOptions = ({
       isHandRaised ? /* @__PURE__ */ React58.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React58.createElement(HandIcon2, null),
       /* @__PURE__ */ React58.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
     ) : null,
-    (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React58.createElement(
+    (elements == null ? void 0 : elements.emoji_reactions) && !(isLandscapeHLSStream || isMobileHLSStream) && /* @__PURE__ */ React58.createElement(
       ActionTile.Root,
       {
         onClick: () => {
@@ -20412,22 +20444,31 @@ var MoreSettings = ({
 init_define_process_env();
 import React60 from "react";
 import { HandIcon as HandIcon3, HandRaiseSlashedIcon as HandRaiseSlashedIcon2 } from "@100mslive/react-icons";
-var RaiseHand = () => {
+var RaiseHand = ({ css: css2 }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
-  return /* @__PURE__ */ React60.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React60.createElement(IconButton_default, { "data-testid": "hand_raise_btn", active: !isHandRaised, onClick: () => __async(void 0, null, function* () {
-    return yield toggleHandRaise();
-  }) }, isHandRaised ? /* @__PURE__ */ React60.createElement(HandRaiseSlashedIcon2, null) : /* @__PURE__ */ React60.createElement(HandIcon3, null)));
+  return /* @__PURE__ */ React60.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React60.createElement(
+    IconButton_default,
+    {
+      "data-testid": "hand_raise_btn",
+      css: css2,
+      active: !isHandRaised,
+      onClick: () => __async(void 0, null, function* () {
+        return yield toggleHandRaise();
+      })
+    },
+    isHandRaised ? /* @__PURE__ */ React60.createElement(HandRaiseSlashedIcon2, null) : /* @__PURE__ */ React60.createElement(HandIcon3, null)
+  ));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
 init_define_process_env();
-import React67, { Fragment as Fragment9 } from "react";
+import React67, { Fragment as Fragment8 } from "react";
 import { selectIsAllowedToPublish, useAwayNotifications, useHMSStore as useHMSStore30, useScreenShare as useScreenShare3 } from "@100mslive/react-sdk";
 import { ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
 init_define_process_env();
-import React66, { Fragment as Fragment8, useState as useState30 } from "react";
+import React66, { Fragment as Fragment7, useState as useState30 } from "react";
 import { useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
 import { StarIcon, VerticalMenuIcon as VerticalMenuIcon3 } from "@100mslive/react-icons";
 
@@ -20610,7 +20651,7 @@ var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
           w: "100%",
           "&:focus": {
             boxShadow: "0 0 0 1px $colors$primary_default",
-            border: "1px solid $transparent"
+            border: "1px solid transparent"
           },
           mb: 0,
           mt: "$6"
@@ -20688,7 +20729,7 @@ function ShareScreenOptions() {
     });
   };
   const { toggleScreenShare } = useScreenShare2();
-  return /* @__PURE__ */ React66.createElement(Fragment8, null, /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React66.createElement(Fragment7, null, /* @__PURE__ */ React66.createElement(
     Dropdown.Root,
     {
       open: openModals.has(MODALS3.SHARE),
@@ -20717,7 +20758,7 @@ function ShareScreenOptions() {
             pt: "$10",
             pb: "$6",
             "&:hover": {
-              bg: "$transparent",
+              bg: "transparent",
               cursor: "default"
             }
           }
@@ -20736,7 +20777,7 @@ function ShareScreenOptions() {
             pt: "$6",
             pb: "$10",
             "&:hover": {
-              bg: "$transparent",
+              bg: "transparent",
               cursor: "default"
             }
           }
@@ -20890,7 +20931,7 @@ var ScreenshareToggle = ({ css: css2 = {} }) => {
   if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
     return null;
   }
-  return /* @__PURE__ */ React67.createElement(Fragment9, null, /* @__PURE__ */ React67.createElement(Flex, { direction: "row", css: { "@md": { display: "none" } } }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React67.createElement(Fragment8, null, /* @__PURE__ */ React67.createElement(Flex, { direction: "row", css: { "@md": { display: "none" } } }, /* @__PURE__ */ React67.createElement(
     ScreenShareButton,
     {
       variant: "standard",
@@ -20962,7 +21003,7 @@ var ChatToggle = () => {
 
 // src/Prebuilt/components/Footer/ParticipantList.tsx
 init_define_process_env();
-import React74, { Fragment as Fragment10, useCallback as useCallback18, useState as useState32 } from "react";
+import React74, { Fragment as Fragment9, useCallback as useCallback18, useState as useState32 } from "react";
 import { useDebounce, useMedia as useMedia10 } from "react-use";
 import {
   selectHandRaisedPeers,
@@ -21134,12 +21175,13 @@ import { ChevronRightIcon } from "@100mslive/react-icons";
 // src/Prebuilt/components/Footer/RoleOptions.tsx
 init_define_process_env();
 import React72, { useState as useState31 } from "react";
+import { match as match5 } from "ts-pattern";
 import {
   selectPermissions as selectPermissions10,
   selectRoleByRoleName,
+  selectTracksMap as selectTracksMap3,
   useHMSActions as useHMSActions23,
-  useHMSStore as useHMSStore35,
-  useHMSVanillaStore as useHMSVanillaStore8
+  useHMSStore as useHMSStore35
 } from "@100mslive/react-sdk";
 import {
   MicOffIcon as MicOffIcon3,
@@ -21157,12 +21199,55 @@ var optionTextCSS = {
   textTransform: "none",
   whiteSpace: "nowrap"
 };
-var MuteUnmuteOption = ({ roleName, peerList }) => {
-  const vanillaStore = useHMSVanillaStore8();
-  const store = vanillaStore.getState();
-  const hmsActions = useHMSActions23();
+var DropdownWrapper = ({ children }) => {
+  const [openOptions, setOpenOptions] = useState31(false);
+  if (React72.Children.toArray(children).length === 0) {
+    return null;
+  }
+  React72.Children.map(children, (child) => {
+    console.log({ child });
+  });
+  return /* @__PURE__ */ React72.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React72.createElement(
+    Dropdown.Trigger,
+    {
+      "data-testid": "role_group_options",
+      onClick: (e) => e.stopPropagation(),
+      className: "role_actions",
+      asChild: true,
+      css: {
+        p: "$1",
+        r: "$0",
+        c: "$on_surface_high",
+        visibility: openOptions ? "visible" : "hidden",
+        "&:hover": {
+          c: "$on_surface_medium"
+        },
+        "@md": {
+          visibility: "visible"
+        }
+      }
+    },
+    /* @__PURE__ */ React72.createElement(Flex, null, /* @__PURE__ */ React72.createElement(VerticalMenuIcon4, null))
+  ), /* @__PURE__ */ React72.createElement(
+    Dropdown.Content,
+    {
+      onClick: (e) => e.stopPropagation(),
+      css: { w: "max-content", bg: "$surface_default", py: 0 },
+      align: "end"
+    },
+    children
+  ));
+};
+var RoleOptions = ({ roleName, peerList }) => {
   const permissions = useHMSStore35(selectPermissions10);
+  const hmsActions = useHMSActions23();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
+  const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
   const role = useHMSStore35(selectRoleByRoleName(roleName));
+  const canPublishAudio = role.publishParams.allowed.includes("audio");
+  const canPublishVideo = role.publishParams.allowed.includes("video");
+  const tracks = useHMSStore35(selectTracksMap3);
   let isVideoOnForSomePeers = false;
   let isAudioOnForSomePeers = false;
   peerList.forEach((peer) => {
@@ -21170,8 +21255,8 @@ var MuteUnmuteOption = ({ roleName, peerList }) => {
     if (peer.isLocal) {
       return;
     }
-    const isAudioOn = !!peer.audioTrack && ((_a8 = store.tracks[peer.audioTrack]) == null ? void 0 : _a8.enabled);
-    const isVideoOn = !!peer.videoTrack && ((_b7 = store.tracks[peer.videoTrack]) == null ? void 0 : _b7.enabled);
+    const isAudioOn = !!peer.audioTrack && ((_a8 = tracks[peer.audioTrack]) == null ? void 0 : _a8.enabled);
+    const isVideoOn = !!peer.videoTrack && ((_b7 = tracks[peer.videoTrack]) == null ? void 0 : _b7.enabled);
     isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
     isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
   });
@@ -21182,22 +21267,8 @@ var MuteUnmuteOption = ({ roleName, peerList }) => {
       console.error(e);
     }
   });
-  if (!role) {
-    return null;
-  }
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, role.publishParams.allowed.includes("audio") && /* @__PURE__ */ React72.createElement(React72.Fragment, null, isAudioOnForSomePeers && (permissions == null ? void 0 : permissions.mute) ? /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", false) }, /* @__PURE__ */ React72.createElement(MicOffIcon3, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Audio for All")) : null, !isAudioOnForSomePeers && (permissions == null ? void 0 : permissions.unmute) ? /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", true) }, /* @__PURE__ */ React72.createElement(MicOnIcon3, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Audio for All")) : null), role.publishParams.allowed.includes("video") && /* @__PURE__ */ React72.createElement(React72.Fragment, null, isVideoOnForSomePeers && (permissions == null ? void 0 : permissions.mute) ? /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", false) }, /* @__PURE__ */ React72.createElement(VideoOffIcon2, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Video for All")) : null, !isVideoOnForSomePeers && (permissions == null ? void 0 : permissions.unmute) ? /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", true) }, /* @__PURE__ */ React72.createElement(VideoOnIcon3, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Video for All")) : null));
-};
-var RoleOptions = ({ roleName, peerList }) => {
-  const [openOptions, setOpenOptions] = useState31(false);
-  const permissions = useHMSStore35(selectPermissions10);
-  const hmsActions = useHMSActions23();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
-  const canMuteOrUnmute = (permissions == null ? void 0 : permissions.mute) || (permissions == null ? void 0 : permissions.unmute);
-  const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
-  const role = useHMSStore35(selectRoleByRoleName(roleName));
   const canRemoveRoleFromRoom = (permissions == null ? void 0 : permissions.removeOthers) && (on_stage_role === roleName || (off_stage_roles == null ? void 0 : off_stage_roles.includes(roleName)));
-  if (!(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0 || // if only local peer is present no need to show any options
+  if (peerList.length === 0 || // if only local peer is present no need to show any options
   peerList.length === 1 && peerList[0].isLocal || !role) {
     return null;
   }
@@ -21218,54 +21289,31 @@ var RoleOptions = ({ roleName, peerList }) => {
       console.error(e);
     }
   });
-  return /* @__PURE__ */ React72.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React72.createElement(
-    Dropdown.Trigger,
+  return /* @__PURE__ */ React72.createElement(DropdownWrapper, null, canRemoveRoleFromStage ? /* @__PURE__ */ React72.createElement(
+    Dropdown.Item,
     {
-      "data-testid": "role_group_options",
-      onClick: (e) => e.stopPropagation(),
-      className: "role_actions",
-      asChild: true,
-      css: {
-        p: "$1",
-        r: "$0",
-        c: "$on_surface_high",
-        visibility: openOptions ? "visible" : "hidden",
-        "&:hover": {
-          c: "$on_surface_medium"
-        },
-        "@md": {
-          visibility: "visible"
-        }
-      }
-    },
-    /* @__PURE__ */ React72.createElement(Flex, null, /* @__PURE__ */ React72.createElement(VerticalMenuIcon4, null))
-  ), /* @__PURE__ */ React72.createElement(
-    Dropdown.Content,
+      css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderBottom: "1px solid $border_bright" }),
+      onClick: removeAllFromStage
+    },
+    /* @__PURE__ */ React72.createElement(PersonRectangleIcon2, null),
+    /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
+  ) : null, match5({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions == null ? void 0 : permissions.mute, canUnmute: permissions == null ? void 0 : permissions.unmute }).with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => {
+    return /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", false) }, /* @__PURE__ */ React72.createElement(MicOffIcon3, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Audio for All"));
+  }).with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => {
+    return /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", true) }, /* @__PURE__ */ React72.createElement(MicOnIcon3, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Audio for All"));
+  }).otherwise(() => null), match5({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions == null ? void 0 : permissions.mute, canUnmute: permissions == null ? void 0 : permissions.unmute }).with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => {
+    return /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", false) }, /* @__PURE__ */ React72.createElement(VideoOffIcon2, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Video for All"));
+  }).with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => {
+    return /* @__PURE__ */ React72.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", true) }, /* @__PURE__ */ React72.createElement(VideoOnIcon3, null), /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Video for All"));
+  }).otherwise(() => null), canRemoveRoleFromRoom ? /* @__PURE__ */ React72.createElement(
+    Dropdown.Item,
     {
-      onClick: (e) => e.stopPropagation(),
-      css: { w: "max-content", bg: "$surface_default", py: 0 },
-      align: "end"
+      css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright", color: "$alert_error_default" }),
+      onClick: removePeersFromRoom
     },
-    canRemoveRoleFromStage && /* @__PURE__ */ React72.createElement(
-      Dropdown.Item,
-      {
-        css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderBottom: "1px solid $border_bright" }),
-        onClick: removeAllFromStage
-      },
-      /* @__PURE__ */ React72.createElement(PersonRectangleIcon2, null),
-      /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
-    ),
-    canMuteOrUnmute && /* @__PURE__ */ React72.createElement(MuteUnmuteOption, { peerList, roleName }),
-    canRemoveRoleFromRoom && /* @__PURE__ */ React72.createElement(
-      Dropdown.Item,
-      {
-        css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright", color: "$alert_error_default" }),
-        onClick: removePeersFromRoom
-      },
-      /* @__PURE__ */ React72.createElement(RemoveUserIcon, null),
-      /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
-    )
-  ));
+    /* @__PURE__ */ React72.createElement(RemoveUserIcon, null),
+    /* @__PURE__ */ React72.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
+  ) : null);
 };
 
 // src/Prebuilt/components/Footer/RoleAccordion.tsx
@@ -21418,7 +21466,7 @@ var ParticipantList = ({
   if (peerCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ React74.createElement(Fragment10, null, /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React74.createElement(Fragment9, null, /* @__PURE__ */ React74.createElement(
     Flex,
     {
       direction: "column",
@@ -21890,7 +21938,7 @@ import {
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
 init_define_process_env();
-import React131, { Fragment as Fragment13, useCallback as useCallback31, useEffect as useEffect34, useMemo as useMemo11, useState as useState55 } from "react";
+import React131, { Fragment as Fragment12, useCallback as useCallback31, useEffect as useEffect34, useMemo as useMemo11, useState as useState55 } from "react";
 import { useMeasure as useMeasure4, useMedia as useMedia24 } from "react-use";
 import {
   HMSRoomState as HMSRoomState5,
@@ -21908,10 +21956,10 @@ import { MicOffIcon as MicOffIcon7, SettingsIcon as SettingsIcon6 } from "@100ms
 
 // src/Prebuilt/layouts/SidePane.tsx
 init_define_process_env();
-import React126, { useEffect as useEffect32 } from "react";
+import React127, { useEffect as useEffect33 } from "react";
 import { useMedia as useMedia22 } from "react-use";
-import { match as match7 } from "ts-pattern";
-import { selectAppData as selectAppData6, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore66 } from "@100mslive/react-sdk";
+import { match as match9 } from "ts-pattern";
+import { selectAppData as selectAppData6, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore67 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Polls/Polls.tsx
 init_define_process_env();
@@ -22301,7 +22349,7 @@ var OptionInputWithDelete = ({
       key: index,
       onChange: (event) => handleOptionTextChange(index, event.target.value)
     }
-  ), /* @__PURE__ */ React84.createElement(IconButton_default, { onClick: () => removeOption(index), css: { bg: "$transparent", border: "none" } }, /* @__PURE__ */ React84.createElement(TrashIcon2, null)));
+  ), /* @__PURE__ */ React84.createElement(IconButton_default, { onClick: () => removeOption(index), css: { bg: "transparent", border: "none" } }, /* @__PURE__ */ React84.createElement(TrashIcon2, null)));
 };
 
 // src/Prebuilt/components/Polls/common/VoteCount.tsx
@@ -22840,7 +22888,7 @@ var getFormattedTime = (milliseconds, precise = true) => {
   const totalSeconds = milliseconds / 1e3;
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor(totalSeconds % 3600 / 60);
-  const seconds = precise ? totalSeconds % 60 : Math.floor(totalSeconds % 60);
+  const seconds = totalSeconds % 60;
   let formattedTime = "";
   if (hours) {
     formattedTime += `${hours}h `;
@@ -22851,7 +22899,7 @@ var getFormattedTime = (milliseconds, precise = true) => {
   if (!precise && (hours || minutes)) {
     return formattedTime;
   }
-  formattedTime += `${seconds}s`;
+  formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`;
   return formattedTime;
 };
 
@@ -23084,7 +23132,7 @@ import React97 from "react";
 // src/Prebuilt/components/Polls/Voting/QuestionCard.jsx
 init_define_process_env();
 import React96, { useCallback as useCallback21, useMemo as useMemo7, useRef as useRef17, useState as useState39 } from "react";
-import { match as match5 } from "ts-pattern";
+import { match as match6 } from "ts-pattern";
 import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions29, useHMSStore as useHMSStore45 } from "@100mslive/react-sdk";
 import { CheckCircleIcon as CheckCircleIcon5, ChevronDownIcon as ChevronDownIcon5, CrossCircleIcon } from "@100mslive/react-icons";
 var QuestionCard2 = ({
@@ -23161,7 +23209,7 @@ var QuestionCard2 = ({
       {
         variant: "caption",
         css: {
-          color: match5({ respondedToQuiz, isLive, isCorrectAnswer }).when(
+          color: match6({ respondedToQuiz, isLive, isCorrectAnswer }).when(
             ({ respondedToQuiz: respondedToQuiz2, isLive: isLive2 }) => respondedToQuiz2 && !isLive2,
             ({ isCorrectAnswer: isCorrectAnswer2 }) => isCorrectAnswer2 ? "$alert_success" : "$alert_error_default"
           ).otherwise(() => "$on_surface_low"),
@@ -23171,7 +23219,7 @@ var QuestionCard2 = ({
           gap: "$4"
         }
       },
-      match5({ respondedToQuiz, pollEnded, isCorrectAnswer }).when(
+      match6({ respondedToQuiz, pollEnded, isCorrectAnswer }).when(
         ({ respondedToQuiz: respondedToQuiz2, pollEnded: pollEnded2 }) => respondedToQuiz2 && pollEnded2,
         ({ isCorrectAnswer: isCorrectAnswer2 }) => {
           return isCorrectAnswer2 ? /* @__PURE__ */ React96.createElement(CheckCircleIcon5, { height: 16, width: 16 }) : /* @__PURE__ */ React96.createElement(CrossCircleIcon, { height: 16, width: 16 });
@@ -23356,9 +23404,9 @@ var Voting = ({ id, toggleVoting }) => {
     {
       align: "center",
       css: {
-        gap: "$6",
+        gap: "$4",
         py: "$6",
-        px: "$10",
+        px: "$8",
         my: "$4",
         w: "100%",
         color: "$on_surface_high",
@@ -23381,7 +23429,8 @@ var Voting = ({ id, toggleVoting }) => {
         css: {
           marginLeft: "auto",
           cursor: "pointer",
-          "&:hover": { opacity: "0.8" }
+          "&:hover": { opacity: "0.8" },
+          height: "fit-content"
         }
       },
       /* @__PURE__ */ React99.createElement(CrossIcon14, { onClick: toggleVoting })
@@ -23424,19 +23473,69 @@ var Polls = () => {
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx
 init_define_process_env();
-import React103 from "react";
+import React104 from "react";
 import { CrossIcon as CrossIcon15 } from "@100mslive/react-icons";
 
+// src/Prebuilt/components/Header/HeaderComponents.jsx
+init_define_process_env();
+import React101, { useEffect as useEffect23, useState as useState41 } from "react";
+import { selectDominantSpeaker, useHMSStore as useHMSStore48 } from "@100mslive/react-sdk";
+import { VolumeOneIcon } from "@100mslive/react-icons";
+var SpeakerTag = () => {
+  const dominantSpeaker = useHMSStore48(selectDominantSpeaker);
+  return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React101.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "center",
+      css: { flex: "1 1 0", color: "$on_surface_high", "@md": { display: "none" } }
+    },
+    /* @__PURE__ */ React101.createElement(VerticalDivider, { css: { ml: "$8" } }),
+    /* @__PURE__ */ React101.createElement(VolumeOneIcon, null),
+    /* @__PURE__ */ React101.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
+  );
+};
+var LogoImg = styled("img", {
+  maxHeight: "$14",
+  w: "auto",
+  objectFit: "contain",
+  "@md": {
+    maxHeight: "$12"
+  }
+});
+var Logo = () => {
+  var _a8;
+  const roomLayout = useRoomLayout();
+  const logo = (_a8 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a8.url;
+  const [hideImage, setHideImage] = useState41(false);
+  useEffect23(() => {
+    if (hideImage) {
+      setHideImage(false);
+    }
+  }, [logo]);
+  return logo && !hideImage ? /* @__PURE__ */ React101.createElement(
+    LogoImg,
+    {
+      src: logo,
+      alt: "Brand Logo",
+      onError: (e) => {
+        e.target.onerror = null;
+        setHideImage(true);
+      }
+    }
+  ) : null;
+};
+
 // src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx
 init_define_process_env();
-import React102 from "react";
+import React103 from "react";
 
 // src/Prebuilt/components/RoomDetails/Duration.tsx
 init_define_process_env();
-import React101, { useEffect as useEffect23, useState as useState41 } from "react";
+import React102, { useEffect as useEffect24, useState as useState42 } from "react";
 var Duration = ({ timestamp }) => {
-  const [elapsedTime, setElapsedTime] = useState41(getFormattedTime(Date.now() - timestamp.getTime(), false));
-  useEffect23(() => {
+  const [elapsedTime, setElapsedTime] = useState42(getFormattedTime(Date.now() - timestamp.getTime(), false));
+  useEffect24(() => {
     const timerAdded = setInterval(() => {
       setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false));
     }, 1e3);
@@ -23444,46 +23543,57 @@ var Duration = ({ timestamp }) => {
       clearInterval(timerAdded);
     };
   }, [timestamp]);
-  return /* @__PURE__ */ React101.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React101.createElement(Text, { variant: "xs", css: { color: "inherit" } }, "Started ", elapsedTime, " ago"));
+  return /* @__PURE__ */ React102.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React102.createElement(Text, { variant: "xs", css: { color: "inherit" } }, "Started ", elapsedTime, " ago"));
 };
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx
 var RoomDetailsRow = ({ details }) => {
-  return /* @__PURE__ */ React102.createElement(Flex, { align: "center", css: { w: "100%" } }, details.map((detail, index) => /* @__PURE__ */ React102.createElement(React102.Fragment, { key: detail.toString() }, index > 0 && /* @__PURE__ */ React102.createElement(Box, { css: { h: "$2", w: "$2", r: "$round", bg: "$on_surface_medium", m: "0 $2" } }), typeof detail !== "string" ? /* @__PURE__ */ React102.createElement(Duration, { timestamp: detail }) : /* @__PURE__ */ React102.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, detail))));
+  return /* @__PURE__ */ React103.createElement(Flex, { align: "center", css: { w: "100%" } }, details.map((detail, index) => /* @__PURE__ */ React103.createElement(React103.Fragment, { key: detail.toString() }, index > 0 && /* @__PURE__ */ React103.createElement(Box, { css: { h: "$2", w: "$2", r: "$round", bg: "$on_surface_medium", m: "0 $2" } }), typeof detail !== "string" ? /* @__PURE__ */ React103.createElement(Duration, { timestamp: detail }) : /* @__PURE__ */ React103.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, detail))));
 };
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx
 var RoomDetailsPane = () => {
-  const { title, description, details } = useRoomLayoutHeader();
+  const { description } = useRoomLayoutHeader();
+  const isMwebHLSStream = useMobileHLSStream();
+  return /* @__PURE__ */ React104.createElement(Box, { css: { flex: "1 1 0" } }, isMwebHLSStream ? /* @__PURE__ */ React104.createElement(Flex, { direction: "row", align: "center", gap: "2" }, /* @__PURE__ */ React104.createElement(Logo, null), /* @__PURE__ */ React104.createElement(ShowRoomDetailHeader, null)) : /* @__PURE__ */ React104.createElement(ShowRoomDetailHeader, null), /* @__PURE__ */ React104.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React104.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold", display: isMwebHLSStream ? "none" : "" } }, "Description"), /* @__PURE__ */ React104.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium" } }, description)));
+};
+var ShowRoomDetailHeader = () => {
+  const { title, details } = useRoomLayoutHeader();
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  return /* @__PURE__ */ React103.createElement(Box, { css: { flex: "1 1 0" } }, /* @__PURE__ */ React103.createElement(Flex, { justify: "between", align: "center", css: { w: "100%" } }, /* @__PURE__ */ React103.createElement(Text, { variant: "h6" }, title), /* @__PURE__ */ React103.createElement(
+  const isMwebHLSStream = useMobileHLSStream();
+  return /* @__PURE__ */ React104.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React104.createElement(Flex, { justify: "between", align: "center", css: { w: "100%" } }, /* @__PURE__ */ React104.createElement(Text, { variant: "h6" }, title), !isMwebHLSStream && /* @__PURE__ */ React104.createElement(
     Flex,
     {
       onClick: toggleDetailsPane,
-      css: { color: "$on_surface_high", cursor: "pointer", "&:hover": { opacity: "0.8" } }
+      css: {
+        color: "$on_surface_high",
+        cursor: "pointer",
+        "&:hover": { opacity: "0.8" }
+      }
     },
-    /* @__PURE__ */ React103.createElement(CrossIcon15, null)
-  )), /* @__PURE__ */ React103.createElement(RoomDetailsRow, { details }), /* @__PURE__ */ React103.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React103.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "Description"), /* @__PURE__ */ React103.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium" } }, description)));
+    /* @__PURE__ */ React104.createElement(CrossIcon15, null)
+  )), /* @__PURE__ */ React104.createElement(RoomDetailsRow, { details }));
 };
 
 // src/Prebuilt/components/SidePaneTabs.tsx
 init_define_process_env();
-import React118, { useEffect as useEffect30, useState as useState50 } from "react";
+import React119, { useEffect as useEffect31, useState as useState51 } from "react";
 import { useMedia as useMedia19 } from "react-use";
-import { match as match6 } from "ts-pattern";
-import { selectPeerCount as selectPeerCount5, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
+import { match as match8 } from "ts-pattern";
+import { selectPeerCount as selectPeerCount5, useHMSStore as useHMSStore61 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon19 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.tsx
 init_define_process_env();
-import React115, { useCallback as useCallback29, useRef as useRef21 } from "react";
+import React116, { useCallback as useCallback29, useRef as useRef21 } from "react";
 import { useMedia as useMedia18 } from "react-use";
-import { selectHMSMessagesCount, useHMSActions as useHMSActions38, useHMSStore as useHMSStore57, useHMSVanillaStore as useHMSVanillaStore11 } from "@100mslive/react-sdk";
+import { match as match7 } from "ts-pattern";
+import { selectHMSMessagesCount, useHMSActions as useHMSActions38, useHMSStore as useHMSStore58, useHMSVanillaStore as useHMSVanillaStore10 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.tsx
 init_define_process_env();
-import React107, { Fragment as Fragment11, useCallback as useCallback25, useEffect as useEffect25, useLayoutEffect, useMemo as useMemo8, useRef as useRef18, useState as useState44 } from "react";
+import React108, { Fragment as Fragment10, useCallback as useCallback25, useEffect as useEffect26, useLayoutEffect, useMemo as useMemo8, useRef as useRef18, useState as useState45 } from "react";
 import { useMedia as useMedia13 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
@@ -23496,15 +23606,15 @@ import {
   selectSessionStore as selectSessionStore5,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
   useHMSActions as useHMSActions34,
-  useHMSStore as useHMSStore51,
-  useHMSVanillaStore as useHMSVanillaStore10
+  useHMSStore as useHMSStore52,
+  useHMSVanillaStore as useHMSVanillaStore9
 } from "@100mslive/react-sdk";
 import { SolidPinIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatActions.tsx
 init_define_process_env();
-import React105, { useCallback as useCallback24, useState as useState42 } from "react";
-import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selectPermissions15, useHMSActions as useHMSActions33, useHMSStore as useHMSStore49 } from "@100mslive/react-sdk";
+import React106, { useCallback as useCallback24, useState as useState43 } from "react";
+import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selectPermissions15, useHMSActions as useHMSActions33, useHMSStore as useHMSStore50 } from "@100mslive/react-sdk";
 import {
   CopyIcon as CopyIcon2,
   CrossCircleIcon as CrossCircleIcon2,
@@ -23519,23 +23629,23 @@ import {
 
 // src/Prebuilt/components/Chat/MwebChatOption.tsx
 init_define_process_env();
-import React104 from "react";
+import React105 from "react";
 var MwebChatOption = ({
   icon,
   text,
   onClick,
   color = "$on_surface_high"
 }) => {
-  return /* @__PURE__ */ React104.createElement(Flex, { align: "center", css: { w: "100%", color, cursor: "pointer", gap: "$4", p: "$8" }, onClick }, icon, /* @__PURE__ */ React104.createElement(Text, { variant: "sm", css: { color, fontWeight: "$semiBold" } }, text));
+  return /* @__PURE__ */ React105.createElement(Flex, { align: "center", css: { w: "100%", color, cursor: "pointer", gap: "$4", p: "$8" }, onClick }, icon, /* @__PURE__ */ React105.createElement(Text, { variant: "sm", css: { color, fontWeight: "$semiBold" } }, text));
 };
 
 // src/Prebuilt/components/hooks/useChatBlacklist.ts
 init_define_process_env();
 import { useCallback as useCallback22 } from "react";
-import { selectLocalPeer as selectLocalPeer2, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions31, useHMSStore as useHMSStore48 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer2, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions31, useHMSStore as useHMSStore49 } from "@100mslive/react-sdk";
 var useChatBlacklist = (sessionStoreKey) => {
   const hmsActions = useHMSActions31();
-  const blacklistedIDs = useHMSStore48(selectSessionStore2(sessionStoreKey));
+  const blacklistedIDs = useHMSStore49(selectSessionStore2(sessionStoreKey));
   const blacklistItem = useCallback22(
     (blacklistID) => __async(void 0, null, function* () {
       yield hmsActions.sessionStore.set(sessionStoreKey, [...blacklistedIDs || [], blacklistID]).catch((err) => ToastManager.addToast({ title: err.description }));
@@ -23545,8 +23655,8 @@ var useChatBlacklist = (sessionStoreKey) => {
   return { blacklistItem, blacklistedIDs };
 };
 var useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = "" }) => {
-  const localPeer = useHMSStore48(selectLocalPeer2);
-  const blacklistedPeerIDs = useHMSStore48(selectSessionStore2("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
+  const localPeer = useHMSStore49(selectLocalPeer2);
+  const blacklistedPeerIDs = useHMSStore49(selectSessionStore2("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
   return blacklistedPeerIDs == null ? void 0 : blacklistedPeerIDs.includes(local ? localPeer == null ? void 0 : localPeer.customerUserId : peerCustomerUserId);
 };
 
@@ -23557,11 +23667,11 @@ import {
   selectPeerNameByID as selectPeerNameByID2,
   selectSessionStore as selectSessionStore3,
   useHMSActions as useHMSActions32,
-  useHMSVanillaStore as useHMSVanillaStore9
+  useHMSVanillaStore as useHMSVanillaStore8
 } from "@100mslive/react-sdk";
 var usePinnedMessages = () => {
   const hmsActions = useHMSActions32();
-  const vanillaStore = useHMSVanillaStore9();
+  const vanillaStore = useHMSVanillaStore8();
   const setPinnedMessages = useCallback23(
     (message, pinnedBy) => __async(void 0, null, function* () {
       const peerName = vanillaStore.getState(selectPeerNameByID2(message == null ? void 0 : message.sender)) || (message == null ? void 0 : message.senderName);
@@ -23627,11 +23737,11 @@ var ChatActions = ({
   const { elements } = useRoomLayoutConferencingScreen();
   const { can_hide_message = false, can_block_user = false } = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) || {};
   const { roles_whitelist = [] } = (elements == null ? void 0 : elements.chat) || {};
-  const [open, setOpen] = useState42(false);
+  const [open, setOpen] = useState43(false);
   const actions = useHMSActions33();
-  const canRemoveOthers = (_b7 = useHMSStore49(selectPermissions15)) == null ? void 0 : _b7.removeOthers;
+  const canRemoveOthers = (_b7 = useHMSStore50(selectPermissions15)) == null ? void 0 : _b7.removeOthers;
   const { blacklistItem: blacklistPeer } = useChatBlacklist("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */);
-  const localPeerName = useHMSStore49(selectLocalPeerName2);
+  const localPeerName = useHMSStore50(selectLocalPeerName2);
   const { setPinnedMessages, unpinBlacklistedMessages } = usePinnedMessages();
   const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
     "chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */
@@ -23661,34 +23771,34 @@ var ChatActions = ({
     reply: {
       text: "Reply privately",
       tooltipText: "Reply privately",
-      icon: /* @__PURE__ */ React105.createElement(ReplyIcon, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(ReplyIcon, { style: iconStyle }),
       onClick: onReply,
       show: showReply
     },
     replyGroup: {
       text: "Reply to group",
       tooltipText: "Reply to group",
-      icon: /* @__PURE__ */ React105.createElement(ReplyGroupIcon, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(ReplyGroupIcon, { style: iconStyle }),
       onClick: onReplyGroup,
       show: !!message.senderRole && roles_whitelist.includes(message.senderRole)
     },
     pin: {
       text: "Pin message",
       tooltipText: "Pin",
-      icon: /* @__PURE__ */ React105.createElement(PinIcon, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(PinIcon, { style: iconStyle }),
       onClick: () => setPinnedMessages(message, localPeerName || ""),
       show: showPinAction
     },
     copy: {
       text: "Copy text",
       tooltipText: "Copy",
-      icon: /* @__PURE__ */ React105.createElement(CopyIcon2, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(CopyIcon2, { style: iconStyle }),
       onClick: copyMessageContent,
       show: true
     },
     hide: {
       text: message.recipientPeer ? "Hide for both" : "Hide for everyone",
-      icon: /* @__PURE__ */ React105.createElement(EyeCloseIcon2, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(EyeCloseIcon2, { style: iconStyle }),
       onClick: () => __async(void 0, null, function* () {
         blacklistMessage(message.id);
         updatePinnedMessages(message.id);
@@ -23697,7 +23807,7 @@ var ChatActions = ({
     },
     block: {
       text: "Block from chat",
-      icon: /* @__PURE__ */ React105.createElement(CrossCircleIcon2, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(CrossCircleIcon2, { style: iconStyle }),
       onClick: () => __async(void 0, null, function* () {
         if (message.senderUserId) {
           blacklistPeer(message.senderUserId);
@@ -23708,7 +23818,7 @@ var ChatActions = ({
     },
     remove: {
       text: "Remove participant",
-      icon: /* @__PURE__ */ React105.createElement(PeopleRemoveIcon3, { style: iconStyle }),
+      icon: /* @__PURE__ */ React106.createElement(PeopleRemoveIcon3, { style: iconStyle }),
       color: "$alert_error_default",
       show: !!canRemoveOthers && !sentByLocalPeer,
       onClick: () => __async(void 0, null, function* () {
@@ -23724,7 +23834,7 @@ var ChatActions = ({
     }
   };
   if (isMobile) {
-    return /* @__PURE__ */ React105.createElement(Sheet.Root, { open: openSheet, onOpenChange: setOpenSheet }, /* @__PURE__ */ React105.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$14" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React105.createElement(
+    return /* @__PURE__ */ React106.createElement(Sheet.Root, { open: openSheet, onOpenChange: setOpenSheet }, /* @__PURE__ */ React106.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$14" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React106.createElement(
       Sheet.Title,
       {
         css: {
@@ -23741,10 +23851,10 @@ var ChatActions = ({
         }
       },
       "Message options",
-      /* @__PURE__ */ React105.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React105.createElement(CrossIcon16, null))
+      /* @__PURE__ */ React106.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React106.createElement(CrossIcon16, null))
     ), Object.keys(options).map((optionKey) => {
       const option = options[optionKey];
-      return option.show ? /* @__PURE__ */ React105.createElement(
+      return option.show ? /* @__PURE__ */ React106.createElement(
         MwebChatOption,
         {
           key: optionKey,
@@ -23756,7 +23866,7 @@ var ChatActions = ({
       ) : null;
     })));
   }
-  return /* @__PURE__ */ React105.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { "@md": { display: "none" } } }, /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { "@md": { display: "none" } } }, /* @__PURE__ */ React106.createElement(
     Flex,
     {
       className: "chat_actions",
@@ -23772,20 +23882,20 @@ var ChatActions = ({
         "@md": { opacity: 1 }
       }
     },
-    options.reply.show ? /* @__PURE__ */ React105.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.reply.tooltipText }, /* @__PURE__ */ React105.createElement(IconButton, { "data-testid": "reply_message_btn", onClick: options.reply.onClick }, options.reply.icon)) : null,
-    options.replyGroup.show ? /* @__PURE__ */ React105.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.replyGroup.tooltipText }, /* @__PURE__ */ React105.createElement(IconButton, { "data-testid": "reply_group_message_btn", onClick: options.replyGroup.onClick }, options.replyGroup.icon)) : null,
-    options.pin.show ? /* @__PURE__ */ React105.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.pin.tooltipText }, /* @__PURE__ */ React105.createElement(IconButton, { "data-testid": "pin_message_btn", onClick: options.pin.onClick }, options.pin.icon)) : null,
-    options.copy.show ? /* @__PURE__ */ React105.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.copy.tooltipText }, /* @__PURE__ */ React105.createElement(IconButton, { onClick: options.copy.onClick, "data-testid": "copy_message_btn" }, /* @__PURE__ */ React105.createElement(CopyIcon2, { style: iconStyle }))) : null,
-    options.block.show || options.hide.show || options.remove.show ? /* @__PURE__ */ React105.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: "More actions" }, /* @__PURE__ */ React105.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React105.createElement(IconButton, null, /* @__PURE__ */ React105.createElement(VerticalMenuIcon6, { style: iconStyle })))) : null
-  ), /* @__PURE__ */ React105.createElement(Dropdown.Portal, null, /* @__PURE__ */ React105.createElement(
+    options.reply.show ? /* @__PURE__ */ React106.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.reply.tooltipText }, /* @__PURE__ */ React106.createElement(IconButton, { "data-testid": "reply_message_btn", onClick: options.reply.onClick }, options.reply.icon)) : null,
+    options.replyGroup.show ? /* @__PURE__ */ React106.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.replyGroup.tooltipText }, /* @__PURE__ */ React106.createElement(IconButton, { "data-testid": "reply_group_message_btn", onClick: options.replyGroup.onClick }, options.replyGroup.icon)) : null,
+    options.pin.show ? /* @__PURE__ */ React106.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.pin.tooltipText }, /* @__PURE__ */ React106.createElement(IconButton, { "data-testid": "pin_message_btn", onClick: options.pin.onClick }, options.pin.icon)) : null,
+    options.copy.show ? /* @__PURE__ */ React106.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.copy.tooltipText }, /* @__PURE__ */ React106.createElement(IconButton, { onClick: options.copy.onClick, "data-testid": "copy_message_btn" }, /* @__PURE__ */ React106.createElement(CopyIcon2, { style: iconStyle }))) : null,
+    options.block.show || options.hide.show || options.remove.show ? /* @__PURE__ */ React106.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: "More actions" }, /* @__PURE__ */ React106.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React106.createElement(IconButton, null, /* @__PURE__ */ React106.createElement(VerticalMenuIcon6, { style: iconStyle })))) : null
+  ), /* @__PURE__ */ React106.createElement(Dropdown.Portal, null, /* @__PURE__ */ React106.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: "end",
       css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
     },
-    options.hide.show ? /* @__PURE__ */ React105.createElement(Dropdown.Item, { "data-testid": "hide_message_btn", onClick: options.hide.onClick }, options.hide.icon, /* @__PURE__ */ React105.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold" } }, options.hide.text)) : null,
-    options.block.show ? /* @__PURE__ */ React105.createElement(
+    options.hide.show ? /* @__PURE__ */ React106.createElement(Dropdown.Item, { "data-testid": "hide_message_btn", onClick: options.hide.onClick }, options.hide.icon, /* @__PURE__ */ React106.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold" } }, options.hide.text)) : null,
+    options.block.show ? /* @__PURE__ */ React106.createElement(
       Dropdown.Item,
       {
         "data-testid": "block_peer_btn",
@@ -23793,9 +23903,9 @@ var ChatActions = ({
         css: { color: options.block.color }
       },
       options.block.icon,
-      /* @__PURE__ */ React105.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.block.text)
+      /* @__PURE__ */ React106.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.block.text)
     ) : null,
-    options.remove.show ? /* @__PURE__ */ React105.createElement(
+    options.remove.show ? /* @__PURE__ */ React106.createElement(
       Dropdown.Item,
       {
         "data-testid": "remove_peer_btn",
@@ -23803,14 +23913,14 @@ var ChatActions = ({
         css: { color: options.remove.color }
       },
       options.remove.icon,
-      /* @__PURE__ */ React105.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.remove.text)
+      /* @__PURE__ */ React106.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 React106 from "react";
+import React107 from "react";
 import { useMedia as useMedia12 } from "react-use";
 
 // src/Prebuilt/images/empty-chat.svg
@@ -23824,8 +23934,8 @@ var EmptyChat = () => {
   const isMobile = useMedia12(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;
   if (isMobile && ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay))
-    return /* @__PURE__ */ React106.createElement(React106.Fragment, null);
-  return /* @__PURE__ */ React106.createElement(
+    return /* @__PURE__ */ React107.createElement(React107.Fragment, null);
+  return /* @__PURE__ */ React107.createElement(
     Flex,
     {
       css: {
@@ -23837,7 +23947,7 @@ var EmptyChat = () => {
       align: "center",
       justify: "center"
     },
-    /* @__PURE__ */ React106.createElement(Box, null, /* @__PURE__ */ React106.createElement(Box, { css: { m: "0 auto", mt: "$4", "@media (max-height: 575px)": { display: "none" } } }, /* @__PURE__ */ React106.createElement("img", { src: empty_chat_default, style: { display: "inline" }, alt: "Empty Chat", height: 132, width: 185 })), /* @__PURE__ */ React106.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, canSendMessages ? "Start a conversation" : "No messages yet"), canSendMessages ? /* @__PURE__ */ React106.createElement(
+    /* @__PURE__ */ React107.createElement(Box, null, /* @__PURE__ */ React107.createElement(Box, { css: { m: "0 auto", mt: "$4", "@media (max-height: 575px)": { display: "none" } } }, /* @__PURE__ */ React107.createElement("img", { src: empty_chat_default, style: { display: "inline" }, alt: "Empty Chat", height: 132, width: 185 })), /* @__PURE__ */ React107.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, canSendMessages ? "Start a conversation" : "No messages yet"), canSendMessages ? /* @__PURE__ */ React107.createElement(
       Text,
       {
         variant: "sm",
@@ -23850,19 +23960,19 @@ var EmptyChat = () => {
 
 // src/Prebuilt/components/hooks/usePinnedBy.tsx
 init_define_process_env();
-import { useEffect as useEffect24, useState as useState43 } from "react";
-import { selectSessionStore as selectSessionStore4, useHMSStore as useHMSStore50 } from "@100mslive/react-sdk";
+import { useEffect as useEffect25, useState as useState44 } from "react";
+import { selectSessionStore as selectSessionStore4, useHMSStore as useHMSStore51 } from "@100mslive/react-sdk";
 var usePinnedBy = (messageId) => {
-  const pinnedMessages = useHMSStore50(selectSessionStore4("pinnedMessages" /* PINNED_MESSAGES */));
-  const [pinnedBy, setPinnedBy] = useState43("");
-  useEffect24(() => {
-    let match8 = "";
+  const pinnedMessages = useHMSStore51(selectSessionStore4("pinnedMessages" /* PINNED_MESSAGES */));
+  const [pinnedBy, setPinnedBy] = useState44("");
+  useEffect25(() => {
+    let match10 = "";
     pinnedMessages == null ? void 0 : pinnedMessages.forEach((pinnedMessage) => {
       if (pinnedMessage.id === messageId) {
-        match8 = pinnedMessage.pinnedBy;
+        match10 = pinnedMessage.pinnedBy;
       }
     });
-    setPinnedBy(match8);
+    setPinnedBy(match10);
   }, [messageId, pinnedMessages]);
   return pinnedBy;
 };
@@ -23898,7 +24008,7 @@ var getMessageBackgroundColor = (messageType, selectedPeerID, selectedRole, isOv
   return "";
 };
 var MessageTypeContainer = ({ left, right }) => {
-  return /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(
     Flex,
     {
       align: "center",
@@ -23908,7 +24018,7 @@ var MessageTypeContainer = ({ left, right }) => {
         gap: "$space$2"
       }
     },
-    left && /* @__PURE__ */ React107.createElement(
+    left && /* @__PURE__ */ React108.createElement(
       SenderName,
       {
         variant: "xs",
@@ -23917,7 +24027,7 @@ var MessageTypeContainer = ({ left, right }) => {
       },
       left
     ),
-    right && /* @__PURE__ */ React107.createElement(
+    right && /* @__PURE__ */ React108.createElement(
       SenderName,
       {
         as: "span",
@@ -23936,13 +24046,13 @@ var MessageType = ({
   hasCurrentUserSent,
   receiver
 }) => {
-  const peerName = useHMSStore51(selectPeerNameByID3(receiver));
-  const localPeerRoleName = useHMSStore51(selectLocalPeerRoleName3);
+  const peerName = useHMSStore52(selectPeerNameByID3(receiver));
+  const localPeerRoleName = useHMSStore52(selectLocalPeerRoleName3);
   if (receiver) {
-    return /* @__PURE__ */ React107.createElement(MessageTypeContainer, { left: hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ""}` : "to You", right: "(DM)" });
+    return /* @__PURE__ */ React108.createElement(MessageTypeContainer, { left: hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ""}` : "to You", right: "(DM)" });
   }
   if (roles && roles.length) {
-    return /* @__PURE__ */ React107.createElement(MessageTypeContainer, { left: `to ${hasCurrentUserSent ? roles[0] : localPeerRoleName}`, right: "(Group)" });
+    return /* @__PURE__ */ React108.createElement(MessageTypeContainer, { left: `to ${hasCurrentUserSent ? roles[0] : localPeerRoleName}`, right: "(Group)" });
   }
   return null;
 };
@@ -23956,10 +24066,10 @@ var Link2 = styled("a", {
 });
 var AnnotisedMessage = ({ message, length }) => {
   if (!message) {
-    return /* @__PURE__ */ React107.createElement(Fragment11, null);
+    return /* @__PURE__ */ React108.createElement(Fragment10, null);
   }
-  return /* @__PURE__ */ React107.createElement(Fragment11, null, message.trim().split(/(\s)/).map(
-    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React107.createElement(Link2, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part.slice(0, length)) : part.slice(0, length)
+  return /* @__PURE__ */ React108.createElement(Fragment10, null, message.trim().split(/(\s)/).map(
+    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React108.createElement(Link2, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part.slice(0, length)) : part.slice(0, length)
   ));
 };
 var getMessageType = ({ roles, receiver }) => {
@@ -23977,7 +24087,7 @@ var SenderName = styled(Text, {
   color: "$on_surface_high",
   fontWeight: "$semiBold"
 });
-var ChatMessage = React107.memo(
+var ChatMessage = React108.memo(
   ({ index, style = {}, message }) => {
     var _a8, _b7, _c;
     const { elements } = useRoomLayoutConferencingScreen();
@@ -23985,14 +24095,14 @@ var ChatMessage = React107.memo(
     const isMobile = useMedia13(config.media.md);
     const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
     const isOverlay = ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) && isMobile;
-    const localPeerId = useHMSStore51(selectLocalPeerID10);
+    const localPeerId = useHMSStore52(selectLocalPeerID10);
     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] = useState44(false);
+    const [openSheet, setOpenSheetBare] = useState45(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(() => {
@@ -24004,7 +24114,7 @@ var ChatMessage = React107.memo(
       e == null ? void 0 : e.stopPropagation();
       setOpenSheetBare(value);
     };
-    return /* @__PURE__ */ React107.createElement(
+    return /* @__PURE__ */ React108.createElement(
       Box,
       {
         css: {
@@ -24016,7 +24126,7 @@ var ChatMessage = React107.memo(
         },
         style
       },
-      /* @__PURE__ */ React107.createElement(
+      /* @__PURE__ */ React108.createElement(
         Flex,
         {
           ref: rowRef,
@@ -24043,8 +24153,8 @@ var ChatMessage = React107.memo(
             }
           }
         },
-        /* @__PURE__ */ React107.createElement(PinnedBy, { messageId: message.id, index, rowRef }),
-        /* @__PURE__ */ React107.createElement(
+        /* @__PURE__ */ React108.createElement(PinnedBy, { messageId: message.id, index, rowRef }),
+        /* @__PURE__ */ React108.createElement(
           Text,
           {
             css: {
@@ -24057,7 +24167,7 @@ var ChatMessage = React107.memo(
             },
             as: "div"
           },
-          /* @__PURE__ */ React107.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React107.createElement(
+          /* @__PURE__ */ React108.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React108.createElement(
             SenderName,
             {
               as: "span",
@@ -24065,7 +24175,7 @@ var ChatMessage = React107.memo(
               css: { color: isOverlay ? "#FFF" : "$on_surface_high", fontWeight: "$semiBold" }
             },
             message.senderName || "Anonymous"
-          ) : /* @__PURE__ */ React107.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React107.createElement(
+          ) : /* @__PURE__ */ React108.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React108.createElement(
             SenderName,
             {
               as: "span",
@@ -24073,7 +24183,7 @@ var ChatMessage = React107.memo(
               css: { color: isOverlay ? "#FFF" : "$on_surface_high", fontWeight: "$semiBold" }
             },
             message.sender === localPeerId ? `${message.senderName} (You)` : message.senderName
-          )), /* @__PURE__ */ React107.createElement(
+          )), /* @__PURE__ */ React108.createElement(
             MessageType,
             {
               hasCurrentUserSent: message.sender === localPeerId,
@@ -24081,7 +24191,7 @@ var ChatMessage = React107.memo(
               roles: message.recipientRoles
             }
           )),
-          !isOverlay ? /* @__PURE__ */ React107.createElement(
+          !isOverlay ? /* @__PURE__ */ React108.createElement(
             Text,
             {
               as: "span",
@@ -24098,7 +24208,7 @@ var ChatMessage = React107.memo(
             },
             formatTime2(message.time)
           ) : null,
-          /* @__PURE__ */ React107.createElement(
+          /* @__PURE__ */ React108.createElement(
             ChatActions,
             {
               showPinAction,
@@ -24121,7 +24231,7 @@ var ChatMessage = React107.memo(
             }
           )
         ),
-        /* @__PURE__ */ React107.createElement(
+        /* @__PURE__ */ React108.createElement(
           Text,
           {
             variant: "sm",
@@ -24137,26 +24247,26 @@ var ChatMessage = React107.memo(
               setOpenSheet(true, e);
             }
           },
-          /* @__PURE__ */ React107.createElement(AnnotisedMessage, { message: message.message })
+          /* @__PURE__ */ React108.createElement(AnnotisedMessage, { message: message.message })
         )
       )
     );
   }
 );
-var MessageWrapper = React107.memo(
+var MessageWrapper = React108.memo(
   ({ index, style, data: data3 }) => {
-    return /* @__PURE__ */ React107.createElement(ChatMessage, { style, index, key: data3[index].id, message: data3[index] });
+    return /* @__PURE__ */ React108.createElement(ChatMessage, { style, index, key: data3[index].id, message: data3[index] });
   }
 );
-var VirtualizedChatMessages = React107.forwardRef(({ messages, scrollToBottom }, listRef) => {
+var VirtualizedChatMessages = React108.forwardRef(({ messages, scrollToBottom }, listRef) => {
   const hmsActions = useHMSActions34();
   const itemKey2 = useCallback25((index, data3) => {
     return data3[index].id;
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     requestAnimationFrame(() => scrollToBottom(1));
   }, [scrollToBottom]);
-  return /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(
     Box,
     {
       css: {
@@ -24164,14 +24274,14 @@ var VirtualizedChatMessages = React107.forwardRef(({ messages, scrollToBottom },
         h: "100%"
       }
     },
-    /* @__PURE__ */ React107.createElement(
+    /* @__PURE__ */ React108.createElement(
       AutoSizer,
       {
         style: {
           width: "90%"
         }
       },
-      ({ height, width }) => /* @__PURE__ */ React107.createElement(
+      ({ height, width }) => /* @__PURE__ */ React108.createElement(
         VariableSizeList,
         {
           ref: (node) => {
@@ -24202,16 +24312,16 @@ var VirtualizedChatMessages = React107.forwardRef(({ messages, scrollToBottom },
     )
   );
 });
-var ChatBody = React107.forwardRef(
+var ChatBody = React108.forwardRef(
   ({ scrollToBottom }, listRef) => {
-    const messages = useHMSStore51(selectHMSMessages);
-    const blacklistedMessageIDs = useHMSStore51(selectSessionStore5("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
+    const messages = useHMSStore52(selectHMSMessages);
+    const blacklistedMessageIDs = useHMSStore52(selectSessionStore5("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
     const filteredMessages = useMemo8(() => {
       const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
       return (messages == null ? void 0 : messages.filter((message) => message.type === "chat" && !blacklistedMessageIDSet.has(message.id))) || [];
     }, [blacklistedMessageIDs, messages]);
-    const vanillaStore = useHMSVanillaStore10();
-    useEffect25(() => {
+    const vanillaStore = useHMSVanillaStore9();
+    useEffect26(() => {
       const unsubscribe = vanillaStore.subscribe(() => {
         if (!listRef.current) {
           return;
@@ -24223,7 +24333,7 @@ var ChatBody = React107.forwardRef(
       }, selectUnreadHMSMessagesCount2);
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
-    return filteredMessages.length === 0 ? /* @__PURE__ */ React107.createElement(EmptyChat, null) : /* @__PURE__ */ React107.createElement(VirtualizedChatMessages, { messages: filteredMessages, ref: listRef, scrollToBottom });
+    return filteredMessages.length === 0 ? /* @__PURE__ */ React108.createElement(EmptyChat, null) : /* @__PURE__ */ React108.createElement(VirtualizedChatMessages, { messages: filteredMessages, ref: listRef, scrollToBottom });
   }
 );
 var PinnedBy = ({
@@ -24232,7 +24342,7 @@ var PinnedBy = ({
   rowRef
 }) => {
   const pinnedBy = usePinnedBy(messageId);
-  const localPeerName = useHMSStore51(selectLocalPeerName3);
+  const localPeerName = useHMSStore52(selectLocalPeerName3);
   useLayoutEffect(() => {
     if (rowRef == null ? void 0 : rowRef.current) {
       if (pinnedBy) {
@@ -24246,38 +24356,38 @@ var PinnedBy = ({
   if (!pinnedBy) {
     return null;
   }
-  return /* @__PURE__ */ React107.createElement(Flex, { align: "center", css: { gap: "$2", mb: "$2", color: "$on_surface_low" } }, /* @__PURE__ */ React107.createElement(SolidPinIcon, { height: 12, width: 12 }), /* @__PURE__ */ React107.createElement(Text, { variant: "xs", css: { color: "inherit" } }, "Pinned by ", localPeerName === pinnedBy ? "you" : pinnedBy));
+  return /* @__PURE__ */ React108.createElement(Flex, { align: "center", css: { gap: "$2", mb: "$2", color: "$on_surface_low" } }, /* @__PURE__ */ React108.createElement(SolidPinIcon, { height: 12, width: 12 }), /* @__PURE__ */ React108.createElement(Text, { variant: "xs", css: { color: "inherit" } }, "Pinned by ", localPeerName === pinnedBy ? "you" : pinnedBy));
 };
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
 init_define_process_env();
-import React110, { useCallback as useCallback27, useEffect as useEffect27, useRef as useRef20, useState as useState47 } from "react";
+import React111, { useCallback as useCallback27, useEffect as useEffect28, useRef as useRef20, useState as useState48 } from "react";
 import { useMedia as useMedia16 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { selectLocalPeer as selectLocalPeer3, useAVToggle as useAVToggle5, useHMSActions as useHMSActions36, useHMSStore as useHMSStore54 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useAVToggle as useAVToggle5, useHMSActions as useHMSActions36, useHMSStore as useHMSStore55 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, PauseCircleIcon as PauseCircleIcon2, SendIcon, VerticalMenuIcon as VerticalMenuIcon7 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
 init_define_process_env();
-import React109, { useState as useState46 } from "react";
+import React110, { useState as useState47 } from "react";
 import { useMedia as useMedia15 } from "react-use";
 import { ChevronDownIcon as ChevronDownIcon6, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon17, GroupIcon, PersonIcon as PersonIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelector.tsx
 init_define_process_env();
-import React108, { useMemo as useMemo9, useState as useState45 } from "react";
+import React109, { useMemo as useMemo9, useState as useState46 } from "react";
 import { useMedia as useMedia14 } from "react-use";
 import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectRemotePeers as selectRemotePeers2,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount3,
-  useHMSStore as useHMSStore52
+  useHMSStore as useHMSStore53
 } from "@100mslive/react-sdk";
 import { CheckIcon as CheckIcon7, PeopleIcon as PeopleIcon3 } from "@100mslive/react-icons";
 var ChatDotIcon = () => {
-  return /* @__PURE__ */ React108.createElement(Box, { css: { size: "$6", bg: "$primary_default", mx: "$2", r: "$round" } });
+  return /* @__PURE__ */ React109.createElement(Box, { css: { size: "$6", bg: "$primary_default", mx: "$2", r: "$round" } });
 };
 var SelectorItem = ({
   value,
@@ -24289,16 +24399,16 @@ var SelectorItem = ({
   const isMobile = useMedia14(config.media.md);
   const Root28 = !isMobile ? Dropdown.Item : (_a8) => {
     var _b7 = _a8, { children } = _b7, rest = __objRest(_b7, ["children"]);
-    return /* @__PURE__ */ React108.createElement(Flex, __spreadProps(__spreadValues({}, rest), { css: __spreadValues({ p: "$6 $8" }, rest.css) }), children);
+    return /* @__PURE__ */ React109.createElement(Flex, __spreadProps(__spreadValues({}, rest), { css: __spreadValues({ p: "$6 $8" }, rest.css) }), children);
   };
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     Root28,
     {
       "data-testid": "chat_members",
       css: { align: "center", px: "$10", py: "$4", bg: "$surface_default" },
       onClick
     },
-    /* @__PURE__ */ React108.createElement(
+    /* @__PURE__ */ React109.createElement(
       Text,
       {
         variant: "sm",
@@ -24307,12 +24417,12 @@ var SelectorItem = ({
       icon,
       value
     ),
-    /* @__PURE__ */ React108.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React108.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React108.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React108.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React108.createElement(CheckIcon7, { width: 16, height: 16 }))
+    /* @__PURE__ */ React109.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React109.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React109.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React109.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React109.createElement(CheckIcon7, { width: 16, height: 16 }))
   );
 };
-var SelectorHeader = React108.memo(
+var SelectorHeader = React109.memo(
   ({ isHorizontalDivider = true, children }) => {
-    return /* @__PURE__ */ React108.createElement(Box, { css: { flexShrink: 0 } }, isHorizontalDivider && /* @__PURE__ */ React108.createElement(HorizontalDivider, { space: 4 }), /* @__PURE__ */ React108.createElement(
+    return /* @__PURE__ */ React109.createElement(Box, { css: { flexShrink: 0 } }, isHorizontalDivider && /* @__PURE__ */ React109.createElement(HorizontalDivider, { space: 4 }), /* @__PURE__ */ React109.createElement(
       Text,
       {
         variant: "overline",
@@ -24322,15 +24432,15 @@ var SelectorHeader = React108.memo(
     ));
   }
 );
-var Everyone = React108.memo(({ active }) => {
-  const unreadCount = useHMSStore52(selectUnreadHMSMessagesCount3);
+var Everyone = React109.memo(({ active }) => {
+  const unreadCount = useHMSStore53(selectUnreadHMSMessagesCount3);
   const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     SelectorItem,
     {
       value: "Everyone",
-      icon: /* @__PURE__ */ React108.createElement(PeopleIcon3, null),
+      icon: /* @__PURE__ */ React109.createElement(PeopleIcon3, null),
       active,
       unreadCount,
       onClick: () => {
@@ -24340,11 +24450,11 @@ var Everyone = React108.memo(({ active }) => {
     }
   );
 });
-var RoleItem = React108.memo(({ role, active }) => {
-  const unreadCount = useHMSStore52(selectMessagesUnreadCountByRole(role));
+var RoleItem = React109.memo(({ role, active }) => {
+  const unreadCount = useHMSStore53(selectMessagesUnreadCountByRole(role));
   const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     SelectorItem,
     {
       value: role,
@@ -24358,10 +24468,10 @@ var RoleItem = React108.memo(({ role, active }) => {
   );
 });
 var PeerItem = ({ peerId, name, active }) => {
-  const unreadCount = useHMSStore52(selectMessagesUnreadCountByPeerID(peerId));
+  const unreadCount = useHMSStore53(selectMessagesUnreadCountByPeerID(peerId));
   const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     SelectorItem,
     {
       value: name,
@@ -24392,36 +24502,36 @@ var VirtualizedSelectItemList = ({
   const listItems = useMemo9(() => {
     let selectItems = [];
     if (isPublicChatEnabled && !searchValue) {
-      selectItems = [/* @__PURE__ */ React108.createElement(Everyone, { active: !selectedRole && !selectedPeerId })];
+      selectItems = [/* @__PURE__ */ React109.createElement(Everyone, { active: !selectedRole && !selectedPeerId })];
     }
     if (roles.length > 0 && !searchValue) {
-      selectItems.push(/* @__PURE__ */ React108.createElement(SelectorHeader, { isHorizontalDivider: isPublicChatEnabled }, "Roles"));
+      selectItems.push(/* @__PURE__ */ React109.createElement(SelectorHeader, { isHorizontalDivider: isPublicChatEnabled }, "Roles"));
       roles.forEach(
-        (userRole) => selectItems.push(/* @__PURE__ */ React108.createElement(RoleItem, { key: userRole, active: selectedRole === userRole, role: userRole }))
+        (userRole) => selectItems.push(/* @__PURE__ */ React109.createElement(RoleItem, { key: userRole, active: selectedRole === userRole, role: userRole }))
       );
     }
     if (filteredPeers.length > 0) {
       selectItems.push(
-        /* @__PURE__ */ React108.createElement(SelectorHeader, { isHorizontalDivider: isPublicChatEnabled || roles.length > 0 }, "Participants")
+        /* @__PURE__ */ React109.createElement(SelectorHeader, { isHorizontalDivider: isPublicChatEnabled || roles.length > 0 }, "Participants")
       );
     }
     filteredPeers.forEach(
       (peer) => selectItems.push(
-        /* @__PURE__ */ React108.createElement(PeerItem, { key: peer.id, name: peer.name, peerId: peer.id, active: peer.id === selectedPeerId })
+        /* @__PURE__ */ React109.createElement(PeerItem, { key: peer.id, name: peer.name, peerId: peer.id, active: peer.id === selectedPeerId })
       )
     );
     return selectItems;
   }, [isPublicChatEnabled, searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
-  return /* @__PURE__ */ React108.createElement(Dropdown.Group, { css: { overflowY: "auto", maxHeight: "$64", bg: "$surface_default" } }, listItems.map((item, index) => /* @__PURE__ */ React108.createElement(Box, { key: index }, item)));
+  return /* @__PURE__ */ React109.createElement(Dropdown.Group, { css: { overflowY: "auto", maxHeight: "$64", bg: "$surface_default" } }, listItems.map((item, index) => /* @__PURE__ */ React109.createElement(Box, { key: index }, item)));
 };
 var ChatSelector = ({ role, peerId }) => {
   var _a8, _b7;
   const { elements } = useRoomLayoutConferencingScreen();
-  const peers = useHMSStore52(selectRemotePeers2);
-  const [search, setSearch] = useState45("");
+  const peers = useHMSStore53(selectRemotePeers2);
+  const [search, setSearch] = useState46("");
   const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
   const isPublicChatEnabled = !!((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.public_chat_enabled);
-  return /* @__PURE__ */ React108.createElement(React108.Fragment, null, peers.length > 0 && isPrivateChatEnabled && /* @__PURE__ */ React108.createElement(Box, { css: { px: "$4" } }, /* @__PURE__ */ React108.createElement(ParticipantSearch, { onSearch: setSearch, placeholder: "Search for participants" })), /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, peers.length > 0 && isPrivateChatEnabled && /* @__PURE__ */ React109.createElement(Box, { css: { px: "$4" } }, /* @__PURE__ */ React109.createElement(ParticipantSearch, { onSearch: setSearch, placeholder: "Search for participants" })), /* @__PURE__ */ React109.createElement(
     VirtualizedSelectItemList,
     {
       selectedRole: role,
@@ -24436,7 +24546,7 @@ var ChatSelector = ({ role, peerId }) => {
 // src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
 var ChatSelectorContainer = () => {
   var _a8, _b7;
-  const [open, setOpen] = useState46(false);
+  const [open, setOpen] = useState47(false);
   const isMobile = useMedia15(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
@@ -24449,7 +24559,7 @@ var ChatSelectorContainer = () => {
   if (!(isPrivateChatEnabled || isPublicChatEnabled || roles.length > 0) && !isPrivateChatEnabled && !selection) {
     return null;
   }
-  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(Flex, { align: "center", css: { mb: "$8", flex: "1 1 0", pl: "$2" } }, /* @__PURE__ */ React109.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, selection ? "To" : "Choose Participant"), isMobile ? /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(Flex, { align: "center", css: { mb: "$8", flex: "1 1 0", pl: "$2" } }, /* @__PURE__ */ React110.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, selection ? "To" : "Choose Participant"), isMobile ? /* @__PURE__ */ React110.createElement(
     Flex,
     {
       align: "center",
@@ -24460,7 +24570,7 @@ var ChatSelectorContainer = () => {
         e.stopPropagation();
       }
     },
-    /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React110.createElement(
       Text,
       {
         variant: "caption",
@@ -24473,11 +24583,11 @@ var ChatSelectorContainer = () => {
           textTransform: selection !== selectedPeer.name ? "capitalize" : void 0
         }
       },
-      selection === CHAT_SELECTOR.EVERYONE ? /* @__PURE__ */ React109.createElement(GroupIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React109.createElement(PersonIcon2, { width: 16, height: 16 }),
+      selection === CHAT_SELECTOR.EVERYONE ? /* @__PURE__ */ React110.createElement(GroupIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React110.createElement(PersonIcon2, { width: 16, height: 16 }),
       selection || "Search"
     ),
-    selection && (open ? /* @__PURE__ */ React109.createElement(ChevronUpIcon5, { width: 16, height: 16 }) : /* @__PURE__ */ React109.createElement(ChevronDownIcon6, { width: 16, height: 16 }))
-  ) : /* @__PURE__ */ React109.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React109.createElement(
+    selection && (open ? /* @__PURE__ */ React110.createElement(ChevronUpIcon5, { width: 16, height: 16 }) : /* @__PURE__ */ React110.createElement(ChevronDownIcon6, { width: 16, height: 16 }))
+  ) : /* @__PURE__ */ React110.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React110.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -24490,7 +24600,7 @@ var ChatSelectorContainer = () => {
       },
       tabIndex: 0
     },
-    /* @__PURE__ */ React109.createElement(Flex, { align: "center", css: { c: "$on_surface_medium" }, gap: "1" }, /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React110.createElement(Flex, { align: "center", css: { c: "$on_surface_medium" }, gap: "1" }, /* @__PURE__ */ React110.createElement(
       Text,
       {
         variant: "caption",
@@ -24503,9 +24613,9 @@ var ChatSelectorContainer = () => {
           textTransform: selection !== selectedPeer.name ? "capitalize" : void 0
         }
       },
-      selection === CHAT_SELECTOR.EVERYONE ? /* @__PURE__ */ React109.createElement(GroupIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React109.createElement(PersonIcon2, { width: 16, height: 16 }),
+      selection === CHAT_SELECTOR.EVERYONE ? /* @__PURE__ */ React110.createElement(GroupIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React110.createElement(PersonIcon2, { width: 16, height: 16 }),
       selection || "Search"
-    ), selection && /* @__PURE__ */ React109.createElement(
+    ), selection && /* @__PURE__ */ React110.createElement(
       ChevronDownIcon6,
       {
         style: { transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 150ms ease" },
@@ -24513,7 +24623,7 @@ var ChatSelectorContainer = () => {
         height: 12
       }
     ))
-  ), /* @__PURE__ */ React109.createElement(
+  ), /* @__PURE__ */ React110.createElement(
     Dropdown.Content,
     {
       css: {
@@ -24525,8 +24635,8 @@ var ChatSelectorContainer = () => {
       align: "start",
       sideOffset: 8
     },
-    /* @__PURE__ */ React109.createElement(ChatSelector, { role: selectedRole, peerId: selectedPeer.id })
-  ))), isMobile ? /* @__PURE__ */ React109.createElement(Sheet.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React109.createElement(Sheet.Content, { css: { pt: "$8" } }, /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React110.createElement(ChatSelector, { role: selectedRole, peerId: selectedPeer.id })
+  ))), isMobile ? /* @__PURE__ */ React110.createElement(Sheet.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React110.createElement(Sheet.Content, { css: { pt: "$8" } }, /* @__PURE__ */ React110.createElement(
     Sheet.Title,
     {
       css: {
@@ -24539,26 +24649,26 @@ var ChatSelectorContainer = () => {
         borderBottom: "1px solid $border_bright"
       }
     },
-    /* @__PURE__ */ React109.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, "Chat with"),
-    /* @__PURE__ */ React109.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React109.createElement(CrossIcon17, null))
-  ), /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React110.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, "Chat with"),
+    /* @__PURE__ */ React110.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React110.createElement(CrossIcon17, null))
+  ), /* @__PURE__ */ React110.createElement(
     Box,
     {
       onClick: () => {
         setOpen(false);
       }
     },
-    /* @__PURE__ */ React109.createElement(ChatSelector, { role: selectedRole, peerId: selectedPeer.id })
+    /* @__PURE__ */ React110.createElement(ChatSelector, { role: selectedRole, peerId: selectedPeer.id })
   ))) : null);
 };
 
 // src/Prebuilt/components/AppData/useChatState.js
 init_define_process_env();
 import { useCallback as useCallback26 } from "react";
-import { selectAppData as selectAppData5, useHMSActions as useHMSActions35, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData5, useHMSActions as useHMSActions35, useHMSStore as useHMSStore54 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
   const hmsActions = useHMSActions35();
-  let chatDraftMessage = useHMSStore53(selectAppData5(APP_DATA.chatDraft));
+  let chatDraftMessage = useHMSStore54(selectAppData5(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
@@ -24573,10 +24683,10 @@ var useChatDraftMessage = () => {
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
 init_define_process_env();
-import { useEffect as useEffect26, useRef as useRef19 } from "react";
+import { useEffect as useEffect27, useRef as useRef19 } from "react";
 var useEmojiPickerStyles = (showing) => {
   const ref = useRef19(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (showing) {
       setTimeout(() => {
         var _a8, _b7;
@@ -24624,9 +24734,9 @@ var TextArea2 = styled("textarea", {
   }
 });
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState47(false);
+  const [showEmoji, setShowEmoji] = useState48(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React110.createElement(Popover2.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React110.createElement(Popover2.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React110.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React110.createElement(EmojiIcon3, null))), /* @__PURE__ */ React110.createElement(Popover2.Portal, null, /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React111.createElement(Popover2.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React111.createElement(Popover2.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React111.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React111.createElement(EmojiIcon3, null))), /* @__PURE__ */ React111.createElement(Popover2.Portal, null, /* @__PURE__ */ React111.createElement(
     Popover2.Content,
     {
       alignOffset: -40,
@@ -24636,7 +24746,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React111.createElement(
       Box,
       {
         css: {
@@ -24645,7 +24755,7 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ React110.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ React111.createElement(Picker, { onEmojiSelect: onSelect, data: data2, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
@@ -24657,7 +24767,7 @@ var ChatFooter = ({ onSend, children }) => {
   const isMobile = useMedia16(config.media.md);
   const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.message_placeholder) || "Send a message";
-  const localPeer = useHMSStore54(selectLocalPeer3);
+  const localPeer = useHMSStore55(selectLocalPeer3);
   const isOverlayChat = (_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay;
   const canDisableChat = !!((_d = (_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.real_time_controls) == null ? void 0 : _d.can_disable_chat);
   const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
@@ -24669,7 +24779,7 @@ var ChatFooter = ({ onSend, children }) => {
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  useEffect27(() => {
+  useEffect28(() => {
     var _a9, _b8;
     if (!selectedPeer.id && !selectedRole && !["Everyone", ""].includes(defaultSelection)) {
       setRoleSelector(defaultSelection);
@@ -24704,13 +24814,13 @@ var ChatFooter = ({ onSend, children }) => {
       });
     }
   }), [selectedRole, selectedPeer, hmsActions, onSend]);
-  useEffect27(() => {
+  useEffect28(() => {
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
     }
   }, [draftMessage]);
-  useEffect27(() => {
+  useEffect28(() => {
     const messageElement = inputRef.current;
     return () => {
       setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
@@ -24719,7 +24829,7 @@ var ChatFooter = ({ onSend, children }) => {
   if (isLocalPeerBlacklisted) {
     return null;
   }
-  return /* @__PURE__ */ React110.createElement(Box, null, /* @__PURE__ */ React110.createElement(Flex, null, /* @__PURE__ */ React110.createElement(ChatSelectorContainer, null), canDisableChat && isMobile && isOverlayChat ? /* @__PURE__ */ React110.createElement(Flex, { align: "center", justify: "end", css: { mb: "$4" } }, /* @__PURE__ */ React110.createElement(Popover2.Root, null, /* @__PURE__ */ React110.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React110.createElement(IconButton, { css: { border: "1px solid $border_bright" } }, /* @__PURE__ */ React110.createElement(VerticalMenuIcon7, { height: "16", width: "16" }))), /* @__PURE__ */ React110.createElement(Popover2.Portal, null, /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React111.createElement(Box, { css: { position: "relative" } }, /* @__PURE__ */ React111.createElement(Flex, null, /* @__PURE__ */ React111.createElement(ChatSelectorContainer, null), canDisableChat && isMobile && isOverlayChat ? /* @__PURE__ */ React111.createElement(Flex, { align: "center", justify: "end", css: { mb: "$4" } }, /* @__PURE__ */ React111.createElement(Popover2.Root, null, /* @__PURE__ */ React111.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React111.createElement(IconButton, { css: { border: "1px solid $border_bright" } }, /* @__PURE__ */ React111.createElement(VerticalMenuIcon7, { height: "16", width: "16" }))), /* @__PURE__ */ React111.createElement(Popover2.Portal, null, /* @__PURE__ */ React111.createElement(
     Popover2.Content,
     {
       align: "end",
@@ -24747,18 +24857,20 @@ var ChatFooter = ({ onSend, children }) => {
         "&:hover": { backgroundColor: "$surface_dim" }
       }
     },
-    /* @__PURE__ */ React110.createElement(PauseCircleIcon2, null),
-    /* @__PURE__ */ React110.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Pause Chat")
-  )))) : null), selection && /* @__PURE__ */ React110.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React111.createElement(PauseCircleIcon2, null),
+    /* @__PURE__ */ React111.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Pause Chat")
+  )))) : null), selection && /* @__PURE__ */ React111.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React111.createElement(
     Flex,
     {
       align: "center",
       css: __spreadValues({
         bg: isOverlayChat && isMobile ? "$surface_dim" : "$surface_default",
+        minHeight: "$16",
         maxHeight: "$24",
         position: "relative",
+        py: "$6",
         pl: "$8",
-        flexGrow: "1",
+        flexGrow: 1,
         r: "$1",
         "@md": {
           minHeight: "unset",
@@ -24768,7 +24880,7 @@ var ChatFooter = ({ onSend, children }) => {
       }, isLandscapeHLSStream ? { minHeight: "$14", py: 0 } : {})
     },
     children,
-    /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React111.createElement(
       TextArea2,
       {
         css: {
@@ -24797,7 +24909,7 @@ var ChatFooter = ({ onSend, children }) => {
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    !isMobile && !isLandscapeHLSStream ? /* @__PURE__ */ React110.createElement(
+    !isMobile && !isLandscapeHLSStream ? /* @__PURE__ */ React111.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -24807,7 +24919,7 @@ var ChatFooter = ({ onSend, children }) => {
         }
       }
     ) : null,
-    /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React111.createElement(
       IconButton,
       {
         className: "send-msg",
@@ -24820,9 +24932,9 @@ var ChatFooter = ({ onSend, children }) => {
         },
         "data-testid": "send_msg_btn"
       },
-      /* @__PURE__ */ React110.createElement(SendIcon, null)
+      /* @__PURE__ */ React111.createElement(SendIcon, null)
     )
-  ), (isMwebHLSStream || isLandscapeHLSStream) && /* @__PURE__ */ React110.createElement(
+  ), (isMwebHLSStream || isLandscapeHLSStream) && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(
     Flex,
     {
       css: {
@@ -24830,22 +24942,22 @@ var ChatFooter = ({ onSend, children }) => {
       },
       gap: "1"
     },
-    noAVPermissions ? /* @__PURE__ */ React110.createElement(RaiseHand, null) : null,
-    /* @__PURE__ */ React110.createElement(MoreSettings, { elements, screenType })
-  )));
+    noAVPermissions ? /* @__PURE__ */ React111.createElement(RaiseHand, { css: { bg: "$surface_default" } }) : null,
+    /* @__PURE__ */ React111.createElement(MoreSettings, { elements, screenType })
+  ))));
 };
 
 // src/Prebuilt/components/Chat/ChatStates.tsx
 init_define_process_env();
-import React111, { useCallback as useCallback28 } from "react";
-import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions37, useHMSStore as useHMSStore55 } from "@100mslive/react-sdk";
+import React112, { useCallback as useCallback28 } from "react";
+import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions37, useHMSStore as useHMSStore56 } from "@100mslive/react-sdk";
 var ChatPaused = () => {
   var _a8, _b7;
   const hmsActions = useHMSActions37();
   const { elements } = useRoomLayoutConferencingScreen();
   const can_disable_chat = !!((_b7 = (_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) == null ? void 0 : _b7.can_disable_chat);
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore55(selectSessionStore6("chatState" /* CHAT_STATE */)) || {};
-  const localPeer = useHMSStore55(selectLocalPeer4);
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore56(selectSessionStore6("chatState" /* CHAT_STATE */)) || {};
+  const localPeer = useHMSStore56(selectLocalPeer4);
   const unPauseChat = useCallback28(
     () => __async(void 0, null, function* () {
       return yield hmsActions.sessionStore.set("chatState" /* CHAT_STATE */, {
@@ -24856,14 +24968,14 @@ var ChatPaused = () => {
     }),
     [hmsActions, localPeer]
   );
-  return isChatEnabled ? null : /* @__PURE__ */ React111.createElement(
+  return isChatEnabled ? null : /* @__PURE__ */ React112.createElement(
     Flex,
     {
       align: "center",
       justify: "between",
       css: { borderRadius: "$1", bg: "$surface_default", p: "$4 $4 $4 $8", w: "100%" }
     },
-    /* @__PURE__ */ React111.createElement(Box, null, /* @__PURE__ */ React111.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Chat paused"), /* @__PURE__ */ React111.createElement(
+    /* @__PURE__ */ React112.createElement(Box, null, /* @__PURE__ */ React112.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Chat paused"), /* @__PURE__ */ React112.createElement(
       Text,
       {
         variant: "xs",
@@ -24872,7 +24984,7 @@ var ChatPaused = () => {
       "Chat has been paused by ",
       (chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.peerId) === (localPeer == null ? void 0 : localPeer.id) ? "you" : chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.userName
     )),
-    can_disable_chat ? /* @__PURE__ */ React111.createElement(Button, { css: { fontWeight: "$semiBold", fontSize: "$sm", borderRadius: "$2" }, onClick: unPauseChat }, "Resume") : /* @__PURE__ */ React111.createElement(React111.Fragment, null)
+    can_disable_chat ? /* @__PURE__ */ React112.createElement(Button, { css: { fontWeight: "$semiBold", fontSize: "$sm", borderRadius: "$2" }, onClick: unPauseChat }, "Resume") : /* @__PURE__ */ React112.createElement(React112.Fragment, null)
   );
 };
 var ChatBlocked = () => {
@@ -24880,28 +24992,28 @@ var ChatBlocked = () => {
   if (!isLocalPeerBlacklisted) {
     return null;
   }
-  return /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React112.createElement(
     Flex,
     {
       align: "center",
       justify: "between",
       css: { borderRadius: "$1", bg: "$surface_default", p: "$4 $4 $4 $8", w: "100%" }
     },
-    /* @__PURE__ */ React111.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", textAlign: "center", w: "100%" } }, "You've been blocked from sending messages")
+    /* @__PURE__ */ React112.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", textAlign: "center", w: "100%" } }, "You've been blocked from sending messages")
   );
 };
 
 // src/Prebuilt/components/Chat/PinnedMessage.tsx
 init_define_process_env();
-import React114, { useEffect as useEffect28, useState as useState48 } from "react";
+import React115, { useEffect as useEffect29, useState as useState49 } from "react";
 import { useSwipeable } from "react-swipeable";
 import { useMedia as useMedia17 } from "react-use";
-import { selectSessionStore as selectSessionStore7, useHMSStore as useHMSStore56 } from "@100mslive/react-sdk";
+import { selectSessionStore as selectSessionStore7, useHMSStore as useHMSStore57 } from "@100mslive/react-sdk";
 import { PinIcon as PinIcon2, UnpinIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ArrowNavigation.tsx
 init_define_process_env();
-import React112 from "react";
+import React113 from "react";
 import { ChevronDownIcon as ChevronDownIcon7, ChevronUpIcon as ChevronUpIcon6 } from "@100mslive/react-icons";
 var ArrowNavigation = ({
   total,
@@ -24912,32 +25024,32 @@ var ArrowNavigation = ({
   if (total < 2) {
     return null;
   }
-  return /* @__PURE__ */ React112.createElement(Flex, { direction: "column", css: { gap: "$1" } }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement(Flex, { direction: "column", css: { gap: "$1" } }, /* @__PURE__ */ React113.createElement(
     Flex,
     {
       onClick: showPrevious,
       css: index === 0 ? { cursor: "not-allowed", color: "$on_surface_low" } : { cursor: "pointer", color: "$on_surface_medium" }
     },
-    /* @__PURE__ */ React112.createElement(ChevronUpIcon6, { height: 20, width: 20 })
-  ), /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(ChevronUpIcon6, { height: 20, width: 20 })
+  ), /* @__PURE__ */ React113.createElement(
     Flex,
     {
       onClick: showNext,
       css: index === total - 1 ? { cursor: "not-allowed", color: "$on_surface_low" } : { cursor: "pointer", color: "$on_surface_medium" }
     },
-    /* @__PURE__ */ React112.createElement(ChevronDownIcon7, { height: 20, width: 20 })
+    /* @__PURE__ */ React113.createElement(ChevronDownIcon7, { height: 20, width: 20 })
   ));
 };
 
 // src/Prebuilt/components/Chat/StickIndicator.tsx
 init_define_process_env();
-import React113 from "react";
+import React114 from "react";
 var StickIndicator = ({ total, index }) => {
   const sticksCount = Math.min(3, total);
   if (total < 2) {
     return null;
   }
-  return /* @__PURE__ */ React113.createElement(Flex, { direction: "column", css: { gap: "$1" } }, [...Array(sticksCount)].map((_, i) => /* @__PURE__ */ React113.createElement(
+  return /* @__PURE__ */ React114.createElement(Flex, { direction: "column", css: { gap: "$1" } }, [...Array(sticksCount)].map((_, i) => /* @__PURE__ */ React114.createElement(
     Box,
     {
       css: {
@@ -24953,13 +25065,13 @@ var StickIndicator = ({ total, index }) => {
 var PINNED_MESSAGE_LENGTH = 75;
 var PinnedMessage = () => {
   var _a8, _b7, _c;
-  const pinnedMessages = useHMSStore56(selectSessionStore7("pinnedMessages" /* PINNED_MESSAGES */));
-  const [pinnedMessageIndex, setPinnedMessageIndex] = useState48(0);
+  const pinnedMessages = useHMSStore57(selectSessionStore7("pinnedMessages" /* PINNED_MESSAGES */));
+  const [pinnedMessageIndex, setPinnedMessageIndex] = useState49(0);
   const { removePinnedMessage } = usePinnedMessages();
   const isMobile = useMedia17(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const canUnpinMessage = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.allow_pinning_messages);
-  const [hideOverflow, setHideOverflow] = useState48(true);
+  const [hideOverflow, setHideOverflow] = useState49(true);
   const currentPinnedMessage = ((_b7 = pinnedMessages == null ? void 0 : pinnedMessages[pinnedMessageIndex]) == null ? void 0 : _b7.text) || "";
   const canOverflow = currentPinnedMessage.length > PINNED_MESSAGE_LENGTH;
   const showPreviousPinnedMessage = () => {
@@ -24976,7 +25088,7 @@ var PinnedMessage = () => {
     onSwipedUp: () => showNextPinnedMessage(),
     onSwipedDown: () => showPreviousPinnedMessage()
   });
-  useEffect28(() => {
+  useEffect29(() => {
     const count = (pinnedMessages == null ? void 0 : pinnedMessages.length) || 1;
     if (pinnedMessageIndex >= count) {
       setPinnedMessageIndex(count - 1);
@@ -24985,7 +25097,7 @@ var PinnedMessage = () => {
   if (!pinnedMessages || pinnedMessages.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React114.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4" } }, !isMobile ? /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React115.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4" } }, !isMobile ? /* @__PURE__ */ React115.createElement(
     ArrowNavigation,
     {
       index: pinnedMessageIndex,
@@ -24993,7 +25105,7 @@ var PinnedMessage = () => {
       showPrevious: showPreviousPinnedMessage,
       showNext: showNextPinnedMessage
     }
-  ) : null, /* @__PURE__ */ React114.createElement(
+  ) : null, /* @__PURE__ */ React115.createElement(
     Flex,
     {
       css: {
@@ -25009,8 +25121,8 @@ var PinnedMessage = () => {
       align: "center",
       justify: "between"
     },
-    isMobile ? /* @__PURE__ */ React114.createElement(StickIndicator, { index: pinnedMessageIndex, total: pinnedMessages.length }) : null,
-    /* @__PURE__ */ React114.createElement(
+    isMobile ? /* @__PURE__ */ React115.createElement(StickIndicator, { index: pinnedMessageIndex, total: pinnedMessages.length }) : null,
+    /* @__PURE__ */ React115.createElement(
       Box,
       {
         css: {
@@ -25024,7 +25136,7 @@ var PinnedMessage = () => {
           }
         }
       },
-      /* @__PURE__ */ React114.createElement(
+      /* @__PURE__ */ React115.createElement(
         Text,
         __spreadProps(__spreadValues({
           variant: "sm",
@@ -25032,17 +25144,17 @@ var PinnedMessage = () => {
         }, swipeHandlers), {
           title: (_c = pinnedMessages[pinnedMessageIndex]) == null ? void 0 : _c.text
         }),
-        /* @__PURE__ */ React114.createElement(
+        /* @__PURE__ */ React115.createElement(
           AnnotisedMessage,
           {
             message: currentPinnedMessage,
             length: hideOverflow ? PINNED_MESSAGE_LENGTH : currentPinnedMessage.length
           }
         ),
-        canOverflow ? /* @__PURE__ */ React114.createElement("span", { style: { cursor: "pointer" }, onClick: () => setHideOverflow((prev) => !prev) }, "\xA0", hideOverflow ? "... See more" : "Collapse") : null
+        canOverflow ? /* @__PURE__ */ React115.createElement("span", { style: { cursor: "pointer" }, onClick: () => setHideOverflow((prev) => !prev) }, "\xA0", hideOverflow ? "... See more" : "Collapse") : null
       )
     ),
-    canUnpinMessage ? /* @__PURE__ */ React114.createElement(
+    canUnpinMessage ? /* @__PURE__ */ React115.createElement(
       Flex,
       {
         onClick: () => {
@@ -25058,8 +25170,8 @@ var PinnedMessage = () => {
         },
         title: "Unpin Message"
       },
-      /* @__PURE__ */ React114.createElement(UnpinIcon, { className: "show-on-hover", style: { display: "none" }, height: 20, width: 20 }),
-      /* @__PURE__ */ React114.createElement(PinIcon2, { className: "hide-on-hover", style: { display: "block" }, height: 20, width: 20 })
+      /* @__PURE__ */ React115.createElement(UnpinIcon, { className: "show-on-hover", style: { display: "none" }, height: 20, width: 20 }),
+      /* @__PURE__ */ React115.createElement(PinIcon2, { className: "hide-on-hover", style: { display: "block" }, height: 20, width: 20 })
     ) : null
   ));
 };
@@ -25070,9 +25182,11 @@ var Chat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
   const listRef = useRef21(null);
   const hmsActions = useHMSActions38();
-  const vanillaStore = useHMSVanillaStore11();
-  const { enabled: isChatEnabled = true } = useHMSStore57(tm("chatState" /* CHAT_STATE */)) || {};
+  const vanillaStore = useHMSVanillaStore10();
+  const { enabled: isChatEnabled = true } = useHMSStore58(tm("chatState" /* CHAT_STATE */)) || {};
   const isMobile = useMedia18(config.media.md);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
   const scrollToBottom = useCallback29(
     (unreadCount = 0) => {
       var _a9;
@@ -25088,7 +25202,7 @@ var Chat = () => {
     },
     [hmsActions, vanillaStore]
   );
-  return /* @__PURE__ */ React115.createElement(
+  return /* @__PURE__ */ React116.createElement(
     Flex,
     {
       direction: "column",
@@ -25098,19 +25212,46 @@ var Chat = () => {
         gap: "$4"
       }
     },
-    isMobile && ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay) ? null : /* @__PURE__ */ React115.createElement(PinnedMessage, null),
-    /* @__PURE__ */ React115.createElement(ChatBody, { ref: listRef, scrollToBottom }),
-    /* @__PURE__ */ React115.createElement(ChatPaused, null),
-    /* @__PURE__ */ React115.createElement(ChatBlocked, null),
-    isMobile && ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) ? /* @__PURE__ */ React115.createElement(PinnedMessage, null) : null,
-    isChatEnabled ? /* @__PURE__ */ React115.createElement(ChatFooter, { onSend: scrollToBottom }, /* @__PURE__ */ React115.createElement(NewMessageIndicator, { scrollToBottom, listRef })) : null
+    isMobile && ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay) ? null : /* @__PURE__ */ React116.createElement(PinnedMessage, null),
+    /* @__PURE__ */ React116.createElement(ChatBody, { ref: listRef, scrollToBottom }),
+    /* @__PURE__ */ React116.createElement(ChatPaused, null),
+    /* @__PURE__ */ React116.createElement(ChatBlocked, null),
+    isMobile && ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) ? /* @__PURE__ */ React116.createElement(PinnedMessage, null) : null,
+    isChatEnabled ? /* @__PURE__ */ React116.createElement(ChatFooter, { onSend: scrollToBottom }, /* @__PURE__ */ React116.createElement(NewMessageIndicator, { scrollToBottom, listRef })) : null,
+    (isMobileHLSStream || isLandscapeStream) && /* @__PURE__ */ React116.createElement(
+      Box,
+      {
+        css: __spreadValues({
+          position: "absolute"
+        }, match7({ isLandscapeStream, isChatEnabled }).with(
+          {
+            isLandscapeStream: true,
+            isChatEnabled: true
+          },
+          () => ({ bottom: "$19", right: "$10" })
+        ).with(
+          {
+            isLandscapeStream: true,
+            isChatEnabled: false
+          },
+          () => ({ bottom: "$20", right: "$10" })
+        ).with(
+          {
+            isLandscapeStream: false,
+            isChatEnabled: true
+          },
+          () => ({ bottom: "$19", right: "$8" })
+        ).otherwise(() => ({})))
+      },
+      /* @__PURE__ */ React116.createElement(EmojiReaction, null)
+    )
   );
 };
 var NewMessageIndicator = ({
   scrollToBottom,
   listRef
 }) => {
-  const unreadCount = useHMSStore57($n);
+  const unreadCount = useHMSStore58($n);
   if (!unreadCount || !listRef.current) {
     return null;
   }
@@ -25118,7 +25259,7 @@ var NewMessageIndicator = ({
   if (outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
     return null;
   }
-  return /* @__PURE__ */ React115.createElement(
+  return /* @__PURE__ */ React116.createElement(
     Flex,
     {
       justify: "center",
@@ -25129,7 +25270,7 @@ var NewMessageIndicator = ({
         position: "absolute"
       }
     },
-    /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React116.createElement(
       Button,
       {
         variant: "standard",
@@ -25149,18 +25290,18 @@ var NewMessageIndicator = ({
       },
       "New ",
       unreadCount === 1 ? "message" : "messages",
-      /* @__PURE__ */ React115.createElement(ChevronDownIcon8, { height: 16, width: 16 })
+      /* @__PURE__ */ React116.createElement(ChevronDownIcon8, { height: 16, width: 16 })
     )
   );
 };
 
 // src/Prebuilt/components/Footer/PaginatedParticipants.tsx
 init_define_process_env();
-import React116, { useEffect as useEffect29, useState as useState49 } from "react";
+import React117, { useEffect as useEffect30, useState as useState50 } from "react";
 import { useInView } from "react-intersection-observer";
 import { useMeasure as useMeasure2 } from "react-use";
 import { VariableSizeList as VariableSizeList2 } from "react-window";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom8, useHMSStore as useHMSStore58, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom8, useHMSStore as useHMSStore59, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
 import { ChevronLeftIcon as ChevronLeftIcon6, CrossIcon as CrossIcon18 } from "@100mslive/react-icons";
 var LoadMoreParticipants = ({
   hasNext,
@@ -25168,25 +25309,25 @@ var LoadMoreParticipants = ({
   style
 }) => {
   const { ref, inView } = useInView();
-  const [inProgress, setInProgress] = useState49(false);
-  useEffect29(() => {
+  const [inProgress, setInProgress] = useState50(false);
+  useEffect30(() => {
     if (hasNext && inView && !inProgress) {
       setInProgress(true);
       loadMore().catch(console.error).finally(() => setInProgress(false));
     }
   }, [hasNext, loadMore, inView, inProgress]);
-  return /* @__PURE__ */ React116.createElement(Flex, { ref, style, align: "center", justify: "center" }, inProgress ? /* @__PURE__ */ React116.createElement(Loading, { size: 16 }) : null);
+  return /* @__PURE__ */ React117.createElement(Flex, { ref, style, align: "center", justify: "center" }, inProgress ? /* @__PURE__ */ React117.createElement(Loading, { size: 16 }) : null);
 };
-var VirtualizedParticipantItem2 = React116.memo(
+var VirtualizedParticipantItem2 = React117.memo(
   ({
     index,
     data: data3,
     style
   }) => {
     if (!data3.peerList[index]) {
-      return /* @__PURE__ */ React116.createElement(LoadMoreParticipants, { hasNext: data3.hasNext, loadMore: data3.loadMorePeers, style });
+      return /* @__PURE__ */ React117.createElement(LoadMoreParticipants, { hasNext: data3.hasNext, loadMore: data3.loadMorePeers, style });
     }
-    return /* @__PURE__ */ React116.createElement(
+    return /* @__PURE__ */ React117.createElement(
       Participant,
       {
         key: data3.peerList[index].id,
@@ -25199,19 +25340,19 @@ var VirtualizedParticipantItem2 = React116.memo(
 );
 var PaginatedParticipants = ({ roleName, onBack }) => {
   const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants2({ role: roleName, limit: 20 });
-  const [search, setSearch] = useState49("");
+  const [search, setSearch] = useState50("");
   const filteredPeers = peers.filter((p) => {
     var _a8;
     return (_a8 = p.name) == null ? void 0 : _a8.toLowerCase().includes(search == null ? void 0 : search.toLowerCase());
   });
-  const isConnected = useHMSStore58(selectIsConnectedToRoom8);
+  const isConnected = useHMSStore59(selectIsConnectedToRoom8);
   const [ref, { width }] = useMeasure2();
   const height = ROW_HEIGHT * (filteredPeers.length + 1);
   const resetSidePane = useSidepaneReset();
-  useEffect29(() => {
+  useEffect30(() => {
     loadPeers();
   }, []);
-  return /* @__PURE__ */ React116.createElement(Flex, { ref, direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React116.createElement(Flex, { align: "center" }, /* @__PURE__ */ React116.createElement(Flex, { align: "center", css: { flex: "1 1 0", cursor: "pointer" }, onClick: onBack }, /* @__PURE__ */ React116.createElement(ChevronLeftIcon6, null), /* @__PURE__ */ React116.createElement(Text, { variant: "lg", css: { flex: "1 1 0" } }, "Participants")), /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React117.createElement(Flex, { ref, direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React117.createElement(Flex, { align: "center" }, /* @__PURE__ */ React117.createElement(Flex, { align: "center", css: { flex: "1 1 0", cursor: "pointer" }, onClick: onBack }, /* @__PURE__ */ React117.createElement(ChevronLeftIcon6, null), /* @__PURE__ */ React117.createElement(Text, { variant: "lg", css: { flex: "1 1 0" } }, "Participants")), /* @__PURE__ */ React117.createElement(
     IconButton,
     {
       onClick: (e) => {
@@ -25220,8 +25361,8 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
       },
       "data-testid": "close_sidepane"
     },
-    /* @__PURE__ */ React116.createElement(CrossIcon18, null)
-  )), /* @__PURE__ */ React116.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React116.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React116.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React116.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React116.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React117.createElement(CrossIcon18, null)
+  )), /* @__PURE__ */ React117.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React117.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React117.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React117.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React117.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React117.createElement(
     VariableSizeList2,
     {
       itemSize: (index) => index === filteredPeers.length + 1 ? 16 : ROW_HEIGHT,
@@ -25237,28 +25378,28 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
 
 // src/Prebuilt/components/ChatSettings.tsx
 init_define_process_env();
-import React117 from "react";
-import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions39, useHMSStore as useHMSStore59 } from "@100mslive/react-sdk";
+import React118 from "react";
+import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions39, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
 import { PauseCircleIcon as PauseCircleIcon3, SettingsIcon as SettingsIcon5 } from "@100mslive/react-icons";
 var ChatSettings = () => {
   var _a8, _b7;
   const hmsActions = useHMSActions39();
-  const localPeer = useHMSStore59(selectLocalPeer5);
+  const localPeer = useHMSStore60(selectLocalPeer5);
   const { elements } = useRoomLayoutConferencingScreen();
   const canPauseChat = !!((_b7 = (_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) == null ? void 0 : _b7.can_disable_chat);
-  const { enabled: isChatEnabled = true } = useHMSStore59(selectSessionStore8("chatState" /* CHAT_STATE */)) || {};
+  const { enabled: isChatEnabled = true } = useHMSStore60(selectSessionStore8("chatState" /* CHAT_STATE */)) || {};
   const showPause = canPauseChat && isChatEnabled;
   if (!showPause) {
     return null;
   }
-  return /* @__PURE__ */ React117.createElement(Popover2.Root, null, /* @__PURE__ */ React117.createElement(Popover2.Trigger, { asChild: true, css: { px: "$4" } }, /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React118.createElement(Popover2.Root, null, /* @__PURE__ */ React118.createElement(Popover2.Trigger, { asChild: true, css: { px: "$4" } }, /* @__PURE__ */ React118.createElement(
     Flex,
     {
       align: "center",
       css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" }, cursor: "pointer" }
     },
-    /* @__PURE__ */ React117.createElement(SettingsIcon5, null)
-  )), /* @__PURE__ */ React117.createElement(Popover2.Portal, null, /* @__PURE__ */ React117.createElement(
+    /* @__PURE__ */ React118.createElement(SettingsIcon5, null)
+  )), /* @__PURE__ */ React118.createElement(Popover2.Portal, null, /* @__PURE__ */ React118.createElement(
     Popover2.Content,
     {
       align: "end",
@@ -25287,8 +25428,8 @@ var ChatSettings = () => {
         "&:hover": { backgroundColor: "$surface_dim" }
       }
     },
-    /* @__PURE__ */ React117.createElement(PauseCircleIcon3, null),
-    /* @__PURE__ */ React117.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Pause Chat")
+    /* @__PURE__ */ React118.createElement(PauseCircleIcon3, null),
+    /* @__PURE__ */ React118.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Pause Chat")
   )));
 };
 
@@ -25305,16 +25446,16 @@ var tabTriggerCSS = {
   }
 };
 var ParticipantCount2 = ({ count }) => {
-  return count < 1e3 ? /* @__PURE__ */ React118.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React118.createElement(Tooltip, { title: count }, /* @__PURE__ */ React118.createElement("span", null, "(", getFormattedCount(count), ")"));
+  return count < 1e3 ? /* @__PURE__ */ React119.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React119.createElement(Tooltip, { title: count }, /* @__PURE__ */ React119.createElement("span", null, "(", getFormattedCount(count), ")"));
 };
-var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
+var SidePaneTabs = React119.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
   var _a8, _b7;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
-  const [activeTab, setActiveTab] = useState50(active);
-  const [activeRole, setActiveRole] = useState50("");
-  const peerCount = useHMSStore60(selectPeerCount5);
+  const [activeTab, setActiveTab] = useState51(active);
+  const [activeRole, setActiveRole] = useState51("");
+  const peerCount = useHMSStore61(selectPeerCount5);
   const { elements, screenType } = useRoomLayoutConferencingScreen();
   const chat_title = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.chat_title) || "Chat";
   const showChat = !!(elements == null ? void 0 : elements.chat);
@@ -25325,8 +25466,8 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
   const { off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
-  useEffect30(() => {
-    match6({ activeTab, showChat, showParticipants }).with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
+  useEffect31(() => {
+    match8({ activeTab, showChat, showParticipants }).with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
     }).with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
       setActiveTab(SIDE_PANE_OPTIONS.CHAT);
@@ -25334,11 +25475,11 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
       resetSidePane();
     });
   }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect30(() => {
+  useEffect31(() => {
     setActiveTab(active);
   }, [active]);
   if (activeRole) {
-    return /* @__PURE__ */ React118.createElement(
+    return /* @__PURE__ */ React119.createElement(
       Flex,
       {
         direction: "column",
@@ -25350,10 +25491,10 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
           position: "relative"
         }
       },
-      /* @__PURE__ */ React118.createElement(Box, { css: { position: "absolute", left: 0, top: 0, size: "100%", zIndex: 21, bg: "$surface_dim" } }, /* @__PURE__ */ React118.createElement(PaginatedParticipants, { roleName: activeRole, onBack: () => setActiveRole("") }))
+      /* @__PURE__ */ React119.createElement(Box, { css: { position: "absolute", left: 0, top: 0, size: "100%", zIndex: 21, bg: "$surface_dim" } }, /* @__PURE__ */ React119.createElement(PaginatedParticipants, { roleName: activeRole, onBack: () => setActiveRole("") }))
     );
   }
-  return /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React119.createElement(
     Flex,
     {
       direction: "column",
@@ -25364,8 +25505,8 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
         transition: "margin 0.3s ease-in-out"
       }
     },
-    match6({ isOverlayChat, isChatOpen, showChat, hideTabs }).with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => /* @__PURE__ */ React118.createElement(Chat, null)).with({ hideTabs: true }, () => {
-      return /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(Flex, { justify: "between", css: { w: "100%", "&:empty": { display: "none" } } }, /* @__PURE__ */ React118.createElement(
+    match8({ isOverlayChat, isChatOpen, showChat, hideTabs }).with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => /* @__PURE__ */ React119.createElement(Chat, null)).with({ hideTabs: true }, () => {
+      return /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement(Flex, { justify: "between", css: { w: "100%", "&:empty": { display: "none" } } }, /* @__PURE__ */ React119.createElement(
         Text,
         {
           variant: "sm",
@@ -25377,8 +25518,8 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
             "&:empty": { display: "none" }
           }
         },
-        activeTab === SIDE_PANE_OPTIONS.CHAT ? screenType !== "hls_live_streaming" && chat_title : /* @__PURE__ */ React118.createElement("span", null, "Participants\xA0", /* @__PURE__ */ React118.createElement(ParticipantCount2, { count: peerCount }))
-      ), /* @__PURE__ */ React118.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ React118.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React118.createElement(
+        activeTab === SIDE_PANE_OPTIONS.CHAT ? screenType !== "hls_live_streaming" && chat_title : /* @__PURE__ */ React119.createElement("span", null, "Participants\xA0", /* @__PURE__ */ React119.createElement(ParticipantCount2, { count: peerCount }))
+      ), /* @__PURE__ */ React119.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ React119.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React119.createElement(
         IconButton,
         {
           css: {
@@ -25397,10 +25538,10 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
           },
           "data-testid": "close_chat"
         },
-        screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ React118.createElement(CrossIcon19, null)
-      ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ React118.createElement(Chat, null) : /* @__PURE__ */ React118.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole }));
+        screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ React119.createElement(CrossIcon19, null)
+      ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ React119.createElement(Chat, null) : /* @__PURE__ */ React119.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole }));
     }).otherwise(() => {
-      return /* @__PURE__ */ React118.createElement(
+      return /* @__PURE__ */ React119.createElement(
         Tabs.Root,
         {
           value: activeTab,
@@ -25410,7 +25551,7 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
             size: "100%"
           }
         },
-        /* @__PURE__ */ React118.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ React118.createElement(Tabs.List, { css: { flexGrow: 1, borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React118.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.CHAT, onClick: toggleChat, css: tabTriggerCSS }, chat_title), /* @__PURE__ */ React118.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, onClick: toggleParticipants, css: tabTriggerCSS }, "Participants\xA0", /* @__PURE__ */ React118.createElement(ParticipantCount2, { count: peerCount }))), showChatSettings ? /* @__PURE__ */ React118.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React118.createElement(
+        /* @__PURE__ */ React119.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ React119.createElement(Tabs.List, { css: { flexGrow: 1, borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React119.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.CHAT, onClick: toggleChat, css: tabTriggerCSS }, chat_title), /* @__PURE__ */ React119.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, onClick: toggleParticipants, css: tabTriggerCSS }, "Participants\xA0", /* @__PURE__ */ React119.createElement(ParticipantCount2, { count: peerCount }))), showChatSettings ? /* @__PURE__ */ React119.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React119.createElement(
           IconButton,
           {
             css: { my: "$1", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } },
@@ -25424,10 +25565,10 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
             },
             "data-testid": "close_chat"
           },
-          /* @__PURE__ */ React118.createElement(CrossIcon19, null)
+          /* @__PURE__ */ React119.createElement(CrossIcon19, null)
         )),
-        /* @__PURE__ */ React118.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React118.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
-        /* @__PURE__ */ React118.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React118.createElement(Chat, null))
+        /* @__PURE__ */ React119.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React119.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
+        /* @__PURE__ */ React119.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React119.createElement(Chat, null))
       );
     })
   );
@@ -25435,7 +25576,7 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
 
 // src/Prebuilt/components/VideoTile.tsx
 init_define_process_env();
-import React122, { useCallback as useCallback30, useMemo as useMemo10, useState as useState52 } from "react";
+import React123, { useCallback as useCallback30, useMemo as useMemo10, useState as useState53 } from "react";
 import { useMeasure as useMeasure3 } from "react-use";
 import {
   selectAudioTrackByPeerID as selectAudioTrackByPeerID2,
@@ -25446,14 +25587,14 @@ import {
   selectPeerNameByID as selectPeerNameByID4,
   selectVideoTrackByID as selectVideoTrackByID3,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID3,
-  useHMSStore as useHMSStore64
+  useHMSStore as useHMSStore65
 } from "@100mslive/react-sdk";
 import { BrbTileIcon, HandIcon as HandIcon5, MicOffIcon as MicOffIcon6 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Connection/TileConnection.tsx
 init_define_process_env();
-import React119 from "react";
-import { selectScreenShareByPeerID, selectSessionStore as selectSessionStore9, useHMSStore as useHMSStore61 } from "@100mslive/react-sdk";
+import React120 from "react";
+import { selectScreenShareByPeerID, selectSessionStore as selectSessionStore9, useHMSStore as useHMSStore62 } from "@100mslive/react-sdk";
 import { PinIcon as PinIcon3, ShareScreenIcon as ShareScreenIcon3, SpotlightIcon } from "@100mslive/react-icons";
 var TileConnection = ({
   name,
@@ -25462,9 +25603,9 @@ var TileConnection = ({
   width,
   pinned
 }) => {
-  const spotlighted = useHMSStore61(selectSessionStore9("spotlight" /* SPOTLIGHT */)) === peerId;
-  const isPeerScreenSharing = !!useHMSStore61(selectScreenShareByPeerID(peerId));
-  return /* @__PURE__ */ React119.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React119.createElement(React119.Fragment, null, name ? /* @__PURE__ */ React119.createElement(Flex, { align: "center" }, isPeerScreenSharing && /* @__PURE__ */ React119.createElement(IconWrapper, null, /* @__PURE__ */ React119.createElement(ShareScreenIcon3, { width: "15", height: "15" })), pinned && /* @__PURE__ */ React119.createElement(IconWrapper, null, /* @__PURE__ */ React119.createElement(PinIcon3, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React119.createElement(IconWrapper, null, /* @__PURE__ */ React119.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React119.createElement(
+  const spotlighted = useHMSStore62(selectSessionStore9("spotlight" /* SPOTLIGHT */)) === peerId;
+  const isPeerScreenSharing = !!useHMSStore62(selectScreenShareByPeerID(peerId));
+  return /* @__PURE__ */ React120.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React120.createElement(React120.Fragment, null, name ? /* @__PURE__ */ React120.createElement(Flex, { align: "center" }, isPeerScreenSharing && /* @__PURE__ */ React120.createElement(IconWrapper, null, /* @__PURE__ */ React120.createElement(ShareScreenIcon3, { width: "15", height: "15" })), pinned && /* @__PURE__ */ React120.createElement(IconWrapper, null, /* @__PURE__ */ React120.createElement(PinIcon3, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React120.createElement(IconWrapper, null, /* @__PURE__ */ React120.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React120.createElement(
     Text,
     {
       css: __spreadValues({
@@ -25474,7 +25615,7 @@ var TileConnection = ({
       variant: "xs"
     },
     name
-  )) : null, /* @__PURE__ */ React119.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
+  )) : null, /* @__PURE__ */ React120.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
 };
 var IconWrapper = styled("div", { c: "$on_surface_high", ml: "$3", mt: "$1", display: "flex" });
 var Wrapper2 = styled("div", {
@@ -25496,7 +25637,7 @@ var TileConnection_default = TileConnection;
 
 // src/Prebuilt/components/TileMenu/TileMenu.tsx
 init_define_process_env();
-import React121, { useState as useState51 } from "react";
+import React122, { useState as useState52 } from "react";
 import { useMedia as useMedia21 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID11,
@@ -25504,14 +25645,14 @@ import {
   selectPermissions as selectPermissions17,
   selectTrackByID as selectTrackByID3,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
-  useHMSStore as useHMSStore63,
+  useHMSStore as useHMSStore64,
   useRemoteAVToggle as useRemoteAVToggle2
 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon20, VerticalMenuIcon as VerticalMenuIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/TileMenu/TileMenuContent.tsx
 init_define_process_env();
-import React120, { Fragment as Fragment12 } from "react";
+import React121, { Fragment as Fragment11 } from "react";
 import { useMedia as useMedia20 } from "react-use";
 import {
   selectPermissions as selectPermissions16,
@@ -25519,7 +25660,7 @@ import {
   selectTrackByID as selectTrackByID2,
   useCustomEvent as useCustomEvent2,
   useHMSActions as useHMSActions40,
-  useHMSStore as useHMSStore62,
+  useHMSStore as useHMSStore63,
   useRemoteAVToggle
 } from "@100mslive/react-sdk";
 import {
@@ -25556,11 +25697,11 @@ var SpotlightActions = ({
   }
 }) => {
   const hmsActions = useHMSActions40();
-  const spotlightPeerId = useHMSStore62(selectSessionStore10("spotlight" /* SPOTLIGHT */));
+  const spotlightPeerId = useHMSStore63(selectSessionStore10("spotlight" /* SPOTLIGHT */));
   const isTileSpotlighted = spotlightPeerId === peerId;
   const dragClassName = getDragClassName();
   const setSpotlightPeerId = (peerIdToSpotlight) => hmsActions.sessionStore.set("spotlight" /* SPOTLIGHT */, peerIdToSpotlight).catch((err) => ToastManager.addToast({ title: err.description }));
-  return /* @__PURE__ */ React120.createElement(
+  return /* @__PURE__ */ React121.createElement(
     StyledMenuTile.ItemButton,
     {
       className: dragClassName,
@@ -25574,8 +25715,8 @@ var SpotlightActions = ({
         onSpotLightClick();
       }
     },
-    /* @__PURE__ */ React120.createElement(StarIcon2, { height: 20, width: 20 }),
-    /* @__PURE__ */ React120.createElement("span", null, isTileSpotlighted ? "Remove from Spotlight" : "Spotlight Tile for everyone")
+    /* @__PURE__ */ React121.createElement(StarIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React121.createElement("span", null, isTileSpotlighted ? "Remove from Spotlight" : "Spotlight Tile for everyone")
   );
 };
 var PinActions = ({ audioTrackID, videoTrackID }) => {
@@ -25586,25 +25727,25 @@ var PinActions = ({ audioTrackID, videoTrackID }) => {
     videoTrackID,
     audioTrackID
   });
-  return /* @__PURE__ */ React120.createElement(React120.Fragment, null, /* @__PURE__ */ React120.createElement(
+  return /* @__PURE__ */ React121.createElement(React121.Fragment, null, /* @__PURE__ */ React121.createElement(
     StyledMenuTile.ItemButton,
     {
       className: dragClassName,
       css: spacingCSS,
       onClick: () => isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID)
     },
-    /* @__PURE__ */ React120.createElement(PinIcon4, { height: 20, width: 20 }),
-    /* @__PURE__ */ React120.createElement("span", null, isTilePinned ? "Unpin" : "Pin", " Tile for myself")
+    /* @__PURE__ */ React121.createElement(PinIcon4, { height: 20, width: 20 }),
+    /* @__PURE__ */ React121.createElement("span", null, isTilePinned ? "Unpin" : "Pin", " Tile for myself")
   ));
 };
 var MinimiseInset = () => {
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
   const dragClassName = getDragClassName();
-  return /* @__PURE__ */ React120.createElement(React120.Fragment, null, /* @__PURE__ */ React120.createElement(StyledMenuTile.ItemButton, { className: dragClassName, css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React120.createElement(ShrinkIcon, { height: 20, width: 20 }), /* @__PURE__ */ React120.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
+  return /* @__PURE__ */ React121.createElement(React121.Fragment, null, /* @__PURE__ */ React121.createElement(StyledMenuTile.ItemButton, { className: dragClassName, css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React121.createElement(ShrinkIcon, { height: 20, width: 20 }), /* @__PURE__ */ React121.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
 };
 var SimulcastLayers = ({ trackId }) => {
   var _a8;
-  const track = useHMSStore62(selectTrackByID2(trackId));
+  const track = useHMSStore63(selectTrackByID2(trackId));
   const actions = useHMSActions40();
   const bg = useDropdownSelection();
   if (!((_a8 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a8.length) || track.degraded || !track.enabled) {
@@ -25612,8 +25753,8 @@ var SimulcastLayers = ({ trackId }) => {
   }
   const currentLayer = track.layerDefinitions.find((layer) => layer.layer === track.layer);
   const dragClassName = getDragClassName();
-  return /* @__PURE__ */ React120.createElement(Fragment12, null, /* @__PURE__ */ React120.createElement(StyledMenuTile.ItemButton, { className: dragClassName, css: { color: "$on_surface_medium", cursor: "default" } }, "Select maximum resolution"), track.layerDefinitions.map((layer) => {
-    return /* @__PURE__ */ React120.createElement(
+  return /* @__PURE__ */ React121.createElement(Fragment11, null, /* @__PURE__ */ React121.createElement(StyledMenuTile.ItemButton, { className: dragClassName, css: { color: "$on_surface_medium", cursor: "default" } }, "Select maximum resolution"), track.layerDefinitions.map((layer) => {
+    return /* @__PURE__ */ React121.createElement(
       StyledMenuTile.ItemButton,
       {
         className: dragClassName,
@@ -25629,7 +25770,7 @@ var SimulcastLayers = ({ trackId }) => {
           }
         }
       },
-      /* @__PURE__ */ React120.createElement(
+      /* @__PURE__ */ React121.createElement(
         Text,
         {
           as: "span",
@@ -25642,7 +25783,7 @@ var SimulcastLayers = ({ trackId }) => {
         },
         layer.layer
       ),
-      /* @__PURE__ */ React120.createElement(
+      /* @__PURE__ */ React121.createElement(
         Text,
         {
           as: "span",
@@ -25656,7 +25797,7 @@ var SimulcastLayers = ({ trackId }) => {
         layer.resolution.height
       )
     );
-  }), /* @__PURE__ */ React120.createElement(StyledMenuTile.ItemButton, { className: dragClassName }, /* @__PURE__ */ React120.createElement(Text, { as: "span", variant: "xs", css: { color: "$on_surface_medium" } }, "Currently streaming:", /* @__PURE__ */ React120.createElement(
+  }), /* @__PURE__ */ React121.createElement(StyledMenuTile.ItemButton, { className: dragClassName }, /* @__PURE__ */ React121.createElement(Text, { as: "span", variant: "xs", css: { color: "$on_surface_medium" } }, "Currently streaming:", /* @__PURE__ */ React121.createElement(
     Text,
     {
       as: "span",
@@ -25668,7 +25809,7 @@ var SimulcastLayers = ({ trackId }) => {
         ml: "$2"
       }
     },
-    currentLayer ? /* @__PURE__ */ React120.createElement(React120.Fragment, null, track.layer, " (", currentLayer.resolution.width, "x", currentLayer.resolution.height, ")") : "-"
+    currentLayer ? /* @__PURE__ */ React121.createElement(React121.Fragment, null, track.layer, " (", currentLayer.resolution.width, "x", currentLayer.resolution.height, ")") : "-"
   ))));
 };
 var TileMenuContent = ({
@@ -25690,7 +25831,7 @@ var TileMenuContent = ({
   var _a8;
   const actions = useHMSActions40();
   const dragClassName = getDragClassName();
-  const removeOthers = (_a8 = useHMSStore62(selectPermissions16)) == null ? void 0 : _a8.removeOthers;
+  const removeOthers = (_a8 = useHMSStore63(selectPermissions16)) == null ? void 0 : _a8.removeOthers;
   const { userName } = useHMSPrebuiltContext();
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
     audioTrackID,
@@ -25701,7 +25842,7 @@ var TileMenuContent = ({
   });
   const isMobile = useMedia20(config.media.md);
   if (isLocal) {
-    return showPinAction || canMinimise || !userName || showSpotlight ? /* @__PURE__ */ React120.createElement(React120.Fragment, null, showPinAction && /* @__PURE__ */ React120.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React120.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React120.createElement(MinimiseInset, null), !userName && /* @__PURE__ */ React120.createElement(
+    return showPinAction || canMinimise || !userName || showSpotlight ? /* @__PURE__ */ React121.createElement(React121.Fragment, null, showPinAction && /* @__PURE__ */ React121.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React121.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React121.createElement(MinimiseInset, null), !userName && /* @__PURE__ */ React121.createElement(
       StyledMenuTile.ItemButton,
       {
         className: dragClassName,
@@ -25710,11 +25851,11 @@ var TileMenuContent = ({
           closeSheetOnClick();
         }
       },
-      /* @__PURE__ */ React120.createElement(PencilIcon, { height: 20, width: 20 }),
-      /* @__PURE__ */ React120.createElement(Text, { variant: "sm", css: { "@md": { fontWeight: "$semiBold" }, c: "$on_surface_high" } }, "Change Name")
+      /* @__PURE__ */ React121.createElement(PencilIcon, { height: 20, width: 20 }),
+      /* @__PURE__ */ React121.createElement(Text, { variant: "sm", css: { "@md": { fontWeight: "$semiBold" }, c: "$on_surface_high" } }, "Change Name")
     )) : null;
   }
-  return /* @__PURE__ */ React120.createElement(React120.Fragment, null, toggleVideo ? /* @__PURE__ */ React120.createElement(
+  return /* @__PURE__ */ React121.createElement(React121.Fragment, null, toggleVideo ? /* @__PURE__ */ React121.createElement(
     StyledMenuTile.ItemButton,
     {
       className: dragClassName,
@@ -25725,9 +25866,9 @@ var TileMenuContent = ({
       },
       "data-testid": isVideoEnabled ? "mute_video_participant_btn" : "unmute_video_participant_btn"
     },
-    isVideoEnabled ? /* @__PURE__ */ React120.createElement(VideoOnIcon4, { height: 20, width: 20 }) : /* @__PURE__ */ React120.createElement(VideoOffIcon3, { height: 20, width: 20 }),
-    /* @__PURE__ */ React120.createElement("span", null, isVideoEnabled ? "Mute Video" : "Request to Unmute Video")
-  ) : null, toggleAudio ? /* @__PURE__ */ React120.createElement(
+    isVideoEnabled ? /* @__PURE__ */ React121.createElement(VideoOnIcon4, { height: 20, width: 20 }) : /* @__PURE__ */ React121.createElement(VideoOffIcon3, { height: 20, width: 20 }),
+    /* @__PURE__ */ React121.createElement("span", null, isVideoEnabled ? "Mute Video" : "Request to Unmute Video")
+  ) : null, toggleAudio ? /* @__PURE__ */ React121.createElement(
     StyledMenuTile.ItemButton,
     {
       css: spacingCSS,
@@ -25738,9 +25879,9 @@ var TileMenuContent = ({
       },
       "data-testid": isAudioEnabled ? "mute_audio_participant_btn" : "unmute_audio_participant_btn"
     },
-    isAudioEnabled ? /* @__PURE__ */ React120.createElement(MicOnIcon4, { height: 20, width: 20 }) : /* @__PURE__ */ React120.createElement(MicOffIcon5, { height: 20, width: 20 }),
-    /* @__PURE__ */ React120.createElement("span", null, isAudioEnabled ? "Mute Audio" : "Request to Unmute Audio")
-  ) : null, audioTrackID ? /* @__PURE__ */ React120.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React120.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React120.createElement(SpeakerIcon3, { height: 20, width: 20 }), /* @__PURE__ */ React120.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React120.createElement(
+    isAudioEnabled ? /* @__PURE__ */ React121.createElement(MicOnIcon4, { height: 20, width: 20 }) : /* @__PURE__ */ React121.createElement(MicOffIcon5, { height: 20, width: 20 }),
+    /* @__PURE__ */ React121.createElement("span", null, isAudioEnabled ? "Mute Audio" : "Request to Unmute Audio")
+  ) : null, audioTrackID ? /* @__PURE__ */ React121.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React121.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React121.createElement(SpeakerIcon3, { height: 20, width: 20 }), /* @__PURE__ */ React121.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React121.createElement(
     Slider,
     {
       css: { my: "0.5rem" },
@@ -25748,7 +25889,7 @@ var TileMenuContent = ({
       value: [typeof volume === "number" ? volume : 100],
       onValueChange: (e) => setVolume == null ? void 0 : setVolume(e[0])
     }
-  )) : null, showPinAction && /* @__PURE__ */ React120.createElement(React120.Fragment, null, /* @__PURE__ */ React120.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React120.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), isMobile ? null : /* @__PURE__ */ React120.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React120.createElement(
+  )) : null, showPinAction && /* @__PURE__ */ React121.createElement(React121.Fragment, null, /* @__PURE__ */ React121.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React121.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), isMobile ? null : /* @__PURE__ */ React121.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React121.createElement(
     StyledMenuTile.RemoveItem,
     {
       css: __spreadProps(__spreadValues({}, spacingCSS), { borderTop: "none" }),
@@ -25761,9 +25902,9 @@ var TileMenuContent = ({
       }),
       "data-testid": "remove_participant_btn"
     },
-    /* @__PURE__ */ React120.createElement(RemoveUserIcon2, { height: 20, width: 20 }),
-    /* @__PURE__ */ React120.createElement("span", null, "Remove Participant")
-  ) : null, removeOthers && isScreenshare ? /* @__PURE__ */ React120.createElement(
+    /* @__PURE__ */ React121.createElement(RemoveUserIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React121.createElement("span", null, "Remove Participant")
+  ) : null, removeOthers && isScreenshare ? /* @__PURE__ */ React121.createElement(
     StyledMenuTile.RemoveItem,
     {
       onClick: () => {
@@ -25772,8 +25913,8 @@ var TileMenuContent = ({
       },
       css: spacingCSS
     },
-    /* @__PURE__ */ React120.createElement(ShareScreenIcon4, { height: 20, width: 20 }),
-    /* @__PURE__ */ React120.createElement("span", null, "Stop Screenshare")
+    /* @__PURE__ */ React121.createElement(ShareScreenIcon4, { height: 20, width: 20 }),
+    /* @__PURE__ */ React121.createElement("span", null, "Stop Screenshare")
   ) : null);
 };
 
@@ -25787,20 +25928,20 @@ var TileMenu = ({
   enableSpotlightingPeer = true
 }) => {
   var _a8, _b7;
-  const [open, setOpen] = useState51(false);
+  const [open, setOpen] = useState52(false);
   const { theme: theme2 } = useTheme();
-  const localPeerID = useHMSStore63(selectLocalPeerID11);
+  const localPeerID = useHMSStore64(selectLocalPeerID11);
   const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore63(selectPermissions17) || {};
+  const { removeOthers } = useHMSStore64(selectPermissions17) || {};
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
   const showSpotlight = enableSpotlightingPeer;
-  const isPrimaryVideoTrack = ((_a8 = useHMSStore63(selectVideoTrackByPeerID2(peerID))) == null ? void 0 : _a8.id) === videoTrackID;
+  const isPrimaryVideoTrack = ((_a8 = useHMSStore64(selectVideoTrackByPeerID2(peerID))) == null ? void 0 : _a8.id) === videoTrackID;
   const showPinAction = !!(audioTrackID || videoTrackID && isPrimaryVideoTrack);
-  const track = useHMSStore63(selectTrackByID3(videoTrackID));
+  const track = useHMSStore64(selectTrackByID3(videoTrackID));
   const hideSimulcastLayers = !((_b7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b7.length) || track.degraded || !track.enabled;
   const isMobile = useMedia21(config.media.md);
-  const peer = useHMSStore63(selectPeerByID2(peerID));
-  const [showNameChangeModal, setShowNameChangeModal] = useState51(false);
+  const peer = useHMSStore64(selectPeerByID2(peerID));
+  const [showNameChangeModal, setShowNameChangeModal] = useState52(false);
   useDropdownList({ open, name: "TileMenu" });
   const dragClassName = getDragClassName();
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
@@ -25819,7 +25960,7 @@ var TileMenu = ({
     canMinimise,
     openNameChangeModal
   };
-  return /* @__PURE__ */ React121.createElement(React121.Fragment, null, /* @__PURE__ */ React121.createElement(StyledMenuTile.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React121.createElement(
+  return /* @__PURE__ */ React122.createElement(React122.Fragment, null, /* @__PURE__ */ React122.createElement(StyledMenuTile.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React122.createElement(
     StyledMenuTile.Trigger,
     {
       "data-testid": "participant_menu_btn",
@@ -25827,8 +25968,8 @@ var TileMenu = ({
       onClick: (e) => e.stopPropagation(),
       className: dragClassName
     },
-    /* @__PURE__ */ React121.createElement(VerticalMenuIcon8, { width: 20, height: 20 })
-  ), isMobile ? /* @__PURE__ */ React121.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React121.createElement(Sheet.Content, { css: { bg: "$surface_dim", pt: "$8" } }, /* @__PURE__ */ React121.createElement(
+    /* @__PURE__ */ React122.createElement(VerticalMenuIcon8, { width: 20, height: 20 })
+  ), isMobile ? /* @__PURE__ */ React122.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React122.createElement(Sheet.Content, { css: { bg: "$surface_dim", pt: "$8" } }, /* @__PURE__ */ React122.createElement(
     Flex,
     {
       css: {
@@ -25842,9 +25983,9 @@ var TileMenu = ({
         borderBottom: "1px solid $border_default"
       }
     },
-    /* @__PURE__ */ React121.createElement(Box, null, /* @__PURE__ */ React121.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer == null ? void 0 : peer.name, isLocal ? ` (You)` : null), (peer == null ? void 0 : peer.roleName) ? /* @__PURE__ */ React121.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
-    /* @__PURE__ */ React121.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React121.createElement(CrossIcon20, null))
-  ), /* @__PURE__ */ React121.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React121.createElement(TileMenuContent, __spreadProps(__spreadValues({}, props), { closeSheetOnClick: () => setOpen(false) }))))) : /* @__PURE__ */ React121.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React121.createElement(TileMenuContent, __spreadValues({}, props)))), showNameChangeModal && /* @__PURE__ */ React121.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
+    /* @__PURE__ */ React122.createElement(Box, null, /* @__PURE__ */ React122.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer == null ? void 0 : peer.name, isLocal ? ` (You)` : null), (peer == null ? void 0 : peer.roleName) ? /* @__PURE__ */ React122.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
+    /* @__PURE__ */ React122.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React122.createElement(CrossIcon20, null))
+  ), /* @__PURE__ */ React122.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React122.createElement(TileMenuContent, __spreadProps(__spreadValues({}, props), { closeSheetOnClick: () => setOpen(false) }))))) : /* @__PURE__ */ React122.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React122.createElement(TileMenuContent, __spreadValues({}, props)))), showNameChangeModal && /* @__PURE__ */ React122.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
 };
 var TileMenu_default = TileMenu;
 
@@ -25876,10 +26017,10 @@ var getVideoTileLabel = ({ peerName, isLocal, track }) => {
 
 // src/Prebuilt/components/VideoTile.tsx
 var PeerMetadata = ({ peerId, size }) => {
-  const metaData = useHMSStore64(selectPeerMetadata4(peerId));
+  const metaData = useHMSStore65(selectPeerMetadata4(peerId));
   const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
-  const isHandRaised = useHMSStore64(selectHasPeerHandRaised3(peerId));
-  return /* @__PURE__ */ React122.createElement(React122.Fragment, null, isHandRaised ? /* @__PURE__ */ React122.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React122.createElement(HandIcon5, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React122.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React122.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
+  const isHandRaised = useHMSStore65(selectHasPeerHandRaised3(peerId));
+  return /* @__PURE__ */ React123.createElement(React123.Fragment, null, isHandRaised ? /* @__PURE__ */ React123.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React123.createElement(HandIcon5, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React123.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React123.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
 };
 var Tile = ({
   peerId = "",
@@ -25898,16 +26039,16 @@ var Tile = ({
   hideMetadataOnTile = false
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID3(trackId) : selectVideoTrackByPeerID3(peerId);
-  const track = useHMSStore64(trackSelector);
-  const peerName = useHMSStore64(selectPeerNameByID4(peerId));
-  const audioTrack = useHMSStore64(selectAudioTrackByPeerID2(peerId));
-  const localPeerID = useHMSStore64(selectLocalPeerID12);
+  const track = useHMSStore65(trackSelector);
+  const peerName = useHMSStore65(selectPeerNameByID4(peerId));
+  const audioTrack = useHMSStore65(selectAudioTrackByPeerID2(peerId));
+  const localPeerID = useHMSStore65(selectLocalPeerID12);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isAudioMuted = !useHMSStore64(selectIsPeerAudioEnabled2(peerId));
+  const isAudioMuted = !useHMSStore65(selectIsPeerAudioEnabled2(peerId));
   const isVideoMuted = !(track == null ? void 0 : track.enabled);
-  const [isMouseHovered, setIsMouseHovered] = useState52(false);
+  const [isMouseHovered, setIsMouseHovered] = useState53(false);
   const isVideoDegraded = track == null ? void 0 : track.degraded;
   const isLocal = localPeerID === peerId;
   const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
@@ -25930,7 +26071,7 @@ var Tile = ({
     () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
     [calculatedWidth, calculatedHeight]
   );
-  return /* @__PURE__ */ React122.createElement(
+  return /* @__PURE__ */ React123.createElement(
     StyledVideoTile.Root,
     {
       ref,
@@ -25940,7 +26081,7 @@ var Tile = ({
       }, rootCSS),
       "data-testid": `participant_tile_${peerName}`
     },
-    peerName !== void 0 ? /* @__PURE__ */ React122.createElement(
+    peerName !== void 0 ? /* @__PURE__ */ React123.createElement(
       StyledVideoTile.Container,
       {
         onMouseEnter: onHoverHandler,
@@ -25948,8 +26089,8 @@ var Tile = ({
         noRadius: !roundedVideoTile,
         css: containerCSS
       },
-      showStatsOnTiles && isTileBigEnoughToShowStats ? /* @__PURE__ */ React122.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-      /* @__PURE__ */ React122.createElement(
+      showStatsOnTiles && isTileBigEnoughToShowStats ? /* @__PURE__ */ React123.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
+      /* @__PURE__ */ React123.createElement(
         Video,
         {
           trackId: track == null ? void 0 : track.id,
@@ -25964,8 +26105,8 @@ var Tile = ({
           }
         }
       ),
-      calculatedWidth > 0 && calculatedHeight > 0 ? /* @__PURE__ */ React122.createElement(React122.Fragment, null, isVideoMuted || !isLocal && isAudioOnly ? /* @__PURE__ */ React122.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React122.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null, !hideAudioMuteOnTile && isAudioMuted ? /* @__PURE__ */ React122.createElement(StyledVideoTile.AudioIndicator, { "data-testid": "participant_audio_mute_icon", size: attribBoxSize }, /* @__PURE__ */ React122.createElement(MicOffIcon6, null)) : null, !hideAudioMuteOnTile && !isAudioMuted ? /* @__PURE__ */ React122.createElement(StyledVideoTile.AudioIndicator, { size: attribBoxSize }, /* @__PURE__ */ React122.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id, size: attribBoxSize })) : null, !hideMetadataOnTile && /* @__PURE__ */ React122.createElement(PeerMetadata, { peerId, size: attribBoxSize })) : null,
-      isMouseHovered || isDragabble && navigator.maxTouchPoints > 0 ? /* @__PURE__ */ React122.createElement(
+      calculatedWidth > 0 && calculatedHeight > 0 ? /* @__PURE__ */ React123.createElement(React123.Fragment, null, isVideoMuted || !isLocal && isAudioOnly ? /* @__PURE__ */ React123.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React123.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null, !hideAudioMuteOnTile && isAudioMuted ? /* @__PURE__ */ React123.createElement(StyledVideoTile.AudioIndicator, { "data-testid": "participant_audio_mute_icon", size: attribBoxSize }, /* @__PURE__ */ React123.createElement(MicOffIcon6, null)) : null, !hideAudioMuteOnTile && !isAudioMuted ? /* @__PURE__ */ React123.createElement(StyledVideoTile.AudioIndicator, { size: attribBoxSize }, /* @__PURE__ */ React123.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id, size: attribBoxSize })) : null, !hideMetadataOnTile && /* @__PURE__ */ React123.createElement(PeerMetadata, { peerId, size: attribBoxSize })) : null,
+      isMouseHovered || isDragabble && navigator.maxTouchPoints > 0 ? /* @__PURE__ */ React123.createElement(
         TileMenu_default,
         {
           peerID: peerId,
@@ -25975,7 +26116,7 @@ var Tile = ({
           enableSpotlightingPeer
         }
       ) : null,
-      /* @__PURE__ */ React122.createElement(
+      /* @__PURE__ */ React123.createElement(
         TileConnection_default,
         {
           hideLabel: hideParticipantNameOnTile,
@@ -25988,12 +26129,12 @@ var Tile = ({
     ) : null
   );
 };
-var VideoTile = React122.memo(Tile);
+var VideoTile = React123.memo(Tile);
 var VideoTile_default = VideoTile;
 
 // src/Prebuilt/components/VirtualBackground/VBPicker.tsx
 init_define_process_env();
-import React125, { useEffect as useEffect31, useState as useState53 } from "react";
+import React126, { useEffect as useEffect32, useState as useState54 } from "react";
 import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes3 } from "@100mslive/hms-virtual-background";
 import {
   HMSRoomState as HMSRoomState4,
@@ -26004,25 +26145,25 @@ import {
   selectRoomState as selectRoomState4,
   selectVideoTrackByID as selectVideoTrackByID4,
   useHMSActions as useHMSActions41,
-  useHMSStore as useHMSStore65
+  useHMSStore as useHMSStore66
 } from "@100mslive/react-sdk";
 import { BlurPersonHighIcon, CrossCircleIcon as CrossCircleIcon3, CrossIcon as CrossIcon21 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/VirtualBackground/VBCollection.tsx
 init_define_process_env();
-import React124 from "react";
+import React125 from "react";
 import { HMSVirtualBackgroundTypes } from "@100mslive/hms-virtual-background";
 
 // src/Prebuilt/components/VirtualBackground/VBOption.tsx
 init_define_process_env();
-import React123 from "react";
+import React124 from "react";
 var Root25 = ({
   onClick,
   mediaURL,
   isActive,
   children,
   testid = ""
-}) => /* @__PURE__ */ React123.createElement(
+}) => /* @__PURE__ */ React124.createElement(
   Flex,
   {
     "data-testid": testid,
@@ -26043,10 +26184,10 @@ var Root25 = ({
   children
 );
 var Title4 = ({ children }) => {
-  return children ? /* @__PURE__ */ React123.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, children) : null;
+  return children ? /* @__PURE__ */ React124.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, children) : null;
 };
 var Icon3 = ({ children }) => {
-  return children ? /* @__PURE__ */ React123.createElement(Box, { css: { color: "$on_surface_high" } }, children) : null;
+  return children ? /* @__PURE__ */ React124.createElement(Box, { css: { color: "$on_surface_high" } }, children) : null;
 };
 var VBOption = {
   Root: Root25,
@@ -26063,7 +26204,7 @@ var VBCollection = ({
   if (options.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React124.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React124.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React124.createElement(Box, { css: { py: "$4", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "$8" } }, options.map((option, index) => /* @__PURE__ */ React124.createElement(
+  return /* @__PURE__ */ React125.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React125.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React125.createElement(Box, { css: { py: "$4", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "$8" } }, options.map((option, index) => /* @__PURE__ */ React125.createElement(
     VBOption.Root,
     __spreadProps(__spreadValues({
       key: option.value,
@@ -26071,8 +26212,8 @@ var VBCollection = ({
     }, option), {
       isActive: activeBackground === option.value
     }),
-    /* @__PURE__ */ React124.createElement(VBOption.Icon, null, option == null ? void 0 : option.icon),
-    /* @__PURE__ */ React124.createElement(VBOption.Title, null, option == null ? void 0 : option.title)
+    /* @__PURE__ */ React125.createElement(VBOption.Icon, null, option == null ? void 0 : option.icon),
+    /* @__PURE__ */ React125.createElement(VBOption.Title, null, option == null ? void 0 : option.title)
   ))));
 };
 
@@ -26191,23 +26332,23 @@ var VBPicker = ({ backgroundMedia = [] }) => {
   var _a8;
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions41();
-  const localPeer = useHMSStore65(selectLocalPeer6);
-  const role = useHMSStore65(Wt);
-  const isVideoOn = useHMSStore65(selectIsLocalVideoEnabled5);
+  const localPeer = useHMSStore66(selectLocalPeer6);
+  const role = useHMSStore66(Wt);
+  const isVideoOn = useHMSStore66(selectIsLocalVideoEnabled5);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack);
-  const track = useHMSStore65(trackSelector);
-  const [blurAmount, setBlurAmount] = useState53(VBHandler.getBlurAmount() || 0.5);
-  const roomState = useHMSStore65(selectRoomState4);
-  const isLargeRoom = useHMSStore65(selectIsLargeRoom3);
-  const isEffectsEnabled = useHMSStore65(ec);
-  const effectsKey = useHMSStore65(tc);
-  const isPluginAdded = useHMSStore65(selectIsLocalVideoPluginPresent(((_a8 = VBHandler) == null ? void 0 : _a8.getName()) || ""));
-  const background = useHMSStore65(em(APP_DATA.background));
+  const track = useHMSStore66(trackSelector);
+  const [blurAmount, setBlurAmount] = useState54(VBHandler.getBlurAmount() || 0.5);
+  const roomState = useHMSStore66(selectRoomState4);
+  const isLargeRoom = useHMSStore66(selectIsLargeRoom3);
+  const isEffectsEnabled = useHMSStore66(ec);
+  const effectsKey = useHMSStore66(tc);
+  const isPluginAdded = useHMSStore66(selectIsLocalVideoPluginPresent(((_a8 = VBHandler) == null ? void 0 : _a8.getName()) || ""));
+  const background = useHMSStore66(em(APP_DATA.background));
   const mediaList = backgroundMedia.length ? backgroundMedia.map((media) => media.url || "") : defaultMedia2;
   const inPreview = roomState === HMSRoomState4.Preview;
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
-  useEffect31(() => {
+  useEffect32(() => {
     if (!(track == null ? void 0 : track.id)) {
       return;
     }
@@ -26241,19 +26382,19 @@ var VBPicker = ({ backgroundMedia = [] }) => {
       handleDefaultBackground();
     }
   }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track == null ? void 0 : track.id, background, blurAmount]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!isVideoOn) {
       toggleVB();
     }
   }, [isVideoOn, toggleVB]);
-  return /* @__PURE__ */ React125.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React125.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React125.createElement(Text, { variant: "h6", css: { color: "$on_surface_high" } }, "Virtual Background"), /* @__PURE__ */ React125.createElement(
+  return /* @__PURE__ */ React126.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React126.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React126.createElement(Text, { variant: "h6", css: { color: "$on_surface_high" } }, "Virtual Background"), /* @__PURE__ */ React126.createElement(
     Box,
     {
       css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
       onClick: toggleVB
     },
-    /* @__PURE__ */ React125.createElement(CrossIcon21, null)
-  )), showVideoTile ? /* @__PURE__ */ React125.createElement(
+    /* @__PURE__ */ React126.createElement(CrossIcon21, null)
+  )), showVideoTile ? /* @__PURE__ */ React126.createElement(
     Video,
     {
       mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
@@ -26261,7 +26402,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
       "data-testid": "preview_tile",
       css: { width: "100%", height: "16rem" }
     }
-  ) : null, /* @__PURE__ */ React125.createElement(
+  ) : null, /* @__PURE__ */ React126.createElement(
     Box,
     {
       css: {
@@ -26272,14 +26413,14 @@ var VBPicker = ({ backgroundMedia = [] }) => {
         pr: "$10"
       }
     },
-    /* @__PURE__ */ React125.createElement(
+    /* @__PURE__ */ React126.createElement(
       VBCollection,
       {
         title: "Effects",
         options: [
           {
             title: "No effect",
-            icon: /* @__PURE__ */ React125.createElement(CrossCircleIcon3, { style: iconDims }),
+            icon: /* @__PURE__ */ React126.createElement(CrossCircleIcon3, { style: iconDims }),
             value: HMSVirtualBackgroundTypes3.NONE,
             onClick: () => __async(void 0, null, function* () {
               yield VBHandler.removeEffects();
@@ -26288,7 +26429,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
           },
           {
             title: "Blur",
-            icon: /* @__PURE__ */ React125.createElement(BlurPersonHighIcon, { style: iconDims }),
+            icon: /* @__PURE__ */ React126.createElement(BlurPersonHighIcon, { style: iconDims }),
             value: HMSVirtualBackgroundTypes3.BLUR,
             onClick: () => __async(void 0, null, function* () {
               var _a9;
@@ -26300,7 +26441,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
         activeBackground: background
       }
     ),
-    /* @__PURE__ */ React125.createElement(Flex, { direction: "column", css: { w: "100%", gap: "$8", mt: "$8" } }, background === HMSVirtualBackgroundTypes3.BLUR && isEffectsEnabled && effectsKey ? /* @__PURE__ */ React125.createElement(Box, null, /* @__PURE__ */ React125.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold", mb: "$4" } }, "Blur intensity"), /* @__PURE__ */ React125.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", alignItems: "center", gap: "$4" } }, /* @__PURE__ */ React125.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "Low"), /* @__PURE__ */ React125.createElement(
+    /* @__PURE__ */ React126.createElement(Flex, { direction: "column", css: { w: "100%", gap: "$8", mt: "$8" } }, background === HMSVirtualBackgroundTypes3.BLUR && isEffectsEnabled && effectsKey ? /* @__PURE__ */ React126.createElement(Box, null, /* @__PURE__ */ React126.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold", mb: "$4" } }, "Blur intensity"), /* @__PURE__ */ React126.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", alignItems: "center", gap: "$4" } }, /* @__PURE__ */ React126.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "Low"), /* @__PURE__ */ React126.createElement(
       Slider,
       {
         showTooltip: false,
@@ -26313,8 +26454,8 @@ var VBPicker = ({ backgroundMedia = [] }) => {
         min: 0.1,
         max: 1
       }
-    ), /* @__PURE__ */ React125.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "High"))) : null),
-    /* @__PURE__ */ React125.createElement(
+    ), /* @__PURE__ */ React126.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "High"))) : null),
+    /* @__PURE__ */ React126.createElement(
       VBCollection,
       {
         title: "Backgrounds",
@@ -26371,8 +26512,7 @@ var Wrapper3 = styled("div", {
     mobileStream: {
       true: {
         "@md": {
-          position: "unset !important",
-          background: "red"
+          position: "unset"
         }
       }
     },
@@ -26414,9 +26554,9 @@ var SidePane = ({
 }) => {
   var _a8, _b7, _c, _d, _e, _f;
   const isMobile = useMedia22(config.media.md);
-  const sidepane = useHMSStore66(selectAppData6(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore66(selectAppData6(APP_DATA.activeScreensharePeerId));
-  const trackId = (_a8 = useHMSStore66(selectVideoTrackByPeerID4(activeScreensharePeerId))) == null ? void 0 : _a8.id;
+  const sidepane = useHMSStore67(selectAppData6(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore67(selectAppData6(APP_DATA.activeScreensharePeerId));
+  const trackId = (_a8 = useHMSStore67(selectVideoTrackByPeerID4(activeScreensharePeerId))) == null ? void 0 : _a8.id;
   const { elements } = useRoomLayoutConferencingScreen();
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
@@ -26424,7 +26564,7 @@ var SidePane = ({
   const isMobileHLSStream = useMobileHLSStream();
   const backgroundMedia = ((_c = (_b7 = preview_elements == null ? void 0 : preview_elements.virtual_background) == null ? void 0 : _b7.background_media) == null ? void 0 : _c.length) ? (_d = preview_elements == null ? void 0 : preview_elements.virtual_background) == null ? void 0 : _d.background_media : ((_e = elements == null ? void 0 : elements.virtual_background) == null ? void 0 : _e.background_media) || [];
   const resetSidePane = useSidepaneReset();
-  useEffect32(() => {
+  useEffect33(() => {
     return () => {
       resetSidePane();
     };
@@ -26441,7 +26581,7 @@ var SidePane = ({
     landscapeStream: isLandscapeHLSStream,
     mobileStream: isMobileHLSStream
   };
-  return /* @__PURE__ */ React126.createElement(
+  return /* @__PURE__ */ React127.createElement(
     Flex,
     {
       direction: "column",
@@ -26458,7 +26598,7 @@ var SidePane = ({
         }
       }
     },
-    trackId && layoutMode === LayoutMode.GALLERY && /* @__PURE__ */ React126.createElement(
+    trackId && layoutMode === LayoutMode.GALLERY && /* @__PURE__ */ React127.createElement(
       VideoTile_default,
       __spreadValues({
         peerId: activeScreensharePeerId,
@@ -26468,7 +26608,7 @@ var SidePane = ({
         rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
       }, tileLayout)
     ),
-    match7(sidepane).with(SIDE_PANE_OPTIONS.POLLS, () => /* @__PURE__ */ React126.createElement(
+    match9(sidepane).with(SIDE_PANE_OPTIONS.POLLS, () => /* @__PURE__ */ React127.createElement(
       Wrapper3,
       __spreadValues({
         css: {
@@ -26478,15 +26618,15 @@ var SidePane = ({
           }
         }
       }, commonProps),
-      /* @__PURE__ */ React126.createElement(Polls, null)
-    )).with(SIDE_PANE_OPTIONS.VB, () => /* @__PURE__ */ React126.createElement(Wrapper3, __spreadValues({ css: { p: "$10 $6 $10 $10" } }, commonProps), /* @__PURE__ */ React126.createElement(VBPicker, { backgroundMedia }))).with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => /* @__PURE__ */ React126.createElement(Wrapper3, __spreadProps(__spreadValues({}, commonProps), { overlayChat: mwebStreamingChat }), /* @__PURE__ */ React126.createElement(
+      /* @__PURE__ */ React127.createElement(Polls, null)
+    )).with(SIDE_PANE_OPTIONS.VB, () => /* @__PURE__ */ React127.createElement(Wrapper3, __spreadValues({ css: { p: "$10 $6 $10 $10" } }, commonProps), /* @__PURE__ */ React127.createElement(VBPicker, { backgroundMedia }))).with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => /* @__PURE__ */ React127.createElement(Wrapper3, __spreadProps(__spreadValues({}, commonProps), { overlayChat: mwebStreamingChat }), /* @__PURE__ */ React127.createElement(
       SidePaneTabs,
       {
         hideControls,
         active: sidepane,
         hideTab: isMobileHLSStream || isLandscapeHLSStream
       }
-    ))).with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => /* @__PURE__ */ React126.createElement(Wrapper3, __spreadValues({}, commonProps), /* @__PURE__ */ React126.createElement(RoomDetailsPane, null))).otherwise(() => {
+    ))).with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => /* @__PURE__ */ React127.createElement(Wrapper3, __spreadValues({}, commonProps), /* @__PURE__ */ React127.createElement(RoomDetailsPane, null))).otherwise(() => {
       return null;
     })
   );
@@ -26495,9 +26635,9 @@ var SidePane_default = SidePane;
 
 // src/Prebuilt/components/Chip.tsx
 init_define_process_env();
-import React127 from "react";
+import React128 from "react";
 var Chip = ({
-  icon = /* @__PURE__ */ React127.createElement(React127.Fragment, null),
+  icon = /* @__PURE__ */ React128.createElement(React128.Fragment, null),
   content = "",
   backgroundColor = "$surface_default",
   textColor = "$on_surface_high",
@@ -26508,7 +26648,7 @@ var Chip = ({
   if (hideIfNoContent && !content) {
     return null;
   }
-  return /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React128.createElement(
     Flex,
     {
       align: "center",
@@ -26516,67 +26656,17 @@ var Chip = ({
       onClick: () => onClick == null ? void 0 : onClick()
     },
     icon,
-    /* @__PURE__ */ React127.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor } }, content)
+    /* @__PURE__ */ React128.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor } }, content)
   );
 };
 var Chip_default = Chip;
 
 // src/Prebuilt/components/FullPageProgress.jsx
 init_define_process_env();
-import React128 from "react";
-var FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ React128.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React128.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React128.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
+import React129 from "react";
+var FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ React129.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React129.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React129.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
 var FullPageProgress_default = FullPageProgress;
 
-// src/Prebuilt/components/Header/HeaderComponents.jsx
-init_define_process_env();
-import React129, { useEffect as useEffect33, useState as useState54 } from "react";
-import { selectDominantSpeaker, useHMSStore as useHMSStore67 } from "@100mslive/react-sdk";
-import { VolumeOneIcon } from "@100mslive/react-icons";
-var SpeakerTag = () => {
-  const dominantSpeaker = useHMSStore67(selectDominantSpeaker);
-  return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React129.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "center",
-      css: { flex: "1 1 0", color: "$on_surface_high", "@md": { display: "none" } }
-    },
-    /* @__PURE__ */ React129.createElement(VerticalDivider, { css: { ml: "$8" } }),
-    /* @__PURE__ */ React129.createElement(VolumeOneIcon, null),
-    /* @__PURE__ */ React129.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
-  );
-};
-var LogoImg = styled("img", {
-  maxHeight: "$14",
-  w: "auto",
-  objectFit: "contain",
-  "@md": {
-    maxHeight: "$12"
-  }
-});
-var Logo = () => {
-  var _a8;
-  const roomLayout = useRoomLayout();
-  const logo = (_a8 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a8.url;
-  const [hideImage, setHideImage] = useState54(false);
-  useEffect33(() => {
-    if (hideImage) {
-      setHideImage(false);
-    }
-  }, [logo]);
-  return logo && !hideImage ? /* @__PURE__ */ React129.createElement(
-    LogoImg,
-    {
-      src: logo,
-      alt: "Brand Logo",
-      onError: (e) => {
-        e.target.onerror = null;
-        setHideImage(true);
-      }
-    }
-  ) : null;
-};
-
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 init_define_process_env();
 import React130 from "react";
@@ -26828,7 +26918,7 @@ var PreviewControls = ({ hideSettings, vbEnabled }) => {
 };
 var PreviewSettings = React131.memo(() => {
   const [open, setOpen] = useState55(false);
-  return /* @__PURE__ */ React131.createElement(Fragment13, null, /* @__PURE__ */ React131.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React131.createElement(SettingsIcon6, null)), open && /* @__PURE__ */ React131.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
+  return /* @__PURE__ */ React131.createElement(Fragment12, null, /* @__PURE__ */ React131.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React131.createElement(SettingsIcon6, null)), open && /* @__PURE__ */ React131.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
 });
 var PreviewJoin_default = PreviewJoin;
 
@@ -26951,7 +27041,7 @@ import {
   selectPeers as selectPeers3,
   selectPeerScreenSharing,
   useHMSStore as useHMSStore76,
-  useHMSVanillaStore as useHMSVanillaStore13
+  useHMSVanillaStore as useHMSVanillaStore12
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
@@ -27172,13 +27262,13 @@ import { useEffect as useEffect38, useMemo as useMemo12, useState as useState56
 import { useMeasure as useMeasure5, useMedia as useMedia27 } from "react-use";
 import {
   getPeersWithTiles,
-  selectTracksMap as selectTracksMap3,
-  useHMSVanillaStore as useHMSVanillaStore12
+  selectTracksMap as selectTracksMap4,
+  useHMSVanillaStore as useHMSVanillaStore11
 } from "@100mslive/react-sdk";
 var aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
 var usePagesWithTiles = ({ peers, maxTileCount }) => {
-  const vanillaStore = useHMSVanillaStore12();
-  const tracksMap = vanillaStore.getState(selectTracksMap3);
+  const vanillaStore = useHMSVanillaStore11();
+  const tracksMap = vanillaStore.getState(selectTracksMap4);
   const peersWithTiles = useMemo12(
     () => getPeersWithTiles(peers, tracksMap, () => false),
     [peers, tracksMap]
@@ -27203,7 +27293,7 @@ var useTileLayout = ({
   maxTileCount,
   edgeToEdge = false
 }) => {
-  const vanillaStore = useHMSVanillaStore12();
+  const vanillaStore = useHMSVanillaStore11();
   const [ref, { width, height }] = useMeasure5();
   const isMobile = useMedia27(config.media.lg);
   const [pagesWithTiles, setPagesWithTiles] = useState56([]);
@@ -27985,7 +28075,7 @@ var GridLayout = ({
     }
     return peers;
   }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, localPeerID, prominentRoles, peers, pinnedTrack]);
-  const vanillaStore = useHMSVanillaStore13();
+  const vanillaStore = useHMSVanillaStore12();
   const [sortedPeers, setSortedPeers] = useState63(updatedPeers);
   const peersSorter = useMemo16(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
   const [pageSize, setPageSize] = useState63(0);
@@ -28298,7 +28388,7 @@ var useCloseScreenshareWhiteboard = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React151.lazy(() => import("./HLSView-MYKM5AXS.js"));
+var HLSView = React151.lazy(() => import("./HLSView-TOMPA4E4.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -28314,6 +28404,7 @@ var VideoStreamingSection = ({
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
   useEffect48(() => {
     if (!isConnected) {
@@ -28352,7 +28443,7 @@ var VideoStreamingSection = ({
       css: {
         size: "100%",
         position: "relative",
-        gap: "$4"
+        gap: isMobileHLSStream || isLandscapeHLSStream ? "0" : "$4"
       },
       direction: isMobileHLSStream ? "column" : "row"
     },
@@ -28598,9 +28689,9 @@ var Header2 = () => {
 // src/Prebuilt/components/PreviousRoleInMetadata.tsx
 init_define_process_env();
 import { useEffect as useEffect49 } from "react";
-import { selectLocalPeerRoleName as selectLocalPeerRoleName7, useHMSVanillaStore as useHMSVanillaStore14 } from "@100mslive/react-sdk";
+import { selectLocalPeerRoleName as selectLocalPeerRoleName7, useHMSVanillaStore as useHMSVanillaStore13 } from "@100mslive/react-sdk";
 var PreviousRoleInMetadata = () => {
-  const vanillaStore = useHMSVanillaStore14();
+  const vanillaStore = useHMSVanillaStore13();
   const { updateMetaData } = useMyMetadata();
   useEffect49(() => {
     let previousRole = vanillaStore.getState(selectLocalPeerRoleName7);
@@ -28911,7 +29002,7 @@ import {
   selectIsLocalAudioEnabled as selectIsLocalAudioEnabled2,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled8,
   useHMSActions as useHMSActions47,
-  useHMSVanillaStore as useHMSVanillaStore15
+  useHMSVanillaStore as useHMSVanillaStore14
 } from "@100mslive/react-sdk";
 var isEvenListenersAttached = false;
 var _actions, _store, _toggleAudio, _toggleVideo, _hideSidepane, _toggleStatsForNerds, _toggleHlsStats, _keyDownHandler, _bind, _unbind;
@@ -28998,7 +29089,7 @@ _keyDownHandler = new WeakMap();
 _bind = new WeakMap();
 _unbind = new WeakMap();
 var KeyboardHandler = () => {
-  const store = useHMSVanillaStore15();
+  const store = useHMSVanillaStore14();
   const actions = useHMSActions47();
   useEffect53(() => {
     const keyboardManager = new KeyboardInputManager(store, actions);
@@ -29188,7 +29279,7 @@ import {
   useCustomEvent as useCustomEvent4,
   useHMSNotifications as useHMSNotifications10,
   useHMSStore as useHMSStore88,
-  useHMSVanillaStore as useHMSVanillaStore17
+  useHMSVanillaStore as useHMSVanillaStore16
 } from "@100mslive/react-sdk";
 import { GroupIcon as GroupIcon2 } from "@100mslive/react-icons";
 
@@ -29259,10 +29350,11 @@ import {
   HMSNotificationTypes as HMSNotificationTypes2,
   HMSRoomState as HMSRoomState9,
   selectHasPeerHandRaised as selectHasPeerHandRaised4,
+  selectPeerByID as selectPeerByID6,
   selectRoomState as selectRoomState9,
   useHMSNotifications as useHMSNotifications2,
   useHMSStore as useHMSStore87,
-  useHMSVanillaStore as useHMSVanillaStore16
+  useHMSVanillaStore as useHMSVanillaStore15
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/ToastBatcher.js
@@ -29523,10 +29615,11 @@ ToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));
 var HandRaisedNotifications = () => {
   const notification = useHMSNotifications2(HMSNotificationTypes2.HAND_RAISE_CHANGED);
   const roomState = useHMSStore87(selectRoomState9);
-  const vanillaStore = useHMSVanillaStore16();
+  const vanillaStore = useHMSVanillaStore15();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
   const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
   useEffect57(() => {
+    var _a8;
     if (!(notification == null ? void 0 : notification.data)) {
       return;
     }
@@ -29534,8 +29627,10 @@ var HandRaisedNotifications = () => {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised4(notification.data.id));
+    const peer = vanillaStore.getState(selectPeerByID6(notification.data.id));
     if (hasPeerHandRaised) {
-      ToastBatcher.showToast({ notification, type: on_stage_exp ? "RAISE_HAND_HLS" : "RAISE_HAND" });
+      const showCTA = (peer == null ? void 0 : peer.roleName) && ((_a8 = (on_stage_exp == null ? void 0 : on_stage_exp.off_stage_roles) || []) == null ? void 0 : _a8.includes(peer.roleName));
+      ToastBatcher.showToast({ notification, type: showCTA ? "RAISE_HAND_HLS" : "RAISE_HAND" });
       console.debug("Metadata updated", notification.data);
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
@@ -29879,7 +29974,7 @@ function Notifications() {
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const screenProps = useRoomLayoutConferencingScreen();
-  const vanillaStore = useHMSVanillaStore17();
+  const vanillaStore = useHMSVanillaStore16();
   const togglePollView = usePollViewToggle();
   const { showNotification } = useAwayNotifications2();
   const amIScreenSharing = useHMSStore88(selectIsLocalScreenShared2);
@@ -30126,7 +30221,7 @@ import {
   selectPeerNameByID as selectPeerNameByID6,
   useCustomEvent as useCustomEvent5,
   useHMSStore as useHMSStore91,
-  useHMSVanillaStore as useHMSVanillaStore18
+  useHMSVanillaStore as useHMSVanillaStore17
 } from "@100mslive/react-sdk";
 var emojiCount = 1;
 var flyAndFade = keyframes({
@@ -30153,7 +30248,7 @@ var getStartingPoints = (isMobile) => {
 };
 function FlyingEmoji() {
   const localPeerId = useHMSStore91(selectLocalPeerID17);
-  const vanillaStore = useHMSVanillaStore18();
+  const vanillaStore = useHMSVanillaStore17();
   const [emojis, setEmojis] = useState72([]);
   const isMobile = useMedia38(config.media.md);
   const startingPoints = useMemo19(() => getStartingPoints(isMobile), [isMobile]);
@@ -30616,8 +30711,9 @@ export {
   QRCode,
   Link,
   Collapsible,
-  getFormattedCount,
   useRoomLayoutConferencingScreen,
+  useRoomLayoutHeader,
+  useIsSidepaneTypeOpen,
   useSidepaneToggle,
   usePollViewToggle,
   IconButton_default,
@@ -30629,6 +30725,7 @@ export {
   DialogRow,
   ChatToggle,
   Logo,
+  RoomDetailsRow,
   HMSPrebuilt,
   Progress,
   TextArea
@@ -30645,4 +30742,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-DRBTAFKN.js.map
+//# sourceMappingURL=chunk-FUDX3LDB.js.map