@100mslive/roomkit-react 0.3.10-alpha.0 → 0.3.10-alpha.2

package/dist/{chunk-WSDBUVSZ.js → chunk-AFSI3LBT.js}

@@ -35,7 +35,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 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_532e6faf-c7c6-4545-9d9d-7122439f4ec4", 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.0-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.2 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.10-alpha.0", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_532e6faf-c7c6-4545-9d9d-7122439f4ec4", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.10-alpha.0", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", 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.7", 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: "586", 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.9/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240422.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.2/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:19037", 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.10-alpha.0", 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: "false", GITHUB_RUN_ID: "8894552093", 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: "c705b5b8ce729747f28c7aff242057ac8178d338", 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: "52a95eb8a3d2485a1f1ea5beaede6932bb344edf88c49cb9b85c4605f744fcc8", npm_package_exports___import: "./dist/index.js", STATS_BLT: "true", 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--1714479356446-0.5451084088639873:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1714479356248-0.16746250652187533:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1714479331056-0.9592746691932619:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1714479330871-0.95693666940456:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/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.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_d22e42ad-de0d-4a42-a18c-71e94525c82c", INVOCATION_ID: "b180c6b1294c4287b4db30af502a1753", 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: "525", 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 309", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "false", 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.10-alpha.0", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.10-alpha.0", 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: "c705b5b8ce729747f28c7aff242057ac8178d338", 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_532e6faf-c7c6-4545-9d9d-7122439f4ec4", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_532e6faf-c7c6-4545-9d9d-7122439f4ec4", 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.172+1/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_532e6faf-c7c6-4545-9d9d-7122439f4ec4" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_e8761535-38ff-4619-ac31-5ee2ea2c9ef1", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.2 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.10-alpha.2", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_e8761535-38ff-4619-ac31-5ee2ea2c9ef1", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.10-alpha.2", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", 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.7", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.3.11579264", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "595", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.9/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240422.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.2/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:19032", 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.10-alpha.2", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "false", GITHUB_RUN_ID: "8908732308", 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: "303a4fc9e47b81f2171e8dfb89ceaa98f52e2c25", 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: "1766be6806dc0195b56b87beabe4ee40997a3c642359a02b438f85c59b7947db", 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--1714562760502-0.8651484366034419:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1714562760304-0.49518625596741006:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1714562737369-0.31088281005506:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1714562737186-0.5150149945108389:/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.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/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.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_a7c5fadd-2394-4122-aa17-6f3173ce44b5", INVOCATION_ID: "b2bc5e324baf4f53afc7c9505bd4c01b", 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: "527", 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 151", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "false", 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.10-alpha.2", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.10-alpha.2", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", GITHUB_SHA: "303a4fc9e47b81f2171e8dfb89ceaa98f52e2c25", 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_e8761535-38ff-4619-ac31-5ee2ea2c9ef1", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_e8761535-38ff-4619-ac31-5ee2ea2c9ef1", 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.172+1/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_e8761535-38ff-4619-ac31-5ee2ea2c9ef1" };
   }
 });
 
@@ -10246,7 +10246,7 @@ var CustomDialogOverlay = styled(DialogPrimitive.Overlay, {
 var StyledDialogPortal = styled(DialogPrimitive.Portal, {});
 var CustomDialogContent = styled(DialogPrimitive.Content, {
   color: "$on_surface_medium",
-  backgroundColor: "$surface_default",
+  backgroundColor: "$surface_dim",
   borderRadius: "8px",
   position: "absolute",
   top: "50%",
@@ -11853,14 +11853,14 @@ var Collapsible = {
 
 // src/Prebuilt/App.tsx
 init_define_process_env();
-import React179, { useEffect as useEffect70, useRef as useRef29 } from "react";
+import React179, { useEffect as useEffect71, useRef as useRef29 } from "react";
 import { match as match15 } from "ts-pattern";
 import {
   HMSReactiveStore,
   HMSRoomProvider,
   selectIsConnectedToRoom as selectIsConnectedToRoom13,
   useHMSActions as useHMSActions56,
-  useHMSStore as useHMSStore98
+  useHMSStore as useHMSStore99
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/AppData/AppData.tsx
@@ -12830,21 +12830,21 @@ var AuthToken_default = AuthToken;
 
 // src/Prebuilt/components/ConferenceScreen.tsx
 init_define_process_env();
-import React157, { useEffect as useEffect51, useRef as useRef27, useState as useState66 } from "react";
+import React157, { useEffect as useEffect52, useRef as useRef27, useState as useState66 } from "react";
 import { v4 as uuid3 } from "uuid";
 import {
   HMSRoomState as HMSRoomState7,
-  selectAppData as selectAppData11,
+  selectAppData as selectAppData12,
   selectIsConnectedToRoom as selectIsConnectedToRoom10,
   selectRoomState as selectRoomState7,
   useHMSActions as useHMSActions48,
-  useHMSStore as useHMSStore87
+  useHMSStore as useHMSStore88
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Footer/Footer.tsx
 init_define_process_env();
-import React78, { useEffect as useEffect20 } from "react";
-import { useMedia as useMedia10 } from "react-use";
+import React78, { useEffect as useEffect21 } from "react";
+import { useMedia as useMedia11 } from "react-use";
 import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
 
 // src/Prebuilt/components/AudioVideoToggle.tsx
@@ -13781,7 +13781,7 @@ var NoiseCancellation = () => {
   if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }), /* @__PURE__ */ React32.createElement(
     Dropdown.Item,
     {
       css: {
@@ -13901,7 +13901,6 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         onClick: (deviceId) => updateDevice({ deviceId, deviceType: DeviceType2.audioOutput })
       }
     ))),
-    /* @__PURE__ */ React32.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
     /* @__PURE__ */ React32.createElement(NoiseCancellation, null),
     /* @__PURE__ */ React32.createElement(AudioSettings, { onClick: () => setShowSettings(true) })
   ) : null, toggleVideo ? /* @__PURE__ */ React32.createElement(
@@ -14619,7 +14618,7 @@ var LeaveRoom = ({
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
 init_define_process_env();
 import React60 from "react";
-import { useMedia as useMedia8 } from "react-use";
+import { useMedia as useMedia9 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
 init_define_process_env();
@@ -14627,7 +14626,7 @@ import React53, { Fragment as Fragment6, useState as useState23 } from "react";
 import { HMSHLSPlayer } from "@100mslive/hls-player";
 import { match as match4 } from "ts-pattern";
 import { selectAppData as selectAppData3, selectLocalPeerID as selectLocalPeerID4, useHMSActions as useHMSActions16, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
-import { BrbIcon, CheckIcon as CheckIcon5, HamburgerMenuIcon, InfoIcon as InfoIcon2, PipIcon as PipIcon2, SettingsIcon as SettingsIcon3 } from "@100mslive/react-icons";
+import { BrbIcon, CheckIcon as CheckIcon4, HamburgerMenuIcon, InfoIcon as InfoIcon2, PipIcon as PipIcon2, SettingsIcon as SettingsIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/PIP/index.jsx
 init_define_process_env();
@@ -15142,42 +15141,39 @@ var PIP = ({ content = null }) => {
   return /* @__PURE__ */ React43.createElement(PIPComponent_default, { content });
 };
 
-// src/Prebuilt/components/RoleChangeModal.jsx
+// src/Prebuilt/components/RoleChangeModal.tsx
 init_define_process_env();
-import React44, { forwardRef, useRef as useRef11, useState as useState16 } from "react";
-import { selectPeerByID, useHMSActions as useHMSActions11, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
-import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
-var PeerName = forwardRef(({ children, maxWidth, ...rest }, ref) => /* @__PURE__ */ React44.createElement(
-  Text,
-  {
-    ...rest,
-    ref,
-    as: "strong",
-    variant: "body2",
-    css: {
-      ...textEllipsis(maxWidth),
-      display: "inline-block",
-      fontWeight: "$semiBold",
-      c: "inherit"
-    }
-  },
-  children
-));
-var RoleChangeModal = ({ peerId, onOpenChange }) => {
-  const peer = useHMSStore15(selectPeerByID(peerId));
-  const roles = useFilteredRoles();
-  const [selectedRole, setRole] = useState16(peer?.roleName);
-  const [requestPermission, setRequestPermission] = useState16(true);
+import React44, { 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(
+    Text,
+    {
+      variant: "body2",
+      css: {
+        color: "$on_surface_medium",
+        fontWeight: "$semiBold"
+      }
+    },
+    "'",
+    value.slice(0, 100),
+    value.length > 100 ? "..." : "",
+    "'"
+  )) : /* @__PURE__ */ React44.createElement(React44.Fragment, null);
+};
+var RoleChangeContent = ({
+  peer,
+  onOpenChange,
+  isMobile = false
+}) => {
+  const roles = useHMSStore15(selectAvailableRoleNames3).filter((role) => role !== peer?.roleName);
+  const [selectedRole, setRole] = useState16(roles.filter((role) => role !== peer?.roleName)?.[0] || peer?.roleName);
   const hmsActions = useHMSActions11();
   const [open, setOpen] = useState16(false);
-  const selectionBg = useDropdownSelection();
-  const [peerNameRef, setPeerNameRef] = useState16();
-  const ref = useRef11();
-  if (!peer) {
-    return null;
-  }
-  const peerNameMaxWidth = 200;
-  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" } }, /* @__PURE__ */ React44.createElement(Dialog.Title, { css: { p: 0 }, asChild: true }, /* @__PURE__ */ React44.createElement(Text, { as: "h6", variant: "h6" }, "Change Role")), /* @__PURE__ */ React44.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React44.createElement(
+  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(
     Text,
     {
       variant: "body2",
@@ -15190,9 +15186,10 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
         columnGap: "4px"
       }
     },
-    "Change the role of",
-    peerNameRef && peerNameRef.clientWidth === peerNameMaxWidth ? /* @__PURE__ */ React44.createElement(Tooltip, { title: peer.name, side: "top" }, /* @__PURE__ */ React44.createElement(PeerName, { ref: setPeerNameRef, maxWidth: peerNameMaxWidth }, peer.name)) : /* @__PURE__ */ React44.createElement(PeerName, { ref: setPeerNameRef, maxWidth: peerNameMaxWidth }, peer.name),
-    "to"
+    "Switch the role of",
+    /* @__PURE__ */ React44.createElement(HighlightTerm, { value: peer.name }),
+    "from ",
+    /* @__PURE__ */ React44.createElement(HighlightTerm, { value: peer.roleName })
   )), /* @__PURE__ */ React44.createElement(
     Flex,
     {
@@ -15214,63 +15211,67 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
       /* @__PURE__ */ React44.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { width: "100%" } }, /* @__PURE__ */ React44.createElement(
         Dropdown.Trigger,
         {
+          ref: triggerRef,
           "data-testid": "open_role_selection_dropdown",
           asChild: true,
           css: {
             border: "1px solid $border_bright",
-            bg: "$surface_bright",
+            bg: "$surface_default",
             r: "$1",
             p: "$6 $9"
-          },
-          ref
+          }
         },
         /* @__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.Portal, null, /* @__PURE__ */ React44.createElement(
-        Dropdown.Content,
+      ), /* @__PURE__ */ React44.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { zIndex: 1e3, w: "100%" } }, roles.map((role) => /* @__PURE__ */ React44.createElement(
+        Dropdown.Item,
         {
-          align: "start",
-          sideOffset: 8,
-          css: { zIndex: 1e3, width: ref.current?.clientWidth }
+          "data-testid": role,
+          key: role,
+          onSelect: () => setRole(role),
+          css: { w: `${triggerRef.current?.clientWidth}px` }
         },
-        roles.map((role) => {
-          return /* @__PURE__ */ React44.createElement(
-            Dropdown.Item,
-            {
-              "data-testid": role,
-              key: role,
-              onSelect: () => setRole(role),
-              css: {
-                px: "$9",
-                bg: role === selectedRole ? selectionBg : void 0
-              }
-            },
-            role
-          );
-        })
-      )))
+        role
+      ))))
     )
-  ), !peer.isLocal && /* @__PURE__ */ React44.createElement(Flex, { justify: "between", css: { w: "100%", mb: "$10" } }, /* @__PURE__ */ React44.createElement(Label3, { htmlFor: "requestRoleChangePermission", css: { cursor: "pointer" } }, "Request Permission"), /* @__PURE__ */ React44.createElement(
-    Checkbox.Root,
+  ), /* @__PURE__ */ React44.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, !isMobile && /* @__PURE__ */ React44.createElement(
+    Button,
     {
-      checked: requestPermission,
-      onCheckedChange: (value) => setRequestPermission(value),
-      id: "requestRoleChangePermission",
-      "data-testid": "force_role_change_checkbox"
+      variant: "standard",
+      outlined: true,
+      css: { width: "100%" },
+      onClick: () => onOpenChange(false),
+      "data-testid": "cancel_button"
     },
-    /* @__PURE__ */ React44.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React44.createElement(CheckIcon2, { width: 16, height: 16 }))
-  )), /* @__PURE__ */ React44.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md" } }, /* @__PURE__ */ React44.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React44.createElement(Dialog.Close, { css: { width: "100%", p: "$4 $8" }, asChild: true }, /* @__PURE__ */ React44.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%" }, "data-testid": "cancel_button" }, "Cancel"))), /* @__PURE__ */ React44.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React44.createElement(
+    "Cancel"
+  ), /* @__PURE__ */ React44.createElement(
     Button,
     {
       "data-testid": "change_button",
       variant: "primary",
       css: { width: "100%" },
       onClick: async () => {
-        await hmsActions.changeRoleOfPeer(peerId, selectedRole, peer.isLocal ? true : !requestPermission);
-        onOpenChange(false);
+        if (selectedRole) {
+          await hmsActions.changeRoleOfPeer(peer.id, selectedRole, true);
+          onOpenChange(false);
+        }
       }
     },
-    "Change"
-  ))))));
+    "Switch Role"
+  )));
+};
+var RoleChangeModal = ({
+  peerId,
+  onOpenChange
+}) => {
+  const peer = useHMSStore15(selectPeerByID(peerId));
+  const isMobile = useMedia6(config.media.md);
+  if (!peer) {
+    return null;
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ React44.createElement(Sheet.Root, { open: true, onOpenChange }, /* @__PURE__ */ React44.createElement(Sheet.Content, { css: { p: "$12 $8", background: "$surface_dim" } }, /* @__PURE__ */ React44.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" } }, /* @__PURE__ */ React44.createElement(RoleChangeContent, { peer, onOpenChange }))));
 };
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
@@ -15287,7 +15288,7 @@ import { InfoIcon } from "@100mslive/react-icons";
 // src/Prebuilt/primitives/DialogContent.jsx
 init_define_process_env();
 import React45, { useRef as useRef12 } from "react";
-import { CheckIcon as CheckIcon3, CloudUploadIcon, CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
+import { CheckIcon as CheckIcon2, CloudUploadIcon, CrossIcon as CrossIcon8 } from "@100mslive/react-icons";
 var DialogContent = ({ Icon: Icon4, title, closeable = true, children, css: css2, iconCSS = {}, ...props }) => {
   return /* @__PURE__ */ React45.createElement(Dialog.Portal, null, /* @__PURE__ */ React45.createElement(Dialog.Overlay, null), /* @__PURE__ */ React45.createElement(Dialog.Content, { css: { 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: { 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)));
 };
@@ -15295,7 +15296,7 @@ var ErrorDialog = ({ open = true, onOpenChange, title, children, ...props }) =>
   return /* @__PURE__ */ React45.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React45.createElement(
     DialogContent,
     {
-      Icon: CrossIcon7,
+      Icon: CrossIcon8,
       title,
       onInteractOutside: (e) => e.preventDefault(),
       onEscapeKeyDown: (e) => e.preventDefault(),
@@ -15753,7 +15754,7 @@ var formatBytes2 = (bytes, unit = "B", decimals = 2) => {
 init_define_process_env();
 import React49, { 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 CheckIcon4 } from "@100mslive/react-icons";
+import { AlertTriangleIcon as AlertTriangleIcon4, ChangeRoleIcon, CheckIcon as CheckIcon3 } from "@100mslive/react-icons";
 var BulkRoleChangeModal = ({ onOpenChange }) => {
   const roles = useFilteredRoles();
   const hmsActions = useHMSActions13();
@@ -15825,7 +15826,7 @@ 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(CheckIcon4, { width: 16, height: 16 }))),
+          /* @__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 }))),
           role
         );
       })
@@ -15926,7 +15927,7 @@ var FullScreenItem = () => {
 init_define_process_env();
 import React52, { useCallback as useCallback13, useState as useState22 } from "react";
 import {
-  selectAvailableRoleNames as selectAvailableRoleNames3,
+  selectAvailableRoleNames as selectAvailableRoleNames4,
   useHMSActions as useHMSActions14,
   useHMSStore as useHMSStore19
 } from "@100mslive/react-sdk";
@@ -15994,7 +15995,7 @@ var MuteAllModal = ({
   onOpenChange,
   isMobile = false
 }) => {
-  const roles = useHMSStore19(selectAvailableRoleNames3);
+  const roles = useHMSStore19(selectAvailableRoleNames4);
   const hmsActions = useHMSActions14();
   const [enabled, setEnabled] = useState22(false);
   const [trackType, setTrackType] = useState22();
@@ -16138,7 +16139,7 @@ var DesktopOptions = ({
           }
         }
       },
-      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React53.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React53.createElement(BrbIcon, null), /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React53.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React53.createElement(CheckIcon5, null) : null)) : null,
+      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React53.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React53.createElement(BrbIcon, null), /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React53.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React53.createElement(CheckIcon4, null) : null)) : null,
       screenType !== "hls_live_streaming" ? /* @__PURE__ */ React53.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ React53.createElement(
         PIP,
         {
@@ -16162,7 +16163,7 @@ var DesktopOptions = ({
               checked: enablHlsStats,
               onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
             },
-            /* @__PURE__ */ React53.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React53.createElement(CheckIcon5, { width: 16, height: 16 }))
+            /* @__PURE__ */ React53.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React53.createElement(CheckIcon4, { width: 16, height: 16 }))
           ),
           /* @__PURE__ */ React53.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ React53.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
         );
@@ -16210,7 +16211,7 @@ import {
 import {
   BrbIcon as BrbIcon2,
   ClosedCaptionIcon as ClosedCaptionIcon2,
-  CrossIcon as CrossIcon10,
+  CrossIcon as CrossIcon11,
   EmojiIcon as EmojiIcon2,
   HamburgerMenuIcon as HamburgerMenuIcon2,
   HandIcon as HandIcon2,
@@ -16228,7 +16229,7 @@ import {
 // src/Prebuilt/components/Header/StreamActions.tsx
 init_define_process_env();
 import React55, { useCallback as useCallback17, useEffect as useEffect16, useRef as useRef15, useState as useState25 } from "react";
-import { useMedia as useMedia6 } from "react-use";
+import { useMedia as useMedia7 } from "react-use";
 
 // ../hms-video-store/dist/index.js
 init_define_process_env();
@@ -18449,7 +18450,7 @@ var Zi = (a2, e) => {
 };
 var _a = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
 var nr = _a((yc, Wa) => {
-  Wa.exports = { version: "0.12.10-alpha.0", 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"] };
+  Wa.exports = { version: "0.12.10-alpha.2", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
 });
 var er = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(er || {});
 var Na = ((e) => (e.CHAT = "chat", e))(Na || {});
@@ -19534,7 +19535,7 @@ import {
   useHMSStore as useHMSStore25,
   useRecordingStreaming as useRecordingStreaming6
 } from "@100mslive/react-sdk";
-import { AlertTriangleIcon as AlertTriangleIcon5, CrossIcon as CrossIcon8, PauseCircleIcon, RecordIcon } from "@100mslive/react-icons";
+import { AlertTriangleIcon as AlertTriangleIcon5, CrossIcon as CrossIcon9, PauseCircleIcon, RecordIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
 init_define_process_env();
@@ -19708,7 +19709,7 @@ var AdditionalRoomState = () => {
 var LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming6();
   const hlsState = useHMSStore25(selectHLSState4);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   const intervalRef = useRef15(null);
   const { screenType } = useRoomLayoutConferencingScreen();
   const [liveTime, setLiveTime] = useState25(0);
@@ -19754,7 +19755,7 @@ var LiveStatus = () => {
 var RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming6();
   const permissions = useHMSStore25(selectPermissions7);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   if (!isRecordingOn || // if only browser recording is enabled, stop recording is shown
   // so no need to show this as it duplicates
   [permissions?.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
@@ -19862,7 +19863,7 @@ var StartRecording2 = () => {
 };
 var StreamActions = () => {
   const isConnected = useHMSStore25(selectIsConnectedToRoom6);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   const roomState = useHMSStore25(selectRoomState3);
   return /* @__PURE__ */ React55.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React55.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React55.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React55.createElement(RecordingPauseStatus, null), /* @__PURE__ */ React55.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React55.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React55.createElement(StartRecording2, null) : null);
 };
@@ -19870,7 +19871,7 @@ var StopRecordingInSheet = ({
   onStopRecording,
   onClose
 }) => {
-  return /* @__PURE__ */ React55.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React55.createElement(Sheet.Content, null, /* @__PURE__ */ React55.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React55.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React55.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React55.createElement(AlertTriangleIcon5, null), /* @__PURE__ */ React55.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React55.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React55.createElement(CrossIcon8, null)))), /* @__PURE__ */ React55.createElement(HorizontalDivider, null), /* @__PURE__ */ React55.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React55.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__ */ React55.createElement(
+  return /* @__PURE__ */ React55.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React55.createElement(Sheet.Content, null, /* @__PURE__ */ React55.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React55.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React55.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React55.createElement(AlertTriangleIcon5, null), /* @__PURE__ */ React55.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React55.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React55.createElement(CrossIcon9, null)))), /* @__PURE__ */ React55.createElement(HorizontalDivider, null), /* @__PURE__ */ React55.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React55.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__ */ React55.createElement(
     Button,
     {
       variant: "danger",
@@ -19942,13 +19943,13 @@ var ActionTile = {
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx
 init_define_process_env();
 import React58, { useState as useState26 } from "react";
-import { useMedia as useMedia7 } from "react-use";
+import { useMedia as useMedia8 } from "react-use";
 import { selectLocalPeerName, useHMSActions as useHMSActions20, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.tsx
 init_define_process_env();
 import React57 from "react";
-import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon10 } from "@100mslive/react-icons";
 var ChangeNameContent = ({
   changeName,
   setCurrentName,
@@ -19986,7 +19987,7 @@ var ChangeNameContent = ({
           css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
           onClick: onExit
         },
-        /* @__PURE__ */ React57.createElement(CrossIcon9, null)
+        /* @__PURE__ */ React57.createElement(CrossIcon10, null)
       )
     ),
     /* @__PURE__ */ React57.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$6", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "Your name will be visible to other participants in the session."),
@@ -20061,7 +20062,7 @@ var ChangeNameModal = ({
   const hmsActions = useHMSActions20();
   const localPeerName = useHMSStore26(selectLocalPeerName);
   const [currentName, setCurrentName] = useState26(localPeerName);
-  const isMobile = useMedia7(config.media.md);
+  const isMobile = useMedia8(config.media.md);
   const changeName = async () => {
     const name = currentName?.trim() || "";
     if (!name || name === localPeerName) {
@@ -20207,7 +20208,7 @@ var MwebOptions = ({
       }
     },
     "Options",
-    /* @__PURE__ */ React59.createElement(Sheet.Close, null, /* @__PURE__ */ React59.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React59.createElement(CrossIcon10, null)))
+    /* @__PURE__ */ React59.createElement(Sheet.Close, null, /* @__PURE__ */ React59.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React59.createElement(CrossIcon11, null)))
   ), /* @__PURE__ */ React59.createElement(
     Box,
     {
@@ -20396,7 +20397,7 @@ var MoreSettings = ({
   elements,
   screenType
 }) => {
-  const isMobile = useMedia8(config.media.md);
+  const isMobile = useMedia9(config.media.md);
   const isLandscapeHLSStream = useLandscapeHLSStream();
   return isMobile || isLandscapeHLSStream ? /* @__PURE__ */ React60.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React60.createElement(DesktopOptions, { elements, screenType });
 };
@@ -20968,7 +20969,7 @@ var ChatToggle = ({ onClick }) => {
 // src/Prebuilt/components/Footer/ParticipantList.tsx
 init_define_process_env();
 import React75, { Fragment as Fragment9, useCallback as useCallback19, useState as useState33 } from "react";
-import { useDebounce, useMedia as useMedia9 } from "react-use";
+import { useDebounce, useMedia as useMedia10 } from "react-use";
 import {
   HMSPeerType as HMSPeerType2,
   selectHandRaisedPeers,
@@ -20978,16 +20979,17 @@ import {
   selectLocalPeerID as selectLocalPeerID7,
   selectPeerCount as selectPeerCount4,
   selectPermissions as selectPermissions13,
-  useHMSStore as useHMSStore39
+  useHMSStore as useHMSStore40
 } from "@100mslive/react-sdk";
 import {
   AddIcon as AddIcon2,
   CallIcon,
   ChangeRoleIcon as ChangeRoleIcon2,
-  CrossIcon as CrossIcon12,
+  CrossIcon as CrossIcon13,
   HandIcon as HandIcon4,
   MicOffIcon as MicOffIcon4,
   PeopleIcon as PeopleIcon2,
+  PersonSettingsIcon,
   SearchIcon,
   VerticalMenuIcon as VerticalMenuIcon5
 } from "@100mslive/react-icons";
@@ -21142,7 +21144,7 @@ import React74, { useEffect as useEffect18 } from "react";
 import { useMeasure } from "react-use";
 import { FixedSizeList } from "react-window";
 import { selectIsLargeRoom, useHMSStore as useHMSStore37, usePaginatedParticipants } from "@100mslive/react-sdk";
-import { AddIcon, ChevronRightIcon, CrossIcon as CrossIcon11 } from "@100mslive/react-icons";
+import { AddIcon, ChevronRightIcon, CrossIcon as CrossIcon12 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
 init_define_process_env();
@@ -21450,13 +21452,28 @@ var RoleAccordion = ({
     },
     /* @__PURE__ */ React74.createElement(Text, { variant: "sm", css: { color: "inherit" } }, "View All"),
     /* @__PURE__ */ React74.createElement(ChevronRightIcon, null)
-  ) : null, isHandRaisedAccordion && canBringToStage && /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(HorizontalDivider, null), /* @__PURE__ */ React74.createElement(Flex, { css: { w: "100%", p: "$6", gap: "$4" }, justify: "center" }, /* @__PURE__ */ React74.createElement(Button, { variant: "standard", onClick: lowerAllHands, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ React74.createElement(CrossIcon11, null), " Lower all hands"), /* @__PURE__ */ React74.createElement(Button, { onClick: bringAllToStage, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ React74.createElement(AddIcon, null), " ", bring_to_stage_label)))));
+  ) : null, isHandRaisedAccordion && canBringToStage && /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(HorizontalDivider, null), /* @__PURE__ */ React74.createElement(Flex, { css: { w: "100%", p: "$6", gap: "$4" }, justify: "center" }, /* @__PURE__ */ React74.createElement(Button, { variant: "standard", onClick: lowerAllHands, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ React74.createElement(CrossIcon12, null), " Lower all hands"), /* @__PURE__ */ React74.createElement(Button, { onClick: bringAllToStage, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ React74.createElement(AddIcon, null), " ", bring_to_stage_label)))));
+};
+
+// src/Prebuilt/components/AppData/useSidepaneResetOnLayoutUpdate.tsx
+init_define_process_env();
+import { useEffect as useEffect19 } from "react";
+import { selectAppData as selectAppData6, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
+var useSidepaneResetOnLayoutUpdate = (layoutKey, sidepaneOption) => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const sidepane = useHMSStore38(selectAppData6(APP_DATA.sidePane));
+  const resetSidePane = useSidepaneReset();
+  useEffect19(() => {
+    if (sidepane === sidepaneOption && !elements?.[layoutKey]) {
+      resetSidePane();
+    }
+  }, [elements, elements?.[layoutKey], resetSidePane, sidepane, layoutKey, sidepaneOption]);
 };
 
 // src/Prebuilt/components/hooks/usePeerOnStageActions.tsx
 init_define_process_env();
 import { useState as useState32 } from "react";
-import { selectPeerMetadata as selectPeerMetadata3, selectPermissions as selectPermissions12, useHMSActions as useHMSActions26, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
+import { selectPeerMetadata as selectPeerMetadata3, selectPermissions as selectPermissions12, useHMSActions as useHMSActions26, useHMSStore as useHMSStore39 } from "@100mslive/react-sdk";
 var usePeerOnStageActions = ({ peerId, role }) => {
   const hmsActions = useHMSActions26();
   const { elements } = useRoomLayoutConferencingScreen();
@@ -21468,9 +21485,9 @@ var usePeerOnStageActions = ({ peerId, role }) => {
     skip_preview_for_role_change = false
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
-  const canChangeRole = useHMSStore38(selectPermissions12)?.changeRole;
+  const canChangeRole = useHMSStore39(selectPermissions12)?.changeRole;
   const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || off_stage_roles?.includes(role) && bring_to_stage_label);
-  const prevRole = useHMSStore38(selectPeerMetadata3(peerId))?.prevRole;
+  const prevRole = useHMSStore39(selectPeerMetadata3(peerId))?.prevRole;
   const [open, setOpen] = useState32(false);
   const lowerPeerHand = async () => {
     await hmsActions.lowerRemotePeerHand(peerId);
@@ -21505,9 +21522,9 @@ var ParticipantList = ({
 }) => {
   const [filter, setFilter] = useState33();
   const { participants, isConnected, peerCount } = useParticipants(filter);
-  const isLargeRoom = useHMSStore39(selectIsLargeRoom2);
+  const isLargeRoom = useHMSStore40(selectIsLargeRoom2);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore39(selectHandRaisedPeers);
+  const handRaisedPeers = useHMSStore40(selectHandRaisedPeers);
   participants.forEach((participant) => {
     if (participant.roleName) {
       if (peersOrderedByRoles[participant.roleName] === void 0) {
@@ -21523,6 +21540,7 @@ var ParticipantList = ({
       }
     });
   }
+  useSidepaneResetOnLayoutUpdate("participant_list", SIDE_PANE_OPTIONS.PARTICIPANTS);
   const onSearch = useCallback19((value) => {
     setFilter((filterValue) => {
       if (!filterValue) {
@@ -21570,7 +21588,7 @@ var ParticipantList = ({
   ));
 };
 var ParticipantCount = () => {
-  const peerCount = useHMSStore39(selectPeerCount4);
+  const peerCount = useHMSStore40(selectPeerCount4);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   if (peerCount === 0) {
@@ -21602,7 +21620,7 @@ var Participant = ({
   isHandRaisedAccordion,
   style
 }) => {
-  const localPeerId = useHMSStore39(selectLocalPeerID7);
+  const localPeerId = useHMSStore40(selectLocalPeerID7);
   return /* @__PURE__ */ React75.createElement(
     Flex,
     {
@@ -21700,13 +21718,13 @@ var ParticipantActions = React75.memo(
     isLocal,
     isHandRaisedAccordion
   }) => {
-    const isHandRaised = useHMSStore39(selectHasPeerHandRaised2(peerId));
-    const canChangeRole = useHMSStore39(selectPermissions13)?.changeRole;
-    const canRemoveOthers = useHMSStore39(selectPermissions13)?.removeOthers;
+    const isHandRaised = useHMSStore40(selectHasPeerHandRaised2(peerId));
+    const canChangeRole = useHMSStore40(selectPermissions13)?.changeRole;
+    const canRemoveOthers = useHMSStore40(selectPermissions13)?.removeOthers;
     const { elements } = useRoomLayoutConferencingScreen();
     const { on_stage_exp } = elements || {};
     const shouldShowMoreActions = on_stage_exp && canChangeRole || canRemoveOthers;
-    const isAudioMuted = !useHMSStore39(selectIsPeerAudioEnabled(peerId));
+    const isAudioMuted = !useHMSStore40(selectIsPeerAudioEnabled(peerId));
     return /* @__PURE__ */ React75.createElement(
       Flex,
       {
@@ -21753,7 +21771,7 @@ var HandRaisedAccordionParticipantActions = ({ peerId, role }) => {
   if (!shouldShowStageRoleChange) {
     return null;
   }
-  return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(Button, { variant: "standard", css: quickActionStyle, onClick: lowerPeerHand }, /* @__PURE__ */ React75.createElement(CrossIcon12, { height: 18, width: 18 })), !isInStage && /* @__PURE__ */ React75.createElement(Button, { variant: "primary", onClick: handleStageAction, css: quickActionStyle }, /* @__PURE__ */ React75.createElement(AddIcon2, { height: 18, width: 18 })));
+  return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(Button, { variant: "standard", css: quickActionStyle, onClick: lowerPeerHand }, /* @__PURE__ */ React75.createElement(CrossIcon13, { height: 18, width: 18 })), !isInStage && /* @__PURE__ */ React75.createElement(Button, { variant: "primary", onClick: handleStageAction, css: quickActionStyle }, /* @__PURE__ */ React75.createElement(AddIcon2, { height: 18, width: 18 })));
 };
 var ParticipantMoreActions = ({ peerId, role }) => {
   const {
@@ -21765,7 +21783,9 @@ var ParticipantMoreActions = ({ peerId, role }) => {
     isInStage,
     shouldShowStageRoleChange
   } = usePeerOnStageActions({ peerId, role });
-  return /* @__PURE__ */ React75.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React75.createElement(
+  const canChangeRole = !!useHMSStore40(selectPermissions13)?.changeRole;
+  const [openRoleChangeModal, setOpenRoleChangeModal] = useState33(false);
+  return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React75.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -21786,7 +21806,7 @@ var ParticipantMoreActions = ({ peerId, role }) => {
       tabIndex: 0
     },
     /* @__PURE__ */ React75.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React75.createElement(VerticalMenuIcon5, null))
-  ), /* @__PURE__ */ React75.createElement(Dropdown.Portal, null, /* @__PURE__ */ React75.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React75.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React75.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React75.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, isInStage ? remove_from_stage_label : bring_to_stage_label)) : null, /* @__PURE__ */ React75.createElement(RemoveParticipant, { peerId }))));
+  ), /* @__PURE__ */ React75.createElement(Dropdown.Portal, null, /* @__PURE__ */ React75.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React75.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React75.createElement(ChangeRoleIcon2, null), /* @__PURE__ */ React75.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, isInStage ? remove_from_stage_label : bring_to_stage_label)) : null, canChangeRole ? /* @__PURE__ */ React75.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => setOpenRoleChangeModal(true) }, /* @__PURE__ */ React75.createElement(PersonSettingsIcon, null), /* @__PURE__ */ React75.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, "Switch Role")) : null, /* @__PURE__ */ React75.createElement(RemoveParticipant, { peerId })))), openRoleChangeModal && /* @__PURE__ */ React75.createElement(RoleChangeModal, { peerId, onOpenChange: setOpenRoleChangeModal }));
 };
 var ParticipantSearch = ({
   onSearch,
@@ -21794,7 +21814,7 @@ var ParticipantSearch = ({
   inSidePane = false
 }) => {
   const [value, setValue] = React75.useState("");
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia10(config.media.md);
   useDebounce(
     () => {
       onSearch(value);
@@ -21838,13 +21858,13 @@ var ParticipantSearch = ({
 
 // src/Prebuilt/components/Footer/PollsToggle.tsx
 init_define_process_env();
-import React76, { useEffect as useEffect19 } from "react";
+import React76, { useEffect as useEffect20 } from "react";
 import { QuizActiveIcon as QuizActiveIcon2, QuizIcon as QuizIcon2 } from "@100mslive/react-icons";
 var PollsToggle = () => {
   const isPollsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.POLLS);
   const togglePollView = usePollViewToggle();
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  useEffect19(() => {
+  useEffect20(() => {
     if (unreadPollQuiz && isPollsOpen) {
       setUnreadPollQuiz(false);
     }
@@ -21866,11 +21886,11 @@ var PollsToggle = () => {
 // src/Prebuilt/components/Footer/WhiteboardToggle.tsx
 init_define_process_env();
 import React77 from "react";
-import { selectPeerScreenSharing, useHMSStore as useHMSStore40, useWhiteboard } from "@100mslive/react-sdk";
+import { selectPeerScreenSharing, useHMSStore as useHMSStore41, useWhiteboard } from "@100mslive/react-sdk";
 import { PencilDrawIcon } from "@100mslive/react-icons";
 var WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
-  const peerSharing = useHMSStore40(selectPeerScreenSharing);
+  const peerSharing = useHMSStore41(selectPeerScreenSharing);
   const disabled = !!peerSharing || open && !isOwner;
   if (!toggle) {
     return null;
@@ -21908,13 +21928,13 @@ var Footer2 = ({
   screenType,
   elements
 }) => {
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia11(config.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const { showPolls } = useShowPolls();
-  useEffect20(() => {
+  useEffect21(() => {
     if (!isChatOpen && openByDefault) {
       toggleChat();
     }
@@ -21967,9 +21987,9 @@ var Footer2 = ({
 // src/Prebuilt/components/Notifications/HLSFailureModal.tsx
 init_define_process_env();
 import React79, { useCallback as useCallback20, useState as useState34 } from "react";
-import { selectHLSState as selectHLSState5, useHMSActions as useHMSActions27, useHMSStore as useHMSStore41, useRecordingStreaming as useRecordingStreaming8 } from "@100mslive/react-sdk";
+import { selectHLSState as selectHLSState5, useHMSActions as useHMSActions27, useHMSStore as useHMSStore42, useRecordingStreaming as useRecordingStreaming8 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
-  const hlsError = useHMSStore41(selectHLSState5).error || false;
+  const hlsError = useHMSStore42(selectHLSState5).error || false;
   const [openModal, setOpenModal] = useState34(!!hlsError);
   const hmsActions = useHMSActions27();
   const { isRTMPRunning } = useRecordingStreaming8();
@@ -22014,7 +22034,7 @@ function HLSFailureModal() {
 
 // src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
 init_define_process_env();
-import React134, { useEffect as useEffect35 } from "react";
+import React134, { useEffect as useEffect36 } from "react";
 import {
   selectIsInPreview,
   selectLocalPeerName as selectLocalPeerName4,
@@ -22022,22 +22042,22 @@ import {
   selectRoleChangeRequest,
   useCustomEvent as useCustomEvent3,
   useHMSActions as useHMSActions44,
-  useHMSStore as useHMSStore72
+  useHMSStore as useHMSStore73
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
 init_define_process_env();
-import React132, { Fragment as Fragment12, useCallback as useCallback32, useEffect as useEffect34, useMemo as useMemo13, useState as useState56 } from "react";
-import { useMeasure as useMeasure4, useMedia as useMedia24 } from "react-use";
+import React132, { Fragment as Fragment12, useCallback as useCallback32, useEffect as useEffect35, useMemo as useMemo13, useState as useState56 } from "react";
+import { useMeasure as useMeasure4, useMedia as useMedia25 } from "react-use";
 import {
   HMSRoomState as HMSRoomState5,
-  selectAppData as selectAppData8,
+  selectAppData as selectAppData9,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled7,
   selectLocalPeer as selectLocalPeer7,
   selectRoomState as selectRoomState5,
   selectVideoTrackByID as selectVideoTrackByID5,
   useAVToggle as useAVToggle3,
-  useHMSStore as useHMSStore71,
+  useHMSStore as useHMSStore72,
   useParticipants as useParticipants2,
   usePreviewJoin,
   useRecordingStreaming as useRecordingStreaming11
@@ -22046,10 +22066,10 @@ import { MicOffIcon as MicOffIcon7, SettingsIcon as SettingsIcon6 } from "@100ms
 
 // src/Prebuilt/layouts/SidePane.tsx
 init_define_process_env();
-import React128, { useEffect as useEffect33 } from "react";
-import { useMedia as useMedia22 } from "react-use";
+import React128, { useEffect as useEffect34 } from "react";
+import { useMedia as useMedia23 } from "react-use";
 import { match as match11 } from "ts-pattern";
-import { selectAppData as selectAppData7, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore70 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData8, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore71 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Polls/Polls.tsx
 init_define_process_env();
@@ -22057,21 +22077,21 @@ import React101 from "react";
 
 // src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx
 init_define_process_env();
-import React82, { useEffect as useEffect21, useMemo as useMemo6, useRef as useRef17, useState as useState35 } from "react";
+import React82, { useEffect as useEffect22, useMemo as useMemo6, useRef as useRef17, useState as useState35 } from "react";
 import {
   selectLocalPeerRoleName,
   selectPermissions as selectPermissions15,
   selectPolls as selectPolls2,
   useHMSActions as useHMSActions28,
-  useHMSStore as useHMSStore43
+  useHMSStore as useHMSStore44
 } from "@100mslive/react-sdk";
 import { QuestionIcon, StatsIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Streaming/Common.jsx
 init_define_process_env();
 import React80 from "react";
-import { selectPermissions as selectPermissions14, useHMSStore as useHMSStore42 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon2, CrossIcon as CrossIcon13, RecordIcon as RecordIcon3 } from "@100mslive/react-icons";
+import { selectPermissions as selectPermissions14, useHMSStore as useHMSStore43 } from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon2, CrossIcon as CrossIcon14, RecordIcon as RecordIcon3 } from "@100mslive/react-icons";
 var ContentHeader = ({ onBack, onClose, title = "", content }) => {
   return /* @__PURE__ */ React80.createElement(
     Flex,
@@ -22102,7 +22122,7 @@ var ContentHeader = ({ onBack, onClose, title = "", content }) => {
       },
       title
     ) : null, /* @__PURE__ */ React80.createElement(Text, { variant: "h6" }, content)),
-    onClose ? /* @__PURE__ */ React80.createElement(IconButton, { onClick: onClose, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React80.createElement(CrossIcon13, null)) : null
+    onClose ? /* @__PURE__ */ React80.createElement(IconButton, { onClick: onClose, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React80.createElement(CrossIcon14, null)) : null
   );
 };
 var Container3 = ({ children, rounded = false }) => {
@@ -22170,7 +22190,7 @@ var StatusIndicator = ({ status }) => {
 // src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx
 var PollsQuizMenu = () => {
   const togglePollView = usePollViewToggle();
-  const permissions = useHMSStore43(selectPermissions15);
+  const permissions = useHMSStore44(selectPermissions15);
   return /* @__PURE__ */ React82.createElement(Container3, { rounded: true }, /* @__PURE__ */ React82.createElement(ContentHeader, { content: "Polls and Quizzes", onClose: togglePollView }), /* @__PURE__ */ React82.createElement(Flex, { direction: "column", css: { px: "$10", pb: "$10", overflowY: "auto" } }, permissions?.pollWrite && /* @__PURE__ */ React82.createElement(AddMenu, null), /* @__PURE__ */ React82.createElement(PrevMenu, null)));
 };
 function InteractionSelectionCard({
@@ -22212,14 +22232,14 @@ function InteractionSelectionCard({
 var AddMenu = () => {
   const actions = useHMSActions28();
   const [title, setTitle] = useState35("");
-  const localPeerRoleName = useHMSStore43(selectLocalPeerRoleName);
+  const localPeerRoleName = useHMSStore44(selectLocalPeerRoleName);
   const [hideVoteCount, setHideVoteCount] = useState35(false);
   const [error, setError] = useState35();
   const [titleError, setTitleError] = useState35("");
   const { setPollState } = usePollViewState();
   const [interactionType, setInteractionType] = useState35("Poll" /* POLL */);
   const inputRef = useRef17(null);
-  useEffect21(() => {
+  useEffect22(() => {
     if (inputRef.current) {
       inputRef.current.focus();
     }
@@ -22294,13 +22314,13 @@ var AddMenu = () => {
 };
 var PrevMenu = () => {
   const hmsActions = useHMSActions28();
-  const polls = useHMSStore43(selectPolls2);
+  const polls = useHMSStore44(selectPolls2);
   const sortedPolls = useMemo6(
     () => polls?.sort((a2, b2) => (b2.createdAt?.getTime() || 0) - (a2.createdAt?.getTime() || 0))?.sort((a2, b2) => (b2.state === "started" ? 1 : 0) - (a2.state === "started" ? 1 : 0)),
     [polls]
   );
-  const permissions = useHMSStore43(selectPermissions15);
-  useEffect21(() => {
+  const permissions = useHMSStore44(selectPermissions15);
+  useEffect22(() => {
     const updatePolls = async () => {
       await hmsActions.interactivityCenter.getPolls();
     };
@@ -22338,7 +22358,7 @@ var InteractionCard = ({ id, title, status }) => {
 init_define_process_env();
 import React92, { useMemo as useMemo8, useState as useState37 } from "react";
 import { v4 as uuid2 } from "uuid";
-import { selectPollByID, useHMSActions as useHMSActions29, useHMSStore as useHMSStore44, useRecordingStreaming as useRecordingStreaming9 } from "@100mslive/react-sdk";
+import { selectPollByID, useHMSActions as useHMSActions29, useHMSStore as useHMSStore45, useRecordingStreaming as useRecordingStreaming9 } from "@100mslive/react-sdk";
 import { AddCircleIcon as AddCircleIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx
@@ -22349,7 +22369,7 @@ import { AddCircleIcon, TrashIcon as TrashIcon3 } from "@100mslive/react-icons";
 // src/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.tsx
 init_define_process_env();
 import React83 from "react";
-import { AlertTriangleIcon as AlertTriangleIcon6, CrossIcon as CrossIcon14 } from "@100mslive/react-icons";
+import { AlertTriangleIcon as AlertTriangleIcon6, CrossIcon as CrossIcon15 } from "@100mslive/react-icons";
 var DeleteQuestionModal = ({
   open,
   setOpen,
@@ -22376,7 +22396,7 @@ var DeleteQuestionModal = ({
         },
         onClick: () => setOpen(false)
       },
-      /* @__PURE__ */ React83.createElement(CrossIcon14, null)
+      /* @__PURE__ */ React83.createElement(CrossIcon15, null)
     )
   ), /* @__PURE__ */ React83.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The question will be deleted. You can't undo this action."), /* @__PURE__ */ React83.createElement(Flex, { css: { w: "100%", mt: "$12", gap: "$md" } }, /* @__PURE__ */ React83.createElement(
     Button,
@@ -22409,7 +22429,7 @@ var Line = () => /* @__PURE__ */ React84.createElement(Flex, { css: { w: "100%",
 // src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx
 init_define_process_env();
 import React88 from "react";
-import { CheckCircleIcon, CheckIcon as CheckIcon6 } from "@100mslive/react-icons";
+import { CheckCircleIcon, CheckIcon as CheckIcon5 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx
 init_define_process_env();
@@ -22497,7 +22517,7 @@ var MultipleChoiceOptions = ({
           flexShrink: 0
         }
       },
-      /* @__PURE__ */ React88.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React88.createElement(CheckIcon6, { width: 16, height: 16 }))
+      /* @__PURE__ */ React88.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React88.createElement(CheckIcon5, { width: 16, height: 16 }))
     ) : null, isStopped && correctOptionIndexes?.includes(option.index) ? /* @__PURE__ */ React88.createElement(Flex, { align: "center", css: { color: "$on_surface_high" } }, /* @__PURE__ */ React88.createElement(CheckCircleIcon, { height: 20, width: 20 })) : null, /* @__PURE__ */ React88.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React88.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ React88.createElement(Text, { css: { display: "flex", flexGrow: "1" } }, /* @__PURE__ */ React88.createElement(Label3, { htmlFor: `${questionIndex}-${option.index}` }, option.text)), showVoteCount && /* @__PURE__ */ React88.createElement(VoteCount, { voteCount: option.voteCount })), showVoteCount && /* @__PURE__ */ React88.createElement(VoteProgress, { option, totalResponses })), isStopped && isQuiz && localPeerResponse?.options.includes(option.index) ? /* @__PURE__ */ React88.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", maxWidth: "max-content" } }, "Your Answer") : null);
   }));
 };
@@ -22513,7 +22533,7 @@ var MultipleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handleOptionT
           width: "$9"
         }
       },
-      /* @__PURE__ */ React88.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React88.createElement(CheckIcon6, { width: 16, height: 16 }))
+      /* @__PURE__ */ React88.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React88.createElement(CheckIcon5, { width: 16, height: 16 }))
     ), /* @__PURE__ */ React88.createElement(
       OptionInputWithDelete,
       {
@@ -22875,7 +22895,7 @@ function CreateQuestions() {
   const { isHLSRunning } = useRecordingStreaming9();
   const togglePollView = usePollViewToggle();
   const { pollInView: id, setPollView } = usePollViewState();
-  const interaction = useHMSStore44(selectPollByID(id));
+  const interaction = useHMSStore45(selectPollByID(id));
   const [questions, setQuestions] = useState37(
     interaction.questions?.length ? getEditableFormat(interaction.questions) : [{ draftID: uuid2() }]
   );
@@ -22970,8 +22990,8 @@ var QuestionCard = ({ question, onSave, index, length, removeQuestion, isQuiz, c
 // src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx
 init_define_process_env();
 import React96, { useState as useState39 } from "react";
-import { selectPollByID as selectPollByID3, useHMSStore as useHMSStore47 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon4, ChevronRightIcon as ChevronRightIcon3, CrossIcon as CrossIcon15 } from "@100mslive/react-icons";
+import { selectPollByID as selectPollByID3, useHMSStore as useHMSStore48 } from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon4, ChevronRightIcon as ChevronRightIcon3, CrossIcon as CrossIcon16 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx
 init_define_process_env();
@@ -23034,7 +23054,7 @@ var LeaderboardEntry = ({
 // src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx
 init_define_process_env();
 import React95 from "react";
-import { selectLocalPeerID as selectLocalPeerID8, useHMSStore as useHMSStore46 } from "@100mslive/react-sdk";
+import { selectLocalPeerID as selectLocalPeerID8, useHMSStore as useHMSStore47 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Polls/Voting/StatisticBox.tsx
 init_define_process_env();
@@ -23055,15 +23075,15 @@ var StatisticBox = ({ title, value = 0 }) => {
 
 // src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx
 init_define_process_env();
-import { useEffect as useEffect22, useState as useState38 } from "react";
+import { useEffect as useEffect23, useState as useState38 } from "react";
 import {
   selectPollByID as selectPollByID2,
   useHMSActions as useHMSActions30,
-  useHMSStore as useHMSStore45
+  useHMSStore as useHMSStore46
 } from "@100mslive/react-sdk";
 var useQuizSummary = (quizID) => {
   const hmsActions = useHMSActions30();
-  const quiz = useHMSStore45(selectPollByID2(quizID));
+  const quiz = useHMSStore46(selectPollByID2(quizID));
   const [quizLeaderboard, setQuizLeaderboard] = useState38();
   const summary = quizLeaderboard?.summary || {
     totalUsers: 0,
@@ -23073,7 +23093,7 @@ var useQuizSummary = (quizID) => {
     correctUsers: 0
   };
   const [calculations, setCalculations] = useState38({ maxPossibleScore: 0, totalResponses: 0 });
-  useEffect22(() => {
+  useEffect23(() => {
     const fetchLeaderboardData = async () => {
       if (!quizLeaderboard && quiz && !quiz?.anonymous && quiz.state === "stopped") {
         const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz.id, 0, 50);
@@ -23098,7 +23118,7 @@ var useQuizSummary = (quizID) => {
 
 // src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx
 var PeerParticipationSummary = ({ quiz }) => {
-  const localPeerId = useHMSStore46(selectLocalPeerID8);
+  const localPeerId = useHMSStore47(selectLocalPeerID8);
   const { quizLeaderboard, summary } = useQuizSummary(quiz.id);
   if (quiz.state !== "stopped") {
     return /* @__PURE__ */ React95.createElement(React95.Fragment, null);
@@ -23135,7 +23155,7 @@ var PeerParticipationSummary = ({ quiz }) => {
 
 // src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx
 var LeaderboardSummary = ({ pollID }) => {
-  const quiz = useHMSStore47(selectPollByID3(pollID));
+  const quiz = useHMSStore48(selectPollByID3(pollID));
   const { quizLeaderboard, maxPossibleScore } = useQuizSummary(pollID);
   const [viewAllEntries, setViewAllEntries] = useState39(false);
   const { setPollView } = usePollViewState();
@@ -23156,7 +23176,7 @@ var LeaderboardSummary = ({ pollID }) => {
       css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high", cursor: "pointer" } },
       onClick: toggleSidepane
     },
-    /* @__PURE__ */ React96.createElement(CrossIcon15, null)
+    /* @__PURE__ */ React96.createElement(CrossIcon16, null)
   )), !viewAllEntries ? /* @__PURE__ */ React96.createElement(PeerParticipationSummary, { quiz }) : null, /* @__PURE__ */ React96.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", mt: "$4" } }, "Leaderboard"), /* @__PURE__ */ React96.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, "Based on score and time taken to cast the correct answer"), /* @__PURE__ */ React96.createElement(
     Box,
     {
@@ -23213,9 +23233,9 @@ import {
   selectPermissions as selectPermissions16,
   selectPollByID as selectPollByID4,
   useHMSActions as useHMSActions32,
-  useHMSStore as useHMSStore50
+  useHMSStore as useHMSStore51
 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon5, CrossIcon as CrossIcon16 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon5, CrossIcon as CrossIcon17 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/Voting/StandardVoting.tsx
 init_define_process_env();
@@ -23225,7 +23245,7 @@ import React98 from "react";
 init_define_process_env();
 import React97, { useCallback as useCallback22, useMemo as useMemo9, useRef as useRef19, useState as useState40 } from "react";
 import { match as match8 } from "ts-pattern";
-import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions31, useHMSStore as useHMSStore48 } from "@100mslive/react-sdk";
+import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions31, useHMSStore as useHMSStore49 } from "@100mslive/react-sdk";
 import { CheckCircleIcon as CheckCircleIcon5, ChevronDownIcon as ChevronDownIcon5, CrossCircleIcon } from "@100mslive/react-icons";
 var QuestionCard2 = ({
   pollID,
@@ -23244,12 +23264,12 @@ var QuestionCard2 = ({
   rolesThatCanViewResponses
 }) => {
   const actions = useHMSActions31();
-  const localPeer = useHMSStore48(selectLocalPeer);
+  const localPeer = useHMSStore49(selectLocalPeer);
   const localPeerResponse = responses?.find(
     (response) => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId
   );
   const isLocalPeerCreator = localPeer?.id === startedBy;
-  const localPeerRoleName = useHMSStore48(selectLocalPeerRoleName2);
+  const localPeerRoleName = useHMSStore49(selectLocalPeerRoleName2);
   const roleCanViewResponse = !rolesThatCanViewResponses || rolesThatCanViewResponses.length === 0 || rolesThatCanViewResponses.includes(localPeerRoleName || "");
   const showVoteCount = roleCanViewResponse && (localPeerResponse || isLocalPeerCreator && pollState === "stopped") && !isQuiz;
   const isLive = pollState === "started";
@@ -23435,9 +23455,9 @@ var StandardView = ({ poll }) => {
 // src/Prebuilt/components/Polls/Voting/TimedVoting.tsx
 init_define_process_env();
 import React99, { useState as useState41 } from "react";
-import { selectLocalPeerID as selectLocalPeerID9, useHMSStore as useHMSStore49 } from "@100mslive/react-sdk";
+import { selectLocalPeerID as selectLocalPeerID9, useHMSStore as useHMSStore50 } from "@100mslive/react-sdk";
 var TimedView = ({ poll }) => {
-  const localPeerId = useHMSStore49(selectLocalPeerID9);
+  const localPeerId = useHMSStore50(selectLocalPeerID9);
   const lastAttemptedIndex = getLastAttemptedIndex(poll.questions, localPeerId, "");
   const [currentIndex, setCurrentIndex] = useState41(lastAttemptedIndex);
   const activeQuestion = poll.questions?.find((question) => question.index === currentIndex);
@@ -23472,9 +23492,9 @@ var TimedView = ({ poll }) => {
 // src/Prebuilt/components/Polls/Voting/Voting.tsx
 var Voting = ({ id, toggleVoting }) => {
   const actions = useHMSActions32();
-  const poll = useHMSStore50(selectPollByID4(id));
-  const pollCreatorName = useHMSStore50(selectPeerNameByID(poll?.createdBy));
-  const permissions = useHMSStore50(selectPermissions16);
+  const poll = useHMSStore51(selectPollByID4(id));
+  const pollCreatorName = useHMSStore51(selectPeerNameByID(poll?.createdBy));
+  const permissions = useHMSStore51(selectPermissions16);
   const canEndActivity = !!permissions?.pollWrite;
   const { setPollView } = usePollViewState();
   const showSingleView = poll?.type === "quiz" && poll.state === "started";
@@ -23516,7 +23536,7 @@ var Voting = ({ id, toggleVoting }) => {
           height: "fit-content"
         }
       },
-      /* @__PURE__ */ React100.createElement(CrossIcon16, { onClick: toggleVoting })
+      /* @__PURE__ */ React100.createElement(CrossIcon17, { onClick: toggleVoting })
     )
   ), /* @__PURE__ */ React100.createElement(Flex, { direction: "column", css: { p: "$8 $10", flex: "1 1 0", overflowY: "auto" } }, poll.state === "started" ? /* @__PURE__ */ React100.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, pollCreatorName || "Participant", " started a ", poll.type) : null, showSingleView ? /* @__PURE__ */ React100.createElement(TimedView, { poll }) : /* @__PURE__ */ React100.createElement(StandardView, { poll })), /* @__PURE__ */ React100.createElement(
     Flex,
@@ -23557,15 +23577,15 @@ var Polls = () => {
 // src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx
 init_define_process_env();
 import React105 from "react";
-import { CrossIcon as CrossIcon17 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon18 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
 init_define_process_env();
-import React102, { useEffect as useEffect23, useState as useState42 } from "react";
-import { selectDominantSpeaker, useHMSStore as useHMSStore51 } from "@100mslive/react-sdk";
+import React102, { useEffect as useEffect24, useState as useState42 } from "react";
+import { selectDominantSpeaker, useHMSStore as useHMSStore52 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
 var SpeakerTag = () => {
-  const dominantSpeaker = useHMSStore51(selectDominantSpeaker);
+  const dominantSpeaker = useHMSStore52(selectDominantSpeaker);
   return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React102.createElement(
     Flex,
     {
@@ -23590,7 +23610,7 @@ var Logo = () => {
   const roomLayout = useRoomLayout();
   const logo = roomLayout?.logo?.url;
   const [hideImage, setHideImage] = useState42(false);
-  useEffect23(() => {
+  useEffect24(() => {
     if (hideImage) {
       setHideImage(false);
     }
@@ -23614,10 +23634,10 @@ import React104 from "react";
 
 // src/Prebuilt/components/RoomDetails/Duration.tsx
 init_define_process_env();
-import React103, { useEffect as useEffect24, useState as useState43 } from "react";
+import React103, { useEffect as useEffect25, useState as useState43 } from "react";
 var Duration = ({ timestamp }) => {
   const [elapsedTime, setElapsedTime] = useState43(getFormattedTime(Date.now() - timestamp.getTime(), false));
-  useEffect24(() => {
+  useEffect25(() => {
     const timerAdded = setInterval(() => {
       setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false));
     }, 1e3);
@@ -23653,30 +23673,30 @@ var ShowRoomDetailHeader = () => {
         "&:hover": { opacity: "0.8" }
       }
     },
-    /* @__PURE__ */ React105.createElement(CrossIcon17, null)
+    /* @__PURE__ */ React105.createElement(CrossIcon18, null)
   )), /* @__PURE__ */ React105.createElement(RoomDetailsRow, { details }));
 };
 
 // src/Prebuilt/components/SidePaneTabs.tsx
 init_define_process_env();
-import React120, { useEffect as useEffect31, useState as useState52 } from "react";
-import { useMedia as useMedia18 } from "react-use";
+import React120, { useEffect as useEffect32, useState as useState52 } from "react";
+import { useMedia as useMedia19 } from "react-use";
 import { match as match10 } from "ts-pattern";
-import { selectPeerCount as selectPeerCount5, useHMSStore as useHMSStore64 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon21 } from "@100mslive/react-icons";
+import { selectPeerCount as selectPeerCount5, useHMSStore as useHMSStore65 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon22 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.tsx
 init_define_process_env();
 import React117, { useCallback as useCallback30, useRef as useRef23 } from "react";
-import { useMedia as useMedia17 } from "react-use";
+import { useMedia as useMedia18 } from "react-use";
 import { match as match9 } from "ts-pattern";
-import { selectHMSMessagesCount, useHMSActions as useHMSActions40, useHMSStore as useHMSStore61, useHMSVanillaStore as useHMSVanillaStore10 } from "@100mslive/react-sdk";
+import { selectHMSMessagesCount, useHMSActions as useHMSActions40, useHMSStore as useHMSStore62, useHMSVanillaStore as useHMSVanillaStore10 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.tsx
 init_define_process_env();
-import React109, { Fragment as Fragment10, useCallback as useCallback26, useEffect as useEffect26, useLayoutEffect, useMemo as useMemo10, useRef as useRef20, useState as useState46 } from "react";
-import { useMedia as useMedia12 } from "react-use";
+import React109, { Fragment as Fragment10, useCallback as useCallback26, useEffect as useEffect27, useLayoutEffect, useMemo as useMemo10, useRef as useRef20, useState as useState46 } from "react";
+import { useMedia as useMedia13 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
@@ -23688,7 +23708,7 @@ import {
   selectSessionStore as selectSessionStore5,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
   useHMSActions as useHMSActions36,
-  useHMSStore as useHMSStore55,
+  useHMSStore as useHMSStore56,
   useHMSVanillaStore as useHMSVanillaStore9
 } from "@100mslive/react-sdk";
 import { SolidPinIcon } from "@100mslive/react-icons";
@@ -23696,11 +23716,11 @@ import { SolidPinIcon } from "@100mslive/react-icons";
 // src/Prebuilt/components/Chat/ChatActions.tsx
 init_define_process_env();
 import React107, { useCallback as useCallback25, useState as useState44 } from "react";
-import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selectPermissions17, useHMSActions as useHMSActions35, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
+import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selectPermissions17, useHMSActions as useHMSActions35, useHMSStore as useHMSStore54 } from "@100mslive/react-sdk";
 import {
   CopyIcon as CopyIcon2,
   CrossCircleIcon as CrossCircleIcon2,
-  CrossIcon as CrossIcon18,
+  CrossIcon as CrossIcon19,
   EyeCloseIcon as EyeCloseIcon2,
   PeopleRemoveIcon as PeopleRemoveIcon3,
   PinIcon,
@@ -23724,10 +23744,10 @@ var MwebChatOption = ({
 // src/Prebuilt/components/hooks/useChatBlacklist.ts
 init_define_process_env();
 import { useCallback as useCallback23 } from "react";
-import { selectLocalPeer as selectLocalPeer2, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions33, useHMSStore as useHMSStore52 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer2, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions33, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
 var useChatBlacklist = (sessionStoreKey) => {
   const hmsActions = useHMSActions33();
-  const blacklistedIDs = useHMSStore52(selectSessionStore2(sessionStoreKey));
+  const blacklistedIDs = useHMSStore53(selectSessionStore2(sessionStoreKey));
   const blacklistItem = useCallback23(
     async (blacklistID) => {
       await hmsActions.sessionStore.set(sessionStoreKey, [...blacklistedIDs || [], blacklistID]).catch((err) => ToastManager.addToast({ title: err.description }));
@@ -23737,8 +23757,8 @@ var useChatBlacklist = (sessionStoreKey) => {
   return { blacklistItem, blacklistedIDs };
 };
 var useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = "" }) => {
-  const localPeer = useHMSStore52(selectLocalPeer2);
-  const blacklistedPeerIDs = useHMSStore52(selectSessionStore2("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
+  const localPeer = useHMSStore53(selectLocalPeer2);
+  const blacklistedPeerIDs = useHMSStore53(selectSessionStore2("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
   return blacklistedPeerIDs?.includes(local ? localPeer?.customerUserId : peerCustomerUserId);
 };
 
@@ -23820,9 +23840,9 @@ var ChatActions = ({
   const { roles_whitelist = [] } = elements?.chat || {};
   const [open, setOpen] = useState44(false);
   const actions = useHMSActions35();
-  const canRemoveOthers = useHMSStore53(selectPermissions17)?.removeOthers;
+  const canRemoveOthers = useHMSStore54(selectPermissions17)?.removeOthers;
   const { blacklistItem: blacklistPeer } = useChatBlacklist("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */);
-  const localPeerName = useHMSStore53(selectLocalPeerName2);
+  const localPeerName = useHMSStore54(selectLocalPeerName2);
   const { setPinnedMessages, unpinBlacklistedMessages } = usePinnedMessages();
   const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
     "chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */
@@ -23932,7 +23952,7 @@ var ChatActions = ({
         }
       },
       "Message options",
-      /* @__PURE__ */ React107.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React107.createElement(CrossIcon18, null))
+      /* @__PURE__ */ React107.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React107.createElement(CrossIcon19, null))
     ), Object.keys(options).map((optionKey) => {
       const option = options[optionKey];
       return option.show ? /* @__PURE__ */ React107.createElement(
@@ -24002,7 +24022,7 @@ var ChatActions = ({
 // src/Prebuilt/components/Chat/EmptyChat.tsx
 init_define_process_env();
 import React108 from "react";
-import { useMedia as useMedia11 } from "react-use";
+import { useMedia as useMedia12 } from "react-use";
 
 // src/Prebuilt/images/empty-chat.svg
 var empty_chat_default = 'data:image/svg+xml,<svg width="184" height="133" viewBox="0 0 184 133" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M144.885 91.3998C145.318 91.023 145.861 90.7947 146.433 90.7483L146.446 90.7473L169.355 89.1614C169.702 89.1376 170.049 89.2101 170.358 89.3712C170.662 89.5305 170.918 89.7702 171.096 90.0642C171.098 90.0672 171.1 90.0703 171.102 90.0734L171.104 90.0766C171.281 90.3744 171.373 90.7154 171.369 91.062C171.365 91.4097 171.265 91.7496 171.08 92.044L158.85 111.504C158.539 111.986 158.081 112.356 157.544 112.56C157.007 112.764 156.419 112.791 155.866 112.636C155.313 112.482 154.823 112.155 154.469 111.703C154.115 111.25 153.915 110.697 153.898 110.123C153.898 110.109 153.898 110.094 153.898 110.08L153.996 100.307L145.347 95.7858C145.334 95.779 145.321 95.7721 145.308 95.7649C144.811 95.4785 144.417 95.0404 144.186 94.5146C143.955 93.9888 143.898 93.4029 144.024 92.8425C144.15 92.2821 144.451 91.7765 144.885 91.3998ZM167.441 91.0088L146.603 92.8952C146.49 92.9053 146.383 92.9508 146.298 93.0251C146.211 93.1005 146.151 93.2016 146.125 93.3137C146.1 93.4257 146.112 93.5429 146.158 93.6481C146.202 93.7484 146.276 93.8327 146.369 93.89L155.26 98.296L167.441 91.0088ZM156.32 100.171L168.547 92.8564L157.039 110.339C156.976 110.434 156.886 110.506 156.78 110.547C156.673 110.587 156.555 110.593 156.444 110.562C156.334 110.531 156.236 110.466 156.165 110.375C156.097 110.289 156.058 110.184 156.052 110.075L156.32 100.171Z" fill="%23444954"/>%0A<path d="M83.3248 35.4156C71.7182 47.1017 51.2098 75.5175 62.0292 95.6918C75.5536 120.91 140.453 79.2983 115.364 67.6657C90.2756 56.0331 65.8818 122.018 101.568 120.391C116.398 118.62 131.221 114.699 145.703 105.512" stroke="%23293042" stroke-width="2.25" stroke-dasharray="6 6"/>%0A<rect x="0.00256348" y="0.5" width="173.524" height="58.3398" rx="29.1699" fill="%23272A31"/>%0A<g opacity="0.4">%0A<rect x="24.7526" y="20.9312" width="111" height="4.5" rx="2.25" fill="%23444954"/>%0A</g>%0A<g opacity="0.4">%0A<rect x="38.2526" y="34.4312" width="110.25" height="4.5" rx="2.25" fill="%23444954"/>%0A</g>%0A<path d="M40.3918 71.5547L28.4246 55.0999L52.3589 55.0999L40.3918 71.5547Z" fill="%23272A31"/>%0A</svg>%0A';
@@ -24011,7 +24031,7 @@ var empty_chat_default = 'data:image/svg+xml,<svg width="184" height="133" viewB
 var EmptyChat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const isMobile = useMedia11(config.media.md);
+  const isMobile = useMedia12(config.media.md);
   const canSendMessages = elements.chat && (elements.chat.public_chat_enabled || elements.chat.private_chat_enabled || elements.chat.roles_whitelist && elements.chat.roles_whitelist.length) && !isLocalPeerBlacklisted;
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeStream = useLandscapeHLSStream();
@@ -24043,12 +24063,12 @@ var EmptyChat = () => {
 
 // src/Prebuilt/components/hooks/usePinnedBy.tsx
 init_define_process_env();
-import { useEffect as useEffect25, useState as useState45 } from "react";
-import { selectSessionStore as selectSessionStore4, useHMSStore as useHMSStore54 } from "@100mslive/react-sdk";
+import { useEffect as useEffect26, useState as useState45 } from "react";
+import { selectSessionStore as selectSessionStore4, useHMSStore as useHMSStore55 } from "@100mslive/react-sdk";
 var usePinnedBy = (messageId) => {
-  const pinnedMessages = useHMSStore54(selectSessionStore4("pinnedMessages" /* PINNED_MESSAGES */));
+  const pinnedMessages = useHMSStore55(selectSessionStore4("pinnedMessages" /* PINNED_MESSAGES */));
   const [pinnedBy, setPinnedBy] = useState45("");
-  useEffect25(() => {
+  useEffect26(() => {
     let match16 = "";
     pinnedMessages?.forEach((pinnedMessage) => {
       if (pinnedMessage.id === messageId) {
@@ -24127,8 +24147,8 @@ var MessageType = ({
   hasCurrentUserSent,
   receiver
 }) => {
-  const peerName = useHMSStore55(selectPeerNameByID3(receiver));
-  const localPeerRoleName = useHMSStore55(selectLocalPeerRoleName3);
+  const peerName = useHMSStore56(selectPeerNameByID3(receiver));
+  const localPeerRoleName = useHMSStore56(selectLocalPeerRoleName3);
   if (receiver) {
     return /* @__PURE__ */ React109.createElement(MessageTypeContainer, { left: hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ""}` : "to You", right: "(DM)" });
   }
@@ -24172,10 +24192,10 @@ var ChatMessage = React109.memo(
   ({ index, style = {}, message }) => {
     const { elements } = useRoomLayoutConferencingScreen();
     const rowRef = useRef20(null);
-    const isMobile = useMedia12(config.media.md);
+    const isMobile = useMedia13(config.media.md);
     const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
     const isOverlay = elements?.chat?.is_overlay && isMobile;
-    const localPeerId = useHMSStore55(selectLocalPeerID10);
+    const localPeerId = useHMSStore56(selectLocalPeerID10);
     const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
     const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
     const messageType = getMessageType({
@@ -24343,7 +24363,7 @@ var VirtualizedChatMessages = React109.forwardRef(({ messages, scrollToBottom },
   const itemKey2 = useCallback26((index, data3) => {
     return data3[index].id;
   }, []);
-  useEffect26(() => {
+  useEffect27(() => {
     requestAnimationFrame(() => scrollToBottom(1));
   }, [scrollToBottom]);
   return /* @__PURE__ */ React109.createElement(
@@ -24394,15 +24414,15 @@ var VirtualizedChatMessages = React109.forwardRef(({ messages, scrollToBottom },
 });
 var ChatBody = React109.forwardRef(
   ({ scrollToBottom }, listRef) => {
-    const messages = useHMSStore55(selectHMSMessages);
-    const blacklistedMessageIDs = useHMSStore55(selectSessionStore5("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
+    const messages = useHMSStore56(selectHMSMessages);
+    const blacklistedMessageIDs = useHMSStore56(selectSessionStore5("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
     const filteredMessages = useMemo10(() => {
       const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
       return messages?.filter((message) => message.type === "chat" && !blacklistedMessageIDSet.has(message.id)) || [];
     }, [blacklistedMessageIDs, messages]);
     const vanillaStore = useHMSVanillaStore9();
     const rerenderOnFirstMount = useRef20(false);
-    useEffect26(() => {
+    useEffect27(() => {
       const unsubscribe = vanillaStore.subscribe(() => {
         if (!listRef.current) {
           return;
@@ -24414,7 +24434,7 @@ var ChatBody = React109.forwardRef(
       }, selectUnreadHMSMessagesCount2);
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
-    useEffect26(() => {
+    useEffect27(() => {
       if (filteredMessages.length > 0 && listRef?.current && !rerenderOnFirstMount.current) {
         rerenderOnFirstMount.current = true;
         listRef.current.resetAfterIndex(0);
@@ -24429,7 +24449,7 @@ var PinnedBy = ({
   rowRef
 }) => {
   const pinnedBy = usePinnedBy(messageId);
-  const localPeerName = useHMSStore55(selectLocalPeerName3);
+  const localPeerName = useHMSStore56(selectLocalPeerName3);
   useLayoutEffect(() => {
     if (rowRef?.current) {
       if (pinnedBy) {
@@ -24448,32 +24468,32 @@ var PinnedBy = ({
 
 // src/Prebuilt/components/Chat/ChatFooter.tsx
 init_define_process_env();
-import React112, { useCallback as useCallback28, useEffect as useEffect28, useRef as useRef22, useState as useState49 } from "react";
-import { useMedia as useMedia15 } from "react-use";
+import React112, { useCallback as useCallback28, useEffect as useEffect29, useRef as useRef22, useState as useState49 } from "react";
+import { useMedia as useMedia16 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { selectLocalPeer as selectLocalPeer3, useHMSActions as useHMSActions38, useHMSStore as useHMSStore58 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useHMSActions as useHMSActions38, 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
 init_define_process_env();
 import React111, { useState as useState48 } from "react";
-import { useMedia as useMedia14 } from "react-use";
-import { ChevronDownIcon as ChevronDownIcon6, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon19, GroupIcon, PersonIcon as PersonIcon2 } from "@100mslive/react-icons";
+import { useMedia as useMedia15 } from "react-use";
+import { ChevronDownIcon as ChevronDownIcon6, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon20, GroupIcon, PersonIcon as PersonIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelector.tsx
 init_define_process_env();
 import React110, { useMemo as useMemo11, useState as useState47 } from "react";
-import { useMedia as useMedia13 } from "react-use";
+import { useMedia as useMedia14 } from "react-use";
 import {
   HMSPeerType as HMSPeerType3,
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectRemotePeers as selectRemotePeers2,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount3,
-  useHMSStore as useHMSStore56
+  useHMSStore as useHMSStore57
 } from "@100mslive/react-sdk";
-import { CheckIcon as CheckIcon7, PeopleIcon as PeopleIcon3 } from "@100mslive/react-icons";
+import { CheckIcon as CheckIcon6, PeopleIcon as PeopleIcon3 } from "@100mslive/react-icons";
 var ChatDotIcon = () => {
   return /* @__PURE__ */ React110.createElement(Box, { css: { size: "$6", bg: "$primary_default", mx: "$2", r: "$round" } });
 };
@@ -24484,7 +24504,7 @@ var SelectorItem = ({
   unreadCount,
   icon = void 0
 }) => {
-  const isMobile = useMedia13(config.media.md);
+  const isMobile = useMedia14(config.media.md);
   const Root28 = !isMobile ? Dropdown.Item : ({ children, ...rest }) => /* @__PURE__ */ React110.createElement(Flex, { ...rest, css: { p: "$6 $8", ...rest.css } }, children);
   return /* @__PURE__ */ React110.createElement(
     Root28,
@@ -24502,7 +24522,7 @@ var SelectorItem = ({
       icon,
       value
     ),
-    /* @__PURE__ */ React110.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React110.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React110.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React110.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React110.createElement(CheckIcon7, { width: 16, height: 16 }))
+    /* @__PURE__ */ React110.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React110.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React110.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React110.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React110.createElement(CheckIcon6, { width: 16, height: 16 }))
   );
 };
 var SelectorHeader = React110.memo(
@@ -24518,7 +24538,7 @@ var SelectorHeader = React110.memo(
   }
 );
 var Everyone = React110.memo(({ active }) => {
-  const unreadCount = useHMSStore56(selectUnreadHMSMessagesCount3);
+  const unreadCount = useHMSStore57(selectUnreadHMSMessagesCount3);
   const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return /* @__PURE__ */ React110.createElement(
@@ -24536,7 +24556,7 @@ var Everyone = React110.memo(({ active }) => {
   );
 });
 var RoleItem = React110.memo(({ role, active }) => {
-  const unreadCount = useHMSStore56(selectMessagesUnreadCountByRole(role));
+  const unreadCount = useHMSStore57(selectMessagesUnreadCountByRole(role));
   const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return /* @__PURE__ */ React110.createElement(
@@ -24553,7 +24573,7 @@ var RoleItem = React110.memo(({ role, active }) => {
   );
 });
 var PeerItem = ({ peerId, name, active }) => {
-  const unreadCount = useHMSStore56(selectMessagesUnreadCountByPeerID(peerId));
+  const unreadCount = useHMSStore57(selectMessagesUnreadCountByPeerID(peerId));
   const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return /* @__PURE__ */ React110.createElement(
@@ -24611,7 +24631,7 @@ var VirtualizedSelectItemList = ({
 };
 var ChatSelector = ({ role, peerId }) => {
   const { elements } = useRoomLayoutConferencingScreen();
-  const peers = useHMSStore56(selectRemotePeers2);
+  const peers = useHMSStore57(selectRemotePeers2);
   const [search, setSearch] = useState47("");
   const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
   const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
@@ -24630,7 +24650,7 @@ var ChatSelector = ({ role, peerId }) => {
 // src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
 var ChatSelectorContainer = () => {
   const [open, setOpen] = useState48(false);
-  const isMobile = useMedia14(config.media.md);
+  const isMobile = useMedia15(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
   const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
@@ -24733,7 +24753,7 @@ var ChatSelectorContainer = () => {
       }
     },
     /* @__PURE__ */ React111.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, "Chat with"),
-    /* @__PURE__ */ React111.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React111.createElement(CrossIcon19, null))
+    /* @__PURE__ */ React111.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React111.createElement(CrossIcon20, null))
   ), /* @__PURE__ */ React111.createElement(
     Box,
     {
@@ -24748,10 +24768,10 @@ var ChatSelectorContainer = () => {
 // src/Prebuilt/components/AppData/useChatState.js
 init_define_process_env();
 import { useCallback as useCallback27 } from "react";
-import { selectAppData as selectAppData6, useHMSActions as useHMSActions37, useHMSStore as useHMSStore57 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData7, useHMSActions as useHMSActions37, useHMSStore as useHMSStore58 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
   const hmsActions = useHMSActions37();
-  let chatDraftMessage = useHMSStore57(selectAppData6(APP_DATA.chatDraft));
+  let chatDraftMessage = useHMSStore58(selectAppData7(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
@@ -24766,10 +24786,10 @@ var useChatDraftMessage = () => {
 
 // src/Prebuilt/components/Chat/useEmojiPickerStyles.js
 init_define_process_env();
-import { useEffect as useEffect27, useRef as useRef21 } from "react";
+import { useEffect as useEffect28, useRef as useRef21 } from "react";
 var useEmojiPickerStyles = (showing) => {
   const ref = useRef21(null);
-  useEffect27(() => {
+  useEffect28(() => {
     if (showing) {
       setTimeout(() => {
         const root = ref.current?.querySelector("em-emoji-picker")?.shadowRoot;
@@ -24845,10 +24865,10 @@ var ChatFooter = ({ onSend, children }) => {
   const hmsActions = useHMSActions38();
   const inputRef = useRef22(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia15(config.media.md);
+  const isMobile = useMedia16(config.media.md);
   const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || "Send a message";
-  const localPeer = useHMSStore58(selectLocalPeer3);
+  const localPeer = useHMSStore59(selectLocalPeer3);
   const isOverlayChat = elements?.chat?.is_overlay;
   const canDisableChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
   const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
@@ -24858,7 +24878,7 @@ var ChatFooter = ({ onSend, children }) => {
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  useEffect28(() => {
+  useEffect29(() => {
     if (!selectedPeer.id && !selectedRole && !["Everyone", ""].includes(defaultSelection)) {
       setRoleSelector(defaultSelection);
     } else {
@@ -24891,13 +24911,13 @@ var ChatFooter = ({ onSend, children }) => {
       });
     }
   }, [selectedRole, selectedPeer, hmsActions, onSend]);
-  useEffect28(() => {
+  useEffect29(() => {
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
     }
   }, [draftMessage]);
-  useEffect28(() => {
+  useEffect29(() => {
     const messageElement = inputRef.current;
     return () => {
       setDraftMessage(messageElement?.value || "");
@@ -25028,13 +25048,13 @@ var ChatFooter = ({ onSend, children }) => {
 // src/Prebuilt/components/Chat/ChatStates.tsx
 init_define_process_env();
 import React113, { useCallback as useCallback29 } from "react";
-import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions39, useHMSStore as useHMSStore59 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions39, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
 var ChatPaused = () => {
   const hmsActions = useHMSActions39();
   const { elements } = useRoomLayoutConferencingScreen();
   const can_disable_chat = !!elements?.chat?.real_time_controls?.can_disable_chat;
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore59(selectSessionStore6("chatState" /* CHAT_STATE */)) || {};
-  const localPeer = useHMSStore59(selectLocalPeer4);
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore60(selectSessionStore6("chatState" /* CHAT_STATE */)) || {};
+  const localPeer = useHMSStore60(selectLocalPeer4);
   const unPauseChat = useCallback29(
     async () => await hmsActions.sessionStore.set("chatState" /* CHAT_STATE */, {
       enabled: true,
@@ -25080,10 +25100,10 @@ var ChatBlocked = () => {
 
 // src/Prebuilt/components/Chat/PinnedMessage.tsx
 init_define_process_env();
-import React116, { useEffect as useEffect29, useState as useState50 } from "react";
+import React116, { useEffect as useEffect30, useState as useState50 } from "react";
 import { useSwipeable } from "react-swipeable";
-import { useMedia as useMedia16 } from "react-use";
-import { selectSessionStore as selectSessionStore7, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
+import { useMedia as useMedia17 } from "react-use";
+import { selectSessionStore as selectSessionStore7, useHMSStore as useHMSStore61 } from "@100mslive/react-sdk";
 import { PinIcon as PinIcon2, UnpinIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ArrowNavigation.tsx
@@ -25139,10 +25159,10 @@ var StickIndicator = ({ total, index }) => {
 // src/Prebuilt/components/Chat/PinnedMessage.tsx
 var PINNED_MESSAGE_LENGTH = 75;
 var PinnedMessage = () => {
-  const pinnedMessages = useHMSStore60(selectSessionStore7("pinnedMessages" /* PINNED_MESSAGES */));
+  const pinnedMessages = useHMSStore61(selectSessionStore7("pinnedMessages" /* PINNED_MESSAGES */));
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState50(0);
   const { removePinnedMessage } = usePinnedMessages();
-  const isMobile = useMedia16(config.media.md);
+  const isMobile = useMedia17(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const canUnpinMessage = !!elements?.chat?.allow_pinning_messages;
   const [hideOverflow, setHideOverflow] = useState50(true);
@@ -25162,7 +25182,7 @@ var PinnedMessage = () => {
     onSwipedUp: () => showNextPinnedMessage(),
     onSwipedDown: () => showPreviousPinnedMessage()
   });
-  useEffect29(() => {
+  useEffect30(() => {
     const count = pinnedMessages?.length || 1;
     if (pinnedMessageIndex >= count) {
       setPinnedMessageIndex(count - 1);
@@ -25257,10 +25277,11 @@ var Chat = () => {
   const listRef = useRef23(null);
   const hmsActions = useHMSActions40();
   const vanillaStore = useHMSVanillaStore10();
-  const { enabled: isChatEnabled = true } = useHMSStore61(Sm("chatState" /* CHAT_STATE */)) || {};
-  const isMobile = useMedia17(config.media.md);
+  const { enabled: isChatEnabled = true } = useHMSStore62(Sm("chatState" /* CHAT_STATE */)) || {};
+  const isMobile = useMedia18(config.media.md);
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeStream = useLandscapeHLSStream();
+  useSidepaneResetOnLayoutUpdate("chat", SIDE_PANE_OPTIONS.CHAT);
   const scrollToBottom = useCallback30(
     (unreadCount = 0) => {
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -25274,9 +25295,6 @@ var Chat = () => {
     },
     [hmsActions, vanillaStore]
   );
-  if (!elements?.chat) {
-    return null;
-  }
   const streaming = isMobileHLSStream || isLandscapeStream;
   return /* @__PURE__ */ React117.createElement(
     Flex,
@@ -25340,7 +25358,7 @@ var NewMessageIndicator = ({
   scrollToBottom,
   listRef
 }) => {
-  const unreadCount = useHMSStore61(Bh);
+  const unreadCount = useHMSStore62(Bh);
   if (!unreadCount || !listRef.current) {
     return null;
   }
@@ -25386,12 +25404,12 @@ var NewMessageIndicator = ({
 
 // src/Prebuilt/components/Footer/PaginatedParticipants.tsx
 init_define_process_env();
-import React118, { useEffect as useEffect30, useState as useState51 } from "react";
+import React118, { useEffect as useEffect31, useState as useState51 } from "react";
 import { useInView } from "react-intersection-observer";
 import { useMeasure as useMeasure2 } from "react-use";
 import { VariableSizeList as VariableSizeList2 } from "react-window";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom8, useHMSStore as useHMSStore62, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon6, CrossIcon as CrossIcon20 } from "@100mslive/react-icons";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom8, useHMSStore as useHMSStore63, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon6, CrossIcon as CrossIcon21 } from "@100mslive/react-icons";
 var LoadMoreParticipants = ({
   hasNext,
   loadMore,
@@ -25399,7 +25417,7 @@ var LoadMoreParticipants = ({
 }) => {
   const { ref, inView } = useInView();
   const [inProgress, setInProgress] = useState51(false);
-  useEffect30(() => {
+  useEffect31(() => {
     if (hasNext && inView && !inProgress) {
       setInProgress(true);
       loadMore().catch(console.error).finally(() => setInProgress(false));
@@ -25431,11 +25449,11 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
   const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants2({ role: roleName, limit: 20 });
   const [search, setSearch] = useState51("");
   const filteredPeers = peers.filter((p) => p.name?.toLowerCase().includes(search?.toLowerCase()));
-  const isConnected = useHMSStore62(selectIsConnectedToRoom8);
+  const isConnected = useHMSStore63(selectIsConnectedToRoom8);
   const [ref, { width }] = useMeasure2();
   const height = ROW_HEIGHT * (filteredPeers.length + 1);
   const resetSidePane = useSidepaneReset();
-  useEffect30(() => {
+  useEffect31(() => {
     loadPeers();
   }, []);
   return /* @__PURE__ */ React118.createElement(Flex, { ref, direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React118.createElement(Flex, { align: "center" }, /* @__PURE__ */ React118.createElement(Flex, { align: "center", css: { flex: "1 1 0", cursor: "pointer" }, onClick: onBack }, /* @__PURE__ */ React118.createElement(ChevronLeftIcon6, null), /* @__PURE__ */ React118.createElement(Text, { variant: "lg", css: { flex: "1 1 0" } }, "Participants")), /* @__PURE__ */ React118.createElement(
@@ -25447,7 +25465,7 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
       },
       "data-testid": "close_sidepane"
     },
-    /* @__PURE__ */ React118.createElement(CrossIcon20, null)
+    /* @__PURE__ */ React118.createElement(CrossIcon21, null)
   )), /* @__PURE__ */ React118.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React118.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React118.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React118.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React118.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React118.createElement(
     VariableSizeList2,
     {
@@ -25465,14 +25483,14 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
 // src/Prebuilt/components/ChatSettings.tsx
 init_define_process_env();
 import React119 from "react";
-import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions41, useHMSStore as useHMSStore63 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions41, useHMSStore as useHMSStore64 } from "@100mslive/react-sdk";
 import { PauseCircleIcon as PauseCircleIcon3, SettingsIcon as SettingsIcon5 } from "@100mslive/react-icons";
 var ChatSettings = () => {
   const hmsActions = useHMSActions41();
-  const localPeer = useHMSStore63(selectLocalPeer5);
+  const localPeer = useHMSStore64(selectLocalPeer5);
   const { elements } = useRoomLayoutConferencingScreen();
   const canPauseChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
-  const { enabled: isChatEnabled = true } = useHMSStore63(selectSessionStore8("chatState" /* CHAT_STATE */)) || {};
+  const { enabled: isChatEnabled = true } = useHMSStore64(selectSessionStore8("chatState" /* CHAT_STATE */)) || {};
   const showPause = canPauseChat && isChatEnabled;
   if (!showPause) {
     return null;
@@ -25539,18 +25557,18 @@ var SidePaneTabs = React120.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = f
   const resetSidePane = useSidepaneReset();
   const [activeTab, setActiveTab] = useState52(active);
   const [activeRole, setActiveRole] = useState52("");
-  const peerCount = useHMSStore64(selectPeerCount5);
+  const peerCount = useHMSStore65(selectPeerCount5);
   const { elements, screenType } = useRoomLayoutConferencingScreen();
   const chat_title = elements?.chat?.chat_title || "Chat";
   const showChat = !!elements?.chat;
   const showParticipants = !!elements?.participant_list;
   const hideTabs = !(showChat && showParticipants) || hideTab;
-  const isMobile = useMedia18(config.media.md);
+  const isMobile = useMedia19(config.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
   const { off_stage_roles = [] } = elements?.on_stage_exp || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
-  useEffect31(() => {
+  useEffect32(() => {
     match10({ activeTab, showChat, showParticipants }).with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
       setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
     }).with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
@@ -25559,7 +25577,7 @@ var SidePaneTabs = React120.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = f
       resetSidePane();
     });
   }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect31(() => {
+  useEffect32(() => {
     setActiveTab(active);
   }, [active]);
   if (activeRole) {
@@ -25620,7 +25638,7 @@ var SidePaneTabs = React120.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = f
           },
           "data-testid": "close_chat"
         },
-        screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ React120.createElement(CrossIcon21, null)
+        screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ React120.createElement(CrossIcon22, null)
       ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ React120.createElement(Chat, null) : /* @__PURE__ */ React120.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole }));
     }).otherwise(() => {
       return /* @__PURE__ */ React120.createElement(
@@ -25647,7 +25665,7 @@ var SidePaneTabs = React120.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = f
             },
             "data-testid": "close_chat"
           },
-          /* @__PURE__ */ React120.createElement(CrossIcon21, null)
+          /* @__PURE__ */ React120.createElement(CrossIcon22, null)
         )),
         /* @__PURE__ */ React120.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React120.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
         /* @__PURE__ */ React120.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React120.createElement(Chat, null))
@@ -25669,7 +25687,7 @@ import {
   selectPeerNameByID as selectPeerNameByID4,
   selectVideoTrackByID as selectVideoTrackByID3,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID3,
-  useHMSStore as useHMSStore68
+  useHMSStore as useHMSStore69
 } from "@100mslive/react-sdk";
 import { BrbTileIcon, HandIcon as HandIcon5, MicOffIcon as MicOffIcon6 } from "@100mslive/react-icons";
 
@@ -25681,7 +25699,7 @@ import {
   selectPeerTypeByID as selectPeerTypeByID2,
   selectScreenShareByPeerID,
   selectSessionStore as selectSessionStore9,
-  useHMSStore as useHMSStore65
+  useHMSStore as useHMSStore66
 } from "@100mslive/react-sdk";
 import { CallIcon as CallIcon2, PinIcon as PinIcon3, ShareScreenIcon as ShareScreenIcon3, SpotlightIcon } from "@100mslive/react-icons";
 var TileConnection = ({
@@ -25691,9 +25709,9 @@ var TileConnection = ({
   width,
   pinned
 }) => {
-  const spotlighted = useHMSStore65(selectSessionStore9("spotlight" /* SPOTLIGHT */)) === peerId;
-  const isPeerScreenSharing = !!useHMSStore65(selectScreenShareByPeerID(peerId));
-  const peerType = useHMSStore65(selectPeerTypeByID2(peerId));
+  const spotlighted = useHMSStore66(selectSessionStore9("spotlight" /* SPOTLIGHT */)) === peerId;
+  const isPeerScreenSharing = !!useHMSStore66(selectScreenShareByPeerID(peerId));
+  const peerType = useHMSStore66(selectPeerTypeByID2(peerId));
   return /* @__PURE__ */ React121.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React121.createElement(React121.Fragment, null, name ? /* @__PURE__ */ React121.createElement(Flex, { align: "center" }, peerType === HMSPeerType4.SIP && /* @__PURE__ */ React121.createElement(IconWrapper, null, /* @__PURE__ */ React121.createElement(CallIcon2, { width: "15", height: "15" })), isPeerScreenSharing && /* @__PURE__ */ React121.createElement(IconWrapper, null, /* @__PURE__ */ React121.createElement(ShareScreenIcon3, { width: "15", height: "15" })), pinned && /* @__PURE__ */ React121.createElement(IconWrapper, null, /* @__PURE__ */ React121.createElement(PinIcon3, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React121.createElement(IconWrapper, null, /* @__PURE__ */ React121.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React121.createElement(
     Text,
     {
@@ -25728,35 +25746,36 @@ var TileConnection_default = TileConnection;
 // src/Prebuilt/components/TileMenu/TileMenu.tsx
 init_define_process_env();
 import React123, { useState as useState53 } from "react";
-import { useMedia as useMedia20 } from "react-use";
+import { useMedia as useMedia21 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID11,
   selectPeerByID as selectPeerByID2,
   selectPermissions as selectPermissions19,
   selectTrackByID as selectTrackByID3,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
-  useHMSStore as useHMSStore67,
+  useHMSStore as useHMSStore68,
   useRemoteAVToggle as useRemoteAVToggle2
 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon22, VerticalMenuIcon as VerticalMenuIcon8 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon23, VerticalMenuIcon as VerticalMenuIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/TileMenu/TileMenuContent.tsx
 init_define_process_env();
 import React122, { Fragment as Fragment11 } from "react";
-import { useMedia as useMedia19 } from "react-use";
+import { useMedia as useMedia20 } from "react-use";
 import {
   selectPermissions as selectPermissions18,
   selectSessionStore as selectSessionStore10,
   selectTrackByID as selectTrackByID2,
   useCustomEvent as useCustomEvent2,
   useHMSActions as useHMSActions42,
-  useHMSStore as useHMSStore66,
+  useHMSStore as useHMSStore67,
   useRemoteAVToggle
 } from "@100mslive/react-sdk";
 import {
   MicOffIcon as MicOffIcon5,
   MicOnIcon as MicOnIcon4,
   PencilIcon,
+  PersonSettingsIcon as PersonSettingsIcon2,
   PinIcon as PinIcon4,
   RemoveUserIcon as RemoveUserIcon2,
   ShareScreenIcon as ShareScreenIcon4,
@@ -25787,7 +25806,7 @@ var SpotlightActions = ({
   }
 }) => {
   const hmsActions = useHMSActions42();
-  const spotlightPeerId = useHMSStore66(selectSessionStore10("spotlight" /* SPOTLIGHT */));
+  const spotlightPeerId = useHMSStore67(selectSessionStore10("spotlight" /* SPOTLIGHT */));
   const isTileSpotlighted = spotlightPeerId === peerId;
   const dragClassName = getDragClassName();
   const setSpotlightPeerId = (peerIdToSpotlight) => hmsActions.sessionStore.set("spotlight" /* SPOTLIGHT */, peerIdToSpotlight).catch((err) => ToastManager.addToast({ title: err.description }));
@@ -25834,7 +25853,7 @@ var MinimiseInset = () => {
   return /* @__PURE__ */ React122.createElement(React122.Fragment, null, /* @__PURE__ */ React122.createElement(StyledMenuTile.ItemButton, { className: dragClassName, css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React122.createElement(ShrinkIcon, { height: 20, width: 20 }), /* @__PURE__ */ React122.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
 };
 var SimulcastLayers = ({ trackId }) => {
-  const track = useHMSStore66(selectTrackByID2(trackId));
+  const track = useHMSStore67(selectTrackByID2(trackId));
   const actions = useHMSActions42();
   const bg = useDropdownSelection();
   if (!track?.layerDefinitions?.length || track.degraded || !track.enabled) {
@@ -25915,11 +25934,16 @@ var TileMenuContent = ({
   },
   openNameChangeModal = () => {
     return;
+  },
+  openRoleChangeModal = () => {
+    return;
   }
 }) => {
   const actions = useHMSActions42();
   const dragClassName = getDragClassName();
-  const removeOthers = useHMSStore66(selectPermissions18)?.removeOthers;
+  const permissions = useHMSStore67(selectPermissions18);
+  const canChangeRole = !!permissions?.changeRole;
+  const removeOthers = !!permissions?.removeOthers;
   const { userName } = useHMSPrebuiltContext();
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
     audioTrackID,
@@ -25928,7 +25952,7 @@ var TileMenuContent = ({
   const { sendEvent } = useCustomEvent2({
     type: REMOTE_STOP_SCREENSHARE_TYPE
   });
-  const isMobile = useMedia19(config.media.md);
+  const isMobile = useMedia20(config.media.md);
   if (isLocal) {
     return showPinAction || canMinimise || !userName || showSpotlight ? /* @__PURE__ */ React122.createElement(React122.Fragment, null, showPinAction && /* @__PURE__ */ React122.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React122.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React122.createElement(MinimiseInset, null), !userName && /* @__PURE__ */ React122.createElement(
       StyledMenuTile.ItemButton,
@@ -25969,6 +25993,19 @@ var TileMenuContent = ({
     },
     isAudioEnabled ? /* @__PURE__ */ React122.createElement(MicOnIcon4, { height: 20, width: 20 }) : /* @__PURE__ */ React122.createElement(MicOffIcon5, { height: 20, width: 20 }),
     /* @__PURE__ */ React122.createElement("span", null, isAudioEnabled ? "Mute Audio" : "Request to Unmute Audio")
+  ) : null, canChangeRole ? /* @__PURE__ */ React122.createElement(
+    StyledMenuTile.ItemButton,
+    {
+      className: dragClassName,
+      css: spacingCSS,
+      onClick: () => {
+        openRoleChangeModal();
+        closeSheetOnClick();
+      },
+      "data-testid": "change_role_btn"
+    },
+    /* @__PURE__ */ React122.createElement(PersonSettingsIcon2, { height: 20, width: 20 }),
+    /* @__PURE__ */ React122.createElement("span", null, "Switch Role")
   ) : null, audioTrackID ? /* @__PURE__ */ React122.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: { ...spacingCSS, mb: "$0" } }, /* @__PURE__ */ React122.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React122.createElement(SpeakerIcon3, { height: 20, width: 20 }), /* @__PURE__ */ React122.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React122.createElement(
     Slider,
     {
@@ -26017,24 +26054,26 @@ var TileMenu = ({
 }) => {
   const [open, setOpen] = useState53(false);
   const { theme: theme2 } = useTheme();
-  const localPeerID = useHMSStore67(selectLocalPeerID11);
+  const localPeerID = useHMSStore68(selectLocalPeerID11);
   const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore67(selectPermissions19) || {};
+  const { removeOthers } = useHMSStore68(selectPermissions19) || {};
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
   const showSpotlight = enableSpotlightingPeer;
-  const isPrimaryVideoTrack = useHMSStore67(selectVideoTrackByPeerID2(peerID))?.id === videoTrackID;
+  const isPrimaryVideoTrack = useHMSStore68(selectVideoTrackByPeerID2(peerID))?.id === videoTrackID;
   const showPinAction = !!(audioTrackID || videoTrackID && isPrimaryVideoTrack);
-  const track = useHMSStore67(selectTrackByID3(videoTrackID));
+  const track = useHMSStore68(selectTrackByID3(videoTrackID));
   const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
-  const isMobile = useMedia20(config.media.md);
-  const peer = useHMSStore67(selectPeerByID2(peerID));
+  const isMobile = useMedia21(config.media.md);
+  const peer = useHMSStore68(selectPeerByID2(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState53(false);
+  const [showRoleChangeModal, setShowRoleChangeModal] = useState53(false);
   useDropdownList({ open, name: "TileMenu" });
   const dragClassName = getDragClassName();
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
     return null;
   }
   const openNameChangeModal = () => setShowNameChangeModal(true);
+  const openRoleChangeModal = () => setShowRoleChangeModal(true);
   const props = {
     isLocal,
     isScreenshare,
@@ -26045,7 +26084,8 @@ var TileMenu = ({
     showSpotlight,
     showPinAction,
     canMinimise,
-    openNameChangeModal
+    openNameChangeModal,
+    openRoleChangeModal
   };
   return /* @__PURE__ */ React123.createElement(React123.Fragment, null, /* @__PURE__ */ React123.createElement(StyledMenuTile.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React123.createElement(
     StyledMenuTile.Trigger,
@@ -26071,8 +26111,8 @@ var TileMenu = ({
       }
     },
     /* @__PURE__ */ React123.createElement(Box, null, /* @__PURE__ */ React123.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer?.name, isLocal ? ` (You)` : null), peer?.roleName ? /* @__PURE__ */ React123.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
-    /* @__PURE__ */ React123.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React123.createElement(CrossIcon22, null))
-  ), /* @__PURE__ */ React123.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React123.createElement(TileMenuContent, { ...props, closeSheetOnClick: () => setOpen(false) })))) : /* @__PURE__ */ React123.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React123.createElement(TileMenuContent, { ...props }))), showNameChangeModal && /* @__PURE__ */ React123.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
+    /* @__PURE__ */ React123.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React123.createElement(CrossIcon23, null))
+  ), /* @__PURE__ */ React123.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React123.createElement(TileMenuContent, { ...props, closeSheetOnClick: () => setOpen(false) })))) : /* @__PURE__ */ React123.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React123.createElement(TileMenuContent, { ...props }))), showNameChangeModal && /* @__PURE__ */ React123.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }), showRoleChangeModal && /* @__PURE__ */ React123.createElement(RoleChangeModal, { peerId: peerID, onOpenChange: setShowRoleChangeModal }));
 };
 var TileMenu_default = TileMenu;
 
@@ -26104,9 +26144,9 @@ var getVideoTileLabel = ({ peerName, isLocal, track }) => {
 
 // src/Prebuilt/components/VideoTile.tsx
 var PeerMetadata = ({ peerId, size }) => {
-  const metaData = useHMSStore68(selectPeerMetadata4(peerId));
+  const metaData = useHMSStore69(selectPeerMetadata4(peerId));
   const isBRB = metaData?.isBRBOn || false;
-  const isHandRaised = useHMSStore68(selectHasPeerHandRaised3(peerId));
+  const isHandRaised = useHMSStore69(selectHasPeerHandRaised3(peerId));
   return /* @__PURE__ */ React124.createElement(React124.Fragment, null, isHandRaised ? /* @__PURE__ */ React124.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React124.createElement(HandIcon5, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React124.createElement(StyledVideoTile.AttributeBox, { size, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React124.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
 };
 var Tile = ({
@@ -26126,14 +26166,14 @@ var Tile = ({
   hideMetadataOnTile = false
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID3(trackId) : selectVideoTrackByPeerID3(peerId);
-  const track = useHMSStore68(trackSelector);
-  const peerName = useHMSStore68(selectPeerNameByID4(peerId));
-  const audioTrack = useHMSStore68(selectAudioTrackByPeerID2(peerId));
-  const localPeerID = useHMSStore68(selectLocalPeerID12);
+  const track = useHMSStore69(trackSelector);
+  const peerName = useHMSStore69(selectPeerNameByID4(peerId));
+  const audioTrack = useHMSStore69(selectAudioTrackByPeerID2(peerId));
+  const localPeerID = useHMSStore69(selectLocalPeerID12);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isAudioMuted = !useHMSStore68(selectIsPeerAudioEnabled2(peerId));
+  const isAudioMuted = !useHMSStore69(selectIsPeerAudioEnabled2(peerId));
   const isVideoMuted = !track?.enabled;
   const [isMouseHovered, setIsMouseHovered] = useState54(false);
   const isVideoDegraded = track?.degraded;
@@ -26222,8 +26262,8 @@ var VideoTile_default = VideoTile;
 
 // src/Prebuilt/components/VirtualBackground/VBPicker.tsx
 init_define_process_env();
-import React127, { useEffect as useEffect32, useState as useState55 } from "react";
-import { useMedia as useMedia21 } from "react-use";
+import React127, { useEffect as useEffect33, useState as useState55 } from "react";
+import { useMedia as useMedia22 } from "react-use";
 import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes3 } from "@100mslive/hms-virtual-background";
 import {
   HMSRoomState as HMSRoomState4,
@@ -26234,9 +26274,9 @@ import {
   selectRoomState as selectRoomState4,
   selectVideoTrackByID as selectVideoTrackByID4,
   useHMSActions as useHMSActions43,
-  useHMSStore as useHMSStore69
+  useHMSStore as useHMSStore70
 } from "@100mslive/react-sdk";
-import { BlurPersonHighIcon, CrossCircleIcon as CrossCircleIcon3, CrossIcon as CrossIcon23 } from "@100mslive/react-icons";
+import { BlurPersonHighIcon, CrossCircleIcon as CrossCircleIcon3, CrossIcon as CrossIcon24 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/VirtualBackground/VBCollection.tsx
 init_define_process_env();
@@ -26414,25 +26454,25 @@ var iconDims = { height: "40px", width: "40px" };
 var VBPicker = ({ backgroundMedia = [] }) => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions43();
-  const localPeer = useHMSStore69(selectLocalPeer6);
-  const role = useHMSStore69(oi);
-  const isVideoOn = useHMSStore69(selectIsLocalVideoEnabled6);
+  const localPeer = useHMSStore70(selectLocalPeer6);
+  const role = useHMSStore70(oi);
+  const isVideoOn = useHMSStore70(selectIsLocalVideoEnabled6);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID4(localPeer?.videoTrack);
-  const track = useHMSStore69(trackSelector);
+  const track = useHMSStore70(trackSelector);
   const [blurAmount, setBlurAmount] = useState55(VBHandler.getBlurAmount() || 0.5);
-  const roomState = useHMSStore69(selectRoomState4);
-  const isLargeRoom = useHMSStore69(selectIsLargeRoom3);
-  const isEffectsEnabled = useHMSStore69(Yh);
-  const effectsKey = useHMSStore69(Xh);
-  const isMobile = useMedia21(config.media.md);
+  const roomState = useHMSStore70(selectRoomState4);
+  const isLargeRoom = useHMSStore70(selectIsLargeRoom3);
+  const isEffectsEnabled = useHMSStore70(Yh);
+  const effectsKey = useHMSStore70(Xh);
+  const isMobile = useMedia22(config.media.md);
   const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
-  const isPluginAdded = useHMSStore69(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ""));
-  const background = useHMSStore69(mm(APP_DATA.background));
+  const isPluginAdded = useHMSStore70(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ""));
+  const background = useHMSStore70(mm(APP_DATA.background));
   const mediaList = backgroundMedia.length ? backgroundMedia.map((media) => media.url || "") : defaultMedia2;
   const inPreview = roomState === HMSRoomState4.Preview;
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
-  useEffect32(() => {
+  useEffect33(() => {
     if (!track?.id) {
       return;
     }
@@ -26478,19 +26518,20 @@ var VBPicker = ({ backgroundMedia = [] }) => {
     blurAmount,
     setLoadingEffects
   ]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!isVideoOn) {
       toggleVB();
     }
     return () => setLoadingEffects(false);
   }, [isVideoOn, setLoadingEffects, toggleVB]);
+  useSidepaneResetOnLayoutUpdate("virtual_background", SIDE_PANE_OPTIONS.VB);
   return /* @__PURE__ */ React127.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React127.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React127.createElement(Text, { variant: "h6", css: { color: "$on_surface_high", display: "flex", alignItems: "center" } }, "Virtual Background ", isMobile && loadingEffects ? /* @__PURE__ */ React127.createElement(Loading, { size: 18, style: { marginLeft: "0.5rem" } }) : ""), /* @__PURE__ */ React127.createElement(
     Box,
     {
       css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
       onClick: toggleVB
     },
-    /* @__PURE__ */ React127.createElement(CrossIcon23, null)
+    /* @__PURE__ */ React127.createElement(CrossIcon24, null)
   )), showVideoTile ? /* @__PURE__ */ React127.createElement(
     Video,
     {
@@ -26669,22 +26710,16 @@ var SidePane = ({
   tileProps,
   hideControls = false
 }) => {
-  const isMobile = useMedia22(config.media.md);
-  const sidepane = useHMSStore70(selectAppData7(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore70(selectAppData7(APP_DATA.activeScreensharePeerId));
-  const trackId = useHMSStore70(selectVideoTrackByPeerID4(activeScreensharePeerId))?.id;
+  const isMobile = useMedia23(config.media.md);
+  const sidepane = useHMSStore71(selectAppData8(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore71(selectAppData8(APP_DATA.activeScreensharePeerId));
+  const trackId = useHMSStore71(selectVideoTrackByPeerID4(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const isMobileHLSStream = useMobileHLSStream();
   const backgroundMedia = preview_elements?.virtual_background?.background_media?.length ? preview_elements?.virtual_background?.background_media : elements?.virtual_background?.background_media || [];
-  const resetSidePane = useSidepaneReset();
-  useEffect33(() => {
-    return () => {
-      resetSidePane();
-    };
-  }, [resetSidePane]);
   const tileLayout = {
     hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
     roundedVideoTile: tileProps?.rounded_video_tile,
@@ -26716,7 +26751,13 @@ var SidePane = ({
   )).with(SIDE_PANE_OPTIONS.VB, () => /* @__PURE__ */ React128.createElement(Wrapper3, { css: { p: "$10 $6 $10 $10" }, ...commonProps }, /* @__PURE__ */ React128.createElement(VBPicker, { backgroundMedia }))).with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => /* @__PURE__ */ React128.createElement(Wrapper3, { ...commonProps, overlayChat: mwebStreamingChat }, /* @__PURE__ */ React128.createElement(SidePaneTabs, { active: sidepane, hideTab: isMobileHLSStream || isLandscapeHLSStream }))).with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => /* @__PURE__ */ React128.createElement(Wrapper3, { ...commonProps }, /* @__PURE__ */ React128.createElement(RoomDetailsPane, null))).otherwise(() => {
     return null;
   });
-  if (!trackId && !SidepaneComponent) {
+  const resetSidePane = useSidepaneReset();
+  useEffect34(() => {
+    return () => {
+      resetSidePane();
+    };
+  }, [resetSidePane]);
+  if (!SidepaneComponent && !trackId) {
     return null;
   }
   return /* @__PURE__ */ React128.createElement(
@@ -26794,7 +26835,7 @@ var FullPageProgress_default = FullPageProgress;
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 init_define_process_env();
 import React131 from "react";
-import { useMedia as useMedia23 } from "react-use";
+import { useMedia as useMedia24 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
 import { useRecordingStreaming as useRecordingStreaming10 } from "@100mslive/react-sdk";
 import { GoLiveIcon } from "@100mslive/react-icons";
@@ -26810,7 +26851,7 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const isMobile = useMedia23(config.media.md);
+  const isMobile = useMedia24(config.media.md);
   const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming10();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
@@ -26869,9 +26910,9 @@ var getParticipantChipContent = (peerCount = 0) => {
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? "" : "s"} in the session`;
 };
 var useLocalTileAspectRatio = () => {
-  const localPeer = useHMSStore71(selectLocalPeer7);
-  const videoTrack = useHMSStore71(selectVideoTrackByID5(localPeer?.videoTrack));
-  const isMobile = useMedia24(config.media.md);
+  const localPeer = useHMSStore72(selectLocalPeer7);
+  const videoTrack = useHMSStore72(selectVideoTrackByID5(localPeer?.videoTrack));
+  const isMobile = useMedia25(config.media.md);
   let aspectRatio = 0;
   if (videoTrack?.width && videoTrack?.height) {
     aspectRatio = videoTrack.width / videoTrack.height;
@@ -26896,7 +26937,7 @@ var PreviewJoin = ({
   const [previewError, setPreviewError] = useState56(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants2();
-  const loadingEffects = useHMSStore71(selectAppData8(APP_DATA.loadingEffects));
+  const loadingEffects = useHMSStore72(selectAppData9(APP_DATA.loadingEffects));
   const { enableJoin, preview, join } = usePreviewJoin({
     name,
     token: authToken,
@@ -26914,7 +26955,7 @@ var PreviewJoin = ({
     },
     asRole
   });
-  const roomState = useHMSStore71(selectRoomState5);
+  const roomState = useHMSStore72(selectRoomState5);
   const savePreferenceAndJoin = useCallback32(() => {
     setPreviewPreference({
       name
@@ -26924,7 +26965,7 @@ var PreviewJoin = ({
   const { elements = {} } = useRoomLayoutPreviewScreen();
   const { preview_header: previewHeader = {}, virtual_background } = elements || {};
   const aspectRatio = useLocalTileAspectRatio();
-  useEffect34(() => {
+  useEffect35(() => {
     if (authToken) {
       if (skipPreview) {
         savePreferenceAndJoin();
@@ -26933,7 +26974,7 @@ var PreviewJoin = ({
       }
     }
   }, [authToken, skipPreview]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (initialName) {
       setName(initialName);
     }
@@ -26980,12 +27021,12 @@ var Container4 = styled("div", {
   px: "$10"
 });
 var PreviewTile = ({ name, error }) => {
-  const localPeer = useHMSStore71(selectLocalPeer7);
+  const localPeer = useHMSStore72(selectLocalPeer7);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle3();
-  const isVideoOn = useHMSStore71(selectIsLocalVideoEnabled7);
+  const isVideoOn = useHMSStore72(selectIsLocalVideoEnabled7);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID5(localPeer?.videoTrack);
-  const track = useHMSStore71(trackSelector);
+  const track = useHMSStore72(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
   const aspectRatio = useLocalTileAspectRatio();
   const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure4();
@@ -27026,7 +27067,7 @@ var PreviewTile = ({ name, error }) => {
   );
 };
 var PreviewControls = ({ hideSettings, vbEnabled }) => {
-  const isMobile = useMedia24(config.media.md);
+  const isMobile = useMedia25(config.media.md);
   return /* @__PURE__ */ React132.createElement(
     Flex,
     {
@@ -27049,7 +27090,7 @@ var PreviewJoin_default = PreviewJoin;
 // src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
 init_define_process_env();
 import React133 from "react";
-import { useMedia as useMedia25 } from "react-use";
+import { useMedia as useMedia26 } from "react-use";
 var RequestPrompt = ({
   open = true,
   onOpenChange,
@@ -27059,7 +27100,7 @@ var RequestPrompt = ({
   onAction,
   disableActions = false
 }) => {
-  const isMobile = useMedia25(config.media.md);
+  const isMobile = useMedia26(config.media.md);
   if (isMobile) {
     return /* @__PURE__ */ React133.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React133.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React133.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React133.createElement(RequestActions, { actionText, onAction, disabled: disableActions })));
   }
@@ -27075,14 +27116,14 @@ var RequestActions = ({
 var RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions44();
   const { updateMetaData } = useMyMetadata();
-  const isPreview = useHMSStore72(selectIsInPreview);
-  const currentRole = useHMSStore72(selectLocalPeerRoleName4);
-  const roleChangeRequest = useHMSStore72(selectRoleChangeRequest);
-  const name = useHMSStore72(selectLocalPeerName4);
+  const isPreview = useHMSStore73(selectIsInPreview);
+  const currentRole = useHMSStore73(selectLocalPeerRoleName4);
+  const roleChangeRequest = useHMSStore73(selectRoleChangeRequest);
+  const name = useHMSStore73(selectLocalPeerName4);
   const { sendEvent } = useCustomEvent3({ type: ROLE_CHANGE_DECLINED });
   const { elements = {} } = useRoomLayoutPreviewScreen();
   const { virtual_background } = elements || {};
-  useEffect35(() => {
+  useEffect36(() => {
     if (!roleChangeRequest?.role) {
       return;
     }
@@ -27145,40 +27186,40 @@ var RoleChangeRequestModal = () => {
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
 init_define_process_env();
-import React153, { Suspense, useEffect as useEffect49 } from "react";
+import React153, { Suspense, useEffect as useEffect50 } from "react";
 import { match as match12 } from "ts-pattern";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom9, selectLocalPeerRoleName as selectLocalPeerRoleName6, useHMSActions as useHMSActions46, useHMSStore as useHMSStore84 } from "@100mslive/react-sdk";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom9, selectLocalPeerRoleName as selectLocalPeerRoleName6, useHMSActions as useHMSActions46, useHMSStore as useHMSStore85 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
 init_define_process_env();
-import React148, { useEffect as useEffect44, useMemo as useMemo19, useState as useState64 } from "react";
+import React148, { useEffect as useEffect45, useMemo as useMemo19, useState as useState64 } from "react";
 import {
   selectLocalPeerID as selectLocalPeerID14,
   selectLocalPeerRoleName as selectLocalPeerRoleName5,
   selectPeers as selectPeers3,
   selectPeerScreenSharing as selectPeerScreenSharing2,
   selectWhiteboard as selectWhiteboard2,
-  useHMSStore as useHMSStore80,
+  useHMSStore as useHMSStore81,
   useHMSVanillaStore as useHMSVanillaStore12
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 init_define_process_env();
-import React139, { useEffect as useEffect39, useMemo as useMemo15, useState as useState58 } from "react";
-import { useMedia as useMedia28 } from "react-use";
-import { selectLocalPeer as selectLocalPeer9, useHMSStore as useHMSStore74 } from "@100mslive/react-sdk";
+import React139, { useEffect as useEffect40, useMemo as useMemo15, useState as useState58 } from "react";
+import { useMedia as useMedia29 } from "react-use";
+import { selectLocalPeer as selectLocalPeer9, useHMSStore as useHMSStore75 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
 init_define_process_env();
-import React136, { useEffect as useEffect36, useRef as useRef24 } from "react";
+import React136, { useEffect as useEffect37, useRef as useRef24 } from "react";
 import Draggable from "react-draggable";
-import { useMedia as useMedia26 } from "react-use";
+import { useMedia as useMedia27 } from "react-use";
 import {
   selectIsAllowedToPublish as selectIsAllowedToPublish2,
   selectLocalPeer as selectLocalPeer8,
   selectPeerByID as selectPeerByID3,
   selectVideoTrackByID as selectVideoTrackByID6,
-  useHMSStore as useHMSStore73
+  useHMSStore as useHMSStore74
 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
@@ -27216,13 +27257,13 @@ var insetMaxWidthPx = 240;
 var defaultMobileAspectRatio = 9 / 16;
 var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = ({ peerId }) => {
-  const isMobile = useMedia26(config.media.md);
-  const isLandscape = useMedia26(config.media.ls);
+  const isMobile = useMedia27(config.media.md);
+  const isLandscape = useMedia27(config.media.ls);
   const selector = peerId ? selectPeerByID3(peerId) : selectLocalPeer8;
-  const peer = useHMSStore73(selector);
+  const peer = useHMSStore74(selector);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore73(selectVideoTrackByID6(peer?.videoTrack));
-  const isAllowedToPublish = useHMSStore73(selectIsAllowedToPublish2);
+  const videoTrack = useHMSStore74(selectVideoTrackByID6(peer?.videoTrack));
+  const isAllowedToPublish = useHMSStore74(selectIsAllowedToPublish2);
   const videoTileProps = useVideoTileContext();
   let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
   if (videoTrack?.width && videoTrack?.height && !isMobile) {
@@ -27235,7 +27276,7 @@ var InsetTile = ({ peerId }) => {
     height = width / aspectRatio;
   }
   const nodeRef = useRef24(null);
-  useEffect36(() => {
+  useEffect37(() => {
     const node = nodeRef.current;
     if (!node || !window.ResizeObserver) {
       return;
@@ -27296,7 +27337,7 @@ var InsetTile = ({ peerId }) => {
 
 // src/Prebuilt/components/Pagination.tsx
 init_define_process_env();
-import React137, { useEffect as useEffect37 } from "react";
+import React137, { useEffect as useEffect38 } from "react";
 import { ChevronLeftIcon as ChevronLeftIcon7, ChevronRightIcon as ChevronRightIcon4 } from "@100mslive/react-icons";
 var Pagination = ({
   page,
@@ -27313,7 +27354,7 @@ var Pagination = ({
     e.stopPropagation();
     onPageChange(Math.max(page - 1, 0));
   };
-  useEffect37(() => {
+  useEffect38(() => {
     if (page >= numPages) {
       onPageChange(Math.max(0, numPages - 1));
     }
@@ -27377,8 +27418,8 @@ var Grid = React138.forwardRef(
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
 init_define_process_env();
-import { useEffect as useEffect38, useMemo as useMemo14, useState as useState57 } from "react";
-import { useMeasure as useMeasure5, useMedia as useMedia27 } from "react-use";
+import { useEffect as useEffect39, useMemo as useMemo14, useState as useState57 } from "react";
+import { useMeasure as useMeasure5, useMedia as useMedia28 } from "react-use";
 import {
   getPeersWithTiles,
   selectTracksMap as selectTracksMap4,
@@ -27414,9 +27455,9 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore11();
   const [ref, { width, height }] = useMeasure5();
-  const isMobile = useMedia27(config.media.lg);
+  const isMobile = useMedia28(config.media.lg);
   const [pagesWithTiles, setPagesWithTiles] = useState57([]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (width === 0 || height === 0) {
       return;
     }
@@ -27482,8 +27523,8 @@ var useTileLayout = ({
 
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
-  const localPeer = useHMSStore74(selectLocalPeer9);
-  const isMobile = useMedia28(config.media.md);
+  const localPeer = useHMSStore75(selectLocalPeer9);
+  const isMobile = useMedia29(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
@@ -27507,7 +27548,7 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
   });
   const [page, setPage] = useState58(0);
   const pageSize = pagesWithTiles[0]?.length || 0;
-  useEffect39(() => {
+  useEffect40(() => {
     if (pageSize > 0) {
       onPageSize?.(pageSize);
     }
@@ -27527,15 +27568,15 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
 init_define_process_env();
-import React142, { useEffect as useEffect41, useState as useState60 } from "react";
-import { useMedia as useMedia30 } from "react-use";
-import { selectLocalPeer as selectLocalPeer10, useHMSStore as useHMSStore76 } from "@100mslive/react-sdk";
+import React142, { useEffect as useEffect42, useState as useState60 } from "react";
+import { useMedia as useMedia31 } from "react-use";
+import { selectLocalPeer as selectLocalPeer10, useHMSStore as useHMSStore77 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
 init_define_process_env();
-import React141, { useEffect as useEffect40, useRef as useRef25, useState as useState59 } from "react";
-import { useMedia as useMedia29 } from "react-use";
-import { selectAppData as selectAppData9, selectSessionStore as selectSessionStore11, selectTrackByID as selectTrackByID4, useHMSStore as useHMSStore75 } from "@100mslive/react-sdk";
+import React141, { useEffect as useEffect41, useRef as useRef25, useState as useState59 } from "react";
+import { useMedia as useMedia30 } from "react-use";
+import { selectAppData as selectAppData10, selectSessionStore as selectSessionStore11, selectTrackByID as selectTrackByID4, useHMSStore as useHMSStore76 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
 init_define_process_env();
@@ -27618,13 +27659,13 @@ var ProminenceLayout = {
 
 // src/Prebuilt/components/SecondaryTiles.tsx
 var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }) => {
-  const isMobile = useMedia29(config.media.md);
+  const isMobile = useMedia30(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const [page, setPage] = useState59(0);
-  const pinnedTrackId = useHMSStore75(selectAppData9(APP_DATA.pinnedTrackId));
-  const spotlightPeerId = useHMSStore75(selectSessionStore11("spotlight" /* SPOTLIGHT */));
-  const activeScreensharePeerId = useHMSStore75(selectAppData9(APP_DATA.activeScreensharePeerId));
-  const pinnedPeer = useHMSStore75(selectTrackByID4(pinnedTrackId))?.peerId;
+  const pinnedTrackId = useHMSStore76(selectAppData10(APP_DATA.pinnedTrackId));
+  const spotlightPeerId = useHMSStore76(selectSessionStore11("spotlight" /* SPOTLIGHT */));
+  const activeScreensharePeerId = useHMSStore76(selectAppData10(APP_DATA.activeScreensharePeerId));
+  const pinnedPeer = useHMSStore76(selectTrackByID4(pinnedTrackId))?.peerId;
   const pageChangedAfterPinning = useRef25(false);
   const pagesWithTiles = usePagesWithTiles({
     peers: spotlightPeerId || pinnedPeer ? [...peers].sort((p1, p2) => {
@@ -27646,17 +27687,17 @@ var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar
     maxTileCount
   });
   const pageSize = pagesWithTiles[0]?.length || 0;
-  useEffect40(() => {
+  useEffect41(() => {
     if (peers.length > 0 && !pagesWithTiles[page]?.length) {
       setPage(Math.max(0, page - 1));
     }
   }, [peers, page, pagesWithTiles]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (pageSize > 0) {
       onPageSize?.(pageSize);
     }
   }, [pageSize, onPageSize]);
-  useEffect40(() => {
+  useEffect41(() => {
     if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {
       setPage(0);
       pageChangedAfterPinning.current = true;
@@ -27722,9 +27763,9 @@ function RoleProminence({
   edgeToEdge
 }) {
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore76(selectLocalPeer10);
+  const localPeer = useHMSStore77(selectLocalPeer10);
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
-  const isMobile = useMedia30(config.media.md);
+  const isMobile = useMedia31(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? 4 : maxTileCount;
   const pageList = usePagesWithTiles({
@@ -27737,7 +27778,7 @@ function RoleProminence({
   });
   const [page, setPage] = useState60(0);
   const pageSize = pagesWithTiles[0]?.length || 0;
-  useEffect41(() => {
+  useEffect42(() => {
     if (pageSize > 0) {
       onPageSize?.(pageSize);
     }
@@ -27765,28 +27806,28 @@ function RoleProminence({
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 init_define_process_env();
-import React146, { useEffect as useEffect42, useMemo as useMemo17, useState as useState63 } from "react";
-import { useMedia as useMedia32 } from "react-use";
-import { selectPeersScreenSharing, useHMSStore as useHMSStore78 } from "@100mslive/react-sdk";
+import React146, { useEffect as useEffect43, useMemo as useMemo17, useState as useState63 } from "react";
+import { useMedia as useMedia33 } from "react-use";
+import { selectPeersScreenSharing, useHMSStore as useHMSStore79 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.tsx
 init_define_process_env();
 import React145, { useRef as useRef26, useState as useState62 } from "react";
-import { useFullscreen as useFullscreen2, useMedia as useMedia31 } from "react-use";
+import { useFullscreen as useFullscreen2, useMedia as useMedia32 } from "react-use";
 import screenfull2 from "screenfull";
 import {
   selectLocalPeerID as selectLocalPeerID13,
   selectPeerByID as selectPeerByID4,
   selectScreenShareAudioByPeerID as selectScreenShareAudioByPeerID2,
   selectScreenShareByPeerID as selectScreenShareByPeerID2,
-  useHMSStore as useHMSStore77
+  useHMSStore as useHMSStore78
 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon3, ShrinkIcon as ShrinkIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/LayoutModeSelector.tsx
 init_define_process_env();
 import React143, { useCallback as useCallback33, useState as useState61 } from "react";
-import { CheckIcon as CheckIcon8, ChevronDownIcon as ChevronDownIcon9, ChevronUpIcon as ChevronUpIcon7 } from "@100mslive/react-icons";
+import { CheckIcon as CheckIcon7, ChevronDownIcon as ChevronDownIcon9, ChevronUpIcon as ChevronUpIcon7 } from "@100mslive/react-icons";
 var LayoutModeSelector = () => {
   const [open, setOpen] = useState61(false);
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
@@ -27881,7 +27922,7 @@ var LayoutModeSelector = () => {
           LayoutModeIconMapping[value]
         ),
         /* @__PURE__ */ React143.createElement(Text, { variant: "caption", css: { lineHeight: "$sm" } }, value),
-        value === layoutMode ? /* @__PURE__ */ React143.createElement(CheckIcon8, { width: 20, height: 20, style: { marginLeft: "auto" } }) : null
+        value === layoutMode ? /* @__PURE__ */ React143.createElement(CheckIcon7, { width: 20, height: 20, style: { marginLeft: "auto" } }) : null
       );
     })
   ));
@@ -27891,7 +27932,7 @@ var LayoutModeSelector = () => {
 init_define_process_env();
 import React144 from "react";
 import { useHMSActions as useHMSActions45 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon24, ShareScreenIcon as ShareScreenIcon5 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon25, ShareScreenIcon as ShareScreenIcon5 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
   const hmsActions = useHMSActions45();
   return /* @__PURE__ */ React144.createElement(
@@ -27918,7 +27959,7 @@ var ScreenshareDisplay = () => {
         },
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React144.createElement(CrossIcon24, { width: 18, height: 18 }),
+      /* @__PURE__ */ React144.createElement(CrossIcon25, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -27934,13 +27975,13 @@ var labelStyles = {
   flexShrink: 0
 };
 var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore77(selectLocalPeerID13) === peerId;
-  const track = useHMSStore77(selectScreenShareByPeerID2(peerId));
+  const isLocal = useHMSStore78(selectLocalPeerID13) === peerId;
+  const track = useHMSStore78(selectScreenShareByPeerID2(peerId));
   const { theme: theme2 } = useTheme();
-  const peer = useHMSStore77(selectPeerByID4(peerId));
+  const peer = useHMSStore78(selectPeerByID4(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState62(false);
-  const isMobile = useMedia31(config.media.md);
+  const isMobile = useMedia32(config.media.md);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const fullscreenRef = useRef26(null);
   const [fullscreen, setFullscreen] = useState62(false);
@@ -27948,7 +27989,7 @@ var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
     onClose: () => setFullscreen(false)
   });
   const isFullScreenSupported = screenfull2.isEnabled;
-  const audioTrack = useHMSStore77(selectScreenShareAudioByPeerID2(peer?.id));
+  const audioTrack = useHMSStore78(selectScreenShareAudioByPeerID2(peer?.id));
   if (isLocal && track?.displaySurface && !["browser", "window", "application"].includes(track.displaySurface)) {
     return /* @__PURE__ */ React145.createElement(ScreenshareDisplay, null);
   }
@@ -28026,12 +28067,12 @@ var ScreenshareTile_default = ScreenshareTile;
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
-  const peersSharing = useHMSStore78(selectPeersScreenSharing);
+  const peersSharing = useHMSStore79(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const [page, setPage] = useState63(0);
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
   const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia32(config.media.md);
+  const isMobile = useMedia33(config.media.md);
   const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
   const secondaryPeers = useMemo17(() => {
     if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -28042,7 +28083,7 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
     }
     return peers.filter((p) => p.id !== activeSharePeer?.id);
   }, [activeSharePeer, peers, isMobile, layoutMode]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (isMobile) {
       setLayoutMode(LayoutMode.GALLERY);
       return;
@@ -28055,7 +28096,7 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
       setLayoutMode(LayoutMode.GALLERY);
     };
   }, [isMobile]);
-  useEffect42(() => {
+  useEffect43(() => {
     setActiveScreenSharePeer(isMobile ? "" : activeSharePeer?.id);
     return () => {
       setActiveScreenSharePeer("");
@@ -28075,13 +28116,12 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
 
 // src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx
 init_define_process_env();
-import React147, { useEffect as useEffect43, useMemo as useMemo18 } from "react";
-import { useMedia as useMedia33 } from "react-use";
-import { Whiteboard } from "@100mslive/hms-whiteboard";
-import { selectPeerByCondition, selectWhiteboard, useHMSStore as useHMSStore79, useWhiteboard as useWhiteboard2 } from "@100mslive/react-sdk";
+import React147, { useEffect as useEffect44, useMemo as useMemo18 } from "react";
+import { useMedia as useMedia34 } from "react-use";
+import { selectPeerByCondition, selectWhiteboard, useHMSStore as useHMSStore80, useWhiteboard as useWhiteboard2 } from "@100mslive/react-sdk";
 var WhiteboardEmbed = () => {
-  const isMobile = useMedia33(config.media.md);
-  const { token, endpoint, zoomToContent } = useWhiteboard2(isMobile);
+  const isMobile = useMedia34(config.media.md);
+  const { iframeRef } = useWhiteboard2(isMobile);
   return /* @__PURE__ */ React147.createElement(
     Box,
     {
@@ -28095,14 +28135,28 @@ var WhiteboardEmbed = () => {
         }
       }
     },
-    /* @__PURE__ */ React147.createElement(Box, { css: { size: "100%" } }, /* @__PURE__ */ React147.createElement(Whiteboard, { token, endpoint: `https://${endpoint}`, zoomToContent }))
+    /* @__PURE__ */ React147.createElement(
+      "iframe",
+      {
+        title: "Whiteboard View",
+        ref: iframeRef,
+        style: {
+          width: "100%",
+          height: "100%",
+          border: 0,
+          borderRadius: "0.75rem"
+        },
+        allow: "autoplay; clipboard-write;",
+        referrerPolicy: "no-referrer"
+      }
+    )
   );
 };
 var WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
-  const whiteboard = useHMSStore79(selectWhiteboard);
-  const whiteboardOwner = useHMSStore79(selectPeerByCondition((peer) => peer.customerUserId === whiteboard?.owner));
+  const whiteboard = useHMSStore80(selectWhiteboard);
+  const whiteboardOwner = useHMSStore80(selectPeerByCondition((peer) => peer.customerUserId === whiteboard?.owner));
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const isMobile = useMedia33(config.media.md);
+  const isMobile = useMedia34(config.media.md);
   const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
   const secondaryPeers = useMemo18(() => {
     if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -28113,7 +28167,7 @@ var WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
     }
     return peers.filter((p) => p.id !== whiteboardOwner?.id);
   }, [whiteboardOwner, peers, isMobile, layoutMode]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (isMobile) {
       setLayoutMode(LayoutMode.GALLERY);
       return;
@@ -28243,12 +28297,12 @@ var GridLayout = ({
   edge_to_edge = false,
   hide_metadata_on_tile = false
 }) => {
-  const peerSharing = useHMSStore80(selectPeerScreenSharing2);
-  const whiteboard = useHMSStore80(selectWhiteboard2);
+  const peerSharing = useHMSStore81(selectPeerScreenSharing2);
+  const whiteboard = useHMSStore81(selectWhiteboard2);
   const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore80(selectPeers3);
-  const localPeerRole = useHMSStore80(selectLocalPeerRoleName5);
-  const localPeerID = useHMSStore80(selectLocalPeerID14);
+  const peers = useHMSStore81(selectPeers3);
+  const localPeerRole = useHMSStore81(selectLocalPeerRoleName5);
+  const localPeerID = useHMSStore81(selectLocalPeerID14);
   const [activeScreensharePeerId] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const isRoleProminence = prominentRoles.length && peers.some(
     (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
@@ -28289,7 +28343,7 @@ var GridLayout = ({
     hideMetadataOnTile: hide_metadata_on_tile,
     objectFit: video_object_fit
   };
-  useEffect44(() => {
+  useEffect45(() => {
     if (mainPage !== 0) {
       return;
     }
@@ -28346,20 +28400,20 @@ var GridLayout = ({
 
 // src/Prebuilt/layouts/EmbedView.jsx
 init_define_process_env();
-import React149, { useEffect as useEffect45, useMemo as useMemo20 } from "react";
-import { selectAppData as selectAppData10, selectPeers as selectPeers4, selectPeerScreenSharing as selectPeerScreenSharing3, useEmbedShare, useHMSStore as useHMSStore81 } from "@100mslive/react-sdk";
+import React149, { useEffect as useEffect46, useMemo as useMemo20 } from "react";
+import { selectAppData as selectAppData11, selectPeers as selectPeers4, selectPeerScreenSharing as selectPeerScreenSharing3, useEmbedShare, useHMSStore as useHMSStore82 } from "@100mslive/react-sdk";
 var EmbedView = () => {
   return /* @__PURE__ */ React149.createElement(EmbedScreenShareView, null, /* @__PURE__ */ React149.createElement(EmbedComponent, null));
 };
 var EmbedScreenShareView = ({ children }) => {
-  const peers = useHMSStore81(selectPeers4);
-  const peerPresenting = useHMSStore81(selectPeerScreenSharing3);
+  const peers = useHMSStore82(selectPeers4);
+  const peerPresenting = useHMSStore82(selectPeerScreenSharing3);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const smallTilePeers = useMemo20(() => {
     const smallTilePeers2 = peers.filter((peer) => peer.id !== peerPresenting?.id);
     return smallTilePeers2;
   }, [peers, peerPresenting]);
-  useEffect45(() => {
+  useEffect46(() => {
     setActiveScreenSharePeer(peerPresenting?.id);
     return () => {
       setActiveScreenSharePeer("");
@@ -28368,10 +28422,10 @@ var EmbedScreenShareView = ({ children }) => {
   return /* @__PURE__ */ React149.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React149.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React149.createElement(SecondaryTiles, { peers: smallTilePeers }));
 };
 var EmbedComponent = () => {
-  const embedConfig = useHMSStore81(selectAppData10(APP_DATA.embedConfig));
+  const embedConfig = useHMSStore82(selectAppData11(APP_DATA.embedConfig));
   const resetConfig = useResetEmbedConfig();
   const { iframeRef, startEmbedShare, isEmbedShareInProgress } = useEmbedShare(resetConfig);
-  useEffect45(() => {
+  useEffect46(() => {
     (async () => {
       if (embedConfig && !isEmbedShareInProgress) {
         try {
@@ -28419,18 +28473,18 @@ var EmbedComponent = () => {
 
 // src/Prebuilt/layouts/PDFView.jsx
 init_define_process_env();
-import React150, { useEffect as useEffect46 } from "react";
+import React150, { useEffect as useEffect47 } from "react";
 import { usePDFShare } from "@100mslive/react-sdk";
 var PDFView = () => {
   const pdfConfig = usePDFConfig();
   const resetConfig = useResetPDFConfig();
   const { iframeRef, startPDFShare, isPDFShareInProgress } = usePDFShare(resetConfig);
-  useEffect46(() => {
+  useEffect47(() => {
     return () => {
       resetConfig();
     };
   }, []);
-  useEffect46(() => {
+  useEffect47(() => {
     (async () => {
       try {
         if (!isPDFShareInProgress && pdfConfig) {
@@ -28529,9 +28583,9 @@ var WaitingView = React151.memo(() => {
 
 // src/Prebuilt/plugins/CaptionsViewer.tsx
 init_define_process_env();
-import React152, { useEffect as useEffect47, useState as useState65 } from "react";
-import { useMedia as useMedia34 } from "react-use";
-import { selectPeerNameByID as selectPeerNameByID5, useHMSStore as useHMSStore82, useTranscript } from "@100mslive/react-sdk";
+import React152, { useEffect as useEffect48, useState as useState65 } from "react";
+import { useMedia as useMedia35 } from "react-use";
+import { selectPeerNameByID as selectPeerNameByID5, useHMSStore as useHMSStore83, useTranscript } from "@100mslive/react-sdk";
 var SimpleQueue = class {
   constructor(capacity = 3, MAX_STORAGE_TIME = 5e3) {
     this.capacity = capacity;
@@ -28661,7 +28715,7 @@ var CaptionMaintainerQueue = class {
   }
 };
 var TranscriptView = ({ peer_id, data: data3 }) => {
-  const peerName = useHMSStore82(selectPeerNameByID5(peer_id)) || "Participant";
+  const peerName = useHMSStore83(selectPeerNameByID5(peer_id)) || "Participant";
   data3 = data3.trim();
   if (!data3)
     return null;
@@ -28679,13 +28733,13 @@ var TranscriptView = ({ peer_id, data: data3 }) => {
 };
 var CaptionsViewer = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const isMobile = useMedia34(config.media.md);
+  const isMobile = useMedia35(config.media.md);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const showCaptionAtTop = elements?.chat?.is_overlay && isChatOpen && isMobile;
   const [captionQueue] = useState65(new CaptionMaintainerQueue());
   const [currentData, setCurrentData] = useState65([]);
   const isCaptionEnabled = useIsCaptionEnabled();
-  useEffect47(() => {
+  useEffect48(() => {
     const timeInterval = setInterval(() => {
       if (!captionQueue) {
         return;
@@ -28739,12 +28793,12 @@ var CaptionsViewer = () => {
 
 // src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx
 init_define_process_env();
-import { useEffect as useEffect48 } from "react";
-import { selectPeerScreenSharing as selectPeerScreenSharing4, useHMSStore as useHMSStore83, useWhiteboard as useWhiteboard3 } from "@100mslive/react-sdk";
+import { useEffect as useEffect49 } from "react";
+import { selectPeerScreenSharing as selectPeerScreenSharing4, useHMSStore as useHMSStore84, useWhiteboard as useWhiteboard3 } from "@100mslive/react-sdk";
 var useCloseScreenshareWhiteboard = () => {
-  const peerSharing = useHMSStore83(selectPeerScreenSharing4);
+  const peerSharing = useHMSStore84(selectPeerScreenSharing4);
   const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard3();
-  useEffect48(() => {
+  useEffect49(() => {
     if (isWhiteboardOwner && peerSharing) {
       toggleWhiteboard?.();
     }
@@ -28752,14 +28806,14 @@ var useCloseScreenshareWhiteboard = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React153.lazy(() => import("./HLSView-5GXP76IN.js"));
+var HLSView = React153.lazy(() => import("./HLSView-KRJMDNAF.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
   hideControls = false
 }) => {
-  const localPeerRole = useHMSStore84(selectLocalPeerRoleName6);
-  const isConnected = useHMSStore84(selectIsConnectedToRoom9);
+  const localPeerRole = useHMSStore85(selectLocalPeerRoleName6);
+  const isConnected = useHMSStore85(selectIsConnectedToRoom9);
   const hmsActions = useHMSActions46();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
@@ -28767,7 +28821,7 @@ var VideoStreamingSection = ({
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
-  useEffect49(() => {
+  useEffect50(() => {
     if (!isConnected) {
       return;
     }
@@ -28840,17 +28894,17 @@ init_define_process_env();
 // src/Prebuilt/components/Header/Header.tsx
 init_define_process_env();
 import React156 from "react";
-import { useMedia as useMedia36 } from "react-use";
-import { HMSRoomState as HMSRoomState6, selectRoomState as selectRoomState6, useHMSStore as useHMSStore86 } from "@100mslive/react-sdk";
+import { useMedia as useMedia37 } from "react-use";
+import { HMSRoomState as HMSRoomState6, selectRoomState as selectRoomState6, useHMSStore as useHMSStore87 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
 init_define_process_env();
 import React154 from "react";
-import { useMedia as useMedia35 } from "react-use";
+import { useMedia as useMedia36 } from "react-use";
 import { ChevronRightIcon as ChevronRightIcon5 } from "@100mslive/react-icons";
 var RoomDetailsHeader = () => {
   const { title, description } = useRoomLayoutHeader();
-  const isMobile = useMedia35(config.media.md);
+  const isMobile = useMedia36(config.media.md);
   const clipLength = 30;
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -28877,13 +28931,13 @@ import {
   selectVideoTrackByID as selectVideoTrackByID7,
   useDevices as useDevices3,
   useHMSActions as useHMSActions47,
-  useHMSStore as useHMSStore85
+  useHMSStore as useHMSStore86
 } from "@100mslive/react-sdk";
 import {
   BluetoothIcon,
   CameraFlipIcon as CameraFlipIcon2,
-  CheckIcon as CheckIcon9,
-  CrossIcon as CrossIcon25,
+  CheckIcon as CheckIcon8,
+  CrossIcon as CrossIcon26,
   HeadphonesIcon,
   SpeakerIcon as SpeakerIcon4
 } from "@100mslive/react-icons";
@@ -28891,9 +28945,9 @@ var CamaraFlipActions = () => {
   const actions = useHMSActions47();
   const { allDevices } = useDevices3();
   const { videoInput } = allDevices;
-  const isVideoOn = useHMSStore85(selectIsLocalVideoEnabled8);
-  const videoTrackId = useHMSStore85(selectLocalVideoTrackID3);
-  const localVideoTrack = useHMSStore85(selectVideoTrackByID7(videoTrackId));
+  const isVideoOn = useHMSStore86(selectIsLocalVideoEnabled8);
+  const videoTrackId = useHMSStore86(selectLocalVideoTrackID3);
+  const localVideoTrack = useHMSStore86(selectVideoTrackByID7(videoTrackId));
   if (!videoInput || !videoInput?.length || !localVideoTrack?.facingMode) {
     return null;
   }
@@ -28968,7 +29022,7 @@ var AudioActions = () => {
   );
 };
 var AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
-  return /* @__PURE__ */ React155.createElement(Sheet.Root, null, /* @__PURE__ */ React155.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React155.createElement(Sheet.Content, null, /* @__PURE__ */ React155.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React155.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React155.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ React155.createElement(Sheet.Close, null, /* @__PURE__ */ React155.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React155.createElement(CrossIcon25, null))))), /* @__PURE__ */ React155.createElement(HorizontalDivider, null), /* @__PURE__ */ React155.createElement(
+  return /* @__PURE__ */ React155.createElement(Sheet.Root, null, /* @__PURE__ */ React155.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React155.createElement(Sheet.Content, null, /* @__PURE__ */ React155.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React155.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React155.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ React155.createElement(Sheet.Close, null, /* @__PURE__ */ React155.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React155.createElement(CrossIcon26, null))))), /* @__PURE__ */ React155.createElement(HorizontalDivider, null), /* @__PURE__ */ React155.createElement(
     Flex,
     {
       direction: "column",
@@ -29023,14 +29077,14 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React155.createElement(Re
       icon,
       label
     ),
-    checked && /* @__PURE__ */ React155.createElement(CheckIcon9, { width: 24, height: 24 })
+    checked && /* @__PURE__ */ React155.createElement(CheckIcon8, { width: 24, height: 24 })
   );
 };
 
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
-  const roomState = useHMSStore86(selectRoomState6);
-  const isMobile = useMedia36(config.media.md);
+  const roomState = useHMSStore87(selectRoomState6);
+  const isMobile = useMedia37(config.media.md);
   if (roomState !== HMSRoomState6.Connected) {
     return /* @__PURE__ */ React156.createElement(React156.Fragment, null);
   }
@@ -29051,12 +29105,12 @@ var Header2 = () => {
 
 // src/Prebuilt/components/PreviousRoleInMetadata.tsx
 init_define_process_env();
-import { useEffect as useEffect50 } from "react";
+import { useEffect as useEffect51 } from "react";
 import { selectLocalPeerRoleName as selectLocalPeerRoleName7, useHMSVanillaStore as useHMSVanillaStore13 } from "@100mslive/react-sdk";
 var PreviousRoleInMetadata = () => {
   const vanillaStore = useHMSVanillaStore13();
   const { updateMetaData } = useMyMetadata();
-  useEffect50(() => {
+  useEffect51(() => {
     let previousRole = vanillaStore.getState(selectLocalPeerRoleName7);
     const unsubscribe = vanillaStore.subscribe((currentRole) => {
       if (previousRole !== currentRole && currentRole) {
@@ -29074,11 +29128,11 @@ var ConferenceScreen = () => {
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore87(selectRoomState7);
-  const isConnectedToRoom = useHMSStore87(selectIsConnectedToRoom10);
+  const roomState = useHMSStore88(selectRoomState7);
+  const isConnectedToRoom = useHMSStore88(selectIsConnectedToRoom10);
   const hmsActions = useHMSActions48();
   const [hideControls, setHideControls] = useState66(false);
-  const dropdownList = useHMSStore87(selectAppData11(APP_DATA.dropdownList));
+  const dropdownList = useHMSStore88(selectAppData12(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef27(null);
   const footerRef = useRef27(null);
@@ -29095,7 +29149,7 @@ var ConferenceScreen = () => {
       setHideControls((value) => !value);
     }
   };
-  useEffect51(() => {
+  useEffect52(() => {
     let timeout;
     dropdownListRef.current = dropdownList || [];
     if (dropdownListRef.current && dropdownListRef.current.length === 0) {
@@ -29110,7 +29164,7 @@ var ConferenceScreen = () => {
       clearTimeout(timeout);
     };
   }, [dropdownList, hideControls, isMobileDevice]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState7.Connecting && !autoRoomJoined.current) {
       hmsActions.join({
         userName: userName || uuid3(),
@@ -29125,7 +29179,7 @@ var ConferenceScreen = () => {
       autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-  useEffect51(() => {
+  useEffect52(() => {
     onJoinFunc?.();
     return () => {
       PictureInPicture.stop().catch((error) => console.error("stopping pip", error.message));
@@ -29306,12 +29360,12 @@ var ErrorBoundary = class extends Component {
 
 // src/Prebuilt/components/init/Init.jsx
 init_define_process_env();
-import React159, { useEffect as useEffect53 } from "react";
+import React159, { useEffect as useEffect54 } from "react";
 
 // src/Prebuilt/services/FeatureFlags.jsx
 init_define_process_env();
-import { useEffect as useEffect52 } from "react";
-import { selectRoomID, useHMSStore as useHMSStore88 } from "@100mslive/react-sdk";
+import { useEffect as useEffect53 } from "react";
+import { selectRoomID, useHMSStore as useHMSStore89 } from "@100mslive/react-sdk";
 var FeatureFlags = class {
   static enableTranscription = define_process_env_default.REACT_APP_ENABLE_TRANSCRIPTION === "true";
   static enableStatsForNerds = define_process_env_default.REACT_APP_ENABLE_STATS_FOR_NERDS === "true";
@@ -29336,8 +29390,8 @@ var FeatureFlags = class {
   }
 };
 function FeatureFlagsInit() {
-  const roomId = useHMSStore88(selectRoomID);
-  useEffect52(() => {
+  const roomId = useHMSStore89(selectRoomID);
+  useEffect53(() => {
     if (roomId) {
       FeatureFlags.init(roomId);
     }
@@ -29348,10 +29402,10 @@ function FeatureFlagsInit() {
 // src/Prebuilt/components/init/Init.jsx
 var Init = () => {
   const { toggleTheme } = useTheme();
-  useEffect53(() => {
+  useEffect54(() => {
     window.toggleUiTheme = toggleTheme;
   }, [toggleTheme]);
-  useEffect53(() => {
+  useEffect54(() => {
     function resetHeight() {
       document.body.style.height = `${window.visualViewport?.height || window.innerHeight}px`;
     }
@@ -29366,9 +29420,9 @@ var Init = () => {
 
 // src/Prebuilt/components/Input/KeyboardInputManager.js
 init_define_process_env();
-import { useEffect as useEffect54 } from "react";
+import { useEffect as useEffect55 } from "react";
 import {
-  selectAppData as selectAppData12,
+  selectAppData as selectAppData13,
   selectIsLocalAudioEnabled as selectIsLocalAudioEnabled2,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled9,
   useHMSActions as useHMSActions49,
@@ -29391,12 +29445,12 @@ var KeyboardInputManager = class {
     await this.#actions.setLocalVideoEnabled(!enabled);
   };
   #hideSidepane = () => {
-    if (this.#store.getState(selectAppData12(APP_DATA.sidePane))) {
+    if (this.#store.getState(selectAppData13(APP_DATA.sidePane))) {
       this.#actions.setAppData(APP_DATA.sidePane, "");
     }
   };
   #toggleStatsForNerds = () => {
-    const uiSettings = this.#store.getState(selectAppData12(APP_DATA.uiSettings));
+    const uiSettings = this.#store.getState(selectAppData13(APP_DATA.uiSettings));
     const statsEnabled = uiSettings.showStatsOnTiles;
     this.#actions.setAppData(APP_DATA.uiSettings, {
       ...uiSettings,
@@ -29404,7 +29458,7 @@ var KeyboardInputManager = class {
     });
   };
   #toggleHlsStats = () => {
-    this.#actions.setAppData(APP_DATA.hlsStats, !this.#store.getState(selectAppData12(APP_DATA.hlsStats)));
+    this.#actions.setAppData(APP_DATA.hlsStats, !this.#store.getState(selectAppData13(APP_DATA.hlsStats)));
   };
   // eslint-disable-next-line complexity
   #keyDownHandler = async (e) => {
@@ -29451,7 +29505,7 @@ var KeyboardInputManager = class {
 var KeyboardHandler = () => {
   const store = useHMSVanillaStore14();
   const actions = useHMSActions49();
-  useEffect54(() => {
+  useEffect55(() => {
     const keyboardManager = new KeyboardInputManager(store, actions);
     keyboardManager.bindAllShortcuts();
     return keyboardManager.unbindAllShortcuts;
@@ -29466,10 +29520,10 @@ import { ExitIcon as ExitIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/AppStateContext.tsx
 init_define_process_env();
-import React160, { useContext as useContext4, useEffect as useEffect55 } from "react";
+import React160, { useContext as useContext4, useEffect as useEffect56 } from "react";
 import { usePreviousDistinct } from "react-use";
 import { match as match13, P as P4 } from "ts-pattern";
-import { HMSRoomState as HMSRoomState8, selectRoomState as selectRoomState8, useHMSStore as useHMSStore89 } from "@100mslive/react-sdk";
+import { HMSRoomState as HMSRoomState8, selectRoomState as selectRoomState8, useHMSStore as useHMSStore90 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/hooks/useRedirectToLeave.tsx
 init_define_process_env();
@@ -29506,7 +29560,7 @@ var useHMSAppStateContext = () => {
 var useAppStateManager = () => {
   const roomLayout = useRoomLayout();
   const [activeState, setActiveState] = React160.useState();
-  const roomState = useHMSStore89(selectRoomState8);
+  const roomState = useHMSStore90(selectRoomState8);
   const prevRoomState = usePreviousDistinct(roomState);
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
@@ -29514,7 +29568,7 @@ var useAppStateManager = () => {
   const rejoin = () => {
     setActiveState(isPreviewScreenEnabled ? "preview" /* PREVIEW */ : "meeting" /* MEETING */);
   };
-  useEffect55(() => {
+  useEffect56(() => {
     if (!roomLayout) {
       return;
     }
@@ -29586,15 +29640,15 @@ var LeaveScreen = () => {
 
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
 init_define_process_env();
-import React162, { useEffect as useEffect56, useState as useState67 } from "react";
-import { useMedia as useMedia37 } from "react-use";
+import React162, { useEffect as useEffect57, useState as useState67 } from "react";
+import { useMedia as useMedia38 } from "react-use";
 import { match as match14, P as P5 } from "ts-pattern";
 import { RefreshIcon } from "@100mslive/react-icons";
 var MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState67(false);
-  const isLandscape = useMedia37(config.media.ls);
+  const isLandscape = useMedia38(config.media.ls);
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  useEffect56(() => {
+  useEffect57(() => {
     if (!isMobileUserAgent) {
       setShowMwebLandscapePrompt(false);
       return;
@@ -29638,7 +29692,7 @@ init_define_process_env();
 
 // src/Prebuilt/components/Notifications/Notifications.tsx
 init_define_process_env();
-import React171, { useCallback as useCallback36, useEffect as useEffect66 } from "react";
+import React171, { useCallback as useCallback36, useEffect as useEffect67 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes10,
   HMSRoomState as HMSRoomState10,
@@ -29649,7 +29703,7 @@ import {
   useAwayNotifications as useAwayNotifications2,
   useCustomEvent as useCustomEvent4,
   useHMSNotifications as useHMSNotifications10,
-  useHMSStore as useHMSStore93,
+  useHMSStore as useHMSStore94,
   useHMSVanillaStore as useHMSVanillaStore16
 } from "@100mslive/react-sdk";
 import { GroupIcon as GroupIcon2 } from "@100mslive/react-icons";
@@ -29687,15 +29741,15 @@ function AutoplayBlockedModal() {
 
 // src/Prebuilt/components/Notifications/ChatNotifications.tsx
 init_define_process_env();
-import React164, { useEffect as useEffect57 } from "react";
+import React164, { useEffect as useEffect58 } from "react";
 import { v4 as uuid4 } from "uuid";
-import { selectLocalPeerID as selectLocalPeerID15, selectSessionStore as selectSessionStore12, useHMSStore as useHMSStore90 } from "@100mslive/react-sdk";
+import { selectLocalPeerID as selectLocalPeerID15, selectSessionStore as selectSessionStore12, useHMSStore as useHMSStore91 } from "@100mslive/react-sdk";
 import { ChatIcon as ChatIcon2, ChatUnreadIcon } from "@100mslive/react-icons";
 var NOTIFICATION_TIME_DIFFERENCE = 5e3;
 var ChatNotifications = () => {
-  const chatState = useHMSStore90(selectSessionStore12("chatState" /* CHAT_STATE */));
-  const localPeerId = useHMSStore90(selectLocalPeerID15);
-  useEffect57(() => {
+  const chatState = useHMSStore91(selectSessionStore12("chatState" /* CHAT_STATE */));
+  const localPeerId = useHMSStore91(selectLocalPeerID15);
+  useEffect58(() => {
     if (!chatState || chatState.updatedBy?.peerId === localPeerId) {
       return;
     }
@@ -29715,7 +29769,7 @@ var ChatNotifications = () => {
 
 // src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx
 init_define_process_env();
-import { useEffect as useEffect58 } from "react";
+import { useEffect as useEffect59 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes2,
   HMSRoomState as HMSRoomState9,
@@ -29723,7 +29777,7 @@ import {
   selectPeerByID as selectPeerByID6,
   selectRoomState as selectRoomState9,
   useHMSNotifications as useHMSNotifications2,
-  useHMSStore as useHMSStore92,
+  useHMSStore as useHMSStore93,
   useHMSVanillaStore as useHMSVanillaStore15
 } from "@100mslive/react-sdk";
 
@@ -29733,7 +29787,7 @@ init_define_process_env();
 // src/Prebuilt/components/Toast/ToastConfig.jsx
 init_define_process_env();
 import React165, { useCallback as useCallback35 } from "react";
-import { selectPeerByID as selectPeerByID5, useHMSActions as useHMSActions50, useHMSStore as useHMSStore91 } from "@100mslive/react-sdk";
+import { selectPeerByID as selectPeerByID5, useHMSActions as useHMSActions50, useHMSStore as useHMSStore92 } from "@100mslive/react-sdk";
 import {
   ChatUnreadIcon as ChatUnreadIcon2,
   ConnectivityIcon,
@@ -29754,7 +29808,7 @@ var HandRaiseAction = React165.forwardRef(({ id = "", isSingleHandRaise = true }
   const hmsActions = useHMSActions50();
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const peer = useHMSStore91(selectPeerByID5(id));
+  const peer = useHMSStore92(selectPeerByID5(id));
   const layout = useRoomLayout();
   const {
     bring_to_stage_label,
@@ -29951,11 +30005,11 @@ ToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));
 // src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx
 var HandRaisedNotifications = () => {
   const notification = useHMSNotifications2(HMSNotificationTypes2.HAND_RAISE_CHANGED);
-  const roomState = useHMSStore92(selectRoomState9);
+  const roomState = useHMSStore93(selectRoomState9);
   const vanillaStore = useHMSVanillaStore15();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
   const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
-  useEffect58(() => {
+  useEffect59(() => {
     if (!notification?.data) {
       return;
     }
@@ -29975,13 +30029,13 @@ var HandRaisedNotifications = () => {
 
 // src/Prebuilt/components/Notifications/InitErrorModal.tsx
 init_define_process_env();
-import React166, { useEffect as useEffect59, useState as useState68 } from "react";
+import React166, { useEffect as useEffect60, useState as useState68 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes3, useHMSNotifications as useHMSNotifications3 } from "@100mslive/react-sdk";
 var InitErrorModal = () => {
   const notification = useHMSNotifications3(HMSNotificationTypes3.ERROR);
   const [showModal, setShowModal] = useState68(false);
   const [info, setInfo] = useState68({ title: "Init Error", description: "" });
-  useEffect59(() => {
+  useEffect60(() => {
     const data3 = notification?.data;
     if (!data3 || data3.action !== "INIT") {
       return;
@@ -30006,7 +30060,7 @@ var InitErrorModal = () => {
 
 // src/Prebuilt/components/Notifications/PeerNotifications.tsx
 init_define_process_env();
-import { useEffect as useEffect60 } from "react";
+import { useEffect as useEffect61 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes4, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
 var notificationTypes = [HMSNotificationTypes4.PEER_JOINED, HMSNotificationTypes4.PEER_LEFT];
 var PeerNotifications = () => {
@@ -30014,7 +30068,7 @@ var PeerNotifications = () => {
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
   const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  useEffect60(() => {
+  useEffect61(() => {
     if (!notification?.data) {
       return;
     }
@@ -30043,8 +30097,8 @@ var PeerNotifications = () => {
 
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 init_define_process_env();
-import React167, { useEffect as useEffect61, useState as useState69 } from "react";
-import { useMedia as useMedia38 } from "react-use";
+import React167, { useEffect as useEffect62, useState as useState69 } from "react";
+import { useMedia as useMedia39 } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/images/android-perm-1.png
@@ -30058,8 +30112,8 @@ function PermissionErrorModal() {
   const notification = useHMSNotifications5(HMSNotificationTypes5.ERROR);
   const [deviceType, setDeviceType] = useState69("");
   const [isSystemError, setIsSystemError] = useState69(false);
-  const isMobile = useMedia38(config.media.md);
-  useEffect61(() => {
+  const isMobile = useMedia39(config.media.md);
+  useEffect62(() => {
     if (!notification || notification.data?.code !== 3001 && notification.data?.code !== 3011 || notification.data?.code === 3001 && notification.data?.message.includes("screen")) {
       return;
     }
@@ -30116,7 +30170,7 @@ function PermissionErrorModal() {
 
 // src/Prebuilt/components/Notifications/ReconnectNotifications.tsx
 init_define_process_env();
-import React168, { useEffect as useEffect62, useState as useState70 } from "react";
+import React168, { useEffect as useEffect63, useState as useState70 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes6, useHMSNotifications as useHMSNotifications6 } from "@100mslive/react-sdk";
 var notificationTypes2 = [
   HMSNotificationTypes6.RECONNECTED,
@@ -30127,7 +30181,7 @@ var notificationId = null;
 var ReconnectNotifications = () => {
   const notification = useHMSNotifications6(notificationTypes2);
   const [open, setOpen] = useState70(false);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!notification) {
       return;
     }
@@ -30165,7 +30219,7 @@ var ReconnectNotifications = () => {
 
 // src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx
 init_define_process_env();
-import React169, { useEffect as useEffect63, useState as useState71 } from "react";
+import React169, { useEffect as useEffect64, useState as useState71 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes7,
   useHMSActions as useHMSActions51,
@@ -30180,7 +30234,7 @@ var TrackBulkUnmuteModal = () => {
     HMSNotificationTypes7.ROOM_ENDED,
     HMSNotificationTypes7.REMOVED_FROM_ROOM
   ]);
-  useEffect63(() => {
+  useEffect64(() => {
     switch (notification?.type) {
       case HMSNotificationTypes7.REMOVED_FROM_ROOM:
       case HMSNotificationTypes7.ROOM_ENDED:
@@ -30219,7 +30273,7 @@ var TrackBulkUnmuteModal = () => {
 
 // src/Prebuilt/components/Notifications/TrackNotifications.tsx
 init_define_process_env();
-import { useEffect as useEffect64 } from "react";
+import { useEffect as useEffect65 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes8, useHMSNotifications as useHMSNotifications8 } from "@100mslive/react-sdk";
 var notificationTypes3 = [
   HMSNotificationTypes8.TRACK_ADDED,
@@ -30229,7 +30283,7 @@ var notificationTypes3 = [
 ];
 var TrackNotifications = () => {
   const notification = useHMSNotifications8(notificationTypes3);
-  useEffect64(() => {
+  useEffect65(() => {
     if (notification) {
       console.debug(`[${notification.type}]`, notification);
     }
@@ -30239,7 +30293,7 @@ var TrackNotifications = () => {
 
 // src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx
 init_define_process_env();
-import React170, { useEffect as useEffect65, useState as useState72 } from "react";
+import React170, { useEffect as useEffect66, useState as useState72 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes9,
   useHMSActions as useHMSActions52,
@@ -30254,7 +30308,7 @@ var TrackUnmuteModal = () => {
     HMSNotificationTypes9.REMOVED_FROM_ROOM
   ]);
   const [muteNotification, setMuteNotification] = useState72(null);
-  useEffect65(() => {
+  useEffect66(() => {
     switch (notification?.type) {
       case HMSNotificationTypes9.REMOVED_FROM_ROOM:
       case HMSNotificationTypes9.ROOM_ENDED:
@@ -30291,17 +30345,17 @@ var TrackUnmuteModal = () => {
 // src/Prebuilt/components/Notifications/Notifications.tsx
 var pollToastKey = {};
 function Notifications() {
-  const localPeerID = useHMSStore93(selectLocalPeerID16);
+  const localPeerID = useHMSStore94(selectLocalPeerID16);
   const notification = useHMSNotifications10();
   const subscribedNotifications = useSubscribedNotifications() || {};
-  const roomState = useHMSStore93(selectRoomState10);
+  const roomState = useHMSStore94(selectRoomState10);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const screenProps = useRoomLayoutConferencingScreen();
   const vanillaStore = useHMSVanillaStore16();
   const togglePollView = usePollViewToggle();
   const { showNotification } = useAwayNotifications2();
-  const amIScreenSharing = useHMSStore93(selectIsLocalScreenShared2);
+  const amIScreenSharing = useHMSStore94(selectIsLocalScreenShared2);
   const logoURL = useRoomLayout()?.logo?.url;
   const handleRoleChangeDenied = useCallback36((request) => {
     ToastManager.addToast({
@@ -30310,7 +30364,7 @@ function Notifications() {
     });
   }, []);
   useCustomEvent4({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
-  useEffect66(() => {
+  useEffect67(() => {
     if (!notification || isNotificationDisabled) {
       return;
     }
@@ -30455,8 +30509,8 @@ var PreviewScreen = () => {
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 init_define_process_env();
-import React174, { useEffect as useEffect67, useState as useState73 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom11, useHMSStore as useHMSStore94 } from "@100mslive/react-sdk";
+import React174, { useEffect as useEffect68, useState as useState73 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom11, useHMSStore as useHMSStore95 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
 init_define_process_env();
@@ -30479,9 +30533,9 @@ var Toast2 = ({ title, description, close = true, open, duration, onOpenChange,
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 var ToastContainer = () => {
-  const isConnected = useHMSStore94(selectIsConnectedToRoom11);
+  const isConnected = useHMSStore95(selectIsConnectedToRoom11);
   const [toasts, setToast] = useState73([]);
-  useEffect67(() => {
+  useEffect68(() => {
     ToastManager.addListener(setToast);
     return () => {
       ToastManager.removeListener(setToast);
@@ -30503,12 +30557,12 @@ var ToastContainer = () => {
 // src/Prebuilt/layouts/Sheet.tsx
 init_define_process_env();
 import React176 from "react";
-import { selectAppData as selectAppData13, useHMSStore as useHMSStore95 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData14, useHMSStore as useHMSStore96 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx
 init_define_process_env();
 import React175 from "react";
-import { CrossIcon as CrossIcon26 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon27 } from "@100mslive/react-icons";
 var RoomDetailsSheet = () => {
   const { title, description, details } = useRoomLayoutHeader();
   const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -30521,13 +30575,13 @@ var RoomDetailsSheet = () => {
       css: { w: "100%", borderBottom: "1px solid $border_bright", pb: "$4", mb: "$4", px: "$8" }
     },
     /* @__PURE__ */ React175.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Description"),
-    /* @__PURE__ */ React175.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React175.createElement(CrossIcon26, null))
+    /* @__PURE__ */ React175.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React175.createElement(CrossIcon27, null))
   ), /* @__PURE__ */ React175.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4", pb: "$8", px: "$8" } }, /* @__PURE__ */ React175.createElement(Logo, null), /* @__PURE__ */ React175.createElement(Box, null, /* @__PURE__ */ React175.createElement(Text, { variant: "sm", css: { c: "$on_secondary_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React175.createElement(RoomDetailsRow, { details }))), /* @__PURE__ */ React175.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", px: "$8" } }, description)));
 };
 
 // src/Prebuilt/layouts/Sheet.tsx
 var Sheet2 = () => {
-  const sheet = useHMSStore95(selectAppData13(APP_DATA.sheet));
+  const sheet = useHMSStore96(selectAppData14(APP_DATA.sheet));
   let ViewComponent;
   if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
     ViewComponent = /* @__PURE__ */ React176.createElement(RoomDetailsSheet, null);
@@ -30537,15 +30591,15 @@ var Sheet2 = () => {
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 init_define_process_env();
-import React177, { useCallback as useCallback37, useEffect as useEffect68, useMemo as useMemo21, useState as useState74 } from "react";
-import { useMedia as useMedia39 } from "react-use";
+import React177, { useCallback as useCallback37, useEffect as useEffect69, useMemo as useMemo21, useState as useState74 } from "react";
+import { useMedia as useMedia40 } from "react-use";
 import {
   selectIsLargeRoom as selectIsLargeRoom4,
   selectLocalPeerID as selectLocalPeerID17,
   selectPeerNameByID as selectPeerNameByID7,
   useCustomEvent as useCustomEvent5,
   useHMSActions as useHMSActions53,
-  useHMSStore as useHMSStore96,
+  useHMSStore as useHMSStore97,
   useHMSVanillaStore as useHMSVanillaStore17
 } from "@100mslive/react-sdk";
 var emojiCount = 1;
@@ -30572,12 +30626,12 @@ var getStartingPoints = (isMobile) => {
   return arr;
 };
 function FlyingEmoji() {
-  const localPeerId = useHMSStore96(selectLocalPeerID17);
+  const localPeerId = useHMSStore97(selectLocalPeerID17);
   const vanillaStore = useHMSVanillaStore17();
   const hmsActions = useHMSActions53();
   const [emojis, setEmojis] = useState74([]);
-  const isMobile = useMedia39(config.media.md);
-  const isLargeRoom = useHMSStore96(selectIsLargeRoom4);
+  const isMobile = useMedia40(config.media.md);
+  const isLargeRoom = useHMSStore97(selectIsLargeRoom4);
   const startingPoints = useMemo21(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback37(
     async ({ emojiId, senderId }) => {
@@ -30611,7 +30665,7 @@ function FlyingEmoji() {
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
-  useEffect68(() => {
+  useEffect69(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
   return /* @__PURE__ */ React177.createElement(
@@ -30690,20 +30744,20 @@ function RemoteStopScreenshare() {
 
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
 init_define_process_env();
-import { useCallback as useCallback39, useEffect as useEffect69, useRef as useRef28 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect70, useRef as useRef28 } from "react";
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom12,
   selectPermissions as selectPermissions20,
   useHMSActions as useHMSActions55,
-  useHMSStore as useHMSStore97,
+  useHMSStore as useHMSStore98,
   useRecordingStreaming as useRecordingStreaming12
 } from "@100mslive/react-sdk";
 var useAutoStartStreaming = () => {
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore97(selectPermissions20);
+  const permissions = useHMSStore98(selectPermissions20);
   const showStreamingUI = useShowStreamingUI();
   const hmsActions = useHMSActions55();
-  const isConnected = useHMSStore97(selectIsConnectedToRoom12);
+  const isConnected = useHMSStore98(selectIsConnectedToRoom12);
   const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming12();
   const streamStartedRef = useRef28(false);
   const startHLS = useCallback39(async () => {
@@ -30729,12 +30783,12 @@ var useAutoStartStreaming = () => {
     isHLSRecordingOn,
     isBrowserRecordingOn
   ]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!isHLSStarted && !isHLSRunning) {
       streamStartedRef.current = false;
     }
   }, [isHLSStarted, isHLSRunning]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!isConnected || streamStartedRef.current || !permissions?.hlsStreaming) {
       return;
     }
@@ -30758,7 +30812,7 @@ var HMSPrebuilt = React179.forwardRef(
   }, ref) => {
     const reactiveStore = useRef29();
     const [hydrated, setHydrated] = React179.useState(false);
-    useEffect70(() => {
+    useEffect71(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
       const hmsStore = hms.getStore();
@@ -30773,13 +30827,13 @@ var HMSPrebuilt = React179.forwardRef(
         hmsNotifications
       };
     }, []);
-    useEffect70(() => {
+    useEffect71(() => {
       if (!ref || !reactiveStore.current) {
         return;
       }
       ref.current = { ...reactiveStore.current };
     }, [ref]);
-    useEffect70(() => {
+    useEffect71(() => {
       return () => {
         VBHandler.reset();
         reactiveStore?.current?.hmsActions.leave();
@@ -30889,9 +30943,9 @@ var AppStates = ({ activeState }) => {
   return match15({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled }).with({ activeState: "preview" /* PREVIEW */, isPreviewScreenEnabled: true }, () => /* @__PURE__ */ React179.createElement(PreviewScreen, null)).with({ activeState: "leave" /* LEAVE */, isLeaveScreenEnabled: true }, () => /* @__PURE__ */ React179.createElement(LeaveScreen, null)).otherwise(() => /* @__PURE__ */ React179.createElement(ConferenceScreen, null));
 };
 var BackSwipe = () => {
-  const isConnectedToRoom = useHMSStore98(selectIsConnectedToRoom13);
+  const isConnectedToRoom = useHMSStore99(selectIsConnectedToRoom13);
   const hmsActions = useHMSActions56();
-  useEffect70(() => {
+  useEffect71(() => {
     const onRouteLeave = async () => {
       if (isConnectedToRoom) {
         await hmsActions.leave();
@@ -31062,4 +31116,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-WSDBUVSZ.js.map
+//# sourceMappingURL=chunk-AFSI3LBT.js.map