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

package/dist/{chunk-DO5NCPPI.js → chunk-HRUQKLGN.js}

@@ -106,7 +106,7 @@ var __async = (__this, __arguments, generator) => {
 var define_process_env_default;
 var init_define_process_env = __esm({
   "<define:process.env>"() {
-    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_98ac6855-afa6-481b-90cb-fed1fe1ef94c", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.21 npm/? node/v18.19.0 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.9.6-alpha.2", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_98ac6855-afa6-481b-90cb-fed1fe1ef94c", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.0/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.12.6-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.6", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.6", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.1.10909125", 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: "590", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240212.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.0/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_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:18899", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.2.6-alpha.2", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", GITHUB_RUN_ID: "7888657406", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "21fe3fa3f76f115ecedc9ffb68a5a43a7d760bef", 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: "5d104c59fdfaee46aa0c91b4ad095ec9aeaeb7f546bb7d8a6be4ff798e76d8d2", 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--1707837452211-0.743528143796671:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1707837452015-0.9406369317948942:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1707837430066-0.17901544159115135:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1707837429882-0.657619027416386:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.19.0/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_7efc6daa-fae3-4b7c-9f26-0e7151201d03", INVOCATION_ID: "f030d15134a9499fa0d58489255c20d1", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", GOROOT_1_19_X64: "/opt/hostedtoolcache/go/1.19.13/x64", npm_package_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: "432", GITHUB_TRIGGERING_ACTOR: "KaustubhKumar05", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", npm_package_devDependencies__rollup_plugin_typescript: "^8.3.1", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies_rollup_plugin_terser: "^7.0.2", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 323", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.9.6-alpha.2", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.2.6-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", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "21fe3fa3f76f115ecedc9ffb68a5a43a7d760bef", 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: "KaustubhKumar05", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_98ac6855-afa6-481b-90cb-fed1fe1ef94c", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "57426646", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", 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.1-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_98ac6855-afa6-481b-90cb-fed1fe1ef94c", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.154/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_98ac6855-afa6-481b-90cb-fed1fe1ef94c" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_050642c8-df6d-4312-9b8b-4a7f345b603b", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.21 npm/? node/v18.19.0 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.9.6-alpha.4", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_050642c8-df6d-4312-9b8b-4a7f345b603b", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.0/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.12.6-alpha.4", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.6", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.6", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.1.10909125", 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: "594", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240212.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.0/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_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:17266", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.2.6-alpha.4", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", GITHUB_RUN_ID: "7914626716", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "9e13e59f926c73e5f32c7537a8ab4e292b8d2806", 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: "1447645b13c68ed5f84219e0c2aa377a4708b46185b5ff7d270a7090903d15e1", 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--1707993713346-0.2946660279829507:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1707993713151-0.14968832077388905:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1707993691098-0.5711053740109668:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1707993690918-0.5132801375582854:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.19.0/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.0/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.19.0/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_84f1725e-57e1-4e5d-ae00-65aa9a8e131f", INVOCATION_ID: "b5c865e57e4449d3a74757b2c2eabe80", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", GOROOT_1_19_X64: "/opt/hostedtoolcache/go/1.19.13/x64", npm_package_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: "434", GITHUB_TRIGGERING_ACTOR: "KaustubhKumar05", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", npm_package_devDependencies__rollup_plugin_typescript: "^8.3.1", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies_rollup_plugin_terser: "^7.0.2", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 345", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.9.6-alpha.4", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.2.6-alpha.4", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "9e13e59f926c73e5f32c7537a8ab4e292b8d2806", 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: "KaustubhKumar05", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_050642c8-df6d-4312-9b8b-4a7f345b603b", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "57426646", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", 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.1-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_050642c8-df6d-4312-9b8b-4a7f345b603b", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.154/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_050642c8-df6d-4312-9b8b-4a7f345b603b" };
   }
 });
 
@@ -9157,8 +9157,7 @@ var APP_DATA = {
   activeScreensharePeerId: "activeScreensharePeerId",
   disableNotifications: "disableNotifications",
   pollState: "pollState",
-  background: "background",
-  backgroundType: "backgroundType"
+  background: "background"
 };
 var UI_SETTINGS = {
   isAudioOnly: "isAudioOnly",
@@ -11907,13 +11906,15 @@ import {
 
 // src/Prebuilt/components/AppData/AppData.tsx
 init_define_process_env();
-import React22, { useEffect as useEffect4 } from "react";
+import React23, { useEffect as useEffect5 } from "react";
+import { useMedia } from "react-use";
 import {
   HMSRoomState,
   selectFullAppData,
   selectHLSState,
   selectRoomState,
   selectRTMPState,
+  useAVToggle,
   useHMSActions as useHMSActions4,
   useHMSStore as useHMSStore5,
   useRecordingStreaming
@@ -12217,9 +12218,220 @@ var LayoutSettings = () => {
   ));
 };
 
+// src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
+init_define_process_env();
+
+// src/Prebuilt/provider/roomLayoutProvider/index.tsx
+init_define_process_env();
+var import_lodash2 = __toESM(require_lodash());
+import React22 from "react";
+
+// src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
+init_define_process_env();
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
+
+// src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
+init_define_process_env();
+import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
+var defaultLayout = {
+  id: "",
+  role_id: "",
+  template_id: "",
+  app_id: "",
+  typography: {
+    font_family: "Inter"
+  },
+  themes: [],
+  options: {},
+  screens: {
+    preview: {
+      default: {
+        elements: {
+          preview_header: {
+            title: "Get Started",
+            sub_title: "Setup your audio and video before joining"
+          },
+          join_form: {
+            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY,
+            join_btn_label: "Join Now",
+            go_live_btn_label: "Go Live"
+          }
+        }
+      }
+    },
+    conferencing: {
+      default: {
+        elements: {
+          chat: {
+            public_chat_enabled: true,
+            private_chat_enabled: true,
+            chat_title: "Chat",
+            allow_pinning_messages: true,
+            message_placeholder: "Send a message...",
+            roles_whitelist: [],
+            real_time_controls: {
+              can_disable_chat: true,
+              can_block_user: true,
+              can_hide_message: true
+            }
+          },
+          participant_list: {},
+          video_tile_layout: {
+            grid: {
+              enable_local_tile_inset: true,
+              prominent_roles: [],
+              enable_spotlighting_peer: true
+            }
+          },
+          emoji_reactions: {}
+        }
+      }
+    },
+    leave: {}
+  }
+};
+
+// src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
+var fetchWithRetry = (..._0) => __async(void 0, [..._0], function* (url = "", options = {}) {
+  const MAX_RETRIES = 4;
+  let error = Error("something went wrong");
+  for (let i = 0; i < MAX_RETRIES; i++) {
+    try {
+      return yield fetch(url, options);
+    } catch (err) {
+      error = err;
+    }
+  }
+  console.error("Fetch failed after max retries", { url, options });
+  throw error;
+});
+var useFetchRoomLayout = ({
+  endpoint = "",
+  authToken = ""
+}) => {
+  const [layout, setLayout] = useState5(void 0);
+  const layoutResp = useRef5();
+  const isFetchInProgress = useRef5(false);
+  const updateRoomLayoutForRole = useCallback5((role) => {
+    var _a8;
+    if (!layoutResp.current) {
+      return;
+    }
+    const [layout2] = (((_a8 = layoutResp.current) == null ? void 0 : _a8.data) || []).filter((layout3) => layout3.role === role);
+    if (layout2) {
+      setLayout(layout2);
+    }
+  }, []);
+  useEffect4(() => {
+    (() => __async(void 0, null, function* () {
+      var _a8, _b7;
+      if (isFetchInProgress.current || !authToken) {
+        return;
+      }
+      isFetchInProgress.current = true;
+      try {
+        const resp = yield fetchWithRetry(endpoint || "https://api.100ms.live/v2/layouts/ui", {
+          headers: {
+            Authorization: `Bearer ${authToken}`
+          }
+        });
+        layoutResp.current = yield resp.json();
+      } catch (e) {
+        console.error("[Room Layout API]: Failed to fetch / process room layout. Resorting to default layout.", e);
+        layoutResp.current = {
+          data: [defaultLayout]
+        };
+      }
+      let layoutForRole = (_b7 = (_a8 = layoutResp.current) == null ? void 0 : _a8.data) == null ? void 0 : _b7[0];
+      if (!layoutForRole) {
+        console.error(
+          "[Room Layout API]: Unable to figure out room layout from API response. Resorting to default layout."
+        );
+        layoutForRole = defaultLayout;
+      }
+      const layout2 = layoutForRole;
+      setLayout(layout2);
+      isFetchInProgress.current = false;
+    }))();
+  }, [authToken, endpoint]);
+  return { layout, updateRoomLayoutForRole };
+};
+
+// src/Prebuilt/provider/roomLayoutProvider/index.tsx
+var RoomLayoutContext = React22.createContext(void 0);
+function customizer(objValue, srcValue) {
+  if ((0, import_lodash2.isArray)(objValue) || (0, import_lodash2.isArray)(srcValue)) {
+    return srcValue;
+  }
+  return void 0;
+}
+var RoomLayoutProvider = ({
+  children,
+  roomLayoutEndpoint,
+  overrideLayout
+}) => {
+  const authToken = useAuthToken();
+  const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
+  const mergedLayout = authToken && layout ? (0, import_lodash2.mergeWith)(layout, overrideLayout, customizer) : layout;
+  return /* @__PURE__ */ React22.createElement(RoomLayoutContext.Provider, { value: { layout: mergedLayout, updateRoomLayoutForRole } }, children);
+};
+var useRoomLayout = () => {
+  var _a8;
+  return (_a8 = React22.useContext(RoomLayoutContext)) == null ? void 0 : _a8.layout;
+};
+var useUpdateRoomLayout = () => {
+  var _a8;
+  return (_a8 = React22.useContext(RoomLayoutContext)) == null ? void 0 : _a8.updateRoomLayoutForRole;
+};
+
+// src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
+function useRoomLayoutScreen({
+  screen
+}) {
+  var _a8;
+  const roomLayout = useRoomLayout();
+  const screenProps = (_a8 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a8[screen];
+  return screenProps;
+}
+function useRoomLayoutPreviewScreen() {
+  var _a8;
+  const screenProps = useRoomLayoutScreen({ screen: "preview" });
+  const isPreviewScreenEnabled = !!screenProps && !(screenProps == null ? void 0 : screenProps.skip_preview_screen);
+  let elements;
+  let screenType;
+  if (isPreviewScreenEnabled) {
+    screenType = Object.keys(screenProps).filter((key) => key !== "skip_preview_screen")[0];
+    elements = (_a8 = screenProps[screenType]) == null ? void 0 : _a8.elements;
+  }
+  return {
+    isPreviewScreenEnabled,
+    elements,
+    screenType
+  };
+}
+function useRoomLayoutConferencingScreen() {
+  var _a8, _b7;
+  const screenProps = useRoomLayoutScreen({ screen: "conferencing" }) || {};
+  const screenType = Object.keys(screenProps)[0];
+  const elements = (_a8 = screenProps[screenType]) == null ? void 0 : _a8.elements;
+  const hideSections = ((_b7 = screenProps[screenType]) == null ? void 0 : _b7.hideSections) || [];
+  return {
+    hideSections,
+    elements,
+    screenType
+  };
+}
+function useRoomLayoutLeaveScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: "leave" });
+  const isLeaveScreenEnabled = !!screenProps;
+  return {
+    isLeaveScreenEnabled
+  };
+}
+
 // src/Prebuilt/components/AppData/useSidepane.js
 init_define_process_env();
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { selectAppData as selectAppData2, useHMSActions as useHMSActions3, useHMSStore as useHMSStore4, useHMSVanillaStore as useHMSVanillaStore3 } from "@100mslive/react-sdk";
 var useIsSidepaneTypeOpen = (sidepaneType) => {
   if (!sidepaneType) {
@@ -12234,7 +12446,7 @@ var useSidepaneState = () => {
 var useSidepaneToggle = (sidepaneType) => {
   const hmsActions = useHMSActions3();
   const vanillaStore = useHMSVanillaStore3();
-  const toggleSidepane = useCallback5(() => {
+  const toggleSidepane = useCallback6(() => {
     const isOpen = vanillaStore.getState(selectAppData2(APP_DATA.sidePane)) === sidepaneType;
     hmsActions.setAppData(APP_DATA.sidePane, !isOpen ? sidepaneType : "");
   }, [vanillaStore, hmsActions, sidepaneType]);
@@ -12244,7 +12456,7 @@ var usePollViewToggle = () => {
   const hmsActions = useHMSActions3();
   const { view, setPollState } = usePollViewState();
   const isOpen = useSidepaneState() === SIDE_PANE_OPTIONS.POLLS;
-  const togglePollView = useCallback5(
+  const togglePollView = useCallback6(
     (id) => {
       id = typeof id === "string" ? id : void 0;
       const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ;
@@ -12260,7 +12472,7 @@ var usePollViewToggle = () => {
 };
 var useSidepaneReset = () => {
   const hmsActions = useHMSActions3();
-  const resetSidepane = useCallback5(() => {
+  const resetSidepane = useCallback6(() => {
     hmsActions.setAppData(APP_DATA.sidePane, "");
     hmsActions.setAppData(APP_DATA.pollInView, "");
   }, [hmsActions]);
@@ -12302,25 +12514,29 @@ var initialAppData = {
   [APP_DATA.activeScreensharePeerId]: "",
   [APP_DATA.disableNotifications]: false,
   [APP_DATA.background]: "none",
-  [APP_DATA.backgroundType]: "none",
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: "",
     [POLL_STATE.view]: ""
   }
 };
-var AppData = React22.memo(() => {
+var AppData = React23.memo(() => {
+  var _a8;
   const hmsActions = useHMSActions4();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
   const appData = useHMSStore5(selectFullAppData);
-  useEffect4(() => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const isMobile = useMedia(config.media.md);
+  const { isLocalVideoEnabled } = useAVToggle();
+  useEffect5(() => {
     hmsActions.initAppData(__spreadValues(__spreadValues({}, initialAppData), appData));
     hmsActions.setFrameworkInfo({
       type: "react-web",
       isPrebuilt: true,
-      version: React22.version
+      version: React23.version
     });
   }, [hmsActions]);
-  useEffect4(() => {
+  useEffect5(() => {
     const uiSettings = preferences || {};
     const updatedSettings = __spreadProps(__spreadValues({}, uiSettings), {
       [UI_SETTINGS.isAudioOnly]: void 0,
@@ -12328,13 +12544,28 @@ var AppData = React22.memo(() => {
     });
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
   }, [preferences, hmsActions]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!preferences.subscribedNotifications) {
       return;
     }
     hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
   }, [preferences.subscribedNotifications, hmsActions]);
-  return /* @__PURE__ */ React22.createElement(ResetStreamingStart, null);
+  useEffect5(() => {
+    var _a9, _b7;
+    let defaultMediaURL;
+    (_b7 = (_a9 = elements == null ? void 0 : elements.virtual_background) == null ? void 0 : _a9.background_media) == null ? void 0 : _b7.forEach((media) => {
+      if (media.default && media.url) {
+        defaultMediaURL = media.url;
+      }
+    });
+    if (defaultMediaURL) {
+      hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
+      if (isLocalVideoEnabled && !isMobile) {
+        toggleVB();
+      }
+    }
+  }, [hmsActions, (_a8 = elements == null ? void 0 : elements.virtual_background) == null ? void 0 : _a8.background_media, toggleVB, isLocalVideoEnabled, isMobile]);
+  return /* @__PURE__ */ React23.createElement(ResetStreamingStart, null);
 });
 var ResetStreamingStart = () => {
   const { isHLSRunning, isRTMPRunning, isBrowserRecordingOn } = useRecordingStreaming();
@@ -12346,19 +12577,19 @@ var ResetStreamingStart = () => {
   const [rtmpStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
   const isStreamingOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isBrowserRecordingOn && recordingStarted) {
       setRecordingStarted(false);
     }
   }, [isBrowserRecordingOn, recordingStarted, setRecordingStarted]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (roomState === HMSRoomState.Disconnected) {
       setHLSStarted(false);
       setRecordingStarted(false);
       setRTMPStarted(false);
     }
   }, [roomState, setHLSStarted, setRTMPStarted, setRecordingStarted]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isHLSRunning || hlsError) {
       if (hlsStarted) {
         setHLSStarted(false);
@@ -12368,7 +12599,7 @@ var ResetStreamingStart = () => {
       }
     }
   }, [isHLSRunning, hlsStarted, setHLSStarted, hlsError, isStreamingOpen, toggleStreaming]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isRTMPRunning || rtmpError || isBrowserRecordingOn) {
       if (rtmpStarted) {
         setRTMPStarted(false);
@@ -12383,15 +12614,15 @@ var ResetStreamingStart = () => {
 
 // src/Prebuilt/components/AuthToken.jsx
 init_define_process_env();
-import React24, { useEffect as useEffect5, useState as useState5 } from "react";
+import React25, { useEffect as useEffect6, useState as useState6 } from "react";
 import { useSessionStorage } from "react-use";
 import { v4 as uuid } from "uuid";
 import { useHMSActions as useHMSActions5 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/AppContext.tsx
 init_define_process_env();
-import React23, { useContext as useContext2 } from "react";
-var HMSPrebuiltContext = React23.createContext({
+import React24, { useContext as useContext2 } from "react";
+var HMSPrebuiltContext = React24.createContext({
   roomCode: "",
   userName: "",
   userId: "",
@@ -12413,14 +12644,14 @@ var useHMSPrebuiltContext = () => {
 var transaction_error_default = 'data:image/svg+xml,<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M70 68.3333V26.6667C70 24.825 68.5083 23.3333 66.6667 23.3333H13.3333C11.4917 23.3333 10 24.825 10 26.6667V68.3333C10 70.175 11.4917 71.6667 13.3333 71.6667H66.6667C68.5083 71.6667 70 70.175 70 68.3333Z" fill="%23272A31"/>%0A<path d="M20 31.6667H60C61.8417 31.6667 63.3333 33.1583 63.3333 35C63.3333 36.8417 61.8417 38.3333 60 38.3333H20C18.1583 38.3333 16.6667 36.8417 16.6667 35C16.6667 33.1583 18.1583 31.6667 20 31.6667Z" fill="%238F9099"/>%0A<path d="M58.3333 36.6667V10C58.3333 9.08 57.5867 8.33334 56.6667 8.33334H55C55 9.25334 54.2533 10 53.3333 10C52.4133 10 51.6667 9.25334 51.6667 8.33334H48.3333C48.3333 9.25334 47.5867 10 46.6667 10C45.7467 10 45 9.25334 45 8.33334H41.6667C41.6667 9.25334 40.92 10 40 10C39.08 10 38.3333 9.25334 38.3333 8.33334H35C35 9.25334 34.2533 10 33.3333 10C32.4133 10 31.6667 9.25334 31.6667 8.33334H28.3333C28.3333 9.25334 27.5867 10 26.6667 10C25.7467 10 25 9.25334 25 8.33334H23.3333C22.4133 8.33334 21.6667 9.08 21.6667 10V36.6667H58.3333Z" fill="%23C74E5B"/>%0A<path d="M21.6667 43.3333H58.3333C60.175 43.3333 61.6667 44.825 61.6667 46.6667V50C61.6667 51.8417 60.175 53.3333 58.3333 53.3333H21.6667C19.825 53.3333 18.3333 51.8417 18.3333 50V46.6667C18.3333 44.825 19.825 43.3333 21.6667 43.3333Z" fill="%23C5C6D0"/>%0A<path d="M60 66.6667H55C54.08 66.6667 53.3333 65.92 53.3333 65V60C53.3333 59.08 54.08 58.3333 55 58.3333H60C60.92 58.3333 61.6667 59.08 61.6667 60V65C61.6667 65.92 60.92 66.6667 60 66.6667Z" fill="%23C5C6D0"/>%0A<path d="M25 66.6667H20C19.08 66.6667 18.3333 65.92 18.3333 65V60C18.3333 59.08 19.08 58.3333 20 58.3333H25C25.92 58.3333 26.6667 59.08 26.6667 60V65C26.6667 65.92 25.92 66.6667 25 66.6667ZM36.6667 66.6667H31.6667C30.7467 66.6667 30 65.92 30 65V60C30 59.08 30.7467 58.3333 31.6667 58.3333H36.6667C37.5867 58.3333 38.3333 59.08 38.3333 60V65C38.3333 65.92 37.5867 66.6667 36.6667 66.6667ZM48.3333 66.6667H43.3333C42.4133 66.6667 41.6667 65.92 41.6667 65V60C41.6667 59.08 42.4133 58.3333 43.3333 58.3333H48.3333C49.2533 58.3333 50 59.08 50 60V65C50 65.92 49.2533 66.6667 48.3333 66.6667Z" fill="%23C5C6D0"/>%0A<path d="M58.3333 35H21.6667V38.3333H58.3333V35Z" fill="%23C74E5B"/>%0A<path opacity="0.05" d="M45.3033 32.315C44.6383 32.315 44.01 32.0567 43.5367 31.585L40 28.0467L36.465 31.5817C35.9917 32.0533 35.365 32.3133 34.6967 32.3133C34.0283 32.3133 33.4 32.0533 32.9267 31.58L31.75 30.4033C31.2783 29.9333 31.0183 29.3033 31.0183 28.6333C31.0183 27.9667 31.2783 27.3383 31.75 26.8667L35.2867 23.3333L31.7517 19.7983C31.28 19.3283 31.02 18.7 31.02 18.0317C31.02 17.3617 31.28 16.7333 31.7517 16.2617L32.93 15.0833C33.4017 14.6117 34.0283 14.3517 34.6983 14.3517C35.3633 14.3517 35.9917 14.61 36.465 15.0817L40 18.62L43.535 15.0833C44.0083 14.6117 44.635 14.3517 45.3033 14.3517C45.9683 14.3517 46.5967 14.61 47.07 15.0817L48.25 16.2617C48.7217 16.7317 48.9817 17.3617 48.9817 18.0317C48.9817 18.6983 48.7217 19.3267 48.25 19.7983L44.7117 23.3333L48.2483 26.87C49.2217 27.84 49.2233 29.425 48.2517 30.4017L47.07 31.5833C46.5983 32.055 45.9717 32.315 45.3033 32.315Z" fill="black"/>%0A<path opacity="0.07" d="M45.3033 31.4817C44.8583 31.4817 44.44 31.3083 44.125 30.995L40 26.8683L35.875 30.9933C35.56 31.3083 35.1417 31.48 34.6967 31.48C34.25 31.48 33.8317 31.3067 33.5183 30.9917L32.34 29.8133C32.025 29.4983 31.8517 29.08 31.8517 28.6333C31.8517 28.1883 32.025 27.77 32.34 27.455L36.465 23.3333L32.34 19.2083C32.0267 18.895 31.8517 18.4767 31.8517 18.0317C31.8517 17.585 32.025 17.1667 32.34 16.8517L33.5183 15.6733C33.8317 15.36 34.25 15.1867 34.6967 15.1867C35.1417 15.1867 35.56 15.36 35.875 15.6733L40 19.7983L44.125 15.6717C44.44 15.3567 44.8583 15.185 45.3033 15.185C45.7483 15.185 46.1667 15.3583 46.4817 15.6717L47.66 16.8517C47.975 17.1667 48.1483 17.585 48.1483 18.0317C48.1483 18.4767 47.975 18.895 47.66 19.21L43.5333 23.3333L47.66 27.46C48.31 28.1067 48.31 29.1633 47.6617 29.815L46.4817 30.995C46.1667 31.3083 45.7483 31.4817 45.3033 31.4817Z" fill="black"/>%0A<path d="M42.3567 23.3333L47.0717 18.6183C47.3967 18.2933 47.3967 17.765 47.0717 17.44L45.8933 16.2617C45.5667 15.9367 45.04 15.9367 44.715 16.2617L40 20.9767L35.2867 16.2633C34.9617 15.9383 34.4333 15.9383 34.1083 16.2633L32.93 17.4417C32.605 17.7667 32.605 18.295 32.93 18.62L37.6433 23.3333L32.93 28.0467C32.605 28.3717 32.605 28.9 32.93 29.225L34.1083 30.4033C34.4333 30.7283 34.9617 30.7283 35.2867 30.4033L40 25.69L44.715 30.405C45.04 30.73 45.5683 30.73 45.8933 30.405L47.0717 29.2267C47.3967 28.9 47.3967 28.3733 47.0717 28.0483L42.3567 23.3333Z" fill="%23FFEDEC"/>%0A</svg>%0A';
 
 // src/Prebuilt/components/AuthToken.jsx
-var AuthToken = React24.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
+var AuthToken = React25.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
   const hmsActions = useHMSActions5();
   const { roomCode, userId } = useHMSPrebuiltContext();
-  const [error, setError] = useState5({ title: "", body: "" });
+  const [error, setError] = useState6({ title: "", body: "" });
   let authToken = defaultAuthToken;
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
   const [savedUserId, setSavedUserId] = useSessionStorage(UserPreferencesKeys.USER_ID);
-  useEffect5(() => {
+  useEffect6(() => {
     if (authToken) {
       setAuthTokenInAppData(authToken);
       return;
@@ -12444,7 +12675,7 @@ var AuthToken = React24.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
     setSavedUserId
   ]);
   if (error.title) {
-    return /* @__PURE__ */ React24.createElement(Dialog.Root, { open: true }, /* @__PURE__ */ React24.createElement(
+    return /* @__PURE__ */ React25.createElement(Dialog.Root, { open: true }, /* @__PURE__ */ React25.createElement(
       Dialog.Content,
       {
         css: {
@@ -12456,9 +12687,9 @@ var AuthToken = React24.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React24.createElement("img", { src: transaction_error_default, height: 80, width: 80 }),
-      /* @__PURE__ */ React24.createElement(Text, { variant: "h4", css: { textAlign: "center", mb: "$4", mt: "$10" } }, error.title),
-      /* @__PURE__ */ React24.createElement(Text, { css: { c: "$on_surface_medium", textAlign: "center" } }, error.body)
+      /* @__PURE__ */ React25.createElement("img", { src: transaction_error_default, height: 80, width: 80 }),
+      /* @__PURE__ */ React25.createElement(Text, { variant: "h4", css: { textAlign: "center", mb: "$4", mt: "$10" } }, error.title),
+      /* @__PURE__ */ React25.createElement(Text, { css: { c: "$on_surface_medium", textAlign: "center" } }, error.body)
     ));
   }
   return null;
@@ -12520,20 +12751,20 @@ import {
 // src/Prebuilt/components/Footer/Footer.tsx
 init_define_process_env();
 import React77, { useEffect as useEffect18 } from "react";
-import { useMedia as useMedia9 } from "react-use";
+import { useMedia as useMedia10 } from "react-use";
 import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
-import { useAVToggle as useAVToggle3 } from "@100mslive/react-sdk";
+import { useAVToggle as useAVToggle4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/AudioVideoToggle.jsx
 init_define_process_env();
-import React26, { Fragment as Fragment2 } from "react";
+import React27, { Fragment as Fragment2 } from "react";
 import {
   DeviceType,
   HMSRoomState as HMSRoomState2,
   selectLocalVideoTrackID,
   selectRoomState as selectRoomState2,
   selectVideoTrackByID,
-  useAVToggle,
+  useAVToggle as useAVToggle2,
   useDevices,
   useHMSActions as useHMSActions6,
   useHMSStore as useHMSStore6
@@ -12542,7 +12773,7 @@ import { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from
 
 // src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx
 init_define_process_env();
-import React25 from "react";
+import React26 from "react";
 import { VerticalMenuIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/IconButton.tsx
@@ -12625,7 +12856,7 @@ var IconButtonWithOptions = ({
 }) => {
   const bgCss = { backgroundColor: disabled ? "$surface_brighter" : active ? "$transparent" : "$secondary_dim" };
   const iconCss = { color: disabled ? "$on_surface_low" : active ? "$on_surface_high" : "$on_primary_high" };
-  return /* @__PURE__ */ React25.createElement(Flex, null, /* @__PURE__ */ React25.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React25.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React25.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React25.createElement(Dropdown.Root, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(Flex, null, /* @__PURE__ */ React26.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React26.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React26.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React26.createElement(Dropdown.Root, null, /* @__PURE__ */ React26.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -12636,8 +12867,8 @@ var IconButtonWithOptions = ({
         }
       }
     },
-    /* @__PURE__ */ React25.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React25.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React25.createElement(Box, { css: iconCss }, /* @__PURE__ */ React25.createElement(VerticalMenuIcon, null))))
-  ), /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React26.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React26.createElement(Box, { css: iconCss }, /* @__PURE__ */ React26.createElement(VerticalMenuIcon, null))))
+  ), /* @__PURE__ */ React26.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -12649,7 +12880,7 @@ var IconButtonWithOptions = ({
         border: "none"
       }
     },
-    options.map((option, index) => /* @__PURE__ */ React25.createElement(
+    options.map((option, index) => /* @__PURE__ */ React26.createElement(
       Dropdown.Item,
       {
         key: option.title,
@@ -12720,7 +12951,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   const { videoInput, audioInput } = allDevices;
   const formattedVideoInputList = videoInput == null ? void 0 : videoInput.map((videoInput2) => ({
     active: selectedDeviceIDs.videoInput === videoInput2.deviceId,
-    content: /* @__PURE__ */ React26.createElement(
+    content: /* @__PURE__ */ React27.createElement(
       Text,
       {
         variant: "sm",
@@ -12736,7 +12967,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   }));
   const formattedAudioInputList = audioInput == null ? void 0 : audioInput.map((audioInput2) => ({
     active: selectedDeviceIDs.audioInput === audioInput2.deviceId,
-    content: /* @__PURE__ */ React26.createElement(
+    content: /* @__PURE__ */ React27.createElement(
       Text,
       {
         variant: "sm",
@@ -12750,14 +12981,14 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
     ),
     title: audioInput2.label
   }));
-  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle2();
   const actions = useHMSActions6();
   const videoTrackId = useHMSStore6(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore6(selectVideoTrackByID(videoTrackId));
   const roomState = useHMSStore6(selectRoomState2);
   const hasAudioDevices = (audioInput == null ? void 0 : audioInput.length) > 0;
   const hasVideoDevices = (videoInput == null ? void 0 : videoInput.length) > 0;
-  return /* @__PURE__ */ React26.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React26.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React27.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React27.createElement(
     IconButton_default,
     {
       active: isLocalAudioEnabled,
@@ -12767,20 +12998,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       "data-testid": "audio_btn",
       className: "__cancel-drag-event"
     },
-    !isLocalAudioEnabled ? /* @__PURE__ */ React26.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React26.createElement(MicOnIcon, { "data-testid": "audio_on_btn" })
-  )) : /* @__PURE__ */ React26.createElement(
+    !isLocalAudioEnabled ? /* @__PURE__ */ React27.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React27.createElement(MicOnIcon, { "data-testid": "audio_on_btn" })
+  )) : /* @__PURE__ */ React27.createElement(
     IconButtonWithOptions,
     {
       options: formattedAudioInputList,
       disabled: !toggleAudio,
       onDisabledClick: toggleAudio,
       tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
-      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React26.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React26.createElement(MicOnIcon, { "data-testid": "audio_on_btn" }),
+      icon: !isLocalAudioEnabled ? /* @__PURE__ */ React27.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React27.createElement(MicOnIcon, { "data-testid": "audio_on_btn" }),
       active: isLocalAudioEnabled,
       onClick: toggleAudio,
       key: "toggleAudio"
     }
-  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React26.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React26.createElement(
+  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React27.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React27.createElement(
     IconButton_default,
     {
       key: "toggleVideo",
@@ -12790,20 +13021,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       "data-testid": "video_btn",
       className: "__cancel-drag-event"
     },
-    !isLocalVideoEnabled ? /* @__PURE__ */ React26.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React26.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
-  )) : /* @__PURE__ */ React26.createElement(
+    !isLocalVideoEnabled ? /* @__PURE__ */ React27.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React27.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
+  )) : /* @__PURE__ */ React27.createElement(
     IconButtonWithOptions,
     {
       disabled: !toggleVideo,
       onDisabledClick: toggleVideo,
       options: formattedVideoInputList,
       tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
-      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React26.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React26.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
+      icon: !isLocalVideoEnabled ? /* @__PURE__ */ React27.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React27.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
       key: "toggleVideo",
       active: isLocalVideoEnabled,
       onClick: toggleVideo
     }
-  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState2.Preview ? /* @__PURE__ */ React26.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React26.createElement(
+  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState2.Preview ? /* @__PURE__ */ React27.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React27.createElement(
     IconButton_default,
     {
       onClick: () => __async(void 0, null, function* () {
@@ -12817,14 +13048,14 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
         }
       })
     },
-    /* @__PURE__ */ React26.createElement(CameraFlipIcon, null)
+    /* @__PURE__ */ React27.createElement(CameraFlipIcon, null)
   )) : null);
 };
 
 // src/Prebuilt/components/EmojiReaction.jsx
 init_define_process_env();
-import React28, { Fragment as Fragment3, useState as useState6 } from "react";
-import { useMedia } from "react-use";
+import React29, { Fragment as Fragment3, useState as useState7 } from "react";
+import { useMedia as useMedia2 } from "react-use";
 import data from "@emoji-mart/data/sets/14/apple.json";
 import { init } from "emoji-mart";
 import {
@@ -12838,13 +13069,13 @@ import { EmojiIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Footer/EmojiCard.jsx
 init_define_process_env();
-import React27 from "react";
+import React28 from "react";
 var emojiReactionList = [
   [{ emojiId: "+1" }, { emojiId: "-1" }, { emojiId: "wave" }, { emojiId: "clap" }, { emojiId: "fire" }],
   [{ emojiId: "tada" }, { emojiId: "heart_eyes" }, { emojiId: "joy" }, { emojiId: "open_mouth" }, { emojiId: "sob" }]
 ];
 var EmojiCard = ({ sendReaction }) => {
-  return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React27.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React27.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React27.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
+  return emojiReactionList.map((emojiLine, index) => /* @__PURE__ */ React28.createElement(Flex, { key: index, justify: "between", css: { mb: "$8" } }, emojiLine.map((emoji) => /* @__PURE__ */ React28.createElement(EmojiContainer, { key: emoji.emojiId, onClick: () => sendReaction(emoji.emojiId) }, /* @__PURE__ */ React28.createElement("em-emoji", { id: emoji.emojiId, size: "100%", set: "apple" })))));
 };
 var EmojiContainer = styled("span", {
   position: "relative",
@@ -12861,10 +13092,10 @@ var EmojiContainer = styled("span", {
 
 // src/Prebuilt/components/hooks/useDropdownList.ts
 init_define_process_env();
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 var useDropdownList = ({ name, open }) => {
   const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
-  useEffect6(() => {
+  useEffect7(() => {
     if (open) {
       if (!dropdownList.includes(name)) {
         setDropdownList([...dropdownList, name]);
@@ -12883,12 +13114,12 @@ var useDropdownList = ({ name, open }) => {
 // src/Prebuilt/components/EmojiReaction.jsx
 init({ data });
 var EmojiReaction = () => {
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const isConnected = useHMSStore7(selectIsConnectedToRoom);
   useDropdownList({ open, name: "EmojiReaction" });
   const roles = useHMSStore7(selectAvailableRoleNames);
   const localPeerId = useHMSStore7(selectLocalPeerID);
-  const isMobile = useMedia(config.media.md);
+  const isMobile = useMedia2(config.media.md);
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE
   });
@@ -12905,13 +13136,13 @@ var EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React28.createElement(EmojiCard, { sendReaction }) : /* @__PURE__ */ React28.createElement(Fragment3, null, /* @__PURE__ */ React28.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React28.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React28.createElement(IconButton_default, null, /* @__PURE__ */ React28.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React28.createElement(Box, null, /* @__PURE__ */ React28.createElement(EmojiIcon, null))))), /* @__PURE__ */ React28.createElement(Dropdown.Content, { sideOffset: 5, align: "center", css: { p: "$8", bg: "$surface_default" } }, /* @__PURE__ */ React28.createElement(EmojiCard, { sendReaction }))));
+  return isMobile ? /* @__PURE__ */ React29.createElement(EmojiCard, { sendReaction }) : /* @__PURE__ */ React29.createElement(Fragment3, null, /* @__PURE__ */ React29.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React29.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "emoji_reaction_btn" }, /* @__PURE__ */ React29.createElement(IconButton_default, null, /* @__PURE__ */ React29.createElement(Tooltip, { title: "Emoji reaction" }, /* @__PURE__ */ React29.createElement(Box, null, /* @__PURE__ */ React29.createElement(EmojiIcon, null))))), /* @__PURE__ */ React29.createElement(Dropdown.Content, { sideOffset: 5, align: "center", css: { p: "$8", bg: "$surface_default" } }, /* @__PURE__ */ React29.createElement(EmojiCard, { sendReaction }))));
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 init_define_process_env();
-import React35 from "react";
-import { useMedia as useMedia2 } from "react-use";
+import React36 from "react";
+import { useMedia as useMedia3 } from "react-use";
 import {
   selectHLSState as selectHLSState2,
   selectIsConnectedToRoom as selectIsConnectedToRoom4,
@@ -12924,13 +13155,13 @@ import {
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
 init_define_process_env();
-import React32, { Fragment as Fragment4, useState as useState7 } from "react";
+import React33, { Fragment as Fragment4, useState as useState8 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom2, selectPermissions as selectPermissions2, useHMSStore as useHMSStore8, useRecordingStreaming as useRecordingStreaming2 } from "@100mslive/react-sdk";
 import { ExitIcon, StopIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Leave/EndSessionContent.tsx
 init_define_process_env();
-import React29 from "react";
+import React30 from "react";
 import { AlertTriangleIcon, CrossIcon as CrossIcon3 } from "@100mslive/react-icons";
 var EndSessionContent = ({
   setShowEndStreamAlert,
@@ -12938,7 +13169,7 @@ var EndSessionContent = ({
   isModal = false,
   isStreamingOn = false
 }) => {
-  return /* @__PURE__ */ React29.createElement(Box, null, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(Box, null, /* @__PURE__ */ React30.createElement(
     Flex,
     {
       css: {
@@ -12947,10 +13178,10 @@ var EndSessionContent = ({
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React29.createElement(AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
-    /* @__PURE__ */ React29.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "End ", isStreamingOn ? "Stream" : "Session"),
-    isModal ? null : /* @__PURE__ */ React29.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowEndStreamAlert(false) }, /* @__PURE__ */ React29.createElement(CrossIcon3, null))
-  ), /* @__PURE__ */ React29.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The ", isStreamingOn ? "stream" : "session", " will end for everyone. You can't undo this action."), /* @__PURE__ */ React29.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
+    /* @__PURE__ */ React30.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "End ", isStreamingOn ? "Stream" : "Session"),
+    isModal ? null : /* @__PURE__ */ React30.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowEndStreamAlert(false) }, /* @__PURE__ */ React30.createElement(CrossIcon3, null))
+  ), /* @__PURE__ */ React30.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The ", isStreamingOn ? "stream" : "session", " will end for everyone. You can't undo this action."), /* @__PURE__ */ React30.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React30.createElement(
     Button,
     {
       outlined: true,
@@ -12959,7 +13190,7 @@ var EndSessionContent = ({
       onClick: () => setShowEndStreamAlert(false)
     },
     "Cancel"
-  ), /* @__PURE__ */ React29.createElement(
+  ), /* @__PURE__ */ React30.createElement(
     Button,
     {
       variant: "danger",
@@ -13003,7 +13234,7 @@ var MenuTriggerButton = styled(LeaveIconButton, {
 
 // src/Prebuilt/components/Leave/LeaveCard.tsx
 init_define_process_env();
-import React30 from "react";
+import React31 from "react";
 var LeaveCard = ({
   icon,
   title,
@@ -13013,19 +13244,19 @@ var LeaveCard = ({
   titleColor,
   css: css2 = {}
 }) => {
-  return /* @__PURE__ */ React30.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css2), onClick }, /* @__PURE__ */ React30.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ React30.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ React30.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ React30.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
+  return /* @__PURE__ */ React31.createElement(Flex, { css: __spreadValues({ p: "$10", flexGrow: 1, gap: "$8", bg }, css2), onClick }, /* @__PURE__ */ React31.createElement(Box, { css: { color: titleColor } }, icon), /* @__PURE__ */ React31.createElement(Box, { css: { gap: "$2" } }, /* @__PURE__ */ React31.createElement(Text, { variant: "lg", css: { color: titleColor } }, title), /* @__PURE__ */ React31.createElement(Text, { variant: "sm", css: { c: "inherit" } }, subtitle)));
 };
 
 // src/Prebuilt/components/Leave/LeaveSessionContent.tsx
 init_define_process_env();
-import React31 from "react";
+import React32 from "react";
 import { AlertTriangleIcon as AlertTriangleIcon2, CrossIcon as CrossIcon4 } from "@100mslive/react-icons";
 var LeaveSessionContent = ({
   setShowLeaveRoomAlert,
   leaveRoom,
   isModal = false
 }) => {
-  return /* @__PURE__ */ React31.createElement(Box, null, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(
     Flex,
     {
       css: {
@@ -13034,10 +13265,10 @@ var LeaveSessionContent = ({
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React31.createElement(AlertTriangleIcon2, { style: { marginRight: "0.5rem" } }),
-    /* @__PURE__ */ React31.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Leave"),
-    isModal ? null : /* @__PURE__ */ React31.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowLeaveRoomAlert(false) }, /* @__PURE__ */ React31.createElement(CrossIcon4, null))
-  ), /* @__PURE__ */ React31.createElement(Text, { variant: "sm", css: { color: "$on_surface_low", mb: "$8", mt: "$4" } }, "Others will continue after you leave. You can join the session again."), /* @__PURE__ */ React31.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(AlertTriangleIcon2, { style: { marginRight: "0.5rem" } }),
+    /* @__PURE__ */ React32.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Leave"),
+    isModal ? null : /* @__PURE__ */ React32.createElement(Box, { css: { color: "$on_surface_high", ml: "auto" }, onClick: () => setShowLeaveRoomAlert(false) }, /* @__PURE__ */ React32.createElement(CrossIcon4, null))
+  ), /* @__PURE__ */ React32.createElement(Text, { variant: "sm", css: { color: "$on_surface_low", mb: "$8", mt: "$4" } }, "Others will continue after you leave. You can join the session again."), /* @__PURE__ */ React32.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React32.createElement(
     Button,
     {
       outlined: true,
@@ -13046,7 +13277,7 @@ var LeaveSessionContent = ({
       onClick: () => setShowLeaveRoomAlert(false)
     },
     "Cancel"
-  ), /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React32.createElement(
     Button,
     {
       variant: "danger",
@@ -13067,9 +13298,9 @@ var DesktopLeaveRoom = ({
   screenType,
   endRoom
 }) => {
-  const [open, setOpen] = useState7(false);
-  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState7(false);
-  const [showEndStreamAlert, setShowEndStreamAlert] = useState7(false);
+  const [open, setOpen] = useState8(false);
+  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState8(false);
+  const [showEndStreamAlert, setShowEndStreamAlert] = useState8(false);
   const isConnected = useHMSStore8(selectIsConnectedToRoom2);
   const permissions = useHMSStore8(selectPermissions2);
   const { isStreamingOn } = useRecordingStreaming2();
@@ -13079,7 +13310,7 @@ var DesktopLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(Fragment4, null, showLeaveOptions ? /* @__PURE__ */ React32.createElement(Flex, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(Fragment4, null, showLeaveOptions ? /* @__PURE__ */ React33.createElement(Flex, null, /* @__PURE__ */ React33.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -13090,8 +13321,8 @@ var DesktopLeaveRoom = ({
       },
       onClick: () => setShowLeaveRoomAlert(true)
     },
-    /* @__PURE__ */ React32.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React32.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React33.createElement(Box, null, /* @__PURE__ */ React33.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
+  ), /* @__PURE__ */ React33.createElement(Dropdown.Root, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React33.createElement(
     Dropdown.Trigger,
     {
       asChild: true,
@@ -13101,8 +13332,8 @@ var DesktopLeaveRoom = ({
         }
       }
     },
-    /* @__PURE__ */ React32.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React32.createElement(VerticalMenuIcon2, null))
-  ), /* @__PURE__ */ React32.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(MenuTriggerButton, { "data-testid": "leave_end_dropdown_trigger" }, /* @__PURE__ */ React33.createElement(VerticalMenuIcon2, null))
+  ), /* @__PURE__ */ React33.createElement(Dropdown.Content, { css: { p: 0, w: "$100" }, alignOffset: -50, sideOffset: 10 }, /* @__PURE__ */ React33.createElement(
     Dropdown.Item,
     {
       css: {
@@ -13113,21 +13344,21 @@ var DesktopLeaveRoom = ({
       },
       "data-testid": "just_leave_btn"
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       LeaveCard,
       {
         title: showStream ? "Leave Stream" : "Leave Session",
         subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
         bg: "",
         titleColor: "$on_surface_high",
-        icon: /* @__PURE__ */ React32.createElement(ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+        icon: /* @__PURE__ */ React33.createElement(ExitIcon, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
         onClick: () => __async(void 0, null, function* () {
           return yield leaveRoom();
         }),
         css: { p: "$8 $4" }
       }
     )
-  ), /* @__PURE__ */ React32.createElement(
+  ), /* @__PURE__ */ React33.createElement(
     Dropdown.Item,
     {
       css: {
@@ -13138,14 +13369,14 @@ var DesktopLeaveRoom = ({
       },
       "data-testid": "end_room_btn"
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       LeaveCard,
       {
         title: showStream ? "End Stream" : "End Session",
         subtitle: `The ${showStream ? "stream" : "session"} will end for everyone. You can't undo this action.`,
         bg: "",
         titleColor: "$alert_error_brighter",
-        icon: /* @__PURE__ */ React32.createElement(StopIcon, { height: 24, width: 24 }),
+        icon: /* @__PURE__ */ React33.createElement(StopIcon, { height: 24, width: 24 }),
         onClick: () => {
           setOpen(false);
           setShowEndStreamAlert(true);
@@ -13153,7 +13384,7 @@ var DesktopLeaveRoom = ({
         css: { p: "$8 $4" }
       }
     )
-  )))) : /* @__PURE__ */ React32.createElement(
+  )))) : /* @__PURE__ */ React33.createElement(
     LeaveIconButton,
     {
       onClick: () => {
@@ -13162,8 +13393,8 @@ var DesktopLeaveRoom = ({
       key: "LeaveRoom",
       "data-testid": "leave_room_btn"
     },
-    /* @__PURE__ */ React32.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
-  ), /* @__PURE__ */ React32.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ React32.createElement(Dialog.Portal, null, /* @__PURE__ */ React32.createElement(Dialog.Overlay, null), /* @__PURE__ */ React32.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React33.createElement(Box, null, /* @__PURE__ */ React33.createElement(ExitIcon, { style: { transform: "rotate(180deg)" } })))
+  ), /* @__PURE__ */ React33.createElement(Dialog.Root, { open: showEndStreamAlert, modal: false }, /* @__PURE__ */ React33.createElement(Dialog.Portal, null, /* @__PURE__ */ React33.createElement(Dialog.Overlay, null), /* @__PURE__ */ React33.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React33.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
@@ -13171,12 +13402,12 @@ var DesktopLeaveRoom = ({
       isStreamingOn,
       isModal: true
     }
-  )))), /* @__PURE__ */ React32.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React32.createElement(Dialog.Portal, null, /* @__PURE__ */ React32.createElement(Dialog.Overlay, null), /* @__PURE__ */ React32.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React32.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
+  )))), /* @__PURE__ */ React33.createElement(Dialog.Root, { open: showLeaveRoomAlert, modal: false }, /* @__PURE__ */ React33.createElement(Dialog.Portal, null, /* @__PURE__ */ React33.createElement(Dialog.Overlay, null), /* @__PURE__ */ React33.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React33.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom, isModal: true })))));
 };
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
 init_define_process_env();
-import React34, { Fragment as Fragment5, useState as useState8 } from "react";
+import React35, { Fragment as Fragment5, useState as useState9 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions as selectPermissions3, useHMSStore as useHMSStore9, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
 
@@ -13185,7 +13416,7 @@ init_define_process_env();
 
 // src/Sheet/Sheet.tsx
 init_define_process_env();
-import React33 from "react";
+import React34 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 var SheetRoot = styled(DialogPrimitive2.Root, {
   minHeight: "240px",
@@ -13259,10 +13490,10 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
     side: "bottom"
   }
 });
-var SheetContent = React33.forwardRef(
+var SheetContent = React34.forwardRef(
   (_a8, forwardedRef) => {
     var _b7 = _a8, { children } = _b7, props = __objRest(_b7, ["children"]);
-    return /* @__PURE__ */ React33.createElement(Dialog.Portal, null, /* @__PURE__ */ React33.createElement(StyledOverlay, null), /* @__PURE__ */ React33.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
+    return /* @__PURE__ */ React34.createElement(Dialog.Portal, null, /* @__PURE__ */ React34.createElement(StyledOverlay, null), /* @__PURE__ */ React34.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
   }
 );
 var SheetClose = Dialog.Close;
@@ -13287,9 +13518,9 @@ var MwebLeaveRoom = ({
   screenType,
   endRoom
 }) => {
-  const [open, setOpen] = useState8(false);
-  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState8(false);
-  const [showEndStreamAlert, setShowEndStreamAlert] = useState8(false);
+  const [open, setOpen] = useState9(false);
+  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState9(false);
+  const [showEndStreamAlert, setShowEndStreamAlert] = useState9(false);
   const isConnected = useHMSStore9(selectIsConnectedToRoom3);
   const permissions = useHMSStore9(selectPermissions3);
   const { isStreamingOn } = useRecordingStreaming3();
@@ -13299,7 +13530,7 @@ var MwebLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React34.createElement(Fragment5, null, showLeaveOptions ? /* @__PURE__ */ React34.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React34.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(Fragment5, null, showLeaveOptions ? /* @__PURE__ */ React35.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React35.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React35.createElement(
     LeaveIconButton,
     {
       key: "LeaveRoom",
@@ -13309,21 +13540,21 @@ var MwebLeaveRoom = ({
         borderBottomRightRadius: "$1"
       }
     },
-    /* @__PURE__ */ React34.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React34.createElement(Box, null, /* @__PURE__ */ React34.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
-  )), /* @__PURE__ */ React34.createElement(Sheet.Content, null, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React35.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
+  )), /* @__PURE__ */ React35.createElement(Sheet.Content, null, /* @__PURE__ */ React35.createElement(
     LeaveCard,
     {
       title: showStream ? "Leave Stream" : "Leave Session",
       subtitle: `Others will continue after you leave. You can join the ${showStream ? "stream" : "session"} again.`,
       bg: "$surface_default",
       titleColor: "$on_surface_high",
-      icon: /* @__PURE__ */ React34.createElement(ExitIcon2, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
+      icon: /* @__PURE__ */ React35.createElement(ExitIcon2, { height: 24, width: 24, style: { transform: "rotate(180deg)" } }),
       onClick: () => __async(void 0, null, function* () {
         return yield leaveRoom();
       }),
       css: { pt: 0, mt: "$10", color: "$on_surface_low", "&:hover": { color: "$on_surface_high" } }
     }
-  ), /* @__PURE__ */ React34.createElement(
+  ), /* @__PURE__ */ React35.createElement(
     LeaveCard,
     {
       title: showStream ? "End Stream" : "End Session",
@@ -13331,27 +13562,27 @@ var MwebLeaveRoom = ({
       bg: "$alert_error_dim",
       titleColor: "$alert_error_brighter",
       css: { color: "$alert_error_bright", "&:hover": { color: "$alert_error_brighter" } },
-      icon: /* @__PURE__ */ React34.createElement(StopIcon2, { height: 24, width: 24 }),
+      icon: /* @__PURE__ */ React35.createElement(StopIcon2, { height: 24, width: 24 }),
       onClick: () => {
         setOpen(false);
         setShowEndStreamAlert(true);
       }
     }
-  ))) : /* @__PURE__ */ React34.createElement(LeaveIconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => setShowLeaveRoomAlert(true) }, /* @__PURE__ */ React34.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React34.createElement(Box, null, /* @__PURE__ */ React34.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))), /* @__PURE__ */ React34.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React34.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React34.createElement(
+  ))) : /* @__PURE__ */ React35.createElement(LeaveIconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => setShowLeaveRoomAlert(true) }, /* @__PURE__ */ React35.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))), /* @__PURE__ */ React35.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React35.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React35.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
       leaveRoom: isStreamingOn ? leaveRoom : endRoom,
       isStreamingOn
     }
-  ))), /* @__PURE__ */ React34.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React34.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React34.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
+  ))), /* @__PURE__ */ React35.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React35.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React35.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
 };
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 var LeaveRoom = ({ screenType }) => {
   const isConnected = useHMSStore10(selectIsConnectedToRoom4);
   const permissions = useHMSStore10(selectPermissions4);
-  const isMobile = useMedia2(config.media.md);
+  const isMobile = useMedia3(config.media.md);
   const rolesMap = useHMSStore10(selectRolesMap);
   const streamingPermissionRoles = Object.keys(rolesMap).filter((roleName) => {
     const roleObj = rolesMap[roleName];
@@ -13386,13 +13617,13 @@ var LeaveRoom = ({ screenType }) => {
   if (!permissions || !isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React35.createElement(MwebLeaveRoom, { leaveRoom, screenType, endRoom }) : /* @__PURE__ */ React35.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
+  return isMobile ? /* @__PURE__ */ React36.createElement(MwebLeaveRoom, { leaveRoom, screenType, endRoom }) : /* @__PURE__ */ React36.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
 init_define_process_env();
 import React59 from "react";
-import { useMedia as useMedia7 } from "react-use";
+import { useMedia as useMedia8 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
 init_define_process_env();
@@ -13403,11 +13634,11 @@ import { BrbIcon, CheckIcon as CheckIcon4, HamburgerMenuIcon, InfoIcon as InfoIc
 
 // src/Prebuilt/components/PIP/index.jsx
 init_define_process_env();
-import React37 from "react";
+import React38 from "react";
 
 // src/Prebuilt/components/PIP/PIPComponent.jsx
 init_define_process_env();
-import React36, { useCallback as useCallback6, useEffect as useEffect7, useState as useState9 } from "react";
+import React37, { useCallback as useCallback7, useEffect as useEffect8, useState as useState10 } from "react";
 import { selectPeers, selectTracksMap, useHMSActions as useHMSActions8, useHMSStore as useHMSStore11, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
 import { PipIcon } from "@100mslive/react-icons";
 
@@ -13854,300 +14085,89 @@ var SetupMediaSession = class {
         try {
           navigator.mediaSession.setActionHandler("togglemicrophone", this.toggleMic);
           navigator.mediaSession.setActionHandler("togglecamera", this.toggleCam);
-          navigator.mediaSession.setActionHandler("hangup", this.leave);
-        } catch (err) {
-          console.error("error in setting media session handlers", err);
-        }
-      }
-    });
-  }
-};
-var MediaSession = new SetupMediaSession();
-
-// src/Prebuilt/components/PIP/PIPComponent.jsx
-var PIPComponent = ({ content = null }) => {
-  const [isPipOn, setIsPipOn] = useState9(PictureInPicture.isOn());
-  const hmsActions = useHMSActions8();
-  const store = useHMSVanillaStore4();
-  const onPipToggle = useCallback6(() => {
-    if (!isPipOn) {
-      PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
-      MediaSession.setup(hmsActions, store);
-    } else {
-      PictureInPicture.stop().catch((err) => console.error("error in stopping pip", err));
-    }
-  }, [hmsActions, isPipOn, store]);
-  if (!PictureInPicture.isSupported()) {
-    return null;
-  }
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, content ? /* @__PURE__ */ React36.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React36.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React36.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React36.createElement(PipIcon, null))));
-};
-var ActivatedPIP = () => {
-  const tracksMap = useHMSStore11(selectTracksMap);
-  const storePeers = useHMSStore11(selectPeers);
-  const pinnedTrack = usePinnedTrack();
-  useEffect7(() => {
-    function updatePIP() {
-      if (!PictureInPicture.isOn()) {
-        return;
-      }
-      let pipPeers = storePeers;
-      if (pinnedTrack) {
-        pipPeers = storePeers.filter((peer) => pinnedTrack.peerId === peer.id);
-      }
-      PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch((err) => {
-        console.error("error in updating pip", err);
-      });
-    }
-    PictureInPicture.listenToStateChange(updatePIP);
-    updatePIP();
-  }, [storePeers, tracksMap, pinnedTrack]);
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null);
-};
-var PIPComponent_default = PIPComponent;
-
-// src/Prebuilt/components/PIP/index.jsx
-var PIP = ({ content = null }) => {
-  return /* @__PURE__ */ React37.createElement(PIPComponent_default, { content });
-};
-
-// src/Prebuilt/components/RoleChangeModal.jsx
-init_define_process_env();
-import React39, { forwardRef, useRef as useRef7, useState as useState12 } from "react";
-import { selectPeerByID, useHMSActions as useHMSActions9, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
-import { CheckIcon, ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon as ChevronUpIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/hooks/useDropdownSelection.jsx
-init_define_process_env();
-var useDropdownSelection = () => {
-  return "$surface_bright";
-};
-
-// src/Prebuilt/common/hooks.ts
-init_define_process_env();
-import { useEffect as useEffect9, useRef as useRef6, useState as useState11 } from "react";
-import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
-import {
-  selectAvailableRoleNames as selectAvailableRoleNames2,
-  selectIsConnectedToRoom as selectIsConnectedToRoom5,
-  selectPeerCount,
-  selectPeerMetadata,
-  selectPeers as selectPeers2,
-  selectRemotePeers,
-  useHMSStore as useHMSStore12,
-  useHMSVanillaStore as useHMSVanillaStore5
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/provider/roomLayoutProvider/index.tsx
-init_define_process_env();
-var import_lodash2 = __toESM(require_lodash());
-import React38 from "react";
-
-// src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
-init_define_process_env();
-import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef5, useState as useState10 } from "react";
-
-// src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
-init_define_process_env();
-import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
-var defaultLayout = {
-  id: "",
-  role_id: "",
-  template_id: "",
-  app_id: "",
-  typography: {
-    font_family: "Inter"
-  },
-  themes: [],
-  options: {},
-  screens: {
-    preview: {
-      default: {
-        elements: {
-          preview_header: {
-            title: "Get Started",
-            sub_title: "Setup your audio and video before joining"
-          },
-          join_form: {
-            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY,
-            join_btn_label: "Join Now",
-            go_live_btn_label: "Go Live"
-          }
-        }
-      }
-    },
-    conferencing: {
-      default: {
-        elements: {
-          chat: {
-            public_chat_enabled: true,
-            private_chat_enabled: true,
-            chat_title: "Chat",
-            allow_pinning_messages: true,
-            message_placeholder: "Send a message...",
-            roles_whitelist: [],
-            real_time_controls: {
-              can_disable_chat: true,
-              can_block_user: true,
-              can_hide_message: true
-            }
-          },
-          participant_list: {},
-          video_tile_layout: {
-            grid: {
-              enable_local_tile_inset: true,
-              prominent_roles: [],
-              enable_spotlighting_peer: true
-            }
-          },
-          emoji_reactions: {}
-        }
-      }
-    },
-    leave: {}
-  }
-};
-
-// src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
-var fetchWithRetry = (..._0) => __async(void 0, [..._0], function* (url = "", options = {}) {
-  const MAX_RETRIES = 4;
-  let error = Error("something went wrong");
-  for (let i = 0; i < MAX_RETRIES; i++) {
-    try {
-      return yield fetch(url, options);
-    } catch (err) {
-      error = err;
-    }
-  }
-  console.error("Fetch failed after max retries", { url, options });
-  throw error;
-});
-var useFetchRoomLayout = ({
-  endpoint = "",
-  authToken = ""
-}) => {
-  const [layout, setLayout] = useState10(void 0);
-  const layoutResp = useRef5();
-  const isFetchInProgress = useRef5(false);
-  const updateRoomLayoutForRole = useCallback7((role) => {
-    var _a8;
-    if (!layoutResp.current) {
-      return;
-    }
-    const [layout2] = (((_a8 = layoutResp.current) == null ? void 0 : _a8.data) || []).filter((layout3) => layout3.role === role);
-    if (layout2) {
-      setLayout(layout2);
-    }
-  }, []);
-  useEffect8(() => {
-    (() => __async(void 0, null, function* () {
-      var _a8, _b7;
-      if (isFetchInProgress.current || !authToken) {
-        return;
-      }
-      isFetchInProgress.current = true;
-      try {
-        const resp = yield fetchWithRetry(endpoint || "https://api.100ms.live/v2/layouts/ui", {
-          headers: {
-            Authorization: `Bearer ${authToken}`
-          }
-        });
-        layoutResp.current = yield resp.json();
-      } catch (e) {
-        console.error("[Room Layout API]: Failed to fetch / process room layout. Resorting to default layout.", e);
-        layoutResp.current = {
-          data: [defaultLayout]
-        };
-      }
-      let layoutForRole = (_b7 = (_a8 = layoutResp.current) == null ? void 0 : _a8.data) == null ? void 0 : _b7[0];
-      if (!layoutForRole) {
-        console.error(
-          "[Room Layout API]: Unable to figure out room layout from API response. Resorting to default layout."
-        );
-        layoutForRole = defaultLayout;
-      }
-      const layout2 = layoutForRole;
-      setLayout(layout2);
-      isFetchInProgress.current = false;
-    }))();
-  }, [authToken, endpoint]);
-  return { layout, updateRoomLayoutForRole };
+          navigator.mediaSession.setActionHandler("hangup", this.leave);
+        } catch (err) {
+          console.error("error in setting media session handlers", err);
+        }
+      }
+    });
+  }
 };
+var MediaSession = new SetupMediaSession();
 
-// src/Prebuilt/provider/roomLayoutProvider/index.tsx
-var RoomLayoutContext = React38.createContext(void 0);
-function customizer(objValue, srcValue) {
-  if ((0, import_lodash2.isArray)(objValue) || (0, import_lodash2.isArray)(srcValue)) {
-    return srcValue;
+// src/Prebuilt/components/PIP/PIPComponent.jsx
+var PIPComponent = ({ content = null }) => {
+  const [isPipOn, setIsPipOn] = useState10(PictureInPicture.isOn());
+  const hmsActions = useHMSActions8();
+  const store = useHMSVanillaStore4();
+  const onPipToggle = useCallback7(() => {
+    if (!isPipOn) {
+      PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
+      MediaSession.setup(hmsActions, store);
+    } else {
+      PictureInPicture.stop().catch((err) => console.error("error in stopping pip", err));
+    }
+  }, [hmsActions, isPipOn, store]);
+  if (!PictureInPicture.isSupported()) {
+    return null;
   }
-  return void 0;
-}
-var RoomLayoutProvider = ({
-  children,
-  roomLayoutEndpoint,
-  overrideLayout
-}) => {
-  const authToken = useAuthToken();
-  const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
-  const mergedLayout = authToken && layout ? (0, import_lodash2.mergeWith)(layout, overrideLayout, customizer) : layout;
-  return /* @__PURE__ */ React38.createElement(RoomLayoutContext.Provider, { value: { layout: mergedLayout, updateRoomLayoutForRole } }, children);
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, content ? /* @__PURE__ */ React37.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React37.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React37.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React37.createElement(PipIcon, null))));
 };
-var useRoomLayout = () => {
-  var _a8;
-  return (_a8 = React38.useContext(RoomLayoutContext)) == null ? void 0 : _a8.layout;
+var ActivatedPIP = () => {
+  const tracksMap = useHMSStore11(selectTracksMap);
+  const storePeers = useHMSStore11(selectPeers);
+  const pinnedTrack = usePinnedTrack();
+  useEffect8(() => {
+    function updatePIP() {
+      if (!PictureInPicture.isOn()) {
+        return;
+      }
+      let pipPeers = storePeers;
+      if (pinnedTrack) {
+        pipPeers = storePeers.filter((peer) => pinnedTrack.peerId === peer.id);
+      }
+      PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch((err) => {
+        console.error("error in updating pip", err);
+      });
+    }
+    PictureInPicture.listenToStateChange(updatePIP);
+    updatePIP();
+  }, [storePeers, tracksMap, pinnedTrack]);
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null);
 };
-var useUpdateRoomLayout = () => {
-  var _a8;
-  return (_a8 = React38.useContext(RoomLayoutContext)) == null ? void 0 : _a8.updateRoomLayoutForRole;
+var PIPComponent_default = PIPComponent;
+
+// src/Prebuilt/components/PIP/index.jsx
+var PIP = ({ content = null }) => {
+  return /* @__PURE__ */ React38.createElement(PIPComponent_default, { content });
 };
 
-// src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
+// src/Prebuilt/components/RoleChangeModal.jsx
 init_define_process_env();
-function useRoomLayoutScreen({
-  screen
-}) {
-  var _a8;
-  const roomLayout = useRoomLayout();
-  const screenProps = (_a8 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a8[screen];
-  return screenProps;
-}
-function useRoomLayoutPreviewScreen() {
-  var _a8;
-  const screenProps = useRoomLayoutScreen({ screen: "preview" });
-  const isPreviewScreenEnabled = !!screenProps && !(screenProps == null ? void 0 : screenProps.skip_preview_screen);
-  let elements;
-  let screenType;
-  if (isPreviewScreenEnabled) {
-    screenType = Object.keys(screenProps).filter((key) => key !== "skip_preview_screen")[0];
-    elements = (_a8 = screenProps[screenType]) == null ? void 0 : _a8.elements;
-  }
-  return {
-    isPreviewScreenEnabled,
-    elements,
-    screenType
-  };
-}
-function useRoomLayoutConferencingScreen() {
-  var _a8, _b7;
-  const screenProps = useRoomLayoutScreen({ screen: "conferencing" }) || {};
-  const screenType = Object.keys(screenProps)[0];
-  const elements = (_a8 = screenProps[screenType]) == null ? void 0 : _a8.elements;
-  const hideSections = ((_b7 = screenProps[screenType]) == null ? void 0 : _b7.hideSections) || [];
-  return {
-    hideSections,
-    elements,
-    screenType
-  };
-}
-function useRoomLayoutLeaveScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: "leave" });
-  const isLeaveScreenEnabled = !!screenProps;
-  return {
-    isLeaveScreenEnabled
-  };
-}
+import React39, { forwardRef, useRef as useRef7, useState as useState12 } from "react";
+import { selectPeerByID, useHMSActions as useHMSActions9, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
+import { CheckIcon, ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon as ChevronUpIcon2 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/hooks/useDropdownSelection.jsx
+init_define_process_env();
+var useDropdownSelection = () => {
+  return "$surface_bright";
+};
 
 // src/Prebuilt/common/hooks.ts
+init_define_process_env();
+import { useEffect as useEffect9, useRef as useRef6, useState as useState11 } from "react";
+import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
+import {
+  selectAvailableRoleNames as selectAvailableRoleNames2,
+  selectIsConnectedToRoom as selectIsConnectedToRoom5,
+  selectPeerCount,
+  selectPeerMetadata,
+  selectPeers as selectPeers2,
+  selectRemotePeers,
+  useHMSStore as useHMSStore12,
+  useHMSVanillaStore as useHMSVanillaStore5
+} from "@100mslive/react-sdk";
 var useFilteredRoles = () => {
   var _a8;
   const { elements } = useRoomLayoutConferencingScreen();
@@ -14326,13 +14346,13 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
 // src/Prebuilt/components/Settings/SettingsModal.jsx
 init_define_process_env();
 import React43, { useCallback as useCallback8, useEffect as useEffect11, useState as useState14 } from "react";
-import { useMedia as useMedia4 } from "react-use";
+import { useMedia as useMedia5 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon5, GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
 init_define_process_env();
 import React41, { Fragment as Fragment6, useEffect as useEffect10, useRef as useRef8, useState as useState13 } from "react";
-import { useMedia as useMedia3 } from "react-use";
+import { useMedia as useMedia4 } from "react-use";
 import {
   DeviceType as DeviceType2,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
@@ -14403,7 +14423,7 @@ var Settings = ({ setHide }) => {
   const trackSelector = selectVideoTrackByID2(videoTrackId);
   const hmsActions = useHMSActions10();
   const track = useHMSStore14(trackSelector);
-  const isMobile = useMedia3(config.media.md);
+  const isMobile = useMedia4(config.media.md);
   useEffect10(() => {
     if (isMobile) {
       hmsActions.refreshDevices();
@@ -14645,7 +14665,7 @@ var settingsList = [
 ];
 var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React43.createElement(React43.Fragment, null) }) => {
   const mediaQueryLg = config.media.md;
-  const isMobile = useMedia4(mediaQueryLg);
+  const isMobile = useMedia5(mediaQueryLg);
   const [showSetting, setShowSetting] = useState14(
     () => settingsList.reduce((obj, { tabName }) => __spreadProps(__spreadValues({}, obj), { [tabName]: true }), {})
   );
@@ -15784,7 +15804,7 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom7,
   selectPeerCount as selectPeerCount2,
   selectPermissions as selectPermissions7,
-  useAVToggle as useAVToggle2,
+  useAVToggle as useAVToggle3,
   useHMSActions as useHMSActions20,
   useHMSStore as useHMSStore25,
   useRecordingStreaming as useRecordingStreaming6
@@ -15800,14 +15820,13 @@ import {
   QuizActiveIcon,
   QuizIcon,
   RecordIcon as RecordIcon2,
-  SettingsIcon as SettingsIcon3,
-  VirtualBackgroundIcon
+  SettingsIcon as SettingsIcon3
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/StreamActions.tsx
 init_define_process_env();
 import React54, { useCallback as useCallback16, useEffect as useEffect14, useRef as useRef12, useState as useState23 } from "react";
-import { useMedia as useMedia5 } from "react-use";
+import { useMedia as useMedia6 } from "react-use";
 
 // ../hms-video-store/dist/index.js
 init_define_process_env();
@@ -18028,7 +18047,7 @@ var Qi = (a2, e) => {
 };
 var ya = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
 var nr = ya((Qc, Va) => {
-  Va.exports = { version: "0.11.6-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"] };
+  Va.exports = { version: "0.11.6-alpha.4", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
 });
 var zi = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(zi || {});
 var Pa = ((e) => (e.CHAT = "chat", e))(Pa || {});
@@ -19364,7 +19383,7 @@ var LiveStatus = () => {
   var _a8;
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming5();
   const hlsState = useHMSStore22(selectHLSState3);
-  const isMobile = useMedia5(config.media.md);
+  const isMobile = useMedia6(config.media.md);
   const intervalRef = useRef12(null);
   const { screenType } = useRoomLayoutConferencingScreen();
   const [liveTime, setLiveTime] = useState23(0);
@@ -19411,7 +19430,7 @@ var LiveStatus = () => {
 var RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming5();
   const permissions = useHMSStore22(selectPermissions6);
-  const isMobile = useMedia5(config.media.md);
+  const isMobile = useMedia6(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 == null ? void 0 : permissions.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
@@ -19538,7 +19557,7 @@ var StartRecording2 = () => {
 };
 var StreamActions = () => {
   const isConnected = useHMSStore22(selectIsConnectedToRoom6);
-  const isMobile = useMedia5(config.media.md);
+  const isMobile = useMedia6(config.media.md);
   const roomState = useHMSStore22(selectRoomState3);
   return /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React54.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React54.createElement(RecordingPauseStatus, null), /* @__PURE__ */ React54.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React54.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React54.createElement(StartRecording2, null) : null);
 };
@@ -19620,7 +19639,7 @@ var ActionTile = {
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx
 init_define_process_env();
 import React57, { useState as useState24 } from "react";
-import { useMedia as useMedia6 } from "react-use";
+import { useMedia as useMedia7 } from "react-use";
 import { selectLocalPeerName, useHMSActions as useHMSActions19, useHMSStore as useHMSStore23 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.tsx
@@ -19739,7 +19758,7 @@ var ChangeNameModal = ({
   const hmsActions = useHMSActions19();
   const localPeerName = useHMSStore23(selectLocalPeerName);
   const [currentName, setCurrentName] = useState24(localPeerName);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   const changeName = () => __async(void 0, null, function* () {
     const name = (currentName == null ? void 0 : currentName.trim()) || "";
     if (!name || name === localPeerName) {
@@ -19824,10 +19843,9 @@ var MwebOptions = ({
   const peerCount = useHMSStore25(selectPeerCount2);
   const emojiCardRef = useRef13(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { toggleAudio, toggleVideo, isLocalVideoEnabled } = useAVToggle2();
+  const { toggleAudio, toggleVideo } = useAVToggle3();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -19896,17 +19914,6 @@ var MwebOptions = ({
       isHandRaised ? /* @__PURE__ */ React58.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React58.createElement(HandIcon2, null),
       /* @__PURE__ */ React58.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
     ) : null,
-    isLocalVideoEnabled && !!(elements == null ? void 0 : elements.virtual_background) ? /* @__PURE__ */ React58.createElement(
-      ActionTile.Root,
-      {
-        onClick: () => {
-          toggleVB();
-          setOpenOptionsSheet(false);
-        }
-      },
-      /* @__PURE__ */ React58.createElement(VirtualBackgroundIcon, null),
-      /* @__PURE__ */ React58.createElement(ActionTile.Title, null, "Virtual Background")
-    ) : null,
     (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React58.createElement(
       ActionTile.Root,
       {
@@ -20047,7 +20054,7 @@ var MoreSettings = ({
   elements,
   screenType
 }) => {
-  const isMobile = useMedia7(config.media.md);
+  const isMobile = useMedia8(config.media.md);
   return isMobile ? /* @__PURE__ */ React59.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React59.createElement(DesktopOptions, { elements, screenType });
 };
 
@@ -20552,7 +20559,7 @@ var ScreenshareToggle = ({ css: css2 = {} }) => {
 init_define_process_env();
 import React68 from "react";
 import { selectIsEffectsEnabled, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
-import { VirtualBackgroundIcon as VirtualBackgroundIcon2 } from "@100mslive/react-icons";
+import { VirtualBackgroundIcon } from "@100mslive/react-icons";
 var VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
@@ -20561,7 +20568,7 @@ var VBToggle = () => {
   if (!isVideoOn || !isEffectsEnabled && isSafari) {
     return null;
   }
-  return /* @__PURE__ */ React68.createElement(Tooltip, { side: "top", disabled: isVBOpen, title: "Configure Virtual Background" }, /* @__PURE__ */ React68.createElement(IconButton_default, { active: !isVBOpen, onClick: toggleVB, "data-testid": "virtual_bg_btn" }, /* @__PURE__ */ React68.createElement(VirtualBackgroundIcon2, null)));
+  return /* @__PURE__ */ React68.createElement(Tooltip, { side: "top", disabled: isVBOpen, title: "Configure Virtual Background" }, /* @__PURE__ */ React68.createElement(IconButton_default, { active: !isVBOpen, onClick: toggleVB, "data-testid": "virtual_bg_btn" }, /* @__PURE__ */ React68.createElement(VirtualBackgroundIcon, null)));
 };
 
 // src/Prebuilt/components/Footer/ChatToggle.tsx
@@ -20604,7 +20611,7 @@ var ChatToggle = () => {
 // src/Prebuilt/components/Footer/ParticipantList.tsx
 init_define_process_env();
 import React74, { Fragment as Fragment10, useCallback as useCallback17, useState as useState30 } from "react";
-import { useDebounce, useMedia as useMedia8 } from "react-use";
+import { useDebounce, useMedia as useMedia9 } from "react-use";
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised as selectHasPeerHandRaised2,
@@ -21289,7 +21296,7 @@ var ParticipantSearch = ({
   inSidePane = false
 }) => {
   const [value, setValue] = React74.useState("");
-  const isMobile = useMedia8(config.media.md);
+  const isMobile = useMedia9(config.media.md);
   useDebounce(
     () => {
       onSearch(value);
@@ -21392,10 +21399,10 @@ var Footer2 = ({
   elements
 }) => {
   var _a8, _b7;
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia10(config.media.md);
   const isOverlayChat = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay);
   const openByDefault = ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
-  const { toggleAudio, toggleVideo } = useAVToggle3();
+  const { toggleAudio, toggleVideo } = useAVToggle4();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -21514,14 +21521,14 @@ import {
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
 init_define_process_env();
 import React128, { Fragment as Fragment13, useCallback as useCallback30, useEffect as useEffect31, useMemo as useMemo10, useState as useState52 } from "react";
-import { useMeasure as useMeasure4, useMedia as useMedia22 } from "react-use";
+import { useMeasure as useMeasure4, useMedia as useMedia23 } from "react-use";
 import {
   HMSRoomState as HMSRoomState5,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled6,
   selectLocalPeer as selectLocalPeer7,
   selectRoomState as selectRoomState5,
   selectVideoTrackByID as selectVideoTrackByID5,
-  useAVToggle as useAVToggle4,
+  useAVToggle as useAVToggle5,
   useHMSStore as useHMSStore64,
   useParticipants as useParticipants2,
   usePreviewJoin,
@@ -21532,7 +21539,7 @@ import { MicOffIcon as MicOffIcon7, SettingsIcon as SettingsIcon5 } from "@100ms
 // src/Prebuilt/layouts/SidePane.tsx
 init_define_process_env();
 import React123, { useEffect as useEffect29 } from "react";
-import { useMedia as useMedia20 } from "react-use";
+import { useMedia as useMedia21 } from "react-use";
 import { selectAppData as selectAppData5, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore62 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Polls/Polls.tsx
@@ -23023,21 +23030,21 @@ var Polls = () => {
 // src/Prebuilt/components/SidePaneTabs.tsx
 init_define_process_env();
 import React115, { useEffect as useEffect27, useState as useState47 } from "react";
-import { useMedia as useMedia17 } from "react-use";
+import { useMedia as useMedia18 } from "react-use";
 import { selectPeerCount as selectPeerCount4, useHMSStore as useHMSStore56 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon17 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.tsx
 init_define_process_env();
 import React112, { useCallback as useCallback28, useRef as useRef20 } from "react";
-import { useMedia as useMedia16 } from "react-use";
+import { useMedia as useMedia17 } from "react-use";
 import { selectHMSMessagesCount, useHMSActions as useHMSActions37, useHMSStore as useHMSStore53, 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 React104, { Fragment as Fragment11, useCallback as useCallback24, useEffect as useEffect22, useLayoutEffect, useMemo as useMemo7, useRef as useRef17, useState as useState41 } from "react";
-import { useMedia as useMedia11 } from "react-use";
+import { useMedia as useMedia12 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
@@ -23364,7 +23371,7 @@ var ChatActions = ({
 // src/Prebuilt/components/Chat/EmptyChat.tsx
 init_define_process_env();
 import React103 from "react";
-import { useMedia as useMedia10 } from "react-use";
+import { useMedia as useMedia11 } 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';
@@ -23374,7 +23381,7 @@ var EmptyChat = () => {
   var _a8;
   const { elements } = useRoomLayoutConferencingScreen();
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia11(config.media.md);
   const canSendMessages = elements.chat && (elements.chat.public_chat_enabled || elements.chat.private_chat_enabled || elements.chat.roles_whitelist && elements.chat.roles_whitelist.length) && !isLocalPeerBlacklisted;
   if (isMobile && ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay))
     return /* @__PURE__ */ React103.createElement(React103.Fragment, null);
@@ -23535,7 +23542,7 @@ var ChatMessage = React104.memo(
     var _a8, _b7, _c;
     const { elements } = useRoomLayoutConferencingScreen();
     const rowRef = useRef17(null);
-    const isMobile = useMedia11(config.media.md);
+    const isMobile = useMedia12(config.media.md);
     const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
     const isOverlay = ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) && isMobile;
     const localPeerId = useHMSStore47(selectLocalPeerID10);
@@ -23805,7 +23812,7 @@ var PinnedBy = ({
 // src/Prebuilt/components/Chat/ChatFooter.tsx
 init_define_process_env();
 import React107, { useCallback as useCallback26, useEffect as useEffect24, useRef as useRef19, useState as useState44 } from "react";
-import { useMedia as useMedia14 } from "react-use";
+import { useMedia as useMedia15 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import { selectLocalPeer as selectLocalPeer3, useHMSActions as useHMSActions35, useHMSStore as useHMSStore50 } from "@100mslive/react-sdk";
@@ -23814,13 +23821,13 @@ import { EmojiIcon as EmojiIcon3, PauseCircleIcon as PauseCircleIcon2, SendIcon,
 // src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
 init_define_process_env();
 import React106, { useState as useState43 } from "react";
-import { useMedia as useMedia13 } from "react-use";
+import { useMedia as useMedia14 } from "react-use";
 import { ChevronDownIcon as ChevronDownIcon6, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon15, GroupIcon, PersonIcon as PersonIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelector.tsx
 init_define_process_env();
 import React105, { useMemo as useMemo8, useState as useState42 } from "react";
-import { useMedia as useMedia12 } from "react-use";
+import { useMedia as useMedia13 } from "react-use";
 import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
@@ -23839,7 +23846,7 @@ var SelectorItem = ({
   unreadCount,
   icon = void 0
 }) => {
-  const isMobile = useMedia12(config.media.md);
+  const isMobile = useMedia13(config.media.md);
   const Root28 = !isMobile ? Dropdown.Item : (_a8) => {
     var _b7 = _a8, { children } = _b7, rest = __objRest(_b7, ["children"]);
     return /* @__PURE__ */ React105.createElement(Flex, __spreadProps(__spreadValues({}, rest), { css: __spreadValues({ p: "$6 $8" }, rest.css) }), children);
@@ -23990,7 +23997,7 @@ var ChatSelector = ({ role, peerId }) => {
 var ChatSelectorContainer = () => {
   var _a8, _b7;
   const [open, setOpen] = useState43(false);
-  const isMobile = useMedia13(config.media.md);
+  const isMobile = useMedia14(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
   const isPublicChatEnabled = !!((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.public_chat_enabled);
@@ -24207,7 +24214,7 @@ var ChatFooter = ({ onSend, children }) => {
   const hmsActions = useHMSActions35();
   const inputRef = useRef19(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia14(config.media.md);
+  const isMobile = useMedia15(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const message_placeholder = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.message_placeholder) || "Send a message";
   const localPeer = useHMSStore50(selectLocalPeer3);
@@ -24434,7 +24441,7 @@ var ChatBlocked = () => {
 init_define_process_env();
 import React111, { useEffect as useEffect25, useState as useState45 } from "react";
 import { useSwipeable } from "react-swipeable";
-import { useMedia as useMedia15 } from "react-use";
+import { useMedia as useMedia16 } from "react-use";
 import { selectSessionStore as selectSessionStore7, useHMSStore as useHMSStore52 } from "@100mslive/react-sdk";
 import { PinIcon as PinIcon2, UnpinIcon } from "@100mslive/react-icons";
 
@@ -24495,7 +24502,7 @@ var PinnedMessage = () => {
   const pinnedMessages = useHMSStore52(selectSessionStore7("pinnedMessages" /* PINNED_MESSAGES */));
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState45(0);
   const { removePinnedMessage } = usePinnedMessages();
-  const isMobile = useMedia15(config.media.md);
+  const isMobile = useMedia16(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const canUnpinMessage = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.allow_pinning_messages);
   const [hideOverflow, setHideOverflow] = useState45(true);
@@ -24613,7 +24620,7 @@ var Chat = () => {
   const hmsActions = useHMSActions37();
   const vanillaStore = useHMSVanillaStore10();
   const { enabled: isChatEnabled = true } = useHMSStore53(Yh("chatState" /* CHAT_STATE */)) || {};
-  const isMobile = useMedia16(config.media.md);
+  const isMobile = useMedia17(config.media.md);
   const scrollToBottom = useCallback28(
     (unreadCount = 0) => {
       var _a9;
@@ -24858,7 +24865,7 @@ var SidePaneTabs = React115.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
   const hideTabs = !(showChat && showParticipants);
-  const isMobile = useMedia17(config.media.md);
+  const isMobile = useMedia18(config.media.md);
   const isOverlayChat = !!((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) && isMobile;
   const { off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
@@ -25033,7 +25040,7 @@ var TileConnection_default = TileConnection;
 // src/Prebuilt/components/TileMenu/TileMenu.tsx
 init_define_process_env();
 import React118, { useState as useState48 } from "react";
-import { useMedia as useMedia19 } from "react-use";
+import { useMedia as useMedia20 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID11,
   selectPeerByID as selectPeerByID2,
@@ -25048,7 +25055,7 @@ import { CrossIcon as CrossIcon18, VerticalMenuIcon as VerticalMenuIcon8 } from
 // src/Prebuilt/components/TileMenu/TileMenuContent.tsx
 init_define_process_env();
 import React117, { Fragment as Fragment12 } from "react";
-import { useMedia as useMedia18 } from "react-use";
+import { useMedia as useMedia19 } from "react-use";
 import {
   selectPermissions as selectPermissions15,
   selectSessionStore as selectSessionStore10,
@@ -25235,7 +25242,7 @@ var TileMenuContent = ({
   const { sendEvent } = useCustomEvent2({
     type: REMOTE_STOP_SCREENSHARE_TYPE
   });
-  const isMobile = useMedia18(config.media.md);
+  const isMobile = useMedia19(config.media.md);
   if (isLocal) {
     return showPinAction || canMinimise || !userName || showSpotlight ? /* @__PURE__ */ React117.createElement(React117.Fragment, null, showPinAction && /* @__PURE__ */ React117.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React117.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React117.createElement(MinimiseInset, null), !userName && /* @__PURE__ */ React117.createElement(
       StyledMenuTile.ItemButton,
@@ -25334,7 +25341,7 @@ var TileMenu = ({
   const showPinAction = !!(audioTrackID || videoTrackID && isPrimaryVideoTrack);
   const track = useHMSStore59(selectTrackByID3(videoTrackID));
   const hideSimulcastLayers = !((_b7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b7.length) || track.degraded || !track.enabled;
-  const isMobile = useMedia19(config.media.md);
+  const isMobile = useMedia20(config.media.md);
   const peer = useHMSStore59(selectPeerByID2(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState48(false);
   useDropdownList({ open, name: "TileMenu" });
@@ -25679,11 +25686,11 @@ var VBPlugin = class {
         }
       }
     });
-    this.setPreset = (preset) => {
+    this.setPreset = (preset) => __async(this, null, function* () {
       if (this.effectsPlugin) {
-        this.effectsPlugin.setPreset(preset);
+        yield this.effectsPlugin.setPreset(preset);
       }
-    };
+    });
     this.getPreset = () => {
       var _a8;
       return ((_a8 = this.effectsPlugin) == null ? void 0 : _a8.getPreset()) || "";
@@ -25724,7 +25731,7 @@ var defaultMedia2 = [
 // src/Prebuilt/components/VirtualBackground/VBPicker.tsx
 var iconDims = { height: "40px", width: "40px" };
 var VBPicker = ({ backgroundMedia = [] }) => {
-  var _a8, _b7;
+  var _a8;
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions40();
   const localPeer = useHMSStore61(selectLocalPeer6);
@@ -25739,9 +25746,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
   const isEffectsEnabled = useHMSStore61(Yn);
   const effectsKey = useHMSStore61(Xn);
   const isPluginAdded = useHMSStore61(selectIsLocalVideoPluginPresent(((_a8 = VBHandler) == null ? void 0 : _a8.getName()) || ""));
-  const [activeBackground, setActiveBackground] = useState50(
-    ((_b7 = VBHandler) == null ? void 0 : _b7.getBackground()) || HMSVirtualBackgroundTypes3.NONE
-  );
+  const background = useHMSStore61(zh(APP_DATA.background));
   const mediaList = backgroundMedia.length ? backgroundMedia.map((media) => media.url || "") : defaultMedia2;
   const inPreview = roomState === HMSRoomState4.Preview;
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
@@ -25763,8 +25768,22 @@ var VBPicker = ({ backgroundMedia = [] }) => {
           hmsActions.addPluginToVideoTrack(vbObject, Math.floor(role.publishParams.video.frameRate / 2));
         }
       }
+      const handleDefaultBackground = () => __async(void 0, null, function* () {
+        switch (background) {
+          case HMSVirtualBackgroundTypes3.NONE: {
+            break;
+          }
+          case HMSVirtualBackgroundTypes3.BLUR: {
+            yield VBHandler.setBlur(blurAmount);
+            break;
+          }
+          default:
+            yield VBHandler.setBackground(background);
+        }
+      });
+      handleDefaultBackground();
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track == null ? void 0 : track.id]);
+  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track == null ? void 0 : track.id, background, blurAmount]);
   useEffect28(() => {
     if (!isVideoOn) {
       toggleVB();
@@ -25807,7 +25826,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
             value: HMSVirtualBackgroundTypes3.NONE,
             onClick: () => __async(void 0, null, function* () {
               yield VBHandler.removeEffects();
-              setActiveBackground(HMSVirtualBackgroundTypes3.NONE);
+              hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes3.NONE);
             })
           },
           {
@@ -25817,14 +25836,14 @@ var VBPicker = ({ backgroundMedia = [] }) => {
             onClick: () => __async(void 0, null, function* () {
               var _a9;
               yield (_a9 = VBHandler) == null ? void 0 : _a9.setBlur(blurAmount);
-              setActiveBackground(HMSVirtualBackgroundTypes3.BLUR);
+              hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes3.BLUR);
             })
           }
         ],
-        activeBackground
+        activeBackground: background
       }
     ),
-    /* @__PURE__ */ React122.createElement(Flex, { direction: "column", css: { w: "100%", gap: "$8", mt: "$8" } }, activeBackground === HMSVirtualBackgroundTypes3.BLUR && isEffectsEnabled && effectsKey ? /* @__PURE__ */ React122.createElement(Box, null, /* @__PURE__ */ React122.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold", mb: "$4" } }, "Blur intensity"), /* @__PURE__ */ React122.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", alignItems: "center", gap: "$4" } }, /* @__PURE__ */ React122.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "Low"), /* @__PURE__ */ React122.createElement(
+    /* @__PURE__ */ React122.createElement(Flex, { direction: "column", css: { w: "100%", gap: "$8", mt: "$8" } }, background === HMSVirtualBackgroundTypes3.BLUR && isEffectsEnabled && effectsKey ? /* @__PURE__ */ React122.createElement(Box, null, /* @__PURE__ */ React122.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold", mb: "$4" } }, "Blur intensity"), /* @__PURE__ */ React122.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", alignItems: "center", gap: "$4" } }, /* @__PURE__ */ React122.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "Low"), /* @__PURE__ */ React122.createElement(
       Slider,
       {
         showTooltip: false,
@@ -25848,10 +25867,10 @@ var VBPicker = ({ backgroundMedia = [] }) => {
           onClick: () => __async(void 0, null, function* () {
             var _a9;
             yield (_a9 = VBHandler) == null ? void 0 : _a9.setBackground(mediaURL);
-            setActiveBackground(mediaURL);
+            hmsActions.setAppData(APP_DATA.background, mediaURL);
           })
         })),
-        activeBackground
+        activeBackground: background
       }
     )
   ));
@@ -25863,7 +25882,7 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a8, _b7, _c, _d, _e, _f;
-  const isMobile = useMedia20(config.media.md);
+  const isMobile = useMedia21(config.media.md);
   const sidepane = useHMSStore62(selectAppData5(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore62(selectAppData5(APP_DATA.activeScreensharePeerId));
   const trackId = (_a8 = useHMSStore62(selectVideoTrackByPeerID4(activeScreensharePeerId))) == null ? void 0 : _a8.id;
@@ -26007,7 +26026,7 @@ var SpeakerTag = () => {
     {
       align: "center",
       justify: "center",
-      css: { flex: "1 1 0", color: "$on_primary_high", "@md": { display: "none" } }
+      css: { flex: "1 1 0", color: "$on_surface_high", "@md": { display: "none" } }
     },
     /* @__PURE__ */ React126.createElement(VerticalDivider, { css: { ml: "$8" } }),
     /* @__PURE__ */ React126.createElement(VolumeOneIcon, null),
@@ -26048,7 +26067,7 @@ var Logo = () => {
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 init_define_process_env();
 import React127 from "react";
-import { useMedia as useMedia21 } from "react-use";
+import { useMedia as useMedia22 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
 import { useRecordingStreaming as useRecordingStreaming9 } from "@100mslive/react-sdk";
 import { GoLiveIcon } from "@100mslive/react-icons";
@@ -26065,7 +26084,7 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const isMobile = useMedia21(config.media.md);
+  const isMobile = useMedia22(config.media.md);
   const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming9();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
@@ -26126,7 +26145,7 @@ var getParticipantChipContent = (peerCount = 0) => {
 var useLocalTileAspectRatio = () => {
   const localPeer = useHMSStore64(selectLocalPeer7);
   const videoTrack = useHMSStore64(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isMobile = useMedia22(config.media.md);
+  const isMobile = useMedia23(config.media.md);
   let aspectRatio = 0;
   if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height)) {
     aspectRatio = videoTrack.width / videoTrack.height;
@@ -26147,7 +26166,7 @@ var PreviewJoin = ({
   const { isStreamingOn } = useRecordingStreaming10();
   const authToken = useAuthToken();
   const [name, setName] = useState52(initialName || previewPreference.name);
-  const { toggleAudio, toggleVideo } = useAVToggle4();
+  const { toggleAudio, toggleVideo } = useAVToggle5();
   const [previewError, setPreviewError] = useState52(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants2();
@@ -26235,7 +26254,7 @@ var Container4 = styled("div", __spreadProps(__spreadValues({
 }));
 var PreviewTile = ({ name, error }) => {
   const localPeer = useHMSStore64(selectLocalPeer7);
-  const { isLocalAudioEnabled, toggleAudio } = useAVToggle4();
+  const { isLocalAudioEnabled, toggleAudio } = useAVToggle5();
   const isVideoOn = useHMSStore64(selectIsLocalVideoEnabled6);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack);
@@ -26280,7 +26299,7 @@ var PreviewTile = ({ name, error }) => {
   );
 };
 var PreviewControls = ({ hideSettings, vbEnabled }) => {
-  const isMobile = useMedia22(config.media.md);
+  const isMobile = useMedia23(config.media.md);
   return /* @__PURE__ */ React128.createElement(
     Flex,
     {
@@ -26290,7 +26309,7 @@ var PreviewControls = ({ hideSettings, vbEnabled }) => {
         mt: "$8"
       }
     },
-    /* @__PURE__ */ React128.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React128.createElement(AudioVideoToggle, null), vbEnabled ? /* @__PURE__ */ React128.createElement(VBToggle, null) : null),
+    /* @__PURE__ */ React128.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React128.createElement(AudioVideoToggle, null), vbEnabled && !isMobile ? /* @__PURE__ */ React128.createElement(VBToggle, null) : null),
     !hideSettings ? /* @__PURE__ */ React128.createElement(PreviewSettings, null) : null
   );
 };
@@ -26303,7 +26322,7 @@ var PreviewJoin_default = PreviewJoin;
 // src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
 init_define_process_env();
 import React129 from "react";
-import { useMedia as useMedia23 } from "react-use";
+import { useMedia as useMedia24 } from "react-use";
 var RequestPrompt = ({
   open = true,
   onOpenChange,
@@ -26313,7 +26332,7 @@ var RequestPrompt = ({
   onAction,
   disableActions = false
 }) => {
-  const isMobile = useMedia23(config.media.md);
+  const isMobile = useMedia24(config.media.md);
   if (isMobile) {
     return /* @__PURE__ */ React129.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React129.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React129.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React129.createElement(RequestActions, { actionText, onAction, disabled: disableActions })));
   }
@@ -26425,14 +26444,14 @@ import {
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 init_define_process_env();
 import React135, { useEffect as useEffect36, useMemo as useMemo12, useState as useState54 } from "react";
-import { useMedia as useMedia26 } from "react-use";
+import { useMedia as useMedia27 } from "react-use";
 import { selectLocalPeer as selectLocalPeer9, useHMSStore as useHMSStore67 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
 init_define_process_env();
 import React132, { useEffect as useEffect33, useRef as useRef21 } from "react";
 import Draggable from "react-draggable";
-import { useMedia as useMedia24 } from "react-use";
+import { useMedia as useMedia25 } from "react-use";
 import {
   selectIsAllowedToPublish as selectIsAllowedToPublish2,
   selectLocalPeer as selectLocalPeer8,
@@ -26476,8 +26495,8 @@ var insetMaxWidthPx = 240;
 var defaultMobileAspectRatio = 9 / 16;
 var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = ({ peerId }) => {
-  const isMobile = useMedia24(config.media.md);
-  const isLandscape = useMedia24(config.media.ls);
+  const isMobile = useMedia25(config.media.md);
+  const isLandscape = useMedia25(config.media.ls);
   const selector = peerId ? selectPeerByID3(peerId) : selectLocalPeer8;
   const peer = useHMSStore66(selector);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
@@ -26637,7 +26656,7 @@ var Grid = React134.forwardRef(
 // src/Prebuilt/components/hooks/useTileLayout.tsx
 init_define_process_env();
 import { useEffect as useEffect35, useMemo as useMemo11, useState as useState53 } from "react";
-import { useMeasure as useMeasure5, useMedia as useMedia25 } from "react-use";
+import { useMeasure as useMeasure5, useMedia as useMedia26 } from "react-use";
 import {
   getPeersWithTiles,
   selectTracksMap as selectTracksMap3,
@@ -26673,7 +26692,7 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore11();
   const [ref, { width, height }] = useMeasure5();
-  const isMobile = useMedia25(config.media.lg);
+  const isMobile = useMedia26(config.media.lg);
   const [pagesWithTiles, setPagesWithTiles] = useState53([]);
   useEffect35(() => {
     if (width === 0 || height === 0) {
@@ -26743,7 +26762,7 @@ var useTileLayout = ({
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a8;
   const localPeer = useHMSStore67(selectLocalPeer9);
-  const isMobile = useMedia26(config.media.md);
+  const isMobile = useMedia27(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
@@ -26793,7 +26812,7 @@ import { selectLocalPeer as selectLocalPeer10, useHMSStore as useHMSStore69 } fr
 // src/Prebuilt/components/SecondaryTiles.tsx
 init_define_process_env();
 import React137, { useEffect as useEffect37, useRef as useRef22, useState as useState55 } from "react";
-import { useMedia as useMedia27 } from "react-use";
+import { useMedia as useMedia28 } from "react-use";
 import { selectAppData as selectAppData6, selectSessionStore as selectSessionStore11, selectTrackByID as selectTrackByID4, useHMSStore as useHMSStore68 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
@@ -26876,7 +26895,7 @@ var ProminenceLayout = {
 // src/Prebuilt/components/SecondaryTiles.tsx
 var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }) => {
   var _a8, _b7;
-  const isMobile = useMedia27(config.media.md);
+  const isMobile = useMedia28(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const [page, setPage] = useState55(0);
   const pinnedTrackId = useHMSStore68(selectAppData6(APP_DATA.pinnedTrackId));
@@ -27018,13 +27037,13 @@ function RoleProminence({
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 init_define_process_env();
 import React142, { useEffect as useEffect39, useMemo as useMemo14, useState as useState59 } from "react";
-import { useMedia as useMedia29 } from "react-use";
+import { useMedia as useMedia30 } from "react-use";
 import { selectPeersScreenSharing, useHMSStore as useHMSStore71 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.tsx
 init_define_process_env();
 import React141, { useRef as useRef23, useState as useState58 } from "react";
-import { useFullscreen as useFullscreen2, useMedia as useMedia28 } from "react-use";
+import { useFullscreen as useFullscreen2, useMedia as useMedia29 } from "react-use";
 import screenfull2 from "screenfull";
 import {
   selectLocalPeerID as selectLocalPeerID13,
@@ -27185,7 +27204,7 @@ var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
   const peer = useHMSStore70(selectPeerByID4(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState58(false);
-  const isMobile = useMedia28(config.media.md);
+  const isMobile = useMedia29(config.media.md);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const fullscreenRef = useRef23(null);
   const [fullscreen, setFullscreen] = useState58(false);
@@ -27236,7 +27255,7 @@ var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
         },
         isFullscreen ? /* @__PURE__ */ React141.createElement(ShrinkIcon2, null) : /* @__PURE__ */ React141.createElement(ExpandIcon3, null)
       ) : null,
-      !isMobile && isMouseHovered && /* @__PURE__ */ React141.createElement(
+      !isMobile && isMouseHovered && !isFullscreen && /* @__PURE__ */ React141.createElement(
         Box,
         {
           css: {
@@ -27277,7 +27296,7 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const [page, setPage] = useState59(0);
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
   const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia29(config.media.md);
+  const isMobile = useMedia30(config.media.md);
   const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
   const secondaryPeers = useMemo14(() => {
     if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -27688,10 +27707,10 @@ var WaitingView = React146.memo(() => {
 // src/Prebuilt/layouts/WhiteboardView.tsx
 init_define_process_env();
 import React147, { useEffect as useEffect43, useMemo as useMemo17 } from "react";
-import { useMedia as useMedia30 } from "react-use";
+import { useMedia as useMedia31 } from "react-use";
 import { selectPeers as selectPeers5, selectWhiteboard, useHMSStore as useHMSStore74, useWhiteboard as useWhiteboard2 } from "@100mslive/react-sdk";
 var EmbedComponent2 = () => {
-  const isMobile = useMedia30(config.media.md);
+  const isMobile = useMedia31(config.media.md);
   const { iframeRef } = useWhiteboard2(isMobile);
   return /* @__PURE__ */ React147.createElement(
     Box,
@@ -27762,7 +27781,7 @@ var useCloseScreenshareWhiteboard = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React148.lazy(() => import("./HLSView-U3DKJBM7.js"));
+var HLSView = React148.lazy(() => import("./HLSView-H6Q2FEMZ.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -27836,7 +27855,7 @@ init_define_process_env();
 // src/Prebuilt/components/Header/Header.tsx
 init_define_process_env();
 import React150 from "react";
-import { useMedia as useMedia31 } from "react-use";
+import { useMedia as useMedia32 } from "react-use";
 import { HMSRoomState as HMSRoomState6, selectRoomState as selectRoomState6, useHMSStore as useHMSStore77 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/common.jsx
@@ -28002,7 +28021,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React149.createElement(Re
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
   const roomState = useHMSStore77(selectRoomState6);
-  const isMobile = useMedia31(config.media.md);
+  const isMobile = useMedia32(config.media.md);
   if (roomState !== HMSRoomState6.Connected) {
     return /* @__PURE__ */ React150.createElement(React150.Fragment, null);
   }
@@ -28533,11 +28552,11 @@ var LeaveScreen = () => {
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
 init_define_process_env();
 import React156, { useEffect as useEffect52, useState as useState62 } from "react";
-import { useMedia as useMedia32 } from "react-use";
+import { useMedia as useMedia33 } from "react-use";
 import { RefreshIcon } from "@100mslive/react-icons";
 var MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState62(false);
-  const isLandscape = useMedia32(config.media.ls);
+  const isLandscape = useMedia33(config.media.ls);
   useEffect52(() => {
     var _a8;
     if (!isMobileUserAgent) {
@@ -28991,7 +29010,7 @@ var PeerNotifications = () => {
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 init_define_process_env();
 import React161, { useEffect as useEffect57, useState as useState64 } from "react";
-import { useMedia as useMedia33 } from "react-use";
+import { useMedia as useMedia34 } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/images/android-perm-1.png
@@ -29005,7 +29024,7 @@ function PermissionErrorModal() {
   const notification = useHMSNotifications5(HMSNotificationTypes5.ERROR);
   const [deviceType, setDeviceType] = useState64("");
   const [isSystemError, setIsSystemError] = useState64(false);
-  const isMobile = useMedia33(config.media.md);
+  const isMobile = useMedia34(config.media.md);
   useEffect57(() => {
     var _a8, _b7, _c, _d, _e;
     if (!notification || ((_a8 = notification.data) == null ? void 0 : _a8.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
@@ -29453,7 +29472,7 @@ var ToastContainer = () => {
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 init_define_process_env();
 import React169, { useCallback as useCallback34, useEffect as useEffect64, useMemo as useMemo18, useState as useState69 } from "react";
-import { useMedia as useMedia34 } from "react-use";
+import { useMedia as useMedia35 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID17,
   selectPeerNameByID as selectPeerNameByID6,
@@ -29488,7 +29507,7 @@ function FlyingEmoji() {
   const localPeerId = useHMSStore86(selectLocalPeerID17);
   const vanillaStore = useHMSVanillaStore17();
   const [emojis, setEmojis] = useState69([]);
-  const isMobile = useMedia34(config.media.md);
+  const isMobile = useMedia35(config.media.md);
   const startingPoints = useMemo18(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback34(
     ({ emojiId, senderId }) => {
@@ -29689,14 +29708,13 @@ var HMSPrebuilt = React171.forwardRef(
       }
       ref.current = __spreadValues({}, reactiveStore.current);
     }, [ref]);
-    useEffect66(
-      () => () => {
+    useEffect66(() => {
+      return () => {
         var _a9;
         VBHandler.reset();
         (_a9 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a9.hmsActions.leave();
-      },
-      []
-    );
+      };
+    }, []);
     const endpointsObj = endpoints;
     const tokenByRoomCodeEndpoint = (endpointsObj == null ? void 0 : endpointsObj.tokenByRoomCode) || "";
     const initEndpoint = (endpointsObj == null ? void 0 : endpointsObj.init) || "";
@@ -29767,7 +29785,6 @@ var HMSPrebuilt = React171.forwardRef(
                 }
               }
             },
-            /* @__PURE__ */ React171.createElement(AppData, null),
             /* @__PURE__ */ React171.createElement(Init, null),
             /* @__PURE__ */ React171.createElement(DialogContainerProvider, { dialogContainerSelector: containerSelector }, /* @__PURE__ */ React171.createElement(
               Box,
@@ -29830,7 +29847,7 @@ function AppRoutes({
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
   const { activeState, rejoin } = useAppStateManager();
-  return /* @__PURE__ */ React171.createElement(AppStateContext.Provider, { value: { rejoin } }, /* @__PURE__ */ React171.createElement(React171.Fragment, null, /* @__PURE__ */ React171.createElement(ToastContainer, null), /* @__PURE__ */ React171.createElement(Notifications, null), /* @__PURE__ */ React171.createElement(MwebLandscapePrompt, null), /* @__PURE__ */ React171.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React171.createElement(FlyingEmoji, null), /* @__PURE__ */ React171.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React171.createElement(KeyboardHandler, null), /* @__PURE__ */ React171.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && activeState && /* @__PURE__ */ React171.createElement(AppStates, { activeState })));
+  return /* @__PURE__ */ React171.createElement(AppStateContext.Provider, { value: { rejoin } }, /* @__PURE__ */ React171.createElement(React171.Fragment, null, activeState !== "leave" /* LEAVE */ && /* @__PURE__ */ React171.createElement(AppData, null), /* @__PURE__ */ React171.createElement(ToastContainer, null), /* @__PURE__ */ React171.createElement(Notifications, null), /* @__PURE__ */ React171.createElement(MwebLandscapePrompt, null), /* @__PURE__ */ React171.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React171.createElement(FlyingEmoji, null), /* @__PURE__ */ React171.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React171.createElement(KeyboardHandler, null), /* @__PURE__ */ React171.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && activeState && /* @__PURE__ */ React171.createElement(AppStates, { activeState })));
 }
 
 // src/Progress/index.tsx
@@ -29971,4 +29988,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-DO5NCPPI.js.map
+//# sourceMappingURL=chunk-HRUQKLGN.js.map