@100mslive/roomkit-react 0.3.13-alpha.1 → 0.3.13-alpha.3

package/dist/{chunk-ESKXLCLX.js → chunk-DNADAU4F.js}

@@ -107,7 +107,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_52a0c376-736e-43fa-8130-d8d1753534f4", 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.1", 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.1", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_52a0c376-736e-43fa-8130-d8d1753534f4", 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.1", 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: "593", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_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:3991", 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.1", 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: "9495709193", 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: "bb6605c7147547550e46be6a5108dae4efe81eb8", 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: "dc6805143ccee34fdc7ceb7e67477d8789779698388a7fceec4bb10949a7de21", npm_package_exports___import: "./dist/index.js", STATS_BLT: "true", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/WEB-1453", 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--1718264793550-0.40514503810584857:/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--1718264793350-0.815323746911168:/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--1718264767371-0.9220153593663762:/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--1718264767189-0.09728910461807883:/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_9a499a9b-b760-49ee-9935-4ec8d75d25a0", INVOCATION_ID: "db45fa9a51bf41d8a2f476c2c84b6703", 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: "571", GITHUB_TRIGGERING_ACTOR: "KaustubhKumar05", 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 74", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "WEB-1453", 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.1", 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.1", 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: "false", 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: "bb6605c7147547550e46be6a5108dae4efe81eb8", 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/WEB-1453", GITHUB_ACTOR: "KaustubhKumar05", 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_52a0c376-736e-43fa-8130-d8d1753534f4", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "57426646", 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_52a0c376-736e-43fa-8130-d8d1753534f4", 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_52a0c376-736e-43fa-8130-d8d1753534f4" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_99b1a602-c7f7-49ff-b90b-3a5994e5873b", 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.3", 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.3", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_99b1a602-c7f7-49ff-b90b-3a5994e5873b", 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.3", 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: "591", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_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:17321", 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.3", 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: "9513617529", 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: "602be1333ec3c791f936851843a60d1317b51234", 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: "3cfa293b6f51baf86521fe0161e53bd42f7fb01200f2ad77787ca00c1ffe5cf4", 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--1718356265715-0.895385458255374:/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--1718356265518-0.8388006177201046:/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--1718356240122-0.00009386668753852412:/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--1718356239941-0.942025479378021:/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_57ea8f71-f3e2-4b75-ab78-43beda3dbac5", INVOCATION_ID: "9729fd2d80cc4e509839708b51a3bc94", 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: "574", 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 157", 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.3", 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.3", 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: "602be1333ec3c791f936851843a60d1317b51234", 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_99b1a602-c7f7-49ff-b90b-3a5994e5873b", 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_99b1a602-c7f7-49ff-b90b-3a5994e5873b", 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_99b1a602-c7f7-49ff-b90b-3a5994e5873b" };
   }
 });
 
@@ -12214,10 +12214,10 @@ var usePollViewState = () => {
   };
 };
 var useIsNoiseCancellationEnabled = () => {
-  const IsNoiseCancellationEnabled = useHMSStore2(selectAppDataByPath(APP_DATA.noiseCancellation));
-  return IsNoiseCancellationEnabled;
+  const isNoiseCancellationEnabled = useHMSStore2(selectAppDataByPath(APP_DATA.noiseCancellation));
+  return isNoiseCancellationEnabled;
 };
-var useSetNoiseCancellationEnabled = () => {
+var useSetNoiseCancellation = () => {
   const [isNoiseCancellationEnabled, setNoiseCancellationEnabled] = useSetAppDataByKey(APP_DATA.noiseCancellation);
   return [isNoiseCancellationEnabled, setNoiseCancellationEnabled];
 };
@@ -12752,7 +12752,7 @@ var AppData = React23.memo(() => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const { isLocalVideoEnabled } = useAVToggle();
   const sidepaneOpenedRef = useRef7(false);
-  const [, setNoiseCancellationEnabled] = useSetNoiseCancellationEnabled();
+  const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
   useEffect5(() => {
     var _a9;
     if ((_a9 = elements == null ? void 0 : elements.noise_cancellation) == null ? void 0 : _a9.enabled_by_default) {
@@ -12985,13 +12985,14 @@ import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
 
 // src/Prebuilt/components/AudioVideoToggle.tsx
 init_define_process_env();
-import React32, { Fragment as Fragment3, useEffect as useEffect10, useState as useState10 } from "react";
+import React33, { Fragment as Fragment3, useEffect as useEffect10, useState as useState10 } from "react";
 import { HMSKrispPlugin } from "@100mslive/hms-noise-cancellation";
 import {
   DeviceType as DeviceType2,
   HMSRoomState as HMSRoomState2,
   selectIsLocalAudioPluginPresent,
   selectLocalAudioTrackID,
+  selectLocalPeer,
   selectLocalVideoTrackID as selectLocalVideoTrackID2,
   selectRoom,
   selectRoomState as selectRoomState2,
@@ -13165,9 +13166,67 @@ var IconButtonWithOptions = ({
   )) : null);
 };
 
+// src/Prebuilt/components/MoreSettings/ActionTile.jsx
+init_define_process_env();
+import React27 from "react";
+var ActionTileRoot = (_a8) => {
+  var _b7 = _a8, { active, disabled = false, children, onClick } = _b7, props = __objRest(_b7, ["active", "disabled", "children", "onClick"]);
+  return /* @__PURE__ */ React27.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
+  );
+};
+var 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"
+});
+var ActionTileTitle = styled(Text, {
+  fontWeight: "$semiBold",
+  color: "inherit",
+  textAlign: "center",
+  fontSize: "$xs !important"
+});
+var ActionTile = {
+  Root: ActionTileRoot,
+  Title: ActionTileTitle,
+  Count: ActionTileCount
+};
+
 // src/Prebuilt/components/Settings/SettingsModal.jsx
 init_define_process_env();
-import React31, { useCallback as useCallback7, useEffect as useEffect9, useState as useState9 } from "react";
+import React32, { useCallback as useCallback7, useEffect as useEffect9, useState as useState9 } from "react";
 import { useMedia as useMedia2 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon3, GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
 
@@ -13176,7 +13235,7 @@ init_define_process_env();
 
 // src/Sheet/Sheet.tsx
 init_define_process_env();
-import React27 from "react";
+import React28 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 var SheetRoot = styled(DialogPrimitive2.Root, {
   minHeight: "240px",
@@ -13254,10 +13313,10 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
     side: "bottom"
   }
 });
-var SheetContent = React27.forwardRef(
+var SheetContent = React28.forwardRef(
   (_a8, forwardedRef) => {
     var _b7 = _a8, { children, container } = _b7, props = __objRest(_b7, ["children", "container"]);
-    return /* @__PURE__ */ React27.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React27.createElement(StyledOverlay, null), /* @__PURE__ */ React27.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
+    return /* @__PURE__ */ React28.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React28.createElement(StyledOverlay, null), /* @__PURE__ */ React28.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
   }
 );
 var SheetClose = Dialog.Close;
@@ -13278,7 +13337,7 @@ var Sheet = {
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
 init_define_process_env();
-import React29, { Fragment as Fragment2, useEffect as useEffect8, useRef as useRef9, useState as useState8 } from "react";
+import React30, { Fragment as Fragment2, useEffect as useEffect8, useRef as useRef9, useState as useState8 } from "react";
 import { useMedia } from "react-use";
 import {
   DeviceType,
@@ -13293,10 +13352,10 @@ import { MicOnIcon, SpeakerIcon, VideoOnIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/primitives/DropdownTrigger.jsx
 init_define_process_env();
-import React28 from "react";
+import React29 from "react";
 import { ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon as ChevronUpIcon2 } from "@100mslive/react-icons";
-var DialogDropdownTrigger = React28.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
-  return /* @__PURE__ */ React28.createElement(
+var DialogDropdownTrigger = React29.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
+  return /* @__PURE__ */ React29.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -13310,7 +13369,7 @@ var DialogDropdownTrigger = React28.forwardRef(({ title, css: css2, open, icon,
       }, css2),
       ref
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       Flex,
       {
         css: {
@@ -13321,7 +13380,7 @@ var DialogDropdownTrigger = React28.forwardRef(({ title, css: css2, open, icon,
         }
       },
       icon,
-      /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React29.createElement(
         Text,
         {
           css: __spreadValues(__spreadProps(__spreadValues({
@@ -13333,7 +13392,7 @@ var DialogDropdownTrigger = React28.forwardRef(({ title, css: css2, open, icon,
         },
         title
       ),
-      open ? /* @__PURE__ */ React28.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React28.createElement(ChevronDownIcon2, null)
+      open ? /* @__PURE__ */ React29.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React29.createElement(ChevronDownIcon2, null)
     )
   );
 });
@@ -13386,7 +13445,7 @@ var Settings = ({ setHide }) => {
   if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
     setHide(true);
   }
-  return /* @__PURE__ */ React29.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React29.createElement(Fragment2, null, isVideoOn && /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React30.createElement(Fragment2, null, isVideoOn && /* @__PURE__ */ React30.createElement(
     StyledVideoTile.Container,
     {
       css: {
@@ -13397,24 +13456,24 @@ var Settings = ({ setHide }) => {
         m: "$10 auto"
       }
     },
-    /* @__PURE__ */ React29.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
-  ), /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
+  ), /* @__PURE__ */ React30.createElement(
     DeviceSelector,
     {
       title: "Video",
       devices: videoInput,
-      icon: /* @__PURE__ */ React29.createElement(VideoOnIcon, null),
+      icon: /* @__PURE__ */ React30.createElement(VideoOnIcon, null),
       selection: selectedDeviceIDs.videoInput,
       onChange: (deviceId) => updateDevice({
         deviceId,
         deviceType: DeviceType.videoInput
       })
     }
-  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React29.createElement(
+  )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React30.createElement(
     DeviceSelector,
     {
       title: shouldShowAudioOutput ? "Microphone" : "Audio",
-      icon: /* @__PURE__ */ React29.createElement(MicOnIcon, null),
+      icon: /* @__PURE__ */ React30.createElement(MicOnIcon, null),
       devices: audioInput,
       selection: selectedDeviceIDs.audioInput,
       onChange: (deviceId) => updateDevice({
@@ -13422,11 +13481,11 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType.audioInput
       })
     }
-  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React29.createElement(
+  ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React30.createElement(
     DeviceSelector,
     {
       title: "Speaker",
-      icon: /* @__PURE__ */ React29.createElement(SpeakerIcon, null),
+      icon: /* @__PURE__ */ React30.createElement(SpeakerIcon, null),
       devices: audioOutput,
       selection: selectedDeviceIDs.audioOutput,
       onChange: (deviceId) => updateDevice({
@@ -13434,7 +13493,7 @@ var Settings = ({ setHide }) => {
         deviceType: DeviceType.audioOutput
       })
     },
-    /* @__PURE__ */ React29.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
+    /* @__PURE__ */ React30.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
   ) : null);
 };
 var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
@@ -13442,7 +13501,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
   const [open, setOpen] = useState8(false);
   const selectionBg = useDropdownSelection();
   const ref = useRef9(null);
-  return /* @__PURE__ */ React29.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React29.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React30.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React30.createElement(
     Flex,
     {
       align: "center",
@@ -13454,7 +13513,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
         }
       }
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(
       Box,
       {
         css: {
@@ -13468,7 +13527,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           }
         }
       },
-      /* @__PURE__ */ React29.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React30.createElement(
         DialogDropdownTrigger,
         {
           ref,
@@ -13476,8 +13535,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
           title: ((_a8 = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a8.label) || "Select device from list",
           open
         }
-      ), /* @__PURE__ */ React29.createElement(Dropdown.Portal, null, /* @__PURE__ */ React29.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
-        return /* @__PURE__ */ React29.createElement(
+      ), /* @__PURE__ */ React30.createElement(Dropdown.Portal, null, /* @__PURE__ */ React30.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
+        return /* @__PURE__ */ React30.createElement(
           Dropdown.Item,
           {
             key: device.label,
@@ -13496,7 +13555,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
 };
 var TestAudio = ({ id }) => {
   const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId: id });
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
     Button,
     {
       variant: "standard",
@@ -13513,11 +13572,11 @@ var TestAudio = ({ id }) => {
       },
       disabled: playing
     },
-    /* @__PURE__ */ React29.createElement(SpeakerIcon, null),
+    /* @__PURE__ */ React30.createElement(SpeakerIcon, null),
     "\xA0Test",
     " ",
-    /* @__PURE__ */ React29.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
-  ), /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
+  ), /* @__PURE__ */ React30.createElement(
     "audio",
     {
       ref: audioRef,
@@ -13532,7 +13591,7 @@ var DeviceSettings_default = Settings;
 
 // src/Prebuilt/components/Settings/NotificationSettings.tsx
 init_define_process_env();
-import React30 from "react";
+import React31 from "react";
 import { AlertOctagonIcon, HandIcon, PeopleAddIcon, PeopleRemoveIcon } from "@100mslive/react-icons";
 var NotificationItem = ({
   type,
@@ -13541,7 +13600,7 @@ var NotificationItem = ({
   checked
 }) => {
   const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     SwitchWithLabel_default,
     {
       label,
@@ -13556,36 +13615,36 @@ var NotificationItem = ({
 };
 var NotificationSettings = () => {
   const subscribedNotifications = useSubscribedNotifications();
-  return /* @__PURE__ */ React30.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React31.createElement(
     NotificationItem,
     {
       label: "Peer Joined",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
-      icon: /* @__PURE__ */ React30.createElement(PeopleAddIcon, null),
+      icon: /* @__PURE__ */ React31.createElement(PeopleAddIcon, null),
       checked: subscribedNotifications.PEER_JOINED
     }
-  ), /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     NotificationItem,
     {
       label: "Peer Leave",
       type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
-      icon: /* @__PURE__ */ React30.createElement(PeopleRemoveIcon, null),
+      icon: /* @__PURE__ */ React31.createElement(PeopleRemoveIcon, null),
       checked: subscribedNotifications.PEER_LEFT
     }
-  ), /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     NotificationItem,
     {
       label: "Hand Raised",
       type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
-      icon: /* @__PURE__ */ React30.createElement(HandIcon, null),
+      icon: /* @__PURE__ */ React31.createElement(HandIcon, null),
       checked: subscribedNotifications.METADATA_UPDATED
     }
-  ), /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     NotificationItem,
     {
       label: "Error",
       type: SUBSCRIBED_NOTIFICATIONS.ERROR,
-      icon: /* @__PURE__ */ React30.createElement(AlertOctagonIcon, null),
+      icon: /* @__PURE__ */ React31.createElement(AlertOctagonIcon, null),
       checked: subscribedNotifications.ERROR
     }
   ));
@@ -13612,7 +13671,7 @@ var settingsList = [
     content: LayoutSettings
   }
 ];
-var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React31.createElement(React31.Fragment, null) }) => {
+var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React32.createElement(React32.Fragment, null) }) => {
   const mediaQueryLg = config.media.md;
   const isMobile = useMedia2(mediaQueryLg);
   const [showSetting, setShowSetting] = useState9(
@@ -13643,7 +13702,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
       setSelection(firstNotHiddenTabName);
     }
   }, [isMobile, showSetting]);
-  return isMobile ? /* @__PURE__ */ React31.createElement(
+  return isMobile ? /* @__PURE__ */ React32.createElement(
     MobileSettingModal,
     {
       open,
@@ -13655,7 +13714,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
       resetSelection
     },
     children
-  ) : /* @__PURE__ */ React31.createElement(
+  ) : /* @__PURE__ */ React32.createElement(
     DesktopSettingModal,
     {
       open,
@@ -13677,9 +13736,9 @@ var MobileSettingModal = ({
   showSetting,
   hideSettingByTabName,
   resetSelection,
-  children = /* @__PURE__ */ React31.createElement(React31.Fragment, null)
+  children = /* @__PURE__ */ React32.createElement(React32.Fragment, null)
 }) => {
-  return /* @__PURE__ */ React31.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React31.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React32.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React32.createElement(
     Sheet.Content,
     {
       css: {
@@ -13687,9 +13746,9 @@ var MobileSettingModal = ({
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React31.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React31.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React31.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React31.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React31.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React31.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React31.createElement(Sheet.Close, null, /* @__PURE__ */ React31.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React31.createElement(CrossIcon3, null))))),
-    /* @__PURE__ */ React31.createElement(HorizontalDivider, null),
-    !selection ? /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React32.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React32.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React32.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React32.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React32.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React32.createElement(Sheet.Close, null, /* @__PURE__ */ React32.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React32.createElement(CrossIcon3, null))))),
+    /* @__PURE__ */ React32.createElement(HorizontalDivider, null),
+    !selection ? /* @__PURE__ */ React32.createElement(
       Flex,
       {
         direction: "column",
@@ -13700,7 +13759,7 @@ var MobileSettingModal = ({
         }
       },
       settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon4, tabName, title }) => {
-        return /* @__PURE__ */ React31.createElement(
+        return /* @__PURE__ */ React32.createElement(
           Box,
           {
             key: tabName,
@@ -13730,18 +13789,18 @@ var MobileSettingModal = ({
               borderBottom: "1px solid $border_default"
             }
           },
-          /* @__PURE__ */ React31.createElement(Icon4, null),
+          /* @__PURE__ */ React32.createElement(Icon4, null),
           title
         );
       })
-    ) : /* @__PURE__ */ React31.createElement(
+    ) : /* @__PURE__ */ React32.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__ */ React31.createElement(Content11, { key: title, setHide: hideSettingByTabName(tabName) });
+        return /* @__PURE__ */ React32.createElement(Content11, { key: title, setHide: hideSettingByTabName(tabName) });
       })
     )
   ));
@@ -13754,9 +13813,9 @@ var DesktopSettingModal = ({
   showSetting,
   hideSettingByTabName,
   resetSelection,
-  children = /* @__PURE__ */ React31.createElement(React31.Fragment, null)
+  children = /* @__PURE__ */ React32.createElement(React32.Fragment, null)
 }) => {
-  return /* @__PURE__ */ React31.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React31.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React31.createElement(Dialog.Portal, null, /* @__PURE__ */ React31.createElement(Dialog.Overlay, null), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React32.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React32.createElement(Dialog.Portal, null, /* @__PURE__ */ React32.createElement(Dialog.Overlay, null), /* @__PURE__ */ React32.createElement(
     Dialog.Content,
     {
       css: {
@@ -13766,7 +13825,7 @@ var DesktopSettingModal = ({
         r: "$4"
       }
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       Tabs.Root,
       {
         value: selection,
@@ -13774,7 +13833,7 @@ var DesktopSettingModal = ({
         onValueChange: setSelection,
         css: { size: "100%", position: "relative" }
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(
         Tabs.List,
         {
           css: {
@@ -13786,12 +13845,12 @@ var DesktopSettingModal = ({
             borderBottomLeftRadius: "$4"
           }
         },
-        /* @__PURE__ */ React31.createElement(Text, { variant: "h5" }, "Settings "),
-        /* @__PURE__ */ React31.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon4, tabName, title }) => {
-          return /* @__PURE__ */ React31.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React31.createElement(Icon4, null), title);
+        /* @__PURE__ */ React32.createElement(Text, { variant: "h5" }, "Settings "),
+        /* @__PURE__ */ React32.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon4, tabName, title }) => {
+          return /* @__PURE__ */ React32.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React32.createElement(Icon4, null), title);
         }))
       ),
-      selection && /* @__PURE__ */ React31.createElement(
+      selection && /* @__PURE__ */ React32.createElement(
         Flex,
         {
           direction: "column",
@@ -13802,15 +13861,15 @@ var DesktopSettingModal = ({
           }
         },
         settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content11, title, tabName }) => {
-          return /* @__PURE__ */ React31.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React31.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React31.createElement(Content11, { setHide: hideSettingByTabName(tabName) }));
+          return /* @__PURE__ */ React32.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React32.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React32.createElement(Content11, { setHide: hideSettingByTabName(tabName) }));
         })
       )
     ),
-    /* @__PURE__ */ React31.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React31.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React31.createElement(CrossIcon3, null)))
+    /* @__PURE__ */ React32.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React32.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React32.createElement(CrossIcon3, null)))
   )));
 };
 var SettingsContentHeader = ({ children, isMobile, onBack }) => {
-  return /* @__PURE__ */ React31.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React31.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React31.createElement(ChevronLeftIcon, null)), children);
+  return /* @__PURE__ */ React32.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React32.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React32.createElement(ChevronLeftIcon, null)), children);
 };
 var SettingsModal_default = SettingsModal;
 
@@ -13859,12 +13918,13 @@ var ToastManager = {
 };
 
 // src/Prebuilt/components/AudioVideoToggle.tsx
+var krispPlugin = new HMSKrispPlugin();
 var Options = ({
   options,
   selectedDeviceId,
   onClick
 }) => {
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, options == null ? void 0 : options.map((option) => /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, options == null ? void 0 : options.map((option) => /* @__PURE__ */ React33.createElement(
     Dropdown.Item,
     {
       key: option.label,
@@ -13881,11 +13941,11 @@ var Options = ({
       }
     },
     option.label,
-    selectedDeviceId === option.deviceId ? /* @__PURE__ */ React32.createElement(CheckIcon, { width: 16, height: 16 }) : null
+    selectedDeviceId === option.deviceId ? /* @__PURE__ */ React33.createElement(CheckIcon, { width: 16, height: 16 }) : null
   )));
 };
 var OptionLabel = ({ children, icon }) => {
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(
     Dropdown.Label,
     {
       css: {
@@ -13898,35 +13958,78 @@ var OptionLabel = ({ children, icon }) => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React32.createElement(Flex, { css: { alignItems: "center", justifyContent: "center", "& svg": { size: "$8" } } }, icon),
+    /* @__PURE__ */ React33.createElement(Flex, { css: { alignItems: "center", justifyContent: "center", "& svg": { size: "$8" } } }, icon),
     " ",
     children
   );
 };
-var plugin = new HMSKrispPlugin();
-var NoiseCancellation = () => {
-  const localPeerAudioTrackID = useHMSStore8(selectLocalAudioTrackID);
-  const [enabled, setEnabled] = useSetNoiseCancellationEnabled();
-  const isPluginAdded = useHMSStore8(selectIsLocalAudioPluginPresent(plugin.getName()));
-  const [inProgress, setInProgress] = useState10(false);
+var useNoiseCancellationWithPlugin = () => {
   const actions = useHMSActions7();
+  const [inProgress, setInProgress] = useState10(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
+  };
+};
+var NoiseCancellation = ({
+  actionTile,
+  iconOnly,
+  setOpenOptionsSheet
+}) => {
+  const localPeerAudioTrackID = useHMSStore8(selectLocalAudioTrackID);
+  const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
+  const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
   const room = useHMSStore8(selectRoom);
-  useEffect10(() => {
-    (() => __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 = useHMSStore8(selectIsLocalAudioPluginPresent(krispPlugin.getName()));
+  if (!krispPlugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }), /* @__PURE__ */ React32.createElement(
+  if (actionTile) {
+    return /* @__PURE__ */ React33.createElement(
+      ActionTile.Root,
+      {
+        active: isNoiseCancellationEnabled && isKrispPluginAdded,
+        disable: inProgress,
+        onClick: () => __async(void 0, null, function* () {
+          yield setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+          setOpenOptionsSheet == null ? void 0 : setOpenOptionsSheet(false);
+        })
+      },
+      /* @__PURE__ */ React33.createElement(AudioLevelIcon, null),
+      /* @__PURE__ */ React33.createElement(ActionTile.Title, null, isNoiseCancellationEnabled ? "Noise Reduced" : "Reduce Noise")
+    );
+  }
+  if (iconOnly) {
+    return /* @__PURE__ */ React33.createElement(Tooltip, { title: isNoiseCancellationEnabled ? "Noise Reduced" : "Reduce Noise" }, /* @__PURE__ */ React33.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__ */ React33.createElement(AudioLevelIcon, null)
+    ));
+  }
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }), /* @__PURE__ */ React33.createElement(
     Dropdown.Item,
     {
       css: {
@@ -13935,29 +14038,29 @@ var NoiseCancellation = () => {
         fontSize: "$xs",
         justifyContent: "space-between"
       },
-      onClick: (e) => {
+      onClick: (e) => __async(void 0, null, function* () {
         e.preventDefault();
-        setEnabled(!enabled);
-      }
+        yield setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+      })
     },
-    /* @__PURE__ */ React32.createElement(Text, { css: { display: "flex", alignItems: "center", gap: "$2", fontSize: "$xs", "& svg": { size: "$8" } } }, /* @__PURE__ */ React32.createElement(AudioLevelIcon, null), "Reduce Noise"),
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(Text, { css: { display: "flex", alignItems: "center", gap: "$2", fontSize: "$xs", "& svg": { size: "$8" } } }, /* @__PURE__ */ React33.createElement(AudioLevelIcon, null), "Reduce Noise"),
+    /* @__PURE__ */ React33.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__ */ React32.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }));
+  ), /* @__PURE__ */ React33.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }));
 };
 var AudioOutputLabel = ({ deviceId }) => {
   const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId });
-  return /* @__PURE__ */ React32.createElement(OptionLabel, { icon: /* @__PURE__ */ React32.createElement(SpeakerIcon2, null) }, /* @__PURE__ */ React32.createElement(Box, { css: { flex: "1 1 0" } }, "Speakers"), /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(OptionLabel, { icon: /* @__PURE__ */ React33.createElement(SpeakerIcon2, null) }, /* @__PURE__ */ React33.createElement(Box, { css: { flex: "1 1 0" } }, "Speakers"), /* @__PURE__ */ React33.createElement(
     Text,
     {
       variant: "xs",
@@ -13970,7 +14073,7 @@ var AudioOutputLabel = ({ deviceId }) => {
         yield (_a8 = audioRef.current) == null ? void 0 : _a8.play();
       })
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       "audio",
       {
         ref: audioRef,
@@ -13984,7 +14087,7 @@ var AudioOutputLabel = ({ deviceId }) => {
   ));
 };
 var AudioSettings = ({ onClick }) => {
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
     Dropdown.Item,
     {
       css: {
@@ -13998,13 +14101,14 @@ var AudioSettings = ({ onClick }) => {
       },
       onClick
     },
-    /* @__PURE__ */ React32.createElement(SettingsIcon2, null),
+    /* @__PURE__ */ React33.createElement(SettingsIcon2, null),
     " Audio Settings"
   ));
 };
 var AudioVideoToggle = ({ hideOptions = false }) => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices2();
   const { videoInput, audioInput, audioOutput } = allDevices;
+  const localPeer = useHMSStore8(selectLocalPeer);
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle2();
   const actions = useHMSActions7();
   const videoTrackId = useHMSStore8(selectLocalVideoTrackID2);
@@ -14015,39 +14119,39 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   const shouldShowAudioOutput = "setSinkId" in HTMLMediaElement.prototype && Number(audioOutput == null ? void 0 : audioOutput.length) > 0;
   const { screenType } = useRoomLayoutConferencingScreen();
   const [showSettings, setShowSettings] = useState10(false);
-  const isPluginAdded = useHMSStore8(selectIsLocalAudioPluginPresent(plugin.getName()));
+  const isKrispPluginAdded = useHMSStore8(selectIsLocalAudioPluginPresent(krispPlugin.getName()));
   const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
+  const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
+  const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
   useEffect10(() => {
     (() => __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__ */ React32.createElement(AudioLevelIcon, null)
+          icon: /* @__PURE__ */ React33.createElement(AudioLevelIcon, null)
         });
       }
     }))();
-  }, [actions, isNoiseCancellationEnabled, isPluginAdded]);
+  }, [isNoiseCancellationEnabled, localPeer == null ? void 0 : localPeer.audioTrack, inProgress]);
   if (!toggleAudio && !toggleVideo) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(Fragment3, null, toggleAudio ? /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(Fragment3, null, toggleAudio ? /* @__PURE__ */ React33.createElement(
     IconButtonWithOptions,
     {
       disabled: !toggleAudio,
       hideOptions: hideOptions || !hasAudioDevices,
       onDisabledClick: toggleAudio,
       tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
-      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React32.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React32.createElement(MicOnIcon2, { "data-testid": "audio_on_btn" }),
+      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React33.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React33.createElement(MicOnIcon2, { "data-testid": "audio_on_btn" }),
       active: isLocalAudioEnabled,
       onClick: toggleAudio,
       key: "toggleAudio"
     },
-    /* @__PURE__ */ React32.createElement(Dropdown.Group, null, /* @__PURE__ */ React32.createElement(OptionLabel, { icon: /* @__PURE__ */ React32.createElement(MicOnIcon2, null) }, !shouldShowAudioOutput ? "Audio" : "Microphone"), /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(Dropdown.Group, null, /* @__PURE__ */ React33.createElement(OptionLabel, { icon: /* @__PURE__ */ React33.createElement(MicOnIcon2, null) }, /* @__PURE__ */ React33.createElement(Box, { css: { flex: "1 1 0" } }, !shouldShowAudioOutput ? "Audio" : "Microphone"), !showMuteIcon && /* @__PURE__ */ React33.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })), /* @__PURE__ */ React33.createElement(
       Options,
       {
         options: audioInput,
@@ -14055,8 +14159,8 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         onClick: (deviceId) => updateDevice({ deviceId, deviceType: DeviceType2.audioInput })
       }
     )),
-    /* @__PURE__ */ React32.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
-    shouldShowAudioOutput && /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(AudioOutputLabel, { deviceId: selectedDeviceIDs.audioOutput || "" }), /* @__PURE__ */ React32.createElement(Dropdown.Group, null, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
+    shouldShowAudioOutput && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(AudioOutputLabel, { deviceId: selectedDeviceIDs.audioOutput || "" }), /* @__PURE__ */ React33.createElement(Dropdown.Group, null, /* @__PURE__ */ React33.createElement(
       Options,
       {
         options: audioOutput,
@@ -14064,21 +14168,21 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         onClick: (deviceId) => updateDevice({ deviceId, deviceType: DeviceType2.audioOutput })
       }
     ))),
-    /* @__PURE__ */ React32.createElement(NoiseCancellation, null),
-    /* @__PURE__ */ React32.createElement(AudioSettings, { onClick: () => setShowSettings(true) })
-  ) : null, toggleVideo ? /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(NoiseCancellation, null),
+    /* @__PURE__ */ React33.createElement(AudioSettings, { onClick: () => setShowSettings(true) })
+  ) : null, toggleVideo ? /* @__PURE__ */ React33.createElement(
     IconButtonWithOptions,
     {
       disabled: !toggleVideo,
       hideOptions: hideOptions || !hasVideoDevices,
       onDisabledClick: toggleVideo,
       tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
-      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React32.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React32.createElement(VideoOnIcon2, { "data-testid": "video_on_btn" }),
+      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React33.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React33.createElement(VideoOnIcon2, { "data-testid": "video_on_btn" }),
       key: "toggleVideo",
       active: isLocalVideoEnabled,
       onClick: toggleVideo
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       Options,
       {
         options: videoInput,
@@ -14086,7 +14190,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         onClick: (deviceId) => updateDevice({ deviceId, deviceType: DeviceType2.videoInput })
       }
     )
-  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState2.Preview ? /* @__PURE__ */ React32.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React32.createElement(
+  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState2.Preview ? /* @__PURE__ */ React33.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React33.createElement(
     IconButton_default,
     {
       onClick: () => __async(void 0, null, function* () {
@@ -14100,13 +14204,13 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         }
       })
     },
-    /* @__PURE__ */ React32.createElement(CameraFlipIcon, null)
-  )) : null, showSettings && /* @__PURE__ */ React32.createElement(SettingsModal_default, { open: showSettings, onOpenChange: () => setShowSettings(false), screenType }));
+    /* @__PURE__ */ React33.createElement(CameraFlipIcon, null)
+  )) : null, showSettings && /* @__PURE__ */ React33.createElement(SettingsModal_default, { open: showSettings, onOpenChange: () => setShowSettings(false), screenType }));
 };
 
 // src/Prebuilt/components/CaptionIcon.tsx
 init_define_process_env();
-import React33 from "react";
+import React34 from "react";
 import { selectIsTranscriptionEnabled, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
 import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
 var CaptionIcon = () => {
@@ -14118,12 +14222,12 @@ var CaptionIcon = () => {
   if (!isCaptionPresent) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement(Tooltip, { title: isCaption ? "Disable caption" : "Enable caption" }, /* @__PURE__ */ React33.createElement(IconButton_default, { "data-testid": "caption_btn", onClick }, isCaption ? /* @__PURE__ */ React33.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React33.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
+  return /* @__PURE__ */ React34.createElement(Tooltip, { title: isCaption ? "Hide closed captions" : "Show closed captions" }, /* @__PURE__ */ React34.createElement(IconButton_default, { "data-testid": "caption_btn", onClick }, isCaption ? /* @__PURE__ */ React34.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React34.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
 };
 
 // src/Prebuilt/components/EmojiReaction.jsx
 init_define_process_env();
-import React35, { useState as useState12 } from "react";
+import React36, { useState as useState12 } from "react";
 import { useMedia as useMedia4 } from "react-use";
 import data from "@emoji-mart/data/sets/14/apple.json";
 import { init } from "emoji-mart";
@@ -14138,13 +14242,13 @@ import { EmojiIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/EmojiCard.jsx
 init_define_process_env();
-import React34 from "react";
+import React35 from "react";
 var emojiReactionList = [
   [{ emojiId: "+1" }, { emojiId: "-1" }, { emojiId: "wave" }, { emojiId: "clap" }, { emojiId: "fire" }],
   [{ emojiId: "tada" }, { emojiId: "heart_eyes" }, { emojiId: "joy" }, { emojiId: "open_mouth" }, { emojiId: "sob" }]
 ];
 var EmojiCard = ({ sendReaction }) => {
-  return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React34.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React34.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React34.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
+  return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React35.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React35.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React35.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
 };
 var EmojiContainer = styled("span", {
   position: "relative",
@@ -14396,28 +14500,28 @@ var EmojiReaction = ({ showCard = false }) => {
     return null;
   }
   if (showCard) {
-    return /* @__PURE__ */ React35.createElement(EmojiCard, { sendReaction });
+    return /* @__PURE__ */ React36.createElement(EmojiCard, { sendReaction });
   }
-  return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React35.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React36.createElement(
     IconButton_default,
     {
       css: isMobile || isLandscape ? { bg: "$surface_default", r: "$round", border: "1px solid $border_bright" } : {}
     },
-    /* @__PURE__ */ React35.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(EmojiIcon, null)))
-  )), /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React36.createElement(Box, null, /* @__PURE__ */ React36.createElement(EmojiIcon, null)))
+  )), /* @__PURE__ */ React36.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
       align: isMobileHLSStream || isLandscapeStream ? "end" : "center",
       css: { p: "$8", bg: "$surface_default" }
     },
-    /* @__PURE__ */ React35.createElement(EmojiCard, { sendReaction })
+    /* @__PURE__ */ React36.createElement(EmojiCard, { sendReaction })
   ));
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 init_define_process_env();
-import React41 from "react";
+import React42 from "react";
 import { useMedia as useMedia5 } from "react-use";
 import {
   selectHLSState as selectHLSState3,
@@ -14431,13 +14535,13 @@ import {
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 init_define_process_env();
-import React39, { Fragment as Fragment4, useState as useState13 } from "react";
+import React40, { Fragment as Fragment4, useState as useState13 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions as selectPermissions2, useHMSStore as useHMSStore12, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { ExitIcon, StopIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Leave/EndSessionContent.tsx
 init_define_process_env();
-import React36 from "react";
+import React37 from "react";
 import { AlertTriangleIcon, CrossIcon as CrossIcon4 } from "@100mslive/react-icons";
 var EndSessionContent = ({
   setShowEndStreamAlert,
@@ -14445,7 +14549,7 @@ var EndSessionContent = ({
   isModal = false,
   isStreamingOn = false
 }) => {
-  return /* @__PURE__ */ React36.createElement(Box, null, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(Box, null, /* @__PURE__ */ React37.createElement(
     Flex,
     {
       css: {
@@ -14454,10 +14558,10 @@ var EndSessionContent = ({
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React36.createElement(AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
-    /* @__PURE__ */ React36.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "End ", isStreamingOn ? "Stream" : "Session"),
-    isModal ? null : /* @__PURE__ */ React36.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowEndStreamAlert(false) }, /* @__PURE__ */ React36.createElement(CrossIcon4, null))
-  ), /* @__PURE__ */ React36.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__ */ React36.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
+    /* @__PURE__ */ React37.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "End ", isStreamingOn ? "Stream" : "Session"),
+    isModal ? null : /* @__PURE__ */ React37.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowEndStreamAlert(false) }, /* @__PURE__ */ React37.createElement(CrossIcon4, null))
+  ), /* @__PURE__ */ React37.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__ */ React37.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React37.createElement(
     Button,
     {
       outlined: true,
@@ -14466,7 +14570,7 @@ var EndSessionContent = ({
       onClick: () => setShowEndStreamAlert(false)
     },
     "Cancel"
-  ), /* @__PURE__ */ React36.createElement(
+  ), /* @__PURE__ */ React37.createElement(
     Button,
     {
       variant: "danger",
@@ -14510,7 +14614,7 @@ var MenuTriggerButton = styled(LeaveIconButton, {
 
 // src/Prebuilt/components/Leave/LeaveCard.tsx
 init_define_process_env();
-import React37 from "react";
+import React38 from "react";
 var LeaveCard = ({
   icon,
   title,
@@ -14520,19 +14624,19 @@ var LeaveCard = ({
   titleColor,
   css: css2 = {}
 }) => {
-  return /* @__PURE__ */ React37.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css2), onClick }, /* @__PURE__ */ React37.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ React37.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ React37.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
+  return /* @__PURE__ */ React38.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css2), onClick }, /* @__PURE__ */ React38.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ React38.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ React38.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
 };
 
 // src/Prebuilt/components/Leave/LeaveSessionContent.tsx
 init_define_process_env();
-import React38 from "react";
+import React39 from "react";
 import { AlertTriangleIcon as AlertTriangleIcon2, CrossIcon as CrossIcon5 } from "@100mslive/react-icons";
 var LeaveSessionContent = ({
   setShowLeaveRoomAlert,
   leaveRoom,
   isModal = false
 }) => {
-  return /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(
     Flex,
     {
       css: {
@@ -14541,10 +14645,10 @@ var LeaveSessionContent = ({
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React38.createElement(AlertTriangleIcon2, { style: { marginRight: "0.5rem" } }),
-    /* @__PURE__ */ React38.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Leave"),
-    isModal ? null : /* @__PURE__ */ React38.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowLeaveRoomAlert(false) }, /* @__PURE__ */ React38.createElement(CrossIcon5, null))
-  ), /* @__PURE__ */ React38.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__ */ React38.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React39.createElement(AlertTriangleIcon2, { style: { marginRight: "0.5rem" } }),
+    /* @__PURE__ */ React39.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Leave"),
+    isModal ? null : /* @__PURE__ */ React39.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowLeaveRoomAlert(false) }, /* @__PURE__ */ React39.createElement(CrossIcon5, null))
+  ), /* @__PURE__ */ React39.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__ */ React39.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React39.createElement(
     Button,
     {
       outlined: true,
@@ -14553,7 +14657,7 @@ var LeaveSessionContent = ({
       onClick: () => setShowLeaveRoomAlert(false)
     },
     "Cancel"
-  ), /* @__PURE__ */ React38.createElement(
+  ), /* @__PURE__ */ React39.createElement(
     Button,
     {
       variant: "danger",
@@ -14587,7 +14691,7 @@ var DesktopLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Fragment4, null, showLeaveOptions ? /* @__PURE__ */ React39.createElement(Flex, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(Fragment4, null, showLeaveOptions ? /* @__PURE__ */ React40.createElement(Flex, null, /* @__PURE__ */ React40.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -14598,8 +14702,8 @@ var DesktopLeaveRoom = ({
       },
       onClick: () => setShowLeaveRoomAlert(true)
     },
-    /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React39.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React40.createElement(Box, null, /* @__PURE__ */ React40.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
+  ), /* @__PURE__ */ React40.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React40.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -14609,8 +14713,8 @@ var DesktopLeaveRoom = ({
         }
       }
     },
-    /* @__PURE__ */ React39.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React39.createElement(VerticalMenuIcon2, null))
-  ), /* @__PURE__ */ React39.createElement(Dropdown.Portal, { container }, /* @__PURE__ */ React39.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React40.createElement(VerticalMenuIcon2, null))
+  ), /* @__PURE__ */ React40.createElement(Dropdown.Portal, { container }, /* @__PURE__ */ React40.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React40.createElement(
     Dropdown.Item,
     {
       css: {
@@ -14621,21 +14725,21 @@ var DesktopLeaveRoom = ({
       },
       "data-testid": "just_leave_btn"
     },
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.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__ */ React39.createElement(ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+        icon: /* @__PURE__ */ React40.createElement(ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
         onClick: () => __async(void 0, null, function* () {
           return yield leaveRoom();
         }),
         css: { p: "$8 $4" }
       }
     )
-  ), /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React40.createElement(
     Dropdown.Item,
     {
       css: {
@@ -14646,14 +14750,14 @@ var DesktopLeaveRoom = ({
       },
       "data-testid": "end_room_btn"
     },
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.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__ */ React39.createElement(StopIcon, { height: 24, width: 24 }),
+        icon: /* @__PURE__ */ React40.createElement(StopIcon, { height: 24, width: 24 }),
         onClick: () => {
           setOpen(false);
           setShowEndStreamAlert(true);
@@ -14661,7 +14765,7 @@ var DesktopLeaveRoom = ({
         css: { p: "$8 $4" }
       }
     )
-  ))))) : /* @__PURE__ */ React39.createElement(
+  ))))) : /* @__PURE__ */ React40.createElement(
     LeaveIconButton,
     {
       onClick: () => {
@@ -14670,8 +14774,8 @@ var DesktopLeaveRoom = ({
       key: "LeaveRoom",
       "data-testid": "leave_room_btn"
     },
-    /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React39.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ React39.createElement(Dialog.Portal, null, /* @__PURE__ */ React39.createElement(Dialog.Overlay, null), /* @__PURE__ */ React39.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React40.createElement(Box, null, /* @__PURE__ */ React40.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
+  ), /* @__PURE__ */ React40.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ React40.createElement(Dialog.Portal, null, /* @__PURE__ */ React40.createElement(Dialog.Overlay, null), /* @__PURE__ */ React40.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React40.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
@@ -14679,12 +14783,12 @@ var DesktopLeaveRoom = ({
       isStreamingOn,
       isModal: true
     }
-  )))), /* @__PURE__ */ React39.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React39.createElement(Dialog.Portal, null, /* @__PURE__ */ React39.createElement(Dialog.Overlay, null), /* @__PURE__ */ React39.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React39.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
+  )))), /* @__PURE__ */ React40.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React40.createElement(Dialog.Portal, null, /* @__PURE__ */ React40.createElement(Dialog.Overlay, null), /* @__PURE__ */ React40.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React40.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
 };
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
 init_define_process_env();
-import React40, { Fragment as Fragment5, useState as useState14 } from "react";
+import React41, { Fragment as Fragment5, useState as useState14 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom4, selectPermissions as selectPermissions3, useHMSStore as useHMSStore13, useRecordingStreaming as useRecordingStreaming4 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon6, ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
 var MwebLeaveRoom = ({
@@ -14705,27 +14809,27 @@ var MwebLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React40.createElement(Fragment5, null, showLeaveOptions ? /* @__PURE__ */ React40.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React40.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(Fragment5, null, showLeaveOptions ? /* @__PURE__ */ React41.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React41.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React41.createElement(
     LeaveButton,
     {
       onClick: () => {
         setOpen((open2) => !open2);
       }
     }
-  )), /* @__PURE__ */ React40.createElement(Sheet.Content, { container }, /* @__PURE__ */ React40.createElement(
+  )), /* @__PURE__ */ React41.createElement(Sheet.Content, { container }, /* @__PURE__ */ React41.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__ */ React40.createElement(ExitIcon2, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+      icon: /* @__PURE__ */ React41.createElement(ExitIcon2, { 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__ */ React40.createElement(
+  ), /* @__PURE__ */ React41.createElement(
     LeaveCard,
     {
       title: showStream ? "End Stream" : "End Session",
@@ -14733,25 +14837,25 @@ var MwebLeaveRoom = ({
       bg: "$alert_error_dim",
       titleColor: "$alert_error_brighter",
       css: { color: "$alert_error_bright", "&:hover": { color: "$alert_error_brighter" } },
-      icon: /* @__PURE__ */ React40.createElement(StopIcon2, { height: 24, width: 24 }),
+      icon: /* @__PURE__ */ React41.createElement(StopIcon2, { height: 24, width: 24 }),
       onClick: () => {
         setOpen(false);
         setShowEndStreamAlert(true);
       }
     }
-  ))) : /* @__PURE__ */ React40.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ React40.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React40.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ React40.createElement(
+  ))) : /* @__PURE__ */ React41.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ React41.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React41.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ React41.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
       leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn
     }
-  ))), /* @__PURE__ */ React40.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React40.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ React40.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
+  ))), /* @__PURE__ */ React41.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React41.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" }, container }, /* @__PURE__ */ React41.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
 };
 var LeaveButton = ({ onClick }) => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ React40.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick }, /* @__PURE__ */ React40.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React40.createElement(Box, null, /* @__PURE__ */ React40.createElement(CrossIcon6, null)))) : /* @__PURE__ */ React40.createElement(
+  return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ React41.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick }, /* @__PURE__ */ React41.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React41.createElement(Box, null, /* @__PURE__ */ React41.createElement(CrossIcon6, null)))) : /* @__PURE__ */ React41.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -14762,7 +14866,7 @@ var LeaveButton = ({ onClick }) => {
       },
       onClick
     },
-    /* @__PURE__ */ React40.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React40.createElement(Box, null, /* @__PURE__ */ React40.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
+    /* @__PURE__ */ React41.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React41.createElement(Box, null, /* @__PURE__ */ React41.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
   );
 };
 
@@ -14811,9 +14915,9 @@ var LeaveRoom = ({
     return null;
   }
   if (isMobileHLSStream || isLandscapeHLSStream) {
-    return /* @__PURE__ */ React41.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container });
+    return /* @__PURE__ */ React42.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container });
   }
-  return isMobile ? /* @__PURE__ */ React41.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container }) : /* @__PURE__ */ React41.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom, container });
+  return isMobile ? /* @__PURE__ */ React42.createElement(MwebLeaveRoom, { leaveRoom, endRoom, container }) : /* @__PURE__ */ React42.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom, container });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
@@ -14823,7 +14927,7 @@ import { useMedia as useMedia10 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
 init_define_process_env();
-import React55, { Fragment as Fragment6, useState as useState23 } from "react";
+import React56, { Fragment as Fragment6, useState as useState23 } from "react";
 import { HMSHLSPlayer } from "@100mslive/hls-player";
 import { match as match4 } from "ts-pattern";
 import {
@@ -14847,11 +14951,11 @@ import {
 
 // src/Prebuilt/components/PIP/index.jsx
 init_define_process_env();
-import React43 from "react";
+import React44 from "react";
 
 // src/Prebuilt/components/PIP/PIPComponent.tsx
 init_define_process_env();
-import React42, { useCallback as useCallback9, useEffect as useEffect13, useState as useState15 } from "react";
+import React43, { useCallback as useCallback9, useEffect as useEffect13, useState as useState15 } from "react";
 import { selectPeers as selectPeers2, selectTracksMap, useHMSActions as useHMSActions10, useHMSVanillaStore as useHMSVanillaStore5 } from "@100mslive/react-sdk";
 import { PipIcon } from "@100mslive/react-icons";
 
@@ -15336,7 +15440,7 @@ var PIPComponent = ({ content = null }) => {
   if (!PictureInPicture.isSupported()) {
     return null;
   }
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, content ? /* @__PURE__ */ React42.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React42.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React42.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React42.createElement(PipIcon, null))));
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, content ? /* @__PURE__ */ React43.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React43.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React43.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React43.createElement(PipIcon, null))));
 };
 var ActivatedPIP = () => {
   const store = useHMSVanillaStore5();
@@ -15369,23 +15473,23 @@ var ActivatedPIP = () => {
       unsubscribe = void 0;
     };
   }, [pinnedTrack, store]);
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null);
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null);
 };
 var PIPComponent_default = PIPComponent;
 
 // src/Prebuilt/components/PIP/index.jsx
 var PIP = ({ content = null }) => {
-  return /* @__PURE__ */ React43.createElement(PIPComponent_default, { content });
+  return /* @__PURE__ */ React44.createElement(PIPComponent_default, { content });
 };
 
 // src/Prebuilt/components/RoleChangeModal.tsx
 init_define_process_env();
-import React44, { useRef as useRef11, useState as useState16 } from "react";
+import React45, { useRef as useRef11, useState as useState16 } from "react";
 import { useMedia as useMedia6 } from "react-use";
 import { selectAvailableRoleNames as selectAvailableRoleNames3, selectPeerByID, useHMSActions as useHMSActions11, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3, CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
 var HighlightTerm = ({ value }) => {
-  return value ? /* @__PURE__ */ React44.createElement(Tooltip, { side: "top", title: value }, /* @__PURE__ */ React44.createElement(
+  return value ? /* @__PURE__ */ React45.createElement(Tooltip, { side: "top", title: value }, /* @__PURE__ */ React45.createElement(
     Text,
     {
       variant: "body2",
@@ -15398,7 +15502,7 @@ var HighlightTerm = ({ value }) => {
     value.slice(0, 100),
     value.length > 100 ? "..." : "",
     "'"
-  )) : /* @__PURE__ */ React44.createElement(React44.Fragment, null);
+  )) : /* @__PURE__ */ React45.createElement(React45.Fragment, null);
 };
 var RoleChangeContent = ({
   peer,
@@ -15413,7 +15517,7 @@ var RoleChangeContent = ({
   const hmsActions = useHMSActions11();
   const [open, setOpen] = useState16(false);
   const triggerRef = useRef11();
-  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(Flex, { align: "center", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React44.createElement(Text, { as: "h6", variant: "h6" }, "Switch Role"), isMobile && /* @__PURE__ */ React44.createElement(CrossIcon7, { onClick: () => onOpenChange(false) })), /* @__PURE__ */ React44.createElement(Box, null, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Flex, { align: "center", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React45.createElement(Text, { as: "h6", variant: "h6" }, "Switch Role"), isMobile && /* @__PURE__ */ React45.createElement(CrossIcon7, { onClick: () => onOpenChange(false) })), /* @__PURE__ */ React45.createElement(Box, null, /* @__PURE__ */ React45.createElement(
     Text,
     {
       variant: "sm",
@@ -15427,11 +15531,11 @@ var RoleChangeContent = ({
       }
     },
     "Switch the role of",
-    /* @__PURE__ */ React44.createElement(HighlightTerm, { value: peer.name }),
+    /* @__PURE__ */ React45.createElement(HighlightTerm, { value: peer.name }),
     "from ",
-    /* @__PURE__ */ React44.createElement(HighlightTerm, { value: peer.roleName }),
+    /* @__PURE__ */ React45.createElement(HighlightTerm, { value: peer.roleName }),
     " to"
-  )), /* @__PURE__ */ React44.createElement(
+  )), /* @__PURE__ */ React45.createElement(
     Flex,
     {
       align: "center",
@@ -15440,7 +15544,7 @@ var RoleChangeContent = ({
         mb: "$10"
       }
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React45.createElement(
       Box,
       {
         css: {
@@ -15449,7 +15553,7 @@ var RoleChangeContent = ({
           minWidth: 0
         }
       },
-      /* @__PURE__ */ React44.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React45.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ React45.createElement(
         Dropdown.Trigger,
         {
           ref: triggerRef,
@@ -15461,10 +15565,10 @@ var RoleChangeContent = ({
             p: "$6 $9"
           }
         },
-        /* @__PURE__ */ React44.createElement(Flex, { align: "center", justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React44.createElement(Text, null, selectedRole), open ? /* @__PURE__ */ React44.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React44.createElement(ChevronDownIcon3, null))
-      ), /* @__PURE__ */ React44.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { zIndex: 1e3, w: "100%" } }, roles.map((role) => {
+        /* @__PURE__ */ React45.createElement(Flex, { align: "center", justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React45.createElement(Text, null, selectedRole), open ? /* @__PURE__ */ React45.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React45.createElement(ChevronDownIcon3, null))
+      ), /* @__PURE__ */ React45.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { zIndex: 1e3, w: "100%" } }, roles.map((role) => {
         var _a9;
-        return /* @__PURE__ */ React44.createElement(
+        return /* @__PURE__ */ React45.createElement(
           Dropdown.Item,
           {
             "data-testid": role,
@@ -15476,7 +15580,7 @@ var RoleChangeContent = ({
         );
       })))
     )
-  ), /* @__PURE__ */ React44.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, !isMobile && /* @__PURE__ */ React44.createElement(
+  ), /* @__PURE__ */ React45.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, !isMobile && /* @__PURE__ */ React45.createElement(
     Button,
     {
       variant: "standard",
@@ -15486,7 +15590,7 @@ var RoleChangeContent = ({
       "data-testid": "cancel_button"
     },
     "Cancel"
-  ), /* @__PURE__ */ React44.createElement(
+  ), /* @__PURE__ */ React45.createElement(
     Button,
     {
       "data-testid": "change_button",
@@ -15512,33 +15616,33 @@ var RoleChangeModal = ({
     return null;
   }
   if (isMobile) {
-    return /* @__PURE__ */ React44.createElement(Sheet.Root, { open: true, onOpenChange, css: { borderRadius: "$0 $0 0 0" } }, /* @__PURE__ */ React44.createElement(Sheet.Content, { css: { p: "$10 $8", background: "$surface_dim", border: "1px solid $border_default" } }, /* @__PURE__ */ React44.createElement(RoleChangeContent, { peer, onOpenChange, isMobile: true })));
+    return /* @__PURE__ */ React45.createElement(Sheet.Root, { open: true, onOpenChange, css: { borderRadius: "$0 $0 0 0" } }, /* @__PURE__ */ React45.createElement(Sheet.Content, { css: { p: "$10 $8", background: "$surface_dim", border: "1px solid $border_default" } }, /* @__PURE__ */ React45.createElement(RoleChangeContent, { peer, onOpenChange, isMobile: true })));
   }
-  return /* @__PURE__ */ React44.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React44.createElement(Dialog.Portal, null, /* @__PURE__ */ React44.createElement(Dialog.Overlay, null), /* @__PURE__ */ React44.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10", overflow: "visible" } }, /* @__PURE__ */ React44.createElement(RoleChangeContent, { peer, onOpenChange }))));
+  return /* @__PURE__ */ React45.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React45.createElement(Dialog.Portal, null, /* @__PURE__ */ React45.createElement(Dialog.Overlay, null), /* @__PURE__ */ React45.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10", overflow: "visible" } }, /* @__PURE__ */ React45.createElement(RoleChangeContent, { peer, onOpenChange }))));
 };
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
 init_define_process_env();
-import React47, { useState as useState18 } from "react";
+import React48, { useState as useState18 } from "react";
 import { selectPermissions as selectPermissions5, useHMSActions as useHMSActions12, useHMSStore as useHMSStore16, useRecordingStreaming as useRecordingStreaming5 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Streaming/ResolutionInput.jsx
 init_define_process_env();
-import React46, { useCallback as useCallback10, useState as useState17 } from "react";
+import React47, { useCallback as useCallback10, useState as useState17 } from "react";
 import { InfoIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/primitives/DialogContent.jsx
 init_define_process_env();
-import React45, { useRef as useRef12 } from "react";
+import React46, { useRef as useRef12 } from "react";
 import { CheckIcon as CheckIcon2, CloudUploadIcon, CrossIcon as CrossIcon8 } from "@100mslive/react-icons";
 var 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__ */ React45.createElement(Dialog.Portal, null, /* @__PURE__ */ React45.createElement(Dialog.Overlay, null), /* @__PURE__ */ React45.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ React45.createElement(Dialog.Title, null, /* @__PURE__ */ React45.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React45.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon4 ? /* @__PURE__ */ React45.createElement(Flex, { css: __spreadValues(__spreadValues({ mr: "$2", color: "$on_primary_high" }, flexCenter), iconCSS) }, /* @__PURE__ */ React45.createElement(Icon4, null)) : null, /* @__PURE__ */ React45.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ React45.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ React45.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ React45.createElement(Box, null, children)));
+  return /* @__PURE__ */ React46.createElement(Dialog.Portal, null, /* @__PURE__ */ React46.createElement(Dialog.Overlay, null), /* @__PURE__ */ React46.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ React46.createElement(Dialog.Title, null, /* @__PURE__ */ React46.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React46.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon4 ? /* @__PURE__ */ React46.createElement(Flex, { css: __spreadValues(__spreadValues({ mr: "$2", color: "$on_primary_high" }, flexCenter), iconCSS) }, /* @__PURE__ */ React46.createElement(Icon4, null)) : null, /* @__PURE__ */ React46.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ React46.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ React46.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ React46.createElement(Box, null, children)));
 };
 var ErrorDialog = (_a8) => {
   var _b7 = _a8, { open = true, onOpenChange, title, children } = _b7, props = __objRest(_b7, ["open", "onOpenChange", "title", "children"]);
-  return /* @__PURE__ */ React45.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React46.createElement(
     DialogContent,
     __spreadValues({
       Icon: CrossIcon8,
@@ -15549,10 +15653,10 @@ var ErrorDialog = (_a8) => {
       closeable: false,
       iconCSS: { color: "$alert_error_default" }
     }, props),
-    /* @__PURE__ */ React45.createElement(Box, { css: { mt: "$lg" } }, children)
+    /* @__PURE__ */ React46.createElement(Box, { css: { mt: "$lg" } }, children)
   ));
 };
-var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon4 }) => /* @__PURE__ */ React45.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React45.createElement(Dialog.Portal, null, /* @__PURE__ */ React45.createElement(Dialog.Overlay, null), /* @__PURE__ */ React45.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React45.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md" } }, Icon4 ? Icon4 : null, /* @__PURE__ */ React45.createElement(Text, { variant: "h6" }, title)), typeof body === "string" ? /* @__PURE__ */ React45.createElement(
+var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Accept", onAction, Icon: Icon4 }) => /* @__PURE__ */ React46.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React46.createElement(Dialog.Portal, null, /* @__PURE__ */ React46.createElement(Dialog.Overlay, null), /* @__PURE__ */ React46.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React46.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md" } }, Icon4 ? Icon4 : null, /* @__PURE__ */ React46.createElement(Text, { variant: "h6" }, title)), typeof body === "string" ? /* @__PURE__ */ React46.createElement(
   Text,
   {
     variant: "md",
@@ -15564,7 +15668,7 @@ var RequestDialog = ({ open = true, onOpenChange, title, body, actionText = "Acc
     }
   },
   body
-) : /* @__PURE__ */ React45.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React45.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React45.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React45.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React45.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React45.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React45.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
+) : /* @__PURE__ */ React46.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React46.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React46.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React46.createElement(Dialog.Close, { css: { width: "100%" } }, /* @__PURE__ */ React46.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" } }, "Cancel"))), /* @__PURE__ */ React46.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React46.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction }, actionText))))));
 var DialogRow = ({ children, breakSm = false, css: css2, justify = "between" }) => {
   let finalCSS = {
     margin: "$10 0",
@@ -15579,7 +15683,7 @@ var DialogRow = ({ children, breakSm = false, css: css2, justify = "between" })
   if (css2) {
     finalCSS = Object.assign(finalCSS, css2);
   }
-  return /* @__PURE__ */ React45.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
+  return /* @__PURE__ */ React46.createElement(Flex, { align: "center", justify, css: finalCSS }, children);
 };
 var DialogCol = (_a8) => {
   var _b7 = _a8, { children, breakSm = false, css: css2, align = "center", justify = "between" } = _b7, props = __objRest(_b7, ["children", "breakSm", "css", "align", "justify"]);
@@ -15595,20 +15699,20 @@ var DialogCol = (_a8) => {
   if (css2) {
     finalCSS = Object.assign(finalCSS, css2);
   }
-  return /* @__PURE__ */ React45.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
+  return /* @__PURE__ */ React46.createElement(Flex, __spreadValues({ direction: "column", align, justify, css: finalCSS }, props), children);
 };
 var DialogSelect = (_a8) => {
   var _b7 = _a8, { title, options, keyField, labelField, selected, onChange } = _b7, props = __objRest(_b7, ["title", "options", "keyField", "labelField", "selected", "onChange"]);
-  return /* @__PURE__ */ React45.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React45.createElement(Label3, null, title), /* @__PURE__ */ React45.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ React45.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ React45.createElement(Select.Select, { onChange: (e) => onChange(e.target.value), value: selected, css: { width: "100%" } }, options.map((option) => {
+  return /* @__PURE__ */ React46.createElement(DialogRow, { breakSm: true }, /* @__PURE__ */ React46.createElement(Label3, null, title), /* @__PURE__ */ React46.createElement(Select.Root, __spreadValues({ "data-testid": `dialog_select_${title}`, css: { width: "70%", "@sm": { width: "100%" } } }, props), /* @__PURE__ */ React46.createElement(Select.DefaultDownIcon, null), /* @__PURE__ */ React46.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__ */ React45.createElement("option", { value: id, key: id }, label);
+    return /* @__PURE__ */ React46.createElement("option", { value: id, key: id }, label);
   }))));
 };
 var DialogInputFile = (_a8) => {
   var _b7 = _a8, { value, onChange, placeholder, disabled, type } = _b7, props = __objRest(_b7, ["value", "onChange", "placeholder", "disabled", "type"]);
   const inputRef = useRef12();
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     DialogCol,
     {
       breakSm: true,
@@ -15629,7 +15733,7 @@ var DialogInputFile = (_a8) => {
       },
       gap: "8"
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       IconButton,
       {
         variant: "standard",
@@ -15643,7 +15747,7 @@ var DialogInputFile = (_a8) => {
           }
         }
       },
-      /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React46.createElement(
         CloudUploadIcon,
         {
           style: {
@@ -15653,7 +15757,7 @@ var DialogInputFile = (_a8) => {
         }
       )
     ),
-    /* @__PURE__ */ React45.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React46.createElement(
       Input,
       __spreadValues({
         ref: inputRef,
@@ -15665,7 +15769,7 @@ var DialogInputFile = (_a8) => {
         type,
         hidden: true
       }, props)
-    ), /* @__PURE__ */ React45.createElement(
+    ), /* @__PURE__ */ React46.createElement(
       IconButton,
       {
         variant: "standard",
@@ -15679,7 +15783,7 @@ var DialogInputFile = (_a8) => {
           }
         }
       },
-      /* @__PURE__ */ React45.createElement(Text, { variant: "md" }, placeholder)
+      /* @__PURE__ */ React46.createElement(Text, { variant: "md" }, placeholder)
     ))
   );
 };
@@ -15706,7 +15810,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
     },
     [resolution]
   );
-  return /* @__PURE__ */ React46.createElement(DialogRow, { breakSm: true, css: css2 }, /* @__PURE__ */ React46.createElement(Flex, { gap: 1 }, /* @__PURE__ */ React46.createElement(Label3, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ React46.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React46.createElement("div", null, /* @__PURE__ */ React46.createElement(InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(DialogRow, { breakSm: true, css: css2 }, /* @__PURE__ */ React47.createElement(Flex, { gap: 1 }, /* @__PURE__ */ React47.createElement(Label3, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ React47.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement(InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ React47.createElement(
     Flex,
     {
       justify: "between",
@@ -15714,7 +15818,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
       gap: 2,
       direction: "column"
     },
-    /* @__PURE__ */ React46.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ React46.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React46.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ React47.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React47.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ React47.createElement(
       Input,
       {
         "data-testid": `${testId}_width`,
@@ -15728,7 +15832,7 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
         onBlur: () => onResolutionChange(resolution),
         type: "number"
       }
-    )), /* @__PURE__ */ React46.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React46.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ React46.createElement(
+    )), /* @__PURE__ */ React47.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React47.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ React47.createElement(
       Input,
       {
         "data-testid": `${testId}_height`,
@@ -15757,7 +15861,7 @@ var StartRecording = ({ open, onOpenChange }) => {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React47.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React47.createElement(Dialog.Portal, null, /* @__PURE__ */ React47.createElement(
+    return /* @__PURE__ */ React48.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React48.createElement(Dialog.Portal, null, /* @__PURE__ */ React48.createElement(
       Dialog.Content,
       {
         css: {
@@ -15766,9 +15870,9 @@ var StartRecording = ({ open, onOpenChange }) => {
           bg: "#201617"
         }
       },
-      /* @__PURE__ */ React47.createElement(Dialog.Title, null, /* @__PURE__ */ React47.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ React47.createElement(AlertTriangleIcon3, null), /* @__PURE__ */ React47.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
-      /* @__PURE__ */ React47.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__ */ React47.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React47.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React47.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React48.createElement(Dialog.Title, null, /* @__PURE__ */ React48.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ React48.createElement(AlertTriangleIcon3, null), /* @__PURE__ */ React48.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
+      /* @__PURE__ */ React48.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__ */ React48.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React48.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React48.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React48.createElement(
         Button,
         {
           "data-testid": "stop_recording_confirm_mobile",
@@ -15790,14 +15894,14 @@ var StartRecording = ({ open, onOpenChange }) => {
       ))
     )));
   }
-  return /* @__PURE__ */ React47.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React47.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React47.createElement(Dialog.Title, null, /* @__PURE__ */ React47.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React48.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React48.createElement(Dialog.Title, null, /* @__PURE__ */ React48.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React48.createElement(
     ResolutionInput,
     {
       testId: "recording_resolution_mobile",
       css: { flexDirection: "column", alignItems: "start" },
       onResolutionChange: setResolution
     }
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.createElement(
     Button,
     {
       "data-testid": "start_recording_confirm_mobile",
@@ -15818,7 +15922,7 @@ var StartRecording_default = StartRecording;
 
 // src/Prebuilt/components/StatsForNerds.jsx
 init_define_process_env();
-import React48, { useEffect as useEffect14, useMemo as useMemo6, useRef as useRef13, useState as useState19 } from "react";
+import React49, { useEffect as useEffect14, useMemo as useMemo6, useRef as useRef13, useState as useState19 } from "react";
 import { match as match3, P as P2 } from "ts-pattern";
 import {
   selectHMSStats as selectHMSStats3,
@@ -15845,7 +15949,7 @@ var StatsForNerds = ({ onOpenChange }) => {
       setSelectedStat("local-peer");
     }
   }, [tracksWithLabels, selectedStat]);
-  return /* @__PURE__ */ React48.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React48.createElement(Dialog.Portal, null, /* @__PURE__ */ React48.createElement(Dialog.Overlay, null), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React49.createElement(Dialog.Portal, null, /* @__PURE__ */ React49.createElement(Dialog.Overlay, null), /* @__PURE__ */ React49.createElement(
     Dialog.Content,
     {
       css: {
@@ -15854,10 +15958,10 @@ var StatsForNerds = ({ onOpenChange }) => {
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React48.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React48.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React48.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React48.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React48.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
-    /* @__PURE__ */ React48.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
-    /* @__PURE__ */ React48.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React48.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React48.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
-    /* @__PURE__ */ React48.createElement(
+    /* @__PURE__ */ React49.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React49.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React49.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React49.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React49.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
+    /* @__PURE__ */ React49.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
+    /* @__PURE__ */ React49.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React49.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React49.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
+    /* @__PURE__ */ React49.createElement(
       Flex,
       {
         direction: "column",
@@ -15867,8 +15971,8 @@ var StatsForNerds = ({ onOpenChange }) => {
           minWidth: 0
         }
       },
-      /* @__PURE__ */ React48.createElement(Label3, { variant: "body2", css: { c: "$on_surface_high" } }, "Stats For"),
-      /* @__PURE__ */ React48.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React49.createElement(Label3, { variant: "body2", css: { c: "$on_surface_high" } }, "Stats For"),
+      /* @__PURE__ */ React49.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React49.createElement(
         DialogDropdownTrigger,
         {
           title: selectedStat.label || "Select Stats",
@@ -15877,9 +15981,9 @@ var StatsForNerds = ({ onOpenChange }) => {
           open,
           ref
         }
-      ), /* @__PURE__ */ React48.createElement(Dropdown.Portal, null, /* @__PURE__ */ React48.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a8 = ref.current) == null ? void 0 : _a8.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
+      ), /* @__PURE__ */ React49.createElement(Dropdown.Portal, null, /* @__PURE__ */ React49.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__ */ React48.createElement(
+        return /* @__PURE__ */ React49.createElement(
           Dropdown.Item,
           {
             key: `${option.id}-${option.layer || ""}`,
@@ -15896,7 +16000,7 @@ var StatsForNerds = ({ onOpenChange }) => {
         );
       }))))
     ),
-    selectedStat.id === "local-peer" ? /* @__PURE__ */ React48.createElement(LocalPeerStats, null) : /* @__PURE__ */ React48.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
+    selectedStat.id === "local-peer" ? /* @__PURE__ */ React49.createElement(LocalPeerStats, null) : /* @__PURE__ */ React49.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
   )));
 };
 var useTracksWithLabel = () => {
@@ -15938,13 +16042,13 @@ var LocalPeerStats = () => {
   if (!stats) {
     return null;
   }
-  return /* @__PURE__ */ React48.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Packets Lost", value: (_a8 = stats.subscribe) == null ? void 0 : _a8.packetsLost }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Jitter", value: (_b7 = stats.subscribe) == null ? void 0 : _b7.jitter }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Publish Bitrate", value: formatBytes2((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Subscribe Bitrate", value: formatBytes2((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Packets Lost", value: (_a8 = stats.subscribe) == null ? void 0 : _a8.packetsLost }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Jitter", value: (_b7 = stats.subscribe) == null ? void 0 : _b7.jitter }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Publish Bitrate", value: formatBytes2((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Subscribe Bitrate", value: formatBytes2((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React49.createElement(
     StatsRow2,
     {
       label: "Available Outgoing Bitrate",
       value: formatBytes2((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
     }
-  ), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Total Bytes Sent", value: formatBytes2((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Total Bytes Received", value: formatBytes2((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React48.createElement(
+  ), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Total Bytes Sent", value: formatBytes2((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Total Bytes Received", value: formatBytes2((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React49.createElement(
     StatsRow2,
     {
       label: "Round Trip Time",
@@ -15965,13 +16069,13 @@ var TrackStats = ({ trackID, layer, local }) => {
     return null;
   }
   const inbound = stats.type.includes("inbound");
-  return /* @__PURE__ */ React48.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Bitrate", value: formatBytes2(stats.bitrate, "b/s") }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Jitter", value: (_a8 = stats.jitter) == null ? void 0 : _a8.toFixed(3) }), /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Bitrate", value: formatBytes2(stats.bitrate, "b/s") }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Jitter", value: (_a8 = stats.jitter) == null ? void 0 : _a8.toFixed(3) }), /* @__PURE__ */ React49.createElement(
     StatsRow2,
     {
       label: inbound ? "Bytes Received" : "Bytes Sent",
       value: formatBytes2(inbound ? stats.bytesReceived : stats.bytesSent)
     }
-  ), stats.kind === "video" && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React48.createElement(StatsRow2, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React48.createElement(
+  ), stats.kind === "video" && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React49.createElement(StatsRow2, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React49.createElement(
     StatsRow2,
     {
       label: "Round Trip Time",
@@ -15979,7 +16083,7 @@ var TrackStats = ({ trackID, layer, local }) => {
     }
   ));
 };
-var StatsRow2 = React48.memo(({ label, value }) => /* @__PURE__ */ React48.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ React48.createElement(
+var StatsRow2 = React49.memo(({ label, value }) => /* @__PURE__ */ React49.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ React49.createElement(
   Text,
   {
     variant: "overline",
@@ -15990,7 +16094,7 @@ var StatsRow2 = React48.memo(({ label, value }) => /* @__PURE__ */ React48.creat
     }
   },
   label
-), /* @__PURE__ */ React48.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
+), /* @__PURE__ */ React49.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
 var formatBytes2 = (bytes, unit = "B", decimals = 2) => {
   if (bytes === void 0)
     return "-";
@@ -16005,7 +16109,7 @@ var formatBytes2 = (bytes, unit = "B", decimals = 2) => {
 
 // src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
 init_define_process_env();
-import React49, { useCallback as useCallback11, useRef as useRef14, useState as useState20 } from "react";
+import React50, { useCallback as useCallback11, useRef as useRef14, useState as useState20 } from "react";
 import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon4, ChangeRoleIcon, CheckIcon as CheckIcon3 } from "@100mslive/react-icons";
 var BulkRoleChangeModal = ({ onOpenChange }) => {
@@ -16034,7 +16138,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       }
     }
   }), [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
-  return /* @__PURE__ */ React49.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React49.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React49.createElement(DialogRow, null, /* @__PURE__ */ React49.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React50.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React50.createElement(DialogRow, null, /* @__PURE__ */ React50.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React50.createElement(
     Dropdown.Root,
     {
       open: bulkRoleDialog,
@@ -16045,7 +16149,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       },
       modal: false
     },
-    /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(
       DialogDropdownTrigger,
       {
         ref,
@@ -16057,7 +16161,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
         open: bulkRoleDialog
       }
     ),
-    /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(
       Dropdown.Content,
       {
         css: { w: (_a8 = ref.current) == null ? void 0 : _a8.clientWidth, zIndex: 1e3 },
@@ -16068,7 +16172,7 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
         }
       },
       roles && roles.map((role) => {
-        return /* @__PURE__ */ React49.createElement(
+        return /* @__PURE__ */ React50.createElement(
           Dropdown.CheckboxItem,
           {
             key: role,
@@ -16080,12 +16184,12 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
               setErrorMessage("");
             }
           },
-          /* @__PURE__ */ React49.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React49.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React49.createElement(CheckIcon3, { width: 16, height: 16 }))),
+          /* @__PURE__ */ React50.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React50.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React50.createElement(CheckIcon3, { width: 16, height: 16 }))),
           role
         );
       })
     )
-  )), /* @__PURE__ */ React49.createElement(DialogRow, null, /* @__PURE__ */ React49.createElement(Text, null, "To Role: "), /* @__PURE__ */ React49.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React49.createElement(
+  )), /* @__PURE__ */ React50.createElement(DialogRow, null, /* @__PURE__ */ React50.createElement(Text, null, "To Role: "), /* @__PURE__ */ React50.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React50.createElement(
     DialogDropdownTrigger,
     {
       ref: roleRef,
@@ -16096,8 +16200,8 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       },
       open: roleDialog
     }
-  ), /* @__PURE__ */ React49.createElement(Dropdown.Content, { css: { w: (_b7 = roleRef.current) == null ? void 0 : _b7.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
-    return /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(Dropdown.Content, { css: { w: (_b7 = roleRef.current) == null ? void 0 : _b7.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
+    return /* @__PURE__ */ React50.createElement(
       Dropdown.Item,
       {
         key: role,
@@ -16108,17 +16212,17 @@ var BulkRoleChangeModal = ({ onOpenChange }) => {
       },
       role
     );
-  })))), /* @__PURE__ */ React49.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React49.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ React49.createElement(AlertTriangleIcon4, null), /* @__PURE__ */ React49.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React49.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React49.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React49.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
+  })))), /* @__PURE__ */ React50.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React50.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ React50.createElement(AlertTriangleIcon4, null), /* @__PURE__ */ React50.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React50.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React50.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React50.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
 };
 
 // src/Prebuilt/components/MoreSettings/CaptionModal.tsx
 init_define_process_env();
-import React51 from "react";
+import React52 from "react";
 import { useMedia as useMedia7 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/CaptionContent.tsx
 init_define_process_env();
-import React50 from "react";
+import React51 from "react";
 import { HMSTranscriptionMode, selectIsTranscriptionEnabled as selectIsTranscriptionEnabled2, useHMSActions as useHMSActions14, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon5, CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
 var CaptionContent = ({ isMobile, onExit }) => {
@@ -16127,7 +16231,7 @@ var CaptionContent = ({ isMobile, onExit }) => {
   const isTranscriptionEnabled = useHMSStore18(selectIsTranscriptionEnabled2);
   const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
   const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
-  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(
     Text,
     {
       variant: isMobile ? "md" : "lg",
@@ -16140,15 +16244,15 @@ var CaptionContent = ({ isMobile, onExit }) => {
     },
     isTranscriptionEnabled ? "Disable" : "Enable",
     " Closed Caption (CC) for this session?",
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.createElement(
       Box,
       {
         css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
         onClick: onExit
       },
-      /* @__PURE__ */ React50.createElement(CrossIcon9, null)
+      /* @__PURE__ */ React51.createElement(CrossIcon9, null)
     )
-  ), !isMobile ? /* @__PURE__ */ React50.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__ */ React50.createElement(
+  ), !isMobile ? /* @__PURE__ */ React51.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__ */ React51.createElement(
     Flex,
     {
       justify: "between",
@@ -16160,8 +16264,8 @@ var CaptionContent = ({ isMobile, onExit }) => {
         "@md": { px: "$4" }
       }
     },
-    isMobile ? null : /* @__PURE__ */ React50.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, onClick: onExit }, "Cancel"),
-    /* @__PURE__ */ React50.createElement(
+    isMobile ? null : /* @__PURE__ */ React51.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, onClick: onExit }, "Cancel"),
+    /* @__PURE__ */ React51.createElement(
       Flex,
       {
         direction: "column",
@@ -16172,7 +16276,7 @@ var CaptionContent = ({ isMobile, onExit }) => {
           "@md": { px: "$4" }
         }
       },
-      isMobile && isTranscriptionEnabled ? /* @__PURE__ */ React50.createElement(
+      isMobile && isTranscriptionEnabled ? /* @__PURE__ */ React51.createElement(
         Button,
         {
           variant: "standard",
@@ -16185,7 +16289,7 @@ var CaptionContent = ({ isMobile, onExit }) => {
         },
         isCaptionEnabled ? "Hide For Me" : "Show For Me"
       ) : null,
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React51.createElement(
         Button,
         {
           variant: isTranscriptionEnabled ? "danger" : "primary",
@@ -16202,7 +16306,7 @@ var CaptionContent = ({ isMobile, onExit }) => {
                   title: `Disabling Closed Caption for everyone.`,
                   variant: "standard",
                   duration: DURATION,
-                  icon: /* @__PURE__ */ React50.createElement(Loading, { color: "currentColor" })
+                  icon: /* @__PURE__ */ React51.createElement(Loading, { color: "currentColor" })
                 });
                 setToastId(id2);
                 onExit();
@@ -16215,14 +16319,14 @@ var CaptionContent = ({ isMobile, onExit }) => {
                 title: `Enabling Closed Caption for everyone.`,
                 variant: "standard",
                 duration: DURATION,
-                icon: /* @__PURE__ */ React50.createElement(Loading, { color: "currentColor" })
+                icon: /* @__PURE__ */ React51.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__ */ React50.createElement(AlertTriangleIcon5, { style: { marginRight: "0.5rem" } })
+                icon: /* @__PURE__ */ React51.createElement(AlertTriangleIcon5, { style: { marginRight: "0.5rem" } })
               });
               setToastId(id);
             } finally {
@@ -16235,7 +16339,7 @@ var CaptionContent = ({ isMobile, onExit }) => {
         " for Everyone"
       )
     )
-  ), isMobile && /* @__PURE__ */ React50.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__ */ React51.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
@@ -16248,14 +16352,14 @@ var CaptionModal = ({ onOpenChange }) => {
     }
   };
   if (isMobile) {
-    return /* @__PURE__ */ React51.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React51.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ React51.createElement(CaptionContent, __spreadValues({}, props))));
+    return /* @__PURE__ */ React52.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React52.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ React52.createElement(CaptionContent, __spreadValues({}, props))));
   }
-  return /* @__PURE__ */ React51.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React51.createElement(Dialog.Portal, null, /* @__PURE__ */ React51.createElement(Dialog.Overlay, null), /* @__PURE__ */ React51.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React51.createElement(CaptionContent, __spreadValues({}, props)))));
+  return /* @__PURE__ */ React52.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React52.createElement(Dialog.Portal, null, /* @__PURE__ */ React52.createElement(Dialog.Overlay, null), /* @__PURE__ */ React52.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React52.createElement(CaptionContent, __spreadValues({}, props)))));
 };
 
 // src/Prebuilt/components/MoreSettings/FullScreenItem.tsx
 init_define_process_env();
-import React52 from "react";
+import React53 from "react";
 import { ExpandIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useFullscreen.ts
@@ -16306,7 +16410,7 @@ var FullScreenItem = () => {
   if (!allowed) {
     return null;
   }
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(
     Dropdown.Item,
     {
       onClick: () => {
@@ -16314,14 +16418,14 @@ var FullScreenItem = () => {
       },
       "data-testid": "full_screen_btn"
     },
-    /* @__PURE__ */ React52.createElement(ExpandIcon, null),
-    /* @__PURE__ */ React52.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
+    /* @__PURE__ */ React53.createElement(ExpandIcon, null),
+    /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
   );
 };
 
 // src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
 init_define_process_env();
-import React54, { useCallback as useCallback13, useState as useState22 } from "react";
+import React55, { useCallback as useCallback13, useState as useState22 } from "react";
 import {
   selectAvailableRoleNames as selectAvailableRoleNames4,
   useHMSActions as useHMSActions15,
@@ -16331,7 +16435,7 @@ import { MicOffIcon as MicOffIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/MoreSettings/MuteAllContent.tsx
 init_define_process_env();
-import React53 from "react";
+import React54 from "react";
 import { selectPermissions as selectPermissions6, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/constants.ts
@@ -16353,7 +16457,7 @@ var trackTypeOptions = [
 var MuteAllContent = (props) => {
   const roles = props.roles || [];
   const permissions = useHMSStore19(selectPermissions6);
-  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(
     DialogSelect,
     {
       title: "Role",
@@ -16363,7 +16467,7 @@ var MuteAllContent = (props) => {
       labelField: "label",
       onChange: props.setRole
     }
-  ), /* @__PURE__ */ React53.createElement(
+  ), /* @__PURE__ */ React54.createElement(
     DialogSelect,
     {
       title: "Track type",
@@ -16373,7 +16477,7 @@ var MuteAllContent = (props) => {
       keyField: "value",
       labelField: "label"
     }
-  ), /* @__PURE__ */ React53.createElement(
+  ), /* @__PURE__ */ React54.createElement(
     DialogSelect,
     {
       title: "Track source",
@@ -16383,7 +16487,7 @@ var MuteAllContent = (props) => {
       keyField: "value",
       labelField: "label"
     }
-  ), /* @__PURE__ */ React53.createElement(DialogRow, null, /* @__PURE__ */ React53.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React53.createElement(RadioGroup.Root, { value: String(props.enabled), onValueChange: (value) => props.setEnabled(value === "true") }, (permissions == null ? void 0 : permissions.mute) && /* @__PURE__ */ React53.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React53.createElement(RadioGroup.Item, { value: "false", id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React53.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React53.createElement(Label3, { htmlFor: "trackDisableRadio" }, "Mute")), (permissions == null ? void 0 : permissions.unmute) && /* @__PURE__ */ React53.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React53.createElement(RadioGroup.Item, { value: "true", id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React53.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React53.createElement(Label3, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React53.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React53.createElement(Button, { variant: "primary", onClick: props.muteAll, css: { w: (props == null ? void 0 : props.isMobile) ? "100%" : "" } }, "Apply")));
+  ), /* @__PURE__ */ React54.createElement(DialogRow, null, /* @__PURE__ */ React54.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React54.createElement(RadioGroup.Root, { value: String(props.enabled), onValueChange: (value) => props.setEnabled(value === "true") }, (permissions == null ? void 0 : permissions.mute) && /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React54.createElement(RadioGroup.Item, { value: "false", id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React54.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React54.createElement(Label3, { htmlFor: "trackDisableRadio" }, "Mute")), (permissions == null ? void 0 : permissions.unmute) && /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React54.createElement(RadioGroup.Item, { value: "true", id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React54.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React54.createElement(Label3, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React54.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React54.createElement(Button, { variant: "primary", onClick: props.muteAll, css: { w: (props == null ? void 0 : props.isMobile) ? "100%" : "" } }, "Apply")));
 };
 
 // src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
@@ -16420,9 +16524,9 @@ var MuteAllModal = ({
     isMobile
   };
   if (isMobile) {
-    return /* @__PURE__ */ React54.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React54.createElement(Sheet.Content, { css: { px: "$10" } }, /* @__PURE__ */ React54.createElement(MuteAllContent, __spreadValues({}, props))));
+    return /* @__PURE__ */ React55.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React55.createElement(Sheet.Content, { css: { px: "$10" } }, /* @__PURE__ */ React55.createElement(MuteAllContent, __spreadValues({}, props))));
   }
-  return /* @__PURE__ */ React54.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React54.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon2 }, /* @__PURE__ */ React54.createElement(MuteAllContent, __spreadValues({}, props))));
+  return /* @__PURE__ */ React55.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React55.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon2 }, /* @__PURE__ */ React55.createElement(MuteAllContent, __spreadValues({}, props))));
 };
 
 // src/Prebuilt/components/hooks/useMetadata.tsx
@@ -16516,15 +16620,15 @@ var DesktopOptions = ({
       return copy;
     });
   };
-  return /* @__PURE__ */ React55.createElement(Fragment6, null, /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(Fragment6, null, /* @__PURE__ */ React56.createElement(
     Dropdown.Root,
     {
       open: openModals.has(MODALS.MORE_SETTINGS),
       onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value),
       modal: false
     },
-    /* @__PURE__ */ React55.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React55.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React55.createElement(IconButton_default, null, /* @__PURE__ */ React55.createElement(HamburgerMenuIcon, null)))),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React56.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React56.createElement(IconButton_default, null, /* @__PURE__ */ React56.createElement(HamburgerMenuIcon, null)))),
+    /* @__PURE__ */ React56.createElement(
       Dropdown.Content,
       {
         sideOffset: 5,
@@ -16538,8 +16642,8 @@ var DesktopOptions = ({
           }
         }
       },
-      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React55.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React55.createElement(BrbIcon, null), /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React55.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React55.createElement(CheckIcon4, null) : null)) : null,
-      isTranscriptionAllowed ? /* @__PURE__ */ React55.createElement(
+      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React56.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React56.createElement(BrbIcon, null), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React56.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React56.createElement(CheckIcon4, null) : null)) : null,
+      isTranscriptionAllowed ? /* @__PURE__ */ React56.createElement(
         Dropdown.Item,
         {
           "data-testid": "closed_caption_admin",
@@ -16547,61 +16651,61 @@ var DesktopOptions = ({
             updateState(MODALS.CAPTION, true);
           }
         },
-        /* @__PURE__ */ React55.createElement(OpenCaptionIcon2, null),
-        /* @__PURE__ */ React55.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Closed Captions"), /* @__PURE__ */ React55.createElement(Text, { variant: "caption", css: { ml: "$4", color: "$on_surface_medium" } }, isTranscriptionEnabled ? "Enabled" : "Disabled")),
-        /* @__PURE__ */ React55.createElement(Switch, { id: "closed_caption_start_stop", checked: isTranscriptionEnabled, disabled: false })
+        /* @__PURE__ */ React56.createElement(OpenCaptionIcon2, null),
+        /* @__PURE__ */ React56.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Closed Captions"), /* @__PURE__ */ React56.createElement(Text, { variant: "caption", css: { ml: "$4", color: "$on_surface_medium" } }, isTranscriptionEnabled ? "Enabled" : "Disabled")),
+        /* @__PURE__ */ React56.createElement(Switch, { id: "closed_caption_start_stop", checked: isTranscriptionEnabled, disabled: false })
       ) : null,
-      screenType !== "hls_live_streaming" ? /* @__PURE__ */ React55.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ React55.createElement(
+      screenType !== "hls_live_streaming" ? /* @__PURE__ */ React56.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ React56.createElement(
         PIP,
         {
-          content: /* @__PURE__ */ React55.createElement(Flex, { css: { w: "100%", h: "100%", p: "$8" } }, /* @__PURE__ */ React55.createElement(PipIcon2, null), /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isPipOn ? "Disable" : "Enable", " Picture-in-Picture"))
+          content: /* @__PURE__ */ React56.createElement(Flex, { css: { w: "100%", h: "100%", p: "$8" } }, /* @__PURE__ */ React56.createElement(PipIcon2, null), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isPipOn ? "Disable" : "Enable", " Picture-in-Picture"))
         }
       )) : null,
-      /* @__PURE__ */ React55.createElement(FullScreenItem, null),
-      /* @__PURE__ */ React55.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
-      /* @__PURE__ */ React55.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React55.createElement(SettingsIcon3, null), /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
+      /* @__PURE__ */ React56.createElement(FullScreenItem, null),
+      /* @__PURE__ */ React56.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
+      /* @__PURE__ */ React56.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React56.createElement(SettingsIcon3, null), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
       match4({ screenType, isSupported: HMSHLSPlayer.isSupported() }).with({ screenType: "hls_live_streaming", isSupported: false }, () => null).with({ screenType: "hls_live_streaming", isSupported: true }, () => {
-        return /* @__PURE__ */ React55.createElement(
+        return /* @__PURE__ */ React56.createElement(
           Dropdown.Item,
           {
             onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
             "data-testid": "hls_stats"
           },
-          /* @__PURE__ */ React55.createElement(
+          /* @__PURE__ */ React56.createElement(
             Checkbox.Root,
             {
               css: { margin: "$2" },
               checked: enablHlsStats,
               onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
             },
-            /* @__PURE__ */ React55.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React55.createElement(CheckIcon4, { width: 16, height: 16 }))
+            /* @__PURE__ */ React56.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React56.createElement(CheckIcon4, { width: 16, height: 16 }))
           ),
-          /* @__PURE__ */ React55.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
+          /* @__PURE__ */ React56.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
         );
-      }).otherwise(() => /* @__PURE__ */ React55.createElement(
+      }).otherwise(() => /* @__PURE__ */ React56.createElement(
         Dropdown.Item,
         {
           onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
           "data-testid": "stats_for_nerds_btn"
         },
-        /* @__PURE__ */ React55.createElement(InfoIcon2, null),
-        /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
+        /* @__PURE__ */ React56.createElement(InfoIcon2, null),
+        /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
       ))
     )
-  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React55.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React55.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React55.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React55.createElement(
+  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React56.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React56.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React56.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React56.createElement(
     SettingsModal_default,
     {
       open: true,
       onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value),
       screenType
     }
-  ), openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React55.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React55.createElement(
+  ), openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React56.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React56.createElement(
     RoleChangeModal,
     {
       peerId: localPeerId,
       onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value)
     }
-  ), openModals.has(MODALS.CAPTION) && /* @__PURE__ */ React55.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS.CAPTION, value) }));
+  ), openModals.has(MODALS.CAPTION) && /* @__PURE__ */ React56.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS.CAPTION, value) }));
 };
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
@@ -16641,7 +16745,7 @@ import {
 
 // src/Prebuilt/components/Header/StreamActions.tsx
 init_define_process_env();
-import React57, { useCallback as useCallback17, useEffect as useEffect16, useRef as useRef15, useState as useState25 } from "react";
+import React58, { useCallback as useCallback17, useEffect as useEffect16, useRef as useRef15, useState as useState25 } from "react";
 import { useMedia as useMedia8 } from "react-use";
 
 // ../hms-video-store/dist/index.js
@@ -18863,7 +18967,7 @@ var er = (a2, e) => {
 };
 var Ba = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
 var cr = Ba((Ic, Ja) => {
-  Ja.exports = { version: "0.12.13-alpha.1", 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.3", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
 });
 var 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 || {});
 var Va = ((e) => (e.CHAT = "chat", e))(Va || {});
@@ -19959,7 +20063,7 @@ import { AlertTriangleIcon as AlertTriangleIcon6, CrossIcon as CrossIcon10, Paus
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
 init_define_process_env();
-import React56, { useState as useState24 } from "react";
+import React57, { useState as useState24 } from "react";
 import { selectLocalPeerID as selectLocalPeerID5, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore25, useScreenShare } from "@100mslive/react-sdk";
 import {
   AudioPlayerIcon,
@@ -20072,7 +20176,7 @@ var AdditionalRoomState = () => {
   if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
     return null;
   }
-  return /* @__PURE__ */ React56.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React56.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React57.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React57.createElement(
     Flex,
     {
       align: "center",
@@ -20085,12 +20189,12 @@ var AdditionalRoomState = () => {
       },
       "data-testid": "record_status_dropdown"
     },
-    !isAudioshareInactive && /* @__PURE__ */ React56.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React56.createElement(MusicIcon, { width: 24, height: 24 }))),
-    shouldShowScreenShareState && /* @__PURE__ */ React56.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React56.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
-    shouldShowVideoState && /* @__PURE__ */ React56.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React56.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
-    !isPlaylistInactive && /* @__PURE__ */ React56.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React56.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
-    /* @__PURE__ */ React56.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React56.createElement(ChevronUpIcon4, null) : /* @__PURE__ */ React56.createElement(ChevronDownIcon4, null))
-  )), /* @__PURE__ */ React56.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React56.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React56.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React56.createElement(
+    !isAudioshareInactive && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React57.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React57.createElement(MusicIcon, { width: 24, height: 24 }))),
+    shouldShowScreenShareState && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React57.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React57.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
+    shouldShowVideoState && /* @__PURE__ */ React57.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React57.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React57.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
+    !isPlaylistInactive && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React57.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React57.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
+    /* @__PURE__ */ React57.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React57.createElement(ChevronUpIcon4, null) : /* @__PURE__ */ React57.createElement(ChevronDownIcon4, null))
+  )), /* @__PURE__ */ React57.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React57.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React57.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React57.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React57.createElement(
     Text,
     {
       variant: "sm",
@@ -20101,7 +20205,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.selection.playing ? "Pause" : "Play"
-  ) : /* @__PURE__ */ React56.createElement(
+  ) : /* @__PURE__ */ React57.createElement(
     Text,
     {
       variant: "sm",
@@ -20112,7 +20216,7 @@ var AdditionalRoomState = () => {
       }
     },
     playlist.track.volume === 0 ? "Unmute" : "Mute"
-  )), !isAudioshareInactive && /* @__PURE__ */ React56.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React56.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React56.createElement(
+  )), !isAudioshareInactive && /* @__PURE__ */ React57.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React57.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React57.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React57.createElement(
     Text,
     {
       variant: "sm",
@@ -20123,7 +20227,7 @@ var AdditionalRoomState = () => {
       }
     },
     screenshareAudio.muted ? "Unmute" : "Mute"
-  )), shouldShowScreenShareState && /* @__PURE__ */ React56.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React56.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React56.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React56.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`))));
+  )), shouldShowScreenShareState && /* @__PURE__ */ React57.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React57.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React57.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React57.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React57.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React57.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
@@ -20160,7 +20264,7 @@ var LiveStatus = () => {
   if (!isHLSRunning && !isRTMPRunning) {
     return null;
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Flex,
     {
       align: "center",
@@ -20171,8 +20275,8 @@ var LiveStatus = () => {
         borderRadius: "$1"
       }
     },
-    /* @__PURE__ */ React57.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
-    /* @__PURE__ */ React57.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React57.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React57.createElement(Text, { variant: "caption" }, ((_a8 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a8.length) > 0 && isHLSRunning ? formatTime(liveTime) : ""))
+    /* @__PURE__ */ React58.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
+    /* @__PURE__ */ React58.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React58.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React58.createElement(Text, { variant: "caption" }, ((_a8 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a8.length) > 0 && isHLSRunning ? formatTime(liveTime) : ""))
   );
 };
 var RecordingStatus = () => {
@@ -20187,7 +20291,7 @@ var RecordingStatus = () => {
     if (!(isMobile && isRecordingOn))
       return null;
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Tooltip,
     {
       boxCss: { zIndex: 1 },
@@ -20197,7 +20301,7 @@ var RecordingStatus = () => {
         isHLSRecordingOn
       })
     },
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React58.createElement(
       Flex,
       {
         css: {
@@ -20205,14 +20309,14 @@ var RecordingStatus = () => {
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React57.createElement(RecordIcon, { width: 24, height: 24 })
+      /* @__PURE__ */ React58.createElement(RecordIcon, { width: 24, height: 24 })
     )
   );
 };
 var RecordingPauseStatus = () => {
   const recording = useHMSStore26(selectRecordingState2);
   if (recording.hls && recording.hls.state === Ss.PAUSED) {
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React58.createElement(
       Tooltip,
       {
         boxCss: { zIndex: 1 },
@@ -20222,7 +20326,7 @@ var RecordingPauseStatus = () => {
           isHLSRecordingOn: true
         })
       },
-      /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React58.createElement(
         Flex,
         {
           css: {
@@ -20230,7 +20334,7 @@ var RecordingPauseStatus = () => {
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ React57.createElement(PauseCircleIcon, { width: 24, height: 24 })
+        /* @__PURE__ */ React58.createElement(PauseCircleIcon, { width: 24, height: 24 })
       )
     );
   }
@@ -20246,7 +20350,7 @@ var StartRecording2 = () => {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React57.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React57.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React57.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React57.createElement(RecordIcon, null), /* @__PURE__ */ React57.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React57.createElement(Popover2.Portal, null, /* @__PURE__ */ React57.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React57.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React58.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React58.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React58.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React58.createElement(RecordIcon, null), /* @__PURE__ */ React58.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React58.createElement(Popover2.Portal, null, /* @__PURE__ */ React58.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React58.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React58.createElement(
       Button,
       {
         "data-testid": "stop_recording_confirm",
@@ -20269,7 +20373,7 @@ var StartRecording2 = () => {
       "Stop"
     ))));
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Button,
     {
       "data-testid": "start_recording",
@@ -20280,21 +20384,21 @@ var StartRecording2 = () => {
         yield startRecording();
       })
     },
-    recordingStarted ? /* @__PURE__ */ React57.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React57.createElement(RecordIcon, null),
-    /* @__PURE__ */ React57.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
+    recordingStarted ? /* @__PURE__ */ React58.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React58.createElement(RecordIcon, null),
+    /* @__PURE__ */ React58.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
   );
 };
 var StreamActions = () => {
   const isConnected = useHMSStore26(selectIsConnectedToRoom6);
   const isMobile = useMedia8(config.media.md);
   const roomState = useHMSStore26(selectRoomState3);
-  return /* @__PURE__ */ React57.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React57.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React57.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React57.createElement(RecordingPauseStatus, null), /* @__PURE__ */ React57.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React57.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React57.createElement(StartRecording2, null) : null);
+  return /* @__PURE__ */ React58.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React58.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React58.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React58.createElement(RecordingPauseStatus, null), /* @__PURE__ */ React58.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React58.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React58.createElement(StartRecording2, null) : null);
 };
 var StopRecordingInSheet = ({
   onStopRecording,
   onClose
 }) => {
-  return /* @__PURE__ */ React57.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React57.createElement(Sheet.Content, null, /* @__PURE__ */ React57.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React57.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React57.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React57.createElement(AlertTriangleIcon6, null), /* @__PURE__ */ React57.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React57.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React57.createElement(CrossIcon10, null)))), /* @__PURE__ */ React57.createElement(HorizontalDivider, null), /* @__PURE__ */ React57.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React57.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__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React58.createElement(Sheet.Content, null, /* @__PURE__ */ React58.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React58.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React58.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React58.createElement(AlertTriangleIcon6, null), /* @__PURE__ */ React58.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React58.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React58.createElement(CrossIcon10, null)))), /* @__PURE__ */ React58.createElement(HorizontalDivider, null), /* @__PURE__ */ React58.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React58.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__ */ React58.createElement(
     Button,
     {
       variant: "danger",
@@ -20307,64 +20411,6 @@ var StopRecordingInSheet = ({
   ))));
 };
 
-// src/Prebuilt/components/MoreSettings/ActionTile.jsx
-init_define_process_env();
-import React58 from "react";
-var ActionTileRoot = (_a8) => {
-  var _b7 = _a8, { active, disabled = false, children, onClick } = _b7, props = __objRest(_b7, ["active", "disabled", "children", "onClick"]);
-  return /* @__PURE__ */ React58.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
-  );
-};
-var 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"
-});
-var ActionTileTitle = styled(Text, {
-  fontWeight: "$semiBold",
-  color: "inherit",
-  textAlign: "center",
-  fontSize: "$xs !important"
-});
-var ActionTile = {
-  Root: ActionTileRoot,
-  Title: ActionTileTitle,
-  Count: ActionTileCount
-};
-
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx
 init_define_process_env();
 import React60, { useState as useState26 } from "react";
@@ -20671,6 +20717,7 @@ var MwebOptions = ({
       isHandRaised ? /* @__PURE__ */ React61.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React61.createElement(HandIcon2, null),
       /* @__PURE__ */ React61.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
     ) : null,
+    /* @__PURE__ */ React61.createElement(NoiseCancellation, { setOpenOptionsSheet, actionTile: true }),
     isTranscriptionAllowed ? /* @__PURE__ */ React61.createElement(
       ActionTile.Root,
       {
@@ -22501,7 +22548,7 @@ import {
   HMSRoomState as HMSRoomState5,
   selectAppData as selectAppData9,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled7,
-  selectLocalPeer as selectLocalPeer8,
+  selectLocalPeer as selectLocalPeer9,
   selectRoomState as selectRoomState5,
   selectVideoTrackByID as selectVideoTrackByID5,
   useAVToggle as useAVToggle3,
@@ -23695,7 +23742,7 @@ var LeaderboardSummary = ({ pollID }) => {
 init_define_process_env();
 import React102, { useEffect as useEffect26, useRef as useRef20, useState as useState42 } from "react";
 import {
-  selectLocalPeer as selectLocalPeer2,
+  selectLocalPeer as selectLocalPeer3,
   selectPeerNameByID,
   selectPermissions as selectPermissions16,
   selectPollByID as selectPollByID4,
@@ -23712,7 +23759,7 @@ import React100 from "react";
 init_define_process_env();
 import React99, { useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo10, useRef as useRef19, useState as useState40 } from "react";
 import { match as match8 } from "ts-pattern";
-import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions32, useHMSStore as useHMSStore50 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer2, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions32, useHMSStore as useHMSStore50 } from "@100mslive/react-sdk";
 import { CheckCircleIcon as CheckCircleIcon5, ChevronDownIcon as ChevronDownIcon5, CrossCircleIcon } from "@100mslive/react-icons";
 var QuestionCard2 = ({
   pollID,
@@ -23731,7 +23778,7 @@ var QuestionCard2 = ({
   rolesThatCanViewResponses
 }) => {
   const actions = useHMSActions32();
-  const localPeer = useHMSStore50(selectLocalPeer);
+  const localPeer = useHMSStore50(selectLocalPeer2);
   const isLocalPeerCreator = (localPeer == null ? void 0 : localPeer.id) === startedBy;
   const localPeerRoleName = useHMSStore50(selectLocalPeerRoleName2);
   const roleCanViewResponse = !rolesThatCanViewResponses || rolesThatCanViewResponses.length === 0 || rolesThatCanViewResponses.includes(localPeerRoleName || "");
@@ -23970,7 +24017,7 @@ var Voting = ({ id, toggleVoting }) => {
   const showSingleView = (poll == null ? void 0 : poll.type) === "quiz" && poll.state === "started";
   const fetchedInitialResponses = useRef20(false);
   const [savedResponses, setSavedResponses] = useState42({});
-  const localPeer = useHMSStore51(selectLocalPeer2);
+  const localPeer = useHMSStore51(selectLocalPeer3);
   const localPeerId = localPeer == null ? void 0 : localPeer.id;
   const customerUserId = localPeer == null ? void 0 : localPeer.customerUserId;
   useEffect26(() => {
@@ -24248,7 +24295,7 @@ var MwebChatOption = ({
 // src/Prebuilt/components/hooks/useChatBlacklist.ts
 init_define_process_env();
 import { useCallback as useCallback23 } from "react";
-import { selectLocalPeer as selectLocalPeer3, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions34, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions34, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
 var useChatBlacklist = (sessionStoreKey) => {
   const hmsActions = useHMSActions34();
   const blacklistedIDs = useHMSStore53(selectSessionStore2(sessionStoreKey));
@@ -24261,7 +24308,7 @@ var useChatBlacklist = (sessionStoreKey) => {
   return { blacklistItem, blacklistedIDs };
 };
 var useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = "" }) => {
-  const localPeer = useHMSStore53(selectLocalPeer3);
+  const localPeer = useHMSStore53(selectLocalPeer4);
   const blacklistedPeerIDs = useHMSStore53(selectSessionStore2("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
   return blacklistedPeerIDs == null ? void 0 : blacklistedPeerIDs.includes(local ? localPeer == null ? void 0 : localPeer.customerUserId : peerCustomerUserId);
 };
@@ -24981,7 +25028,7 @@ import React114, { useCallback as useCallback28, useEffect as useEffect32, useRe
 import { useMedia as useMedia17 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { selectLocalPeer as selectLocalPeer4, useHMSActions as useHMSActions39, useHMSStore as useHMSStore59 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer5, useHMSActions as useHMSActions39, useHMSStore as useHMSStore59 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, PauseCircleIcon as PauseCircleIcon2, SendIcon, VerticalMenuIcon as VerticalMenuIcon7 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
@@ -25384,7 +25431,7 @@ var ChatFooter = ({ onSend, children }) => {
   const isMobile = useMedia17(config.media.md);
   const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.message_placeholder) || "Send a message";
-  const localPeer = useHMSStore59(selectLocalPeer4);
+  const localPeer = useHMSStore59(selectLocalPeer5);
   const isOverlayChat = (_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay;
   const canDisableChat = !!((_d = (_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.real_time_controls) == null ? void 0 : _d.can_disable_chat);
   const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
@@ -25577,14 +25624,14 @@ var ChatFooter = ({ onSend, children }) => {
 // src/Prebuilt/components/Chat/ChatStates.tsx
 init_define_process_env();
 import React115, { useCallback as useCallback29 } from "react";
-import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions40, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer6, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions40, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
 var ChatPaused = () => {
   var _a8, _b7;
   const hmsActions = useHMSActions40();
   const { elements } = useRoomLayoutConferencingScreen();
   const can_disable_chat = !!((_b7 = (_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) == null ? void 0 : _b7.can_disable_chat);
   const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore60(selectSessionStore6("chatState" /* CHAT_STATE */)) || {};
-  const localPeer = useHMSStore60(selectLocalPeer5);
+  const localPeer = useHMSStore60(selectLocalPeer6);
   const unPauseChat = useCallback29(
     () => __async(void 0, null, function* () {
       return yield hmsActions.sessionStore.set("chatState" /* CHAT_STATE */, {
@@ -26029,12 +26076,12 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
 // src/Prebuilt/components/ChatSettings.tsx
 init_define_process_env();
 import React121 from "react";
-import { selectLocalPeer as selectLocalPeer6, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions42, useHMSStore as useHMSStore64 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer7, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions42, useHMSStore as useHMSStore64 } from "@100mslive/react-sdk";
 import { PauseCircleIcon as PauseCircleIcon3, SettingsIcon as SettingsIcon5 } from "@100mslive/react-icons";
 var ChatSettings = () => {
   var _a8, _b7;
   const hmsActions = useHMSActions42();
-  const localPeer = useHMSStore64(selectLocalPeer6);
+  const localPeer = useHMSStore64(selectLocalPeer7);
   const { elements } = useRoomLayoutConferencingScreen();
   const canPauseChat = !!((_b7 = (_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) == null ? void 0 : _b7.can_disable_chat);
   const { enabled: isChatEnabled = true } = useHMSStore64(selectSessionStore8("chatState" /* CHAT_STATE */)) || {};
@@ -26820,7 +26867,7 @@ import {
   selectIsLargeRoom as selectIsLargeRoom3,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled6,
   selectIsLocalVideoPluginPresent,
-  selectLocalPeer as selectLocalPeer7,
+  selectLocalPeer as selectLocalPeer8,
   selectRoomState as selectRoomState4,
   selectVideoTrackByID as selectVideoTrackByID4,
   useHMSActions as useHMSActions44,
@@ -27011,7 +27058,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
   var _a8;
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions44();
-  const localPeer = useHMSStore70(selectLocalPeer7);
+  const localPeer = useHMSStore70(selectLocalPeer8);
   const role = useHMSStore70(Ye);
   const isVideoOn = useHMSStore70(selectIsLocalVideoEnabled6);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
@@ -27469,7 +27516,7 @@ var getParticipantChipContent = (peerCount = 0) => {
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? "" : "s"} in the session`;
 };
 var useLocalTileAspectRatio = () => {
-  const localPeer = useHMSStore72(selectLocalPeer8);
+  const localPeer = useHMSStore72(selectLocalPeer9);
   const videoTrack = useHMSStore72(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
   const isMobile = useMedia26(config.media.md);
   let aspectRatio = 0;
@@ -27580,7 +27627,7 @@ var Container4 = styled("div", __spreadProps(__spreadValues({
   px: "$10"
 }));
 var PreviewTile = ({ name, error }) => {
-  const localPeer = useHMSStore72(selectLocalPeer8);
+  const localPeer = useHMSStore72(selectLocalPeer9);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle3();
   const isVideoOn = useHMSStore72(selectIsLocalVideoEnabled7);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
@@ -27637,7 +27684,7 @@ var PreviewControls = ({ hideSettings, vbEnabled }) => {
       }
     },
     /* @__PURE__ */ React134.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React134.createElement(AudioVideoToggle, null), vbEnabled ? /* @__PURE__ */ React134.createElement(VBToggle, null) : null),
-    !hideSettings ? /* @__PURE__ */ React134.createElement(PreviewSettings, null) : null
+    /* @__PURE__ */ React134.createElement(Flex, { align: "center", gap: "1" }, isMobile && /* @__PURE__ */ React134.createElement(NoiseCancellation, { iconOnly: true }), !hideSettings ? /* @__PURE__ */ React134.createElement(PreviewSettings, null) : null)
   );
 };
 var PreviewSettings = React134.memo(() => {
@@ -27747,6 +27794,7 @@ var RoleChangeRequestModal = () => {
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
 init_define_process_env();
 import React155, { Suspense, useEffect as useEffect53, useState as useState67 } from "react";
+import { useMedia as useMedia37 } from "react-use";
 import { match as match12 } from "ts-pattern";
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom9,
@@ -27839,7 +27887,7 @@ import Draggable from "react-draggable";
 import { useMedia as useMedia28 } from "react-use";
 import {
   selectIsAllowedToPublish as selectIsAllowedToPublish3,
-  selectLocalPeer as selectLocalPeer9,
+  selectLocalPeer as selectLocalPeer10,
   selectPeerByID as selectPeerByID3,
   selectVideoTrackByID as selectVideoTrackByID6,
   useHMSStore as useHMSStore74
@@ -27882,7 +27930,7 @@ var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = ({ peerId }) => {
   const isMobile = useMedia28(config.media.md);
   const isLandscape = useMedia28(config.media.ls);
-  const selector = peerId ? selectPeerByID3(peerId) : selectLocalPeer9;
+  const selector = peerId ? selectPeerByID3(peerId) : selectLocalPeer10;
   const peer = useHMSStore74(selector);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
   const videoTrack = useHMSStore74(selectVideoTrackByID6(peer == null ? void 0 : peer.videoTrack));
@@ -28189,7 +28237,7 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 init_define_process_env();
 import React145, { useEffect as useEffect45, useState as useState61 } from "react";
 import { useMedia as useMedia32 } from "react-use";
-import { selectLocalPeer as selectLocalPeer10, useHMSStore as useHMSStore76 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer11, useHMSStore as useHMSStore76 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
 init_define_process_env();
@@ -28385,7 +28433,7 @@ function RoleProminence({
 }) {
   var _a8;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore76(selectLocalPeer10);
+  const localPeer = useHMSStore76(selectLocalPeer11);
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
   const isMobile = useMedia32(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
@@ -29396,7 +29444,7 @@ var useCloseScreenshareWhiteboard = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React155.lazy(() => import("./HLSView-KYYL6BSY.js"));
+var HLSView = React155.lazy(() => import("./HLSView-LLRW3DIQ.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -29411,7 +29459,8 @@ var VideoStreamingSection = ({
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  const [captionPosition, setCaptionPosition] = useState67({ x: -200, y: 0 });
+  const isMobile = useMedia37(config.media.md);
+  const [captionPosition, setCaptionPosition] = useState67({ x: isMobile ? 0 : -200, y: 0 });
   useCloseScreenshareWhiteboard();
   const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
   useEffect53(() => {
@@ -29513,17 +29562,17 @@ init_define_process_env();
 // src/Prebuilt/components/Header/Header.tsx
 init_define_process_env();
 import React158 from "react";
-import { useMedia as useMedia38 } from "react-use";
+import { useMedia as useMedia39 } from "react-use";
 import { HMSRoomState as HMSRoomState6, selectRoomState as selectRoomState6, useHMSStore as useHMSStore86 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
 init_define_process_env();
 import React156 from "react";
-import { useMedia as useMedia37 } from "react-use";
+import { useMedia as useMedia38 } from "react-use";
 import { ChevronRightIcon as ChevronRightIcon5 } from "@100mslive/react-icons";
 var RoomDetailsHeader = () => {
   const { title, description } = useRoomLayoutHeader();
-  const isMobile = useMedia37(config.media.md);
+  const isMobile = useMedia38(config.media.md);
   const clipLength = 30;
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -29703,7 +29752,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React157.createElement(Re
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
   const roomState = useHMSStore86(selectRoomState6);
-  const isMobile = useMedia38(config.media.md);
+  const isMobile = useMedia39(config.media.md);
   if (roomState !== HMSRoomState6.Connected) {
     return /* @__PURE__ */ React158.createElement(React158.Fragment, null);
   }
@@ -30273,12 +30322,12 @@ var LeaveScreen = () => {
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
 init_define_process_env();
 import React164, { useEffect as useEffect60, useState as useState69 } from "react";
-import { useMedia as useMedia39 } from "react-use";
+import { useMedia as useMedia40 } from "react-use";
 import { match as match14, P as P5 } from "ts-pattern";
 import { RefreshIcon } from "@100mslive/react-icons";
 var MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState69(false);
-  const isLandscape = useMedia39(config.media.ls);
+  const isLandscape = useMedia40(config.media.ls);
   const isLandscapeHLSStream = useLandscapeHLSStream();
   useEffect60(() => {
     var _a8;
@@ -30745,7 +30794,7 @@ var PeerNotifications = () => {
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 init_define_process_env();
 import React169, { useEffect as useEffect65, useState as useState71 } from "react";
-import { useMedia as useMedia40 } from "react-use";
+import { useMedia as useMedia41 } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/images/android-perm-1.png
@@ -30759,7 +30808,7 @@ function PermissionErrorModal() {
   const notification = useHMSNotifications5(HMSNotificationTypes5.ERROR);
   const [deviceType, setDeviceType] = useState71("");
   const [isSystemError, setIsSystemError] = useState71(false);
-  const isMobile = useMedia40(config.media.md);
+  const isMobile = useMedia41(config.media.md);
   useEffect65(() => {
     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"))) {
@@ -31290,7 +31339,7 @@ var Sheet2 = () => {
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 init_define_process_env();
 import React180, { useCallback as useCallback37, useEffect as useEffect73, useMemo as useMemo21, useState as useState76 } from "react";
-import { useMedia as useMedia41 } from "react-use";
+import { useMedia as useMedia42 } from "react-use";
 import {
   selectIsLargeRoom as selectIsLargeRoom4,
   selectLocalPeerID as selectLocalPeerID16,
@@ -31328,7 +31377,7 @@ function FlyingEmoji() {
   const vanillaStore = useHMSVanillaStore17();
   const hmsActions = useHMSActions54();
   const [emojis, setEmojis] = useState76([]);
-  const isMobile = useMedia41(config.media.md);
+  const isMobile = useMedia42(config.media.md);
   const isLargeRoom = useHMSStore96(selectIsLargeRoom4);
   const startingPoints = useMemo21(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback37(
@@ -31822,4 +31871,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-ESKXLCLX.js.map
+//# sourceMappingURL=chunk-DNADAU4F.js.map