@100mslive/roomkit-react 0.3.13-alpha.2 → 0.3.13-alpha.4

package/dist/index.cjs.js

@@ -109,7 +109,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_781d4ddf-5daa-45db-9f83-c0bf317f9e95", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_exports___index_css: "./dist/index.css", 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", npm_package_dependencies__100mslive_hms_whiteboard: "0.0.3-alpha.2", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.3 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", 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.10.13-alpha.2", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_781d4ddf-5daa-45db-9f83-c0bf317f9e95", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.3/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.13.13-alpha.2", 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.9", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.8", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.3.11579264", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "595", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.11/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240609.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.4/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:18234", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.3.13-alpha.2", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "true", GITHUB_RUN_ID: "9504609350", STATS_VMFE: "true", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "8ad775c3c97fb8bbc724a83aa16891271f0d9b83", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "examples/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "42b125171dea7d12c69002be435ead6e0223e3f1f4635b00e17b5bd03a173816", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/publish-alpha", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_scripts_prebuilt: "cd packages/roomkit-react && yarn start", npm_package_devDependencies_postcss_loader: "^6.2.1", npm_package_devDependencies_esbuild_loader: "^4.0.2", PATH: "/tmp/yarn--1718302155559-0.9798725688206638:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1718302155365-0.44461227345693377:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1718302130135-0.059118830462507654:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1718302129956-0.2484037447094678:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.20.3/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_71d83aa6-547c-4ab5-aae8-16419954a821", INVOCATION_ID: "f0e414d2de8a4a0e83671c8b0b2f2f7b", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "573", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 80", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "true", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.10.13-alpha.2", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.13-alpha.2", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", GITHUB_SHA: "8ad775c3c97fb8bbc724a83aa16891271f0d9b83", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_781d4ddf-5daa-45db-9f83-c0bf317f9e95", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_781d4ddf-5daa-45db-9f83-c0bf317f9e95", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.181+6/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_781d4ddf-5daa-45db-9f83-c0bf317f9e95" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_8e6af420-513e-414d-aa23-a752e95303fc", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_exports___index_css: "./dist/index.css", 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", npm_package_dependencies__100mslive_hms_whiteboard: "0.0.3-alpha.4", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.3 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", 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.10.13-alpha.4", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_8e6af420-513e-414d-aa23-a752e95303fc", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.3/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.13.13-alpha.4", 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.9", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.8", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.3.11579264", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "595", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.11/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240609.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.4/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:18983", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.3.13-alpha.4", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "true", GITHUB_RUN_ID: "9514408329", STATS_VMFE: "true", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "678e1447e57c5ab4d7574c319f274cd45ac60a96", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "examples/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "5884bdc4d8de5e2ee5b2c3155430dd18592148e2a0ea132b5694c35c60e13c5e", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/publish-alpha", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_scripts_prebuilt: "cd packages/roomkit-react && yarn start", npm_package_devDependencies_postcss_loader: "^6.2.1", npm_package_devDependencies_esbuild_loader: "^4.0.2", PATH: "/tmp/yarn--1718359908640-0.3005683268034627:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1718359908443-0.9888851874003317:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1718359882489-0.9992482425092206:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1718359882307-0.045798951201833304:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.3/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.3/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.20.3/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_71b9e33b-74da-4b38-bf15-fffbdfa04ed4", INVOCATION_ID: "1f8a737f33994aa898adfa84b6401159", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "575", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 55", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "true", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.10.13-alpha.4", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.13-alpha.4", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", GITHUB_SHA: "678e1447e57c5ab4d7574c319f274cd45ac60a96", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_8e6af420-513e-414d-aa23-a752e95303fc", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_8e6af420-513e-414d-aa23-a752e95303fc", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.181+6/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_8e6af420-513e-414d-aa23-a752e95303fc" };
   }
 });
 
@@ -3878,7 +3878,7 @@ var init_useUserPreferences = __esm({
 });
 
 // src/Prebuilt/components/AppData/useUISettings.js
-var import_react29, import_react_sdk7, useUISettings, useSetUiSettings, useAuthToken, useUrlToEmbed, usePDFConfig, useResetPDFConfig, useResetEmbedConfig, usePinnedTrack, useSubscribedNotifications, useIsNotificationDisabled, useSetSubscribedNotifications, useIsCaptionEnabled, useSetIsCaptionEnabled, useSubscribeChatSelector, useSetSubscribedChatSelector, useSetAppDataByKey, useSetAppData, useShowPolls, usePollViewState, useIsNoiseCancellationEnabled, useSetNoiseCancellationEnabled;
+var import_react29, import_react_sdk7, useUISettings, useSetUiSettings, useAuthToken, useUrlToEmbed, usePDFConfig, useResetPDFConfig, useResetEmbedConfig, usePinnedTrack, useSubscribedNotifications, useIsNotificationDisabled, useSetSubscribedNotifications, useIsCaptionEnabled, useSetIsCaptionEnabled, useSubscribeChatSelector, useSetSubscribedChatSelector, useSetAppDataByKey, useSetAppData, useShowPolls, usePollViewState, useIsNoiseCancellationEnabled, useSetNoiseCancellation;
 var init_useUISettings = __esm({
   "src/Prebuilt/components/AppData/useUISettings.js"() {
     "use strict";
@@ -4025,10 +4025,10 @@ var init_useUISettings = __esm({
       };
     };
     useIsNoiseCancellationEnabled = () => {
-      const IsNoiseCancellationEnabled = (0, import_react_sdk7.useHMSStore)((0, import_react_sdk7.selectAppDataByPath)(APP_DATA.noiseCancellation));
-      return IsNoiseCancellationEnabled;
+      const isNoiseCancellationEnabled = (0, import_react_sdk7.useHMSStore)((0, import_react_sdk7.selectAppDataByPath)(APP_DATA.noiseCancellation));
+      return isNoiseCancellationEnabled;
     };
-    useSetNoiseCancellationEnabled = () => {
+    useSetNoiseCancellation = () => {
       const [isNoiseCancellationEnabled, setNoiseCancellationEnabled] = useSetAppDataByKey(APP_DATA.noiseCancellation);
       return [isNoiseCancellationEnabled, setNoiseCancellationEnabled];
     };
@@ -10112,7 +10112,7 @@ var init_AppData = __esm({
       const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
       const { isLocalVideoEnabled } = (0, import_react_sdk11.useAVToggle)();
       const sidepaneOpenedRef = (0, import_react35.useRef)(false);
-      const [, setNoiseCancellationEnabled] = useSetNoiseCancellationEnabled();
+      const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
       (0, import_react35.useEffect)(() => {
         var _a9;
         if ((_a9 = elements == null ? void 0 : elements.noise_cancellation) == null ? void 0 : _a9.enabled_by_default) {
@@ -10484,7 +10484,7 @@ var init_IconButtonWithOptions = __esm({
       }
     }) => {
       const commonProps = { disabled, active };
-      return /* @__PURE__ */ import_react38.default.createElement(Flex, null, /* @__PURE__ */ import_react38.default.createElement(IconSection, __spreadProps(__spreadValues({}, commonProps), { onClick, hideOptions }), /* @__PURE__ */ import_react38.default.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ import_react38.default.createElement(Icon2, __spreadValues({}, commonProps), icon))), !hideOptions && children ? /* @__PURE__ */ import_react38.default.createElement(Dropdown.Root, null, /* @__PURE__ */ import_react38.default.createElement(
+      return /* @__PURE__ */ import_react38.default.createElement(Flex, null, /* @__PURE__ */ import_react38.default.createElement(IconSection, __spreadProps(__spreadValues({}, commonProps), { onClick, hideOptions, className: "__cancel-drag-event" }), /* @__PURE__ */ import_react38.default.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ import_react38.default.createElement(Icon2, __spreadValues({}, commonProps), icon))), !hideOptions && children ? /* @__PURE__ */ import_react38.default.createElement(Dropdown.Root, null, /* @__PURE__ */ import_react38.default.createElement(
         Dropdown.Trigger,
         {
           asChild: true,
@@ -10518,13 +10518,80 @@ var init_IconButtonWithOptions = __esm({
   }
 });
 
+// src/Prebuilt/components/MoreSettings/ActionTile.jsx
+var import_react39, ActionTileRoot, ActionTileCount, ActionTileTitle, ActionTile;
+var init_ActionTile = __esm({
+  "src/Prebuilt/components/MoreSettings/ActionTile.jsx"() {
+    "use strict";
+    init_define_process_env();
+    import_react39 = __toESM(require("react"));
+    init_Layout();
+    init_Text2();
+    init_Theme();
+    ActionTileRoot = (_a8) => {
+      var _b7 = _a8, { active, disabled = false, children, onClick } = _b7, props = __objRest(_b7, ["active", "disabled", "children", "onClick"]);
+      return /* @__PURE__ */ import_react39.default.createElement(
+        Flex,
+        __spreadProps(__spreadValues({}, props), {
+          css: {
+            flexDirection: "column",
+            alignItems: "center",
+            p: "$4 $2",
+            position: "relative",
+            bg: active ? "$surface_bright" : "",
+            color: disabled ? "$on_surface_low" : "$on_surface_high",
+            gap: "$4",
+            r: "$1",
+            "&:hover": {
+              bg: "$surface_bright"
+            }
+          },
+          onClick: () => {
+            if (!disabled) {
+              onClick();
+            }
+          }
+        }),
+        children
+      );
+    };
+    ActionTileCount = styled(Text, {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      fontWeight: "$semiBold",
+      color: "$on_surface_high",
+      p: "$1 $2",
+      minWidth: "$9",
+      textAlign: "center",
+      boxSizing: "border-box",
+      bg: "$surface_bright",
+      r: "$round",
+      letterSpacing: "1.5px",
+      fontSize: "$tiny !important",
+      lineHeight: "$tiny !important"
+    });
+    ActionTileTitle = styled(Text, {
+      fontWeight: "$semiBold",
+      color: "inherit",
+      textAlign: "center",
+      fontSize: "$xs !important"
+    });
+    ActionTile = {
+      Root: ActionTileRoot,
+      Title: ActionTileTitle,
+      Count: ActionTileCount
+    };
+  }
+});
+
 // src/Sheet/Sheet.tsx
-var import_react39, DialogPrimitive2, SheetRoot, SheetTrigger, StyledOverlay, StyledContent6, SheetContent, SheetClose, SheetTitle, SheetDescription, SheetDefaultCloseIcon, Sheet;
+var import_react40, DialogPrimitive2, SheetRoot, SheetTrigger, StyledOverlay, StyledContent6, SheetContent, SheetClose, SheetTitle, SheetDescription, SheetDefaultCloseIcon, Sheet;
 var init_Sheet = __esm({
   "src/Sheet/Sheet.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react39 = __toESM(require("react"));
+    import_react40 = __toESM(require("react"));
     DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"));
     init_Modal();
     init_Theme();
@@ -10605,10 +10672,10 @@ var init_Sheet = __esm({
         side: "bottom"
       }
     });
-    SheetContent = import_react39.default.forwardRef(
+    SheetContent = import_react40.default.forwardRef(
       (_a8, forwardedRef) => {
         var _b7 = _a8, { children, container } = _b7, props = __objRest(_b7, ["children", "container"]);
-        return /* @__PURE__ */ import_react39.default.createElement(Dialog.Portal, { container }, /* @__PURE__ */ import_react39.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react39.default.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
+        return /* @__PURE__ */ import_react40.default.createElement(Dialog.Portal, { container }, /* @__PURE__ */ import_react40.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react40.default.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
       }
     );
     SheetClose = Dialog.Close;
@@ -10639,16 +10706,16 @@ var init_Sheet2 = __esm({
 });
 
 // src/Prebuilt/primitives/DropdownTrigger.jsx
-var import_react40, import_react_icons9, DialogDropdownTrigger;
+var import_react41, import_react_icons9, DialogDropdownTrigger;
 var init_DropdownTrigger = __esm({
   "src/Prebuilt/primitives/DropdownTrigger.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react40 = __toESM(require("react"));
+    import_react41 = __toESM(require("react"));
     import_react_icons9 = require("@100mslive/react-icons");
     init_src();
-    DialogDropdownTrigger = import_react40.default.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
-      return /* @__PURE__ */ import_react40.default.createElement(
+    DialogDropdownTrigger = import_react41.default.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
+      return /* @__PURE__ */ import_react41.default.createElement(
         Dropdown.Trigger,
         {
           asChild: true,
@@ -10662,7 +10729,7 @@ var init_DropdownTrigger = __esm({
           }, css2),
           ref
         },
-        /* @__PURE__ */ import_react40.default.createElement(
+        /* @__PURE__ */ import_react41.default.createElement(
           Flex,
           {
             css: {
@@ -10673,7 +10740,7 @@ var init_DropdownTrigger = __esm({
             }
           },
           icon,
-          /* @__PURE__ */ import_react40.default.createElement(
+          /* @__PURE__ */ import_react41.default.createElement(
             Text,
             {
               css: __spreadValues(__spreadProps(__spreadValues({
@@ -10685,7 +10752,7 @@ var init_DropdownTrigger = __esm({
             },
             title
           ),
-          open ? /* @__PURE__ */ import_react40.default.createElement(import_react_icons9.ChevronUpIcon, null) : /* @__PURE__ */ import_react40.default.createElement(import_react_icons9.ChevronDownIcon, null)
+          open ? /* @__PURE__ */ import_react41.default.createElement(import_react_icons9.ChevronUpIcon, null) : /* @__PURE__ */ import_react41.default.createElement(import_react_icons9.ChevronDownIcon, null)
         )
       );
     });
@@ -10693,16 +10760,16 @@ var init_DropdownTrigger = __esm({
 });
 
 // src/Prebuilt/components/hooks/useAudioOutputTest.tsx
-var import_react41, useAudioOutputTest;
+var import_react42, useAudioOutputTest;
 var init_useAudioOutputTest = __esm({
   "src/Prebuilt/components/hooks/useAudioOutputTest.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react41 = require("react");
+    import_react42 = require("react");
     useAudioOutputTest = ({ deviceId }) => {
-      const audioRef = (0, import_react41.useRef)(null);
-      const [playing, setPlaying] = (0, import_react41.useState)(false);
-      (0, import_react41.useEffect)(() => {
+      const audioRef = (0, import_react42.useRef)(null);
+      const [playing, setPlaying] = (0, import_react42.useState)(false);
+      (0, import_react42.useEffect)(() => {
         if (audioRef.current && deviceId) {
           try {
             if (typeof audioRef.current.setSinkId !== "undefined") {
@@ -10731,12 +10798,12 @@ var init_useDropdownSelection = __esm({
 });
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
-var import_react42, import_react_use4, import_react_sdk13, import_react_icons10, Settings, DeviceSelector, TestAudio, DeviceSettings_default;
+var import_react43, import_react_use4, import_react_sdk13, import_react_icons10, Settings, DeviceSelector, TestAudio, DeviceSettings_default;
 var init_DeviceSettings = __esm({
   "src/Prebuilt/components/Settings/DeviceSettings.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react42 = __toESM(require("react"));
+    import_react43 = __toESM(require("react"));
     import_react_use4 = require("react-use");
     import_react_sdk13 = require("@100mslive/react-sdk");
     import_react_icons10 = require("@100mslive/react-icons");
@@ -10760,7 +10827,7 @@ var init_DeviceSettings = __esm({
       const hmsActions = (0, import_react_sdk13.useHMSActions)();
       const track = (0, import_react_sdk13.useHMSStore)(trackSelector);
       const isMobile = (0, import_react_use4.useMedia)(config.media.md);
-      (0, import_react42.useEffect)(() => {
+      (0, import_react43.useEffect)(() => {
         if (isMobile) {
           hmsActions.refreshDevices();
         }
@@ -10769,7 +10836,7 @@ var init_DeviceSettings = __esm({
       if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
         setHide(true);
       }
-      return /* @__PURE__ */ import_react42.default.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ import_react42.default.createElement(import_react42.Fragment, null, isVideoOn && /* @__PURE__ */ import_react42.default.createElement(
+      return /* @__PURE__ */ import_react43.default.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ import_react43.default.createElement(import_react43.Fragment, null, isVideoOn && /* @__PURE__ */ import_react43.default.createElement(
         StyledVideoTile.Container,
         {
           css: {
@@ -10780,24 +10847,24 @@ var init_DeviceSettings = __esm({
             m: "$10 auto"
           }
         },
-        /* @__PURE__ */ import_react42.default.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
-      ), /* @__PURE__ */ import_react42.default.createElement(
+        /* @__PURE__ */ import_react43.default.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
+      ), /* @__PURE__ */ import_react43.default.createElement(
         DeviceSelector,
         {
           title: "Video",
           devices: videoInput,
-          icon: /* @__PURE__ */ import_react42.default.createElement(import_react_icons10.VideoOnIcon, null),
+          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons10.VideoOnIcon, null),
           selection: selectedDeviceIDs.videoInput,
           onChange: (deviceId) => updateDevice({
             deviceId,
             deviceType: import_react_sdk13.DeviceType.videoInput
           })
         }
-      )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ import_react42.default.createElement(
+      )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ import_react43.default.createElement(
         DeviceSelector,
         {
           title: shouldShowAudioOutput ? "Microphone" : "Audio",
-          icon: /* @__PURE__ */ import_react42.default.createElement(import_react_icons10.MicOnIcon, null),
+          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons10.MicOnIcon, null),
           devices: audioInput,
           selection: selectedDeviceIDs.audioInput,
           onChange: (deviceId) => updateDevice({
@@ -10805,11 +10872,11 @@ var init_DeviceSettings = __esm({
             deviceType: import_react_sdk13.DeviceType.audioInput
           })
         }
-      ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ import_react42.default.createElement(
+      ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ import_react43.default.createElement(
         DeviceSelector,
         {
           title: "Speaker",
-          icon: /* @__PURE__ */ import_react42.default.createElement(import_react_icons10.SpeakerIcon, null),
+          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons10.SpeakerIcon, null),
           devices: audioOutput,
           selection: selectedDeviceIDs.audioOutput,
           onChange: (deviceId) => updateDevice({
@@ -10817,15 +10884,15 @@ var init_DeviceSettings = __esm({
             deviceType: import_react_sdk13.DeviceType.audioOutput
           })
         },
-        /* @__PURE__ */ import_react42.default.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
+        /* @__PURE__ */ import_react43.default.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
       ) : null);
     };
     DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
       var _a8, _b7;
-      const [open, setOpen] = (0, import_react42.useState)(false);
+      const [open, setOpen] = (0, import_react43.useState)(false);
       const selectionBg = useDropdownSelection();
-      const ref = (0, import_react42.useRef)(null);
-      return /* @__PURE__ */ import_react42.default.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ import_react42.default.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ import_react42.default.createElement(
+      const ref = (0, import_react43.useRef)(null);
+      return /* @__PURE__ */ import_react43.default.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ import_react43.default.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ import_react43.default.createElement(
         Flex,
         {
           align: "center",
@@ -10837,7 +10904,7 @@ var init_DeviceSettings = __esm({
             }
           }
         },
-        /* @__PURE__ */ import_react42.default.createElement(
+        /* @__PURE__ */ import_react43.default.createElement(
           Box,
           {
             css: {
@@ -10851,7 +10918,7 @@ var init_DeviceSettings = __esm({
               }
             }
           },
-          /* @__PURE__ */ import_react42.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react42.default.createElement(
+          /* @__PURE__ */ import_react43.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react43.default.createElement(
             DialogDropdownTrigger,
             {
               ref,
@@ -10859,8 +10926,8 @@ var init_DeviceSettings = __esm({
               title: ((_a8 = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a8.label) || "Select device from list",
               open
             }
-          ), /* @__PURE__ */ import_react42.default.createElement(Dropdown.Portal, null, /* @__PURE__ */ import_react42.default.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
-            return /* @__PURE__ */ import_react42.default.createElement(
+          ), /* @__PURE__ */ import_react43.default.createElement(Dropdown.Portal, null, /* @__PURE__ */ import_react43.default.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
+            return /* @__PURE__ */ import_react43.default.createElement(
               Dropdown.Item,
               {
                 key: device.label,
@@ -10879,7 +10946,7 @@ var init_DeviceSettings = __esm({
     };
     TestAudio = ({ id }) => {
       const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId: id });
-      return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
+      return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(
         Button,
         {
           variant: "standard",
@@ -10896,11 +10963,11 @@ var init_DeviceSettings = __esm({
           },
           disabled: playing
         },
-        /* @__PURE__ */ import_react42.default.createElement(import_react_icons10.SpeakerIcon, null),
+        /* @__PURE__ */ import_react43.default.createElement(import_react_icons10.SpeakerIcon, null),
         "\xA0Test",
         " ",
-        /* @__PURE__ */ import_react42.default.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
-      ), /* @__PURE__ */ import_react42.default.createElement(
+        /* @__PURE__ */ import_react43.default.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
+      ), /* @__PURE__ */ import_react43.default.createElement(
         "audio",
         {
           ref: audioRef,
@@ -10916,12 +10983,12 @@ var init_DeviceSettings = __esm({
 });
 
 // src/Prebuilt/components/Settings/NotificationSettings.tsx
-var import_react43, import_react_icons11, NotificationItem, NotificationSettings;
+var import_react44, import_react_icons11, NotificationItem, NotificationSettings;
 var init_NotificationSettings = __esm({
   "src/Prebuilt/components/Settings/NotificationSettings.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react43 = __toESM(require("react"));
+    import_react44 = __toESM(require("react"));
     import_react_icons11 = require("@100mslive/react-icons");
     init_src();
     init_SwitchWithLabel();
@@ -10935,7 +11002,7 @@ var init_NotificationSettings = __esm({
       checked
     }) => {
       const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
-      return /* @__PURE__ */ import_react43.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement(
         SwitchWithLabel_default,
         {
           label,
@@ -10950,36 +11017,36 @@ var init_NotificationSettings = __esm({
     };
     NotificationSettings = () => {
       const subscribedNotifications = useSubscribedNotifications();
-      return /* @__PURE__ */ import_react43.default.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ import_react43.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ import_react44.default.createElement(
         NotificationItem,
         {
           label: "Peer Joined",
           type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
-          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons11.PeopleAddIcon, null),
+          icon: /* @__PURE__ */ import_react44.default.createElement(import_react_icons11.PeopleAddIcon, null),
           checked: subscribedNotifications.PEER_JOINED
         }
-      ), /* @__PURE__ */ import_react43.default.createElement(
+      ), /* @__PURE__ */ import_react44.default.createElement(
         NotificationItem,
         {
           label: "Peer Leave",
           type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
-          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons11.PeopleRemoveIcon, null),
+          icon: /* @__PURE__ */ import_react44.default.createElement(import_react_icons11.PeopleRemoveIcon, null),
           checked: subscribedNotifications.PEER_LEFT
         }
-      ), /* @__PURE__ */ import_react43.default.createElement(
+      ), /* @__PURE__ */ import_react44.default.createElement(
         NotificationItem,
         {
           label: "Hand Raised",
           type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
-          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons11.HandIcon, null),
+          icon: /* @__PURE__ */ import_react44.default.createElement(import_react_icons11.HandIcon, null),
           checked: subscribedNotifications.METADATA_UPDATED
         }
-      ), /* @__PURE__ */ import_react43.default.createElement(
+      ), /* @__PURE__ */ import_react44.default.createElement(
         NotificationItem,
         {
           label: "Error",
           type: SUBSCRIBED_NOTIFICATIONS.ERROR,
-          icon: /* @__PURE__ */ import_react43.default.createElement(import_react_icons11.AlertOctagonIcon, null),
+          icon: /* @__PURE__ */ import_react44.default.createElement(import_react_icons11.AlertOctagonIcon, null),
           checked: subscribedNotifications.ERROR
         }
       ));
@@ -10988,12 +11055,12 @@ var init_NotificationSettings = __esm({
 });
 
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-var import_react44, import_react_use5, import_react_icons12, settingsList, SettingsModal, MobileSettingModal, DesktopSettingModal, SettingsContentHeader, SettingsModal_default;
+var import_react45, import_react_use5, import_react_icons12, settingsList, SettingsModal, MobileSettingModal, DesktopSettingModal, SettingsContentHeader, SettingsModal_default;
 var init_SettingsModal = __esm({
   "src/Prebuilt/components/Settings/SettingsModal.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react44 = __toESM(require("react"));
+    import_react45 = __toESM(require("react"));
     import_react_use5 = require("react-use");
     import_react_icons12 = require("@100mslive/react-icons");
     init_Divider2();
@@ -11028,29 +11095,29 @@ var init_SettingsModal = __esm({
         content: LayoutSettings
       }
     ];
-    SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null) }) => {
+    SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null) }) => {
       const mediaQueryLg = config.media.md;
       const isMobile = (0, import_react_use5.useMedia)(mediaQueryLg);
-      const [showSetting, setShowSetting] = (0, import_react44.useState)(
+      const [showSetting, setShowSetting] = (0, import_react45.useState)(
         () => settingsList.reduce((obj, { tabName }) => __spreadProps(__spreadValues({}, obj), { [tabName]: true }), {})
       );
-      const hideSettingByTabName = (0, import_react44.useCallback)(
+      const hideSettingByTabName = (0, import_react45.useCallback)(
         (key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
         [setShowSetting]
       );
-      (0, import_react44.useEffect)(() => {
+      (0, import_react45.useEffect)(() => {
         if (screenType === "hls_live_streaming") {
           hideSettingByTabName("layout")(true);
         }
       }, [screenType, hideSettingByTabName]);
-      const [selection, setSelection] = (0, import_react44.useState)(() => {
+      const [selection, setSelection] = (0, import_react45.useState)(() => {
         var _a8;
         return (_a8 = Object.keys(showSetting).find((key) => showSetting[key])) != null ? _a8 : "";
       });
-      const resetSelection = (0, import_react44.useCallback)(() => {
+      const resetSelection = (0, import_react45.useCallback)(() => {
         setSelection("");
       }, []);
-      (0, import_react44.useEffect)(() => {
+      (0, import_react45.useEffect)(() => {
         var _a8;
         if (isMobile) {
           setSelection("");
@@ -11059,7 +11126,7 @@ var init_SettingsModal = __esm({
           setSelection(firstNotHiddenTabName);
         }
       }, [isMobile, showSetting]);
-      return isMobile ? /* @__PURE__ */ import_react44.default.createElement(
+      return isMobile ? /* @__PURE__ */ import_react45.default.createElement(
         MobileSettingModal,
         {
           open,
@@ -11071,7 +11138,7 @@ var init_SettingsModal = __esm({
           resetSelection
         },
         children
-      ) : /* @__PURE__ */ import_react44.default.createElement(
+      ) : /* @__PURE__ */ import_react45.default.createElement(
         DesktopSettingModal,
         {
           open,
@@ -11093,9 +11160,9 @@ var init_SettingsModal = __esm({
       showSetting,
       hideSettingByTabName,
       resetSelection,
-      children = /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null)
+      children = /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null)
     }) => {
-      return /* @__PURE__ */ import_react44.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react44.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react45.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react45.default.createElement(
         Sheet.Content,
         {
           css: {
@@ -11103,9 +11170,9 @@ var init_SettingsModal = __esm({
             overflowY: "auto"
           }
         },
-        /* @__PURE__ */ import_react44.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react44.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ import_react44.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ import_react44.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ import_react44.default.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ import_react44.default.createElement(import_react_icons12.ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ import_react44.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react44.default.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react44.default.createElement(import_react_icons12.CrossIcon, null))))),
-        /* @__PURE__ */ import_react44.default.createElement(HorizontalDivider, null),
-        !selection ? /* @__PURE__ */ import_react44.default.createElement(
+        /* @__PURE__ */ import_react45.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react45.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ import_react45.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ import_react45.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ import_react45.default.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ import_react45.default.createElement(import_react_icons12.ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ import_react45.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react45.default.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react45.default.createElement(import_react_icons12.CrossIcon, null))))),
+        /* @__PURE__ */ import_react45.default.createElement(HorizontalDivider, null),
+        !selection ? /* @__PURE__ */ import_react45.default.createElement(
           Flex,
           {
             direction: "column",
@@ -11116,7 +11183,7 @@ var init_SettingsModal = __esm({
             }
           },
           settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon4, tabName, title }) => {
-            return /* @__PURE__ */ import_react44.default.createElement(
+            return /* @__PURE__ */ import_react45.default.createElement(
               Box,
               {
                 key: tabName,
@@ -11146,18 +11213,18 @@ var init_SettingsModal = __esm({
                   borderBottom: "1px solid $border_default"
                 }
               },
-              /* @__PURE__ */ import_react44.default.createElement(Icon4, null),
+              /* @__PURE__ */ import_react45.default.createElement(Icon4, null),
               title
             );
           })
-        ) : /* @__PURE__ */ import_react44.default.createElement(
+        ) : /* @__PURE__ */ import_react45.default.createElement(
           Box,
           {
             direction: "column",
             css: { overflowY: "scroll", px: "$8", py: "$10", maxHeight: "70vh", overflowX: "hidden" }
           },
           settingsList.filter(({ tabName }) => showSetting[tabName] && selection === tabName).map(({ content: Content11, title, tabName }) => {
-            return /* @__PURE__ */ import_react44.default.createElement(Content11, { key: title, setHide: hideSettingByTabName(tabName) });
+            return /* @__PURE__ */ import_react45.default.createElement(Content11, { key: title, setHide: hideSettingByTabName(tabName) });
           })
         )
       ));
@@ -11170,9 +11237,9 @@ var init_SettingsModal = __esm({
       showSetting,
       hideSettingByTabName,
       resetSelection,
-      children = /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null)
+      children = /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null)
     }) => {
-      return /* @__PURE__ */ import_react44.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react44.default.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react44.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react44.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react45.default.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react45.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react45.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react45.default.createElement(
         Dialog.Content,
         {
           css: {
@@ -11182,7 +11249,7 @@ var init_SettingsModal = __esm({
             r: "$4"
           }
         },
-        /* @__PURE__ */ import_react44.default.createElement(
+        /* @__PURE__ */ import_react45.default.createElement(
           Tabs.Root,
           {
             value: selection,
@@ -11190,7 +11257,7 @@ var init_SettingsModal = __esm({
             onValueChange: setSelection,
             css: { size: "100%", position: "relative" }
           },
-          /* @__PURE__ */ import_react44.default.createElement(
+          /* @__PURE__ */ import_react45.default.createElement(
             Tabs.List,
             {
               css: {
@@ -11202,12 +11269,12 @@ var init_SettingsModal = __esm({
                 borderBottomLeftRadius: "$4"
               }
             },
-            /* @__PURE__ */ import_react44.default.createElement(Text, { variant: "h5" }, "Settings "),
-            /* @__PURE__ */ import_react44.default.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon4, tabName, title }) => {
-              return /* @__PURE__ */ import_react44.default.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ import_react44.default.createElement(Icon4, null), title);
+            /* @__PURE__ */ import_react45.default.createElement(Text, { variant: "h5" }, "Settings "),
+            /* @__PURE__ */ import_react45.default.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon4, tabName, title }) => {
+              return /* @__PURE__ */ import_react45.default.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ import_react45.default.createElement(Icon4, null), title);
             }))
           ),
-          selection && /* @__PURE__ */ import_react44.default.createElement(
+          selection && /* @__PURE__ */ import_react45.default.createElement(
             Flex,
             {
               direction: "column",
@@ -11218,15 +11285,15 @@ var init_SettingsModal = __esm({
               }
             },
             settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content11, title, tabName }) => {
-              return /* @__PURE__ */ import_react44.default.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ import_react44.default.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ import_react44.default.createElement(Content11, { setHide: hideSettingByTabName(tabName) }));
+              return /* @__PURE__ */ import_react45.default.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ import_react45.default.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ import_react45.default.createElement(Content11, { setHide: hideSettingByTabName(tabName) }));
             })
           )
         ),
-        /* @__PURE__ */ import_react44.default.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ import_react44.default.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react44.default.createElement(import_react_icons12.CrossIcon, null)))
+        /* @__PURE__ */ import_react45.default.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ import_react45.default.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react45.default.createElement(import_react_icons12.CrossIcon, null)))
       )));
     };
     SettingsContentHeader = ({ children, isMobile, onBack }) => {
-      return /* @__PURE__ */ import_react44.default.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ import_react44.default.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ import_react44.default.createElement(import_react_icons12.ChevronLeftIcon, null)), children);
+      return /* @__PURE__ */ import_react45.default.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ import_react45.default.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ import_react45.default.createElement(import_react_icons12.ChevronLeftIcon, null)), children);
     };
     SettingsModal_default = SettingsModal;
   }
@@ -11283,18 +11350,20 @@ var init_ToastManager = __esm({
 });
 
 // src/Prebuilt/components/AudioVideoToggle.tsx
-var import_react45, import_hms_noise_cancellation, import_react_sdk14, import_react_icons13, Options, OptionLabel, plugin, NoiseCancellation, AudioOutputLabel, AudioSettings, AudioVideoToggle;
+var import_react46, import_hms_noise_cancellation, import_react_sdk14, import_react_icons13, krispPlugin, Options, OptionLabel, useNoiseCancellationWithPlugin, NoiseCancellation, AudioOutputLabel, AudioSettings, AudioVideoToggle;
 var init_AudioVideoToggle = __esm({
   "src/Prebuilt/components/AudioVideoToggle.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react45 = __toESM(require("react"));
+    import_react46 = __toESM(require("react"));
     import_hms_noise_cancellation = require("@100mslive/hms-noise-cancellation");
     import_react_sdk14 = require("@100mslive/react-sdk");
     import_react_icons13 = require("@100mslive/react-icons");
     init_IconButtonWithOptions();
+    init_ActionTile();
     init_SettingsModal();
     init_ToastManager();
+    init_AudioLevel2();
     init_Dropdown2();
     init_Layout();
     init_Switch2();
@@ -11305,12 +11374,13 @@ var init_AudioVideoToggle = __esm({
     init_useUISettings();
     init_useAudioOutputTest();
     init_constants();
+    krispPlugin = new import_hms_noise_cancellation.HMSKrispPlugin();
     Options = ({
       options,
       selectedDeviceId,
       onClick
     }) => {
-      return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, options == null ? void 0 : options.map((option) => /* @__PURE__ */ import_react45.default.createElement(
+      return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, options == null ? void 0 : options.map((option) => /* @__PURE__ */ import_react46.default.createElement(
         Dropdown.Item,
         {
           key: option.label,
@@ -11327,11 +11397,11 @@ var init_AudioVideoToggle = __esm({
           }
         },
         option.label,
-        selectedDeviceId === option.deviceId ? /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.CheckIcon, { width: 16, height: 16 }) : null
+        selectedDeviceId === option.deviceId ? /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.CheckIcon, { width: 16, height: 16 }) : null
       )));
     };
     OptionLabel = ({ children, icon }) => {
-      return /* @__PURE__ */ import_react45.default.createElement(
+      return /* @__PURE__ */ import_react46.default.createElement(
         Dropdown.Label,
         {
           css: {
@@ -11344,35 +11414,78 @@ var init_AudioVideoToggle = __esm({
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ import_react45.default.createElement(Flex, { css: { alignItems: "center", justifyContent: "center", "& svg": { size: "$8" } } }, icon),
+        /* @__PURE__ */ import_react46.default.createElement(Flex, { css: { alignItems: "center", justifyContent: "center", "& svg": { size: "$8" } } }, icon),
         " ",
         children
       );
     };
-    plugin = new import_hms_noise_cancellation.HMSKrispPlugin();
-    NoiseCancellation = () => {
-      const localPeerAudioTrackID = (0, import_react_sdk14.useHMSStore)(import_react_sdk14.selectLocalAudioTrackID);
-      const [enabled, setEnabled] = useSetNoiseCancellationEnabled();
-      const isPluginAdded = (0, import_react_sdk14.useHMSStore)((0, import_react_sdk14.selectIsLocalAudioPluginPresent)(plugin.getName()));
-      const [inProgress, setInProgress] = (0, import_react45.useState)(false);
+    useNoiseCancellationWithPlugin = () => {
       const actions = (0, import_react_sdk14.useHMSActions)();
+      const [inProgress, setInProgress] = (0, import_react46.useState)(false);
+      const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
+      const setNoiseCancellationWithPlugin = (enabled) => __async(void 0, null, function* () {
+        if (inProgress) {
+          return;
+        }
+        setInProgress(true);
+        if (enabled) {
+          yield actions.addPluginToAudioTrack(krispPlugin);
+        } else {
+          yield actions.removePluginFromAudioTrack(krispPlugin);
+        }
+        setNoiseCancellationEnabled(enabled);
+        setInProgress(false);
+      });
+      return {
+        setNoiseCancellationWithPlugin,
+        inProgress
+      };
+    };
+    NoiseCancellation = ({
+      actionTile,
+      iconOnly,
+      setOpenOptionsSheet
+    }) => {
+      const localPeerAudioTrackID = (0, import_react_sdk14.useHMSStore)(import_react_sdk14.selectLocalAudioTrackID);
+      const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
+      const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
       const room = (0, import_react_sdk14.useHMSStore)(import_react_sdk14.selectRoom);
-      (0, import_react45.useEffect)(() => {
-        (() => __async(void 0, null, function* () {
-          setInProgress(true);
-          if (enabled && !isPluginAdded) {
-            yield actions.addPluginToAudioTrack(plugin);
-          }
-          if (!enabled && isPluginAdded) {
-            yield actions.removePluginFromAudioTrack(plugin);
-          }
-          setInProgress(false);
-        }))();
-      }, [actions, enabled, isPluginAdded]);
-      if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
+      const isKrispPluginAdded = (0, import_react_sdk14.useHMSStore)((0, import_react_sdk14.selectIsLocalAudioPluginPresent)(krispPlugin.getName()));
+      if (!krispPlugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
         return null;
       }
-      return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }), /* @__PURE__ */ import_react45.default.createElement(
+      if (actionTile) {
+        return /* @__PURE__ */ import_react46.default.createElement(
+          ActionTile.Root,
+          {
+            active: isNoiseCancellationEnabled && isKrispPluginAdded,
+            disable: inProgress,
+            onClick: () => __async(void 0, null, function* () {
+              yield setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+              setOpenOptionsSheet == null ? void 0 : setOpenOptionsSheet(false);
+            })
+          },
+          /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.AudioLevelIcon, null),
+          /* @__PURE__ */ import_react46.default.createElement(ActionTile.Title, null, isNoiseCancellationEnabled ? "Noise Reduced" : "Reduce Noise")
+        );
+      }
+      if (iconOnly) {
+        return /* @__PURE__ */ import_react46.default.createElement(Tooltip, { title: isNoiseCancellationEnabled ? "Noise Reduced" : "Reduce Noise" }, /* @__PURE__ */ import_react46.default.createElement(
+          IconButton_default,
+          {
+            onClick: () => __async(void 0, null, function* () {
+              yield setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+            }),
+            disabled: inProgress,
+            css: {
+              bg: isNoiseCancellationEnabled && isKrispPluginAdded ? "$surface_brighter" : "$background_dim",
+              borderColor: isNoiseCancellationEnabled && isKrispPluginAdded ? "$border_brighter" : "$border_bright"
+            }
+          },
+          /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.AudioLevelIcon, null)
+        ));
+      }
+      return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }), /* @__PURE__ */ import_react46.default.createElement(
         Dropdown.Item,
         {
           css: {
@@ -11381,29 +11494,29 @@ var init_AudioVideoToggle = __esm({
             fontSize: "$xs",
             justifyContent: "space-between"
           },
-          onClick: (e) => {
+          onClick: (e) => __async(void 0, null, function* () {
             e.preventDefault();
-            setEnabled(!enabled);
-          }
+            yield setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+          })
         },
-        /* @__PURE__ */ import_react45.default.createElement(Text, { css: { display: "flex", alignItems: "center", gap: "$2", fontSize: "$xs", "& svg": { size: "$8" } } }, /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.AudioLevelIcon, null), "Reduce Noise"),
-        /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(Text, { css: { display: "flex", alignItems: "center", gap: "$2", fontSize: "$xs", "& svg": { size: "$8" } } }, /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.AudioLevelIcon, null), "Reduce Noise"),
+        /* @__PURE__ */ import_react46.default.createElement(
           Switch,
           {
             id: "noise_cancellation",
-            checked: enabled && isPluginAdded,
+            checked: isNoiseCancellationEnabled && isKrispPluginAdded,
             disabled: inProgress,
             onClick: (e) => e.stopPropagation(),
-            onCheckedChange: (value) => {
-              setEnabled(value);
-            }
+            onCheckedChange: (value) => __async(void 0, null, function* () {
+              yield setNoiseCancellationWithPlugin(value);
+            })
           }
         )
-      ), /* @__PURE__ */ import_react45.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }));
+      ), /* @__PURE__ */ import_react46.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }));
     };
     AudioOutputLabel = ({ deviceId }) => {
       const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId });
-      return /* @__PURE__ */ import_react45.default.createElement(OptionLabel, { icon: /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.SpeakerIcon, null) }, /* @__PURE__ */ import_react45.default.createElement(Box, { css: { flex: "1 1 0" } }, "Speakers"), /* @__PURE__ */ import_react45.default.createElement(
+      return /* @__PURE__ */ import_react46.default.createElement(OptionLabel, { icon: /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.SpeakerIcon, null) }, /* @__PURE__ */ import_react46.default.createElement(Box, { css: { flex: "1 1 0" } }, "Speakers"), /* @__PURE__ */ import_react46.default.createElement(
         Text,
         {
           variant: "xs",
@@ -11416,7 +11529,7 @@ var init_AudioVideoToggle = __esm({
             yield (_a8 = audioRef.current) == null ? void 0 : _a8.play();
           })
         },
-        /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(
           "audio",
           {
             ref: audioRef,
@@ -11430,7 +11543,7 @@ var init_AudioVideoToggle = __esm({
       ));
     };
     AudioSettings = ({ onClick }) => {
-      return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(
+      return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(
         Dropdown.Item,
         {
           css: {
@@ -11444,13 +11557,14 @@ var init_AudioVideoToggle = __esm({
           },
           onClick
         },
-        /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.SettingsIcon, null),
+        /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.SettingsIcon, null),
         " Audio Settings"
       ));
     };
     AudioVideoToggle = ({ hideOptions = false }) => {
       const { allDevices, selectedDeviceIDs, updateDevice } = (0, import_react_sdk14.useDevices)();
       const { videoInput, audioInput, audioOutput } = allDevices;
+      const localPeer = (0, import_react_sdk14.useHMSStore)(import_react_sdk14.selectLocalPeer);
       const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = (0, import_react_sdk14.useAVToggle)();
       const actions = (0, import_react_sdk14.useHMSActions)();
       const videoTrackId = (0, import_react_sdk14.useHMSStore)(import_react_sdk14.selectLocalVideoTrackID);
@@ -11460,40 +11574,40 @@ var init_AudioVideoToggle = __esm({
       const hasVideoDevices = Number(videoInput == null ? void 0 : videoInput.length) > 0;
       const shouldShowAudioOutput = "setSinkId" in HTMLMediaElement.prototype && Number(audioOutput == null ? void 0 : audioOutput.length) > 0;
       const { screenType } = useRoomLayoutConferencingScreen();
-      const [showSettings, setShowSettings] = (0, import_react45.useState)(false);
-      const isPluginAdded = (0, import_react_sdk14.useHMSStore)((0, import_react_sdk14.selectIsLocalAudioPluginPresent)(plugin.getName()));
+      const [showSettings, setShowSettings] = (0, import_react46.useState)(false);
+      const isKrispPluginAdded = (0, import_react_sdk14.useHMSStore)((0, import_react_sdk14.selectIsLocalAudioPluginPresent)(krispPlugin.getName()));
       const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
-      (0, import_react45.useEffect)(() => {
+      const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
+      const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
+      (0, import_react46.useEffect)(() => {
         (() => __async(void 0, null, function* () {
-          if (isNoiseCancellationEnabled && !isPluginAdded) {
-            yield actions.addPluginToAudioTrack(plugin);
-          }
-          if (isNoiseCancellationEnabled && isPluginAdded) {
+          if (isNoiseCancellationEnabled && !isKrispPluginAdded && !inProgress && (localPeer == null ? void 0 : localPeer.audioTrack)) {
+            yield setNoiseCancellationWithPlugin(true);
             ToastManager.addToast({
               title: `Noise Reduction Enabled`,
               variant: "standard",
               duration: 2e3,
-              icon: /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.AudioLevelIcon, null)
+              icon: /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.AudioLevelIcon, null)
             });
           }
         }))();
-      }, [actions, isNoiseCancellationEnabled, isPluginAdded]);
+      }, [isNoiseCancellationEnabled, localPeer == null ? void 0 : localPeer.audioTrack, inProgress]);
       if (!toggleAudio && !toggleVideo) {
         return null;
       }
-      return /* @__PURE__ */ import_react45.default.createElement(import_react45.Fragment, null, toggleAudio ? /* @__PURE__ */ import_react45.default.createElement(
+      return /* @__PURE__ */ import_react46.default.createElement(import_react46.Fragment, null, toggleAudio ? /* @__PURE__ */ import_react46.default.createElement(
         IconButtonWithOptions,
         {
           disabled: !toggleAudio,
           hideOptions: hideOptions || !hasAudioDevices,
           onDisabledClick: toggleAudio,
           tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
-          icon: !isLocalAudioEnabled ? /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.MicOnIcon, { "data-testid": "audio_on_btn" }),
+          icon: !isLocalAudioEnabled ? /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.MicOnIcon, { "data-testid": "audio_on_btn" }),
           active: isLocalAudioEnabled,
           onClick: toggleAudio,
           key: "toggleAudio"
         },
-        /* @__PURE__ */ import_react45.default.createElement(Dropdown.Group, null, /* @__PURE__ */ import_react45.default.createElement(OptionLabel, { icon: /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.MicOnIcon, null) }, !shouldShowAudioOutput ? "Audio" : "Microphone"), /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(Dropdown.Group, null, /* @__PURE__ */ import_react46.default.createElement(OptionLabel, { icon: /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.MicOnIcon, null) }, /* @__PURE__ */ import_react46.default.createElement(Box, { css: { flex: "1 1 0" } }, !shouldShowAudioOutput ? "Audio" : "Microphone"), !showMuteIcon && /* @__PURE__ */ import_react46.default.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })), /* @__PURE__ */ import_react46.default.createElement(
           Options,
           {
             options: audioInput,
@@ -11501,8 +11615,8 @@ var init_AudioVideoToggle = __esm({
             onClick: (deviceId) => updateDevice({ deviceId, deviceType: import_react_sdk14.DeviceType.audioInput })
           }
         )),
-        /* @__PURE__ */ import_react45.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
-        shouldShowAudioOutput && /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(AudioOutputLabel, { deviceId: selectedDeviceIDs.audioOutput || "" }), /* @__PURE__ */ import_react45.default.createElement(Dropdown.Group, null, /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
+        shouldShowAudioOutput && /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(AudioOutputLabel, { deviceId: selectedDeviceIDs.audioOutput || "" }), /* @__PURE__ */ import_react46.default.createElement(Dropdown.Group, null, /* @__PURE__ */ import_react46.default.createElement(
           Options,
           {
             options: audioOutput,
@@ -11510,21 +11624,21 @@ var init_AudioVideoToggle = __esm({
             onClick: (deviceId) => updateDevice({ deviceId, deviceType: import_react_sdk14.DeviceType.audioOutput })
           }
         ))),
-        /* @__PURE__ */ import_react45.default.createElement(NoiseCancellation, null),
-        /* @__PURE__ */ import_react45.default.createElement(AudioSettings, { onClick: () => setShowSettings(true) })
-      ) : null, toggleVideo ? /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(NoiseCancellation, null),
+        /* @__PURE__ */ import_react46.default.createElement(AudioSettings, { onClick: () => setShowSettings(true) })
+      ) : null, toggleVideo ? /* @__PURE__ */ import_react46.default.createElement(
         IconButtonWithOptions,
         {
           disabled: !toggleVideo,
           hideOptions: hideOptions || !hasVideoDevices,
           onDisabledClick: toggleVideo,
           tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
-          icon: !isLocalVideoEnabled ? /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.VideoOnIcon, { "data-testid": "video_on_btn" }),
+          icon: !isLocalVideoEnabled ? /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.VideoOnIcon, { "data-testid": "video_on_btn" }),
           key: "toggleVideo",
           active: isLocalVideoEnabled,
           onClick: toggleVideo
         },
-        /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(
           Options,
           {
             options: videoInput,
@@ -11532,7 +11646,7 @@ var init_AudioVideoToggle = __esm({
             onClick: (deviceId) => updateDevice({ deviceId, deviceType: import_react_sdk14.DeviceType.videoInput })
           }
         )
-      ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === import_react_sdk14.HMSRoomState.Preview ? /* @__PURE__ */ import_react45.default.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ import_react45.default.createElement(
+      ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === import_react_sdk14.HMSRoomState.Preview ? /* @__PURE__ */ import_react46.default.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ import_react46.default.createElement(
         IconButton_default,
         {
           onClick: () => __async(void 0, null, function* () {
@@ -11546,19 +11660,19 @@ var init_AudioVideoToggle = __esm({
             }
           })
         },
-        /* @__PURE__ */ import_react45.default.createElement(import_react_icons13.CameraFlipIcon, null)
-      )) : null, showSettings && /* @__PURE__ */ import_react45.default.createElement(SettingsModal_default, { open: showSettings, onOpenChange: () => setShowSettings(false), screenType }));
+        /* @__PURE__ */ import_react46.default.createElement(import_react_icons13.CameraFlipIcon, null)
+      )) : null, showSettings && /* @__PURE__ */ import_react46.default.createElement(SettingsModal_default, { open: showSettings, onOpenChange: () => setShowSettings(false), screenType }));
     };
   }
 });
 
 // src/Prebuilt/components/CaptionIcon.tsx
-var import_react46, import_react_sdk15, import_react_icons14, CaptionIcon;
+var import_react47, import_react_sdk15, import_react_icons14, CaptionIcon;
 var init_CaptionIcon = __esm({
   "src/Prebuilt/components/CaptionIcon.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react46 = __toESM(require("react"));
+    import_react47 = __toESM(require("react"));
     import_react_sdk15 = require("@100mslive/react-sdk");
     import_react_icons14 = require("@100mslive/react-icons");
     init_Tooltip2();
@@ -11573,18 +11687,18 @@ var init_CaptionIcon = __esm({
       if (!isCaptionPresent) {
         return null;
       }
-      return /* @__PURE__ */ import_react46.default.createElement(Tooltip, { title: isCaption ? "Disable caption" : "Enable caption" }, /* @__PURE__ */ import_react46.default.createElement(IconButton_default, { "data-testid": "caption_btn", onClick }, isCaption ? /* @__PURE__ */ import_react46.default.createElement(import_react_icons14.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react46.default.createElement(import_react_icons14.OpenCaptionIcon, { width: "20", height: "20px" })));
+      return /* @__PURE__ */ import_react47.default.createElement(Tooltip, { title: isCaption ? "Hide closed captions" : "Show closed captions" }, /* @__PURE__ */ import_react47.default.createElement(IconButton_default, { "data-testid": "caption_btn", onClick }, isCaption ? /* @__PURE__ */ import_react47.default.createElement(import_react_icons14.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react47.default.createElement(import_react_icons14.OpenCaptionIcon, { width: "20", height: "20px" })));
     };
   }
 });
 
 // src/Prebuilt/components/Footer/EmojiCard.jsx
-var import_react47, emojiReactionList, EmojiCard, EmojiContainer;
+var import_react48, emojiReactionList, EmojiCard, EmojiContainer;
 var init_EmojiCard = __esm({
   "src/Prebuilt/components/Footer/EmojiCard.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react47 = __toESM(require("react"));
+    import_react48 = __toESM(require("react"));
     init_Layout();
     init_Theme();
     emojiReactionList = [
@@ -11592,7 +11706,7 @@ var init_EmojiCard = __esm({
       [{ emojiId: "tada" }, { emojiId: "heart_eyes" }, { emojiId: "joy" }, { emojiId: "open_mouth" }, { emojiId: "sob" }]
     ];
     EmojiCard = ({ sendReaction }) => {
-      return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ import_react47.default.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ import_react47.default.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ import_react47.default.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
+      return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ import_react48.default.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ import_react48.default.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ import_react48.default.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
     };
     EmojiContainer = styled("span", {
       position: "relative",
@@ -11610,17 +11724,17 @@ var init_EmojiCard = __esm({
 });
 
 // src/Prebuilt/components/hooks/useDropdownList.ts
-var import_react48, useDropdownList;
+var import_react49, useDropdownList;
 var init_useDropdownList = __esm({
   "src/Prebuilt/components/hooks/useDropdownList.ts"() {
     "use strict";
     init_define_process_env();
-    import_react48 = require("react");
+    import_react49 = require("react");
     init_useUISettings();
     init_constants();
     useDropdownList = ({ name, open }) => {
       const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
-      (0, import_react48.useEffect)(() => {
+      (0, import_react49.useEffect)(() => {
         if (open) {
           if (!dropdownList.includes(name)) {
             setDropdownList([...dropdownList, name]);
@@ -11660,7 +11774,7 @@ function useWaitingRoomInfo() {
   const peersByRoles = (0, import_react_sdk16.useHMSStore)((0, import_react_sdk16.selectPeersByRoles)((localPeerRole == null ? void 0 : localPeerRole.subscribeParams.subscribeToRoles) || []));
   const isNotAllowedToPublish = !(video || audio || screen && isScreenShareAllowed);
   const isScreenOnlyPublishParams = screen && !(video || audio);
-  const hasSubscribedRolePublishing = (0, import_react49.useMemo)(() => {
+  const hasSubscribedRolePublishing = (0, import_react50.useMemo)(() => {
     return peersByRoles.some((peer) => {
       var _a8;
       if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
@@ -11675,12 +11789,12 @@ function useWaitingRoomInfo() {
     hasSubscribedRolePublishing
   };
 }
-var import_react49, import_react_use6, import_join_form2, import_react_sdk16, useFilteredRoles, useDefaultChatSelection, useShowStreamingUI, useParticipants, useIsLandscape, useLandscapeHLSStream, useMobileHLSStream, useKeyboardHandler, useRecordingHandler;
+var import_react50, import_react_use6, import_join_form2, import_react_sdk16, useFilteredRoles, useDefaultChatSelection, useShowStreamingUI, useParticipants, useIsLandscape, useLandscapeHLSStream, useMobileHLSStream, useKeyboardHandler, useRecordingHandler;
 var init_hooks = __esm({
   "src/Prebuilt/common/hooks.ts"() {
     "use strict";
     init_define_process_env();
-    import_react49 = require("react");
+    import_react50 = require("react");
     import_react_use6 = require("react-use");
     import_join_form2 = require("@100mslive/types-prebuilt/elements/join_form");
     import_react_sdk16 = require("@100mslive/react-sdk");
@@ -11752,7 +11866,7 @@ var init_hooks = __esm({
       return isMobile && screenType === "hls_live_streaming";
     };
     useKeyboardHandler = (isPaused, hlsPlayer2) => {
-      const handleKeyEvent = (0, import_react49.useCallback)(
+      const handleKeyEvent = (0, import_react50.useCallback)(
         (event) => __async(void 0, null, function* () {
           switch (event.key) {
             case " ":
@@ -11777,14 +11891,14 @@ var init_hooks = __esm({
     useRecordingHandler = () => {
       const hmsActions = (0, import_react_sdk16.useHMSActions)();
       const recordingState = (0, import_react_sdk16.useHMSStore)(import_react_sdk16.selectRecordingState);
-      const [isRecordingLoading, setIsRecordingLoading] = (0, import_react49.useState)(false);
+      const [isRecordingLoading, setIsRecordingLoading] = (0, import_react50.useState)(false);
       const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
-      (0, import_react49.useEffect)(() => {
+      (0, import_react50.useEffect)(() => {
         if (recordingState.browser.error && recordingStarted) {
           setRecordingState(false);
         }
       }, [recordingStarted, recordingState.browser.error, setRecordingState]);
-      const startRecording = (0, import_react49.useCallback)(
+      const startRecording = (0, import_react50.useCallback)(
         (resolution = null) => __async(void 0, null, function* () {
           try {
             setRecordingState(true);
@@ -11822,12 +11936,12 @@ var init_hooks = __esm({
 });
 
 // src/Prebuilt/components/EmojiReaction.jsx
-var import_react50, import_react_use7, import_apple, import_emoji_mart, import_react_sdk17, import_react_icons15, EmojiReaction;
+var import_react51, import_react_use7, import_apple, import_emoji_mart, import_react_sdk17, import_react_icons15, EmojiReaction;
 var init_EmojiReaction = __esm({
   "src/Prebuilt/components/EmojiReaction.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react50 = __toESM(require("react"));
+    import_react51 = __toESM(require("react"));
     import_react_use7 = require("react-use");
     import_apple = __toESM(require("@emoji-mart/data/sets/14/apple.json"));
     import_emoji_mart = require("emoji-mart");
@@ -11845,7 +11959,7 @@ var init_EmojiReaction = __esm({
     init_constants();
     (0, import_emoji_mart.init)({ data: import_apple.default });
     EmojiReaction = ({ showCard = false }) => {
-      const [open, setOpen] = (0, import_react50.useState)(false);
+      const [open, setOpen] = (0, import_react51.useState)(false);
       const isConnected = (0, import_react_sdk17.useHMSStore)(import_react_sdk17.selectIsConnectedToRoom);
       const { elements } = useRoomLayoutConferencingScreen();
       useDropdownList({ open, name: "EmojiReaction" });
@@ -11872,34 +11986,34 @@ var init_EmojiReaction = __esm({
         return null;
       }
       if (showCard) {
-        return /* @__PURE__ */ import_react50.default.createElement(EmojiCard, { sendReaction });
+        return /* @__PURE__ */ import_react51.default.createElement(EmojiCard, { sendReaction });
       }
-      return /* @__PURE__ */ import_react50.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react50.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ import_react50.default.createElement(
+      return /* @__PURE__ */ import_react51.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react51.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ import_react51.default.createElement(
         IconButton_default,
         {
           css: isMobile || isLandscape ? { bg: "$surface_default", r: "$round", border: "1px solid $border_bright" } : {}
         },
-        /* @__PURE__ */ import_react50.default.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ import_react50.default.createElement(Box, null, /* @__PURE__ */ import_react50.default.createElement(import_react_icons15.EmojiIcon, null)))
-      )), /* @__PURE__ */ import_react50.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ import_react51.default.createElement(Box, null, /* @__PURE__ */ import_react51.default.createElement(import_react_icons15.EmojiIcon, null)))
+      )), /* @__PURE__ */ import_react51.default.createElement(
         Dropdown.Content,
         {
           sideOffset: 5,
           align: isMobileHLSStream || isLandscapeStream ? "end" : "center",
           css: { p: "$8", bg: "$surface_default" }
         },
-        /* @__PURE__ */ import_react50.default.createElement(EmojiCard, { sendReaction })
+        /* @__PURE__ */ import_react51.default.createElement(EmojiCard, { sendReaction })
       ));
     };
   }
 });
 
 // src/Prebuilt/components/Leave/EndSessionContent.tsx
-var import_react51, import_react_icons16, EndSessionContent;
+var import_react52, import_react_icons16, EndSessionContent;
 var init_EndSessionContent = __esm({
   "src/Prebuilt/components/Leave/EndSessionContent.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react51 = __toESM(require("react"));
+    import_react52 = __toESM(require("react"));
     import_react_icons16 = require("@100mslive/react-icons");
     init_Button2();
     init_Layout();
@@ -11910,7 +12024,7 @@ var init_EndSessionContent = __esm({
       isModal = false,
       isStreamingOn = false
     }) => {
-      return /* @__PURE__ */ import_react51.default.createElement(Box, null, /* @__PURE__ */ import_react51.default.createElement(
+      return /* @__PURE__ */ import_react52.default.createElement(Box, null, /* @__PURE__ */ import_react52.default.createElement(
         Flex,
         {
           css: {
@@ -11919,10 +12033,10 @@ var init_EndSessionContent = __esm({
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ import_react51.default.createElement(import_react_icons16.AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
-        /* @__PURE__ */ import_react51.default.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "End ", isStreamingOn ? "Stream" : "Session"),
-        isModal ? null : /* @__PURE__ */ import_react51.default.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowEndStreamAlert(false) }, /* @__PURE__ */ import_react51.default.createElement(import_react_icons16.CrossIcon, null))
-      ), /* @__PURE__ */ import_react51.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The ", isStreamingOn ? "stream" : "session", " will end for everyone. You can't undo this action."), /* @__PURE__ */ import_react51.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react51.default.createElement(
+        /* @__PURE__ */ import_react52.default.createElement(import_react_icons16.AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
+        /* @__PURE__ */ import_react52.default.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "End ", isStreamingOn ? "Stream" : "Session"),
+        isModal ? null : /* @__PURE__ */ import_react52.default.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowEndStreamAlert(false) }, /* @__PURE__ */ import_react52.default.createElement(import_react_icons16.CrossIcon, null))
+      ), /* @__PURE__ */ import_react52.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The ", isStreamingOn ? "stream" : "session", " will end for everyone. You can't undo this action."), /* @__PURE__ */ import_react52.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react52.default.createElement(
         Button,
         {
           outlined: true,
@@ -11931,7 +12045,7 @@ var init_EndSessionContent = __esm({
           onClick: () => setShowEndStreamAlert(false)
         },
         "Cancel"
-      ), /* @__PURE__ */ import_react51.default.createElement(
+      ), /* @__PURE__ */ import_react52.default.createElement(
         Button,
         {
           variant: "danger",
@@ -11984,12 +12098,12 @@ var init_LeaveAtoms = __esm({
 });
 
 // src/Prebuilt/components/Leave/LeaveCard.tsx
-var import_react52, LeaveCard;
+var import_react53, LeaveCard;
 var init_LeaveCard = __esm({
   "src/Prebuilt/components/Leave/LeaveCard.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react52 = __toESM(require("react"));
+    import_react53 = __toESM(require("react"));
     init_Layout();
     init_Text2();
     LeaveCard = ({
@@ -12001,18 +12115,18 @@ var init_LeaveCard = __esm({
       titleColor,
       css: css2 = {}
     }) => {
-      return /* @__PURE__ */ import_react52.default.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css2), onClick }, /* @__PURE__ */ import_react52.default.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ import_react52.default.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ import_react52.default.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ import_react52.default.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
+      return /* @__PURE__ */ import_react53.default.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css2), onClick }, /* @__PURE__ */ import_react53.default.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ import_react53.default.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ import_react53.default.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ import_react53.default.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
     };
   }
 });
 
 // src/Prebuilt/components/Leave/LeaveSessionContent.tsx
-var import_react53, import_react_icons17, LeaveSessionContent;
+var import_react54, import_react_icons17, LeaveSessionContent;
 var init_LeaveSessionContent = __esm({
   "src/Prebuilt/components/Leave/LeaveSessionContent.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react53 = __toESM(require("react"));
+    import_react54 = __toESM(require("react"));
     import_react_icons17 = require("@100mslive/react-icons");
     init_Button2();
     init_Layout();
@@ -12022,7 +12136,7 @@ var init_LeaveSessionContent = __esm({
       leaveRoom,
       isModal = false
     }) => {
-      return /* @__PURE__ */ import_react53.default.createElement(Box, null, /* @__PURE__ */ import_react53.default.createElement(
+      return /* @__PURE__ */ import_react54.default.createElement(Box, null, /* @__PURE__ */ import_react54.default.createElement(
         Flex,
         {
           css: {
@@ -12031,10 +12145,10 @@ var init_LeaveSessionContent = __esm({
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ import_react53.default.createElement(import_react_icons17.AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
-        /* @__PURE__ */ import_react53.default.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Leave"),
-        isModal ? null : /* @__PURE__ */ import_react53.default.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowLeaveRoomAlert(false) }, /* @__PURE__ */ import_react53.default.createElement(import_react_icons17.CrossIcon, null))
-      ), /* @__PURE__ */ import_react53.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_low", mb: "$8", mt: "$4" } }, "Others will continue after you leave. You can join the session again."), /* @__PURE__ */ import_react53.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react54.default.createElement(import_react_icons17.AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
+        /* @__PURE__ */ import_react54.default.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Leave"),
+        isModal ? null : /* @__PURE__ */ import_react54.default.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowLeaveRoomAlert(false) }, /* @__PURE__ */ import_react54.default.createElement(import_react_icons17.CrossIcon, null))
+      ), /* @__PURE__ */ import_react54.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_low", mb: "$8", mt: "$4" } }, "Others will continue after you leave. You can join the session again."), /* @__PURE__ */ import_react54.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react54.default.createElement(
         Button,
         {
           outlined: true,
@@ -12043,7 +12157,7 @@ var init_LeaveSessionContent = __esm({
           onClick: () => setShowLeaveRoomAlert(false)
         },
         "Cancel"
-      ), /* @__PURE__ */ import_react53.default.createElement(
+      ), /* @__PURE__ */ import_react54.default.createElement(
         Button,
         {
           variant: "danger",
@@ -12061,12 +12175,12 @@ var init_LeaveSessionContent = __esm({
 });
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
-var import_react54, import_react_sdk18, import_react_icons18, DesktopLeaveRoom;
+var import_react55, import_react_sdk18, import_react_icons18, DesktopLeaveRoom;
 var init_DesktopLeaveRoom = __esm({
   "src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react54 = __toESM(require("react"));
+    import_react55 = __toESM(require("react"));
     import_react_sdk18 = require("@100mslive/react-sdk");
     import_react_icons18 = require("@100mslive/react-icons");
     init_Dropdown2();
@@ -12084,9 +12198,9 @@ var init_DesktopLeaveRoom = __esm({
       endRoom,
       container
     }) => {
-      const [open, setOpen] = (0, import_react54.useState)(false);
-      const [showLeaveRoomAlert, setShowLeaveRoomAlert] = (0, import_react54.useState)(false);
-      const [showEndStreamAlert, setShowEndStreamAlert] = (0, import_react54.useState)(false);
+      const [open, setOpen] = (0, import_react55.useState)(false);
+      const [showLeaveRoomAlert, setShowLeaveRoomAlert] = (0, import_react55.useState)(false);
+      const [showEndStreamAlert, setShowEndStreamAlert] = (0, import_react55.useState)(false);
       const isConnected = (0, import_react_sdk18.useHMSStore)(import_react_sdk18.selectIsConnectedToRoom);
       const permissions = (0, import_react_sdk18.useHMSStore)(import_react_sdk18.selectPermissions);
       const { isStreamingOn } = (0, import_react_sdk18.useRecordingStreaming)();
@@ -12096,7 +12210,7 @@ var init_DesktopLeaveRoom = __esm({
       if (!permissions || !isConnected) {
         return null;
       }
-      return /* @__PURE__ */ import_react54.default.createElement(import_react54.Fragment, null, showLeaveOptions ? /* @__PURE__ */ import_react54.default.createElement(Flex, null, /* @__PURE__ */ import_react54.default.createElement(
+      return /* @__PURE__ */ import_react55.default.createElement(import_react55.Fragment, null, showLeaveOptions ? /* @__PURE__ */ import_react55.default.createElement(Flex, null, /* @__PURE__ */ import_react55.default.createElement(
         LeaveIconButton,
         {
           key: "LeaveRoom",
@@ -12107,8 +12221,8 @@ var init_DesktopLeaveRoom = __esm({
           },
           onClick: () => setShowLeaveRoomAlert(true)
         },
-        /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react54.default.createElement(Box, null, /* @__PURE__ */ import_react54.default.createElement(import_react_icons18.ExitIcon, { style: { transform: "rotate(180deg)" } })))
-      ), /* @__PURE__ */ import_react54.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ import_react54.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react55.default.createElement(Box, null, /* @__PURE__ */ import_react55.default.createElement(import_react_icons18.ExitIcon, { style: { transform: "rotate(180deg)" } })))
+      ), /* @__PURE__ */ import_react55.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ import_react55.default.createElement(
         Dropdown.Trigger,
         {
           asChild: true,
@@ -12118,8 +12232,8 @@ var init_DesktopLeaveRoom = __esm({
             }
           }
         },
-        /* @__PURE__ */ import_react54.default.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ import_react54.default.createElement(import_react_icons18.VerticalMenuIcon, null))
-      ), /* @__PURE__ */ import_react54.default.createElement(Dropdown.Portal, { container }, /* @__PURE__ */ import_react54.default.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ import_react54.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ import_react55.default.createElement(import_react_icons18.VerticalMenuIcon, null))
+      ), /* @__PURE__ */ import_react55.default.createElement(Dropdown.Portal, { container }, /* @__PURE__ */ import_react55.default.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ import_react55.default.createElement(
         Dropdown.Item,
         {
           css: {
@@ -12130,21 +12244,21 @@ var init_DesktopLeaveRoom = __esm({
           },
           "data-testid": "just_leave_btn"
         },
-        /* @__PURE__ */ import_react54.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(
           LeaveCard,
           {
             title: showStream ? "Leave Stream" : "Leave Session",
             subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
             bg: "",
             titleColor: "$on_surface_high",
-            icon: /* @__PURE__ */ import_react54.default.createElement(import_react_icons18.ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+            icon: /* @__PURE__ */ import_react55.default.createElement(import_react_icons18.ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
             onClick: () => __async(void 0, null, function* () {
               return yield leaveRoom();
             }),
             css: { p: "$8 $4" }
           }
         )
-      ), /* @__PURE__ */ import_react54.default.createElement(
+      ), /* @__PURE__ */ import_react55.default.createElement(
         Dropdown.Item,
         {
           css: {
@@ -12155,14 +12269,14 @@ var init_DesktopLeaveRoom = __esm({
           },
           "data-testid": "end_room_btn"
         },
-        /* @__PURE__ */ import_react54.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(
           LeaveCard,
           {
             title: showStream ? "End Stream" : "End Session",
             subtitle: `The ${showStream ? "stream" : "session"} will end for everyone. You can't undo this action.`,
             bg: "",
             titleColor: "$alert_error_brighter",
-            icon: /* @__PURE__ */ import_react54.default.createElement(import_react_icons18.StopIcon, { height: 24, width: 24 }),
+            icon: /* @__PURE__ */ import_react55.default.createElement(import_react_icons18.StopIcon, { height: 24, width: 24 }),
             onClick: () => {
               setOpen(false);
               setShowEndStreamAlert(true);
@@ -12170,7 +12284,7 @@ var init_DesktopLeaveRoom = __esm({
             css: { p: "$8 $4" }
           }
         )
-      ))))) : /* @__PURE__ */ import_react54.default.createElement(
+      ))))) : /* @__PURE__ */ import_react55.default.createElement(
         LeaveIconButton,
         {
           onClick: () => {
@@ -12179,8 +12293,8 @@ var init_DesktopLeaveRoom = __esm({
           key: "LeaveRoom",
           "data-testid": "leave_room_btn"
         },
-        /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react54.default.createElement(Box, null, /* @__PURE__ */ import_react54.default.createElement(import_react_icons18.ExitIcon, { style: { transform: "rotate(180deg)" } })))
-      ), /* @__PURE__ */ import_react54.default.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ import_react54.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react54.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react54.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react54.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react55.default.createElement(Box, null, /* @__PURE__ */ import_react55.default.createElement(import_react_icons18.ExitIcon, { style: { transform: "rotate(180deg)" } })))
+      ), /* @__PURE__ */ import_react55.default.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ import_react55.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react55.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react55.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react55.default.createElement(
         EndSessionContent,
         {
           setShowEndStreamAlert,
@@ -12188,18 +12302,18 @@ var init_DesktopLeaveRoom = __esm({
           isStreamingOn,
           isModal: true
         }
-      )))), /* @__PURE__ */ import_react54.default.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ import_react54.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react54.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react54.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react54.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
+      )))), /* @__PURE__ */ import_react55.default.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ import_react55.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react55.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react55.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react55.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
     };
   }
 });
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
-var import_react55, import_react_sdk19, import_react_icons19, MwebLeaveRoom, LeaveButton;
+var import_react56, import_react_sdk19, import_react_icons19, MwebLeaveRoom, LeaveButton;
 var init_MwebLeaveRoom = __esm({
   "src/Prebuilt/components/Leave/MwebLeaveRoom.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react55 = __toESM(require("react"));
+    import_react56 = __toESM(require("react"));
     import_react_sdk19 = require("@100mslive/react-sdk");
     import_react_icons19 = require("@100mslive/react-icons");
     init_IconButton2();
@@ -12218,10 +12332,10 @@ var init_MwebLeaveRoom = __esm({
       endRoom,
       container
     }) => {
-      const [open, setOpen] = (0, import_react55.useState)(false);
+      const [open, setOpen] = (0, import_react56.useState)(false);
       const { screenType } = useRoomLayoutConferencingScreen();
-      const [showLeaveRoomAlert, setShowLeaveRoomAlert] = (0, import_react55.useState)(false);
-      const [showEndStreamAlert, setShowEndStreamAlert] = (0, import_react55.useState)(false);
+      const [showLeaveRoomAlert, setShowLeaveRoomAlert] = (0, import_react56.useState)(false);
+      const [showEndStreamAlert, setShowEndStreamAlert] = (0, import_react56.useState)(false);
       const isConnected = (0, import_react_sdk19.useHMSStore)(import_react_sdk19.selectIsConnectedToRoom);
       const permissions = (0, import_react_sdk19.useHMSStore)(import_react_sdk19.selectPermissions);
       const { isStreamingOn } = (0, import_react_sdk19.useRecordingStreaming)();
@@ -12231,27 +12345,27 @@ var init_MwebLeaveRoom = __esm({
       if (!permissions || !isConnected) {
         return null;
       }
-      return /* @__PURE__ */ import_react55.default.createElement(import_react55.Fragment, null, showLeaveOptions ? /* @__PURE__ */ import_react55.default.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react55.default.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ import_react55.default.createElement(
+      return /* @__PURE__ */ import_react56.default.createElement(import_react56.Fragment, null, showLeaveOptions ? /* @__PURE__ */ import_react56.default.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react56.default.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ import_react56.default.createElement(
         LeaveButton,
         {
           onClick: () => {
             setOpen((open2) => !open2);
           }
         }
-      )), /* @__PURE__ */ import_react55.default.createElement(Sheet.Content, { container }, /* @__PURE__ */ import_react55.default.createElement(
+      )), /* @__PURE__ */ import_react56.default.createElement(Sheet.Content, { container }, /* @__PURE__ */ import_react56.default.createElement(
         LeaveCard,
         {
           title: showStream ? "Leave Stream" : "Leave Session",
           subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
           bg: "$surface_default",
           titleColor: "$on_surface_high",
-          icon: /* @__PURE__ */ import_react55.default.createElement(import_react_icons19.ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+          icon: /* @__PURE__ */ import_react56.default.createElement(import_react_icons19.ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
           onClick: () => __async(void 0, null, function* () {
             return yield leaveRoom();
           }),
           css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
         }
-      ), /* @__PURE__ */ import_react55.default.createElement(
+      ), /* @__PURE__ */ import_react56.default.createElement(
         LeaveCard,
         {
           title: showStream ? "End Stream" : "End Session",
@@ -12259,25 +12373,25 @@ var init_MwebLeaveRoom = __esm({
           bg: "$alert_error_dim",
           titleColor: "$alert_error_brighter",
           css: { color: "$alert_error_bright", "&:hover": { color: "$alert_error_brighter" } },
-          icon: /* @__PURE__ */ import_react55.default.createElement(import_react_icons19.StopIcon, { height: 24, width: 24 }),
+          icon: /* @__PURE__ */ import_react56.default.createElement(import_react_icons19.StopIcon, { height: 24, width: 24 }),
           onClick: () => {
             setOpen(false);
             setShowEndStreamAlert(true);
           }
         }
-      ))) : /* @__PURE__ */ import_react55.default.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ import_react55.default.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ import_react55.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ import_react55.default.createElement(
+      ))) : /* @__PURE__ */ import_react56.default.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ import_react56.default.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ import_react56.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ import_react56.default.createElement(
         EndSessionContent,
         {
           setShowEndStreamAlert,
           leaveRoom: isStreamingOn ? leaveRoom : endRoom,
           isStreamingOn
         }
-      ))), /* @__PURE__ */ import_react55.default.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ import_react55.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ import_react55.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
+      ))), /* @__PURE__ */ import_react56.default.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ import_react56.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ import_react56.default.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
     };
     LeaveButton = ({ onClick }) => {
       const isMobileHLSStream = useMobileHLSStream();
       const isLandscapeHLSStream = useLandscapeHLSStream();
-      return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ import_react55.default.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react55.default.createElement(Box, null, /* @__PURE__ */ import_react55.default.createElement(import_react_icons19.CrossIcon, null)))) : /* @__PURE__ */ import_react55.default.createElement(
+      return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ import_react56.default.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react56.default.createElement(Box, null, /* @__PURE__ */ import_react56.default.createElement(import_react_icons19.CrossIcon, null)))) : /* @__PURE__ */ import_react56.default.createElement(
         LeaveIconButton,
         {
           key: "LeaveRoom",
@@ -12288,19 +12402,19 @@ var init_MwebLeaveRoom = __esm({
           },
           onClick
         },
-        /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react55.default.createElement(Box, null, /* @__PURE__ */ import_react55.default.createElement(import_react_icons19.ExitIcon, { style: { transform: "rotate(180deg)" } })))
+        /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ import_react56.default.createElement(Box, null, /* @__PURE__ */ import_react56.default.createElement(import_react_icons19.ExitIcon, { style: { transform: "rotate(180deg)" } })))
       );
     };
   }
 });
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
-var import_react56, import_react_use8, import_react_sdk20, LeaveRoom;
+var import_react57, import_react_use8, import_react_sdk20, LeaveRoom;
 var init_LeaveRoom = __esm({
   "src/Prebuilt/components/Leave/LeaveRoom.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react56 = __toESM(require("react"));
+    import_react57 = __toESM(require("react"));
     import_react_use8 = require("react-use");
     import_react_sdk20 = require("@100mslive/react-sdk");
     init_Theme();
@@ -12352,9 +12466,9 @@ var init_LeaveRoom = __esm({
         return null;
       }
       if (isMobileHLSStream || isLandscapeHLSStream) {
-        return /* @__PURE__ */ import_react56.default.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container });
+        return /* @__PURE__ */ import_react57.default.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container });
       }
-      return isMobile ? /* @__PURE__ */ import_react56.default.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container }) : /* @__PURE__ */ import_react56.default.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom, container });
+      return isMobile ? /* @__PURE__ */ import_react57.default.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container }) : /* @__PURE__ */ import_react57.default.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom, container });
     };
   }
 });
@@ -12841,12 +12955,12 @@ var init_SetupMediaSession = __esm({
 });
 
 // src/Prebuilt/components/PIP/PIPComponent.tsx
-var import_react57, import_react_sdk22, import_react_icons20, PIPComponent, ActivatedPIP, PIPComponent_default;
+var import_react58, import_react_sdk22, import_react_icons20, PIPComponent, ActivatedPIP, PIPComponent_default;
 var init_PIPComponent = __esm({
   "src/Prebuilt/components/PIP/PIPComponent.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react57 = __toESM(require("react"));
+    import_react58 = __toESM(require("react"));
     import_react_sdk22 = require("@100mslive/react-sdk");
     import_react_icons20 = require("@100mslive/react-icons");
     init_src();
@@ -12855,10 +12969,10 @@ var init_PIPComponent = __esm({
     init_SetupMediaSession();
     init_useUISettings();
     PIPComponent = ({ content = null }) => {
-      const [isPipOn, setIsPipOn] = (0, import_react57.useState)(PictureInPicture.isOn());
+      const [isPipOn, setIsPipOn] = (0, import_react58.useState)(PictureInPicture.isOn());
       const hmsActions = (0, import_react_sdk22.useHMSActions)();
       const store = (0, import_react_sdk22.useHMSVanillaStore)();
-      const onPipToggle = (0, import_react57.useCallback)(() => {
+      const onPipToggle = (0, import_react58.useCallback)(() => {
         if (!isPipOn) {
           PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
           MediaSession.setup(hmsActions, store);
@@ -12869,12 +12983,12 @@ var init_PIPComponent = __esm({
       if (!PictureInPicture.isSupported()) {
         return null;
       }
-      return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, content ? /* @__PURE__ */ import_react57.default.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ import_react57.default.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ import_react57.default.createElement(import_react_icons20.PipIcon, null))));
+      return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, content ? /* @__PURE__ */ import_react58.default.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ import_react58.default.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ import_react58.default.createElement(import_react_icons20.PipIcon, null))));
     };
     ActivatedPIP = () => {
       const store = (0, import_react_sdk22.useHMSVanillaStore)();
       const pinnedTrack = usePinnedTrack();
-      (0, import_react57.useEffect)(() => {
+      (0, import_react58.useEffect)(() => {
         function subscribeToStore() {
           return store.subscribe((tracksMap) => {
             let pipPeers = store.getState(import_react_sdk22.selectPeers);
@@ -12902,33 +13016,33 @@ var init_PIPComponent = __esm({
           unsubscribe = void 0;
         };
       }, [pinnedTrack, store]);
-      return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null);
+      return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null);
     };
     PIPComponent_default = PIPComponent;
   }
 });
 
 // src/Prebuilt/components/PIP/index.jsx
-var import_react58, PIP;
+var import_react59, PIP;
 var init_PIP = __esm({
   "src/Prebuilt/components/PIP/index.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react58 = __toESM(require("react"));
+    import_react59 = __toESM(require("react"));
     init_PIPComponent();
     PIP = ({ content = null }) => {
-      return /* @__PURE__ */ import_react58.default.createElement(PIPComponent_default, { content });
+      return /* @__PURE__ */ import_react59.default.createElement(PIPComponent_default, { content });
     };
   }
 });
 
 // src/Prebuilt/components/RoleChangeModal.tsx
-var import_react59, import_react_use9, import_react_sdk23, import_react_icons21, HighlightTerm, RoleChangeContent, RoleChangeModal;
+var import_react60, import_react_use9, import_react_sdk23, import_react_icons21, HighlightTerm, RoleChangeContent, RoleChangeModal;
 var init_RoleChangeModal = __esm({
   "src/Prebuilt/components/RoleChangeModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react59 = __toESM(require("react"));
+    import_react60 = __toESM(require("react"));
     import_react_use9 = require("react-use");
     import_react_sdk23 = require("@100mslive/react-sdk");
     import_react_icons21 = require("@100mslive/react-icons");
@@ -12941,7 +13055,7 @@ var init_RoleChangeModal = __esm({
     init_Theme();
     init_Tooltip2();
     HighlightTerm = ({ value }) => {
-      return value ? /* @__PURE__ */ import_react59.default.createElement(Tooltip, { side: "top", title: value }, /* @__PURE__ */ import_react59.default.createElement(
+      return value ? /* @__PURE__ */ import_react60.default.createElement(Tooltip, { side: "top", title: value }, /* @__PURE__ */ import_react60.default.createElement(
         Text,
         {
           variant: "body2",
@@ -12954,7 +13068,7 @@ var init_RoleChangeModal = __esm({
         value.slice(0, 100),
         value.length > 100 ? "..." : "",
         "'"
-      )) : /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null);
+      )) : /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null);
     };
     RoleChangeContent = ({
       peer,
@@ -12965,11 +13079,11 @@ var init_RoleChangeModal = __esm({
       const roles = (0, import_react_sdk23.useHMSStore)(import_react_sdk23.selectAvailableRoleNames).filter(
         (role) => role !== (peer == null ? void 0 : peer.roleName) && role !== "__internal_recorder"
       );
-      const [selectedRole, setRole] = (0, import_react59.useState)(((_a8 = roles.filter((role) => role !== (peer == null ? void 0 : peer.roleName))) == null ? void 0 : _a8[0]) || (peer == null ? void 0 : peer.roleName));
+      const [selectedRole, setRole] = (0, import_react60.useState)(((_a8 = roles.filter((role) => role !== (peer == null ? void 0 : peer.roleName))) == null ? void 0 : _a8[0]) || (peer == null ? void 0 : peer.roleName));
       const hmsActions = (0, import_react_sdk23.useHMSActions)();
-      const [open, setOpen] = (0, import_react59.useState)(false);
-      const triggerRef = (0, import_react59.useRef)();
-      return /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react59.default.createElement(Text, { as: "h6", variant: "h6" }, "Switch Role"), isMobile && /* @__PURE__ */ import_react59.default.createElement(import_react_icons21.CrossIcon, { onClick: () => onOpenChange(false) })), /* @__PURE__ */ import_react59.default.createElement(Box, null, /* @__PURE__ */ import_react59.default.createElement(
+      const [open, setOpen] = (0, import_react60.useState)(false);
+      const triggerRef = (0, import_react60.useRef)();
+      return /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react60.default.createElement(Text, { as: "h6", variant: "h6" }, "Switch Role"), isMobile && /* @__PURE__ */ import_react60.default.createElement(import_react_icons21.CrossIcon, { onClick: () => onOpenChange(false) })), /* @__PURE__ */ import_react60.default.createElement(Box, null, /* @__PURE__ */ import_react60.default.createElement(
         Text,
         {
           variant: "sm",
@@ -12983,11 +13097,11 @@ var init_RoleChangeModal = __esm({
           }
         },
         "Switch the role of",
-        /* @__PURE__ */ import_react59.default.createElement(HighlightTerm, { value: peer.name }),
+        /* @__PURE__ */ import_react60.default.createElement(HighlightTerm, { value: peer.name }),
         "from ",
-        /* @__PURE__ */ import_react59.default.createElement(HighlightTerm, { value: peer.roleName }),
+        /* @__PURE__ */ import_react60.default.createElement(HighlightTerm, { value: peer.roleName }),
         " to"
-      )), /* @__PURE__ */ import_react59.default.createElement(
+      )), /* @__PURE__ */ import_react60.default.createElement(
         Flex,
         {
           align: "center",
@@ -12996,7 +13110,7 @@ var init_RoleChangeModal = __esm({
             mb: "$10"
           }
         },
-        /* @__PURE__ */ import_react59.default.createElement(
+        /* @__PURE__ */ import_react60.default.createElement(
           Box,
           {
             css: {
@@ -13005,7 +13119,7 @@ var init_RoleChangeModal = __esm({
               minWidth: 0
             }
           },
-          /* @__PURE__ */ import_react59.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ import_react59.default.createElement(
+          /* @__PURE__ */ import_react60.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ import_react60.default.createElement(
             Dropdown.Trigger,
             {
               ref: triggerRef,
@@ -13017,10 +13131,10 @@ var init_RoleChangeModal = __esm({
                 p: "$6 $9"
               }
             },
-            /* @__PURE__ */ import_react59.default.createElement(Flex, { align: "center", justify: "between", css: { width: "100%" } }, /* @__PURE__ */ import_react59.default.createElement(Text, null, selectedRole), open ? /* @__PURE__ */ import_react59.default.createElement(import_react_icons21.ChevronUpIcon, null) : /* @__PURE__ */ import_react59.default.createElement(import_react_icons21.ChevronDownIcon, null))
-          ), /* @__PURE__ */ import_react59.default.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { zIndex: 1e3, w: "100%" } }, roles.map((role) => {
+            /* @__PURE__ */ import_react60.default.createElement(Flex, { align: "center", justify: "between", css: { width: "100%" } }, /* @__PURE__ */ import_react60.default.createElement(Text, null, selectedRole), open ? /* @__PURE__ */ import_react60.default.createElement(import_react_icons21.ChevronUpIcon, null) : /* @__PURE__ */ import_react60.default.createElement(import_react_icons21.ChevronDownIcon, null))
+          ), /* @__PURE__ */ import_react60.default.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { zIndex: 1e3, w: "100%" } }, roles.map((role) => {
             var _a9;
-            return /* @__PURE__ */ import_react59.default.createElement(
+            return /* @__PURE__ */ import_react60.default.createElement(
               Dropdown.Item,
               {
                 "data-testid": role,
@@ -13032,7 +13146,7 @@ var init_RoleChangeModal = __esm({
             );
           })))
         )
-      ), /* @__PURE__ */ import_react59.default.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, !isMobile && /* @__PURE__ */ import_react59.default.createElement(
+      ), /* @__PURE__ */ import_react60.default.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, !isMobile && /* @__PURE__ */ import_react60.default.createElement(
         Button,
         {
           variant: "standard",
@@ -13042,7 +13156,7 @@ var init_RoleChangeModal = __esm({
           "data-testid": "cancel_button"
         },
         "Cancel"
-      ), /* @__PURE__ */ import_react59.default.createElement(
+      ), /* @__PURE__ */ import_react60.default.createElement(
         Button,
         {
           "data-testid": "change_button",
@@ -13068,20 +13182,20 @@ var init_RoleChangeModal = __esm({
         return null;
       }
       if (isMobile) {
-        return /* @__PURE__ */ import_react59.default.createElement(Sheet.Root, { open: true, onOpenChange, css: { borderRadius: "$0 $0 0 0" } }, /* @__PURE__ */ import_react59.default.createElement(Sheet.Content, { css: { p: "$10 $8", background: "$surface_dim", border: "1px solid $border_default" } }, /* @__PURE__ */ import_react59.default.createElement(RoleChangeContent, { peer, onOpenChange, isMobile: true })));
+        return /* @__PURE__ */ import_react60.default.createElement(Sheet.Root, { open: true, onOpenChange, css: { borderRadius: "$0 $0 0 0" } }, /* @__PURE__ */ import_react60.default.createElement(Sheet.Content, { css: { p: "$10 $8", background: "$surface_dim", border: "1px solid $border_default" } }, /* @__PURE__ */ import_react60.default.createElement(RoleChangeContent, { peer, onOpenChange, isMobile: true })));
       }
-      return /* @__PURE__ */ import_react59.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react59.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react59.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react59.default.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10", overflow: "visible" } }, /* @__PURE__ */ import_react59.default.createElement(RoleChangeContent, { peer, onOpenChange }))));
+      return /* @__PURE__ */ import_react60.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react60.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react60.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react60.default.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10", overflow: "visible" } }, /* @__PURE__ */ import_react60.default.createElement(RoleChangeContent, { peer, onOpenChange }))));
     };
   }
 });
 
 // src/Prebuilt/primitives/DialogContent.jsx
-var import_react60, import_react_icons22, DialogContent, ErrorDialog, RequestDialog, DialogRow, DialogCol, DialogSelect, DialogInputFile;
+var import_react61, import_react_icons22, DialogContent, ErrorDialog, RequestDialog, DialogRow, DialogCol, DialogSelect, DialogInputFile;
 var init_DialogContent2 = __esm({
   "src/Prebuilt/primitives/DialogContent.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react60 = __toESM(require("react"));
+    import_react61 = __toESM(require("react"));
     import_react_icons22 = require("@100mslive/react-icons");
     init_Button2();
     init_Divider2();
@@ -13095,11 +13209,11 @@ var init_DialogContent2 = __esm({
     init_utils();
     DialogContent = (_a8) => {
       var _b7 = _a8, { Icon: Icon4, title, closeable = true, children, css: css2, iconCSS = {} } = _b7, props = __objRest(_b7, ["Icon", "title", "closeable", "children", "css", "iconCSS"]);
-      return /* @__PURE__ */ import_react60.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react60.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react60.default.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ import_react60.default.createElement(Dialog.Title, null, /* @__PURE__ */ import_react60.default.createElement(Flex, { justify: "between" }, /* @__PURE__ */ import_react60.default.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon4 ? /* @__PURE__ */ import_react60.default.createElement(Flex, { css: __spreadValues(__spreadValues({ mr: "$2", color: "$on_primary_high" }, flexCenter), iconCSS) }, /* @__PURE__ */ import_react60.default.createElement(Icon4, null)) : null, /* @__PURE__ */ import_react60.default.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ import_react60.default.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ import_react60.default.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ import_react60.default.createElement(Box, null, children)));
+      return /* @__PURE__ */ import_react61.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react61.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react61.default.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ import_react61.default.createElement(Dialog.Title, null, /* @__PURE__ */ import_react61.default.createElement(Flex, { justify: "between" }, /* @__PURE__ */ import_react61.default.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon4 ? /* @__PURE__ */ import_react61.default.createElement(Flex, { css: __spreadValues(__spreadValues({ mr: "$2", color: "$on_primary_high" }, flexCenter), iconCSS) }, /* @__PURE__ */ import_react61.default.createElement(Icon4, null)) : null, /* @__PURE__ */ import_react61.default.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ import_react61.default.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ import_react61.default.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ import_react61.default.createElement(Box, null, children)));
     };
     ErrorDialog = (_a8) => {
       var _b7 = _a8, { open = true, onOpenChange, title, children } = _b7, props = __objRest(_b7, ["open", "onOpenChange", "title", "children"]);
-      return /* @__PURE__ */ import_react60.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react60.default.createElement(
+      return /* @__PURE__ */ import_react61.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react61.default.createElement(
         DialogContent,
         __spreadValues({
           Icon: import_react_icons22.CrossIcon,
@@ -13110,10 +13224,10 @@ var init_DialogContent2 = __esm({
           closeable: false,
           iconCSS: { color: "$alert_error_default" }
         }, props),
-        /* @__PURE__ */ import_react60.default.createElement(Box, { css: { mt: "$lg" } }, children)
+        /* @__PURE__ */ import_react61.default.createElement(Box, { css: { mt: "$lg" } }, children)
       ));
     };
-    RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon4 }) => /* @__PURE__ */ import_react60.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react60.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react60.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react60.default.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ import_react60.default.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md" } }, Icon4 ? Icon4 : null, /* @__PURE__ */ import_react60.default.createElement(Text, { variant: "h6" }, title)), typeof body === "string" ? /* @__PURE__ */ import_react60.default.createElement(
+    RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon4 }) => /* @__PURE__ */ import_react61.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react61.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react61.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react61.default.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ import_react61.default.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md" } }, Icon4 ? Icon4 : null, /* @__PURE__ */ import_react61.default.createElement(Text, { variant: "h6" }, title)), typeof body === "string" ? /* @__PURE__ */ import_react61.default.createElement(
       Text,
       {
         variant: "md",
@@ -13125,7 +13239,7 @@ var init_DialogContent2 = __esm({
         }
       },
       body
-    ) : /* @__PURE__ */ import_react60.default.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ import_react60.default.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ import_react60.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react60.default.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ import_react60.default.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ import_react60.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react60.default.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
+    ) : /* @__PURE__ */ import_react61.default.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ import_react61.default.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ import_react61.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react61.default.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ import_react61.default.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ import_react61.default.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ import_react61.default.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
     DialogRow = ({ children, breakSm = false, css: css2, justify = "between" }) => {
       let finalCSS = {
         margin: "$10 0",
@@ -13140,7 +13254,7 @@ var init_DialogContent2 = __esm({
       if (css2) {
         finalCSS = Object.assign(finalCSS, css2);
       }
-      return /* @__PURE__ */ import_react60.default.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
+      return /* @__PURE__ */ import_react61.default.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
     };
     DialogCol = (_a8) => {
       var _b7 = _a8, { children, breakSm = false, css: css2, align = "center", justify = "between" } = _b7, props = __objRest(_b7, ["children", "breakSm", "css", "align", "justify"]);
@@ -13156,20 +13270,20 @@ var init_DialogContent2 = __esm({
       if (css2) {
         finalCSS = Object.assign(finalCSS, css2);
       }
-      return /* @__PURE__ */ import_react60.default.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
+      return /* @__PURE__ */ import_react61.default.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
     };
     DialogSelect = (_a8) => {
       var _b7 = _a8, { title, options, keyField, labelField, selected, onChange } = _b7, props = __objRest(_b7, ["title", "options", "keyField", "labelField", "selected", "onChange"]);
-      return /* @__PURE__ */ import_react60.default.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ import_react60.default.createElement(Label3, null, title), /* @__PURE__ */ import_react60.default.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ import_react60.default.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ import_react60.default.createElement(Select.Select, { onChange: (e) => onChange(e.target.value), value: selected, css: { width: "100%" } }, options.map((option) => {
+      return /* @__PURE__ */ import_react61.default.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ import_react61.default.createElement(Label3, null, title), /* @__PURE__ */ import_react61.default.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ import_react61.default.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ import_react61.default.createElement(Select.Select, { onChange: (e) => onChange(e.target.value), value: selected, css: { width: "100%" } }, options.map((option) => {
         const id = keyField ? option[keyField] : option;
         const label = labelField ? option[labelField] : option;
-        return /* @__PURE__ */ import_react60.default.createElement("option", { value: id, key: id }, label);
+        return /* @__PURE__ */ import_react61.default.createElement("option", { value: id, key: id }, label);
       }))));
     };
     DialogInputFile = (_a8) => {
       var _b7 = _a8, { value, onChange, placeholder, disabled, type } = _b7, props = __objRest(_b7, ["value", "onChange", "placeholder", "disabled", "type"]);
-      const inputRef = (0, import_react60.useRef)();
-      return /* @__PURE__ */ import_react60.default.createElement(
+      const inputRef = (0, import_react61.useRef)();
+      return /* @__PURE__ */ import_react61.default.createElement(
         DialogCol,
         {
           breakSm: true,
@@ -13190,7 +13304,7 @@ var init_DialogContent2 = __esm({
           },
           gap: "8"
         },
-        /* @__PURE__ */ import_react60.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(
           IconButton,
           {
             variant: "standard",
@@ -13204,7 +13318,7 @@ var init_DialogContent2 = __esm({
               }
             }
           },
-          /* @__PURE__ */ import_react60.default.createElement(
+          /* @__PURE__ */ import_react61.default.createElement(
             import_react_icons22.CloudUploadIcon,
             {
               style: {
@@ -13214,7 +13328,7 @@ var init_DialogContent2 = __esm({
             }
           )
         ),
-        /* @__PURE__ */ import_react60.default.createElement(Flex, { direction: "row" }, /* @__PURE__ */ import_react60.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(Flex, { direction: "row" }, /* @__PURE__ */ import_react61.default.createElement(
           Input,
           __spreadValues({
             ref: inputRef,
@@ -13226,7 +13340,7 @@ var init_DialogContent2 = __esm({
             type,
             hidden: true
           }, props)
-        ), /* @__PURE__ */ import_react60.default.createElement(
+        ), /* @__PURE__ */ import_react61.default.createElement(
           IconButton,
           {
             variant: "standard",
@@ -13240,7 +13354,7 @@ var init_DialogContent2 = __esm({
               }
             }
           },
-          /* @__PURE__ */ import_react60.default.createElement(Text, { variant: "md" }, placeholder)
+          /* @__PURE__ */ import_react61.default.createElement(Text, { variant: "md" }, placeholder)
         ))
       );
     };
@@ -13248,19 +13362,19 @@ var init_DialogContent2 = __esm({
 });
 
 // src/Prebuilt/components/Streaming/ResolutionInput.jsx
-var import_react61, import_react_icons23, ResolutionInput;
+var import_react62, import_react_icons23, ResolutionInput;
 var init_ResolutionInput = __esm({
   "src/Prebuilt/components/Streaming/ResolutionInput.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react61 = __toESM(require("react"));
+    import_react62 = __toESM(require("react"));
     import_react_icons23 = require("@100mslive/react-icons");
     init_src();
     init_DialogContent2();
     init_constants();
     ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, testId }) => {
-      const [resolution, setResolution] = (0, import_react61.useState)(RTMP_RECORD_DEFAULT_RESOLUTION);
-      const resolutionChangeHandler = (0, import_react61.useCallback)(
+      const [resolution, setResolution] = (0, import_react62.useState)(RTMP_RECORD_DEFAULT_RESOLUTION);
+      const resolutionChangeHandler = (0, import_react62.useCallback)(
         (event) => {
           const { name, value } = event.target;
           let width = name === "resWidth" ? Number(value) : resolution.width;
@@ -13279,7 +13393,7 @@ var init_ResolutionInput = __esm({
         },
         [resolution]
       );
-      return /* @__PURE__ */ import_react61.default.createElement(DialogRow, { breakSm: true, css: css2 }, /* @__PURE__ */ import_react61.default.createElement(Flex, { gap: 1 }, /* @__PURE__ */ import_react61.default.createElement(Label3, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ import_react61.default.createElement("div", null, /* @__PURE__ */ import_react61.default.createElement(import_react_icons23.InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ import_react61.default.createElement(
+      return /* @__PURE__ */ import_react62.default.createElement(DialogRow, { breakSm: true, css: css2 }, /* @__PURE__ */ import_react62.default.createElement(Flex, { gap: 1 }, /* @__PURE__ */ import_react62.default.createElement(Label3, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ import_react62.default.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ import_react62.default.createElement("div", null, /* @__PURE__ */ import_react62.default.createElement(import_react_icons23.InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ import_react62.default.createElement(
         Flex,
         {
           justify: "between",
@@ -13287,7 +13401,7 @@ var init_ResolutionInput = __esm({
           gap: 2,
           direction: "column"
         },
-        /* @__PURE__ */ import_react61.default.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ import_react61.default.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ import_react61.default.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ import_react61.default.createElement(
+        /* @__PURE__ */ import_react62.default.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ import_react62.default.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ import_react62.default.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ import_react62.default.createElement(
           Input,
           {
             "data-testid": `${testId}_width`,
@@ -13301,7 +13415,7 @@ var init_ResolutionInput = __esm({
             onBlur: () => onResolutionChange(resolution),
             type: "number"
           }
-        )), /* @__PURE__ */ import_react61.default.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ import_react61.default.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ import_react61.default.createElement(
+        )), /* @__PURE__ */ import_react62.default.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ import_react62.default.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ import_react62.default.createElement(
           Input,
           {
             "data-testid": `${testId}_height`,
@@ -13322,12 +13436,12 @@ var init_ResolutionInput = __esm({
 });
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
-var import_react62, import_react_sdk24, import_react_icons24, StartRecording, StartRecording_default;
+var import_react63, import_react_sdk24, import_react_icons24, StartRecording, StartRecording_default;
 var init_StartRecording = __esm({
   "src/Prebuilt/components/Settings/StartRecording.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react62 = __toESM(require("react"));
+    import_react63 = __toESM(require("react"));
     import_react_sdk24 = require("@100mslive/react-sdk");
     import_react_icons24 = require("@100mslive/react-icons");
     init_src();
@@ -13337,7 +13451,7 @@ var init_StartRecording = __esm({
     init_constants();
     StartRecording = ({ open, onOpenChange }) => {
       const permissions = (0, import_react_sdk24.useHMSStore)(import_react_sdk24.selectPermissions);
-      const [resolution, setResolution] = (0, import_react62.useState)(RTMP_RECORD_DEFAULT_RESOLUTION);
+      const [resolution, setResolution] = (0, import_react63.useState)(RTMP_RECORD_DEFAULT_RESOLUTION);
       const { startRecording, recordingStarted } = useRecordingHandler();
       const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = (0, import_react_sdk24.useRecordingStreaming)();
       const hmsActions = (0, import_react_sdk24.useHMSActions)();
@@ -13345,7 +13459,7 @@ var init_StartRecording = __esm({
         return null;
       }
       if (isBrowserRecordingOn) {
-        return /* @__PURE__ */ import_react62.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react62.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react62.default.createElement(
+        return /* @__PURE__ */ import_react63.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react63.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react63.default.createElement(
           Dialog.Content,
           {
             css: {
@@ -13354,9 +13468,9 @@ var init_StartRecording = __esm({
               bg: "#201617"
             }
           },
-          /* @__PURE__ */ import_react62.default.createElement(Dialog.Title, null, /* @__PURE__ */ import_react62.default.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ import_react62.default.createElement(import_react_icons24.AlertTriangleIcon, null), /* @__PURE__ */ import_react62.default.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
-          /* @__PURE__ */ import_react62.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
-          /* @__PURE__ */ import_react62.default.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ import_react62.default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ import_react62.default.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ import_react62.default.createElement(
+          /* @__PURE__ */ import_react63.default.createElement(Dialog.Title, null, /* @__PURE__ */ import_react63.default.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ import_react63.default.createElement(import_react_icons24.AlertTriangleIcon, null), /* @__PURE__ */ import_react63.default.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
+          /* @__PURE__ */ import_react63.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
+          /* @__PURE__ */ import_react63.default.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ import_react63.default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ import_react63.default.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ import_react63.default.createElement(
             Button,
             {
               "data-testid": "stop_recording_confirm_mobile",
@@ -13378,14 +13492,14 @@ var init_StartRecording = __esm({
           ))
         )));
       }
-      return /* @__PURE__ */ import_react62.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react62.default.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ import_react62.default.createElement(Dialog.Title, null, /* @__PURE__ */ import_react62.default.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ import_react62.default.createElement(
+      return /* @__PURE__ */ import_react63.default.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ import_react63.default.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ import_react63.default.createElement(Dialog.Title, null, /* @__PURE__ */ import_react63.default.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ import_react63.default.createElement(
         ResolutionInput,
         {
           testId: "recording_resolution_mobile",
           css: { flexDirection: "column", alignItems: "start" },
           onResolutionChange: setResolution
         }
-      ), /* @__PURE__ */ import_react62.default.createElement(
+      ), /* @__PURE__ */ import_react63.default.createElement(
         Button,
         {
           "data-testid": "start_recording_confirm_mobile",
@@ -13407,12 +13521,12 @@ var init_StartRecording = __esm({
 });
 
 // src/Prebuilt/components/StatsForNerds.jsx
-var import_react63, import_ts_pattern3, import_react_sdk25, StatsForNerds, useTracksWithLabel, LocalPeerStats, TrackStats, StatsRow2, formatBytes2;
+var import_react64, import_ts_pattern3, import_react_sdk25, StatsForNerds, useTracksWithLabel, LocalPeerStats, TrackStats, StatsRow2, formatBytes2;
 var init_StatsForNerds = __esm({
   "src/Prebuilt/components/StatsForNerds.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react63 = __toESM(require("react"));
+    import_react64 = __toESM(require("react"));
     import_ts_pattern3 = require("ts-pattern");
     import_react_sdk25 = require("@100mslive/react-sdk");
     init_Divider2();
@@ -13429,21 +13543,21 @@ var init_StatsForNerds = __esm({
     StatsForNerds = ({ onOpenChange }) => {
       var _a8;
       const tracksWithLabels = useTracksWithLabel();
-      const statsOptions = (0, import_react63.useMemo)(
+      const statsOptions = (0, import_react64.useMemo)(
         () => [{ id: "local-peer", label: "Local Peer Stats" }, ...tracksWithLabels],
         [tracksWithLabels]
       );
-      const [selectedStat, setSelectedStat] = (0, import_react63.useState)(statsOptions[0]);
+      const [selectedStat, setSelectedStat] = (0, import_react64.useState)(statsOptions[0]);
       const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
-      const [open, setOpen] = (0, import_react63.useState)(false);
-      const ref = (0, import_react63.useRef)();
+      const [open, setOpen] = (0, import_react64.useState)(false);
+      const ref = (0, import_react64.useRef)();
       const selectionBg = useDropdownSelection();
-      (0, import_react63.useEffect)(() => {
+      (0, import_react64.useEffect)(() => {
         if (selectedStat.id !== "local-peer" && !tracksWithLabels.find((track) => track.id === selectedStat.id)) {
           setSelectedStat("local-peer");
         }
       }, [tracksWithLabels, selectedStat]);
-      return /* @__PURE__ */ import_react63.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react63.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react63.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react63.default.createElement(
+      return /* @__PURE__ */ import_react64.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react64.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react64.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react64.default.createElement(
         Dialog.Content,
         {
           css: {
@@ -13452,10 +13566,10 @@ var init_StatsForNerds = __esm({
             overflowY: "auto"
           }
         },
-        /* @__PURE__ */ import_react63.default.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ import_react63.default.createElement(Flex, { justify: "between" }, /* @__PURE__ */ import_react63.default.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ import_react63.default.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ import_react63.default.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
-        /* @__PURE__ */ import_react63.default.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
-        /* @__PURE__ */ import_react63.default.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ import_react63.default.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ import_react63.default.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
-        /* @__PURE__ */ import_react63.default.createElement(
+        /* @__PURE__ */ import_react64.default.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ import_react64.default.createElement(Flex, { justify: "between" }, /* @__PURE__ */ import_react64.default.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ import_react64.default.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ import_react64.default.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
+        /* @__PURE__ */ import_react64.default.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
+        /* @__PURE__ */ import_react64.default.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ import_react64.default.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ import_react64.default.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
+        /* @__PURE__ */ import_react64.default.createElement(
           Flex,
           {
             direction: "column",
@@ -13465,8 +13579,8 @@ var init_StatsForNerds = __esm({
               minWidth: 0
             }
           },
-          /* @__PURE__ */ import_react63.default.createElement(Label3, { variant: "body2", css: { c: "$on_surface_high" } }, "Stats For"),
-          /* @__PURE__ */ import_react63.default.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ import_react63.default.createElement(
+          /* @__PURE__ */ import_react64.default.createElement(Label3, { variant: "body2", css: { c: "$on_surface_high" } }, "Stats For"),
+          /* @__PURE__ */ import_react64.default.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ import_react64.default.createElement(
             DialogDropdownTrigger,
             {
               title: selectedStat.label || "Select Stats",
@@ -13475,9 +13589,9 @@ var init_StatsForNerds = __esm({
               open,
               ref
             }
-          ), /* @__PURE__ */ import_react63.default.createElement(Dropdown.Portal, null, /* @__PURE__ */ import_react63.default.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a8 = ref.current) == null ? void 0 : _a8.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
+          ), /* @__PURE__ */ import_react64.default.createElement(Dropdown.Portal, null, /* @__PURE__ */ import_react64.default.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a8 = ref.current) == null ? void 0 : _a8.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
             const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
-            return /* @__PURE__ */ import_react63.default.createElement(
+            return /* @__PURE__ */ import_react64.default.createElement(
               Dropdown.Item,
               {
                 key: `${option.id}-${option.layer || ""}`,
@@ -13494,14 +13608,14 @@ var init_StatsForNerds = __esm({
             );
           }))))
         ),
-        selectedStat.id === "local-peer" ? /* @__PURE__ */ import_react63.default.createElement(LocalPeerStats, null) : /* @__PURE__ */ import_react63.default.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
+        selectedStat.id === "local-peer" ? /* @__PURE__ */ import_react64.default.createElement(LocalPeerStats, null) : /* @__PURE__ */ import_react64.default.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
       )));
     };
     useTracksWithLabel = () => {
       const tracksMap = (0, import_react_sdk25.useHMSStore)(import_react_sdk25.selectTracksMap);
       const peersMap = (0, import_react_sdk25.useHMSStore)(import_react_sdk25.selectPeersMap);
       const localPeerID = (0, import_react_sdk25.useHMSStore)(import_react_sdk25.selectLocalPeerID);
-      const tracksWithLabels = (0, import_react63.useMemo)(
+      const tracksWithLabels = (0, import_react64.useMemo)(
         () => Object.values(tracksMap).reduce((res, track) => {
           var _a8, _b7;
           const peerName = (_a8 = peersMap[track.peerId]) == null ? void 0 : _a8.name;
@@ -13536,13 +13650,13 @@ var init_StatsForNerds = __esm({
       if (!stats) {
         return null;
       }
-      return /* @__PURE__ */ import_react63.default.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Packets Lost", value: (_a8 = stats.subscribe) == null ? void 0 : _a8.packetsLost }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Jitter", value: (_b7 = stats.subscribe) == null ? void 0 : _b7.jitter }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Publish Bitrate", value: formatBytes2((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Subscribe Bitrate", value: formatBytes2((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ import_react63.default.createElement(
+      return /* @__PURE__ */ import_react64.default.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Packets Lost", value: (_a8 = stats.subscribe) == null ? void 0 : _a8.packetsLost }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Jitter", value: (_b7 = stats.subscribe) == null ? void 0 : _b7.jitter }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Publish Bitrate", value: formatBytes2((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Subscribe Bitrate", value: formatBytes2((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ import_react64.default.createElement(
         StatsRow2,
         {
           label: "Available Outgoing Bitrate",
           value: formatBytes2((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
         }
-      ), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Total Bytes Sent", value: formatBytes2((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Total Bytes Received", value: formatBytes2((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ import_react63.default.createElement(
+      ), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Total Bytes Sent", value: formatBytes2((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Total Bytes Received", value: formatBytes2((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ import_react64.default.createElement(
         StatsRow2,
         {
           label: "Round Trip Time",
@@ -13563,13 +13677,13 @@ var init_StatsForNerds = __esm({
         return null;
       }
       const inbound = stats.type.includes("inbound");
-      return /* @__PURE__ */ import_react63.default.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Bitrate", value: formatBytes2(stats.bitrate, "b/s") }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Jitter", value: (_a8 = stats.jitter) == null ? void 0 : _a8.toFixed(3) }), /* @__PURE__ */ import_react63.default.createElement(
+      return /* @__PURE__ */ import_react64.default.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Bitrate", value: formatBytes2(stats.bitrate, "b/s") }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Jitter", value: (_a8 = stats.jitter) == null ? void 0 : _a8.toFixed(3) }), /* @__PURE__ */ import_react64.default.createElement(
         StatsRow2,
         {
           label: inbound ? "Bytes Received" : "Bytes Sent",
           value: formatBytes2(inbound ? stats.bytesReceived : stats.bytesSent)
         }
-      ), stats.kind === "video" && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ import_react63.default.createElement(StatsRow2, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ import_react63.default.createElement(
+      ), stats.kind === "video" && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ import_react64.default.createElement(StatsRow2, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ import_react64.default.createElement(
         StatsRow2,
         {
           label: "Round Trip Time",
@@ -13577,7 +13691,7 @@ var init_StatsForNerds = __esm({
         }
       ));
     };
-    StatsRow2 = import_react63.default.memo(({ label, value }) => /* @__PURE__ */ import_react63.default.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ import_react63.default.createElement(
+    StatsRow2 = import_react64.default.memo(({ label, value }) => /* @__PURE__ */ import_react64.default.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ import_react64.default.createElement(
       Text,
       {
         variant: "overline",
@@ -13588,7 +13702,7 @@ var init_StatsForNerds = __esm({
         }
       },
       label
-    ), /* @__PURE__ */ import_react63.default.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
+    ), /* @__PURE__ */ import_react64.default.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
     formatBytes2 = (bytes, unit = "B", decimals = 2) => {
       if (bytes === void 0)
         return "-";
@@ -13604,12 +13718,12 @@ var init_StatsForNerds = __esm({
 });
 
 // src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
-var import_react64, import_react_sdk26, import_react_icons25, BulkRoleChangeModal;
+var import_react65, import_react_sdk26, import_react_icons25, BulkRoleChangeModal;
 var init_BulkRoleChangeModal = __esm({
   "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react64 = __toESM(require("react"));
+    import_react65 = __toESM(require("react"));
     import_react_sdk26 = require("@100mslive/react-sdk");
     import_react_icons25 = require("@100mslive/react-icons");
     init_src();
@@ -13620,15 +13734,15 @@ var init_BulkRoleChangeModal = __esm({
       var _a8, _b7;
       const roles = useFilteredRoles();
       const hmsActions = (0, import_react_sdk26.useHMSActions)();
-      const ref = (0, import_react64.useRef)(null);
-      const roleRef = (0, import_react64.useRef)(null);
-      const [selectedBulkRole, setBulkRole] = (0, import_react64.useState)([]);
-      const [selectedRole, setRole] = (0, import_react64.useState)("");
-      const [bulkRoleDialog, setBulkRoleDialog] = (0, import_react64.useState)(false);
-      const [roleDialog, setRoleDialog] = (0, import_react64.useState)(false);
-      const [errorMessage, setErrorMessage] = (0, import_react64.useState)("");
-      const [isSubmiting, setIsSubmiting] = (0, import_react64.useState)(false);
-      const changeBulkRole = (0, import_react64.useCallback)(() => __async(void 0, null, function* () {
+      const ref = (0, import_react65.useRef)(null);
+      const roleRef = (0, import_react65.useRef)(null);
+      const [selectedBulkRole, setBulkRole] = (0, import_react65.useState)([]);
+      const [selectedRole, setRole] = (0, import_react65.useState)("");
+      const [bulkRoleDialog, setBulkRoleDialog] = (0, import_react65.useState)(false);
+      const [roleDialog, setRoleDialog] = (0, import_react65.useState)(false);
+      const [errorMessage, setErrorMessage] = (0, import_react65.useState)("");
+      const [isSubmiting, setIsSubmiting] = (0, import_react65.useState)(false);
+      const changeBulkRole = (0, import_react65.useCallback)(() => __async(void 0, null, function* () {
         if (selectedBulkRole.length > 0 && selectedRole) {
           try {
             setIsSubmiting(true);
@@ -13642,7 +13756,7 @@ var init_BulkRoleChangeModal = __esm({
           }
         }
       }), [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
-      return /* @__PURE__ */ import_react64.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react64.default.createElement(DialogContent, { title: "Bulk Role Change", Icon: import_react_icons25.ChangeRoleIcon }, /* @__PURE__ */ import_react64.default.createElement(DialogRow, null, /* @__PURE__ */ import_react64.default.createElement(Text, null, "For Roles: "), /* @__PURE__ */ import_react64.default.createElement(
+      return /* @__PURE__ */ import_react65.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react65.default.createElement(DialogContent, { title: "Bulk Role Change", Icon: import_react_icons25.ChangeRoleIcon }, /* @__PURE__ */ import_react65.default.createElement(DialogRow, null, /* @__PURE__ */ import_react65.default.createElement(Text, null, "For Roles: "), /* @__PURE__ */ import_react65.default.createElement(
         Dropdown.Root,
         {
           open: bulkRoleDialog,
@@ -13653,7 +13767,7 @@ var init_BulkRoleChangeModal = __esm({
           },
           modal: false
         },
-        /* @__PURE__ */ import_react64.default.createElement(
+        /* @__PURE__ */ import_react65.default.createElement(
           DialogDropdownTrigger,
           {
             ref,
@@ -13665,7 +13779,7 @@ var init_BulkRoleChangeModal = __esm({
             open: bulkRoleDialog
           }
         ),
-        /* @__PURE__ */ import_react64.default.createElement(
+        /* @__PURE__ */ import_react65.default.createElement(
           Dropdown.Content,
           {
             css: { w: (_a8 = ref.current) == null ? void 0 : _a8.clientWidth, zIndex: 1e3 },
@@ -13676,7 +13790,7 @@ var init_BulkRoleChangeModal = __esm({
             }
           },
           roles && roles.map((role) => {
-            return /* @__PURE__ */ import_react64.default.createElement(
+            return /* @__PURE__ */ import_react65.default.createElement(
               Dropdown.CheckboxItem,
               {
                 key: role,
@@ -13688,12 +13802,12 @@ var init_BulkRoleChangeModal = __esm({
                   setErrorMessage("");
                 }
               },
-              /* @__PURE__ */ import_react64.default.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ import_react64.default.createElement(Checkbox.Indicator, null, /* @__PURE__ */ import_react64.default.createElement(import_react_icons25.CheckIcon, { width: 16, height: 16 }))),
+              /* @__PURE__ */ import_react65.default.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ import_react65.default.createElement(Checkbox.Indicator, null, /* @__PURE__ */ import_react65.default.createElement(import_react_icons25.CheckIcon, { width: 16, height: 16 }))),
               role
             );
           })
         )
-      )), /* @__PURE__ */ import_react64.default.createElement(DialogRow, null, /* @__PURE__ */ import_react64.default.createElement(Text, null, "To Role: "), /* @__PURE__ */ import_react64.default.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ import_react64.default.createElement(
+      )), /* @__PURE__ */ import_react65.default.createElement(DialogRow, null, /* @__PURE__ */ import_react65.default.createElement(Text, null, "To Role: "), /* @__PURE__ */ import_react65.default.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ import_react65.default.createElement(
         DialogDropdownTrigger,
         {
           ref: roleRef,
@@ -13704,8 +13818,8 @@ var init_BulkRoleChangeModal = __esm({
           },
           open: roleDialog
         }
-      ), /* @__PURE__ */ import_react64.default.createElement(Dropdown.Content, { css: { w: (_b7 = roleRef.current) == null ? void 0 : _b7.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
-        return /* @__PURE__ */ import_react64.default.createElement(
+      ), /* @__PURE__ */ import_react65.default.createElement(Dropdown.Content, { css: { w: (_b7 = roleRef.current) == null ? void 0 : _b7.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
+        return /* @__PURE__ */ import_react65.default.createElement(
           Dropdown.Item,
           {
             key: role,
@@ -13716,18 +13830,18 @@ var init_BulkRoleChangeModal = __esm({
           },
           role
         );
-      })))), /* @__PURE__ */ import_react64.default.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ import_react64.default.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ import_react64.default.createElement(import_react_icons25.AlertTriangleIcon, null), /* @__PURE__ */ import_react64.default.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ import_react64.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react64.default.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ import_react64.default.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
+      })))), /* @__PURE__ */ import_react65.default.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ import_react65.default.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ import_react65.default.createElement(import_react_icons25.AlertTriangleIcon, null), /* @__PURE__ */ import_react65.default.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ import_react65.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react65.default.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ import_react65.default.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
     };
   }
 });
 
 // src/Prebuilt/components/MoreSettings/CaptionContent.tsx
-var import_react65, import_react_sdk27, import_react_icons26, CaptionContent;
+var import_react66, import_react_sdk27, import_react_icons26, CaptionContent;
 var init_CaptionContent = __esm({
   "src/Prebuilt/components/MoreSettings/CaptionContent.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react65 = __toESM(require("react"));
+    import_react66 = __toESM(require("react"));
     import_react_sdk27 = require("@100mslive/react-sdk");
     import_react_icons26 = require("@100mslive/react-icons");
     init_Button2();
@@ -13743,7 +13857,7 @@ var init_CaptionContent = __esm({
       const isTranscriptionEnabled = (0, import_react_sdk27.useHMSStore)(import_react_sdk27.selectIsTranscriptionEnabled);
       const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
       const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
-      return /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+      return /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
         Text,
         {
           variant: isMobile ? "md" : "lg",
@@ -13756,15 +13870,15 @@ var init_CaptionContent = __esm({
         },
         isTranscriptionEnabled ? "Disable" : "Enable",
         " Closed Caption (CC) for this session?",
-        /* @__PURE__ */ import_react65.default.createElement(
+        /* @__PURE__ */ import_react66.default.createElement(
           Box,
           {
             css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
             onClick: onExit
           },
-          /* @__PURE__ */ import_react65.default.createElement(import_react_icons26.CrossIcon, null)
+          /* @__PURE__ */ import_react66.default.createElement(import_react_icons26.CrossIcon, null)
         )
-      ), !isMobile ? /* @__PURE__ */ import_react65.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$4", "@md": { px: "$8" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later.") : null, /* @__PURE__ */ import_react65.default.createElement(
+      ), !isMobile ? /* @__PURE__ */ import_react66.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$4", "@md": { px: "$8" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later.") : null, /* @__PURE__ */ import_react66.default.createElement(
         Flex,
         {
           justify: "between",
@@ -13776,8 +13890,8 @@ var init_CaptionContent = __esm({
             "@md": { px: "$4" }
           }
         },
-        isMobile ? null : /* @__PURE__ */ import_react65.default.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, onClick: onExit }, "Cancel"),
-        /* @__PURE__ */ import_react65.default.createElement(
+        isMobile ? null : /* @__PURE__ */ import_react66.default.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, onClick: onExit }, "Cancel"),
+        /* @__PURE__ */ import_react66.default.createElement(
           Flex,
           {
             direction: "column",
@@ -13788,7 +13902,7 @@ var init_CaptionContent = __esm({
               "@md": { px: "$4" }
             }
           },
-          isMobile && isTranscriptionEnabled ? /* @__PURE__ */ import_react65.default.createElement(
+          isMobile && isTranscriptionEnabled ? /* @__PURE__ */ import_react66.default.createElement(
             Button,
             {
               variant: "standard",
@@ -13801,7 +13915,7 @@ var init_CaptionContent = __esm({
             },
             isCaptionEnabled ? "Hide For Me" : "Show For Me"
           ) : null,
-          /* @__PURE__ */ import_react65.default.createElement(
+          /* @__PURE__ */ import_react66.default.createElement(
             Button,
             {
               variant: isTranscriptionEnabled ? "danger" : "primary",
@@ -13818,7 +13932,7 @@ var init_CaptionContent = __esm({
                       title: `Disabling Closed Caption for everyone.`,
                       variant: "standard",
                       duration: DURATION,
-                      icon: /* @__PURE__ */ import_react65.default.createElement(Loading, { color: "currentColor" })
+                      icon: /* @__PURE__ */ import_react66.default.createElement(Loading, { color: "currentColor" })
                     });
                     setToastId(id2);
                     onExit();
@@ -13831,14 +13945,14 @@ var init_CaptionContent = __esm({
                     title: `Enabling Closed Caption for everyone.`,
                     variant: "standard",
                     duration: DURATION,
-                    icon: /* @__PURE__ */ import_react65.default.createElement(Loading, { color: "currentColor" })
+                    icon: /* @__PURE__ */ import_react66.default.createElement(Loading, { color: "currentColor" })
                   });
                   setToastId(id);
                 } catch (err) {
                   const id = ToastManager.replaceToast(toastId, {
                     title: `Failed to ${isTranscriptionEnabled ? "disable" : "enable"} closed caption`,
                     variant: "error",
-                    icon: /* @__PURE__ */ import_react65.default.createElement(import_react_icons26.AlertTriangleIcon, { style: { marginRight: "0.5rem" } })
+                    icon: /* @__PURE__ */ import_react66.default.createElement(import_react_icons26.AlertTriangleIcon, { style: { marginRight: "0.5rem" } })
                   });
                   setToastId(id);
                 } finally {
@@ -13851,18 +13965,18 @@ var init_CaptionContent = __esm({
             " for Everyone"
           )
         )
-      ), isMobile && /* @__PURE__ */ import_react65.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$4", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later."));
+      ), isMobile && /* @__PURE__ */ import_react66.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$4", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later."));
     };
   }
 });
 
 // src/Prebuilt/components/MoreSettings/CaptionModal.tsx
-var import_react66, import_react_use10, CaptionModal;
+var import_react67, import_react_use10, CaptionModal;
 var init_CaptionModal = __esm({
   "src/Prebuilt/components/MoreSettings/CaptionModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react66 = __toESM(require("react"));
+    import_react67 = __toESM(require("react"));
     import_react_use10 = require("react-use");
     init_src();
     init_Sheet2();
@@ -13876,26 +13990,26 @@ var init_CaptionModal = __esm({
         }
       };
       if (isMobile) {
-        return /* @__PURE__ */ import_react66.default.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react66.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ import_react66.default.createElement(CaptionContent, __spreadValues({}, props))));
+        return /* @__PURE__ */ import_react67.default.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react67.default.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ import_react67.default.createElement(CaptionContent, __spreadValues({}, props))));
       }
-      return /* @__PURE__ */ import_react66.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react66.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react66.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react66.default.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ import_react66.default.createElement(CaptionContent, __spreadValues({}, props)))));
+      return /* @__PURE__ */ import_react67.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react67.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react67.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react67.default.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ import_react67.default.createElement(CaptionContent, __spreadValues({}, props)))));
     };
   }
 });
 
 // src/Prebuilt/components/hooks/useFullscreen.ts
-var import_react67, import_screenfull, useFullscreen;
+var import_react68, import_screenfull, useFullscreen;
 var init_useFullscreen = __esm({
   "src/Prebuilt/components/hooks/useFullscreen.ts"() {
     "use strict";
     init_define_process_env();
-    import_react67 = require("react");
+    import_react68 = require("react");
     import_screenfull = __toESM(require("screenfull"));
     init_ToastManager();
     init_constants();
     useFullscreen = () => {
-      const [isFullScreenEnabled, setIsFullScreenEnabled] = (0, import_react67.useState)(import_screenfull.default.isFullscreen);
-      const toggle = (0, import_react67.useCallback)(() => __async(void 0, null, function* () {
+      const [isFullScreenEnabled, setIsFullScreenEnabled] = (0, import_react68.useState)(import_screenfull.default.isFullscreen);
+      const toggle = (0, import_react68.useCallback)(() => __async(void 0, null, function* () {
         if (!import_screenfull.default.isEnabled) {
           ToastManager.addToast({ title: "Fullscreen feature not supported" });
           return;
@@ -13911,7 +14025,7 @@ var init_useFullscreen = __esm({
           ToastManager.addToast({ title: err.message });
         }
       }), [isFullScreenEnabled]);
-      (0, import_react67.useEffect)(() => {
+      (0, import_react68.useEffect)(() => {
         const onChange = () => {
           setIsFullScreenEnabled(import_screenfull.default.isFullscreen);
         };
@@ -13934,12 +14048,12 @@ var init_useFullscreen = __esm({
 });
 
 // src/Prebuilt/components/MoreSettings/FullScreenItem.tsx
-var import_react68, import_react_icons27, FullScreenItem;
+var import_react69, import_react_icons27, FullScreenItem;
 var init_FullScreenItem = __esm({
   "src/Prebuilt/components/MoreSettings/FullScreenItem.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react68 = __toESM(require("react"));
+    import_react69 = __toESM(require("react"));
     import_react_icons27 = require("@100mslive/react-icons");
     init_src();
     init_useFullscreen();
@@ -13948,7 +14062,7 @@ var init_FullScreenItem = __esm({
       if (!allowed) {
         return null;
       }
-      return /* @__PURE__ */ import_react68.default.createElement(
+      return /* @__PURE__ */ import_react69.default.createElement(
         Dropdown.Item,
         {
           onClick: () => {
@@ -13956,8 +14070,8 @@ var init_FullScreenItem = __esm({
           },
           "data-testid": "full_screen_btn"
         },
-        /* @__PURE__ */ import_react68.default.createElement(import_react_icons27.ExpandIcon, null),
-        /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
+        /* @__PURE__ */ import_react69.default.createElement(import_react_icons27.ExpandIcon, null),
+        /* @__PURE__ */ import_react69.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
       );
     };
   }
@@ -13985,12 +14099,12 @@ var init_constants3 = __esm({
 });
 
 // src/Prebuilt/components/MoreSettings/MuteAllContent.tsx
-var import_react69, import_react_sdk28, MuteAllContent;
+var import_react70, import_react_sdk28, MuteAllContent;
 var init_MuteAllContent = __esm({
   "src/Prebuilt/components/MoreSettings/MuteAllContent.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react69 = __toESM(require("react"));
+    import_react70 = __toESM(require("react"));
     import_react_sdk28 = require("@100mslive/react-sdk");
     init_Button2();
     init_Label2();
@@ -14002,7 +14116,7 @@ var init_MuteAllContent = __esm({
     MuteAllContent = (props) => {
       const roles = props.roles || [];
       const permissions = (0, import_react_sdk28.useHMSStore)(import_react_sdk28.selectPermissions);
-      return /* @__PURE__ */ import_react69.default.createElement(import_react69.default.Fragment, null, /* @__PURE__ */ import_react69.default.createElement(
+      return /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, /* @__PURE__ */ import_react70.default.createElement(
         DialogSelect,
         {
           title: "Role",
@@ -14012,7 +14126,7 @@ var init_MuteAllContent = __esm({
           labelField: "label",
           onChange: props.setRole
         }
-      ), /* @__PURE__ */ import_react69.default.createElement(
+      ), /* @__PURE__ */ import_react70.default.createElement(
         DialogSelect,
         {
           title: "Track type",
@@ -14022,7 +14136,7 @@ var init_MuteAllContent = __esm({
           keyField: "value",
           labelField: "label"
         }
-      ), /* @__PURE__ */ import_react69.default.createElement(
+      ), /* @__PURE__ */ import_react70.default.createElement(
         DialogSelect,
         {
           title: "Track source",
@@ -14032,18 +14146,18 @@ var init_MuteAllContent = __esm({
           keyField: "value",
           labelField: "label"
         }
-      ), /* @__PURE__ */ import_react69.default.createElement(DialogRow, null, /* @__PURE__ */ import_react69.default.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ import_react69.default.createElement(RadioGroup.Root, { value: String(props.enabled), onValueChange: (value) => props.setEnabled(value === "true") }, (permissions == null ? void 0 : permissions.mute) && /* @__PURE__ */ import_react69.default.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ import_react69.default.createElement(RadioGroup.Item, { value: "false", id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ import_react69.default.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ import_react69.default.createElement(Label3, { htmlFor: "trackDisableRadio" }, "Mute")), (permissions == null ? void 0 : permissions.unmute) && /* @__PURE__ */ import_react69.default.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ import_react69.default.createElement(RadioGroup.Item, { value: "true", id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ import_react69.default.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ import_react69.default.createElement(Label3, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ import_react69.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react69.default.createElement(Button, { variant: "primary", onClick: props.muteAll, css: { w: (props == null ? void 0 : props.isMobile) ? "100%" : "" } }, "Apply")));
+      ), /* @__PURE__ */ import_react70.default.createElement(DialogRow, null, /* @__PURE__ */ import_react70.default.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ import_react70.default.createElement(RadioGroup.Root, { value: String(props.enabled), onValueChange: (value) => props.setEnabled(value === "true") }, (permissions == null ? void 0 : permissions.mute) && /* @__PURE__ */ import_react70.default.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ import_react70.default.createElement(RadioGroup.Item, { value: "false", id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ import_react70.default.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ import_react70.default.createElement(Label3, { htmlFor: "trackDisableRadio" }, "Mute")), (permissions == null ? void 0 : permissions.unmute) && /* @__PURE__ */ import_react70.default.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ import_react70.default.createElement(RadioGroup.Item, { value: "true", id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ import_react70.default.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ import_react70.default.createElement(Label3, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ import_react70.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react70.default.createElement(Button, { variant: "primary", onClick: props.muteAll, css: { w: (props == null ? void 0 : props.isMobile) ? "100%" : "" } }, "Apply")));
     };
   }
 });
 
 // src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
-var import_react70, import_react_sdk29, import_react_icons28, MuteAllModal;
+var import_react71, import_react_sdk29, import_react_icons28, MuteAllModal;
 var init_MuteAllModal = __esm({
   "src/Prebuilt/components/MoreSettings/MuteAllModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react70 = __toESM(require("react"));
+    import_react71 = __toESM(require("react"));
     import_react_sdk29 = require("@100mslive/react-sdk");
     import_react_icons28 = require("@100mslive/react-icons");
     init_src();
@@ -14056,11 +14170,11 @@ var init_MuteAllModal = __esm({
     }) => {
       const roles = (0, import_react_sdk29.useHMSStore)(import_react_sdk29.selectAvailableRoleNames);
       const hmsActions = (0, import_react_sdk29.useHMSActions)();
-      const [enabled, setEnabled] = (0, import_react70.useState)(false);
-      const [trackType, setTrackType] = (0, import_react70.useState)();
-      const [selectedRole, setRole] = (0, import_react70.useState)();
-      const [selectedSource, setSource] = (0, import_react70.useState)();
-      const muteAll = (0, import_react70.useCallback)(() => __async(void 0, null, function* () {
+      const [enabled, setEnabled] = (0, import_react71.useState)(false);
+      const [trackType, setTrackType] = (0, import_react71.useState)();
+      const [selectedRole, setRole] = (0, import_react71.useState)();
+      const [selectedSource, setSource] = (0, import_react71.useState)();
+      const muteAll = (0, import_react71.useCallback)(() => __async(void 0, null, function* () {
         yield hmsActions.setRemoteTracksEnabled({
           enabled,
           type: trackType,
@@ -14083,20 +14197,20 @@ var init_MuteAllModal = __esm({
         isMobile
       };
       if (isMobile) {
-        return /* @__PURE__ */ import_react70.default.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react70.default.createElement(Sheet.Content, { css: { px: "$10" } }, /* @__PURE__ */ import_react70.default.createElement(MuteAllContent, __spreadValues({}, props))));
+        return /* @__PURE__ */ import_react71.default.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react71.default.createElement(Sheet.Content, { css: { px: "$10" } }, /* @__PURE__ */ import_react71.default.createElement(MuteAllContent, __spreadValues({}, props))));
       }
-      return /* @__PURE__ */ import_react70.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react70.default.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: import_react_icons28.MicOffIcon }, /* @__PURE__ */ import_react70.default.createElement(MuteAllContent, __spreadValues({}, props))));
+      return /* @__PURE__ */ import_react71.default.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ import_react71.default.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: import_react_icons28.MicOffIcon }, /* @__PURE__ */ import_react71.default.createElement(MuteAllContent, __spreadValues({}, props))));
     };
   }
 });
 
 // src/Prebuilt/components/hooks/useMetadata.tsx
-var import_react71, import_react_sdk30, useMyMetadata;
+var import_react72, import_react_sdk30, useMyMetadata;
 var init_useMetadata = __esm({
   "src/Prebuilt/components/hooks/useMetadata.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react71 = require("react");
+    import_react72 = require("react");
     import_react_sdk30 = require("@100mslive/react-sdk");
     useMyMetadata = () => {
       const hmsActions = (0, import_react_sdk30.useHMSActions)();
@@ -14114,7 +14228,7 @@ var init_useMetadata = __esm({
         }
         return false;
       });
-      const toggleHandRaise = (0, import_react71.useCallback)(() => __async(void 0, null, function* () {
+      const toggleHandRaise = (0, import_react72.useCallback)(() => __async(void 0, null, function* () {
         if (isHandRaised) {
           yield hmsActions.lowerLocalPeerHand();
         } else {
@@ -14122,7 +14236,7 @@ var init_useMetadata = __esm({
           yield update({ isBRBOn: false });
         }
       }), [isHandRaised]);
-      const toggleBRB = (0, import_react71.useCallback)(() => __async(void 0, null, function* () {
+      const toggleBRB = (0, import_react72.useCallback)(() => __async(void 0, null, function* () {
         const newValue = !(metaData == null ? void 0 : metaData.isBRBOn);
         yield update({ isBRBOn: newValue });
         if (newValue) {
@@ -14142,12 +14256,12 @@ var init_useMetadata = __esm({
 });
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
-var import_react72, import_hls_player, import_ts_pattern4, import_react_sdk31, import_react_icons29, MODALS, DesktopOptions;
+var import_react73, import_hls_player, import_ts_pattern4, import_react_sdk31, import_react_icons29, MODALS, DesktopOptions;
 var init_DesktopOptions = __esm({
   "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react72 = __toESM(require("react"));
+    import_react73 = __toESM(require("react"));
     import_hls_player = require("@100mslive/hls-player");
     import_ts_pattern4 = require("ts-pattern");
     import_react_sdk31 = require("@100mslive/react-sdk");
@@ -14186,7 +14300,7 @@ var init_DesktopOptions = __esm({
       const localPeerId = (0, import_react_sdk31.useHMSStore)(import_react_sdk31.selectLocalPeerID);
       const hmsActions = (0, import_react_sdk31.useHMSActions)();
       const enablHlsStats = (0, import_react_sdk31.useHMSStore)((0, import_react_sdk31.selectAppData)(APP_DATA.hlsStats));
-      const [openModals, setOpenModals] = (0, import_react72.useState)(/* @__PURE__ */ new Set());
+      const [openModals, setOpenModals] = (0, import_react73.useState)(/* @__PURE__ */ new Set());
       const { isBRBOn, toggleBRB } = useMyMetadata();
       const isPipOn = PictureInPicture.isOn();
       const isBRBEnabled = !!(elements == null ? void 0 : elements.brb);
@@ -14205,15 +14319,15 @@ var init_DesktopOptions = __esm({
           return copy;
         });
       };
-      return /* @__PURE__ */ import_react72.default.createElement(import_react72.Fragment, null, /* @__PURE__ */ import_react72.default.createElement(
+      return /* @__PURE__ */ import_react73.default.createElement(import_react73.Fragment, null, /* @__PURE__ */ import_react73.default.createElement(
         Dropdown.Root,
         {
           open: openModals.has(MODALS.MORE_SETTINGS),
           onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value),
           modal: false
         },
-        /* @__PURE__ */ import_react72.default.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ import_react72.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ import_react72.default.createElement(IconButton_default, null, /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.HamburgerMenuIcon, null)))),
-        /* @__PURE__ */ import_react72.default.createElement(
+        /* @__PURE__ */ import_react73.default.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ import_react73.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ import_react73.default.createElement(IconButton_default, null, /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.HamburgerMenuIcon, null)))),
+        /* @__PURE__ */ import_react73.default.createElement(
           Dropdown.Content,
           {
             sideOffset: 5,
@@ -14227,8 +14341,8 @@ var init_DesktopOptions = __esm({
               }
             }
           },
-          isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ import_react72.default.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.BrbIcon, null), /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ import_react72.default.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.CheckIcon, null) : null)) : null,
-          isTranscriptionAllowed ? /* @__PURE__ */ import_react72.default.createElement(
+          isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ import_react73.default.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.BrbIcon, null), /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ import_react73.default.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.CheckIcon, null) : null)) : null,
+          isTranscriptionAllowed ? /* @__PURE__ */ import_react73.default.createElement(
             Dropdown.Item,
             {
               "data-testid": "closed_caption_admin",
@@ -14236,61 +14350,61 @@ var init_DesktopOptions = __esm({
                 updateState(MODALS.CAPTION, true);
               }
             },
-            /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.OpenCaptionIcon, null),
-            /* @__PURE__ */ import_react72.default.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Closed Captions"), /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "caption", css: { ml: "$4", color: "$on_surface_medium" } }, isTranscriptionEnabled ? "Enabled" : "Disabled")),
-            /* @__PURE__ */ import_react72.default.createElement(Switch, { id: "closed_caption_start_stop", checked: isTranscriptionEnabled, disabled: false })
+            /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.OpenCaptionIcon, null),
+            /* @__PURE__ */ import_react73.default.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Closed Captions"), /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "caption", css: { ml: "$4", color: "$on_surface_medium" } }, isTranscriptionEnabled ? "Enabled" : "Disabled")),
+            /* @__PURE__ */ import_react73.default.createElement(Switch, { id: "closed_caption_start_stop", checked: isTranscriptionEnabled, disabled: false })
           ) : null,
-          screenType !== "hls_live_streaming" ? /* @__PURE__ */ import_react72.default.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ import_react72.default.createElement(
+          screenType !== "hls_live_streaming" ? /* @__PURE__ */ import_react73.default.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ import_react73.default.createElement(
             PIP,
             {
-              content: /* @__PURE__ */ import_react72.default.createElement(Flex, { css: { w: "100%", h: "100%", p: "$8" } }, /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.PipIcon, null), /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isPipOn ? "Disable" : "Enable", " Picture-in-Picture"))
+              content: /* @__PURE__ */ import_react73.default.createElement(Flex, { css: { w: "100%", h: "100%", p: "$8" } }, /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.PipIcon, null), /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isPipOn ? "Disable" : "Enable", " Picture-in-Picture"))
             }
           )) : null,
-          /* @__PURE__ */ import_react72.default.createElement(FullScreenItem, null),
-          /* @__PURE__ */ import_react72.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
-          /* @__PURE__ */ import_react72.default.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.SettingsIcon, null), /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
+          /* @__PURE__ */ import_react73.default.createElement(FullScreenItem, null),
+          /* @__PURE__ */ import_react73.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
+          /* @__PURE__ */ import_react73.default.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.SettingsIcon, null), /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
           (0, import_ts_pattern4.match)({ screenType, isSupported: import_hls_player.HMSHLSPlayer.isSupported() }).with({ screenType: "hls_live_streaming", isSupported: false }, () => null).with({ screenType: "hls_live_streaming", isSupported: true }, () => {
-            return /* @__PURE__ */ import_react72.default.createElement(
+            return /* @__PURE__ */ import_react73.default.createElement(
               Dropdown.Item,
               {
                 onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
                 "data-testid": "hls_stats"
               },
-              /* @__PURE__ */ import_react72.default.createElement(
+              /* @__PURE__ */ import_react73.default.createElement(
                 Checkbox.Root,
                 {
                   css: { margin: "$2" },
                   checked: enablHlsStats,
                   onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
                 },
-                /* @__PURE__ */ import_react72.default.createElement(Checkbox.Indicator, null, /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.CheckIcon, { width: 16, height: 16 }))
+                /* @__PURE__ */ import_react73.default.createElement(Checkbox.Indicator, null, /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.CheckIcon, { width: 16, height: 16 }))
               ),
-              /* @__PURE__ */ import_react72.default.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
+              /* @__PURE__ */ import_react73.default.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
             );
-          }).otherwise(() => /* @__PURE__ */ import_react72.default.createElement(
+          }).otherwise(() => /* @__PURE__ */ import_react73.default.createElement(
             Dropdown.Item,
             {
               onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
               "data-testid": "stats_for_nerds_btn"
             },
-            /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.InfoIcon, null),
-            /* @__PURE__ */ import_react72.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
+            /* @__PURE__ */ import_react73.default.createElement(import_react_icons29.InfoIcon, null),
+            /* @__PURE__ */ import_react73.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
           ))
         )
-      ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ import_react72.default.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ import_react72.default.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ import_react72.default.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ import_react72.default.createElement(
+      ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ import_react73.default.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ import_react73.default.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ import_react73.default.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ import_react73.default.createElement(
         SettingsModal_default,
         {
           open: true,
           onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value),
           screenType
         }
-      ), openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ import_react72.default.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ import_react72.default.createElement(
+      ), openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ import_react73.default.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ import_react73.default.createElement(
         RoleChangeModal,
         {
           peerId: localPeerId,
           onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value)
         }
-      ), openModals.has(MODALS.CAPTION) && /* @__PURE__ */ import_react72.default.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS.CAPTION, value) }));
+      ), openModals.has(MODALS.CAPTION) && /* @__PURE__ */ import_react73.default.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS.CAPTION, value) }));
     };
   }
 });
@@ -19937,7 +20051,7 @@ var init_dist = __esm({
     };
     Ba = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
     cr = Ba((Ic, Ja) => {
-      Ja.exports = { version: "0.12.13-alpha.2", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
+      Ja.exports = { version: "0.12.13-alpha.4", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
     });
     tr = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(tr || {});
     Va = ((e) => (e.CHAT = "chat", e))(Va || {});
@@ -20943,28 +21057,28 @@ var init_dist = __esm({
 });
 
 // src/Prebuilt/components/hooks/usePlaylistMusic.js
-var import_react73, import_react_sdk32, usePlaylistMusic;
+var import_react74, import_react_sdk32, usePlaylistMusic;
 var init_usePlaylistMusic = __esm({
   "src/Prebuilt/components/hooks/usePlaylistMusic.js"() {
     "use strict";
     init_define_process_env();
-    import_react73 = require("react");
+    import_react74 = require("react");
     import_react_sdk32 = require("@100mslive/react-sdk");
     usePlaylistMusic = () => {
       const peer = (0, import_react_sdk32.useHMSStore)(import_react_sdk32.selectPeerSharingAudioPlaylist);
       const track = (0, import_react_sdk32.useHMSStore)((0, import_react_sdk32.selectAudioPlaylistTrackByPeerID)(peer == null ? void 0 : peer.id));
       const selection = (0, import_react_sdk32.useHMSStore)(import_react_sdk32.selectAudioPlaylist.selectedItem);
       const hmsActions = (0, import_react_sdk32.useHMSActions)();
-      const play = (0, import_react73.useCallback)(
+      const play = (0, import_react74.useCallback)(
         (selectedId) => __async(void 0, null, function* () {
           yield hmsActions.audioPlaylist.play(selectedId);
         }),
         [hmsActions]
       );
-      const pause = (0, import_react73.useCallback)(() => {
+      const pause = (0, import_react74.useCallback)(() => {
         hmsActions.audioPlaylist.pause();
       }, [hmsActions]);
-      const setVolume = (0, import_react73.useCallback)(
+      const setVolume = (0, import_react74.useCallback)(
         (value) => {
           hmsActions.setVolume(value, track == null ? void 0 : track.id);
         },
@@ -20976,18 +21090,18 @@ var init_usePlaylistMusic = __esm({
 });
 
 // src/Prebuilt/components/hooks/useScreenshareAudio.js
-var import_react74, import_react_sdk33, useScreenshareAudio;
+var import_react75, import_react_sdk33, useScreenshareAudio;
 var init_useScreenshareAudio = __esm({
   "src/Prebuilt/components/hooks/useScreenshareAudio.js"() {
     "use strict";
     init_define_process_env();
-    import_react74 = require("react");
+    import_react75 = require("react");
     import_react_sdk33 = require("@100mslive/react-sdk");
     useScreenshareAudio = () => {
       const hmsActions = (0, import_react_sdk33.useHMSActions)();
       const peer = (0, import_react_sdk33.useHMSStore)(import_react_sdk33.selectPeerSharingAudio);
       const track = (0, import_react_sdk33.useHMSStore)((0, import_react_sdk33.selectScreenShareAudioByPeerID)(peer == null ? void 0 : peer.id));
-      const handleMute = (0, import_react74.useCallback)(() => {
+      const handleMute = (0, import_react75.useCallback)(() => {
         if (!peer.isLocal) {
           hmsActions.setVolume(!track.volume ? 100 : 0, track.id);
         } else {
@@ -21004,12 +21118,12 @@ var init_useScreenshareAudio = __esm({
 });
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
-var import_react75, import_react_sdk34, import_react_icons30, getRecordingText, AdditionalRoomState;
+var import_react76, import_react_sdk34, import_react_icons30, getRecordingText, AdditionalRoomState;
 var init_AdditionalRoomState = __esm({
   "src/Prebuilt/components/Header/AdditionalRoomState.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react75 = __toESM(require("react"));
+    import_react76 = __toESM(require("react"));
     import_react_sdk34 = require("@100mslive/react-sdk");
     import_react_icons30 = require("@100mslive/react-icons");
     init_src();
@@ -21038,7 +21152,7 @@ var init_AdditionalRoomState = __esm({
       const playlist = usePlaylistMusic();
       const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
       const screenshareAudio = useScreenshareAudio();
-      const [open, setOpen] = (0, import_react75.useState)(false);
+      const [open, setOpen] = (0, import_react76.useState)(false);
       const isPlaylistInactive = [
         !playlist.peer || !playlist.track,
         !((_a8 = playlist.peer) == null ? void 0 : _a8.isLocal) && !((_b7 = playlist.track) == null ? void 0 : _b7.enabled),
@@ -21058,7 +21172,7 @@ var init_AdditionalRoomState = __esm({
       if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
         return null;
       }
-      return /* @__PURE__ */ import_react75.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react75.default.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ import_react75.default.createElement(
+      return /* @__PURE__ */ import_react76.default.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react76.default.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ import_react76.default.createElement(
         Flex,
         {
           align: "center",
@@ -21071,12 +21185,12 @@ var init_AdditionalRoomState = __esm({
           },
           "data-testid": "record_status_dropdown"
         },
-        !isAudioshareInactive && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ import_react75.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.MusicIcon, { width: 24, height: 24 }))),
-        shouldShowScreenShareState && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ import_react75.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.ShareScreenIcon, { width: 24, height: 24 }))),
-        shouldShowVideoState && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ import_react75.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.VideoPlayerIcon, { width: 24, height: 24 }))),
-        !isPlaylistInactive && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ import_react75.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.AudioPlayerIcon, { width: 24, height: 24 }))),
-        /* @__PURE__ */ import_react75.default.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.ChevronUpIcon, null) : /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.ChevronDownIcon, null))
-      )), /* @__PURE__ */ import_react75.default.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ import_react75.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react75.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ import_react75.default.createElement(
+        !isAudioshareInactive && /* @__PURE__ */ import_react76.default.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.MusicIcon, { width: 24, height: 24 }))),
+        shouldShowScreenShareState && /* @__PURE__ */ import_react76.default.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.ShareScreenIcon, { width: 24, height: 24 }))),
+        shouldShowVideoState && /* @__PURE__ */ import_react76.default.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.VideoPlayerIcon, { width: 24, height: 24 }))),
+        !isPlaylistInactive && /* @__PURE__ */ import_react76.default.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.AudioPlayerIcon, { width: 24, height: 24 }))),
+        /* @__PURE__ */ import_react76.default.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.ChevronUpIcon, null) : /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.ChevronDownIcon, null))
+      )), /* @__PURE__ */ import_react76.default.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ import_react76.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ import_react76.default.createElement(
         Text,
         {
           variant: "sm",
@@ -21087,7 +21201,7 @@ var init_AdditionalRoomState = __esm({
           }
         },
         playlist.selection.playing ? "Pause" : "Play"
-      ) : /* @__PURE__ */ import_react75.default.createElement(
+      ) : /* @__PURE__ */ import_react76.default.createElement(
         Text,
         {
           variant: "sm",
@@ -21098,7 +21212,7 @@ var init_AdditionalRoomState = __esm({
           }
         },
         playlist.track.volume === 0 ? "Unmute" : "Mute"
-      )), !isAudioshareInactive && /* @__PURE__ */ import_react75.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react75.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ import_react75.default.createElement(
+      )), !isAudioshareInactive && /* @__PURE__ */ import_react76.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ import_react76.default.createElement(
         Text,
         {
           variant: "sm",
@@ -21109,18 +21223,18 @@ var init_AdditionalRoomState = __esm({
           }
         },
         screenshareAudio.muted ? "Unmute" : "Mute"
-      )), shouldShowScreenShareState && /* @__PURE__ */ import_react75.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react75.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ import_react75.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react75.default.createElement(import_react_icons30.VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react75.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`))));
+      )), shouldShowScreenShareState && /* @__PURE__ */ import_react76.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ import_react76.default.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons30.VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`))));
     };
   }
 });
 
 // src/Prebuilt/components/Header/StreamActions.tsx
-var import_react76, import_react_use11, import_react_sdk35, import_react_icons31, LiveStatus, RecordingStatus, RecordingPauseStatus, StartRecording2, StreamActions, StopRecordingInSheet;
+var import_react77, import_react_use11, import_react_sdk35, import_react_icons31, LiveStatus, RecordingStatus, RecordingPauseStatus, StartRecording2, StreamActions, StopRecordingInSheet;
 var init_StreamActions = __esm({
   "src/Prebuilt/components/Header/StreamActions.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react76 = __toESM(require("react"));
+    import_react77 = __toESM(require("react"));
     import_react_use11 = require("react-use");
     init_dist();
     import_react_sdk35 = require("@100mslive/react-sdk");
@@ -21137,10 +21251,10 @@ var init_StreamActions = __esm({
       const { isHLSRunning, isRTMPRunning } = (0, import_react_sdk35.useRecordingStreaming)();
       const hlsState = (0, import_react_sdk35.useHMSStore)(import_react_sdk35.selectHLSState);
       const isMobile = (0, import_react_use11.useMedia)(config.media.md);
-      const intervalRef = (0, import_react76.useRef)(null);
+      const intervalRef = (0, import_react77.useRef)(null);
       const { screenType } = useRoomLayoutConferencingScreen();
-      const [liveTime, setLiveTime] = (0, import_react76.useState)(0);
-      const startTimer = (0, import_react76.useCallback)(() => {
+      const [liveTime, setLiveTime] = (0, import_react77.useState)(0);
+      const startTimer = (0, import_react77.useCallback)(() => {
         intervalRef.current = setInterval(() => {
           var _a9;
           const timeStamp = (_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9[screenType === "hls_live_streaming" ? "startedAt" : "initialisedAt"];
@@ -21149,7 +21263,7 @@ var init_StreamActions = __esm({
           }
         }, 1e3);
       }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType]);
-      (0, import_react76.useEffect)(() => {
+      (0, import_react77.useEffect)(() => {
         if (hlsState == null ? void 0 : hlsState.running) {
           startTimer();
         }
@@ -21165,7 +21279,7 @@ var init_StreamActions = __esm({
       if (!isHLSRunning && !isRTMPRunning) {
         return null;
       }
-      return /* @__PURE__ */ import_react76.default.createElement(
+      return /* @__PURE__ */ import_react77.default.createElement(
         Flex,
         {
           align: "center",
@@ -21176,8 +21290,8 @@ var init_StreamActions = __esm({
             borderRadius: "$1"
           }
         },
-        /* @__PURE__ */ import_react76.default.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
-        /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ import_react76.default.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "caption" }, ((_a8 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a8.length) > 0 && isHLSRunning ? formatTime(liveTime) : ""))
+        /* @__PURE__ */ import_react77.default.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
+        /* @__PURE__ */ import_react77.default.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ import_react77.default.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ import_react77.default.createElement(Text, { variant: "caption" }, ((_a8 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a8.length) > 0 && isHLSRunning ? formatTime(liveTime) : ""))
       );
     };
     RecordingStatus = () => {
@@ -21192,7 +21306,7 @@ var init_StreamActions = __esm({
         if (!(isMobile && isRecordingOn))
           return null;
       }
-      return /* @__PURE__ */ import_react76.default.createElement(
+      return /* @__PURE__ */ import_react77.default.createElement(
         Tooltip,
         {
           boxCss: { zIndex: 1 },
@@ -21202,7 +21316,7 @@ var init_StreamActions = __esm({
             isHLSRecordingOn
           })
         },
-        /* @__PURE__ */ import_react76.default.createElement(
+        /* @__PURE__ */ import_react77.default.createElement(
           Flex,
           {
             css: {
@@ -21210,14 +21324,14 @@ var init_StreamActions = __esm({
               alignItems: "center"
             }
           },
-          /* @__PURE__ */ import_react76.default.createElement(import_react_icons31.RecordIcon, { width: 24, height: 24 })
+          /* @__PURE__ */ import_react77.default.createElement(import_react_icons31.RecordIcon, { width: 24, height: 24 })
         )
       );
     };
     RecordingPauseStatus = () => {
       const recording = (0, import_react_sdk35.useHMSStore)(import_react_sdk35.selectRecordingState);
       if (recording.hls && recording.hls.state === Ss.PAUSED) {
-        return /* @__PURE__ */ import_react76.default.createElement(
+        return /* @__PURE__ */ import_react77.default.createElement(
           Tooltip,
           {
             boxCss: { zIndex: 1 },
@@ -21227,7 +21341,7 @@ var init_StreamActions = __esm({
               isHLSRecordingOn: true
             })
           },
-          /* @__PURE__ */ import_react76.default.createElement(
+          /* @__PURE__ */ import_react77.default.createElement(
             Flex,
             {
               css: {
@@ -21235,7 +21349,7 @@ var init_StreamActions = __esm({
                 alignItems: "center"
               }
             },
-            /* @__PURE__ */ import_react76.default.createElement(import_react_icons31.PauseCircleIcon, { width: 24, height: 24 })
+            /* @__PURE__ */ import_react77.default.createElement(import_react_icons31.PauseCircleIcon, { width: 24, height: 24 })
           )
         );
       }
@@ -21243,7 +21357,7 @@ var init_StreamActions = __esm({
     };
     StartRecording2 = () => {
       const permissions = (0, import_react_sdk35.useHMSStore)(import_react_sdk35.selectPermissions);
-      const [open, setOpen] = (0, import_react76.useState)(false);
+      const [open, setOpen] = (0, import_react77.useState)(false);
       const { startRecording, recordingStarted } = useRecordingHandler();
       const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = (0, import_react_sdk35.useRecordingStreaming)();
       const hmsActions = (0, import_react_sdk35.useHMSActions)();
@@ -21251,7 +21365,7 @@ var init_StreamActions = __esm({
         return null;
       }
       if (isBrowserRecordingOn) {
-        return /* @__PURE__ */ import_react76.default.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react76.default.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ import_react76.default.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons31.RecordIcon, null), /* @__PURE__ */ import_react76.default.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ import_react76.default.createElement(Popover2.Portal, null, /* @__PURE__ */ import_react76.default.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ import_react76.default.createElement(
+        return /* @__PURE__ */ import_react77.default.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ import_react77.default.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ import_react77.default.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ import_react77.default.createElement(import_react_icons31.RecordIcon, null), /* @__PURE__ */ import_react77.default.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ import_react77.default.createElement(Popover2.Portal, null, /* @__PURE__ */ import_react77.default.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ import_react77.default.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ import_react77.default.createElement(
           Button,
           {
             "data-testid": "stop_recording_confirm",
@@ -21274,7 +21388,7 @@ var init_StreamActions = __esm({
           "Stop"
         ))));
       }
-      return /* @__PURE__ */ import_react76.default.createElement(
+      return /* @__PURE__ */ import_react77.default.createElement(
         Button,
         {
           "data-testid": "start_recording",
@@ -21285,21 +21399,21 @@ var init_StreamActions = __esm({
             yield startRecording();
           })
         },
-        recordingStarted ? /* @__PURE__ */ import_react76.default.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ import_react76.default.createElement(import_react_icons31.RecordIcon, null),
-        /* @__PURE__ */ import_react76.default.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
+        recordingStarted ? /* @__PURE__ */ import_react77.default.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ import_react77.default.createElement(import_react_icons31.RecordIcon, null),
+        /* @__PURE__ */ import_react77.default.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
       );
     };
     StreamActions = () => {
       const isConnected = (0, import_react_sdk35.useHMSStore)(import_react_sdk35.selectIsConnectedToRoom);
       const isMobile = (0, import_react_use11.useMedia)(config.media.md);
       const roomState = (0, import_react_sdk35.useHMSStore)(import_react_sdk35.selectRoomState);
-      return /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react76.default.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ import_react76.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react76.default.createElement(RecordingPauseStatus, null), /* @__PURE__ */ import_react76.default.createElement(RecordingStatus, null), roomState !== import_react_sdk35.HMSRoomState.Preview ? /* @__PURE__ */ import_react76.default.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ import_react76.default.createElement(StartRecording2, null) : null);
+      return /* @__PURE__ */ import_react77.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react77.default.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ import_react77.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react77.default.createElement(RecordingPauseStatus, null), /* @__PURE__ */ import_react77.default.createElement(RecordingStatus, null), roomState !== import_react_sdk35.HMSRoomState.Preview ? /* @__PURE__ */ import_react77.default.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ import_react77.default.createElement(StartRecording2, null) : null);
     };
     StopRecordingInSheet = ({
       onStopRecording,
       onClose
     }) => {
-      return /* @__PURE__ */ import_react76.default.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ import_react76.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react76.default.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ import_react76.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ import_react76.default.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons31.AlertTriangleIcon, null), /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ import_react76.default.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ import_react76.default.createElement(import_react_icons31.CrossIcon, null)))), /* @__PURE__ */ import_react76.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react76.default.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ import_react76.default.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ import_react76.default.createElement(
+      return /* @__PURE__ */ import_react77.default.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ import_react77.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react77.default.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ import_react77.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ import_react77.default.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ import_react77.default.createElement(import_react_icons31.AlertTriangleIcon, null), /* @__PURE__ */ import_react77.default.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ import_react77.default.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ import_react77.default.createElement(import_react_icons31.CrossIcon, null)))), /* @__PURE__ */ import_react77.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react77.default.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ import_react77.default.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ import_react77.default.createElement(
         Button,
         {
           variant: "danger",
@@ -21314,73 +21428,6 @@ var init_StreamActions = __esm({
   }
 });
 
-// src/Prebuilt/components/MoreSettings/ActionTile.jsx
-var import_react77, ActionTileRoot, ActionTileCount, ActionTileTitle, ActionTile;
-var init_ActionTile = __esm({
-  "src/Prebuilt/components/MoreSettings/ActionTile.jsx"() {
-    "use strict";
-    init_define_process_env();
-    import_react77 = __toESM(require("react"));
-    init_Layout();
-    init_Text2();
-    init_Theme();
-    ActionTileRoot = (_a8) => {
-      var _b7 = _a8, { active, disabled = false, children, onClick } = _b7, props = __objRest(_b7, ["active", "disabled", "children", "onClick"]);
-      return /* @__PURE__ */ import_react77.default.createElement(
-        Flex,
-        __spreadProps(__spreadValues({}, props), {
-          css: {
-            flexDirection: "column",
-            alignItems: "center",
-            p: "$4 $2",
-            position: "relative",
-            bg: active ? "$surface_bright" : "",
-            color: disabled ? "$on_surface_low" : "$on_surface_high",
-            gap: "$4",
-            r: "$1",
-            "&:hover": {
-              bg: "$surface_bright"
-            }
-          },
-          onClick: () => {
-            if (!disabled) {
-              onClick();
-            }
-          }
-        }),
-        children
-      );
-    };
-    ActionTileCount = styled(Text, {
-      position: "absolute",
-      top: 0,
-      right: 0,
-      fontWeight: "$semiBold",
-      color: "$on_surface_high",
-      p: "$1 $2",
-      minWidth: "$9",
-      textAlign: "center",
-      boxSizing: "border-box",
-      bg: "$surface_bright",
-      r: "$round",
-      letterSpacing: "1.5px",
-      fontSize: "$tiny !important",
-      lineHeight: "$tiny !important"
-    });
-    ActionTileTitle = styled(Text, {
-      fontWeight: "$semiBold",
-      color: "inherit",
-      textAlign: "center",
-      fontSize: "$xs !important"
-    });
-    ActionTile = {
-      Root: ActionTileRoot,
-      Title: ActionTileTitle,
-      Count: ActionTileCount
-    };
-  }
-});
-
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.tsx
 var import_react78, import_react_icons32, ChangeNameContent;
 var init_ChangeNameContent = __esm({
@@ -21623,6 +21670,7 @@ var init_MwebOptions = __esm({
     init_src();
     init_Sheet2();
     init_IconButton3();
+    init_AudioVideoToggle();
     init_EmojiReaction();
     init_StreamActions();
     init_SettingsModal();
@@ -21751,6 +21799,7 @@ var init_MwebOptions = __esm({
           isHandRaised ? /* @__PURE__ */ import_react82.default.createElement(import_react_icons33.HandRaiseSlashedIcon, null) : /* @__PURE__ */ import_react82.default.createElement(import_react_icons33.HandIcon, null),
           /* @__PURE__ */ import_react82.default.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
         ) : null,
+        /* @__PURE__ */ import_react82.default.createElement(NoiseCancellation, { setOpenOptionsSheet, actionTile: true }),
         isTranscriptionAllowed ? /* @__PURE__ */ import_react82.default.createElement(
           ActionTile.Root,
           {
@@ -29463,7 +29512,7 @@ var init_PreviewJoin = __esm({
           }
         },
         /* @__PURE__ */ import_react164.default.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ import_react164.default.createElement(AudioVideoToggle, null), vbEnabled ? /* @__PURE__ */ import_react164.default.createElement(VBToggle, null) : null),
-        !hideSettings ? /* @__PURE__ */ import_react164.default.createElement(PreviewSettings, null) : null
+        /* @__PURE__ */ import_react164.default.createElement(Flex, { align: "center", gap: "1" }, isMobile && /* @__PURE__ */ import_react164.default.createElement(NoiseCancellation, { iconOnly: true }), !hideSettings ? /* @__PURE__ */ import_react164.default.createElement(PreviewSettings, null) : null)
       );
     };
     PreviewSettings = import_react164.default.memo(() => {
@@ -30698,9 +30747,9 @@ var init_ScreenshareLayout = __esm({
   }
 });
 
-// ../../../../../../../tmp/tmp-2838-XPf5HUTa6Dag/19012ca24e41/index.css
-var init_ca24e41 = __esm({
-  "../../../../../../../tmp/tmp-2838-XPf5HUTa6Dag/19012ca24e41/index.css"() {
+// ../../../../../../../tmp/tmp-2767-Gyfc8R5YbhJI/190163b62cc0/index.css
+var init_b62cc0 = __esm({
+  "../../../../../../../tmp/tmp-2767-Gyfc8R5YbhJI/190163b62cc0/index.css"() {
   }
 });
 
@@ -30722,7 +30771,7 @@ var init_WhiteboardLayout = __esm({
     init_ProminenceLayout();
     init_useUISettings();
     init_constants();
-    init_ca24e41();
+    init_b62cc0();
     WhiteboardEmbed = () => {
       const isMobile = (0, import_react_use42.useMedia)(config.media.md);
       const { token, endpoint, zoomToContent } = (0, import_react_sdk93.useWhiteboard)(isMobile);
@@ -33184,18 +33233,20 @@ var init_HLSView = __esm({
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var import_react203, import_ts_pattern13, import_react_sdk101, import_react_icons97, HLSView2, VideoStreamingSection;
+var import_react203, import_react_use48, import_ts_pattern13, import_react_sdk101, import_react_icons97, HLSView2, VideoStreamingSection;
 var init_VideoStreamingSection = __esm({
   "src/Prebuilt/layouts/VideoStreamingSection.tsx"() {
     "use strict";
     init_define_process_env();
     import_react203 = __toESM(require("react"));
+    import_react_use48 = require("react-use");
     import_ts_pattern13 = require("ts-pattern");
     import_react_sdk101 = require("@100mslive/react-sdk");
     import_react_icons97 = require("@100mslive/react-icons");
     init_FullPageProgress();
     init_GridLayout();
     init_Layout();
+    init_Theme();
     init_EmbedView();
     init_PDFView();
     init_SidePane();
@@ -33219,7 +33270,8 @@ var init_VideoStreamingSection = __esm({
       const pdfAnnotatorActive = usePDFConfig();
       const isMobileHLSStream = useMobileHLSStream();
       const isLandscapeHLSStream = useLandscapeHLSStream();
-      const [captionPosition, setCaptionPosition] = (0, import_react203.useState)({ x: -200, y: 0 });
+      const isMobile = (0, import_react_use48.useMedia)(config.media.md);
+      const [captionPosition, setCaptionPosition] = (0, import_react203.useState)({ x: isMobile ? 0 : -200, y: 0 });
       useCloseScreenshareWhiteboard();
       const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
       (0, import_react203.useEffect)(() => {
@@ -33318,13 +33370,13 @@ var init_VideoStreamingSection = __esm({
 });
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
-var import_react204, import_react_use48, import_react_icons98, RoomDetailsHeader;
+var import_react204, import_react_use49, import_react_icons98, RoomDetailsHeader;
 var init_RoomDetailsHeader = __esm({
   "src/Prebuilt/components/Header/RoomDetailsHeader.tsx"() {
     "use strict";
     init_define_process_env();
     import_react204 = __toESM(require("react"));
-    import_react_use48 = require("react-use");
+    import_react_use49 = require("react-use");
     import_react_icons98 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
@@ -33335,7 +33387,7 @@ var init_RoomDetailsHeader = __esm({
     init_constants();
     RoomDetailsHeader = () => {
       const { title, description } = useRoomLayoutHeader();
-      const isMobile = (0, import_react_use48.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use49.useMedia)(config.media.md);
       const clipLength = 30;
       const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
       const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -33513,13 +33565,13 @@ var init_common2 = __esm({
 });
 
 // src/Prebuilt/components/Header/Header.tsx
-var import_react206, import_react_use49, import_react_sdk103, Header2;
+var import_react206, import_react_use50, import_react_sdk103, Header2;
 var init_Header = __esm({
   "src/Prebuilt/components/Header/Header.tsx"() {
     "use strict";
     init_define_process_env();
     import_react206 = __toESM(require("react"));
-    import_react_use49 = require("react-use");
+    import_react_use50 = require("react-use");
     import_react_sdk103 = require("@100mslive/react-sdk");
     init_src();
     init_HeaderComponents();
@@ -33528,7 +33580,7 @@ var init_Header = __esm({
     init_common2();
     Header2 = () => {
       const roomState = (0, import_react_sdk103.useHMSStore)(import_react_sdk103.selectRoomState);
-      const isMobile = (0, import_react_use49.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use50.useMedia)(config.media.md);
       if (roomState !== import_react_sdk103.HMSRoomState.Connected) {
         return /* @__PURE__ */ import_react206.default.createElement(import_react206.default.Fragment, null);
       }
@@ -34066,13 +34118,13 @@ var init_useRedirectToLeave = __esm({
 });
 
 // src/Prebuilt/AppStateContext.tsx
-var import_react214, import_react_use50, import_ts_pattern14, import_react_sdk108, AppStateContext, useHMSAppStateContext, useAppStateManager;
+var import_react214, import_react_use51, import_ts_pattern14, import_react_sdk108, AppStateContext, useHMSAppStateContext, useAppStateManager;
 var init_AppStateContext = __esm({
   "src/Prebuilt/AppStateContext.tsx"() {
     "use strict";
     init_define_process_env();
     import_react214 = __toESM(require("react"));
-    import_react_use50 = require("react-use");
+    import_react_use51 = require("react-use");
     import_ts_pattern14 = require("ts-pattern");
     import_react_sdk108 = require("@100mslive/react-sdk");
     init_VBHandler();
@@ -34096,7 +34148,7 @@ var init_AppStateContext = __esm({
       const roomLayout = useRoomLayout();
       const [activeState, setActiveState] = import_react214.default.useState();
       const roomState = (0, import_react_sdk108.useHMSStore)(import_react_sdk108.selectRoomState);
-      const prevRoomState = (0, import_react_use50.usePreviousDistinct)(roomState);
+      const prevRoomState = (0, import_react_use51.usePreviousDistinct)(roomState);
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const { redirectToLeave } = useRedirectToLeave();
@@ -34193,13 +34245,13 @@ var init_LeaveScreen = __esm({
 });
 
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
-var import_react216, import_react_use51, import_ts_pattern15, import_react_icons102, MwebLandscapePrompt;
+var import_react216, import_react_use52, import_ts_pattern15, import_react_icons102, MwebLandscapePrompt;
 var init_MwebLandscapePrompt = __esm({
   "src/Prebuilt/components/MwebLandscapePrompt.tsx"() {
     "use strict";
     init_define_process_env();
     import_react216 = __toESM(require("react"));
-    import_react_use51 = require("react-use");
+    import_react_use52 = require("react-use");
     import_ts_pattern15 = require("ts-pattern");
     import_react_icons102 = require("@100mslive/react-icons");
     init_Button2();
@@ -34211,7 +34263,7 @@ var init_MwebLandscapePrompt = __esm({
     init_utils2();
     MwebLandscapePrompt = () => {
       const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = (0, import_react216.useState)(false);
-      const isLandscape = (0, import_react_use51.useMedia)(config.media.ls);
+      const isLandscape = (0, import_react_use52.useMedia)(config.media.ls);
       const isLandscapeHLSStream = useLandscapeHLSStream();
       (0, import_react216.useEffect)(() => {
         var _a8;
@@ -34717,7 +34769,7 @@ function PermissionErrorModal() {
   const notification = (0, import_react_sdk115.useHMSNotifications)(import_react_sdk115.HMSNotificationTypes.ERROR);
   const [deviceType, setDeviceType] = (0, import_react223.useState)("");
   const [isSystemError, setIsSystemError] = (0, import_react223.useState)(false);
-  const isMobile = (0, import_react_use52.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use53.useMedia)(config.media.md);
   (0, import_react223.useEffect)(() => {
     var _a8, _b7, _c, _d, _e;
     if (!notification || ((_a8 = notification.data) == null ? void 0 : _a8.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
@@ -34773,13 +34825,13 @@ function PermissionErrorModal() {
     !isMobile ? /* @__PURE__ */ import_react223.default.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ import_react223.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null
   ))) : null;
 }
-var import_react223, import_react_use52, import_react_sdk115;
+var import_react223, import_react_use53, import_react_sdk115;
 var init_PermissionErrorModal = __esm({
   "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx"() {
     "use strict";
     init_define_process_env();
     import_react223 = __toESM(require("react"));
-    import_react_use52 = require("react-use");
+    import_react_use53 = require("react-use");
     import_react_sdk115 = require("@100mslive/react-sdk");
     init_src();
     init_android_perm_1();
@@ -35221,13 +35273,13 @@ var init_Notifications2 = __esm({
 });
 
 // src/Prebuilt/components/Preview/PreviewScreen.tsx
-var import_react230, import_react_use53, PreviewScreen;
+var import_react230, import_react_use54, PreviewScreen;
 var init_PreviewScreen = __esm({
   "src/Prebuilt/components/Preview/PreviewScreen.tsx"() {
     "use strict";
     init_define_process_env();
     import_react230 = __toESM(require("react"));
-    import_react_use53 = require("react-use");
+    import_react_use54 = require("react-use");
     init_src();
     init_AppContext();
     init_roomLayoutProvider();
@@ -35240,7 +35292,7 @@ var init_PreviewScreen = __esm({
       var _a8, _b7, _c;
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const skipPreview = !isPreviewScreenEnabled;
-      const previewAsRole = (0, import_react_use53.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
+      const previewAsRole = (0, import_react_use54.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
       const { userName } = useHMSPrebuiltContext();
       const initialName = userName || (skipPreview ? "Beam" : "");
       const authToken = useAuthToken();
@@ -35382,7 +35434,7 @@ function FlyingEmoji() {
   const vanillaStore = (0, import_react_sdk124.useHMSVanillaStore)();
   const hmsActions = (0, import_react_sdk124.useHMSActions)();
   const [emojis, setEmojis] = (0, import_react235.useState)([]);
-  const isMobile = (0, import_react_use54.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use55.useMedia)(config.media.md);
   const isLargeRoom = (0, import_react_sdk124.useHMSStore)(import_react_sdk124.selectIsLargeRoom);
   const startingPoints = (0, import_react235.useMemo)(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = (0, import_react235.useCallback)(
@@ -35477,13 +35529,13 @@ function FlyingEmoji() {
     })
   );
 }
-var import_react235, import_react_use54, import_react_sdk124, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
+var import_react235, import_react_use55, import_react_sdk124, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
 var init_FlyingEmoji = __esm({
   "src/Prebuilt/plugins/FlyingEmoji.jsx"() {
     "use strict";
     init_define_process_env();
     import_react235 = __toESM(require("react"));
-    import_react_use54 = require("react-use");
+    import_react_use55 = require("react-use");
     import_react_sdk124 = require("@100mslive/react-sdk");
     init_Layout();
     init_Text2();