@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.7

package/dist/index.cjs.js

@@ -105,7 +105,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_8f8a0291-7787-40d4-befb-0019c24b8a38", 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_webpack_cli: "^4.9.2", npm_package_devDependencies_webpack_bundle_analyzer: "^4.5.0", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.19 npm/? node/v16.20.2 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.8.16-alpha.0", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_8f8a0291-7787-40d4-befb-0019c24b8a38", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/16.20.2/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.11.16-alpha.0", 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.0", 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", 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_webpack_manifest_plugin: "^4.1.1", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.3", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", 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: "574", 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.7", 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_dependencies_react_router_dom: "^6.3.0", 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.8/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.1/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20230911.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", 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_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:18506", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_scripts_app: "cd apps/100ms-web && yarn start", 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_sdk: "cd packages/hms-video-web && yarn start", 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.1.16-alpha.0", 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", GITHUB_RUN_ID: "6198915575", 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_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: "02a796684045c2468c14db4cb894c56a17c6c2ba", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "apps/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "8a4484713b154f3742de308ef3744078cdc8cc6e16292ef890f36d3e4d15b9d8", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/main", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GOROOT_1_18_X64: "/opt/hostedtoolcache/go/1.18.10/x64", GITHUB_ACTION_REPOSITORY: "", npm_package_workspaces_2: "playwright/*", npm_package_devDependencies_postcss_loader: "^6.2.1", PATH: "/tmp/yarn--1694786016419-0.6818104641303016:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1694786016213-0.12270191559192756:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1694785976000-0.6614035614405027:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1694785975797-0.26100102923431345:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/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:/snap/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/16.20.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_ebe58d16-d54e-40ee-9a20-f8cf86e54702", INVOCATION_ID: "c5fa857d24e84556a121754af31fdaec", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", GOROOT_1_19_X64: "/opt/hostedtoolcache/go/1.19.13/x64", npm_package_husky_hooks_pre_push: "lint-staged", 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", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "372", GITHUB_TRIGGERING_ACTOR: "eswarclynn", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies_pusher_js: "^7.0.3", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "80 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: "80 KB", npm_package_lint_staged__: "format && lint:fix", npm_package_devDependencies_webpack: "^5.76.0", 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 3", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "main", GITHUB_REPOSITORY: "100mslive/web-sdks", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "20 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-web/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_webpack_dev_server: "^4.7.4", 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.8.16-alpha.0", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", STATS_NM: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.1.7-alpha.0", npm_package_size_limit_4_limit: "400 KB", npm_package_size_limit_1_path: "packages/hms-video-web/dist/index.js", npm_package_husky_hooks_pre_commit: "lint-staged", 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_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/hms-video-store/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: "20 KB", npm_package_size_limit_3_path: "packages/hms-video-store/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "02a796684045c2468c14db4cb894c56a17c6c2ba", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "20 KB", npm_package_size_limit_4_path: "packages/roomkit-react/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/main", GITHUB_ACTOR: "eswarclynn", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_size_limit_8_limit: "100 KB", npm_package_size_limit_5_path: "packages/roomkit-react/dist/index.js", npm_config_strict_ssl: "true", npm_package_license: "MIT", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_9_limit: "100 KB", npm_package_size_limit_6_path: "packages/hms-virtual-background/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_8f8a0291-7787-40d4-befb-0019c24b8a38", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "64120992", 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/hms-virtual-background/dist/index.js", 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.10.0-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_8f8a0291-7787-40d4-befb-0019c24b8a38", npm_package_size_limit_8_path: "packages/react-icons/dist/index.cjs.js", 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_size_limit_9_path: "packages/react-icons/dist/index.js", 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_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_scripts_app_custom: "cd apps/100ms-custom-app && 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_8f8a0291-7787-40d4-befb-0019c24b8a38" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_65f74fd7-f5bc-45d5-85b8-1c9068538afc", 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_webpack_cli: "^4.9.2", npm_package_devDependencies_webpack_bundle_analyzer: "^4.5.0", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.19 npm/? node/v16.20.2 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.8.16", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_65f74fd7-f5bc-45d5-85b8-1c9068538afc", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/16.20.2/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.11.16", 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.0", 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", 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_webpack_manifest_plugin: "^4.1.1", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.3", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", 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: "574", 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.7", 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_dependencies_react_router_dom: "^6.3.0", 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.8/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.1/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20230917.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", 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_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:17542", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_scripts_app: "cd apps/100ms-web && yarn start", 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_sdk: "cd packages/hms-video-web && yarn start", 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.1.16", 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", GITHUB_RUN_ID: "6274864041", 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_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: "c06edac3e71481de08e948ffe0affaf705564ad1", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "apps/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "a13657573a20325fbab8195dc3c439a3cab8b45d9afa8908077111230c193f7d", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/main", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_workspaces_2: "playwright/*", npm_package_devDependencies_postcss_loader: "^6.2.1", PATH: "/tmp/yarn--1695389159534-0.6976221952069648:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1695389159279-0.6182414195103341:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1695389110508-0.5040870972461822:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1695389110274-0.11196884659863793:/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/16.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/16.20.2/x64/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:/snap/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/16.20.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_35529230-1c18-4abd-9f2e-d2da638d7fac", INVOCATION_ID: "16ba877776b64e45add1e48585532bee", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", GOROOT_1_19_X64: "/opt/hostedtoolcache/go/1.19.13/x64", npm_package_husky_hooks_pre_push: "lint-staged", 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", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "373", GITHUB_TRIGGERING_ACTOR: "raviteja83", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies_pusher_js: "^7.0.3", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "80 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: "80 KB", npm_package_lint_staged__: "format && lint:fix", npm_package_devDependencies_webpack: "^5.76.0", 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 5", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "main", GITHUB_REPOSITORY: "100mslive/web-sdks", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "20 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-web/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_webpack_dev_server: "^4.7.4", 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.8.16", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", STATS_NM: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.1.7", npm_package_size_limit_4_limit: "400 KB", npm_package_size_limit_1_path: "packages/hms-video-web/dist/index.js", npm_package_husky_hooks_pre_commit: "lint-staged", 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_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/hms-video-store/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: "20 KB", npm_package_size_limit_3_path: "packages/hms-video-store/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "c06edac3e71481de08e948ffe0affaf705564ad1", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "20 KB", npm_package_size_limit_4_path: "packages/roomkit-react/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/main", GITHUB_ACTOR: "raviteja83", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_size_limit_8_limit: "100 KB", npm_package_size_limit_5_path: "packages/roomkit-react/dist/index.js", npm_config_strict_ssl: "true", npm_package_license: "MIT", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_9_limit: "100 KB", npm_package_size_limit_6_path: "packages/hms-virtual-background/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_65f74fd7-f5bc-45d5-85b8-1c9068538afc", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "6763261", 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/hms-virtual-background/dist/index.js", 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.10.0-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_65f74fd7-f5bc-45d5-85b8-1c9068538afc", npm_package_size_limit_8_path: "packages/react-icons/dist/index.cjs.js", 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_size_limit_9_path: "packages/react-icons/dist/index.js", 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_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_scripts_app_custom: "cd apps/100ms-custom-app && 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_65f74fd7-f5bc-45d5-85b8-1c9068538afc" };
   }
 });
 
@@ -1776,7 +1776,7 @@ var init_Input = __esm({
         border: "1px solid transparent"
       },
       "&::placeholder": {
-        color: "$on_surface_low"
+        color: "$on_surface_medium"
       },
       variants: {
         alert_error_default: {
@@ -1917,19 +1917,10 @@ var init_StyledVideoTile = __esm({
       textOverflow: "ellipsis",
       fontFamily: "$sans"
     });
-    AttributeBox = styled("div", __spreadValues({
-      position: "absolute",
-      color: "$on_primary_high",
-      w: "$12",
-      h: "$12",
-      bg: "$secondary_dim",
-      r: "$round"
-    }, flexCenter));
-    AudioIndicator = styled("div", __spreadProps(__spreadValues({
+    AttributeBox = styled("div", __spreadProps(__spreadValues({
       position: "absolute",
       top: "$4",
-      right: "$4",
-      color: "$on_primary_high",
+      color: "$on_secondary_high",
       bg: "$secondary_dim",
       borderRadius: "$round",
       width: "$14",
@@ -1950,12 +1941,18 @@ var init_StyledVideoTile = __esm({
             width: "$13",
             height: "$13"
           }
+        },
+        position: {
+          left: { left: "$4" },
+          right: { right: "$4" }
         }
       },
       defaultVariants: {
-        size: "medium"
+        size: "medium",
+        position: "left"
       }
     }));
+    AudioIndicator = styled(AttributeBox, { defaultVariants: { position: "right" } });
     FullScreenButton = styled("button", {
       width: "2.25rem",
       height: "2.25rem",
@@ -1992,9 +1989,9 @@ var init_StyledVideoTile = __esm({
       Container,
       Overlay: Overlay2,
       Info,
-      AudioIndicator,
       AvatarContainer,
       AttributeBox,
+      AudioIndicator,
       FullScreenButton
     };
   }
@@ -5844,7 +5841,7 @@ var init_useRedirectToLeave = __esm({
 });
 
 // src/Prebuilt/common/utils.js
-var getMetadata, isScreenshareSupported, getFormattedCount, formatTime;
+var getMetadata, isScreenshareSupported, getFormattedCount, formatTime, getAttributeBoxSize;
 var init_utils2 = __esm({
   "src/Prebuilt/common/utils.js"() {
     "use strict";
@@ -5872,6 +5869,12 @@ var init_utils2 = __esm({
       const hour = hours !== 0 ? `${hours < 10 ? "0" : ""}${hours}:` : "";
       return `${hour}${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
     };
+    getAttributeBoxSize = (width, height) => {
+      if (!width || !height) {
+        return "";
+      }
+      return width < 180 || height < 180 ? "small" : "medium";
+    };
   }
 });
 
@@ -6240,11 +6243,12 @@ var init_useMetadata = __esm({
           yield hmsActions.lowerLocalPeerHand();
         } else {
           yield hmsActions.raiseLocalPeerHand();
+          yield update({ isBRBOn: false });
         }
       }), [isHandRaised]);
       const toggleBRB = (0, import_react49.useCallback)(() => __async(void 0, null, function* () {
         const newValue = !(metaData == null ? void 0 : metaData.isBRBOn);
-        yield update({ isBRBOn: !(metaData == null ? void 0 : metaData.isBRBOn) });
+        yield update({ isBRBOn: newValue });
         if (newValue) {
           yield hmsActions.lowerLocalPeerHand();
         }
@@ -8654,7 +8658,7 @@ var init_peerTileUtils = __esm({
 });
 
 // src/Prebuilt/components/VideoTile.jsx
-var import_react74, import_react_use9, import_react_sdk36, import_react_icons29, Tile, metaStyles, heightAnimation, AudioLevelIndicator, AudioLevel, PeerMetadata, VideoTile, VideoTile_default;
+var import_react74, import_react_use9, import_react_sdk36, import_react_icons29, Tile, heightAnimation, AudioLevelIndicator, AudioLevel, PeerMetadata, VideoTile, VideoTile_default;
 var init_VideoTile2 = __esm({
   "src/Prebuilt/components/VideoTile.jsx"() {
     "use strict";
@@ -8673,6 +8677,7 @@ var init_VideoTile2 = __esm({
     init_VideoTile();
     init_peerTileUtils();
     init_useUISettings();
+    init_utils2();
     init_constants();
     Tile = ({
       peerId,
@@ -8690,6 +8695,7 @@ var init_VideoTile2 = __esm({
       hideAudioMuteOnTile = false,
       hideMetadataOnTile = false
     }) => {
+      var _a7, _b7;
       const trackSelector = trackId ? (0, import_react_sdk36.selectVideoTrackByID)(trackId) : (0, import_react_sdk36.selectVideoTrackByPeerID)(peerId);
       const track = (0, import_react_sdk36.useHMSStore)(trackSelector);
       const isMobile = (0, import_react_use9.useMedia)(config.media.md);
@@ -8719,21 +8725,25 @@ var init_VideoTile2 = __esm({
       const onHoverHandler = (0, import_react74.useCallback)((event) => {
         setIsMouseHovered(event.type === "mouseenter");
       }, []);
-      const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
+      const ref = (0, import_react74.useRef)(null);
+      const calculatedHeight = ((_a7 = ref.current) == null ? void 0 : _a7.clientHeight) || "";
+      const calculatedWidth = ((_b7 = ref.current) == null ? void 0 : _b7.clientWidth) || "";
+      const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
       const avatarSize = (0, import_react74.useMemo)(() => {
-        if (!width || !height) {
+        if (!calculatedWidth || !calculatedHeight) {
           return void 0;
         }
-        if (width <= 150 || height <= 150) {
+        if (calculatedWidth <= 150 || calculatedHeight <= 150) {
           return "small";
-        } else if (width <= 300 || height <= 300) {
+        } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
           return "medium";
         }
         return "large";
-      }, [width, height]);
+      }, [calculatedWidth, calculatedHeight]);
       return /* @__PURE__ */ import_react74.default.createElement(
         StyledVideoTile.Root,
         {
+          ref,
           css: __spreadValues({
             width,
             height
@@ -8769,7 +8779,7 @@ var init_VideoTile2 = __esm({
             StyledVideoTile.AudioIndicator,
             {
               "data-testid": "participant_audio_mute_icon",
-              size: width && height && (width < 180 || height < 180) ? "small" : "medium"
+              size: getAttributeBoxSize(calculatedWidth, calculatedHeight)
             },
             /* @__PURE__ */ import_react74.default.createElement(import_react_icons29.MicOffIcon, null)
           ) : /* @__PURE__ */ import_react74.default.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id }) : null,
@@ -8783,7 +8793,7 @@ var init_VideoTile2 = __esm({
               enableSpotlightingPeer
             }
           ) : null,
-          !hideMetadataOnTile && /* @__PURE__ */ import_react74.default.createElement(PeerMetadata, { peerId }),
+          !hideMetadataOnTile && /* @__PURE__ */ import_react74.default.createElement(PeerMetadata, { peerId, height: calculatedHeight, width: calculatedWidth }),
           /* @__PURE__ */ import_react74.default.createElement(
             TileConnection_default,
             {
@@ -8799,7 +8809,6 @@ var init_VideoTile2 = __esm({
         ) : null
       );
     };
-    metaStyles = { top: "$4", left: "$4", width: "$14", height: "$14" };
     heightAnimation = (value) => keyframes({
       "50%": {
         transform: `scale3d(1,${value},1)`
@@ -8837,11 +8846,11 @@ var init_VideoTile2 = __esm({
     AudioLevel = ({ trackId }) => {
       return /* @__PURE__ */ import_react74.default.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ import_react74.default.createElement(Flex, { align: "center", justify: "center", css: { gap: "$2" } }, [3, 2, 3].map((v, i) => /* @__PURE__ */ import_react74.default.createElement(AudioLevelIndicator, { trackId, value: v, delay: i * 0.15, key: i }))));
     };
-    PeerMetadata = ({ peerId }) => {
+    PeerMetadata = ({ peerId, height, width }) => {
       const metaData = (0, import_react_sdk36.useHMSStore)((0, import_react_sdk36.selectPeerMetadata)(peerId));
       const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
       const isHandRaised = (0, import_react_sdk36.useHMSStore)((0, import_react_sdk36.selectHasPeerHandRaised)(peerId));
-      return /* @__PURE__ */ import_react74.default.createElement(import_react74.Fragment, null, isHandRaised ? /* @__PURE__ */ import_react74.default.createElement(StyledVideoTile.AttributeBox, { css: metaStyles, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ import_react74.default.createElement(import_react_icons29.HandIcon, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ import_react74.default.createElement(StyledVideoTile.AttributeBox, { css: metaStyles, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ import_react74.default.createElement(import_react_icons29.BrbTileIcon, { width: 22, height: 22 })) : null);
+      return /* @__PURE__ */ import_react74.default.createElement(import_react74.Fragment, null, isHandRaised ? /* @__PURE__ */ import_react74.default.createElement(StyledVideoTile.AttributeBox, { size: getAttributeBoxSize(width, height), "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ import_react74.default.createElement(import_react_icons29.HandIcon, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ import_react74.default.createElement(StyledVideoTile.AttributeBox, { size: getAttributeBoxSize(width, height), "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ import_react74.default.createElement(import_react_icons29.BrbTileIcon, { width: 22, height: 22 })) : null);
     };
     VideoTile = import_react74.default.memo(Tile);
     VideoTile_default = VideoTile;
@@ -9302,7 +9311,7 @@ var init_PreviewJoin = __esm({
           }
         },
         /* @__PURE__ */ import_react78.default.createElement(PreviewTile, { name, error: previewError })
-      ) : null, /* @__PURE__ */ import_react78.default.createElement(Box, { css: { w: "100%", maxWidth: `${aspectRatio * 360}px` } }, /* @__PURE__ */ import_react78.default.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ import_react78.default.createElement(
+      ) : null, /* @__PURE__ */ import_react78.default.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ import_react78.default.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ import_react78.default.createElement(
         PreviewForm_default,
         {
           name,
@@ -9355,7 +9364,7 @@ var init_PreviewJoin = __esm({
             "data-testid": "preview_tile"
           }
         ), !isVideoOn ? /* @__PURE__ */ import_react78.default.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ import_react78.default.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ import_react78.default.createElement(FullPageProgress_default, null) : null,
-        showMuteIcon ? /* @__PURE__ */ import_react78.default.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ import_react78.default.createElement(import_react_icons32.MicOffIcon, null)) : /* @__PURE__ */ import_react78.default.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })
+        showMuteIcon ? /* @__PURE__ */ import_react78.default.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ import_react78.default.createElement(import_react_icons32.MicOffIcon, null)) : /* @__PURE__ */ import_react78.default.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })
       );
     };
     PreviewControls = ({ hideSettings }) => {
@@ -9363,7 +9372,7 @@ var init_PreviewJoin = __esm({
       return /* @__PURE__ */ import_react78.default.createElement(
         Flex,
         {
-          justify: "between",
+          justify: hideSettings && isMobile ? "center" : "between",
           css: {
             width: "100%",
             mt: "$8"
@@ -10029,11 +10038,12 @@ var init_DesktopLeaveRoom = __esm({
       const permissions = (0, import_react_sdk46.useHMSStore)(import_react_sdk46.selectPermissions);
       const { isStreamingOn } = (0, import_react_sdk46.useRecordingStreaming)();
       const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
+      const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
       useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: "LeaveRoom" });
       if (!permissions || !isConnected) {
         return null;
       }
-      return /* @__PURE__ */ import_react91.default.createElement(import_react91.Fragment, null, screenType !== "hls_live_streaming" && ((permissions == null ? void 0 : permissions.hlsStreaming) || (permissions == null ? void 0 : permissions.endRoom)) ? /* @__PURE__ */ import_react91.default.createElement(Flex, null, /* @__PURE__ */ import_react91.default.createElement(
+      return /* @__PURE__ */ import_react91.default.createElement(import_react91.Fragment, null, showLeaveOptions ? /* @__PURE__ */ import_react91.default.createElement(Flex, null, /* @__PURE__ */ import_react91.default.createElement(
         LeaveIconButton,
         {
           key: "LeaveRoom",
@@ -10042,9 +10052,7 @@ var init_DesktopLeaveRoom = __esm({
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0
           },
-          onClick: () => {
-            leaveRoom({ endstream: false });
-          }
+          onClick: () => setShowLeaveRoomAlert(true)
         },
         /* @__PURE__ */ import_react91.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react91.default.createElement(Box, null, /* @__PURE__ */ import_react91.default.createElement(import_react_icons36.ExitIcon, { style: { transform: "rotate(180deg)" } })))
       ), /* @__PURE__ */ import_react91.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ import_react91.default.createElement(
@@ -10063,7 +10071,7 @@ var init_DesktopLeaveRoom = __esm({
         {
           css: {
             bg: "$surface_dim",
-            color: "$on_surface_low",
+            color: "$on_surface_medium",
             "&:hover": { bg: "$surface_default", color: "$on_surface_high" }
           },
           onClick: () => leaveRoom({ endstream: false }),
@@ -10081,7 +10089,7 @@ var init_DesktopLeaveRoom = __esm({
             css: { p: 0 }
           }
         )
-      ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ import_react91.default.createElement(
+      ), /* @__PURE__ */ import_react91.default.createElement(
         Dropdown.Item,
         {
           css: {
@@ -10106,15 +10114,11 @@ var init_DesktopLeaveRoom = __esm({
             css: { p: 0 }
           }
         )
-      ) : null))) : /* @__PURE__ */ import_react91.default.createElement(
+      )))) : /* @__PURE__ */ import_react91.default.createElement(
         LeaveIconButton,
         {
           onClick: () => {
-            if (screenType === "hls_live_streaming") {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
+            setShowLeaveRoomAlert(true);
           },
           key: "LeaveRoom",
           "data-testid": "leave_room_btn"
@@ -10128,7 +10132,7 @@ var init_DesktopLeaveRoom = __esm({
           isStreamingOn,
           isModal: true
         }
-      )))), screenType === "hls_live_streaming" ? /* @__PURE__ */ import_react91.default.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ import_react91.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react91.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react91.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react91.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))) : null);
+      )))), /* @__PURE__ */ import_react91.default.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ import_react91.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react91.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react91.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react91.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
     };
   }
 });
@@ -10162,11 +10166,12 @@ var init_MwebLeaveRoom = __esm({
       const permissions = (0, import_react_sdk47.useHMSStore)(import_react_sdk47.selectPermissions);
       const { isStreamingOn } = (0, import_react_sdk47.useRecordingStreaming)();
       const showStream = screenType !== "hls_live_streaming" && isStreamingOn;
+      const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
       useDropdownList({ open, name: "LeaveRoom" });
       if (!permissions || !isConnected) {
         return null;
       }
-      return /* @__PURE__ */ import_react92.default.createElement(import_react92.Fragment, null, screenType !== "hls_live_streaming" ? /* @__PURE__ */ import_react92.default.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react92.default.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ import_react92.default.createElement(
+      return /* @__PURE__ */ import_react92.default.createElement(import_react92.Fragment, null, showLeaveOptions ? /* @__PURE__ */ import_react92.default.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react92.default.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ import_react92.default.createElement(
         LeaveIconButton,
         {
           key: "LeaveRoom",
@@ -10188,7 +10193,7 @@ var init_MwebLeaveRoom = __esm({
           onClick: () => leaveRoom({ endstream: false }),
           css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
         }
-      ), (permissions == null ? void 0 : permissions.endRoom) || (permissions == null ? void 0 : permissions.hlsStreaming) ? /* @__PURE__ */ import_react92.default.createElement(
+      ), /* @__PURE__ */ import_react92.default.createElement(
         LeaveCard,
         {
           title: showStream ? "End Stream" : "End Session",
@@ -10202,28 +10207,14 @@ var init_MwebLeaveRoom = __esm({
             setShowEndStreamAlert(true);
           }
         }
-      ) : null)) : /* @__PURE__ */ import_react92.default.createElement(
-        LeaveIconButton,
-        {
-          key: "LeaveRoom",
-          "data-testid": "leave_room_btn",
-          onClick: () => {
-            if (screenType === "hls_live_streaming") {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
-          }
-        },
-        /* @__PURE__ */ import_react92.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react92.default.createElement(Box, null, /* @__PURE__ */ import_react92.default.createElement(import_react_icons37.ExitIcon, { style: { transform: "rotate(180deg)" } })))
-      ), /* @__PURE__ */ import_react92.default.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ import_react92.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ import_react92.default.createElement(
+      ))) : /* @__PURE__ */ import_react92.default.createElement(LeaveIconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => setShowLeaveRoomAlert(true) }, /* @__PURE__ */ import_react92.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react92.default.createElement(Box, null, /* @__PURE__ */ import_react92.default.createElement(import_react_icons37.ExitIcon, { style: { transform: "rotate(180deg)" } })))), /* @__PURE__ */ import_react92.default.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ import_react92.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ import_react92.default.createElement(
         EndSessionContent,
         {
           setShowEndStreamAlert,
           leaveRoom: isStreamingOn ? leaveRoom : endRoom,
           isStreamingOn
         }
-      ))), screenType === "hls_live_streaming" ? /* @__PURE__ */ import_react92.default.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ import_react92.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ import_react92.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))) : null);
+      ))), /* @__PURE__ */ import_react92.default.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ import_react92.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ import_react92.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
     };
   }
 });
@@ -12017,30 +12008,21 @@ var init_MoreSettings = __esm({
 });
 
 // src/Prebuilt/components/RaiseHand.jsx
-var import_react110, import_react_sdk60, import_react_icons49, RaiseHand;
+var import_react110, import_react_icons49, RaiseHand;
 var init_RaiseHand = __esm({
   "src/Prebuilt/components/RaiseHand.jsx"() {
     "use strict";
     init_define_process_env();
     import_react110 = __toESM(require("react"));
-    import_react_sdk60 = require("@100mslive/react-sdk");
     import_react_icons49 = require("@100mslive/react-icons");
     init_Tooltip2();
     init_IconButton3();
+    init_useMetadata();
     RaiseHand = () => {
-      const localPeerId = (0, import_react_sdk60.useHMSStore)(import_react_sdk60.selectLocalPeerID);
-      const isHandRaised = (0, import_react_sdk60.useHMSStore)((0, import_react_sdk60.selectHasPeerHandRaised)(localPeerId));
-      const actions = (0, import_react_sdk60.useHMSActions)();
-      return /* @__PURE__ */ import_react110.default.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ import_react110.default.createElement(
-        IconButton_default,
-        {
-          active: !isHandRaised,
-          onClick: () => {
-            isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
-          }
-        },
-        /* @__PURE__ */ import_react110.default.createElement(import_react_icons49.HandIcon, null)
-      ));
+      const { isHandRaised, toggleHandRaise } = useMyMetadata();
+      return /* @__PURE__ */ import_react110.default.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ import_react110.default.createElement(IconButton_default, { active: !isHandRaised, onClick: () => __async(void 0, null, function* () {
+        return yield toggleHandRaise();
+      }) }, /* @__PURE__ */ import_react110.default.createElement(import_react_icons49.HandIcon, null)));
     };
   }
 });
@@ -12345,7 +12327,7 @@ var init_pdfFileOptions = __esm({
 // src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
 function ShareScreenOptions() {
   const [openModals, setOpenModals] = (0, import_react116.useState)(/* @__PURE__ */ new Set());
-  const { amIScreenSharing } = (0, import_react_sdk61.useScreenShare)();
+  const { amIScreenSharing } = (0, import_react_sdk60.useScreenShare)();
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
       const copy = new Set(modals);
@@ -12357,7 +12339,7 @@ function ShareScreenOptions() {
       return copy;
     });
   };
-  const { toggleScreenShare } = (0, import_react_sdk61.useScreenShare)();
+  const { toggleScreenShare } = (0, import_react_sdk60.useScreenShare)();
   return /* @__PURE__ */ import_react116.default.createElement(import_react116.Fragment, null, /* @__PURE__ */ import_react116.default.createElement(
     Dropdown.Root,
     {
@@ -12578,13 +12560,13 @@ function ShareScreenOptions() {
     )
   ), openModals.has(MODALS3.PDF_SHARE) && /* @__PURE__ */ import_react116.default.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS3.PDF_SHARE, value) }));
 }
-var import_react116, import_react_sdk61, import_react_icons52, MODALS3;
+var import_react116, import_react_sdk60, import_react_icons52, MODALS3;
 var init_shareScreenOptions = __esm({
   "src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx"() {
     "use strict";
     init_define_process_env();
     import_react116 = __toESM(require("react"));
-    import_react_sdk61 = require("@100mslive/react-sdk");
+    import_react_sdk60 = require("@100mslive/react-sdk");
     import_react_icons52 = require("@100mslive/react-icons");
     init_pdf_share();
     init_screen_share();
@@ -12600,13 +12582,13 @@ var init_shareScreenOptions = __esm({
 });
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
-var import_react117, import_react_sdk62, import_react_icons53, ScreenshareToggle;
+var import_react117, import_react_sdk61, import_react_icons53, ScreenshareToggle;
 var init_ScreenShareToggle = __esm({
   "src/Prebuilt/components/ScreenShareToggle.jsx"() {
     "use strict";
     init_define_process_env();
     import_react117 = __toESM(require("react"));
-    import_react_sdk62 = require("@100mslive/react-sdk");
+    import_react_sdk61 = require("@100mslive/react-sdk");
     import_react_icons53 = require("@100mslive/react-icons");
     init_shareScreenOptions();
     init_Layout();
@@ -12616,9 +12598,9 @@ var init_ScreenShareToggle = __esm({
     init_utils2();
     init_constants();
     ScreenshareToggle = ({ css: css2 = {} }) => {
-      const isAllowedToPublish = (0, import_react_sdk62.useHMSStore)(import_react_sdk62.selectIsAllowedToPublish);
+      const isAllowedToPublish = (0, import_react_sdk61.useHMSStore)(import_react_sdk61.selectIsAllowedToPublish);
       const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-      const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = (0, import_react_sdk62.useScreenShare)();
+      const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = (0, import_react_sdk61.useScreenShare)();
       const isVideoScreenshare = amIScreenSharing && !!video;
       if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
         return null;
@@ -12642,20 +12624,20 @@ var init_ScreenShareToggle = __esm({
 });
 
 // src/Prebuilt/components/Footer/ChatToggle.tsx
-var import_react118, import_react_sdk63, import_react_icons54, ChatToggle;
+var import_react118, import_react_sdk62, import_react_icons54, ChatToggle;
 var init_ChatToggle = __esm({
   "src/Prebuilt/components/Footer/ChatToggle.tsx"() {
     "use strict";
     init_define_process_env();
     import_react118 = __toESM(require("react"));
-    import_react_sdk63 = require("@100mslive/react-sdk");
+    import_react_sdk62 = require("@100mslive/react-sdk");
     import_react_icons54 = require("@100mslive/react-icons");
     init_src();
     init_IconButton3();
     init_useSidepane();
     init_constants();
     ChatToggle = () => {
-      const countUnreadMessages = (0, import_react_sdk63.useHMSStore)(import_react_sdk63.selectUnreadHMSMessagesCount);
+      const countUnreadMessages = (0, import_react_sdk62.useHMSStore)(import_react_sdk62.selectUnreadHMSMessagesCount);
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       return /* @__PURE__ */ import_react118.default.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ import_react118.default.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ import_react118.default.createElement(import_react_icons54.ChatIcon, null) : /* @__PURE__ */ import_react118.default.createElement(import_react_icons54.ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
@@ -12664,13 +12646,13 @@ var init_ChatToggle = __esm({
 });
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
-var import_react119, import_react_sdk64, import_react_icons55, dropdownItemCSS, optionTextCSS, RoleOptions;
+var import_react119, import_react_sdk63, import_react_icons55, dropdownItemCSS, optionTextCSS, RoleOptions;
 var init_RoleOptions = __esm({
   "src/Prebuilt/components/Footer/RoleOptions.tsx"() {
     "use strict";
     init_define_process_env();
     import_react119 = __toESM(require("react"));
-    import_react_sdk64 = require("@100mslive/react-sdk");
+    import_react_sdk63 = require("@100mslive/react-sdk");
     import_react_icons55 = require("@100mslive/react-icons");
     init_Dropdown2();
     init_Layout();
@@ -12681,11 +12663,11 @@ var init_RoleOptions = __esm({
     optionTextCSS = { fontWeight: "$semiBold", color: "$on_surface_high", textTransform: "none" };
     RoleOptions = ({ roleName, peerList }) => {
       const [openOptions, setOpenOptions] = (0, import_react119.useState)(false);
-      const permissions = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectPermissions);
-      const hmsActions = (0, import_react_sdk64.useHMSActions)();
+      const permissions = (0, import_react_sdk63.useHMSStore)(import_react_sdk63.selectPermissions);
+      const hmsActions = (0, import_react_sdk63.useHMSActions)();
       const { elements } = useRoomLayoutConferencingScreen();
       const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
-      const vanillaStore = (0, import_react_sdk64.useHMSVanillaStore)();
+      const vanillaStore = (0, import_react_sdk63.useHMSVanillaStore)();
       const store = vanillaStore.getState();
       let allPeersHaveVideoOn = true;
       let allPeersHaveAudioOn = true;
@@ -12868,14 +12850,14 @@ var init_RoleAccordion = __esm({
 });
 
 // src/Prebuilt/components/Footer/ParticipantList.jsx
-var import_react121, import_react_use19, import_react_sdk65, import_react_icons56, ParticipantList, ParticipantCount, VirtualizedParticipants, Participant, ParticipantActions, ParticipantMoreActions, ParticipantSearch;
+var import_react121, import_react_use19, import_react_sdk64, import_react_icons56, ParticipantList, ParticipantCount, VirtualizedParticipants, Participant, ParticipantActions, ParticipantMoreActions, ParticipantSearch;
 var init_ParticipantList = __esm({
   "src/Prebuilt/components/Footer/ParticipantList.jsx"() {
     "use strict";
     init_define_process_env();
     import_react121 = __toESM(require("react"));
     import_react_use19 = require("react-use");
-    import_react_sdk65 = require("@100mslive/react-sdk");
+    import_react_sdk64 = require("@100mslive/react-sdk");
     import_react_icons56 = require("@100mslive/react-icons");
     init_src();
     init_IconButton3();
@@ -12891,7 +12873,7 @@ var init_ParticipantList = __esm({
       const [filter, setFilter] = (0, import_react121.useState)();
       const { participants, isConnected, peerCount } = useParticipants2(filter);
       const peersOrderedByRoles = {};
-      const handRaisedPeers = (0, import_react_sdk65.useHMSStore)(import_react_sdk65.selectHandRaisedPeers);
+      const handRaisedPeers = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectHandRaisedPeers);
       participants.forEach((participant) => {
         if (peersOrderedByRoles[participant.roleName] === void 0) {
           peersOrderedByRoles[participant.roleName] = [];
@@ -12921,7 +12903,7 @@ var init_ParticipantList = __esm({
       )));
     };
     ParticipantCount = () => {
-      const peerCount = (0, import_react_sdk65.useHMSStore)(import_react_sdk65.selectPeerCount);
+      const peerCount = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectPeerCount);
       const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
       const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
       (0, import_react121.useEffect)(() => {
@@ -12989,7 +12971,7 @@ var init_ParticipantList = __esm({
       );
     };
     Participant = ({ peer, isConnected }) => {
-      const localPeerId = (0, import_react_sdk65.useHMSStore)(import_react_sdk65.selectLocalPeerID);
+      const localPeerId = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectLocalPeerID);
       return /* @__PURE__ */ import_react121.default.createElement(
         Flex,
         {
@@ -13011,10 +12993,10 @@ var init_ParticipantList = __esm({
     };
     ParticipantActions = import_react121.default.memo(({ peerId, role, isLocal }) => {
       var _a7;
-      const isHandRaised = (0, import_react_sdk65.useHMSStore)((0, import_react_sdk65.selectHasPeerHandRaised)(peerId));
-      const canChangeRole = (_a7 = (0, import_react_sdk65.useHMSStore)(import_react_sdk65.selectPermissions)) == null ? void 0 : _a7.changeRole;
+      const isHandRaised = (0, import_react_sdk64.useHMSStore)((0, import_react_sdk64.selectHasPeerHandRaised)(peerId));
+      const canChangeRole = (_a7 = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectPermissions)) == null ? void 0 : _a7.changeRole;
       const shouldShowMoreActions = canChangeRole;
-      const isAudioMuted = !(0, import_react_sdk65.useHMSStore)((0, import_react_sdk65.selectIsPeerAudioEnabled)(peerId));
+      const isAudioMuted = !(0, import_react_sdk64.useHMSStore)((0, import_react_sdk64.selectIsPeerAudioEnabled)(peerId));
       return /* @__PURE__ */ import_react121.default.createElement(
         Flex,
         {
@@ -13048,8 +13030,8 @@ var init_ParticipantList = __esm({
     });
     ParticipantMoreActions = ({ peerId, role }) => {
       var _a7;
-      const hmsActions = (0, import_react_sdk65.useHMSActions)();
-      const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = (0, import_react_sdk65.useHMSStore)(import_react_sdk65.selectPermissions);
+      const hmsActions = (0, import_react_sdk64.useHMSActions)();
+      const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectPermissions);
       const { elements } = useRoomLayoutConferencingScreen();
       const {
         bring_to_stage_label,
@@ -13059,8 +13041,8 @@ var init_ParticipantList = __esm({
       } = elements.on_stage_exp || {};
       const isInStage = role === on_stage_role;
       const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
-      const prevRole = (_a7 = (0, import_react_sdk65.useHMSStore)((0, import_react_sdk65.selectPeerMetadata)(peerId))) == null ? void 0 : _a7.prevRole;
-      const localPeerId = (0, import_react_sdk65.useHMSStore)(import_react_sdk65.selectLocalPeerID);
+      const prevRole = (_a7 = (0, import_react_sdk64.useHMSStore)((0, import_react_sdk64.selectPeerMetadata)(peerId))) == null ? void 0 : _a7.prevRole;
+      const localPeerId = (0, import_react_sdk64.useHMSStore)(import_react_sdk64.selectLocalPeerID);
       const isLocal = localPeerId === peerId;
       const [open, setOpen] = (0, import_react121.useState)(false);
       const handleStageAction = () => __async(void 0, null, function* () {
@@ -13136,7 +13118,7 @@ var init_ParticipantList = __esm({
           {
             type: "text",
             placeholder: placeholder || "Search for participants",
-            css: { w: "100%", p: "$6", pl: "$14", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
+            css: { w: "100%", p: "$6", pl: "$16", mr: "$4", bg: inSidePane ? "$surface_default" : "$surface_dim" },
             value,
             onKeyDown: (event) => {
               event.stopPropagation();
@@ -13154,7 +13136,7 @@ var init_ParticipantList = __esm({
 });
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var import_react122, import_react_use20, import_chat, import_react_sdk66, VirtualBackground3, Footer2;
+var import_react122, import_react_use20, import_chat, import_react_sdk65, VirtualBackground3, Footer2;
 var init_Footer3 = __esm({
   "src/Prebuilt/components/Footer/Footer.tsx"() {
     "use strict";
@@ -13162,7 +13144,7 @@ var init_Footer3 = __esm({
     import_react122 = __toESM(require("react"));
     import_react_use20 = require("react-use");
     import_chat = require("@100mslive/types-prebuilt/elements/chat");
-    import_react_sdk66 = require("@100mslive/react-sdk");
+    import_react_sdk65 = require("@100mslive/react-sdk");
     init_src();
     init_AudioVideoToggle();
     init_EmojiReaction();
@@ -13183,7 +13165,7 @@ var init_Footer3 = __esm({
       const isMobile = (0, import_react_use20.useMedia)(config.media.md);
       const isOverlayChat = !!((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay);
       const openByDefault = ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.initial_state) === import_chat.Chat_ChatState.CHAT_STATE_OPEN;
-      const { toggleAudio, toggleVideo } = (0, import_react_sdk66.useAVToggle)();
+      const { toggleAudio, toggleVideo } = (0, import_react_sdk65.useAVToggle)();
       const noAVPermissions = !(toggleAudio || toggleVideo);
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -13241,9 +13223,9 @@ var init_Footer3 = __esm({
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
 function HLSFailureModal() {
-  const { hlsError } = (0, import_react_sdk67.useHMSStore)(import_react_sdk67.selectHLSState).error || false;
+  const { hlsError } = (0, import_react_sdk66.useHMSStore)(import_react_sdk66.selectHLSState).error || false;
   const [openModal, setOpenModal] = (0, import_react123.useState)(!!hlsError);
-  const hmsActions = (0, import_react_sdk67.useHMSActions)();
+  const hmsActions = (0, import_react_sdk66.useHMSActions)();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = (0, import_react123.useCallback)(() => __async(this, null, function* () {
     try {
@@ -13285,13 +13267,13 @@ function HLSFailureModal() {
     ), /* @__PURE__ */ import_react123.default.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ import_react123.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react123.default.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ import_react123.default.createElement(Button, { css: { w: "100%" }, onClick: startHLS }, "Go Live"))))
   ) : null;
 }
-var import_react123, import_react_sdk67;
+var import_react123, import_react_sdk66;
 var init_HLSFailureModal = __esm({
   "src/Prebuilt/components/Notifications/HLSFailureModal.jsx"() {
     "use strict";
     init_define_process_env();
     import_react123 = __toESM(require("react"));
-    import_react_sdk67 = require("@100mslive/react-sdk");
+    import_react_sdk66 = require("@100mslive/react-sdk");
     init_Button2();
     init_Layout();
     init_Modal();
@@ -13301,14 +13283,125 @@ var init_HLSFailureModal = __esm({
   }
 });
 
+// src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
+var import_react124, import_react_use21, RequestPrompt, RequestActions;
+var init_RequestPrompt = __esm({
+  "src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx"() {
+    "use strict";
+    init_define_process_env();
+    import_react124 = __toESM(require("react"));
+    import_react_use21 = require("react-use");
+    init_src();
+    init_Sheet2();
+    RequestPrompt = ({
+      open = true,
+      onOpenChange,
+      title,
+      body,
+      actionText = "Accept",
+      onAction
+    }) => {
+      const isMobile = (0, import_react_use21.useMedia)(config.media.md);
+      if (isMobile) {
+        return /* @__PURE__ */ import_react124.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react124.default.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ import_react124.default.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ import_react124.default.createElement(RequestActions, { actionText, onAction })));
+      }
+      return /* @__PURE__ */ import_react124.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react124.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react124.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react124.default.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ import_react124.default.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ import_react124.default.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ import_react124.default.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ import_react124.default.createElement(RequestActions, { actionText, onAction }))));
+    };
+    RequestActions = ({ onAction, actionText }) => /* @__PURE__ */ import_react124.default.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md", "@md": { mt: "$8", px: "$8" } } }, /* @__PURE__ */ import_react124.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react124.default.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ import_react124.default.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Decline"))), /* @__PURE__ */ import_react124.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react124.default.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText)));
+  }
+});
+
+// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
+var import_react125, import_react_sdk67, RoleChangeRequestModal;
+var init_RoleChangeRequestModal = __esm({
+  "src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx"() {
+    "use strict";
+    init_define_process_env();
+    import_react125 = __toESM(require("react"));
+    import_react_sdk67 = require("@100mslive/react-sdk");
+    init_src();
+    init_PreviewJoin();
+    init_RequestPrompt();
+    init_useMetadata();
+    init_constants();
+    RoleChangeRequestModal = () => {
+      const hmsActions = (0, import_react_sdk67.useHMSActions)();
+      const { updateMetaData } = useMyMetadata();
+      const currentRole = (0, import_react_sdk67.useHMSStore)(import_react_sdk67.selectLocalPeerRoleName);
+      const roleChangeRequest = (0, import_react_sdk67.useHMSStore)(import_react_sdk67.selectRoleChangeRequest);
+      const name = (0, import_react_sdk67.useHMSStore)(import_react_sdk67.selectLocalPeerName);
+      const { sendEvent } = (0, import_react_sdk67.useCustomEvent)({ type: ROLE_CHANGE_DECLINED });
+      (0, import_react125.useEffect)(() => {
+        if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
+          return;
+        }
+        (() => __async(void 0, null, function* () {
+          yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
+        }))();
+      }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
+      if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
+        return null;
+      }
+      const body = /* @__PURE__ */ import_react125.default.createElement(import_react125.default.Fragment, null, /* @__PURE__ */ import_react125.default.createElement(
+        Text,
+        {
+          variant: "xs",
+          css: {
+            c: "$on_surface_medium",
+            textAlign: "center",
+            "@md": { textAlign: "left", borderBottom: "1px solid $border_bright", pb: "$4", px: "$8" }
+          }
+        },
+        "Setup your audio and video before joining"
+      ), /* @__PURE__ */ import_react125.default.createElement(
+        Flex,
+        {
+          align: "center",
+          justify: "center",
+          css: {
+            "@sm": { width: "100%" },
+            flexDirection: "column",
+            mt: "$6",
+            "@md": { px: "$8" }
+          }
+        },
+        /* @__PURE__ */ import_react125.default.createElement(PreviewTile, { name: name || "" }),
+        /* @__PURE__ */ import_react125.default.createElement(PreviewControls, { hideSettings: true })
+      ));
+      return /* @__PURE__ */ import_react125.default.createElement(
+        RequestPrompt,
+        {
+          title: "You're invited to join the stage",
+          onOpenChange: (value) => __async(void 0, null, function* () {
+            var _a7;
+            if (!value) {
+              hmsActions.rejectChangeRole(roleChangeRequest);
+              sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a7 = roleChangeRequest.requestedBy) == null ? void 0 : _a7.id });
+              yield hmsActions.cancelMidCallPreview();
+              yield hmsActions.lowerLocalPeerHand();
+            }
+          }),
+          body,
+          onAction: () => __async(void 0, null, function* () {
+            yield hmsActions.acceptChangeRole(roleChangeRequest);
+            yield updateMetaData({ prevRole: currentRole });
+            yield hmsActions.lowerLocalPeerHand();
+          }),
+          actionText: "Accept"
+        }
+      );
+    };
+  }
+});
+
 // src/Prebuilt/components/hooks/useVideoTileLayout.ts
-var import_react124, VideoTileContext, useVideoTileContext;
+var import_react126, VideoTileContext, useVideoTileContext;
 var init_useVideoTileLayout = __esm({
   "src/Prebuilt/components/hooks/useVideoTileLayout.ts"() {
     "use strict";
     init_define_process_env();
-    import_react124 = __toESM(require("react"));
-    VideoTileContext = import_react124.default.createContext({
+    import_react126 = __toESM(require("react"));
+    VideoTileContext = import_react126.default.createContext({
       enableSpotlightingPeer: true,
       hideParticipantNameOnTile: false,
       roundedVideoTile: true,
@@ -13318,21 +13411,21 @@ var init_useVideoTileLayout = __esm({
       hideMetadataOnTile: false
     });
     useVideoTileContext = () => {
-      const context = (0, import_react124.useContext)(VideoTileContext);
+      const context = (0, import_react126.useContext)(VideoTileContext);
       return context;
     };
   }
 });
 
 // src/Prebuilt/components/InsetTile.tsx
-var import_react125, import_react_draggable, import_react_use21, import_react_sdk68, import_react_icons57, MinimisedTile, insetHeightPx, insetMaxWidthPx, defaultMobileAspectRatio, desktopAspectRatio, InsetTile;
+var import_react127, import_react_draggable, import_react_use22, import_react_sdk68, import_react_icons57, MinimisedTile, insetHeightPx, insetMaxWidthPx, defaultMobileAspectRatio, desktopAspectRatio, InsetTile;
 var init_InsetTile = __esm({
   "src/Prebuilt/components/InsetTile.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react125 = __toESM(require("react"));
+    import_react127 = __toESM(require("react"));
     import_react_draggable = __toESM(require("react-draggable"));
-    import_react_use21 = require("react-use");
+    import_react_use22 = require("react-use");
     import_react_sdk68 = require("@100mslive/react-sdk");
     import_react_icons57 = require("@100mslive/react-icons");
     init_Layout();
@@ -13345,14 +13438,14 @@ var init_InsetTile = __esm({
     init_useVideoTileLayout();
     init_constants();
     MinimisedTile = ({ setMinimised }) => {
-      return /* @__PURE__ */ import_react125.default.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ import_react125.default.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ import_react125.default.createElement(Text, null, "You"), /* @__PURE__ */ import_react125.default.createElement(
+      return /* @__PURE__ */ import_react127.default.createElement(Flex, { align: "center", css: { gap: "$6", r: "$1", bg: "$surface_default", p: "$4", color: "$on_surface_high" } }, /* @__PURE__ */ import_react127.default.createElement(AudioVideoToggle, { hideOptions: true }), /* @__PURE__ */ import_react127.default.createElement(Text, null, "You"), /* @__PURE__ */ import_react127.default.createElement(
         IconButton_default,
         {
           className: "__cancel-drag-event",
           onClick: () => setMinimised(false),
           css: { bg: "transparent", border: "transparent" }
         },
-        /* @__PURE__ */ import_react125.default.createElement(import_react_icons57.ExpandIcon, null)
+        /* @__PURE__ */ import_react127.default.createElement(import_react_icons57.ExpandIcon, null)
       ));
     };
     insetHeightPx = 180;
@@ -13360,8 +13453,8 @@ var init_InsetTile = __esm({
     defaultMobileAspectRatio = 9 / 16;
     desktopAspectRatio = 1 / defaultMobileAspectRatio;
     InsetTile = () => {
-      const isMobile = (0, import_react_use21.useMedia)(config.media.md);
-      const isLandscape = (0, import_react_use21.useMedia)(config.media.ls);
+      const isMobile = (0, import_react_use22.useMedia)(config.media.md);
+      const isLandscape = (0, import_react_use22.useMedia)(config.media.ls);
       const localPeer = (0, import_react_sdk68.useHMSStore)(import_react_sdk68.selectLocalPeer);
       const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
       const videoTrack = (0, import_react_sdk68.useHMSStore)((0, import_react_sdk68.selectVideoTrackByID)(localPeer == null ? void 0 : localPeer.videoTrack));
@@ -13377,8 +13470,8 @@ var init_InsetTile = __esm({
         width = 240;
         height = width / aspectRatio;
       }
-      const nodeRef = (0, import_react125.useRef)(null);
-      (0, import_react125.useEffect)(() => {
+      const nodeRef = (0, import_react127.useRef)(null);
+      (0, import_react127.useEffect)(() => {
         const node = nodeRef.current;
         if (!node || !window.ResizeObserver) {
           return;
@@ -13399,7 +13492,7 @@ var init_InsetTile = __esm({
       if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
         return null;
       }
-      return /* @__PURE__ */ import_react125.default.createElement(import_react_draggable.default, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ import_react125.default.createElement(
+      return /* @__PURE__ */ import_react127.default.createElement(import_react_draggable.default, { bounds: "parent", nodeRef, cancel: ".__cancel-drag-event" }, /* @__PURE__ */ import_react127.default.createElement(
         Box,
         {
           ref: nodeRef,
@@ -13415,7 +13508,7 @@ var init_InsetTile = __esm({
             h: height
           } : {})
         },
-        minimised ? /* @__PURE__ */ import_react125.default.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ import_react125.default.createElement(
+        minimised ? /* @__PURE__ */ import_react127.default.createElement(MinimisedTile, { setMinimised }) : /* @__PURE__ */ import_react127.default.createElement(
           VideoTile_default,
           __spreadProps(__spreadValues({
             peerId: localPeer == null ? void 0 : localPeer.id,
@@ -13439,12 +13532,12 @@ var init_InsetTile = __esm({
 });
 
 // src/Prebuilt/components/Pagination.tsx
-var import_react126, import_react_icons58, Pagination;
+var import_react128, import_react_icons58, Pagination;
 var init_Pagination2 = __esm({
   "src/Prebuilt/components/Pagination.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react126 = __toESM(require("react"));
+    import_react128 = __toESM(require("react"));
     import_react_icons58 = require("@100mslive/react-icons");
     init_Pagination();
     Pagination = ({
@@ -13462,7 +13555,7 @@ var init_Pagination2 = __esm({
         e.stopPropagation();
         onPageChange(Math.max(page - 1, 0));
       };
-      (0, import_react126.useEffect)(() => {
+      (0, import_react128.useEffect)(() => {
         if (page >= numPages) {
           onPageChange(Math.max(0, numPages - 1));
         }
@@ -13470,7 +13563,7 @@ var init_Pagination2 = __esm({
       if (numPages <= 1) {
         return null;
       }
-      return /* @__PURE__ */ import_react126.default.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ import_react126.default.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ import_react126.default.createElement(import_react_icons58.ChevronLeftIcon, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ import_react126.default.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ import_react126.default.createElement(
+      return /* @__PURE__ */ import_react128.default.createElement(StyledPagination.Root, { css: { flexShrink: 0 } }, /* @__PURE__ */ import_react128.default.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ import_react128.default.createElement(import_react_icons58.ChevronLeftIcon, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), numPages <= 5 ? /* @__PURE__ */ import_react128.default.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ import_react128.default.createElement(
         StyledPagination.Dot,
         {
           key: i,
@@ -13480,25 +13573,25 @@ var init_Pagination2 = __esm({
             onPageChange(i);
           }
         }
-      ))) : null, /* @__PURE__ */ import_react126.default.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ import_react126.default.createElement(import_react_icons58.ChevronRightIcon, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
+      ))) : null, /* @__PURE__ */ import_react128.default.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ import_react128.default.createElement(import_react_icons58.ChevronRightIcon, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
     };
   }
 });
 
 // src/Prebuilt/components/VideoLayouts/Grid.tsx
-var import_react127, Grid;
+var import_react129, Grid;
 var init_Grid = __esm({
   "src/Prebuilt/components/VideoLayouts/Grid.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react127 = __toESM(require("react"));
+    import_react129 = __toESM(require("react"));
     init_Layout();
     init_VideoTile2();
     init_useVideoTileLayout();
-    Grid = import_react127.default.forwardRef(
+    Grid = import_react129.default.forwardRef(
       ({ tiles, edgeToEdge }, ref) => {
         const videoTileProps = useVideoTileContext();
-        return /* @__PURE__ */ import_react127.default.createElement(
+        return /* @__PURE__ */ import_react129.default.createElement(
           Box,
           {
             ref,
@@ -13516,7 +13609,7 @@ var init_Grid = __esm({
           },
           tiles == null ? void 0 : tiles.map((tile) => {
             var _a7, _b7, _c, _d;
-            return /* @__PURE__ */ import_react127.default.createElement(
+            return /* @__PURE__ */ import_react129.default.createElement(
               VideoTile_default,
               __spreadValues({
                 key: ((_a7 = tile.track) == null ? void 0 : _a7.id) || ((_b7 = tile.peer) == null ? void 0 : _b7.id),
@@ -13536,25 +13629,25 @@ var init_Grid = __esm({
 });
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-var import_react128, import_react_use22, import_react_sdk69, aspectRatioConfig, usePagesWithTiles, useTileLayout;
+var import_react130, import_react_use23, import_react_sdk69, aspectRatioConfig, usePagesWithTiles, useTileLayout;
 var init_useTileLayout = __esm({
   "src/Prebuilt/components/hooks/useTileLayout.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react128 = require("react");
-    import_react_use22 = require("react-use");
+    import_react130 = require("react");
+    import_react_use23 = require("react-use");
     import_react_sdk69 = require("@100mslive/react-sdk");
     init_Theme();
     aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
     usePagesWithTiles = ({ peers, maxTileCount }) => {
       const vanillaStore = (0, import_react_sdk69.useHMSVanillaStore)();
       const tracksMap = vanillaStore.getState(import_react_sdk69.selectTracksMap);
-      const peersWithTiles = (0, import_react128.useMemo)(
+      const peersWithTiles = (0, import_react130.useMemo)(
         () => (0, import_react_sdk69.getPeersWithTiles)(peers, tracksMap, () => false),
         [peers, tracksMap]
       );
       const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
-      const pagesList = (0, import_react128.useMemo)(() => {
+      const pagesList = (0, import_react130.useMemo)(() => {
         let sliceStart = 0;
         let remaining = peersWithTiles.length;
         const list = [];
@@ -13574,10 +13667,10 @@ var init_useTileLayout = __esm({
       edgeToEdge = false
     }) => {
       const vanillaStore = (0, import_react_sdk69.useHMSVanillaStore)();
-      const [ref, { width, height }] = (0, import_react_use22.useMeasure)();
-      const isMobile = (0, import_react_use22.useMedia)(config.media.lg);
-      const [pagesWithTiles, setPagesWithTiles] = (0, import_react128.useState)([]);
-      (0, import_react128.useEffect)(() => {
+      const [ref, { width, height }] = (0, import_react_use23.useMeasure)();
+      const isMobile = (0, import_react_use23.useMedia)(config.media.lg);
+      const [pagesWithTiles, setPagesWithTiles] = (0, import_react130.useState)([]);
+      (0, import_react130.useEffect)(() => {
         if (width === 0 || height === 0) {
           return;
         }
@@ -13647,14 +13740,14 @@ var init_useTileLayout = __esm({
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a7;
   const localPeer = (0, import_react_sdk70.useHMSStore)(import_react_sdk70.selectLocalPeer);
-  const isMobile = (0, import_react_use23.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use24.useMedia)(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
     peers,
     maxTileCount
   });
-  const inputPeers = (0, import_react129.useMemo)(
+  const inputPeers = (0, import_react131.useMemo)(
     () => pageList.length === 0 ? localPeer ? [localPeer] : [] : peers,
     [pageList.length, peers, localPeer]
   );
@@ -13667,14 +13760,14 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     maxTileCount,
     edgeToEdge
   });
-  const [page, setPage] = (0, import_react129.useState)(0);
+  const [page, setPage] = (0, import_react131.useState)(0);
   const pageSize = ((_a7 = pagesWithTiles[0]) == null ? void 0 : _a7.length) || 0;
-  (0, import_react129.useEffect)(() => {
+  (0, import_react131.useEffect)(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ import_react129.default.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ import_react129.default.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ import_react129.default.createElement(
+  return /* @__PURE__ */ import_react131.default.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ import_react131.default.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ import_react131.default.createElement(
     Pagination,
     {
       page,
@@ -13684,15 +13777,15 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
       },
       numPages: pagesWithTiles.length
     }
-  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ import_react129.default.createElement(InsetTile, null));
+  ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ import_react131.default.createElement(InsetTile, null));
 }
-var import_react129, import_react_use23, import_react_sdk70;
+var import_react131, import_react_use24, import_react_sdk70;
 var init_EqualProminence = __esm({
   "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react129 = __toESM(require("react"));
-    import_react_use23 = require("react-use");
+    import_react131 = __toESM(require("react"));
+    import_react_use24 = require("react-use");
     import_react_sdk70 = require("@100mslive/react-sdk");
     init_Layout();
     init_Theme();
@@ -13706,16 +13799,16 @@ var init_EqualProminence = __esm({
 });
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
-var import_react130, Root25, ProminentSection, SecondarySection, ProminenceLayout;
+var import_react132, Root25, ProminentSection, SecondarySection, ProminenceLayout;
 var init_ProminenceLayout = __esm({
   "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react130 = __toESM(require("react"));
+    import_react132 = __toESM(require("react"));
     init_Layout();
     init_VideoTile2();
     init_useVideoTileLayout();
-    Root25 = ({ children, edgeToEdge }) => /* @__PURE__ */ import_react130.default.createElement(
+    Root25 = ({ children, edgeToEdge }) => /* @__PURE__ */ import_react132.default.createElement(
       Flex,
       {
         direction: "column",
@@ -13724,7 +13817,7 @@ var init_ProminenceLayout = __esm({
       children
     );
     ProminentSection = ({ children, css: css2 = {} }) => {
-      return /* @__PURE__ */ import_react130.default.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css2) }, children);
+      return /* @__PURE__ */ import_react132.default.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css2) }, children);
     };
     SecondarySection = ({
       tiles,
@@ -13735,12 +13828,12 @@ var init_ProminenceLayout = __esm({
       if (!(tiles == null ? void 0 : tiles.length)) {
         return null;
       }
-      return /* @__PURE__ */ import_react130.default.createElement(
+      return /* @__PURE__ */ import_react132.default.createElement(
         Box,
         {
           css: {
             display: "grid",
-            gridTemplateRows: import_react130.default.Children.count(children) > 0 ? "136px auto" : "154px",
+            gridTemplateRows: import_react132.default.Children.count(children) > 0 ? "136px auto" : "154px",
             gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
             margin: "0 auto",
             gap: "$2 $4",
@@ -13750,7 +13843,7 @@ var init_ProminenceLayout = __esm({
         },
         tiles.map((tile) => {
           var _a7, _b7, _c, _d;
-          return /* @__PURE__ */ import_react130.default.createElement(
+          return /* @__PURE__ */ import_react132.default.createElement(
             VideoTile_default,
             __spreadValues({
               key: ((_a7 = tile.track) == null ? void 0 : _a7.id) || ((_b7 = tile.peer) == null ? void 0 : _b7.id),
@@ -13767,7 +13860,7 @@ var init_ProminenceLayout = __esm({
             }, tileLayoutProps)
           );
         }),
-        /* @__PURE__ */ import_react130.default.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
+        /* @__PURE__ */ import_react132.default.createElement(Box, { css: { gridColumn: `1/span ${tiles.length}` } }, children)
       );
     };
     ProminenceLayout = {
@@ -13779,30 +13872,30 @@ var init_ProminenceLayout = __esm({
 });
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-var import_react131, import_react_use24, SecondaryTiles;
+var import_react133, import_react_use25, SecondaryTiles;
 var init_SecondaryTiles = __esm({
   "src/Prebuilt/components/SecondaryTiles.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react131 = __toESM(require("react"));
-    import_react_use24 = require("react-use");
+    import_react133 = __toESM(require("react"));
+    import_react_use25 = require("react-use");
     init_ProminenceLayout();
     init_Theme();
     init_Pagination2();
     init_useTileLayout();
     SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
       var _a7;
-      const isMobile = (0, import_react_use24.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use25.useMedia)(config.media.md);
       const maxTileCount = isMobile ? 2 : 4;
       const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
-      const [page, setPage] = (0, import_react131.useState)(0);
+      const [page, setPage] = (0, import_react133.useState)(0);
       const pageSize = ((_a7 = pagesWithTiles[0]) == null ? void 0 : _a7.length) || 0;
-      (0, import_react131.useEffect)(() => {
+      (0, import_react133.useEffect)(() => {
         if (pageSize > 0) {
           onPageSize == null ? void 0 : onPageSize(pageSize);
         }
       }, [pageSize, onPageSize]);
-      return /* @__PURE__ */ import_react131.default.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ import_react131.default.createElement(
+      return /* @__PURE__ */ import_react133.default.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge }, !edgeToEdge && /* @__PURE__ */ import_react133.default.createElement(
         Pagination,
         {
           page,
@@ -13818,16 +13911,16 @@ var init_SecondaryTiles = __esm({
 });
 
 // src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
-var import_react132, useRoleProminencePeers;
+var import_react134, useRoleProminencePeers;
 var init_useRoleProminencePeers = __esm({
   "src/Prebuilt/components/hooks/useRoleProminencePeers.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react132 = require("react");
+    import_react134 = require("react");
     init_useUISettings();
     useRoleProminencePeers = (prominentRoles, peers, isInsetEnabled) => {
       const pinnedTrack = usePinnedTrack();
-      const [prominentPeers, secondaryPeers] = (0, import_react132.useMemo)(() => {
+      const [prominentPeers, secondaryPeers] = (0, import_react134.useMemo)(() => {
         return peers.reduce(
           (acc, peer) => {
             if (pinnedTrack) {
@@ -13880,14 +13973,14 @@ function RoleProminence({
     pageList,
     maxTileCount
   });
-  const [page, setPage] = (0, import_react133.useState)(0);
+  const [page, setPage] = (0, import_react135.useState)(0);
   const pageSize = ((_a7 = pagesWithTiles[0]) == null ? void 0 : _a7.length) || 0;
-  (0, import_react133.useEffect)(() => {
+  (0, import_react135.useEffect)(() => {
     if (pageSize > 0) {
       onPageSize == null ? void 0 : onPageSize(pageSize);
     }
   }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ import_react133.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react133.default.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ import_react133.default.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ import_react133.default.createElement(
+  return /* @__PURE__ */ import_react135.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react135.default.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ import_react135.default.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ import_react135.default.createElement(
     Pagination,
     {
       page,
@@ -13897,14 +13990,14 @@ function RoleProminence({
       },
       numPages: pagesWithTiles.length
     }
-  ), /* @__PURE__ */ import_react133.default.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ import_react133.default.createElement(InsetTile, null));
+  ), /* @__PURE__ */ import_react135.default.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && /* @__PURE__ */ import_react135.default.createElement(InsetTile, null));
 }
-var import_react133, import_react_sdk71;
+var import_react135, import_react_sdk71;
 var init_RoleProminence = __esm({
   "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react133 = __toESM(require("react"));
+    import_react135 = __toESM(require("react"));
     import_react_sdk71 = require("@100mslive/react-sdk");
     init_InsetTile();
     init_Pagination2();
@@ -13917,12 +14010,12 @@ var init_RoleProminence = __esm({
 });
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
-var import_react134, import_react_sdk72, import_react_icons59, ScreenshareDisplay;
+var import_react136, import_react_sdk72, import_react_icons59, ScreenshareDisplay;
 var init_ScreenshareDisplay = __esm({
   "src/Prebuilt/components/ScreenshareDisplay.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react134 = __toESM(require("react"));
+    import_react136 = __toESM(require("react"));
     import_react_sdk72 = require("@100mslive/react-sdk");
     import_react_icons59 = require("@100mslive/react-icons");
     init_Button2();
@@ -13930,7 +14023,7 @@ var init_ScreenshareDisplay = __esm({
     init_Text2();
     ScreenshareDisplay = () => {
       const hmsActions = (0, import_react_sdk72.useHMSActions)();
-      return /* @__PURE__ */ import_react134.default.createElement(
+      return /* @__PURE__ */ import_react136.default.createElement(
         Flex,
         {
           direction: "column",
@@ -13942,9 +14035,9 @@ var init_ScreenshareDisplay = __esm({
             color: "$on_surface_high"
           }
         },
-        /* @__PURE__ */ import_react134.default.createElement(import_react_icons59.ShareScreenIcon, { width: 48, height: 48 }),
-        /* @__PURE__ */ import_react134.default.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-        /* @__PURE__ */ import_react134.default.createElement(
+        /* @__PURE__ */ import_react136.default.createElement(import_react_icons59.ShareScreenIcon, { width: 48, height: 48 }),
+        /* @__PURE__ */ import_react136.default.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
+        /* @__PURE__ */ import_react136.default.createElement(
           Button,
           {
             variant: "danger",
@@ -13954,7 +14047,7 @@ var init_ScreenshareDisplay = __esm({
             }),
             "data-testid": "stop_screen_share_btn"
           },
-          /* @__PURE__ */ import_react134.default.createElement(import_react_icons59.CrossIcon, { width: 18, height: 18 }),
+          /* @__PURE__ */ import_react136.default.createElement(import_react_icons59.CrossIcon, { width: 18, height: 18 }),
           "\xA0 Stop screen share"
         )
       );
@@ -13963,13 +14056,13 @@ var init_ScreenshareDisplay = __esm({
 });
 
 // src/Prebuilt/components/ScreenshareTile.jsx
-var import_react135, import_react_use25, import_screenfull2, import_react_sdk73, import_react_icons60, labelStyles, Tile2, ScreenshareTile, ScreenshareTile_default;
+var import_react137, import_react_use26, import_screenfull2, import_react_sdk73, import_react_icons60, labelStyles, Tile2, ScreenshareTile, ScreenshareTile_default;
 var init_ScreenshareTile = __esm({
   "src/Prebuilt/components/ScreenshareTile.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react135 = __toESM(require("react"));
-    import_react_use25 = require("react-use");
+    import_react137 = __toESM(require("react"));
+    import_react_use26 = require("react-use");
     import_screenfull2 = __toESM(require("screenfull"));
     import_react_sdk73 = require("@100mslive/react-sdk");
     import_react_icons60 = require("@100mslive/react-icons");
@@ -13994,17 +14087,17 @@ var init_ScreenshareTile = __esm({
       const track = (0, import_react_sdk73.useHMSStore)((0, import_react_sdk73.selectScreenShareByPeerID)(peerId));
       const peer = (0, import_react_sdk73.useHMSStore)((0, import_react_sdk73.selectPeerByID)(peerId));
       const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-      const [isMouseHovered, setIsMouseHovered] = (0, import_react135.useState)(false);
+      const [isMouseHovered, setIsMouseHovered] = (0, import_react137.useState)(false);
       const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-      const fullscreenRef = (0, import_react135.useRef)(null);
-      const [fullscreen, setFullscreen] = (0, import_react135.useState)(false);
-      const isFullscreen = (0, import_react_use25.useFullscreen)(fullscreenRef, fullscreen, {
+      const fullscreenRef = (0, import_react137.useRef)(null);
+      const [fullscreen, setFullscreen] = (0, import_react137.useState)(false);
+      const isFullscreen = (0, import_react_use26.useFullscreen)(fullscreenRef, fullscreen, {
         onClose: () => setFullscreen(false)
       });
       const isFullScreenSupported = import_screenfull2.default.isEnabled;
       const audioTrack = (0, import_react_sdk73.useHMSStore)((0, import_react_sdk73.selectScreenShareAudioByPeerID)(peer == null ? void 0 : peer.id));
       if (isLocal && !["browser", "window", "application"].includes(track == null ? void 0 : track.displaySurface)) {
-        return /* @__PURE__ */ import_react135.default.createElement(ScreenshareDisplay, null);
+        return /* @__PURE__ */ import_react137.default.createElement(ScreenshareDisplay, null);
       }
       if (!peer) {
         return null;
@@ -14014,7 +14107,7 @@ var init_ScreenshareTile = __esm({
         isLocal: false,
         track
       });
-      return /* @__PURE__ */ import_react135.default.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ import_react135.default.createElement(
+      return /* @__PURE__ */ import_react137.default.createElement(StyledVideoTile.Root, { css: { width, height, p: 0, minHeight: 0 }, "data-testid": "screenshare_tile" }, /* @__PURE__ */ import_react137.default.createElement(
         StyledVideoTile.Container,
         {
           transparentBg: true,
@@ -14025,9 +14118,9 @@ var init_ScreenshareTile = __esm({
             setIsMouseHovered(false);
           }
         },
-        showStatsOnTiles ? /* @__PURE__ */ import_react135.default.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-        isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ import_react135.default.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ import_react135.default.createElement(import_react_icons60.ShrinkIcon, null) : /* @__PURE__ */ import_react135.default.createElement(import_react_icons60.ExpandIcon, null)) : null,
-        track ? /* @__PURE__ */ import_react135.default.createElement(
+        showStatsOnTiles ? /* @__PURE__ */ import_react137.default.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
+        isFullScreenSupported && isMouseHovered ? /* @__PURE__ */ import_react137.default.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ import_react137.default.createElement(import_react_icons60.ShrinkIcon, null) : /* @__PURE__ */ import_react137.default.createElement(import_react_icons60.ExpandIcon, null)) : null,
+        track ? /* @__PURE__ */ import_react137.default.createElement(
           Video,
           {
             screenShare: true,
@@ -14037,8 +14130,8 @@ var init_ScreenshareTile = __esm({
             css: { minHeight: 0 }
           }
         ) : null,
-        /* @__PURE__ */ import_react135.default.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-        isMouseHovered && !peer.isLocal ? /* @__PURE__ */ import_react135.default.createElement(
+        /* @__PURE__ */ import_react137.default.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
+        isMouseHovered && !peer.isLocal ? /* @__PURE__ */ import_react137.default.createElement(
           TileMenu_default,
           {
             isScreenshare: true,
@@ -14050,19 +14143,19 @@ var init_ScreenshareTile = __esm({
         ) : null
       ));
     };
-    ScreenshareTile = import_react135.default.memo(Tile2);
+    ScreenshareTile = import_react137.default.memo(Tile2);
     ScreenshareTile_default = ScreenshareTile;
   }
 });
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-var import_react136, import_react_use26, import_react_sdk74, ScreenshareLayout;
+var import_react138, import_react_use27, import_react_sdk74, ScreenshareLayout;
 var init_ScreenshareLayout = __esm({
   "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react136 = __toESM(require("react"));
-    import_react_use26 = require("react-use");
+    import_react138 = __toESM(require("react"));
+    import_react_use27 = require("react-use");
     import_react_sdk74 = require("@100mslive/react-sdk");
     init_Theme();
     init_Pagination2();
@@ -14075,20 +14168,20 @@ var init_ScreenshareLayout = __esm({
       var _a7;
       const peersSharing = (0, import_react_sdk74.useHMSStore)(import_react_sdk74.selectPeersScreenSharing);
       const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-      const [page, setPage] = (0, import_react136.useState)(0);
+      const [page, setPage] = (0, import_react138.useState)(0);
       const activeSharePeer = peersSharing[page];
-      const isMobile = (0, import_react_use26.useMedia)(config.media.md);
-      const secondaryPeers = (0, import_react136.useMemo)(
+      const isMobile = (0, import_react_use27.useMedia)(config.media.md);
+      const secondaryPeers = (0, import_react138.useMemo)(
         () => isMobile ? activeSharePeer ? [activeSharePeer, ...peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id))] : peers : peers.filter((p) => p.id !== (activeSharePeer == null ? void 0 : activeSharePeer.id)),
         [activeSharePeer, peers, isMobile]
       );
-      (0, import_react136.useEffect)(() => {
+      (0, import_react138.useEffect)(() => {
         setActiveScreenSharePeer(isMobile ? "" : activeSharePeer == null ? void 0 : activeSharePeer.id);
         return () => {
           setActiveScreenSharePeer("");
         };
       }, [activeSharePeer == null ? void 0 : activeSharePeer.id, isMobile, setActiveScreenSharePeer]);
-      return /* @__PURE__ */ import_react136.default.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ import_react136.default.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ import_react136.default.createElement(ScreenshareTile_default, { peerId: (_a7 = peersSharing[page]) == null ? void 0 : _a7.id }), !edgeToEdge && /* @__PURE__ */ import_react136.default.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ import_react136.default.createElement(
+      return /* @__PURE__ */ import_react138.default.createElement(ProminenceLayout.Root, { edgeToEdge }, /* @__PURE__ */ import_react138.default.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ import_react138.default.createElement(ScreenshareTile_default, { peerId: (_a7 = peersSharing[page]) == null ? void 0 : _a7.id }), !edgeToEdge && /* @__PURE__ */ import_react138.default.createElement(Pagination, { page, onPageChange: setPage, numPages: peersSharing.length })), /* @__PURE__ */ import_react138.default.createElement(
         SecondaryTiles,
         {
           peers: secondaryPeers,
@@ -14191,12 +14284,12 @@ var init_PeersSorter = __esm({
 });
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-var import_react137, import_react_sdk76, GridLayout;
+var import_react139, import_react_sdk76, GridLayout;
 var init_GridLayout = __esm({
   "src/Prebuilt/components/VideoLayouts/GridLayout.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react137 = __toESM(require("react"));
+    import_react139 = __toESM(require("react"));
     import_react_sdk76 = require("@100mslive/react-sdk");
     init_EqualProminence();
     init_RoleProminence();
@@ -14221,17 +14314,17 @@ var init_GridLayout = __esm({
       const isRoleProminence = prominentRoles.length && peers.some(
         (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
       ) || pinnedTrack;
-      const updatedPeers = (0, import_react137.useMemo)(() => {
+      const updatedPeers = (0, import_react139.useMemo)(() => {
         if (isInsetEnabled && !isRoleProminence && !peerSharing) {
           return peers.filter((peer) => !peer.isLocal);
         }
         return peers;
       }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
       const vanillaStore = (0, import_react_sdk76.useHMSVanillaStore)();
-      const [sortedPeers, setSortedPeers] = (0, import_react137.useState)(updatedPeers);
-      const peersSorter = (0, import_react137.useMemo)(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-      const [pageSize, setPageSize] = (0, import_react137.useState)(0);
-      const [mainPage, setMainPage] = (0, import_react137.useState)(0);
+      const [sortedPeers, setSortedPeers] = (0, import_react139.useState)(updatedPeers);
+      const peersSorter = (0, import_react139.useMemo)(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
+      const [pageSize, setPageSize] = (0, import_react139.useState)(0);
+      const [mainPage, setMainPage] = (0, import_react139.useState)(0);
       const tileLayout = {
         enableSpotlightingPeer: enable_spotlighting_peer,
         hideParticipantNameOnTile: hide_participant_name_on_tile,
@@ -14240,7 +14333,7 @@ var init_GridLayout = __esm({
         hideMetadataOnTile: hide_metadata_on_tile,
         objectFit: video_object_fit
       };
-      (0, import_react137.useEffect)(() => {
+      (0, import_react139.useEffect)(() => {
         if (mainPage !== 0) {
           return;
         }
@@ -14251,7 +14344,7 @@ var init_GridLayout = __esm({
         peersSorter.onUpdate(setSortedPeers);
       }, [mainPage, peersSorter, updatedPeers, pageSize]);
       if (peerSharing) {
-        return /* @__PURE__ */ import_react137.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react137.default.createElement(
+        return /* @__PURE__ */ import_react139.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react139.default.createElement(
           ScreenshareLayout,
           {
             peers: sortedPeers,
@@ -14261,7 +14354,7 @@ var init_GridLayout = __esm({
           }
         ));
       } else if (isRoleProminence) {
-        return /* @__PURE__ */ import_react137.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react137.default.createElement(
+        return /* @__PURE__ */ import_react139.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react139.default.createElement(
           RoleProminence,
           {
             peers: sortedPeers,
@@ -14273,7 +14366,7 @@ var init_GridLayout = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ import_react137.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react137.default.createElement(
+      return /* @__PURE__ */ import_react139.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react139.default.createElement(
         EqualProminence,
         {
           peers: sortedPeers,
@@ -14288,12 +14381,12 @@ var init_GridLayout = __esm({
 });
 
 // src/Prebuilt/layouts/EmbedView.jsx
-var import_react138, import_react_sdk77, EmbedView, EmbebScreenShareView, EmbedComponent;
+var import_react140, import_react_sdk77, EmbedView, EmbebScreenShareView, EmbedComponent;
 var init_EmbedView = __esm({
   "src/Prebuilt/layouts/EmbedView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react138 = __toESM(require("react"));
+    import_react140 = __toESM(require("react"));
     import_react_sdk77 = require("@100mslive/react-sdk");
     init_SecondaryTiles();
     init_ProminenceLayout();
@@ -14301,37 +14394,37 @@ var init_EmbedView = __esm({
     init_useUISettings();
     init_constants();
     EmbedView = () => {
-      return /* @__PURE__ */ import_react138.default.createElement(EmbebScreenShareView, null, /* @__PURE__ */ import_react138.default.createElement(EmbedComponent, null));
+      return /* @__PURE__ */ import_react140.default.createElement(EmbebScreenShareView, null, /* @__PURE__ */ import_react140.default.createElement(EmbedComponent, null));
     };
     EmbebScreenShareView = ({ children }) => {
       const peers = (0, import_react_sdk77.useHMSStore)(import_react_sdk77.selectPeers);
       const peerPresenting = (0, import_react_sdk77.useHMSStore)(import_react_sdk77.selectPeerScreenSharing);
       const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-      const smallTilePeers = (0, import_react138.useMemo)(() => {
+      const smallTilePeers = (0, import_react140.useMemo)(() => {
         const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
         return smallTilePeers2;
       }, [peers, peerPresenting]);
-      (0, import_react138.useEffect)(() => {
+      (0, import_react140.useEffect)(() => {
         setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
         return () => {
           setActiveScreenSharePeer("");
         };
       }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
-      return /* @__PURE__ */ import_react138.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react138.default.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ import_react138.default.createElement(SecondaryTiles, { peers: smallTilePeers }));
+      return /* @__PURE__ */ import_react140.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react140.default.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ import_react140.default.createElement(SecondaryTiles, { peers: smallTilePeers }));
     };
     EmbedComponent = () => {
       const { amIScreenSharing, toggleScreenShare } = (0, import_react_sdk77.useScreenShare)(import_react_sdk77.throwErrorHandler);
       const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-      const [wasScreenShared, setWasScreenShared] = (0, import_react138.useState)(false);
-      const screenShareAttemptInProgress = (0, import_react138.useRef)(false);
+      const [wasScreenShared, setWasScreenShared] = (0, import_react140.useState)(false);
+      const screenShareAttemptInProgress = (0, import_react140.useRef)(false);
       const src = embedConfig.url;
-      const iframeRef = (0, import_react138.useRef)();
-      const resetEmbedConfig = (0, import_react138.useCallback)(() => {
+      const iframeRef = (0, import_react140.useRef)();
+      const resetEmbedConfig = (0, import_react140.useCallback)(() => {
         if (src) {
           setEmbedConfig({ url: "" });
         }
       }, [src, setEmbedConfig]);
-      (0, import_react138.useEffect)(() => {
+      (0, import_react140.useEffect)(() => {
         if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
           screenShareAttemptInProgress.current = true;
           toggleScreenShare({
@@ -14344,7 +14437,7 @@ var init_EmbedView = __esm({
           });
         }
       }, []);
-      (0, import_react138.useEffect)(() => {
+      (0, import_react140.useEffect)(() => {
         if (wasScreenShared && !amIScreenSharing) {
           resetEmbedConfig();
         }
@@ -14355,7 +14448,7 @@ var init_EmbedView = __esm({
           }
         };
       }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-      return /* @__PURE__ */ import_react138.default.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ import_react138.default.createElement(
+      return /* @__PURE__ */ import_react140.default.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ import_react140.default.createElement(
         "iframe",
         {
           src,
@@ -14370,12 +14463,12 @@ var init_EmbedView = __esm({
 });
 
 // src/Prebuilt/layouts/PDFView.jsx
-var import_react139, import_react_sdk78, PDFView, PDFEmbedComponent;
+var import_react141, import_react_sdk78, PDFView, PDFEmbedComponent;
 var init_PDFView = __esm({
   "src/Prebuilt/layouts/PDFView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react139 = __toESM(require("react"));
+    import_react141 = __toESM(require("react"));
     import_react_sdk78 = require("@100mslive/react-sdk");
     init_Layout();
     init_Theme();
@@ -14383,25 +14476,25 @@ var init_PDFView = __esm({
     init_useUISettings();
     init_constants();
     PDFView = () => {
-      return /* @__PURE__ */ import_react139.default.createElement(EmbebScreenShareView, null, /* @__PURE__ */ import_react139.default.createElement(PDFEmbedComponent, null));
+      return /* @__PURE__ */ import_react141.default.createElement(EmbebScreenShareView, null, /* @__PURE__ */ import_react141.default.createElement(PDFEmbedComponent, null));
     };
     PDFEmbedComponent = () => {
-      const ref = (0, import_react139.useRef)();
+      const ref = (0, import_react141.useRef)();
       const themeType = useTheme().themeType;
-      const [isPDFLoaded, setIsPDFLoaded] = (0, import_react139.useState)(false);
+      const [isPDFLoaded, setIsPDFLoaded] = (0, import_react141.useState)(false);
       let pdfJSURL = define_process_env_default.REACT_APP_PDFJS_IFRAME_URL;
       const { amIScreenSharing, toggleScreenShare } = (0, import_react_sdk78.useScreenShare)(import_react_sdk78.throwErrorHandler);
       const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
       if (pdfConfig.url && !pdfConfig.file) {
         pdfJSURL = pdfJSURL + "?file=" + encodeURIComponent(pdfConfig.url);
       }
-      const [wasScreenShared, setWasScreenShared] = (0, import_react139.useState)(false);
-      const screenShareAttemptInProgress = (0, import_react139.useRef)(false);
-      const iframeRef = (0, import_react139.useRef)();
-      const resetEmbedConfig = (0, import_react139.useCallback)(() => {
+      const [wasScreenShared, setWasScreenShared] = (0, import_react141.useState)(false);
+      const screenShareAttemptInProgress = (0, import_react141.useRef)(false);
+      const iframeRef = (0, import_react141.useRef)();
+      const resetEmbedConfig = (0, import_react141.useCallback)(() => {
         setPDFConfig({ state: false });
       }, [setPDFConfig]);
-      (0, import_react139.useEffect)(() => {
+      (0, import_react141.useEffect)(() => {
         if (isPDFLoaded && ref.current) {
           ref.current.contentWindow.postMessage(
             {
@@ -14411,7 +14504,7 @@ var init_PDFView = __esm({
           );
         }
       }, [isPDFLoaded, themeType]);
-      (0, import_react139.useEffect)(() => {
+      (0, import_react141.useEffect)(() => {
         if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
           screenShareAttemptInProgress.current = true;
           toggleScreenShare({
@@ -14425,7 +14518,7 @@ var init_PDFView = __esm({
           });
         }
       }, []);
-      (0, import_react139.useEffect)(() => {
+      (0, import_react141.useEffect)(() => {
         if (wasScreenShared && !amIScreenSharing) {
           resetEmbedConfig();
         }
@@ -14436,7 +14529,7 @@ var init_PDFView = __esm({
           }
         };
       }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-      return /* @__PURE__ */ import_react139.default.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ import_react139.default.createElement(
+      return /* @__PURE__ */ import_react141.default.createElement(Box, { ref: iframeRef, css: { size: "100%" } }, /* @__PURE__ */ import_react141.default.createElement(
         "iframe",
         {
           src: pdfJSURL,
@@ -14479,12 +14572,12 @@ var init_empty_chat = __esm({
 });
 
 // src/Prebuilt/components/hooks/useSetPinnedMessage.js
-var import_react140, import_react_sdk79, useSetPinnedMessage;
+var import_react142, import_react_sdk79, useSetPinnedMessage;
 var init_useSetPinnedMessage = __esm({
   "src/Prebuilt/components/hooks/useSetPinnedMessage.js"() {
     "use strict";
     init_define_process_env();
-    import_react140 = require("react");
+    import_react142 = require("react");
     import_react_sdk79 = require("@100mslive/react-sdk");
     init_ToastManager();
     init_constants();
@@ -14492,7 +14585,7 @@ var init_useSetPinnedMessage = __esm({
       const hmsActions = (0, import_react_sdk79.useHMSActions)();
       const vanillaStore = (0, import_react_sdk79.useHMSVanillaStore)();
       const pinnedMessage = (0, import_react_sdk79.useHMSStore)(import_react_sdk79.selectSessionMetadata);
-      const setPinnedMessage = (0, import_react140.useCallback)(
+      const setPinnedMessage = (0, import_react142.useCallback)(
         /**
          * @param {import("@100mslive/react-sdk").HMSMessage | undefined} message
          */
@@ -14510,18 +14603,33 @@ var init_useSetPinnedMessage = __esm({
   }
 });
 
+// src/Prebuilt/components/Chat/useUnreadCount.js
+var import_react_sdk80, useUnreadCount;
+var init_useUnreadCount = __esm({
+  "src/Prebuilt/components/Chat/useUnreadCount.js"() {
+    "use strict";
+    init_define_process_env();
+    import_react_sdk80 = require("@100mslive/react-sdk");
+    useUnreadCount = ({ role, peerId }) => {
+      const unreadCountSelector = role ? (0, import_react_sdk80.selectMessagesUnreadCountByRole)(role) : peerId ? (0, import_react_sdk80.selectMessagesUnreadCountByPeerID)(peerId) : import_react_sdk80.selectUnreadHMSMessagesCount;
+      const unreadCount = (0, import_react_sdk80.useHMSStore)(unreadCountSelector);
+      return unreadCount;
+    };
+  }
+});
+
 // src/Prebuilt/components/Chat/ChatBody.jsx
-var import_react141, import_react_intersection_observer, import_react_use27, import_react_virtualized_auto_sizer, import_react_window2, import_react_sdk80, import_react_icons61, formatTime2, MessageTypeContainer, MessageType, URL_REGEX, Link3, AnnotisedMessage, getMessageType, ChatActions, SenderName, ChatMessage, ChatList, VirtualizedChatMessages, ChatBody;
+var import_react143, import_react_intersection_observer, import_react_use28, import_react_virtualized_auto_sizer, import_react_window2, import_react_sdk81, import_react_icons61, formatTime2, MessageTypeContainer, MessageType, URL_REGEX, Link3, AnnotisedMessage, getMessageType, ChatActions, SenderName, ChatMessage, ChatList, VirtualizedChatMessages, ChatBody;
 var init_ChatBody = __esm({
   "src/Prebuilt/components/Chat/ChatBody.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react141 = __toESM(require("react"));
+    import_react143 = __toESM(require("react"));
     import_react_intersection_observer = require("react-intersection-observer");
-    import_react_use27 = require("react-use");
+    import_react_use28 = require("react-use");
     import_react_virtualized_auto_sizer = __toESM(require("react-virtualized-auto-sizer"));
     import_react_window2 = require("react-window");
-    import_react_sdk80 = require("@100mslive/react-sdk");
+    import_react_sdk81 = require("@100mslive/react-sdk");
     import_react_icons61 = require("@100mslive/react-icons");
     init_Dropdown2();
     init_IconButton2();
@@ -14532,6 +14640,7 @@ var init_ChatBody = __esm({
     init_empty_chat();
     init_useRoomLayoutScreen();
     init_useSetPinnedMessage();
+    init_useUnreadCount();
     formatTime2 = (date) => {
       if (!(date instanceof Date)) {
         return "";
@@ -14548,7 +14657,7 @@ var init_ChatBody = __esm({
       return `${hours}:${mins} ${suffix}`;
     };
     MessageTypeContainer = ({ left, right }) => {
-      return /* @__PURE__ */ import_react141.default.createElement(
+      return /* @__PURE__ */ import_react143.default.createElement(
         Flex,
         {
           align: "center",
@@ -14560,16 +14669,16 @@ var init_ChatBody = __esm({
             r: "$0"
           }
         },
-        left && /* @__PURE__ */ import_react141.default.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
-        left && right && /* @__PURE__ */ import_react141.default.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
-        right && /* @__PURE__ */ import_react141.default.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
+        left && /* @__PURE__ */ import_react143.default.createElement(SenderName, { variant: "tiny", as: "span", css: { color: "$on_surface_medium" } }, left),
+        left && right && /* @__PURE__ */ import_react143.default.createElement(Box, { css: { borderLeft: "1px solid $border_bright", mx: "$4", h: "$8" } }),
+        right && /* @__PURE__ */ import_react143.default.createElement(SenderName, { as: "span", variant: "tiny", css: { textTransform: "uppercase" } }, right)
       );
     };
     MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-      const peerName = (0, import_react_sdk80.useHMSStore)((0, import_react_sdk80.selectPeerNameByID)(receiver));
-      const localPeerRoleName = (0, import_react_sdk80.useHMSStore)(import_react_sdk80.selectLocalPeerRoleName);
+      const peerName = (0, import_react_sdk81.useHMSStore)((0, import_react_sdk81.selectPeerNameByID)(receiver));
+      const localPeerRoleName = (0, import_react_sdk81.useHMSStore)(import_react_sdk81.selectLocalPeerRoleName);
       if (receiver) {
-        return /* @__PURE__ */ import_react141.default.createElement(
+        return /* @__PURE__ */ import_react143.default.createElement(
           MessageTypeContainer,
           {
             left: hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ""}` : "TO YOU",
@@ -14578,7 +14687,7 @@ var init_ChatBody = __esm({
         );
       }
       if (roles && roles.length) {
-        return /* @__PURE__ */ import_react141.default.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
+        return /* @__PURE__ */ import_react143.default.createElement(MessageTypeContainer, { left: "TO", right: hasCurrentUserSent ? roles.join(",") : localPeerRoleName });
       }
       return null;
     };
@@ -14592,10 +14701,10 @@ var init_ChatBody = __esm({
     });
     AnnotisedMessage = ({ message }) => {
       if (!message) {
-        return /* @__PURE__ */ import_react141.default.createElement(import_react141.Fragment, null);
+        return /* @__PURE__ */ import_react143.default.createElement(import_react143.Fragment, null);
       }
-      return /* @__PURE__ */ import_react141.default.createElement(import_react141.Fragment, null, message.trim().split(/(\s)/).map(
-        (part) => URL_REGEX.test(part) ? /* @__PURE__ */ import_react141.default.createElement(Link3, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
+      return /* @__PURE__ */ import_react143.default.createElement(import_react143.Fragment, null, message.trim().split(/(\s)/).map(
+        (part) => URL_REGEX.test(part) ? /* @__PURE__ */ import_react143.default.createElement(Link3, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part) : part
       ));
     };
     getMessageType = ({ roles, receiver }) => {
@@ -14605,18 +14714,18 @@ var init_ChatBody = __esm({
       return receiver ? "private" : "";
     };
     ChatActions = ({ onPin, showPinAction }) => {
-      const [open, setOpen] = (0, import_react141.useState)(false);
+      const [open, setOpen] = (0, import_react143.useState)(false);
       if (!showPinAction) {
         return null;
       }
-      return /* @__PURE__ */ import_react141.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react141.default.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ import_react141.default.createElement(IconButton, null, /* @__PURE__ */ import_react141.default.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ import_react141.default.createElement(import_react_icons61.VerticalMenuIcon, null)))), /* @__PURE__ */ import_react141.default.createElement(Dropdown.Portal, null, /* @__PURE__ */ import_react141.default.createElement(
+      return /* @__PURE__ */ import_react143.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react143.default.createElement(Dropdown.Trigger, { className: "chat_actions", css: { opacity: open ? 1 : 0, "@md": { opacity: 1 } }, asChild: true }, /* @__PURE__ */ import_react143.default.createElement(IconButton, null, /* @__PURE__ */ import_react143.default.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ import_react143.default.createElement(import_react_icons61.VerticalMenuIcon, null)))), /* @__PURE__ */ import_react143.default.createElement(Dropdown.Portal, null, /* @__PURE__ */ import_react143.default.createElement(
         Dropdown.Content,
         {
           sideOffset: 5,
           align: "end",
           css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
         },
-        /* @__PURE__ */ import_react141.default.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ import_react141.default.createElement(import_react_icons61.PinIcon, null), /* @__PURE__ */ import_react141.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
+        /* @__PURE__ */ import_react143.default.createElement(Dropdown.Item, { "data-testid": "pin_message_btn", onClick: onPin }, /* @__PURE__ */ import_react143.default.createElement(import_react_icons61.PinIcon, null), /* @__PURE__ */ import_react143.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Pin Message"))
       )));
     };
     SenderName = styled(Text, {
@@ -14628,120 +14737,127 @@ var init_ChatBody = __esm({
       color: "$on_surface_high",
       fontWeight: "$semiBold"
     });
-    ChatMessage = import_react141.default.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
-      var _a7, _b7;
-      const { ref, inView } = (0, import_react_intersection_observer.useInView)({ threshold: 0.5, triggerOnce: true });
-      const rowRef = (0, import_react141.useRef)(null);
-      (0, import_react141.useEffect)(() => {
-        if (rowRef.current) {
-          setRowHeight(index, rowRef.current.clientHeight);
-        }
-      }, [index, setRowHeight]);
-      const isMobile = (0, import_react_use27.useMedia)(config.media.md);
-      const { elements } = useRoomLayoutConferencingScreen();
-      const isOverlay = ((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay) && isMobile;
-      const hmsActions = (0, import_react_sdk80.useHMSActions)();
-      const localPeerId = (0, import_react_sdk80.useHMSStore)(import_react_sdk80.selectLocalPeerID);
-      const permissions = (0, import_react_sdk80.useHMSStore)(import_react_sdk80.selectPermissions);
-      const messageType = getMessageType({
-        roles: message.recipientRoles,
-        receiver: message.recipientPeer
-      });
-      const showPinAction = permissions.removeOthers && !messageType && ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.allow_pinning_messages);
-      (0, import_react141.useEffect)(() => {
-        if (message.id && !message.read && inView) {
-          hmsActions.setMessageRead(true, message.id);
-        }
-      }, [message.read, hmsActions, inView, message.id]);
-      return /* @__PURE__ */ import_react141.default.createElement(
-        Box,
-        {
-          ref,
-          as: "div",
-          css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
-          style
-        },
-        /* @__PURE__ */ import_react141.default.createElement(
-          Flex,
+    ChatMessage = import_react143.default.memo(
+      ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
+        var _a7, _b7;
+        const { ref, inView } = (0, import_react_intersection_observer.useInView)({ threshold: 0.5, triggerOnce: true });
+        const rowRef = (0, import_react143.useRef)(null);
+        (0, import_react143.useEffect)(() => {
+          if (rowRef.current) {
+            setRowHeight(index, rowRef.current.clientHeight);
+          }
+        }, [index, setRowHeight]);
+        const isMobile = (0, import_react_use28.useMedia)(config.media.md);
+        const { elements } = useRoomLayoutConferencingScreen();
+        const isOverlay = ((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay) && isMobile;
+        const hmsActions = (0, import_react_sdk81.useHMSActions)();
+        const localPeerId = (0, import_react_sdk81.useHMSStore)(import_react_sdk81.selectLocalPeerID);
+        const permissions = (0, import_react_sdk81.useHMSStore)(import_react_sdk81.selectPermissions);
+        const messageType = getMessageType({
+          roles: message.recipientRoles,
+          receiver: message.recipientPeer
+        });
+        const showPinAction = permissions.removeOthers && !messageType && ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.allow_pinning_messages);
+        (0, import_react143.useEffect)(() => {
+          if (message.id && !message.read && inView) {
+            hmsActions.setMessageRead(true, message.id);
+          }
+        }, [message.read, hmsActions, inView, message.id]);
+        (0, import_react143.useEffect)(() => {
+          if (isLast && inView && unreadCount >= 1) {
+            scrollToBottom(1);
+          }
+        }, [inView, isLast, scrollToBottom, unreadCount]);
+        return /* @__PURE__ */ import_react143.default.createElement(
+          Box,
           {
-            ref: rowRef,
-            align: "center",
-            css: {
-              flexWrap: "wrap",
-              // Theme independent color, token should not be used for transparent chat
-              bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
-              r: messageType ? "$1" : void 0,
-              px: messageType ? "$4" : "$2",
-              py: messageType ? "$4" : 0,
-              userSelect: "none"
-            },
-            key: message.time,
-            "data-testid": "chat_msg"
+            ref,
+            as: "div",
+            css: { mb: "$10", pr: "$10", mt: "$8", "&:hover .chat_actions": { opacity: 1 } },
+            style
           },
-          /* @__PURE__ */ import_react141.default.createElement(
-            Text,
+          /* @__PURE__ */ import_react143.default.createElement(
+            Flex,
             {
+              ref: rowRef,
+              align: "center",
               css: {
-                color: isOverlay ? "#FFF" : "$on_surface_high",
-                fontWeight: "$semiBold",
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                width: "100%"
+                flexWrap: "wrap",
+                // Theme independent color, token should not be used for transparent chat
+                bg: messageType ? isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default" : void 0,
+                r: messageType ? "$1" : void 0,
+                px: messageType ? "$4" : "$2",
+                py: messageType ? "$4" : 0,
+                userSelect: "none"
               },
-              as: "div"
+              key: message.time,
+              "data-testid": "chat_msg"
             },
-            /* @__PURE__ */ import_react141.default.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ import_react141.default.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ import_react141.default.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ import_react141.default.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ import_react141.default.createElement(
+            /* @__PURE__ */ import_react143.default.createElement(
               Text,
               {
-                as: "span",
-                variant: "xs",
                 css: {
-                  ml: "$4",
-                  color: "$on_surface_medium",
-                  flexShrink: 0
-                }
+                  color: isOverlay ? "#FFF" : "$on_surface_high",
+                  fontWeight: "$semiBold",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  width: "100%"
+                },
+                as: "div"
               },
-              formatTime2(message.time)
-            ) : null),
-            /* @__PURE__ */ import_react141.default.createElement(
-              MessageType,
-              {
-                hasCurrentUserSent: message.sender === localPeerId,
-                receiver: message.recipientPeer,
-                roles: message.recipientRoles
-              }
+              /* @__PURE__ */ import_react143.default.createElement(Flex, { align: "baseline" }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ import_react143.default.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName || "Anonymous") : /* @__PURE__ */ import_react143.default.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ import_react143.default.createElement(SenderName, { as: "span", variant: "sm", css: { color: isOverlay ? "#FFF" : "$on_surface_high" } }, message.senderName)), !isOverlay ? /* @__PURE__ */ import_react143.default.createElement(
+                Text,
+                {
+                  as: "span",
+                  variant: "xs",
+                  css: {
+                    ml: "$4",
+                    color: "$on_surface_medium",
+                    flexShrink: 0
+                  }
+                },
+                formatTime2(message.time)
+              ) : null),
+              /* @__PURE__ */ import_react143.default.createElement(
+                MessageType,
+                {
+                  hasCurrentUserSent: message.sender === localPeerId,
+                  receiver: message.recipientPeer,
+                  roles: message.recipientRoles
+                }
+              ),
+              !isOverlay ? /* @__PURE__ */ import_react143.default.createElement(ChatActions, { onPin, showPinAction }) : null
             ),
-            !isOverlay ? /* @__PURE__ */ import_react141.default.createElement(ChatActions, { onPin, showPinAction }) : null
-          ),
-          /* @__PURE__ */ import_react141.default.createElement(
-            Text,
-            {
-              variant: "sm",
-              css: {
-                w: "100%",
-                mt: "$2",
-                wordBreak: "break-word",
-                whiteSpace: "pre-wrap",
-                userSelect: "all",
-                color: isOverlay ? "#FFF" : "$on_surface_high"
+            /* @__PURE__ */ import_react143.default.createElement(
+              Text,
+              {
+                variant: "sm",
+                css: {
+                  w: "100%",
+                  mt: "$2",
+                  wordBreak: "break-word",
+                  whiteSpace: "pre-wrap",
+                  userSelect: "all",
+                  color: isOverlay ? "#FFF" : "$on_surface_high"
+                },
+                onClick: (e) => e.stopPropagation()
               },
-              onClick: (e) => e.stopPropagation()
-            },
-            /* @__PURE__ */ import_react141.default.createElement(AnnotisedMessage, { message: message.message })
+              /* @__PURE__ */ import_react143.default.createElement(AnnotisedMessage, { message: message.message })
+            )
           )
-        )
-      );
-    });
-    ChatList = import_react141.default.forwardRef(
-      ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+        );
+      }
+    );
+    ChatList = import_react143.default.forwardRef(
+      ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
         const { setPinnedMessage } = useSetPinnedMessage();
-        (0, import_react141.useLayoutEffect)(() => {
+        (0, import_react143.useLayoutEffect)(() => {
           if (listRef.current && listRef.current.scrollToItem) {
             scrollToBottom(1);
           }
         }, [listRef]);
-        return /* @__PURE__ */ import_react141.default.createElement(
+        return /* @__PURE__ */ import_react143.default.createElement(
           import_react_window2.VariableSizeList,
           {
             ref: listRef,
@@ -14753,7 +14869,7 @@ var init_ChatBody = __esm({
               overflowX: "hidden"
             }
           },
-          ({ index, style }) => /* @__PURE__ */ import_react141.default.createElement(
+          ({ index, style }) => /* @__PURE__ */ import_react143.default.createElement(
             ChatMessage,
             {
               style,
@@ -14761,25 +14877,28 @@ var init_ChatBody = __esm({
               key: messages[index].id,
               message: messages[index],
               setRowHeight,
+              unreadCount,
+              isLast: index >= messages.length - 2,
+              scrollToBottom,
               onPin: () => setPinnedMessage(messages[index])
             }
           )
         );
       }
     );
-    VirtualizedChatMessages = import_react141.default.forwardRef(({ messages, scrollToBottom }, listRef) => {
-      const rowHeights = (0, import_react141.useRef)({});
+    VirtualizedChatMessages = import_react143.default.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
+      const rowHeights = (0, import_react143.useRef)({});
       function getRowHeight(index) {
         return rowHeights.current[index] + 16 || 72;
       }
-      const setRowHeight = (0, import_react141.useCallback)(
+      const setRowHeight = (0, import_react143.useCallback)(
         (index, size) => {
           listRef.current.resetAfterIndex(0);
           rowHeights.current = __spreadProps(__spreadValues({}, rowHeights.current), { [index]: size });
         },
         [listRef]
       );
-      return /* @__PURE__ */ import_react141.default.createElement(
+      return /* @__PURE__ */ import_react143.default.createElement(
         Box,
         {
           css: {
@@ -14788,14 +14907,14 @@ var init_ChatBody = __esm({
           },
           as: "div"
         },
-        /* @__PURE__ */ import_react141.default.createElement(
+        /* @__PURE__ */ import_react143.default.createElement(
           import_react_virtualized_auto_sizer.default,
           {
             style: {
               width: "90%"
             }
           },
-          ({ height, width }) => /* @__PURE__ */ import_react141.default.createElement(
+          ({ height, width }) => /* @__PURE__ */ import_react143.default.createElement(
             ChatList,
             {
               width,
@@ -14804,21 +14923,23 @@ var init_ChatBody = __esm({
               setRowHeight,
               getRowHeight,
               scrollToBottom,
-              ref: listRef
+              ref: listRef,
+              unreadCount
             }
           )
         )
       );
     });
-    ChatBody = import_react141.default.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+    ChatBody = import_react143.default.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
       var _a7;
-      const storeMessageSelector = role ? (0, import_react_sdk80.selectMessagesByRole)(role) : peerId ? (0, import_react_sdk80.selectMessagesByPeerID)(peerId) : import_react_sdk80.selectHMSMessages;
-      let messages = (0, import_react_sdk80.useHMSStore)(storeMessageSelector);
-      messages = (0, import_react141.useMemo)(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
-      const isMobile = (0, import_react_use27.useMedia)(config.media.md);
+      const storeMessageSelector = role ? (0, import_react_sdk81.selectMessagesByRole)(role) : peerId ? (0, import_react_sdk81.selectMessagesByPeerID)(peerId) : import_react_sdk81.selectHMSMessages;
+      let messages = (0, import_react_sdk81.useHMSStore)(storeMessageSelector);
+      messages = (0, import_react143.useMemo)(() => (messages == null ? void 0 : messages.filter((message) => message.type === "chat")) || [], [messages]);
+      const isMobile = (0, import_react_use28.useMedia)(config.media.md);
       const { elements } = useRoomLayoutConferencingScreen();
+      const unreadCount = useUnreadCount({ role, peerId });
       if (messages.length === 0 && !(isMobile && ((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay))) {
-        return /* @__PURE__ */ import_react141.default.createElement(
+        return /* @__PURE__ */ import_react143.default.createElement(
           Flex,
           {
             css: {
@@ -14830,7 +14951,7 @@ var init_ChatBody = __esm({
             align: "center",
             justify: "center"
           },
-          /* @__PURE__ */ import_react141.default.createElement(Box, null, /* @__PURE__ */ import_react141.default.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ import_react141.default.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ import_react141.default.createElement(
+          /* @__PURE__ */ import_react143.default.createElement(Box, null, /* @__PURE__ */ import_react143.default.createElement("img", { src: empty_chat_default, alt: "Empty Chat", height: 132, width: 185, style: { margin: "0 auto" } }), /* @__PURE__ */ import_react143.default.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, "Start a conversation"), /* @__PURE__ */ import_react143.default.createElement(
             Text,
             {
               variant: "sm",
@@ -14840,27 +14961,35 @@ var init_ChatBody = __esm({
           ))
         );
       }
-      return /* @__PURE__ */ import_react141.default.createElement(import_react141.Fragment, null, /* @__PURE__ */ import_react141.default.createElement(VirtualizedChatMessages, { messages, scrollToBottom, ref: listRef }));
+      return /* @__PURE__ */ import_react143.default.createElement(import_react143.Fragment, null, /* @__PURE__ */ import_react143.default.createElement(
+        VirtualizedChatMessages,
+        {
+          messages,
+          scrollToBottom,
+          unreadCount,
+          ref: listRef
+        }
+      ));
     });
   }
 });
 
 // src/Prebuilt/components/AppData/useChatState.js
-var import_react142, import_react_sdk81, useChatDraftMessage;
+var import_react144, import_react_sdk82, useChatDraftMessage;
 var init_useChatState = __esm({
   "src/Prebuilt/components/AppData/useChatState.js"() {
     "use strict";
     init_define_process_env();
-    import_react142 = require("react");
-    import_react_sdk81 = require("@100mslive/react-sdk");
+    import_react144 = require("react");
+    import_react_sdk82 = require("@100mslive/react-sdk");
     init_constants();
     useChatDraftMessage = () => {
-      const hmsActions = (0, import_react_sdk81.useHMSActions)();
-      let chatDraftMessage = (0, import_react_sdk81.useHMSStore)((0, import_react_sdk81.selectAppData)(APP_DATA.chatDraft));
+      const hmsActions = (0, import_react_sdk82.useHMSActions)();
+      let chatDraftMessage = (0, import_react_sdk82.useHMSStore)((0, import_react_sdk82.selectAppData)(APP_DATA.chatDraft));
       if (chatDraftMessage === void 0 || chatDraftMessage === null) {
         chatDraftMessage = "";
       }
-      const setDraftMessage = (0, import_react142.useCallback)(
+      const setDraftMessage = (0, import_react144.useCallback)(
         (message) => {
           hmsActions.setAppData(APP_DATA.chatDraft, message, true);
         },
@@ -14872,15 +15001,15 @@ var init_useChatState = __esm({
 });
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-var import_react143, useEmojiPickerStyles;
+var import_react145, useEmojiPickerStyles;
 var init_useEmojiPickerStyles = __esm({
   "src/Prebuilt/components/Chat/useEmojiPickerStyles.js"() {
     "use strict";
     init_define_process_env();
-    import_react143 = require("react");
+    import_react145 = require("react");
     useEmojiPickerStyles = (showing) => {
-      const ref = (0, import_react143.useRef)(null);
-      (0, import_react143.useEffect)(() => {
+      const ref = (0, import_react145.useRef)(null);
+      (0, import_react145.useEffect)(() => {
         if (showing) {
           setTimeout(() => {
             var _a7, _b7;
@@ -14913,9 +15042,9 @@ var init_useEmojiPickerStyles = __esm({
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
 function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = (0, import_react144.useState)(false);
+  const [showEmoji, setShowEmoji] = (0, import_react146.useState)(false);
   const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ import_react144.default.createElement(Popover2.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ import_react144.default.createElement(Popover2.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ import_react144.default.createElement(IconButton, { as: "div" }, /* @__PURE__ */ import_react144.default.createElement(import_react_icons62.EmojiIcon, null))), /* @__PURE__ */ import_react144.default.createElement(Popover2.Portal, null, /* @__PURE__ */ import_react144.default.createElement(
+  return /* @__PURE__ */ import_react146.default.createElement(Popover2.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ import_react146.default.createElement(Popover2.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ import_react146.default.createElement(IconButton, { as: "div" }, /* @__PURE__ */ import_react146.default.createElement(import_react_icons62.EmojiIcon, null))), /* @__PURE__ */ import_react146.default.createElement(Popover2.Portal, null, /* @__PURE__ */ import_react146.default.createElement(
     Popover2.Content,
     {
       alignOffset: -40,
@@ -14925,7 +15054,7 @@ function EmojiPicker({ onSelect }) {
         p: 0
       }
     },
-    /* @__PURE__ */ import_react144.default.createElement(
+    /* @__PURE__ */ import_react146.default.createElement(
       Box,
       {
         css: {
@@ -14934,20 +15063,20 @@ function EmojiPicker({ onSelect }) {
         },
         ref
       },
-      /* @__PURE__ */ import_react144.default.createElement(import_react145.default, { onEmojiSelect: onSelect, data: import_data.default, previewPosition: "none", skinPosition: "search" })
+      /* @__PURE__ */ import_react146.default.createElement(import_react147.default, { onEmojiSelect: onSelect, data: import_data.default, previewPosition: "none", skinPosition: "search" })
     )
   )));
 }
-var import_react144, import_react_use28, import_data, import_react145, import_react_sdk82, import_react_icons62, TextArea, ChatFooter;
+var import_react146, import_react_use29, import_data, import_react147, import_react_sdk83, import_react_icons62, TextArea, ChatFooter;
 var init_ChatFooter = __esm({
   "src/Prebuilt/components/Chat/ChatFooter.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react144 = __toESM(require("react"));
-    import_react_use28 = require("react-use");
+    import_react146 = __toESM(require("react"));
+    import_react_use29 = require("react-use");
     import_data = __toESM(require("@emoji-mart/data"));
-    import_react145 = __toESM(require("@emoji-mart/react"));
-    import_react_sdk82 = require("@100mslive/react-sdk");
+    import_react147 = __toESM(require("@emoji-mart/react"));
+    import_react_sdk83 = require("@100mslive/react-sdk");
     import_react_icons62 = require("@100mslive/react-icons");
     init_src();
     init_ToastManager();
@@ -14978,13 +15107,13 @@ var init_ChatFooter = __esm({
       children
     }) => {
       var _a7;
-      const hmsActions = (0, import_react_sdk82.useHMSActions)();
-      const inputRef = (0, import_react144.useRef)(null);
+      const hmsActions = (0, import_react_sdk83.useHMSActions)();
+      const inputRef = (0, import_react146.useRef)(null);
       const [draftMessage, setDraftMessage] = useChatDraftMessage();
-      const isMobile = (0, import_react_use28.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use29.useMedia)(config.media.md);
       const { elements } = useRoomLayoutConferencingScreen();
       const isOverlayChat = (_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay;
-      const sendMessage = (0, import_react144.useCallback)(() => __async(void 0, null, function* () {
+      const sendMessage = (0, import_react146.useCallback)(() => __async(void 0, null, function* () {
         var _a8;
         const message = (_a8 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a8.value;
         if (!message || !message.trim().length) {
@@ -15007,19 +15136,19 @@ var init_ChatFooter = __esm({
           ToastManager.addToast({ title: err.message });
         }
       }), [role, peerId, hmsActions, onSend]);
-      (0, import_react144.useEffect)(() => {
+      (0, import_react146.useEffect)(() => {
         const messageElement = inputRef.current;
         if (messageElement) {
           messageElement.value = draftMessage;
         }
       }, [draftMessage]);
-      (0, import_react144.useEffect)(() => {
+      (0, import_react146.useEffect)(() => {
         const messageElement = inputRef.current;
         return () => {
           setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
         };
       }, [setDraftMessage]);
-      return /* @__PURE__ */ import_react144.default.createElement(import_react144.default.Fragment, null, /* @__PURE__ */ import_react144.default.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ import_react144.default.createElement(
+      return /* @__PURE__ */ import_react146.default.createElement(import_react146.default.Fragment, null, /* @__PURE__ */ import_react146.default.createElement(Flex, { align: "center", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ import_react146.default.createElement(
         Flex,
         {
           align: "center",
@@ -15040,7 +15169,7 @@ var init_ChatFooter = __esm({
           }
         },
         children,
-        /* @__PURE__ */ import_react144.default.createElement(
+        /* @__PURE__ */ import_react146.default.createElement(
           TextArea,
           {
             css: {
@@ -15068,7 +15197,7 @@ var init_ChatFooter = __esm({
             onCopy: (e) => e.stopPropagation()
           }
         ),
-        !isMobile ? /* @__PURE__ */ import_react144.default.createElement(
+        !isMobile ? /* @__PURE__ */ import_react146.default.createElement(
           EmojiPicker,
           {
             onSelect: (emoji) => {
@@ -15078,7 +15207,7 @@ var init_ChatFooter = __esm({
             }
           }
         ) : null,
-        /* @__PURE__ */ import_react144.default.createElement(
+        /* @__PURE__ */ import_react146.default.createElement(
           IconButton,
           {
             className: "send-msg",
@@ -15091,36 +15220,21 @@ var init_ChatFooter = __esm({
             },
             "data-testid": "send_msg_btn"
           },
-          /* @__PURE__ */ import_react144.default.createElement(import_react_icons62.SendIcon, null)
+          /* @__PURE__ */ import_react146.default.createElement(import_react_icons62.SendIcon, null)
         )
       )));
     };
   }
 });
 
-// src/Prebuilt/components/Chat/useUnreadCount.js
-var import_react_sdk83, useUnreadCount;
-var init_useUnreadCount = __esm({
-  "src/Prebuilt/components/Chat/useUnreadCount.js"() {
-    "use strict";
-    init_define_process_env();
-    import_react_sdk83 = require("@100mslive/react-sdk");
-    useUnreadCount = ({ role, peerId }) => {
-      const unreadCountSelector = role ? (0, import_react_sdk83.selectMessagesUnreadCountByRole)(role) : peerId ? (0, import_react_sdk83.selectMessagesUnreadCountByPeerID)(peerId) : import_react_sdk83.selectUnreadHMSMessagesCount;
-      const unreadCount = (0, import_react_sdk83.useHMSStore)(unreadCountSelector);
-      return unreadCount;
-    };
-  }
-});
-
 // src/Prebuilt/components/Chat/Chat.jsx
-var import_react146, import_react_use29, import_react_sdk84, import_react_icons63, PINNED_MESSAGE_LENGTH, PinnedMessage, Chat, NewMessageIndicator;
+var import_react148, import_react_use30, import_react_sdk84, import_react_icons63, PINNED_MESSAGE_LENGTH, PinnedMessage, Chat, NewMessageIndicator;
 var init_Chat = __esm({
   "src/Prebuilt/components/Chat/Chat.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react146 = __toESM(require("react"));
-    import_react_use29 = require("react-use");
+    import_react148 = __toESM(require("react"));
+    import_react_use30 = require("react-use");
     import_react_sdk84 = require("@100mslive/react-sdk");
     import_react_icons63 = require("@100mslive/react-icons");
     init_Button2();
@@ -15139,7 +15253,7 @@ var init_Chat = __esm({
       const permissions = (0, import_react_sdk84.useHMSStore)(import_react_sdk84.selectPermissions);
       const pinnedMessage = (0, import_react_sdk84.useHMSStore)((0, import_react_sdk84.selectSessionStore)(SESSION_STORE_KEY.PINNED_MESSAGE));
       const formattedPinnedMessage = (pinnedMessage == null ? void 0 : pinnedMessage.length) && pinnedMessage.length > PINNED_MESSAGE_LENGTH ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...` : pinnedMessage;
-      return pinnedMessage ? /* @__PURE__ */ import_react146.default.createElement(
+      return pinnedMessage ? /* @__PURE__ */ import_react148.default.createElement(
         Flex,
         {
           title: pinnedMessage,
@@ -15147,8 +15261,8 @@ var init_Chat = __esm({
           align: "center",
           justify: "between"
         },
-        /* @__PURE__ */ import_react146.default.createElement(import_react_icons63.PinIcon, null),
-        /* @__PURE__ */ import_react146.default.createElement(
+        /* @__PURE__ */ import_react148.default.createElement(import_react_icons63.PinIcon, null),
+        /* @__PURE__ */ import_react148.default.createElement(
           Box,
           {
             css: {
@@ -15158,15 +15272,15 @@ var init_Chat = __esm({
               overflowY: "auto"
             }
           },
-          /* @__PURE__ */ import_react146.default.createElement(Text, { variant: "sm" }, /* @__PURE__ */ import_react146.default.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
+          /* @__PURE__ */ import_react148.default.createElement(Text, { variant: "sm" }, /* @__PURE__ */ import_react148.default.createElement(AnnotisedMessage, { message: formattedPinnedMessage }))
         ),
-        permissions.removeOthers && /* @__PURE__ */ import_react146.default.createElement(
+        permissions.removeOthers && /* @__PURE__ */ import_react148.default.createElement(
           Flex,
           {
             onClick: () => clearPinnedMessage(),
             css: { cursor: "pointer", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
           },
-          /* @__PURE__ */ import_react146.default.createElement(import_react_icons63.CrossIcon, null)
+          /* @__PURE__ */ import_react148.default.createElement(import_react_icons63.CrossIcon, null)
         )
       ) : null;
     };
@@ -15176,16 +15290,16 @@ var init_Chat = __esm({
       const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
       const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
       const peerName = (0, import_react_sdk84.useHMSStore)((0, import_react_sdk84.selectPeerNameByID)(peerSelector));
-      const [chatOptions, setChatOptions] = (0, import_react146.useState)({
+      const [chatOptions, setChatOptions] = (0, import_react148.useState)({
         role: roleSelector || "",
         peerId: peerSelector && peerName ? peerSelector : "",
         selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : "Everyone"
       });
-      const [isSelectorOpen] = (0, import_react146.useState)(false);
-      const listRef = (0, import_react146.useRef)(null);
+      const [isSelectorOpen] = (0, import_react148.useState)(false);
+      const listRef = (0, import_react148.useRef)(null);
       const hmsActions = (0, import_react_sdk84.useHMSActions)();
       const { setPinnedMessage } = useSetPinnedMessage();
-      (0, import_react146.useEffect)(() => {
+      (0, import_react148.useEffect)(() => {
         if (notification && notification.data && peerSelector === notification.data.id) {
           setPeerSelector("");
           setChatOptions({
@@ -15197,14 +15311,14 @@ var init_Chat = __esm({
       }, [notification, peerSelector, setPeerSelector]);
       const storeMessageSelector = import_react_sdk84.selectHMSMessagesCount;
       const { elements } = useRoomLayoutConferencingScreen();
-      const isMobile = (0, import_react_use29.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use30.useMedia)(config.media.md);
       let isScrolledToBottom = false;
       if (listRef.current) {
         const currentRef = listRef.current._outerRef;
         isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
       }
       const messagesCount = (0, import_react_sdk84.useHMSStore)(storeMessageSelector) || 0;
-      const scrollToBottom = (0, import_react146.useCallback)(
+      const scrollToBottom = (0, import_react148.useCallback)(
         (unreadCount = 0) => {
           var _a8;
           if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -15218,7 +15332,7 @@ var init_Chat = __esm({
         },
         [hmsActions, messagesCount]
       );
-      return /* @__PURE__ */ import_react146.default.createElement(
+      return /* @__PURE__ */ import_react148.default.createElement(
         Flex,
         {
           direction: "column",
@@ -15227,8 +15341,8 @@ var init_Chat = __esm({
             gap: "$4"
           }
         },
-        isMobile && ((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay) ? null : /* @__PURE__ */ import_react146.default.createElement(import_react146.default.Fragment, null, ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.allow_pinning_messages) ? /* @__PURE__ */ import_react146.default.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
-        /* @__PURE__ */ import_react146.default.createElement(
+        isMobile && ((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay) ? null : /* @__PURE__ */ import_react148.default.createElement(import_react148.default.Fragment, null, ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.allow_pinning_messages) ? /* @__PURE__ */ import_react148.default.createElement(PinnedMessage, { clearPinnedMessage: setPinnedMessage }) : null),
+        /* @__PURE__ */ import_react148.default.createElement(
           ChatBody,
           {
             role: chatOptions.role,
@@ -15238,7 +15352,7 @@ var init_Chat = __esm({
             screenType
           }
         ),
-        /* @__PURE__ */ import_react146.default.createElement(
+        /* @__PURE__ */ import_react148.default.createElement(
           ChatFooter,
           {
             role: chatOptions.role,
@@ -15256,7 +15370,7 @@ var init_Chat = __esm({
             },
             peerId: chatOptions.peerId
           },
-          !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ import_react146.default.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
+          !isSelectorOpen && !isScrolledToBottom && /* @__PURE__ */ import_react148.default.createElement(NewMessageIndicator, { role: chatOptions.role, peerId: chatOptions.peerId, scrollToBottom })
         )
       );
     };
@@ -15265,7 +15379,7 @@ var init_Chat = __esm({
       if (!unreadCount) {
         return null;
       }
-      return /* @__PURE__ */ import_react146.default.createElement(
+      return /* @__PURE__ */ import_react148.default.createElement(
         Flex,
         {
           justify: "center",
@@ -15276,7 +15390,7 @@ var init_Chat = __esm({
             position: "absolute"
           }
         },
-        /* @__PURE__ */ import_react146.default.createElement(
+        /* @__PURE__ */ import_react148.default.createElement(
           Button,
           {
             variant: "standard",
@@ -15299,7 +15413,7 @@ var init_Chat = __esm({
           },
           "New ",
           unreadCount === 1 ? "message" : "messages",
-          /* @__PURE__ */ import_react146.default.createElement(import_react_icons63.ChevronDownIcon, null)
+          /* @__PURE__ */ import_react148.default.createElement(import_react_icons63.ChevronDownIcon, null)
         )
       );
     };
@@ -15307,13 +15421,13 @@ var init_Chat = __esm({
 });
 
 // src/Prebuilt/components/SidePaneTabs.tsx
-var import_react147, import_react_use30, import_react_sdk85, import_react_icons64, tabTriggerCSS, ParticipantCount2, SidePaneTabs;
+var import_react149, import_react_use31, import_react_sdk85, import_react_icons64, tabTriggerCSS, ParticipantCount2, SidePaneTabs;
 var init_SidePaneTabs = __esm({
   "src/Prebuilt/components/SidePaneTabs.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react147 = __toESM(require("react"));
-    import_react_use30 = require("react-use");
+    import_react149 = __toESM(require("react"));
+    import_react_use31 = require("react-use");
     import_react_sdk85 = require("@100mslive/react-sdk");
     import_react_icons64 = require("@100mslive/react-icons");
     init_Chat();
@@ -15333,23 +15447,23 @@ var init_SidePaneTabs = __esm({
       justifyContent: "center"
     };
     ParticipantCount2 = ({ count }) => {
-      return count < 1e3 ? /* @__PURE__ */ import_react147.default.createElement("span", null, "(", count, ")") : /* @__PURE__ */ import_react147.default.createElement(Tooltip, { title: count }, /* @__PURE__ */ import_react147.default.createElement("span", null, "(", getFormattedCount(count), ")"));
+      return count < 1e3 ? /* @__PURE__ */ import_react149.default.createElement("span", null, "(", count, ")") : /* @__PURE__ */ import_react149.default.createElement(Tooltip, { title: count }, /* @__PURE__ */ import_react149.default.createElement("span", null, "(", getFormattedCount(count), ")"));
     };
-    SidePaneTabs = import_react147.default.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+    SidePaneTabs = import_react149.default.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
       var _a7;
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
       const resetSidePane = useSidepaneReset();
-      const [activeTab, setActiveTab] = (0, import_react147.useState)(active);
+      const [activeTab, setActiveTab] = (0, import_react149.useState)(active);
       const peerCount = (0, import_react_sdk85.useHMSStore)(import_react_sdk85.selectPeerCount);
       const { elements } = useRoomLayoutConferencingScreen();
       const showChat = !!(elements == null ? void 0 : elements.chat);
       const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
       const hideTabs = !(showChat && showParticipants);
-      const isMobile = (0, import_react_use30.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use31.useMedia)(config.media.md);
       const isOverlayChat = !!((_a7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a7.is_overlay) && isMobile;
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-      (0, import_react147.useEffect)(() => {
+      (0, import_react149.useEffect)(() => {
         if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
           setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
         } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
@@ -15358,10 +15472,10 @@ var init_SidePaneTabs = __esm({
           resetSidePane();
         }
       }, [showChat, activeTab, showParticipants, resetSidePane]);
-      (0, import_react147.useEffect)(() => {
+      (0, import_react149.useEffect)(() => {
         setActiveTab(active);
       }, [active]);
-      return /* @__PURE__ */ import_react147.default.createElement(
+      return /* @__PURE__ */ import_react149.default.createElement(
         Flex,
         {
           direction: "column",
@@ -15372,7 +15486,7 @@ var init_SidePaneTabs = __esm({
             transition: "margin 0.3s ease-in-out"
           }
         },
-        isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ import_react147.default.createElement(Chat, { screenType }) : /* @__PURE__ */ import_react147.default.createElement(import_react147.default.Fragment, null, hideTabs ? /* @__PURE__ */ import_react147.default.createElement(import_react147.default.Fragment, null, /* @__PURE__ */ import_react147.default.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ import_react147.default.createElement("span", null, "Participants ", /* @__PURE__ */ import_react147.default.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ import_react147.default.createElement(Chat, { screenType }) : /* @__PURE__ */ import_react147.default.createElement(ParticipantList, null)) : /* @__PURE__ */ import_react147.default.createElement(
+        isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ import_react149.default.createElement(Chat, { screenType }) : /* @__PURE__ */ import_react149.default.createElement(import_react149.default.Fragment, null, hideTabs ? /* @__PURE__ */ import_react149.default.createElement(import_react149.default.Fragment, null, /* @__PURE__ */ import_react149.default.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ import_react149.default.createElement("span", null, "Participants ", /* @__PURE__ */ import_react149.default.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ import_react149.default.createElement(Chat, { screenType }) : /* @__PURE__ */ import_react149.default.createElement(ParticipantList, null)) : /* @__PURE__ */ import_react149.default.createElement(
           Tabs.Root,
           {
             value: activeTab,
@@ -15382,7 +15496,7 @@ var init_SidePaneTabs = __esm({
               size: "100%"
             }
           },
-          /* @__PURE__ */ import_react147.default.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ import_react147.default.createElement(
+          /* @__PURE__ */ import_react149.default.createElement(Tabs.List, { css: { w: "calc(100% - $12)", p: "$2", borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ import_react149.default.createElement(
             Tabs.Trigger,
             {
               value: SIDE_PANE_OPTIONS.CHAT,
@@ -15392,7 +15506,7 @@ var init_SidePaneTabs = __esm({
               })
             },
             "Chat"
-          ), /* @__PURE__ */ import_react147.default.createElement(
+          ), /* @__PURE__ */ import_react149.default.createElement(
             Tabs.Trigger,
             {
               value: SIDE_PANE_OPTIONS.PARTICIPANTS,
@@ -15402,12 +15516,12 @@ var init_SidePaneTabs = __esm({
               })
             },
             "Participants ",
-            /* @__PURE__ */ import_react147.default.createElement(ParticipantCount2, { count: peerCount })
+            /* @__PURE__ */ import_react149.default.createElement(ParticipantCount2, { count: peerCount })
           )),
-          /* @__PURE__ */ import_react147.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ import_react147.default.createElement(ParticipantList, null)),
-          /* @__PURE__ */ import_react147.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ import_react147.default.createElement(Chat, { screenType }))
+          /* @__PURE__ */ import_react149.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ import_react149.default.createElement(ParticipantList, null)),
+          /* @__PURE__ */ import_react149.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ import_react149.default.createElement(Chat, { screenType }))
         )),
-        isOverlayChat && isChatOpen ? null : /* @__PURE__ */ import_react147.default.createElement(
+        isOverlayChat && isChatOpen ? null : /* @__PURE__ */ import_react149.default.createElement(
           IconButton,
           {
             css: { position: "absolute", right: "$10", top: "$11", "@md": { top: "$8", right: "$8" } },
@@ -15421,7 +15535,7 @@ var init_SidePaneTabs = __esm({
             },
             "data-testid": "close_chat"
           },
-          /* @__PURE__ */ import_react147.default.createElement(import_react_icons64.CrossIcon, null)
+          /* @__PURE__ */ import_react149.default.createElement(import_react_icons64.CrossIcon, null)
         )
       );
     });
@@ -15437,12 +15551,12 @@ var init_rtmp = __esm({
 });
 
 // src/Prebuilt/components/Streaming/HLSStreaming.jsx
-var import_react148, import_react_sdk86, import_react_icons65, getCardData, Card, HLSStreaming, StartHLS, EndHLS;
+var import_react150, import_react_sdk86, import_react_icons65, getCardData, Card, HLSStreaming, StartHLS, EndHLS;
 var init_HLSStreaming = __esm({
   "src/Prebuilt/components/Streaming/HLSStreaming.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react148 = __toESM(require("react"));
+    import_react150 = __toESM(require("react"));
     import_react_sdk86 = require("@100mslive/react-sdk");
     import_react_icons65 = require("@100mslive/react-icons");
     init_src();
@@ -15458,7 +15572,7 @@ var init_HLSStreaming = __esm({
           data3 = {
             title: formattedRoleName,
             content: "Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.",
-            icon: /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.SupportIcon, null)
+            icon: /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.SupportIcon, null)
           };
           break;
         }
@@ -15466,7 +15580,7 @@ var init_HLSStreaming = __esm({
           data3 = {
             title: "HLS Viewer",
             content: "Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.",
-            icon: /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.EyeOpenIcon, null)
+            icon: /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.EyeOpenIcon, null)
           };
           break;
         }
@@ -15474,7 +15588,7 @@ var init_HLSStreaming = __esm({
           data3 = {
             title: formattedRoleName,
             content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
-            icon: /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.WrenchIcon, null),
+            icon: /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.WrenchIcon, null),
             order: 1
           };
       }
@@ -15482,8 +15596,8 @@ var init_HLSStreaming = __esm({
       return data3;
     };
     Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
-      const [copied, setCopied] = (0, import_react148.useState)(false);
-      return isHLSRunning ? /* @__PURE__ */ import_react148.default.createElement(
+      const [copied, setCopied] = (0, import_react150.useState)(false);
+      return isHLSRunning ? /* @__PURE__ */ import_react150.default.createElement(
         Box,
         {
           key: title,
@@ -15494,9 +15608,9 @@ var init_HLSStreaming = __esm({
             borderRadius: "$2"
           }
         },
-        /* @__PURE__ */ import_react148.default.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ import_react148.default.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
-        /* @__PURE__ */ import_react148.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
-        /* @__PURE__ */ import_react148.default.createElement(
+        /* @__PURE__ */ import_react150.default.createElement(Flex, { align: "center", gap: "2", css: { color: "$primary_bright" } }, icon, /* @__PURE__ */ import_react150.default.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, title)),
+        /* @__PURE__ */ import_react150.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$6" } }, content),
+        /* @__PURE__ */ import_react150.default.createElement(
           Button,
           {
             variant: "standard",
@@ -15508,7 +15622,7 @@ var init_HLSStreaming = __esm({
             css: { w: "100%", r: "$1", mt: "$10", fontWeight: "$semiBold" },
             icon: true
           },
-          copied ? /* @__PURE__ */ import_react148.default.createElement(import_react148.default.Fragment, null, "Link copied!") : /* @__PURE__ */ import_react148.default.createElement(import_react148.default.Fragment, null, /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
+          copied ? /* @__PURE__ */ import_react150.default.createElement(import_react150.default.Fragment, null, "Link copied!") : /* @__PURE__ */ import_react150.default.createElement(import_react150.default.Fragment, null, /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.LinkIcon, { style: { color: "inherit" } }), "Copy Invite Link")
         )
       ) : null;
     };
@@ -15517,15 +15631,15 @@ var init_HLSStreaming = __esm({
       const roomId = (0, import_react_sdk86.useHMSStore)(import_react_sdk86.selectRoomID);
       const cards = roleNames.map((roleName) => getCardData(roleName, roomId));
       const { isHLSRunning } = (0, import_react_sdk86.useRecordingStreaming)();
-      const [showLinks, setShowLinks] = (0, import_react148.useState)(false);
-      return !showLinks ? /* @__PURE__ */ import_react148.default.createElement(Container4, { rounded: true }, /* @__PURE__ */ import_react148.default.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ import_react148.default.createElement(ContentBody, { title: "HLS Streaming", Icon: import_react_icons65.GoLiveIcon, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ import_react148.default.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ import_react148.default.createElement(StartHLS, null)) : /* @__PURE__ */ import_react148.default.createElement(Container4, { rounded: true }, /* @__PURE__ */ import_react148.default.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ import_react148.default.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ import_react148.default.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
+      const [showLinks, setShowLinks] = (0, import_react150.useState)(false);
+      return !showLinks ? /* @__PURE__ */ import_react150.default.createElement(Container4, { rounded: true }, /* @__PURE__ */ import_react150.default.createElement(ContentHeader, { title: "Start Streaming", content: "HLS", onBack }), /* @__PURE__ */ import_react150.default.createElement(ContentBody, { title: "HLS Streaming", Icon: import_react_icons65.GoLiveIcon, removeVerticalPadding: true }, "Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this platform."), isHLSRunning ? /* @__PURE__ */ import_react150.default.createElement(EndHLS, { setShowLinks }) : /* @__PURE__ */ import_react150.default.createElement(StartHLS, null)) : /* @__PURE__ */ import_react150.default.createElement(Container4, { rounded: true }, /* @__PURE__ */ import_react150.default.createElement(ContentHeader, { title: "Invite People", content: "Start the conversation", onBack: () => setShowLinks(false) }), /* @__PURE__ */ import_react150.default.createElement(Flex, { direction: "column", css: { gap: "$10", p: "$0 $10", overflowY: "auto", mb: "$10" } }, cards.map((card) => /* @__PURE__ */ import_react150.default.createElement(Card, __spreadProps(__spreadValues({ key: card.title }, card), { isHLSRunning })))));
     };
     StartHLS = () => {
-      const [record, setRecord] = (0, import_react148.useState)(false);
-      const [error, setError] = (0, import_react148.useState)(false);
+      const [record, setRecord] = (0, import_react150.useState)(false);
+      const [error, setError] = (0, import_react150.useState)(false);
       const hmsActions = (0, import_react_sdk86.useHMSActions)();
       const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-      const startHLS = (0, import_react148.useCallback)(
+      const startHLS = (0, import_react150.useCallback)(
         (variants) => __async(void 0, null, function* () {
           try {
             if (isHLSStarted) {
@@ -15544,7 +15658,7 @@ var init_HLSStreaming = __esm({
         }),
         [hmsActions, record, isHLSStarted, setHLSStarted]
       );
-      return /* @__PURE__ */ import_react148.default.createElement(import_react148.Fragment, null, /* @__PURE__ */ import_react148.default.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ import_react148.default.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ import_react148.default.createElement(ErrorText, { error }), /* @__PURE__ */ import_react148.default.createElement(
+      return /* @__PURE__ */ import_react150.default.createElement(import_react150.Fragment, null, /* @__PURE__ */ import_react150.default.createElement(RecordStream, { record, setRecord, testId: "hls-recording" }), /* @__PURE__ */ import_react150.default.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ import_react150.default.createElement(ErrorText, { error }), /* @__PURE__ */ import_react150.default.createElement(
         Button,
         {
           "data-testid": "start_hls",
@@ -15553,21 +15667,21 @@ var init_HLSStreaming = __esm({
           onClick: () => startHLS(),
           disabled: isHLSStarted
         },
-        isHLSStarted ? /* @__PURE__ */ import_react148.default.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.GoLiveIcon, null),
+        isHLSStarted ? /* @__PURE__ */ import_react150.default.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.GoLiveIcon, null),
         isHLSStarted ? "Starting stream..." : "Go Live"
-      )), /* @__PURE__ */ import_react148.default.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ import_react148.default.createElement(Text, null, /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.InfoIcon, { width: 16, height: 16 })), /* @__PURE__ */ import_react148.default.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
+      )), /* @__PURE__ */ import_react150.default.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ import_react150.default.createElement(Text, null, /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.InfoIcon, { width: 16, height: 16 })), /* @__PURE__ */ import_react150.default.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
     };
     EndHLS = ({ setShowLinks }) => {
       const hmsActions = (0, import_react_sdk86.useHMSActions)();
-      const [inProgress, setInProgress] = (0, import_react148.useState)(false);
-      const [error, setError] = (0, import_react148.useState)("");
+      const [inProgress, setInProgress] = (0, import_react150.useState)(false);
+      const [error, setError] = (0, import_react150.useState)("");
       const { isHLSRunning } = (0, import_react_sdk86.useRecordingStreaming)();
-      (0, import_react148.useEffect)(() => {
+      (0, import_react150.useEffect)(() => {
         if (inProgress && !isHLSRunning) {
           setInProgress(false);
         }
       }, [inProgress, isHLSRunning]);
-      return /* @__PURE__ */ import_react148.default.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ import_react148.default.createElement(ErrorText, { error }), /* @__PURE__ */ import_react148.default.createElement(
+      return /* @__PURE__ */ import_react150.default.createElement(Box, { css: { p: "$4 $10" } }, /* @__PURE__ */ import_react150.default.createElement(ErrorText, { error }), /* @__PURE__ */ import_react150.default.createElement(
         Button,
         {
           "data-testid": "stop_hls",
@@ -15586,20 +15700,20 @@ var init_HLSStreaming = __esm({
             }
           })
         },
-        /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.EndStreamIcon, null),
+        /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.EndStreamIcon, null),
         "End Stream"
-      ), /* @__PURE__ */ import_react148.default.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ import_react148.default.createElement(import_react_icons65.PeopleIcon, null), " Invite People"));
+      ), /* @__PURE__ */ import_react150.default.createElement(Button, { icon: true, css: { w: "100%", r: "$0", mt: "$8" }, onClick: () => setShowLinks(true) }, /* @__PURE__ */ import_react150.default.createElement(import_react_icons65.PeopleIcon, null), " Invite People"));
     };
   }
 });
 
 // src/Prebuilt/components/Streaming/StreamingLanding.jsx
-var import_react149, import_react_sdk87, import_react_icons66, StreamingLanding;
+var import_react151, import_react_sdk87, import_react_icons66, StreamingLanding;
 var init_StreamingLanding = __esm({
   "src/Prebuilt/components/Streaming/StreamingLanding.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react149 = __toESM(require("react"));
+    import_react151 = __toESM(require("react"));
     import_react_sdk87 = require("@100mslive/react-sdk");
     import_react_icons66 = require("@100mslive/react-icons");
     init_Layout();
@@ -15615,13 +15729,13 @@ var init_StreamingLanding = __esm({
       const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
       const { isHLSRunning, isRTMPRunning } = (0, import_react_sdk87.useRecordingStreaming)();
       const permissions = (0, import_react_sdk87.useHMSStore)(import_react_sdk87.selectPermissions);
-      const [showHLS, setShowHLS] = (0, import_react149.useState)(isHLSRunning);
-      const [showRTMP, setShowRTMP] = (0, import_react149.useState)(isRTMPRunning);
+      const [showHLS, setShowHLS] = (0, import_react151.useState)(isHLSRunning);
+      const [showRTMP, setShowRTMP] = (0, import_react151.useState)(isRTMPRunning);
       if (!(permissions == null ? void 0 : permissions.hlsStreaming) && !(permissions == null ? void 0 : permissions.rtmpStreaming)) {
         toggleStreaming();
         return null;
       }
-      return /* @__PURE__ */ import_react149.default.createElement(import_react149.Fragment, null, /* @__PURE__ */ import_react149.default.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ import_react149.default.createElement(
+      return /* @__PURE__ */ import_react151.default.createElement(import_react151.Fragment, null, /* @__PURE__ */ import_react151.default.createElement(Flex, { css: { w: "100%", py: "$8" } }, /* @__PURE__ */ import_react151.default.createElement(
         Box,
         {
           css: {
@@ -15631,8 +15745,8 @@ var init_StreamingLanding = __esm({
             r: "$round"
           }
         },
-        /* @__PURE__ */ import_react149.default.createElement(import_react_icons66.ColoredHandIcon, { width: 40, height: 40 })
-      ), /* @__PURE__ */ import_react149.default.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ import_react149.default.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ import_react149.default.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ import_react149.default.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ import_react149.default.createElement(import_react_icons66.CrossIcon, null))), /* @__PURE__ */ import_react149.default.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ import_react149.default.createElement(
+        /* @__PURE__ */ import_react151.default.createElement(import_react_icons66.ColoredHandIcon, { width: 40, height: 40 })
+      ), /* @__PURE__ */ import_react151.default.createElement(Box, { css: { flex: "1 1 0", mx: "$8" } }, /* @__PURE__ */ import_react151.default.createElement(Text, { variant: "sm" }, "Welcome !"), /* @__PURE__ */ import_react151.default.createElement(Text, { variant: "h6" }, "Let\u2019s get you started")), /* @__PURE__ */ import_react151.default.createElement(IconButton_default, { onClick: toggleStreaming, css: { alignSelf: "flex-start" }, "data-testid": "close_streaming" }, /* @__PURE__ */ import_react151.default.createElement(import_react_icons66.CrossIcon, null))), /* @__PURE__ */ import_react151.default.createElement(Text, { variant: "tiny", color: "$on_surface_medium" }, "Start Streaming"), (permissions == null ? void 0 : permissions.hlsStreaming) && /* @__PURE__ */ import_react151.default.createElement(
         StreamCard,
         {
           testId: "hls_stream",
@@ -15642,7 +15756,7 @@ var init_StreamingLanding = __esm({
           onClick: () => setShowHLS(true),
           Icon: import_react_icons66.GoLiveIcon
         }
-      ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ import_react149.default.createElement(
+      ), (permissions == null ? void 0 : permissions.rtmpStreaming) && /* @__PURE__ */ import_react151.default.createElement(
         StreamCard,
         {
           testId: "rtmp_stream",
@@ -15654,19 +15768,19 @@ var init_StreamingLanding = __esm({
           },
           imgSrc: rtmp_default
         }
-      ), showHLS && /* @__PURE__ */ import_react149.default.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ import_react149.default.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
+      ), showHLS && /* @__PURE__ */ import_react151.default.createElement(HLSStreaming, { onBack: () => setShowHLS(false) }), showRTMP && /* @__PURE__ */ import_react151.default.createElement(RTMPStreaming, { onBack: () => setShowRTMP(false) }));
     };
   }
 });
 
 // src/Prebuilt/layouts/SidePane.tsx
-var import_react150, import_react_use31, import_react_sdk88, SidePane, SidePane_default;
+var import_react152, import_react_use32, import_react_sdk88, SidePane, SidePane_default;
 var init_SidePane = __esm({
   "src/Prebuilt/layouts/SidePane.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react150 = __toESM(require("react"));
-    import_react_use31 = require("react-use");
+    import_react152 = __toESM(require("react"));
+    import_react_use32 = require("react-use");
     import_react_sdk88 = require("@100mslive/react-sdk");
     init_SidePaneTabs();
     init_StreamingLanding();
@@ -15681,16 +15795,16 @@ var init_SidePane = __esm({
       hideControls = false
     }) => {
       var _a7, _b7;
-      const isMobile = (0, import_react_use31.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use32.useMedia)(config.media.md);
       const sidepane = (0, import_react_sdk88.useHMSStore)((0, import_react_sdk88.selectAppData)(APP_DATA.sidePane));
       const activeScreensharePeerId = (0, import_react_sdk88.useHMSStore)((0, import_react_sdk88.selectAppData)(APP_DATA.activeScreensharePeerId));
       const trackId = (_a7 = (0, import_react_sdk88.useHMSStore)((0, import_react_sdk88.selectVideoTrackByPeerID)(activeScreensharePeerId))) == null ? void 0 : _a7.id;
       const { elements } = useRoomLayoutConferencingScreen();
       let ViewComponent;
       if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-        ViewComponent = /* @__PURE__ */ import_react150.default.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
+        ViewComponent = /* @__PURE__ */ import_react152.default.createElement(SidePaneTabs, { screenType, hideControls, active: sidepane });
       } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-        ViewComponent = /* @__PURE__ */ import_react150.default.createElement(StreamingLanding, null);
+        ViewComponent = /* @__PURE__ */ import_react152.default.createElement(StreamingLanding, null);
       }
       if (!ViewComponent && !trackId) {
         return null;
@@ -15703,7 +15817,7 @@ var init_SidePane = __esm({
         objectFit: tileProps == null ? void 0 : tileProps.video_object_fit
       };
       const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay);
-      return /* @__PURE__ */ import_react150.default.createElement(
+      return /* @__PURE__ */ import_react152.default.createElement(
         Flex,
         {
           direction: "column",
@@ -15716,17 +15830,16 @@ var init_SidePane = __esm({
             "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
           }
         },
-        trackId && /* @__PURE__ */ import_react150.default.createElement(
+        trackId && /* @__PURE__ */ import_react152.default.createElement(
           VideoTile_default,
           __spreadValues({
             peerId: activeScreensharePeerId,
             trackId,
-            width: "100%",
             height: 225,
             rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
           }, tileLayout)
         ),
-        !!ViewComponent && /* @__PURE__ */ import_react150.default.createElement(
+        !!ViewComponent && /* @__PURE__ */ import_react152.default.createElement(
           Box,
           {
             css: {
@@ -15764,17 +15877,17 @@ var init_SidePane = __esm({
 });
 
 // src/Prebuilt/layouts/WaitingView.jsx
-var import_react151, import_react_icons67, WaitingView;
+var import_react153, import_react_icons67, WaitingView;
 var init_WaitingView = __esm({
   "src/Prebuilt/layouts/WaitingView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react151 = __toESM(require("react"));
+    import_react153 = __toESM(require("react"));
     import_react_icons67 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
-    WaitingView = import_react151.default.memo(() => {
-      return /* @__PURE__ */ import_react151.default.createElement(
+    WaitingView = import_react153.default.memo(() => {
+      return /* @__PURE__ */ import_react153.default.createElement(
         Box,
         {
           css: {
@@ -15788,7 +15901,7 @@ var init_WaitingView = __esm({
           },
           "data-testid": "waiting_view"
         },
-        /* @__PURE__ */ import_react151.default.createElement(
+        /* @__PURE__ */ import_react153.default.createElement(
           Flex,
           {
             align: "center",
@@ -15802,8 +15915,8 @@ var init_WaitingView = __esm({
               gap: "$8"
             }
           },
-          /* @__PURE__ */ import_react151.default.createElement(import_react_icons67.ColoredTimeIcon, { width: "80px", height: "80px" }),
-          /* @__PURE__ */ import_react151.default.createElement(
+          /* @__PURE__ */ import_react153.default.createElement(import_react_icons67.ColoredTimeIcon, { width: "80px", height: "80px" }),
+          /* @__PURE__ */ import_react153.default.createElement(
             Flex,
             {
               direction: "column",
@@ -15813,8 +15926,8 @@ var init_WaitingView = __esm({
                 gap: "$4"
               }
             },
-            /* @__PURE__ */ import_react151.default.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-            /* @__PURE__ */ import_react151.default.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+            /* @__PURE__ */ import_react153.default.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+            /* @__PURE__ */ import_react153.default.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
           )
         )
       );
@@ -15825,7 +15938,7 @@ var init_WaitingView = __esm({
 // src/Prebuilt/components/HlsStatsOverlay.jsx
 function HlsStatsOverlay({ hlsStatsState, onClose }) {
   var _a7, _b7, _c;
-  return /* @__PURE__ */ import_react152.default.createElement(
+  return /* @__PURE__ */ import_react154.default.createElement(
     Flex,
     {
       css: {
@@ -15839,8 +15952,8 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
       },
       direction: "column"
     },
-    /* @__PURE__ */ import_react152.default.createElement(IconButton_default, { css: { position: "absolute", top: "$2", right: "$2" }, onClick: onClose }, /* @__PURE__ */ import_react152.default.createElement(import_react_icons68.CloseIcon, null)),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "URL" }, /* @__PURE__ */ import_react152.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react152.default.createElement(
+    /* @__PURE__ */ import_react154.default.createElement(IconButton_default, { css: { position: "absolute", top: "$2", right: "$2" }, onClick: onClose }, /* @__PURE__ */ import_react154.default.createElement(import_react_icons68.CloseIcon, null)),
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "URL" }, /* @__PURE__ */ import_react154.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react154.default.createElement(
       "a",
       {
         style: { cursor: "pointer", textDecoration: "underline" },
@@ -15850,12 +15963,12 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
       },
       "Stream url"
     ))),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "Video size" }, ` ${(_a7 = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _a7.width}x${(_b7 = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _b7.height}`),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "Buffer duration" }, (_c = hlsStatsState == null ? void 0 : hlsStatsState.bufferedDuration) == null ? void 0 : _c.toFixed(2), " "),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "Connection speed" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bandwidthEstimate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "Bitrate" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bitrate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
-    /* @__PURE__ */ import_react152.default.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "Video size" }, ` ${(_a7 = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _a7.width}x${(_b7 = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _b7.height}`),
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "Buffer duration" }, (_c = hlsStatsState == null ? void 0 : hlsStatsState.bufferedDuration) == null ? void 0 : _c.toFixed(2), " "),
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "Connection speed" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bandwidthEstimate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "Bitrate" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bitrate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
+    /* @__PURE__ */ import_react154.default.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
   );
 }
 function getDurationFromSeconds(timeInSeconds) {
@@ -15873,18 +15986,18 @@ function getDurationFromSeconds(timeInSeconds) {
   }
   return videoTimeStr;
 }
-var import_react152, import_react_icons68, HlsStatsRow;
+var import_react154, import_react_icons68, HlsStatsRow;
 var init_HlsStatsOverlay = __esm({
   "src/Prebuilt/components/HlsStatsOverlay.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react152 = __toESM(require("react"));
+    import_react154 = __toESM(require("react"));
     import_react_icons68 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
     init_IconButton3();
-    HlsStatsRow = (0, import_react152.memo)(({ label, children }) => {
-      return /* @__PURE__ */ import_react152.default.createElement(Flex, { gap: 4, justify: "center", css: { width: "100%" } }, /* @__PURE__ */ import_react152.default.createElement(
+    HlsStatsRow = (0, import_react154.memo)(({ label, children }) => {
+      return /* @__PURE__ */ import_react154.default.createElement(Flex, { gap: 4, justify: "center", css: { width: "100%" } }, /* @__PURE__ */ import_react154.default.createElement(
         Text,
         {
           css: {
@@ -15895,7 +16008,7 @@ var init_HlsStatsOverlay = __esm({
           }
         },
         label
-      ), /* @__PURE__ */ import_react152.default.createElement(
+      ), /* @__PURE__ */ import_react154.default.createElement(
         Text,
         {
           css: {
@@ -15942,31 +16055,31 @@ var init_Controls = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
-var import_react153, HMSVideo;
+var import_react155, HMSVideo;
 var init_HMSVideo = __esm({
   "src/Prebuilt/components/HMSVideo/HMSVideo.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react153 = __toESM(require("react"));
+    import_react155 = __toESM(require("react"));
     init_src();
-    HMSVideo = (0, import_react153.forwardRef)((_a7, videoRef) => {
+    HMSVideo = (0, import_react155.forwardRef)((_a7, videoRef) => {
       var _b7 = _a7, { children } = _b7, props = __objRest(_b7, ["children"]);
-      return /* @__PURE__ */ import_react153.default.createElement(Flex, __spreadValues({ "data-testid": "hms-video", css: { size: "100%", position: "relative" }, direction: "column" }, props), /* @__PURE__ */ import_react153.default.createElement("video", { style: { flex: "1 1 0", margin: "0 auto", minHeight: "0" }, ref: videoRef, playsInline: true }), children);
+      return /* @__PURE__ */ import_react155.default.createElement(Flex, __spreadValues({ "data-testid": "hms-video", css: { size: "100%", position: "relative" }, direction: "column" }, props), /* @__PURE__ */ import_react155.default.createElement("video", { style: { flex: "1 1 0", margin: "0 auto", minHeight: "0" }, ref: videoRef, playsInline: true }), children);
     });
   }
 });
 
 // src/Prebuilt/components/HMSVideo/PlayButton.jsx
-var import_react154, import_react_icons69, PlayButton;
+var import_react156, import_react_icons69, PlayButton;
 var init_PlayButton = __esm({
   "src/Prebuilt/components/HMSVideo/PlayButton.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react154 = __toESM(require("react"));
+    import_react156 = __toESM(require("react"));
     import_react_icons69 = require("@100mslive/react-icons");
     init_src();
     PlayButton = ({ onClick, isPaused }) => {
-      return /* @__PURE__ */ import_react154.default.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ import_react154.default.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ import_react154.default.createElement(import_react_icons69.PlayIcon, { width: 20, height: 20 }) : /* @__PURE__ */ import_react154.default.createElement(import_react_icons69.PauseIcon, { width: 20, height: 20 })));
+      return /* @__PURE__ */ import_react156.default.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ import_react156.default.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ import_react156.default.createElement(import_react_icons69.PlayIcon, { width: 20, height: 20 }) : /* @__PURE__ */ import_react156.default.createElement(import_react_icons69.PauseIcon, { width: 20, height: 20 })));
     };
   }
 });
@@ -15998,19 +16111,19 @@ var init_HMSVIdeoUtils = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.jsx
-var import_react155, VideoProgress;
+var import_react157, VideoProgress;
 var init_VideoProgress = __esm({
   "src/Prebuilt/components/HMSVideo/VideoProgress.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react155 = __toESM(require("react"));
+    import_react157 = __toESM(require("react"));
     init_src();
     init_HMSVIdeoUtils();
     VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
-      const [videoProgress, setVideoProgress] = (0, import_react155.useState)(0);
-      const [bufferProgress, setBufferProgress] = (0, import_react155.useState)(0);
-      const progressRootRef = (0, import_react155.useRef)();
-      (0, import_react155.useEffect)(() => {
+      const [videoProgress, setVideoProgress] = (0, import_react157.useState)(0);
+      const [bufferProgress, setBufferProgress] = (0, import_react157.useState)(0);
+      const progressRootRef = (0, import_react157.useRef)();
+      (0, import_react157.useEffect)(() => {
         const videoEl = hlsPlayer2.getVideoElement();
         const timeupdateHandler = () => {
           var _a7;
@@ -16041,14 +16154,14 @@ var init_VideoProgress = __esm({
           onValueChange(currentTime);
         }
       };
-      return hlsPlayer2.getVideoElement() ? /* @__PURE__ */ import_react155.default.createElement(
+      return hlsPlayer2.getVideoElement() ? /* @__PURE__ */ import_react157.default.createElement(
         Flex,
         {
           ref: progressRootRef,
           css: { cursor: "pointer", h: "$4", alignSelf: "stretch" },
           onClick: onProgressChangeHandler
         },
-        /* @__PURE__ */ import_react155.default.createElement(
+        /* @__PURE__ */ import_react157.default.createElement(
           Box,
           {
             id: "video-actual",
@@ -16059,7 +16172,7 @@ var init_VideoProgress = __esm({
             }
           }
         ),
-        /* @__PURE__ */ import_react155.default.createElement(
+        /* @__PURE__ */ import_react157.default.createElement(
           Box,
           {
             id: "video-buffer",
@@ -16070,7 +16183,7 @@ var init_VideoProgress = __esm({
             }
           }
         ),
-        /* @__PURE__ */ import_react155.default.createElement(
+        /* @__PURE__ */ import_react157.default.createElement(
           Box,
           {
             id: "video-rest",
@@ -16087,18 +16200,18 @@ var init_VideoProgress = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VideoTime.jsx
-var import_react156, import_hls_player2, VideoTime;
+var import_react158, import_hls_player2, VideoTime;
 var init_VideoTime = __esm({
   "src/Prebuilt/components/HMSVideo/VideoTime.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react156 = __toESM(require("react"));
+    import_react158 = __toESM(require("react"));
     import_hls_player2 = require("@100mslive/hls-player");
     init_src();
     init_HMSVIdeoUtils();
     VideoTime = ({ hlsPlayer: hlsPlayer2 }) => {
-      const [videoTime, setVideoTime] = (0, import_react156.useState)("");
-      (0, import_react156.useEffect)(() => {
+      const [videoTime, setVideoTime] = (0, import_react158.useState)("");
+      (0, import_react158.useEffect)(() => {
         const timeupdateHandler = (currentTime) => setVideoTime(getDurationFromSeconds2(currentTime));
         if (hlsPlayer2) {
           hlsPlayer2.on(import_hls_player2.HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
@@ -16109,7 +16222,7 @@ var init_VideoTime = __esm({
           }
         };
       }, [hlsPlayer2]);
-      return hlsPlayer2 ? /* @__PURE__ */ import_react156.default.createElement(
+      return hlsPlayer2 ? /* @__PURE__ */ import_react158.default.createElement(
         Text,
         {
           css: {
@@ -16126,19 +16239,19 @@ var init_VideoTime = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VolumeControl.jsx
-var import_react157, import_react_icons70, VolumeControl, VolumeIcon;
+var import_react159, import_react_icons70, VolumeControl, VolumeIcon;
 var init_VolumeControl = __esm({
   "src/Prebuilt/components/HMSVideo/VolumeControl.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react157 = __toESM(require("react"));
+    import_react159 = __toESM(require("react"));
     import_react_icons70 = require("@100mslive/react-icons");
     init_src();
     VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
       var _a7;
-      const [volume, setVolume] = (0, import_react157.useState)((_a7 = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a7 : 100);
-      const [showSlider, setShowSlider] = (0, import_react157.useState)(false);
-      return /* @__PURE__ */ import_react157.default.createElement(
+      const [volume, setVolume] = (0, import_react159.useState)((_a7 = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a7 : 100);
+      const [showSlider, setShowSlider] = (0, import_react159.useState)(false);
+      return /* @__PURE__ */ import_react159.default.createElement(
         Flex,
         {
           align: "center",
@@ -16152,7 +16265,7 @@ var init_VolumeControl = __esm({
             setShowSlider(false);
           }
         },
-        /* @__PURE__ */ import_react157.default.createElement(
+        /* @__PURE__ */ import_react159.default.createElement(
           VolumeIcon,
           {
             volume,
@@ -16167,7 +16280,7 @@ var init_VolumeControl = __esm({
             }
           }
         ),
-        /* @__PURE__ */ import_react157.default.createElement(
+        /* @__PURE__ */ import_react159.default.createElement(
           Slider,
           {
             css: {
@@ -16195,9 +16308,9 @@ var init_VolumeControl = __esm({
     };
     VolumeIcon = ({ volume, onClick }) => {
       if (volume === 0) {
-        return /* @__PURE__ */ import_react157.default.createElement(import_react_icons70.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+        return /* @__PURE__ */ import_react159.default.createElement(import_react_icons70.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
       }
-      return volume < 50 ? /* @__PURE__ */ import_react157.default.createElement(import_react_icons70.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react157.default.createElement(import_react_icons70.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+      return volume < 50 ? /* @__PURE__ */ import_react159.default.createElement(import_react_icons70.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react159.default.createElement(import_react_icons70.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
     };
   }
 });
@@ -16230,15 +16343,15 @@ var init_HMSVideo2 = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/FullscreenButton.jsx
-var import_react158, FullScreenButton2;
+var import_react160, FullScreenButton2;
 var init_FullscreenButton = __esm({
   "src/Prebuilt/components/HMSVideo/FullscreenButton.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react158 = __toESM(require("react"));
+    import_react160 = __toESM(require("react"));
     init_src();
     FullScreenButton2 = ({ isFullScreen, icon, onToggle }) => {
-      return /* @__PURE__ */ import_react158.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react158.default.createElement(
+      return /* @__PURE__ */ import_react160.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react160.default.createElement(
         IconButton,
         {
           variant: "standard",
@@ -16247,7 +16360,7 @@ var init_FullscreenButton = __esm({
           key: "fullscreen_btn",
           "data-testid": "fullscreen_btn"
         },
-        /* @__PURE__ */ import_react158.default.createElement(Flex, null, icon)
+        /* @__PURE__ */ import_react160.default.createElement(Flex, null, icon)
       ));
     };
   }
@@ -16255,7 +16368,7 @@ var init_FullscreenButton = __esm({
 
 // src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx
 function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
-  return /* @__PURE__ */ import_react159.default.createElement(
+  return /* @__PURE__ */ import_react161.default.createElement(
     Dialog.Root,
     {
       open,
@@ -16265,7 +16378,7 @@ function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
         }
       }
     },
-    /* @__PURE__ */ import_react159.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react159.default.createElement(DialogRow, null, /* @__PURE__ */ import_react159.default.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ import_react159.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react159.default.createElement(
+    /* @__PURE__ */ import_react161.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react161.default.createElement(DialogRow, null, /* @__PURE__ */ import_react161.default.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ import_react161.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react161.default.createElement(
       Button,
       {
         variant: "primary",
@@ -16277,12 +16390,12 @@ function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
     )))
   );
 }
-var import_react159;
+var import_react161;
 var init_HLSAutoplayBlockedPrompt = __esm({
   "src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react159 = __toESM(require("react"));
+    import_react161 = __toESM(require("react"));
     init_src();
     init_DialogContent2();
   }
@@ -16290,7 +16403,7 @@ var init_HLSAutoplayBlockedPrompt = __esm({
 
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx
 function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
-  return /* @__PURE__ */ import_react160.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpen(value) }, /* @__PURE__ */ import_react160.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react160.default.createElement(
+  return /* @__PURE__ */ import_react162.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpen(value) }, /* @__PURE__ */ import_react162.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react162.default.createElement(
     Flex,
     {
       css: {
@@ -16300,7 +16413,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
         p: "$2"
       }
     },
-    /* @__PURE__ */ import_react160.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react160.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react160.default.createElement(
+    /* @__PURE__ */ import_react162.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react162.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react162.default.createElement(
       Box,
       {
         css: {
@@ -16311,8 +16424,8 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
           c: "$on_surface_high"
         }
       },
-      /* @__PURE__ */ import_react160.default.createElement(import_react_icons71.SettingsIcon, null)
-    ), /* @__PURE__ */ import_react160.default.createElement(
+      /* @__PURE__ */ import_react162.default.createElement(import_react_icons71.SettingsIcon, null)
+    ), /* @__PURE__ */ import_react162.default.createElement(
       Text,
       {
         variant: {
@@ -16322,7 +16435,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
         },
         css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
-      isAuto && /* @__PURE__ */ import_react160.default.createElement(import_react160.default.Fragment, null, "Auto", /* @__PURE__ */ import_react160.default.createElement(
+      isAuto && /* @__PURE__ */ import_react162.default.createElement(import_react162.default.Fragment, null, "Auto", /* @__PURE__ */ import_react162.default.createElement(
         Box,
         {
           css: {
@@ -16337,7 +16450,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
       selection && Math.min(selection.width, selection.height),
       "p"
     )))
-  )), layers.length > 0 && /* @__PURE__ */ import_react160.default.createElement(
+  )), layers.length > 0 && /* @__PURE__ */ import_react162.default.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -16353,7 +16466,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
       }
     },
     layers.map((layer) => {
-      return /* @__PURE__ */ import_react160.default.createElement(
+      return /* @__PURE__ */ import_react162.default.createElement(
         Dropdown.Item,
         {
           onClick: () => onQualityChange(layer),
@@ -16368,12 +16481,12 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
             gap: "$2"
           }
         },
-        /* @__PURE__ */ import_react160.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ import_react160.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react160.default.createElement(import_react_icons71.CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ import_react162.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ import_react162.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
+        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react162.default.createElement(import_react_icons71.CheckIcon, { width: "16px", height: "16px" })
       );
     }),
-    /* @__PURE__ */ import_react160.default.createElement(
+    /* @__PURE__ */ import_react162.default.createElement(
       Dropdown.Item,
       {
         onClick: () => onQualityChange({ height: "auto" }),
@@ -16388,17 +16501,17 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
           gap: "$2"
         }
       },
-      /* @__PURE__ */ import_react160.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ import_react160.default.createElement(import_react_icons71.CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ import_react162.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ import_react162.default.createElement(import_react_icons71.CheckIcon, { width: "16px", height: "16px" })
     )
   ));
 }
-var import_react160, import_react_icons71, getQualityText, getBitrateText;
+var import_react162, import_react_icons71, getQualityText, getBitrateText;
 var init_HLSQualitySelector = __esm({
   "src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react160 = __toESM(require("react"));
+    import_react162 = __toESM(require("react"));
     import_react_icons71 = require("@100mslive/react-icons");
     init_src();
     getQualityText = (layer) => `${Math.min(layer.height, layer.width)}p `;
@@ -16411,13 +16524,13 @@ var HLSView_exports = {};
 __export(HLSView_exports, {
   default: () => HLSView_default
 });
-var import_react161, import_react_use32, import_hls_player3, import_screenfull3, import_react_sdk89, import_react_icons72, hlsPlayer, HLSView, HLSView_default;
+var import_react163, import_react_use33, import_hls_player3, import_screenfull3, import_react_sdk89, import_react_icons72, hlsPlayer, HLSView, HLSView_default;
 var init_HLSView = __esm({
   "src/Prebuilt/layouts/HLSView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react161 = __toESM(require("react"));
-    import_react_use32 = require("react-use");
+    import_react163 = __toESM(require("react"));
+    import_react_use33 = require("react-use");
     import_hls_player3 = require("@100mslive/hls-player");
     import_screenfull3 = __toESM(require("screenfull"));
     import_react_sdk89 = require("@100mslive/react-sdk");
@@ -16437,33 +16550,33 @@ var init_HLSView = __esm({
     init_constants();
     HLSView = () => {
       var _a7;
-      const videoRef = (0, import_react161.useRef)(null);
-      const hlsViewRef = (0, import_react161.useRef)(null);
+      const videoRef = (0, import_react163.useRef)(null);
+      const hlsViewRef = (0, import_react163.useRef)(null);
       const hlsState = (0, import_react_sdk89.useHMSStore)(import_react_sdk89.selectHLSState);
       const enablHlsStats = (0, import_react_sdk89.useHMSStore)((0, import_react_sdk89.selectAppData)(APP_DATA.hlsStats));
       const hmsActions = (0, import_react_sdk89.useHMSActions)();
       const { themeType, theme: theme2 } = useTheme();
-      const [streamEnded, setStreamEnded] = (0, import_react161.useState)(false);
-      let [hlsStatsState, setHlsStatsState] = (0, import_react161.useState)(null);
+      const [streamEnded, setStreamEnded] = (0, import_react163.useState)(false);
+      let [hlsStatsState, setHlsStatsState] = (0, import_react163.useState)(null);
       const hlsUrl = (_a7 = hlsState.variants[0]) == null ? void 0 : _a7.url;
-      const [availableLayers, setAvailableLayers] = (0, import_react161.useState)([]);
-      const [isVideoLive, setIsVideoLive] = (0, import_react161.useState)(true);
-      const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react161.useState)(true);
-      const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react161.useState)(null);
-      const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react161.useState)(false);
-      const [isPaused, setIsPaused] = (0, import_react161.useState)(false);
+      const [availableLayers, setAvailableLayers] = (0, import_react163.useState)([]);
+      const [isVideoLive, setIsVideoLive] = (0, import_react163.useState)(true);
+      const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react163.useState)(true);
+      const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react163.useState)(null);
+      const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react163.useState)(false);
+      const [isPaused, setIsPaused] = (0, import_react163.useState)(false);
       const isFullScreenSupported = import_screenfull3.default.isEnabled;
-      const [show, toggle] = (0, import_react_use32.useToggle)(false);
-      const [controlsVisible, setControlsVisible] = (0, import_react161.useState)(true);
-      const controlsRef = (0, import_react161.useRef)();
-      const controlsTimerRef = (0, import_react161.useRef)();
-      const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react161.useState)(false);
-      const isMobile = (0, import_react_use32.useMedia)(config.media.md);
-      const isFullScreen = (0, import_react_use32.useFullscreen)(hlsViewRef, show, {
+      const [show, toggle] = (0, import_react_use33.useToggle)(false);
+      const [controlsVisible, setControlsVisible] = (0, import_react163.useState)(true);
+      const controlsRef = (0, import_react163.useRef)();
+      const controlsTimerRef = (0, import_react163.useRef)();
+      const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react163.useState)(false);
+      const isMobile = (0, import_react_use33.useMedia)(config.media.md);
+      const isFullScreen = (0, import_react_use33.useFullscreen)(hlsViewRef, show, {
         onClose: () => toggle(false)
       });
-      const [showLoader, setShowLoader] = (0, import_react161.useState)(false);
-      (0, import_react161.useEffect)(() => {
+      const [showLoader, setShowLoader] = (0, import_react163.useState)(false);
+      (0, import_react163.useEffect)(() => {
         const videoEl = videoRef.current;
         const showLoader2 = () => setShowLoader(true);
         const hideLoader = () => setShowLoader(false);
@@ -16474,7 +16587,7 @@ var init_HLSView = __esm({
           videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
         };
       }, []);
-      (0, import_react161.useEffect)(() => {
+      (0, import_react163.useEffect)(() => {
         const videoElem = videoRef.current;
         const setStreamEndedCallback = () => {
           setStreamEnded(true);
@@ -16485,7 +16598,7 @@ var init_HLSView = __esm({
           videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
         };
       }, [hlsUrl]);
-      (0, import_react161.useEffect)(() => {
+      (0, import_react163.useEffect)(() => {
         let videoEl = videoRef.current;
         const manifestLoadedHandler = ({ layers }) => {
           setAvailableLayers(layers);
@@ -16550,7 +16663,7 @@ var init_HLSView = __esm({
           };
         }
       }, [hlsUrl]);
-      (0, import_react161.useEffect)(() => {
+      (0, import_react163.useEffect)(() => {
         const onHLSStats = (state) => setHlsStatsState(state);
         if (enablHlsStats) {
           hlsPlayer == null ? void 0 : hlsPlayer.on(import_hls_player3.HMSHLSPlayerEvents.STATS, onHLSStats);
@@ -16569,7 +16682,7 @@ var init_HLSView = __esm({
           console.error("Tried to unblock Autoplay failed with", error.message);
         }
       });
-      const handleQuality = (0, import_react161.useCallback)(
+      const handleQuality = (0, import_react163.useCallback)(
         (quality) => {
           if (hlsPlayer) {
             setIsUserSelectedAuto(quality.height.toString().toLowerCase() === "auto");
@@ -16582,7 +16695,7 @@ var init_HLSView = __esm({
       const sfnOverlayClose = () => {
         hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
       };
-      (0, import_react161.useEffect)(() => {
+      (0, import_react163.useEffect)(() => {
         if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
           if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
@@ -16600,7 +16713,7 @@ var init_HLSView = __esm({
           }
         };
       }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
-      const onHoverHandler = (0, import_react161.useCallback)(
+      const onHoverHandler = (0, import_react163.useCallback)(
         (event) => {
           if (event.type === "mouseenter" || qualityDropDownOpen) {
             setControlsVisible(true);
@@ -16617,7 +16730,7 @@ var init_HLSView = __esm({
         },
         [controlsVisible, isFullScreen, qualityDropDownOpen]
       );
-      return /* @__PURE__ */ import_react161.default.createElement(
+      return /* @__PURE__ */ import_react163.default.createElement(
         Flex,
         {
           key: "hls-viewer",
@@ -16627,8 +16740,8 @@ var init_HLSView = __esm({
             size: "100%"
           }
         },
-        (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats ? /* @__PURE__ */ import_react161.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null,
-        hlsUrl && !streamEnded ? /* @__PURE__ */ import_react161.default.createElement(
+        (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats ? /* @__PURE__ */ import_react163.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null,
+        hlsUrl && !streamEnded ? /* @__PURE__ */ import_react163.default.createElement(
           Flex,
           {
             id: "hls-player-container",
@@ -16640,8 +16753,8 @@ var init_HLSView = __esm({
               height: "100%"
             }
           },
-          /* @__PURE__ */ import_react161.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-          showLoader && /* @__PURE__ */ import_react161.default.createElement(
+          /* @__PURE__ */ import_react163.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+          showLoader && /* @__PURE__ */ import_react163.default.createElement(
             Flex,
             {
               align: "center",
@@ -16650,9 +16763,9 @@ var init_HLSView = __esm({
                 position: "absolute"
               }
             },
-            /* @__PURE__ */ import_react161.default.createElement(Loading, { width: 72, height: 72 })
+            /* @__PURE__ */ import_react163.default.createElement(Loading, { width: 72, height: 72 })
           ),
-          /* @__PURE__ */ import_react161.default.createElement(
+          /* @__PURE__ */ import_react163.default.createElement(
             HMSVideoPlayer.Root,
             {
               ref: videoRef,
@@ -16660,7 +16773,7 @@ var init_HLSView = __esm({
               onMouseMove: onHoverHandler,
               onMouseLeave: onHoverHandler
             },
-            isMobile && isPaused && /* @__PURE__ */ import_react161.default.createElement(
+            isMobile && isPaused && /* @__PURE__ */ import_react163.default.createElement(
               Box,
               {
                 css: {
@@ -16668,17 +16781,18 @@ var init_HLSView = __esm({
                   top: "40%",
                   left: "50%",
                   transform: "translateY(-40%) translateX(-50%)",
-                  padding: "$4 $14",
+                  padding: "$8 14px $8 18px",
                   display: "inline-flex",
-                  r: "$0",
+                  r: "50%",
+                  gap: "$1",
                   bg: "$primary_default"
                 }
               },
-              /* @__PURE__ */ import_react161.default.createElement(IconButton, { onClick: () => __async(void 0, null, function* () {
+              /* @__PURE__ */ import_react163.default.createElement(IconButton, { onClick: () => __async(void 0, null, function* () {
                 return yield hlsPlayer == null ? void 0 : hlsPlayer.play();
-              }), "data-testid": "play_btn" }, /* @__PURE__ */ import_react161.default.createElement(import_react_icons72.PlayIcon, { width: "60px", height: "60px" }))
+              }), "data-testid": "play_btn" }, /* @__PURE__ */ import_react163.default.createElement(import_react_icons72.PlayIcon, { width: "60px", height: "60px" }))
             ),
-            /* @__PURE__ */ import_react161.default.createElement(
+            /* @__PURE__ */ import_react163.default.createElement(
               Flex,
               {
                 ref: controlsRef,
@@ -16698,14 +16812,14 @@ var init_HLSView = __esm({
                   opacity: controlsVisible ? `1` : "0"
                 }
               },
-              !isMobile && /* @__PURE__ */ import_react161.default.createElement(
+              !isMobile && /* @__PURE__ */ import_react163.default.createElement(
                 HMSVideoPlayer.Controls.Root,
                 {
                   css: {
                     p: "$4 $8"
                   }
                 },
-                /* @__PURE__ */ import_react161.default.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ import_react161.default.createElement(
+                /* @__PURE__ */ import_react163.default.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ import_react163.default.createElement(
                   HMSVideoPlayer.PlayButton,
                   {
                     onClick: () => __async(void 0, null, function* () {
@@ -16713,7 +16827,7 @@ var init_HLSView = __esm({
                     }),
                     isPaused
                   }
-                ), /* @__PURE__ */ import_react161.default.createElement(HMSVideoPlayer.Duration, { hlsPlayer }), /* @__PURE__ */ import_react161.default.createElement(HMSVideoPlayer.Volume, { hlsPlayer }), /* @__PURE__ */ import_react161.default.createElement(
+                ), /* @__PURE__ */ import_react163.default.createElement(HMSVideoPlayer.Duration, { hlsPlayer }), /* @__PURE__ */ import_react163.default.createElement(HMSVideoPlayer.Volume, { hlsPlayer }), /* @__PURE__ */ import_react163.default.createElement(
                   IconButton,
                   {
                     variant: "standard",
@@ -16725,7 +16839,7 @@ var init_HLSView = __esm({
                     key: "jump-to-live_btn",
                     "data-testid": "jump-to-live_btn"
                   },
-                  /* @__PURE__ */ import_react161.default.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ import_react161.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react161.default.createElement(
+                  /* @__PURE__ */ import_react163.default.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ import_react163.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react163.default.createElement(
                     Box,
                     {
                       css: {
@@ -16735,7 +16849,7 @@ var init_HLSView = __esm({
                         r: "$1"
                       }
                     }
-                  ), /* @__PURE__ */ import_react161.default.createElement(
+                  ), /* @__PURE__ */ import_react163.default.createElement(
                     Text,
                     {
                       variant: {
@@ -16748,7 +16862,7 @@ var init_HLSView = __esm({
                     isVideoLive ? "LIVE" : "GO LIVE"
                   )))
                 )),
-                /* @__PURE__ */ import_react161.default.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__PURE__ */ import_react161.default.createElement(
+                /* @__PURE__ */ import_react163.default.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__PURE__ */ import_react163.default.createElement(
                   HLSQualitySelector,
                   {
                     layers: availableLayers,
@@ -16758,18 +16872,18 @@ var init_HLSView = __esm({
                     onQualityChange: handleQuality,
                     isAuto: isUserSelectedAuto
                   }
-                ) : null, isFullScreenSupported ? /* @__PURE__ */ import_react161.default.createElement(
+                ) : null, isFullScreenSupported ? /* @__PURE__ */ import_react163.default.createElement(
                   FullScreenButton2,
                   {
                     isFullScreen,
                     onToggle: toggle,
-                    icon: isFullScreen ? /* @__PURE__ */ import_react161.default.createElement(import_react_icons72.ShrinkIcon, null) : /* @__PURE__ */ import_react161.default.createElement(import_react_icons72.ExpandIcon, null)
+                    icon: isFullScreen ? /* @__PURE__ */ import_react163.default.createElement(import_react_icons72.ShrinkIcon, null) : /* @__PURE__ */ import_react163.default.createElement(import_react_icons72.ExpandIcon, null)
                   }
                 ) : null)
               )
             )
           )
-        ) : /* @__PURE__ */ import_react161.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react161.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react161.default.createElement(import_react_icons72.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react161.default.createElement(import_react_icons72.RadioIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react161.default.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ import_react161.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
+        ) : /* @__PURE__ */ import_react163.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react163.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react163.default.createElement(import_react_icons72.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react163.default.createElement(import_react_icons72.RadioIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react163.default.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ import_react163.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
       );
     };
     HLSView_default = HLSView;
@@ -16777,12 +16891,12 @@ var init_HLSView = __esm({
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var import_react162, import_react_sdk90, HLSView2, VideoStreamingSection;
+var import_react164, import_react_sdk90, HLSView2, VideoStreamingSection;
 var init_VideoStreamingSection = __esm({
   "src/Prebuilt/layouts/VideoStreamingSection.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react162 = __toESM(require("react"));
+    import_react164 = __toESM(require("react"));
     import_react_sdk90 = require("@100mslive/react-sdk");
     init_FullPageProgress();
     init_GridLayout();
@@ -16793,7 +16907,7 @@ var init_VideoStreamingSection = __esm({
     init_WaitingView();
     init_useUISettings();
     init_constants();
-    HLSView2 = import_react162.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
+    HLSView2 = import_react164.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
     VideoStreamingSection = ({
       screenType,
       elements,
@@ -16806,7 +16920,7 @@ var init_VideoStreamingSection = __esm({
       const waitingViewerRole = useWaitingViewerRole();
       const urlToIframe = useUrlToEmbed();
       const pdfAnnotatorActive = usePDFAnnotator();
-      (0, import_react162.useEffect)(() => {
+      (0, import_react164.useEffect)(() => {
         if (!isConnected) {
           return;
         }
@@ -16817,17 +16931,17 @@ var init_VideoStreamingSection = __esm({
       }
       let ViewComponent;
       if (screenType === "hls_live_streaming") {
-        ViewComponent = /* @__PURE__ */ import_react162.default.createElement(HLSView2, null);
+        ViewComponent = /* @__PURE__ */ import_react164.default.createElement(HLSView2, null);
       } else if (localPeerRole === waitingViewerRole) {
-        ViewComponent = /* @__PURE__ */ import_react162.default.createElement(WaitingView, null);
+        ViewComponent = /* @__PURE__ */ import_react164.default.createElement(WaitingView, null);
       } else if (pdfAnnotatorActive) {
-        ViewComponent = /* @__PURE__ */ import_react162.default.createElement(PDFView, null);
+        ViewComponent = /* @__PURE__ */ import_react164.default.createElement(PDFView, null);
       } else if (urlToIframe) {
-        ViewComponent = /* @__PURE__ */ import_react162.default.createElement(EmbedView, null);
+        ViewComponent = /* @__PURE__ */ import_react164.default.createElement(EmbedView, null);
       } else {
-        ViewComponent = /* @__PURE__ */ import_react162.default.createElement(GridLayout, __spreadValues({}, (_a7 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a7.grid));
+        ViewComponent = /* @__PURE__ */ import_react164.default.createElement(GridLayout, __spreadValues({}, (_a7 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a7.grid));
       }
-      return /* @__PURE__ */ import_react162.default.createElement(import_react162.Suspense, { fallback: /* @__PURE__ */ import_react162.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react162.default.createElement(
+      return /* @__PURE__ */ import_react164.default.createElement(import_react164.Suspense, { fallback: /* @__PURE__ */ import_react164.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react164.default.createElement(
         Flex,
         {
           css: {
@@ -16837,7 +16951,7 @@ var init_VideoStreamingSection = __esm({
           }
         },
         ViewComponent,
-        /* @__PURE__ */ import_react162.default.createElement(
+        /* @__PURE__ */ import_react164.default.createElement(
           SidePane_default,
           {
             screenType,
@@ -16850,108 +16964,30 @@ var init_VideoStreamingSection = __esm({
   }
 });
 
-// src/Prebuilt/components/RoleChangeRequestModal.tsx
-var import_react163, import_react_sdk91, RoleChangeRequestModal, RequestDialog2;
-var init_RoleChangeRequestModal = __esm({
-  "src/Prebuilt/components/RoleChangeRequestModal.tsx"() {
-    "use strict";
-    init_define_process_env();
-    import_react163 = __toESM(require("react"));
-    import_react_sdk91 = require("@100mslive/react-sdk");
-    init_PreviewJoin();
-    init_src();
-    init_useMetadata();
-    init_constants();
-    RoleChangeRequestModal = () => {
-      const hmsActions = (0, import_react_sdk91.useHMSActions)();
-      const { updateMetaData } = useMyMetadata();
-      const currentRole = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectLocalPeerRoleName);
-      const roleChangeRequest = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectRoleChangeRequest);
-      const name = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectLocalPeerName);
-      const { sendEvent } = (0, import_react_sdk91.useCustomEvent)({ type: ROLE_CHANGE_DECLINED });
-      (0, import_react163.useEffect)(() => {
-        if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-          return;
-        }
-        (() => __async(void 0, null, function* () {
-          yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
-        }))();
-      }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
-      if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-        return null;
-      }
-      const body = /* @__PURE__ */ import_react163.default.createElement(import_react163.default.Fragment, null, /* @__PURE__ */ import_react163.default.createElement(Text, { css: { fontWeight: 400, c: "$on_surface_medium", textAlign: "center" } }, "Setup your audio and video before joining"), /* @__PURE__ */ import_react163.default.createElement(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          css: {
-            "@sm": { width: "100%" },
-            flexDirection: "column",
-            mt: "$6"
-          }
-        },
-        /* @__PURE__ */ import_react163.default.createElement(PreviewTile, { name: name || "" }),
-        /* @__PURE__ */ import_react163.default.createElement(PreviewControls, { hideSettings: true })
-      ));
-      return /* @__PURE__ */ import_react163.default.createElement(
-        RequestDialog2,
-        {
-          title: `You're invited to join the ${roleChangeRequest.role.name} role`,
-          onOpenChange: (value) => __async(void 0, null, function* () {
-            var _a7;
-            if (!value) {
-              yield hmsActions.rejectChangeRole(roleChangeRequest);
-              sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a7 = roleChangeRequest.requestedBy) == null ? void 0 : _a7.id });
-              yield hmsActions.cancelMidCallPreview();
-              yield hmsActions.lowerLocalPeerHand();
-            }
-          }),
-          body,
-          onAction: () => __async(void 0, null, function* () {
-            yield hmsActions.acceptChangeRole(roleChangeRequest);
-            yield updateMetaData({ prevRole: currentRole });
-            yield hmsActions.lowerLocalPeerHand();
-          }),
-          actionText: "Accept"
-        }
-      );
-    };
-    RequestDialog2 = ({
-      open = true,
-      onOpenChange,
-      title,
-      body,
-      actionText = "Accept",
-      onAction
-    }) => /* @__PURE__ */ import_react163.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react163.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react163.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react163.default.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ import_react163.default.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ import_react163.default.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ import_react163.default.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ import_react163.default.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ import_react163.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react163.default.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ import_react163.default.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ import_react163.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react163.default.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
-  }
-});
-
 // src/Prebuilt/components/conference.jsx
 var conference_exports = {};
 __export(conference_exports, {
   default: () => conference_default
 });
-var import_react164, import_react_router_dom5, import_react_use33, import_react_sdk92, Conference, conference_default;
+var import_react165, import_react_router_dom5, import_react_use34, import_react_sdk91, Conference, conference_default;
 var init_conference = __esm({
   "src/Prebuilt/components/conference.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react164 = __toESM(require("react"));
+    import_react165 = __toESM(require("react"));
     import_react_router_dom5 = require("react-router-dom");
-    import_react_use33 = require("react-use");
-    import_react_sdk92 = require("@100mslive/react-sdk");
+    import_react_use34 = require("react-use");
+    import_react_sdk91 = require("@100mslive/react-sdk");
     init_Footer3();
     init_HLSFailureModal();
     init_PIPComponent();
     init_PIPManager();
+    init_RoleChangeRequestModal();
     init_Layout();
     init_AppContext();
     init_VideoStreamingSection();
     init_FullPageProgress();
     init_Header2();
-    init_RoleChangeRequestModal();
     init_useRoomLayoutScreen();
     init_useUISettings();
     init_constants();
@@ -16962,17 +16998,17 @@ var init_conference = __esm({
       const { userName, endpoints } = useHMSPrebuiltContext();
       const screenProps = useRoomLayoutConferencingScreen();
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-      const roomState = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectRoomState);
-      const prevState = (0, import_react_use33.usePrevious)(roomState);
-      const isConnectedToRoom = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectIsConnectedToRoom);
-      const hmsActions = (0, import_react_sdk92.useHMSActions)();
-      const [hideControls, setHideControls] = (0, import_react164.useState)(false);
-      const dropdownList = (0, import_react_sdk92.useHMSStore)((0, import_react_sdk92.selectAppData)(APP_DATA.dropdownList));
+      const roomState = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectRoomState);
+      const prevState = (0, import_react_use34.usePrevious)(roomState);
+      const isConnectedToRoom = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectIsConnectedToRoom);
+      const hmsActions = (0, import_react_sdk91.useHMSActions)();
+      const [hideControls, setHideControls] = (0, import_react165.useState)(false);
+      const dropdownList = (0, import_react_sdk91.useHMSStore)((0, import_react_sdk91.selectAppData)(APP_DATA.dropdownList));
       const authTokenInAppData = useAuthToken();
-      const headerRef = (0, import_react164.useRef)();
-      const footerRef = (0, import_react164.useRef)();
+      const headerRef = (0, import_react165.useRef)();
+      const footerRef = (0, import_react165.useRef)();
       const isMobileDevice = isAndroid || isIOS || isIPadOS;
-      const dropdownListRef = (0, import_react164.useRef)();
+      const dropdownListRef = (0, import_react165.useRef)();
       const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
       const toggleControls = () => {
         var _a8;
@@ -16980,8 +17016,8 @@ var init_conference = __esm({
           setHideControls((value) => !value);
         }
       };
-      const autoRoomJoined = (0, import_react164.useRef)(isPreviewScreenEnabled);
-      (0, import_react164.useEffect)(() => {
+      const autoRoomJoined = (0, import_react165.useRef)(isPreviewScreenEnabled);
+      (0, import_react165.useEffect)(() => {
         let timeout = null;
         dropdownListRef.current = dropdownList || [];
         if (dropdownListRef.current.length === 0) {
@@ -16996,7 +17032,7 @@ var init_conference = __esm({
           clearTimeout(timeout);
         };
       }, [dropdownList, hideControls, isMobileDevice]);
-      (0, import_react164.useEffect)(() => {
+      (0, import_react165.useEffect)(() => {
         if (!roomId) {
           navigate(`/`);
           return;
@@ -17004,15 +17040,15 @@ var init_conference = __esm({
         if (!isPreviewScreenEnabled) {
           return;
         }
-        if (!prevState && !(roomState === import_react_sdk92.HMSRoomState.Connecting || roomState === import_react_sdk92.HMSRoomState.Reconnecting || isConnectedToRoom)) {
+        if (!prevState && !(roomState === import_react_sdk91.HMSRoomState.Connecting || roomState === import_react_sdk91.HMSRoomState.Reconnecting || isConnectedToRoom)) {
           if (role)
             navigate(`/preview/${roomId || ""}/${role}`);
           else
             navigate(`/preview/${roomId || ""}`);
         }
       }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-      (0, import_react164.useEffect)(() => {
-        if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== import_react_sdk92.HMSRoomState.Connecting && !autoRoomJoined.current) {
+      (0, import_react165.useEffect)(() => {
+        if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== import_react_sdk91.HMSRoomState.Connecting && !autoRoomJoined.current) {
           hmsActions.join({
             userName,
             authToken: authTokenInAppData,
@@ -17026,15 +17062,15 @@ var init_conference = __esm({
           autoRoomJoined.current = true;
         }
       }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-      (0, import_react164.useEffect)(() => {
+      (0, import_react165.useEffect)(() => {
         return () => {
           PictureInPicture.stop().catch((error) => console.error("stopping pip", error));
         };
       }, []);
       if (!isConnectedToRoom) {
-        return /* @__PURE__ */ import_react164.default.createElement(FullPageProgress_default, { text: "Joining..." });
+        return /* @__PURE__ */ import_react165.default.createElement(FullPageProgress_default, { text: "Joining..." });
       }
-      return /* @__PURE__ */ import_react164.default.createElement(import_react164.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react164.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react164.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react164.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ import_react164.default.createElement(
+      return /* @__PURE__ */ import_react165.default.createElement(import_react165.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react165.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react165.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react165.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ import_react165.default.createElement(
         Box,
         {
           ref: headerRef,
@@ -17048,8 +17084,8 @@ var init_conference = __esm({
           },
           "data-testid": "header"
         },
-        /* @__PURE__ */ import_react164.default.createElement(Header2, { elements: screenProps.elements, screenType: screenProps.screenType })
-      ), /* @__PURE__ */ import_react164.default.createElement(
+        /* @__PURE__ */ import_react165.default.createElement(Header2, { elements: screenProps.elements, screenType: screenProps.screenType })
+      ), /* @__PURE__ */ import_react165.default.createElement(
         Box,
         {
           css: {
@@ -17067,7 +17103,7 @@ var init_conference = __esm({
           "data-testid": "conferencing",
           onClick: toggleControls
         },
-        /* @__PURE__ */ import_react164.default.createElement(
+        /* @__PURE__ */ import_react165.default.createElement(
           VideoStreamingSection,
           {
             screenType: screenProps.screenType,
@@ -17075,7 +17111,7 @@ var init_conference = __esm({
             hideControls
           }
         )
-      ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ import_react164.default.createElement(
+      ), !screenProps.hideSections.includes("footer") && /* @__PURE__ */ import_react165.default.createElement(
         Box,
         {
           ref: footerRef,
@@ -17092,8 +17128,8 @@ var init_conference = __esm({
           },
           "data-testid": "footer"
         },
-        /* @__PURE__ */ import_react164.default.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-      ), /* @__PURE__ */ import_react164.default.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ import_react164.default.createElement(HLSFailureModal, null), /* @__PURE__ */ import_react164.default.createElement(ActivatedPIP, null)));
+        /* @__PURE__ */ import_react165.default.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+      ), /* @__PURE__ */ import_react165.default.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ import_react165.default.createElement(HLSFailureModal, null), /* @__PURE__ */ import_react165.default.createElement(ActivatedPIP, null)));
     };
     conference_default = Conference;
   }
@@ -17106,16 +17142,16 @@ function AppRoutes({
 }) {
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
-  return /* @__PURE__ */ import_react165.default.createElement(Router, null, /* @__PURE__ */ import_react165.default.createElement(import_react165.default.Fragment, null, /* @__PURE__ */ import_react165.default.createElement(ToastContainer, null), /* @__PURE__ */ import_react165.default.createElement(Notifications, null), /* @__PURE__ */ import_react165.default.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ import_react165.default.createElement(FlyingEmoji, null), /* @__PURE__ */ import_react165.default.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ import_react165.default.createElement(KeyboardHandler, null), /* @__PURE__ */ import_react165.default.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Routes, null, /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: "/*", element: /* @__PURE__ */ import_react165.default.createElement(RouteList, null) }))));
+  return /* @__PURE__ */ import_react166.default.createElement(Router, null, /* @__PURE__ */ import_react166.default.createElement(import_react166.default.Fragment, null, /* @__PURE__ */ import_react166.default.createElement(ToastContainer, null), /* @__PURE__ */ import_react166.default.createElement(Notifications, null), /* @__PURE__ */ import_react166.default.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ import_react166.default.createElement(FlyingEmoji, null), /* @__PURE__ */ import_react166.default.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ import_react166.default.createElement(KeyboardHandler, null), /* @__PURE__ */ import_react166.default.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Routes, null, /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: "/*", element: /* @__PURE__ */ import_react166.default.createElement(RouteList, null) }))));
 }
-var import_react165, import_react_router_dom6, import_react_sdk93, Conference2, HMSPrebuilt, Redirector, RouteList, BackSwipe, Router;
+var import_react166, import_react_router_dom6, import_react_sdk92, Conference2, HMSPrebuilt, Redirector, RouteList, BackSwipe, Router;
 var init_App = __esm({
   "src/Prebuilt/App.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react165 = __toESM(require("react"));
+    import_react166 = __toESM(require("react"));
     import_react_router_dom6 = require("react-router-dom");
-    import_react_sdk93 = require("@100mslive/react-sdk");
+    import_react_sdk92 = require("@100mslive/react-sdk");
     init_AppData();
     init_AuthToken();
     init_ErrorBoundary();
@@ -17136,8 +17172,8 @@ var init_App = __esm({
     init_useAutoStartStreaming();
     init_useRoomLayoutScreen();
     init_FeatureFlags();
-    Conference2 = import_react165.default.lazy(() => Promise.resolve().then(() => (init_conference(), conference_exports)));
-    HMSPrebuilt = import_react165.default.forwardRef(
+    Conference2 = import_react166.default.lazy(() => Promise.resolve().then(() => (init_conference(), conference_exports)));
+    HMSPrebuilt = import_react166.default.forwardRef(
       ({
         roomCode = "",
         authToken = "",
@@ -17152,11 +17188,11 @@ var init_App = __esm({
       }, ref) => {
         var _a7, _b7, _c, _d;
         const metadata = "";
-        const reactiveStore = (0, import_react165.useRef)();
-        const [hydrated, setHydrated] = import_react165.default.useState(false);
-        (0, import_react165.useEffect)(() => {
+        const reactiveStore = (0, import_react166.useRef)();
+        const [hydrated, setHydrated] = import_react166.default.useState(false);
+        (0, import_react166.useEffect)(() => {
           setHydrated(true);
-          const hms = new import_react_sdk93.HMSReactiveStore();
+          const hms = new import_react_sdk92.HMSReactiveStore();
           const hmsStore = hms.getStore();
           const hmsActions = hms.getActions();
           const hmsNotifications = hms.getNotifications();
@@ -17169,13 +17205,13 @@ var init_App = __esm({
             hmsNotifications
           };
         }, []);
-        (0, import_react165.useEffect)(() => {
+        (0, import_react166.useEffect)(() => {
           if (!ref || !reactiveStore.current) {
             return;
           }
           ref.current = __spreadValues({}, reactiveStore.current);
         }, [ref]);
-        (0, import_react165.useEffect)(
+        (0, import_react166.useEffect)(
           () => () => {
             var _a8;
             (_a8 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a8.hmsActions.leave();
@@ -17205,7 +17241,7 @@ var init_App = __esm({
           return null;
         }
         globalStyles();
-        return /* @__PURE__ */ import_react165.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react165.default.createElement(
+        return /* @__PURE__ */ import_react166.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react166.default.createElement(
           HMSPrebuiltContext.Provider,
           {
             value: {
@@ -17223,8 +17259,8 @@ var init_App = __esm({
               }
             }
           },
-          /* @__PURE__ */ import_react165.default.createElement(
-            import_react_sdk93.HMSRoomProvider,
+          /* @__PURE__ */ import_react166.default.createElement(
+            import_react_sdk92.HMSRoomProvider,
             {
               isHMSStatsOn: FeatureFlags.enableStatsForNerds,
               actions: (_a7 = reactiveStore.current) == null ? void 0 : _a7.hmsActions,
@@ -17232,7 +17268,7 @@ var init_App = __esm({
               notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
               stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
             },
-            /* @__PURE__ */ import_react165.default.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ import_react165.default.createElement(RoomLayoutContext.Consumer, null, (data3) => {
+            /* @__PURE__ */ import_react166.default.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ import_react166.default.createElement(RoomLayoutContext.Consumer, null, (data3) => {
               var _a8;
               const layout = data3 == null ? void 0 : data3.layout;
               const theme2 = ((_a8 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a8[0]) || {};
@@ -17241,7 +17277,7 @@ var init_App = __esm({
               if (typography2 == null ? void 0 : typography2.font_family) {
                 fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
               }
-              return /* @__PURE__ */ import_react165.default.createElement(
+              return /* @__PURE__ */ import_react166.default.createElement(
                 HMSThemeProvider,
                 {
                   themeType: `${theme2.name}-${Date.now()}`,
@@ -17254,9 +17290,9 @@ var init_App = __esm({
                     }
                   }
                 },
-                /* @__PURE__ */ import_react165.default.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
-                /* @__PURE__ */ import_react165.default.createElement(Init, null),
-                /* @__PURE__ */ import_react165.default.createElement(
+                /* @__PURE__ */ import_react166.default.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
+                /* @__PURE__ */ import_react166.default.createElement(Init, null),
+                /* @__PURE__ */ import_react166.default.createElement(
                   Box,
                   {
                     css: {
@@ -17266,7 +17302,7 @@ var init_App = __esm({
                       "-webkit-text-size-adjust": "100%"
                     }
                   },
-                  /* @__PURE__ */ import_react165.default.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
+                  /* @__PURE__ */ import_react166.default.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
                 )
               );
             }))
@@ -17277,42 +17313,42 @@ var init_App = __esm({
     HMSPrebuilt.displayName = "HMSPrebuilt";
     Redirector = ({ showPreview }) => {
       const { roomId, role } = (0, import_react_router_dom6.useParams)();
-      return /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
+      return /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
     };
     RouteList = () => {
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       useAutoStartStreaming();
-      return /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: "preview" }, /* @__PURE__ */ import_react165.default.createElement(
+      return /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: "preview" }, /* @__PURE__ */ import_react166.default.createElement(
         import_react_router_dom6.Route,
         {
           path: ":roomId/:role",
-          element: /* @__PURE__ */ import_react165.default.createElement(import_react165.Suspense, { fallback: /* @__PURE__ */ import_react165.default.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ import_react165.default.createElement(PreviewContainer_default, null))
+          element: /* @__PURE__ */ import_react166.default.createElement(import_react166.Suspense, { fallback: /* @__PURE__ */ import_react166.default.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ import_react166.default.createElement(PreviewContainer_default, null))
         }
-      ), /* @__PURE__ */ import_react165.default.createElement(
+      ), /* @__PURE__ */ import_react166.default.createElement(
         import_react_router_dom6.Route,
         {
           path: ":roomId",
-          element: /* @__PURE__ */ import_react165.default.createElement(import_react165.Suspense, { fallback: /* @__PURE__ */ import_react165.default.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ import_react165.default.createElement(PreviewContainer_default, null))
+          element: /* @__PURE__ */ import_react166.default.createElement(import_react166.Suspense, { fallback: /* @__PURE__ */ import_react166.default.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ import_react166.default.createElement(PreviewContainer_default, null))
         }
-      )) : null, /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: "meeting" }, /* @__PURE__ */ import_react165.default.createElement(
+      )) : null, /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: "meeting" }, /* @__PURE__ */ import_react166.default.createElement(
         import_react_router_dom6.Route,
         {
           path: ":roomId/:role",
-          element: /* @__PURE__ */ import_react165.default.createElement(import_react165.Suspense, { fallback: /* @__PURE__ */ import_react165.default.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ import_react165.default.createElement(Conference2, null))
+          element: /* @__PURE__ */ import_react166.default.createElement(import_react166.Suspense, { fallback: /* @__PURE__ */ import_react166.default.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ import_react166.default.createElement(Conference2, null))
         }
-      ), /* @__PURE__ */ import_react165.default.createElement(
+      ), /* @__PURE__ */ import_react166.default.createElement(
         import_react_router_dom6.Route,
         {
           path: ":roomId",
-          element: /* @__PURE__ */ import_react165.default.createElement(import_react165.Suspense, { fallback: /* @__PURE__ */ import_react165.default.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ import_react165.default.createElement(Conference2, null))
+          element: /* @__PURE__ */ import_react166.default.createElement(import_react166.Suspense, { fallback: /* @__PURE__ */ import_react166.default.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ import_react166.default.createElement(Conference2, null))
         }
-      )), isLeaveScreenEnabled ? /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: "leave" }, /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: ":roomId/:role", element: /* @__PURE__ */ import_react165.default.createElement(PostLeave_default, null) }), /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: ":roomId", element: /* @__PURE__ */ import_react165.default.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: "/:roomId/:role", element: /* @__PURE__ */ import_react165.default.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.Route, { path: "/:roomId/", element: /* @__PURE__ */ import_react165.default.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
+      )), isLeaveScreenEnabled ? /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: "leave" }, /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: ":roomId/:role", element: /* @__PURE__ */ import_react166.default.createElement(PostLeave_default, null) }), /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: ":roomId", element: /* @__PURE__ */ import_react166.default.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: "/:roomId/:role", element: /* @__PURE__ */ import_react166.default.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.Route, { path: "/:roomId/", element: /* @__PURE__ */ import_react166.default.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
     };
     BackSwipe = () => {
-      const isConnectedToRoom = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectIsConnectedToRoom);
-      const hmsActions = (0, import_react_sdk93.useHMSActions)();
-      (0, import_react165.useEffect)(() => {
+      const isConnectedToRoom = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectIsConnectedToRoom);
+      const hmsActions = (0, import_react_sdk92.useHMSActions)();
+      (0, import_react166.useEffect)(() => {
         const onRouteLeave = () => __async(void 0, null, function* () {
           if (isConnectedToRoom) {
             yield hmsActions.leave();
@@ -17327,7 +17363,7 @@ var init_App = __esm({
     };
     Router = ({ children }) => {
       const { roomId, role, roomCode } = useHMSPrebuiltContext();
-      return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.BrowserRouter, null, children) : /* @__PURE__ */ import_react165.default.createElement(import_react_router_dom6.MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
+      return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.BrowserRouter, null, children) : /* @__PURE__ */ import_react166.default.createElement(import_react_router_dom6.MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
     };
   }
 });