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

package/dist/index.cjs.js

@@ -108,7 +108,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_b2dfce6c-1460-4d7f-9260-6a3b0805fa80", 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.22 npm/? node/v18.19.1 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.10.3-alpha.1", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_b2dfce6c-1460-4d7f-9260-6a3b0805fa80", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.1/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.3-alpha.1", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.6", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.2.11394342", 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.8/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240310.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.1/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.0-alpha.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:19554", 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.3.3-alpha.1", 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: "8338903597", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "8e27b80c474e3487828a60fce4aa1f444aa14577", 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: "2b4eb6b136e5c67e12006fe982ceadc0ea33b23198cb8487892ca00ba4e2cd5c", 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--1710832096589-0.6370797788370992:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1710832096394-0.31759327289111483:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1710832073832-0.31470723189659267:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1710832073647-0.23318157752573399:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/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.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_bc8accc0-5dd2-44bf-aebb-4cc97b5738e1", INVOCATION_ID: "59e00abec76b4888b0bce75a92bf4b9a", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "482", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", 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 264", 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.10.3-alpha.1", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.3-alpha.1", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "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: "8e27b80c474e3487828a60fce4aa1f444aa14577", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_b2dfce6c-1460-4d7f-9260-6a3b0805fa80", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_b2dfce6c-1460-4d7f-9260-6a3b0805fa80", 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_b2dfce6c-1460-4d7f-9260-6a3b0805fa80" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_e1af34ff-a562-4ece-98b8-62d8c089106d", 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.22 npm/? node/v18.19.1 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.10.3-alpha.3", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_e1af34ff-a562-4ece-98b8-62d8c089106d", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.1/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.3-alpha.3", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.6", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.2.11394342", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "595", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_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.8/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240317.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.1/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.0-alpha.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:19832", 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.3.3-alpha.3", 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: "8343246532", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "2f0dfb954601e7028cf0a4d9582a30be0fe726ca", 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: "dc383a02648df0438838bc7519ddf0466d732140d594ac7884f40b9ad676af22", 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--1710852557001-0.002215858080938826:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1710852556808-0.8108733321995873:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1710852534869-0.8214156190232955:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1710852534692-0.4998782271041631:/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.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/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.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_9b743310-ce74-40c4-985b-43804b3d6bc4", INVOCATION_ID: "9c159d16d0984bb1b5de7dbc6ec5d7a9", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "484", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", 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 410", 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.10.3-alpha.3", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.3-alpha.3", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "2f0dfb954601e7028cf0a4d9582a30be0fe726ca", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_e1af34ff-a562-4ece-98b8-62d8c089106d", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_e1af34ff-a562-4ece-98b8-62d8c089106d", 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_e1af34ff-a562-4ece-98b8-62d8c089106d" };
   }
 });
 
@@ -1176,20 +1176,15 @@ var init_IconButton = __esm({
       },
       "&[disabled]": {
         opacity: 0.5,
-        cursor: "not-allowed"
+        cursor: "not-allowed",
+        backgroundColor: "$secondary_dim",
+        color: "$on_primary_high"
       },
       "&:focus": {
         outline: "none"
       },
       variants: {
         active: {
-          false: {
-            backgroundColor: "$secondary_dim",
-            color: "$on_primary_high",
-            "&:not([disabled]):hover": {
-              backgroundColor: "$secondary_default"
-            }
-          },
           true: {
             "&:not([disabled]):hover": {
               backgroundColor: "$on_surface_low"
@@ -10282,21 +10277,17 @@ var init_IconButton3 = __esm({
       border: "1px solid $border_bright",
       bg: "$background_dim",
       r: "$1",
+      "&[disabled]": {
+        opacity: 0.5,
+        cursor: "not-allowed",
+        backgroundColor: "$secondary_dim",
+        color: "$on_primary_high"
+      },
       variants: {
         active: {
           true: {
             color: "$on_surface_high",
             backgroundColor: "transparent"
-          },
-          false: {
-            border: "1px solid transparent",
-            color: "$on_primary_high"
-          }
-        },
-        disabled: {
-          true: {
-            backgroundColor: "$surface_brighter",
-            color: "$on_surface_low"
           }
         }
       }
@@ -10336,9 +10327,9 @@ var init_IconButtonWithOptions = __esm({
       p: "$4",
       r: "$1",
       bg: "transparent",
-      borderTopRightRadius: 0,
+      borderTopRightRadius: "0 !important",
       borderColor: "$border_bright",
-      borderBottomRightRadius: 0,
+      borderBottomRightRadius: "0 !important",
       position: "relative",
       "&:not([disabled]):focus-visible": {
         zIndex: 1
@@ -10351,8 +10342,8 @@ var init_IconButtonWithOptions = __esm({
       variants: __spreadProps(__spreadValues({}, variants), {
         hideOptions: {
           true: {
-            borderTopRightRadius: "$1",
-            borderBottomRightRadius: "$1"
+            borderTopRightRadius: "$1 !important",
+            borderBottomRightRadius: "$1 !important"
           }
         }
       })
@@ -10362,10 +10353,10 @@ var init_IconButtonWithOptions = __esm({
       h: "$14",
       p: "$4 $2",
       r: "$1",
-      borderTopLeftRadius: 0,
+      borderTopLeftRadius: "0 !important",
       borderColor: "$border_bright",
-      borderBottomLeftRadius: 0,
-      borderLeftWidth: 0,
+      borderBottomLeftRadius: "0 !important",
+      borderLeftWidth: "0 !important",
       position: "relative",
       "&:not([disabled]):focus-visible": {
         zIndex: 1
@@ -19559,7 +19550,7 @@ var init_dist = __esm({
     };
     Ia = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
     lr = Ia((ed, Ka) => {
-      Ka.exports = { version: "0.12.3-alpha.1", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
+      Ka.exports = { version: "0.12.3-alpha.3", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
     });
     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 || {});
     Ra = ((e) => (e.CHAT = "chat", e))(Ra || {});
@@ -22222,7 +22213,7 @@ var init_ChatToggle = __esm({
     init_IconButton3();
     init_useSidepane();
     init_constants();
-    ChatToggle = () => {
+    ChatToggle = ({ onClick }) => {
       const countUnreadMessages = (0, import_react_sdk40.useHMSStore)(import_react_sdk40.selectUnreadHMSMessagesCount);
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -22233,7 +22224,7 @@ var init_ChatToggle = __esm({
             position: "relative"
           }
         },
-        /* @__PURE__ */ import_react89.default.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ import_react89.default.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, /* @__PURE__ */ import_react89.default.createElement(import_react_icons38.ChatIcon, null))),
+        /* @__PURE__ */ import_react89.default.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ import_react89.default.createElement(IconButton_default, { onClick: () => onClick ? onClick() : toggleChat(), active: !isChatOpen, "data-testid": "chat_btn" }, /* @__PURE__ */ import_react89.default.createElement(import_react_icons38.ChatIcon, null))),
         countUnreadMessages > 0 && /* @__PURE__ */ import_react89.default.createElement(
           Flex,
           {
@@ -22754,7 +22745,7 @@ var init_RoleAccordion = __esm({
         },
         /* @__PURE__ */ import_react93.default.createElement(Text, { variant: "sm", css: { color: "inherit" } }, "View All"),
         /* @__PURE__ */ import_react93.default.createElement(import_react_icons42.ChevronRightIcon, null)
-      ) : null, isHandRaisedAccordion && /* @__PURE__ */ import_react93.default.createElement(import_react93.default.Fragment, null, /* @__PURE__ */ import_react93.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react93.default.createElement(Flex, { css: { w: "100%", p: "$6", gap: "$4" }, justify: "center" }, /* @__PURE__ */ import_react93.default.createElement(Button, { variant: "standard", onClick: lowerAllHands, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ import_react93.default.createElement(import_react_icons42.CrossIcon, null), " Lower all hands"), canBringToStage && /* @__PURE__ */ import_react93.default.createElement(Button, { onClick: bringAllToStage, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ import_react93.default.createElement(import_react_icons42.AddIcon, null), " ", bring_to_stage_label)))));
+      ) : null, isHandRaisedAccordion && canBringToStage && /* @__PURE__ */ import_react93.default.createElement(import_react93.default.Fragment, null, /* @__PURE__ */ import_react93.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react93.default.createElement(Flex, { css: { w: "100%", p: "$6", gap: "$4" }, justify: "center" }, /* @__PURE__ */ import_react93.default.createElement(Button, { variant: "standard", onClick: lowerAllHands, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ import_react93.default.createElement(import_react_icons42.CrossIcon, null), " Lower all hands"), /* @__PURE__ */ import_react93.default.createElement(Button, { onClick: bringAllToStage, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ import_react93.default.createElement(import_react_icons42.AddIcon, null), " ", bring_to_stage_label)))));
     };
   }
 });
@@ -23075,7 +23066,10 @@ var init_ParticipantList = __esm({
         peerId,
         role
       });
-      return /* @__PURE__ */ import_react95.default.createElement(import_react95.default.Fragment, null, /* @__PURE__ */ import_react95.default.createElement(Button, { variant: "standard", css: quickActionStyle, onClick: lowerPeerHand }, /* @__PURE__ */ import_react95.default.createElement(import_react_icons43.CrossIcon, { height: 18, width: 18 })), shouldShowStageRoleChange && !isInStage && /* @__PURE__ */ import_react95.default.createElement(Button, { variant: "primary", onClick: handleStageAction, css: quickActionStyle }, /* @__PURE__ */ import_react95.default.createElement(import_react_icons43.AddIcon, { height: 18, width: 18 })));
+      if (!shouldShowStageRoleChange) {
+        return null;
+      }
+      return /* @__PURE__ */ import_react95.default.createElement(import_react95.default.Fragment, null, /* @__PURE__ */ import_react95.default.createElement(Button, { variant: "standard", css: quickActionStyle, onClick: lowerPeerHand }, /* @__PURE__ */ import_react95.default.createElement(import_react_icons43.CrossIcon, { height: 18, width: 18 })), !isInStage && /* @__PURE__ */ import_react95.default.createElement(Button, { variant: "primary", onClick: handleStageAction, css: quickActionStyle }, /* @__PURE__ */ import_react95.default.createElement(import_react_icons43.AddIcon, { height: 18, width: 18 })));
     };
     ParticipantMoreActions = ({ peerId, role }) => {
       const {
@@ -23212,25 +23206,38 @@ var init_WhiteboardToggle = __esm({
     init_ToastManager();
     WhiteboardToggle = () => {
       const { toggle, open, isOwner } = (0, import_react_sdk48.useWhiteboard)();
+      const { screenSharingPeerId, amIScreenSharing } = (0, import_react_sdk48.useScreenShare)();
+      const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
+      const disabled = remoteScreenShare || open && !isOwner;
       if (!toggle) {
         return null;
       }
-      return /* @__PURE__ */ import_react97.default.createElement(Tooltip, { key: "whiteboard", title: `${open ? "Close" : "Open"} Whiteboard` }, /* @__PURE__ */ import_react97.default.createElement(
-        IconButton_default,
+      return /* @__PURE__ */ import_react97.default.createElement(
+        Tooltip,
         {
-          onClick: () => __async(void 0, null, function* () {
-            try {
-              yield toggle();
-            } catch (error) {
-              ToastManager.addToast({ title: error.message, variant: "error" });
-            }
-          }),
-          active: !open,
-          disabled: open && !isOwner,
-          "data-testid": "whiteboard_btn"
+          key: "whiteboard",
+          title: remoteScreenShare ? "Cannot open whiteboard when viewing a shared screen" : `${open ? "Close" : "Open"} Whiteboard`
         },
-        /* @__PURE__ */ import_react97.default.createElement(import_react_icons45.PencilDrawIcon, null)
-      ));
+        /* @__PURE__ */ import_react97.default.createElement(
+          IconButton_default,
+          {
+            onClick: () => __async(void 0, null, function* () {
+              if (disabled) {
+                return;
+              }
+              try {
+                yield toggle();
+              } catch (error) {
+                ToastManager.addToast({ title: error.message, variant: "error" });
+              }
+            }),
+            active: !open,
+            disabled,
+            "data-testid": "whiteboard_btn"
+          },
+          /* @__PURE__ */ import_react97.default.createElement(import_react_icons45.PencilDrawIcon, null)
+        )
+      );
     };
   }
 });
@@ -30107,13 +30114,105 @@ var init_ScreenshareLayout = __esm({
   }
 });
 
+// src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx
+var import_react176, import_react_use39, import_react_sdk91, WhiteboardEmbed, WhiteboardLayout;
+var init_WhiteboardLayout = __esm({
+  "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx"() {
+    "use strict";
+    init_define_process_env();
+    import_react176 = __toESM(require("react"));
+    import_react_use39 = require("react-use");
+    import_react_sdk91 = require("@100mslive/react-sdk");
+    init_Layout();
+    init_Theme();
+    init_InsetTile();
+    init_SecondaryTiles();
+    init_LayoutSettings();
+    init_ProminenceLayout();
+    init_useUISettings();
+    init_constants();
+    WhiteboardEmbed = () => {
+      const isMobile = (0, import_react_use39.useMedia)(config.media.md);
+      const { iframeRef } = (0, import_react_sdk91.useWhiteboard)(isMobile);
+      return /* @__PURE__ */ import_react176.default.createElement(
+        Box,
+        {
+          css: {
+            mx: "$8",
+            flex: "3 1 0",
+            "@lg": {
+              flex: "2 1 0",
+              display: "flex",
+              alignItems: "center"
+            }
+          }
+        },
+        /* @__PURE__ */ import_react176.default.createElement(
+          "iframe",
+          {
+            title: "Whiteboard View",
+            ref: iframeRef,
+            style: {
+              width: "100%",
+              height: "100%",
+              border: 0,
+              borderRadius: "0.75rem"
+            },
+            allow: "autoplay; clipboard-write;",
+            referrerPolicy: "no-referrer"
+          }
+        )
+      );
+    };
+    WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
+      const whiteboard = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectWhiteboard);
+      const whiteboardOwner = (0, import_react_sdk91.useHMSStore)((0, import_react_sdk91.selectPeerByCondition)((peer) => peer.customerUserId === (whiteboard == null ? void 0 : whiteboard.owner)));
+      const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
+      const isMobile = (0, import_react_use39.useMedia)(config.media.md);
+      const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
+      const secondaryPeers = (0, import_react176.useMemo)(() => {
+        if (layoutMode === LayoutMode.SPOTLIGHT) {
+          return [];
+        }
+        if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
+          return whiteboardOwner ? [whiteboardOwner, ...peers.filter((p) => p.id !== (whiteboardOwner == null ? void 0 : whiteboardOwner.id))] : peers;
+        }
+        return peers.filter((p) => p.id !== (whiteboardOwner == null ? void 0 : whiteboardOwner.id));
+      }, [whiteboardOwner, peers, isMobile, layoutMode]);
+      (0, import_react176.useEffect)(() => {
+        if (isMobile) {
+          setLayoutMode(LayoutMode.GALLERY);
+          return;
+        }
+        if (layoutMode === LayoutMode.SIDEBAR) {
+          return;
+        }
+        setLayoutMode(LayoutMode.SIDEBAR);
+        return () => {
+          setLayoutMode(LayoutMode.GALLERY);
+        };
+      }, [isMobile]);
+      return /* @__PURE__ */ import_react176.default.createElement(ProminenceLayout.Root, { edgeToEdge, hasSidebar }, /* @__PURE__ */ import_react176.default.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ import_react176.default.createElement(WhiteboardEmbed, null)), /* @__PURE__ */ import_react176.default.createElement(
+        SecondaryTiles,
+        {
+          peers: secondaryPeers,
+          onPageChange,
+          onPageSize,
+          edgeToEdge,
+          hasSidebar
+        }
+      ), layoutMode === LayoutMode.SPOTLIGHT && whiteboardOwner && /* @__PURE__ */ import_react176.default.createElement(InsetTile, { peerId: whiteboardOwner == null ? void 0 : whiteboardOwner.id }));
+    };
+  }
+});
+
 // src/Prebuilt/common/PeersSorter.ts
-var import_react_sdk91, PeersSorter, PeersSorter_default;
+var import_react_sdk92, PeersSorter, PeersSorter_default;
 var init_PeersSorter = __esm({
   "src/Prebuilt/common/PeersSorter.ts"() {
     "use strict";
     init_define_process_env();
-    import_react_sdk91 = require("@100mslive/react-sdk");
+    import_react_sdk92 = require("@100mslive/react-sdk");
     PeersSorter = class {
       constructor(store) {
         this.storeUnsubscribe = void 0;
@@ -30135,7 +30234,7 @@ var init_PeersSorter = __esm({
             }
           });
           if (!this.storeUnsubscribe) {
-            this.storeUnsubscribe = this.store.subscribe(this.onDominantSpeakerChange, import_react_sdk91.selectDominantSpeaker);
+            this.storeUnsubscribe = this.store.subscribe(this.onDominantSpeakerChange, import_react_sdk92.selectDominantSpeaker);
           }
           this.moveSpeakerToFront(this.speaker);
         };
@@ -30209,16 +30308,17 @@ var init_PeersSorter = __esm({
 });
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-var import_react176, import_react_sdk92, GridLayout;
+var import_react177, import_react_sdk93, GridLayout;
 var init_GridLayout = __esm({
   "src/Prebuilt/components/VideoLayouts/GridLayout.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react176 = __toESM(require("react"));
-    import_react_sdk92 = require("@100mslive/react-sdk");
+    import_react177 = __toESM(require("react"));
+    import_react_sdk93 = require("@100mslive/react-sdk");
     init_EqualProminence();
     init_RoleProminence();
     init_ScreenshareLayout();
+    init_WhiteboardLayout();
     init_useUISettings();
     init_useVideoTileLayout();
     init_PeersSorter();
@@ -30234,18 +30334,19 @@ var init_GridLayout = __esm({
       edge_to_edge = false,
       hide_metadata_on_tile = false
     }) => {
-      const peerSharing = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectPeerScreenSharing);
+      const peerSharing = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectPeerScreenSharing);
+      const whiteboard = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectWhiteboard);
       const pinnedTrack = usePinnedTrack();
-      const peers = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectPeers);
-      const localPeerRole = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectLocalPeerRoleName);
-      const localPeerID = (0, import_react_sdk92.useHMSStore)(import_react_sdk92.selectLocalPeerID);
+      const peers = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectPeers);
+      const localPeerRole = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectLocalPeerRoleName);
+      const localPeerID = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectLocalPeerID);
       const [activeScreensharePeerId] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
       const isRoleProminence = prominentRoles.length && peers.some(
         (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
       ) || pinnedTrack;
-      const updatedPeers = (0, import_react176.useMemo)(() => {
-        if (activeScreensharePeerId) {
-          return peers.filter((peer) => peer.id !== activeScreensharePeerId);
+      const updatedPeers = (0, import_react177.useMemo)(() => {
+        if (activeScreensharePeerId || (whiteboard == null ? void 0 : whiteboard.open)) {
+          return peers.filter((peer) => peer.id !== activeScreensharePeerId || peer.customerUserId !== (whiteboard == null ? void 0 : whiteboard.owner));
         }
         if (isInsetEnabled) {
           const isLocalPeerPinned = localPeerID === (pinnedTrack == null ? void 0 : pinnedTrack.peerId);
@@ -30256,12 +30357,21 @@ var init_GridLayout = __esm({
           }
         }
         return peers;
-      }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, localPeerID, prominentRoles, peers, pinnedTrack]);
-      const vanillaStore = (0, import_react_sdk92.useHMSVanillaStore)();
-      const [sortedPeers, setSortedPeers] = (0, import_react176.useState)(updatedPeers);
-      const peersSorter = (0, import_react176.useMemo)(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-      const [pageSize, setPageSize] = (0, import_react176.useState)(0);
-      const [mainPage, setMainPage] = (0, import_react176.useState)(0);
+      }, [
+        isInsetEnabled,
+        whiteboard,
+        activeScreensharePeerId,
+        localPeerRole,
+        localPeerID,
+        prominentRoles,
+        peers,
+        pinnedTrack
+      ]);
+      const vanillaStore = (0, import_react_sdk93.useHMSVanillaStore)();
+      const [sortedPeers, setSortedPeers] = (0, import_react177.useState)(updatedPeers);
+      const peersSorter = (0, import_react177.useMemo)(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
+      const [pageSize, setPageSize] = (0, import_react177.useState)(0);
+      const [mainPage, setMainPage] = (0, import_react177.useState)(0);
       const tileLayout = {
         enableSpotlightingPeer: enable_spotlighting_peer,
         hideParticipantNameOnTile: hide_participant_name_on_tile,
@@ -30270,7 +30380,7 @@ var init_GridLayout = __esm({
         hideMetadataOnTile: hide_metadata_on_tile,
         objectFit: video_object_fit
       };
-      (0, import_react176.useEffect)(() => {
+      (0, import_react177.useEffect)(() => {
         if (mainPage !== 0) {
           return;
         }
@@ -30281,7 +30391,7 @@ var init_GridLayout = __esm({
         peersSorter.onUpdate(setSortedPeers);
       }, [mainPage, peersSorter, updatedPeers, pageSize]);
       if (peerSharing) {
-        return /* @__PURE__ */ import_react176.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react176.default.createElement(
+        return /* @__PURE__ */ import_react177.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react177.default.createElement(
           ScreenshareLayout,
           {
             peers: sortedPeers,
@@ -30290,8 +30400,18 @@ var init_GridLayout = __esm({
             edgeToEdge: edge_to_edge
           }
         ));
+      } else if (whiteboard == null ? void 0 : whiteboard.open) {
+        return /* @__PURE__ */ import_react177.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react177.default.createElement(
+          WhiteboardLayout,
+          {
+            peers: sortedPeers,
+            onPageSize: setPageSize,
+            onPageChange: setMainPage,
+            edgeToEdge: edge_to_edge
+          }
+        ));
       } else if (isRoleProminence) {
-        return /* @__PURE__ */ import_react176.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react176.default.createElement(
+        return /* @__PURE__ */ import_react177.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react177.default.createElement(
           RoleProminence,
           {
             peers: sortedPeers,
@@ -30303,7 +30423,7 @@ var init_GridLayout = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ import_react176.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react176.default.createElement(
+      return /* @__PURE__ */ import_react177.default.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ import_react177.default.createElement(
         EqualProminence,
         {
           peers: sortedPeers,
@@ -30318,13 +30438,13 @@ var init_GridLayout = __esm({
 });
 
 // src/Prebuilt/layouts/EmbedView.jsx
-var import_react177, import_react_sdk93, EmbedView, EmbedScreenShareView, EmbedComponent;
+var import_react178, import_react_sdk94, EmbedView, EmbedScreenShareView, EmbedComponent;
 var init_EmbedView = __esm({
   "src/Prebuilt/layouts/EmbedView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react177 = __toESM(require("react"));
-    import_react_sdk93 = require("@100mslive/react-sdk");
+    import_react178 = __toESM(require("react"));
+    import_react_sdk94 = require("@100mslive/react-sdk");
     init_SecondaryTiles();
     init_ToastManager();
     init_ProminenceLayout();
@@ -30332,29 +30452,29 @@ var init_EmbedView = __esm({
     init_useUISettings();
     init_constants();
     EmbedView = () => {
-      return /* @__PURE__ */ import_react177.default.createElement(EmbedScreenShareView, null, /* @__PURE__ */ import_react177.default.createElement(EmbedComponent, null));
+      return /* @__PURE__ */ import_react178.default.createElement(EmbedScreenShareView, null, /* @__PURE__ */ import_react178.default.createElement(EmbedComponent, null));
     };
     EmbedScreenShareView = ({ children }) => {
-      const peers = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectPeers);
-      const peerPresenting = (0, import_react_sdk93.useHMSStore)(import_react_sdk93.selectPeerScreenSharing);
+      const peers = (0, import_react_sdk94.useHMSStore)(import_react_sdk94.selectPeers);
+      const peerPresenting = (0, import_react_sdk94.useHMSStore)(import_react_sdk94.selectPeerScreenSharing);
       const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-      const smallTilePeers = (0, import_react177.useMemo)(() => {
+      const smallTilePeers = (0, import_react178.useMemo)(() => {
         const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
         return smallTilePeers2;
       }, [peers, peerPresenting]);
-      (0, import_react177.useEffect)(() => {
+      (0, import_react178.useEffect)(() => {
         setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
         return () => {
           setActiveScreenSharePeer("");
         };
       }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
-      return /* @__PURE__ */ import_react177.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react177.default.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ import_react177.default.createElement(SecondaryTiles, { peers: smallTilePeers }));
+      return /* @__PURE__ */ import_react178.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react178.default.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ import_react178.default.createElement(SecondaryTiles, { peers: smallTilePeers }));
     };
     EmbedComponent = () => {
-      const embedConfig = (0, import_react_sdk93.useHMSStore)((0, import_react_sdk93.selectAppData)(APP_DATA.embedConfig));
+      const embedConfig = (0, import_react_sdk94.useHMSStore)((0, import_react_sdk94.selectAppData)(APP_DATA.embedConfig));
       const resetConfig = useResetEmbedConfig();
-      const { iframeRef, startEmbedShare, isEmbedShareInProgress } = (0, import_react_sdk93.useEmbedShare)(resetConfig);
-      (0, import_react177.useEffect)(() => {
+      const { iframeRef, startEmbedShare, isEmbedShareInProgress } = (0, import_react_sdk94.useEmbedShare)(resetConfig);
+      (0, import_react178.useEffect)(() => {
         (() => __async(void 0, null, function* () {
           if (embedConfig && !isEmbedShareInProgress) {
             try {
@@ -30369,7 +30489,7 @@ var init_EmbedView = __esm({
           }
         }))();
       }, [isEmbedShareInProgress, embedConfig, startEmbedShare, resetConfig]);
-      return /* @__PURE__ */ import_react177.default.createElement(
+      return /* @__PURE__ */ import_react178.default.createElement(
         Box,
         {
           css: {
@@ -30382,7 +30502,7 @@ var init_EmbedView = __esm({
             }
           }
         },
-        /* @__PURE__ */ import_react177.default.createElement(
+        /* @__PURE__ */ import_react178.default.createElement(
           "iframe",
           {
             title: "Embed View",
@@ -30403,13 +30523,13 @@ var init_EmbedView = __esm({
 });
 
 // src/Prebuilt/layouts/PDFView.jsx
-var import_react178, import_react_sdk94, PDFView;
+var import_react179, import_react_sdk95, PDFView;
 var init_PDFView = __esm({
   "src/Prebuilt/layouts/PDFView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react178 = __toESM(require("react"));
-    import_react_sdk94 = require("@100mslive/react-sdk");
+    import_react179 = __toESM(require("react"));
+    import_react_sdk95 = require("@100mslive/react-sdk");
     init_ToastManager();
     init_Layout();
     init_EmbedView();
@@ -30417,8 +30537,8 @@ var init_PDFView = __esm({
     PDFView = () => {
       const pdfConfig = usePDFConfig();
       const resetConfig = useResetPDFConfig();
-      const { iframeRef, startPDFShare, isPDFShareInProgress } = (0, import_react_sdk94.usePDFShare)(resetConfig);
-      (0, import_react178.useEffect)(() => {
+      const { iframeRef, startPDFShare, isPDFShareInProgress } = (0, import_react_sdk95.usePDFShare)(resetConfig);
+      (0, import_react179.useEffect)(() => {
         (() => __async(void 0, null, function* () {
           try {
             if (!isPDFShareInProgress && pdfConfig) {
@@ -30433,7 +30553,7 @@ var init_PDFView = __esm({
           }
         }))();
       }, [isPDFShareInProgress, pdfConfig, resetConfig, startPDFShare]);
-      return /* @__PURE__ */ import_react178.default.createElement(EmbedScreenShareView, null, /* @__PURE__ */ import_react178.default.createElement(
+      return /* @__PURE__ */ import_react179.default.createElement(EmbedScreenShareView, null, /* @__PURE__ */ import_react179.default.createElement(
         Box,
         {
           css: {
@@ -30446,7 +30566,7 @@ var init_PDFView = __esm({
             }
           }
         },
-        /* @__PURE__ */ import_react178.default.createElement(
+        /* @__PURE__ */ import_react179.default.createElement(
           "iframe",
           {
             title: "Embed View",
@@ -30467,17 +30587,17 @@ var init_PDFView = __esm({
 });
 
 // src/Prebuilt/layouts/WaitingView.jsx
-var import_react179, import_react_icons84, WaitingView;
+var import_react180, import_react_icons84, WaitingView;
 var init_WaitingView = __esm({
   "src/Prebuilt/layouts/WaitingView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react179 = __toESM(require("react"));
+    import_react180 = __toESM(require("react"));
     import_react_icons84 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
-    WaitingView = import_react179.default.memo(() => {
-      return /* @__PURE__ */ import_react179.default.createElement(
+    WaitingView = import_react180.default.memo(() => {
+      return /* @__PURE__ */ import_react180.default.createElement(
         Box,
         {
           css: {
@@ -30491,7 +30611,7 @@ var init_WaitingView = __esm({
           },
           "data-testid": "waiting_view"
         },
-        /* @__PURE__ */ import_react179.default.createElement(
+        /* @__PURE__ */ import_react180.default.createElement(
           Flex,
           {
             align: "center",
@@ -30505,8 +30625,8 @@ var init_WaitingView = __esm({
               gap: "$8"
             }
           },
-          /* @__PURE__ */ import_react179.default.createElement(import_react_icons84.ColoredTimeIcon, { width: "80px", height: "80px" }),
-          /* @__PURE__ */ import_react179.default.createElement(
+          /* @__PURE__ */ import_react180.default.createElement(import_react_icons84.ColoredTimeIcon, { width: "80px", height: "80px" }),
+          /* @__PURE__ */ import_react180.default.createElement(
             Flex,
             {
               direction: "column",
@@ -30516,8 +30636,8 @@ var init_WaitingView = __esm({
                 gap: "$4"
               }
             },
-            /* @__PURE__ */ import_react179.default.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-            /* @__PURE__ */ import_react179.default.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
+            /* @__PURE__ */ import_react180.default.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+            /* @__PURE__ */ import_react180.default.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
           )
         )
       );
@@ -30525,73 +30645,6 @@ var init_WaitingView = __esm({
   }
 });
 
-// src/Prebuilt/layouts/WhiteboardView.tsx
-var import_react180, import_react_use39, import_react_sdk95, EmbedComponent2, WhiteboardView;
-var init_WhiteboardView = __esm({
-  "src/Prebuilt/layouts/WhiteboardView.tsx"() {
-    "use strict";
-    init_define_process_env();
-    import_react180 = __toESM(require("react"));
-    import_react_use39 = require("react-use");
-    import_react_sdk95 = require("@100mslive/react-sdk");
-    init_SecondaryTiles();
-    init_ProminenceLayout();
-    init_src();
-    init_Layout();
-    init_useUISettings();
-    init_constants();
-    EmbedComponent2 = () => {
-      const isMobile = (0, import_react_use39.useMedia)(config.media.md);
-      const { iframeRef } = (0, import_react_sdk95.useWhiteboard)(isMobile);
-      return /* @__PURE__ */ import_react180.default.createElement(
-        Box,
-        {
-          css: {
-            mx: "$8",
-            flex: "3 1 0",
-            "@lg": {
-              flex: "2 1 0",
-              display: "flex",
-              alignItems: "center"
-            }
-          }
-        },
-        /* @__PURE__ */ import_react180.default.createElement(
-          "iframe",
-          {
-            title: "Whiteboard View",
-            ref: iframeRef,
-            style: {
-              width: "100%",
-              height: "100%",
-              border: 0,
-              borderRadius: "0.75rem"
-            },
-            allow: "autoplay; clipboard-write;",
-            referrerPolicy: "no-referrer"
-          }
-        )
-      );
-    };
-    WhiteboardView = () => {
-      const peers = (0, import_react_sdk95.useHMSStore)(import_react_sdk95.selectPeers);
-      const whiteboard = (0, import_react_sdk95.useHMSStore)(import_react_sdk95.selectWhiteboard);
-      const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-      const smallTilePeers = (0, import_react180.useMemo)(() => {
-        const smallTilePeers2 = peers.filter((peer) => peer.id !== (whiteboard == null ? void 0 : whiteboard.owner));
-        return smallTilePeers2;
-      }, [peers, whiteboard == null ? void 0 : whiteboard.owner]);
-      (0, import_react180.useEffect)(() => {
-        setActiveScreenSharePeer((whiteboard == null ? void 0 : whiteboard.owner) || "");
-        return () => {
-          setActiveScreenSharePeer("");
-        };
-      }, [whiteboard == null ? void 0 : whiteboard.owner, setActiveScreenSharePeer]);
-      return /* @__PURE__ */ import_react180.default.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ import_react180.default.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ import_react180.default.createElement(EmbedComponent2, null)), /* @__PURE__ */ import_react180.default.createElement(SecondaryTiles, { peers: smallTilePeers }));
-    };
-  }
-});
-
 // src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx
 var import_react181, import_react_use40, import_react_sdk96, useCloseScreenshareWhiteboard;
 var init_useCloseScreenshareWhiteboard = __esm({
@@ -30602,19 +30655,27 @@ var init_useCloseScreenshareWhiteboard = __esm({
     import_react_use40 = require("react-use");
     import_react_sdk96 = require("@100mslive/react-sdk");
     useCloseScreenshareWhiteboard = () => {
-      const { amIScreenSharing, toggleScreenShare } = (0, import_react_sdk96.useScreenShare)();
+      const { amIScreenSharing, screenSharingPeerId, toggleScreenShare } = (0, import_react_sdk96.useScreenShare)();
       const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = (0, import_react_sdk96.useWhiteboard)();
-      const prevScreenSharer = (0, import_react_use40.usePrevious)(amIScreenSharing);
+      const prevScreenSharer = (0, import_react_use40.usePrevious)(screenSharingPeerId);
       const prevWhiteboardOwner = (0, import_react_use40.usePrevious)(isWhiteboardOwner);
       (0, import_react181.useEffect)(() => {
-        if (isWhiteboardOwner && amIScreenSharing) {
-          if (prevScreenSharer && !prevWhiteboardOwner) {
+        if (isWhiteboardOwner && screenSharingPeerId) {
+          if (prevScreenSharer && amIScreenSharing && !prevWhiteboardOwner) {
             toggleScreenShare == null ? void 0 : toggleScreenShare();
           } else if (prevWhiteboardOwner && !prevScreenSharer) {
             toggleWhiteboard == null ? void 0 : toggleWhiteboard();
           }
         }
-      }, [isWhiteboardOwner, amIScreenSharing, prevScreenSharer, prevWhiteboardOwner, toggleScreenShare, toggleWhiteboard]);
+      }, [
+        isWhiteboardOwner,
+        screenSharingPeerId,
+        amIScreenSharing,
+        prevScreenSharer,
+        prevWhiteboardOwner,
+        toggleScreenShare,
+        toggleWhiteboard
+      ]);
     };
   }
 });
@@ -30756,6 +30817,7 @@ var init_HMSVideo = __esm({
             size: "100%",
             position: "relative",
             justifyContent: "center",
+            transition: "all 0.3s ease-in-out",
             "@md": {
               height: "auto",
               "& video": {
@@ -30845,15 +30907,15 @@ var init_PlayPauseButton = __esm({
   }
 });
 
-// src/Prebuilt/components/HMSVideo/SeekControls.tsx
-var import_react186, SeekControls;
-var init_SeekControls = __esm({
-  "src/Prebuilt/components/HMSVideo/SeekControls.tsx"() {
+// src/Prebuilt/components/HMSVideo/SeekControl.tsx
+var import_react186, SeekControl;
+var init_SeekControl = __esm({
+  "src/Prebuilt/components/HMSVideo/SeekControl.tsx"() {
     "use strict";
     init_define_process_env();
     import_react186 = __toESM(require("react"));
     init_src();
-    SeekControls = ({
+    SeekControl = ({
       title,
       onClick,
       children,
@@ -30864,6 +30926,151 @@ var init_SeekControls = __esm({
   }
 });
 
+// src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
+var import_react187, import_react_use41, import_react_icons87, PlayPauseSeekControls, PlayPauseSeekOverlayControls;
+var init_PlayPauseSeekControls = __esm({
+  "src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx"() {
+    "use strict";
+    init_define_process_env();
+    import_react187 = __toESM(require("react"));
+    import_react_use41 = require("react-use");
+    import_react_icons87 = require("@100mslive/react-icons");
+    init_Layout();
+    init_Text2();
+    init_Theme();
+    init_PlayPauseButton();
+    init_SeekControl();
+    init_hooks();
+    PlayPauseSeekControls = ({
+      isPaused,
+      onSeekTo
+    }) => {
+      return /* @__PURE__ */ import_react187.default.createElement(import_react187.default.Fragment, null, /* @__PURE__ */ import_react187.default.createElement(
+        SeekControl,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onSeekTo(-10);
+          },
+          title: "backward"
+        },
+        /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.BackwardArrowIcon, { width: 20, height: 20 })
+      ), /* @__PURE__ */ import_react187.default.createElement(PlayPauseButton, { isPaused }), /* @__PURE__ */ import_react187.default.createElement(
+        SeekControl,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onSeekTo(10);
+          },
+          title: "forward"
+        },
+        /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.ForwardArrowIcon, { width: 20, height: 20 })
+      ));
+    };
+    PlayPauseSeekOverlayControls = ({
+      isPaused,
+      showControls,
+      hoverControlsVisible
+    }) => {
+      const isMobile = (0, import_react_use41.useMedia)(config.media.md);
+      const isLandscape = useIsLandscape();
+      if (!isMobile && !isLandscape) {
+        return /* @__PURE__ */ import_react187.default.createElement(import_react187.default.Fragment, null, /* @__PURE__ */ import_react187.default.createElement(
+          Flex,
+          {
+            css: {
+              bg: "rgba(0, 0, 0, 0.6)",
+              r: "$round",
+              size: "$24",
+              visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+              opacity: hoverControlsVisible.seekBackward ? `1` : "0"
+            },
+            direction: "column",
+            align: "center"
+          },
+          /* @__PURE__ */ import_react187.default.createElement(SeekControl, { title: "backward" }, /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.BackwardArrowIcon, { width: 52, height: 52 })),
+          /* @__PURE__ */ import_react187.default.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
+        ), /* @__PURE__ */ import_react187.default.createElement(
+          Box,
+          {
+            css: {
+              bg: "rgba(0, 0, 0, 0.6)",
+              r: "$round",
+              visibility: hoverControlsVisible.pausePlay ? `` : `hidden`,
+              opacity: hoverControlsVisible.pausePlay ? `1` : "0"
+            }
+          },
+          /* @__PURE__ */ import_react187.default.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
+        ), /* @__PURE__ */ import_react187.default.createElement(
+          Flex,
+          {
+            css: {
+              bg: "rgba(0, 0, 0, 0.6)",
+              r: "$round",
+              size: "$24",
+              visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+              opacity: hoverControlsVisible.seekForward ? `1` : "0"
+            },
+            direction: "column",
+            align: "center"
+          },
+          /* @__PURE__ */ import_react187.default.createElement(SeekControl, { title: "forward" }, /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.ForwardArrowIcon, { width: 52, height: 52 })),
+          /* @__PURE__ */ import_react187.default.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
+        ));
+      }
+      return /* @__PURE__ */ import_react187.default.createElement(
+        Flex,
+        {
+          align: "center",
+          justify: "center",
+          css: {
+            position: "absolute",
+            bg: "#00000066",
+            display: "inline-flex",
+            gap: "$2",
+            zIndex: 1,
+            size: "100%",
+            visibility: showControls ? `` : `hidden`,
+            opacity: showControls ? `1` : "0"
+          }
+        },
+        /* @__PURE__ */ import_react187.default.createElement(
+          SeekControl,
+          {
+            title: "backward",
+            css: {
+              visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+              opacity: hoverControlsVisible.seekBackward ? `1` : "0"
+            }
+          },
+          /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.BackwardArrowIcon, { width: 32, height: 32 })
+        ),
+        /* @__PURE__ */ import_react187.default.createElement(
+          Box,
+          {
+            css: {
+              bg: "rgba(0, 0, 0, 0.6)",
+              r: "$round"
+            }
+          },
+          /* @__PURE__ */ import_react187.default.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
+        ),
+        /* @__PURE__ */ import_react187.default.createElement(
+          SeekControl,
+          {
+            title: "forward",
+            css: {
+              visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+              opacity: hoverControlsVisible.seekForward ? `1` : "0"
+            }
+          },
+          /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.ForwardArrowIcon, { width: 32, height: 32 })
+        )
+      );
+    };
+  }
+});
+
 // src/Prebuilt/components/HMSVideo/utils.ts
 function getPercentage(a2, b) {
   return a2 / b * 100;
@@ -30891,12 +31098,12 @@ var init_utils6 = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
-var import_react187, VideoProgress;
+var import_react188, VideoProgress;
 var init_VideoProgress = __esm({
   "src/Prebuilt/components/HMSVideo/VideoProgress.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react187 = __toESM(require("react"));
+    import_react188 = __toESM(require("react"));
     init_src();
     init_PlayerContext();
     init_utils6();
@@ -30905,10 +31112,10 @@ var init_VideoProgress = __esm({
       setSeekProgress
     }) => {
       const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-      const [videoProgress, setVideoProgress] = (0, import_react187.useState)(0);
-      const [bufferProgress, setBufferProgress] = (0, import_react187.useState)(0);
+      const [videoProgress, setVideoProgress] = (0, import_react188.useState)(0);
+      const [bufferProgress, setBufferProgress] = (0, import_react188.useState)(0);
       const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-      const setProgress = (0, import_react187.useCallback)(() => {
+      const setProgress = (0, import_react188.useCallback)(() => {
         var _a8, _b7;
         if (!videoEl) {
           return;
@@ -30919,16 +31126,20 @@ var init_VideoProgress = __esm({
         if (videoEl.buffered.length > 0) {
           bufferProgress2 = Math.floor(getPercentage((_b7 = videoEl.buffered) == null ? void 0 : _b7.end(0), duration));
         }
-        setVideoProgress(isNaN(videoProgress2) ? 0 : videoProgress2);
-        setBufferProgress(isNaN(bufferProgress2) ? 0 : bufferProgress2);
+        if (!isNaN(videoProgress2)) {
+          setVideoProgress(videoProgress2);
+        }
+        if (!isNaN(bufferProgress2)) {
+          setBufferProgress(bufferProgress2);
+        }
       }, [videoEl]);
-      const timeupdateHandler = (0, import_react187.useCallback)(() => {
+      const timeupdateHandler = (0, import_react188.useCallback)(() => {
         if (!videoEl || seekProgress) {
           return;
         }
         setProgress();
       }, [seekProgress, setProgress, videoEl]);
-      (0, import_react187.useEffect)(() => {
+      (0, import_react188.useEffect)(() => {
         if (!videoEl) {
           return;
         }
@@ -30936,7 +31147,7 @@ var init_VideoProgress = __esm({
         return function cleanup() {
           videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
         };
-      }, [timeupdateHandler, videoEl]);
+      }, [setProgress, timeupdateHandler, videoEl]);
       const onProgress = (progress) => {
         var _a8;
         const progress1 = Math.floor(getPercentage(progress[0], 100));
@@ -30952,7 +31163,7 @@ var init_VideoProgress = __esm({
       if (!videoEl) {
         return null;
       }
-      return /* @__PURE__ */ import_react187.default.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ import_react187.default.createElement(
+      return /* @__PURE__ */ import_react188.default.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ import_react188.default.createElement(
         Slider,
         {
           id: "video-actual-rest",
@@ -30972,7 +31183,7 @@ var init_VideoProgress = __esm({
           onPointerUp: () => setSeekProgress(false),
           thumbStyles: { w: "$6", h: "$6" }
         }
-      ), /* @__PURE__ */ import_react187.default.createElement(
+      ), /* @__PURE__ */ import_react188.default.createElement(
         Box,
         {
           id: "video-buffer",
@@ -30991,20 +31202,20 @@ var init_VideoProgress = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VideoTime.tsx
-var import_react188, import_hls_player2, VideoTime;
+var import_react189, import_hls_player2, VideoTime;
 var init_VideoTime = __esm({
   "src/Prebuilt/components/HMSVideo/VideoTime.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react188 = __toESM(require("react"));
+    import_react189 = __toESM(require("react"));
     import_hls_player2 = require("@100mslive/hls-player");
     init_Text2();
     init_PlayerContext();
     init_utils6();
     VideoTime = () => {
       const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-      const [videoTime, setVideoTime] = (0, import_react188.useState)("");
-      (0, import_react188.useEffect)(() => {
+      const [videoTime, setVideoTime] = (0, import_react189.useState)("");
+      (0, import_react189.useEffect)(() => {
         const timeupdateHandler = (currentTime) => {
           const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
           if (videoEl) {
@@ -31021,7 +31232,7 @@ var init_VideoTime = __esm({
           hlsPlayer2 == null ? void 0 : hlsPlayer2.off(import_hls_player2.HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
         };
       }, [hlsPlayer2]);
-      return hlsPlayer2 ? /* @__PURE__ */ import_react188.default.createElement(
+      return hlsPlayer2 ? /* @__PURE__ */ import_react189.default.createElement(
         Text,
         {
           variant: "body1",
@@ -31041,21 +31252,21 @@ var init_VideoTime = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VolumeControl.tsx
-var import_react189, import_react_icons87, VolumeControl, VolumeIcon;
+var import_react190, import_react_icons88, VolumeControl, VolumeIcon;
 var init_VolumeControl = __esm({
   "src/Prebuilt/components/HMSVideo/VolumeControl.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react189 = __toESM(require("react"));
-    import_react_icons87 = require("@100mslive/react-icons");
+    import_react190 = __toESM(require("react"));
+    import_react_icons88 = require("@100mslive/react-icons");
     init_src();
     init_PlayerContext();
     VolumeControl = () => {
       var _a8;
       const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-      const [volume, setVolume] = (0, import_react189.useState)((_a8 = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a8 : 100);
-      const [showSlider, setShowSlider] = (0, import_react189.useState)(false);
-      return /* @__PURE__ */ import_react189.default.createElement(
+      const [volume, setVolume] = (0, import_react190.useState)((_a8 = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a8 : 100);
+      const [showSlider, setShowSlider] = (0, import_react190.useState)(false);
+      return /* @__PURE__ */ import_react190.default.createElement(
         Flex,
         {
           align: "center",
@@ -31069,7 +31280,7 @@ var init_VolumeControl = __esm({
             setShowSlider(false);
           }
         },
-        /* @__PURE__ */ import_react189.default.createElement(
+        /* @__PURE__ */ import_react190.default.createElement(
           VolumeIcon,
           {
             volume,
@@ -31084,7 +31295,7 @@ var init_VolumeControl = __esm({
             }
           }
         ),
-        /* @__PURE__ */ import_react189.default.createElement(
+        /* @__PURE__ */ import_react190.default.createElement(
           Slider,
           {
             css: {
@@ -31112,9 +31323,9 @@ var init_VolumeControl = __esm({
     };
     VolumeIcon = ({ volume, onClick }) => {
       if (volume === 0) {
-        return /* @__PURE__ */ import_react189.default.createElement(import_react_icons87.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+        return /* @__PURE__ */ import_react190.default.createElement(import_react_icons88.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
       }
-      return volume < 50 ? /* @__PURE__ */ import_react189.default.createElement(import_react_icons87.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react189.default.createElement(import_react_icons87.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+      return volume < 50 ? /* @__PURE__ */ import_react190.default.createElement(import_react_icons88.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react190.default.createElement(import_react_icons88.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
     };
   }
 });
@@ -31127,14 +31338,12 @@ var init_HMSVideo2 = __esm({
     init_define_process_env();
     init_Controls();
     init_HMSVideo();
-    init_PlayPauseButton();
-    init_SeekControls();
+    init_PlayPauseSeekControls();
     init_VideoProgress();
     init_VideoTime();
     init_VolumeControl();
     HMSVideoPlayer = {
       Root: HMSVideo,
-      PlayPauseButton,
       Progress: VideoProgress,
       Duration: VideoTime,
       Volume: VolumeControl,
@@ -31143,22 +31352,25 @@ var init_HMSVideo2 = __esm({
         Left: LeftControls,
         Right: RightControls
       },
-      Seeker: SeekControls
+      PlayPauseSeekControls: {
+        Overlay: PlayPauseSeekOverlayControls,
+        Button: PlayPauseSeekControls
+      }
     };
   }
 });
 
 // src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
-var import_react190, import_react_icons88, FullScreenButton2;
+var import_react191, import_react_icons89, FullScreenButton2;
 var init_FullscreenButton = __esm({
   "src/Prebuilt/components/HMSVideo/FullscreenButton.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react190 = __toESM(require("react"));
-    import_react_icons88 = require("@100mslive/react-icons");
+    import_react191 = __toESM(require("react"));
+    import_react_icons89 = require("@100mslive/react-icons");
     init_src();
     FullScreenButton2 = ({ isFullScreen, onToggle }) => {
-      return /* @__PURE__ */ import_react190.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react190.default.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ import_react190.default.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ import_react190.default.createElement(import_react_icons88.ShrinkIcon, null) : /* @__PURE__ */ import_react190.default.createElement(import_react_icons88.ExpandIcon, null))));
+      return /* @__PURE__ */ import_react191.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react191.default.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ import_react191.default.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ import_react191.default.createElement(import_react_icons89.ShrinkIcon, null) : /* @__PURE__ */ import_react191.default.createElement(import_react_icons89.ExpandIcon, null))));
     };
   }
 });
@@ -31169,9 +31381,9 @@ function HLSAutoplayBlockedPrompt({
   unblockAutoPlay
 }) {
   const isLandscape = useIsLandscape();
-  const isMobile = (0, import_react_use41.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use42.useMedia)(config.media.md);
   if ((isMobile || isLandscape) && open) {
-    return /* @__PURE__ */ import_react191.default.createElement(
+    return /* @__PURE__ */ import_react192.default.createElement(
       IconButton,
       {
         css: {
@@ -31184,8 +31396,8 @@ function HLSAutoplayBlockedPrompt({
           return yield unblockAutoPlay();
         })
       },
-      /* @__PURE__ */ import_react191.default.createElement(import_react_icons89.VolumeTwoIcon, { width: "32", height: "32" }),
-      /* @__PURE__ */ import_react191.default.createElement(
+      /* @__PURE__ */ import_react192.default.createElement(import_react_icons90.VolumeTwoIcon, { width: "32", height: "32" }),
+      /* @__PURE__ */ import_react192.default.createElement(
         Text,
         {
           variant: "body1",
@@ -31199,7 +31411,7 @@ function HLSAutoplayBlockedPrompt({
       )
     );
   }
-  return /* @__PURE__ */ import_react191.default.createElement(
+  return /* @__PURE__ */ import_react192.default.createElement(
     Dialog.Root,
     {
       open,
@@ -31209,7 +31421,7 @@ function HLSAutoplayBlockedPrompt({
         }
       })
     },
-    /* @__PURE__ */ import_react191.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react191.default.createElement(DialogRow, null, /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ import_react191.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react191.default.createElement(
+    /* @__PURE__ */ import_react192.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react192.default.createElement(DialogRow, null, /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ import_react192.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react192.default.createElement(
       Button,
       {
         variant: "primary",
@@ -31221,14 +31433,14 @@ function HLSAutoplayBlockedPrompt({
     )))
   );
 }
-var import_react191, import_react_use41, import_react_icons89;
+var import_react192, import_react_use42, import_react_icons90;
 var init_HLSAutoplayBlockedPrompt = __esm({
   "src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react191 = __toESM(require("react"));
-    import_react_use41 = require("react-use");
-    import_react_icons89 = require("@100mslive/react-icons");
+    import_react192 = __toESM(require("react"));
+    import_react_use42 = require("react-use");
+    import_react_icons90 = require("@100mslive/react-icons");
     init_src();
     init_DialogContent2();
     init_hooks();
@@ -31238,15 +31450,15 @@ var init_HLSAutoplayBlockedPrompt = __esm({
 // src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
 function HLSCaptionSelector({ isEnabled }) {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  return /* @__PURE__ */ import_react192.default.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ import_react192.default.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ import_react192.default.createElement(import_react_icons90.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react192.default.createElement(import_react_icons90.OpenCaptionIcon, { width: "20", height: "20px" })));
+  return /* @__PURE__ */ import_react193.default.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ import_react193.default.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.OpenCaptionIcon, { width: "20", height: "20px" })));
 }
-var import_react192, import_react_icons90;
+var import_react193, import_react_icons91;
 var init_HLSCaptionSelector = __esm({
   "src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react192 = __toESM(require("react"));
-    import_react_icons90 = require("@100mslive/react-icons");
+    import_react193 = __toESM(require("react"));
+    import_react_icons91 = require("@100mslive/react-icons");
     init_src();
     init_PlayerContext();
   }
@@ -31262,13 +31474,13 @@ function HLSQualitySelector({
   isAuto,
   containerRef
 }) {
-  const isMobile = (0, import_react_use42.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use43.useMedia)(config.media.md);
   const isLandscape = useIsLandscape();
   if (layers.length === 0) {
     return null;
   }
   if (isMobile || isLandscape) {
-    return /* @__PURE__ */ import_react193.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react193.default.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react193.default.createElement(
+    return /* @__PURE__ */ import_react194.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react194.default.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react194.default.createElement(
       Flex,
       {
         css: {
@@ -31278,15 +31490,15 @@ function HLSQualitySelector({
           p: "$2"
         }
       },
-      /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.SettingsIcon, null)
-    )), /* @__PURE__ */ import_react193.default.createElement(
+      /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.SettingsIcon, null)
+    )), /* @__PURE__ */ import_react194.default.createElement(
       Sheet.Content,
       {
         container: containerRef,
         css: { bg: "$surface_default", pb: "$1" },
         onClick: () => onOpenChange(false)
       },
-      /* @__PURE__ */ import_react193.default.createElement(
+      /* @__PURE__ */ import_react194.default.createElement(
         Sheet.Title,
         {
           css: {
@@ -31303,10 +31515,10 @@ function HLSQualitySelector({
           }
         },
         "Quality",
-        /* @__PURE__ */ import_react193.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.CrossIcon, null))
+        /* @__PURE__ */ import_react194.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.CrossIcon, null))
       ),
       layers.map((layer) => {
-        return /* @__PURE__ */ import_react193.default.createElement(
+        return /* @__PURE__ */ import_react194.default.createElement(
           Flex,
           {
             align: "center",
@@ -31324,12 +31536,12 @@ function HLSQualitySelector({
             key: layer.width,
             onClick: () => onQualityChange(layer)
           },
-          /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-          /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-          !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
+          /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+          /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
+          !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.CheckIcon, { width: "16px", height: "16px" })
         );
       }),
-      /* @__PURE__ */ import_react193.default.createElement(
+      /* @__PURE__ */ import_react194.default.createElement(
         Flex,
         {
           align: "center",
@@ -31347,12 +31559,12 @@ function HLSQualitySelector({
           key: "auto",
           onClick: () => onQualityChange({ height: "auto" })
         },
-        /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-        isAuto && /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+        isAuto && /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.CheckIcon, { width: "16px", height: "16px" })
       )
     ));
   }
-  return /* @__PURE__ */ import_react193.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value), modal: false }, /* @__PURE__ */ import_react193.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react193.default.createElement(
+  return /* @__PURE__ */ import_react194.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value), modal: false }, /* @__PURE__ */ import_react194.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react194.default.createElement(
     Flex,
     {
       css: {
@@ -31362,7 +31574,7 @@ function HLSQualitySelector({
         p: "$2"
       }
     },
-    /* @__PURE__ */ import_react193.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react193.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react193.default.createElement(
+    /* @__PURE__ */ import_react194.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react194.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react194.default.createElement(
       Box,
       {
         css: {
@@ -31373,8 +31585,8 @@ function HLSQualitySelector({
           c: "$on_surface_high"
         }
       },
-      /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.SettingsIcon, null)
-    ), /* @__PURE__ */ import_react193.default.createElement(
+      /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.SettingsIcon, null)
+    ), /* @__PURE__ */ import_react194.default.createElement(
       Text,
       {
         variant: {
@@ -31384,7 +31596,7 @@ function HLSQualitySelector({
         },
         css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
-      isAuto && /* @__PURE__ */ import_react193.default.createElement(import_react193.default.Fragment, null, "Auto", /* @__PURE__ */ import_react193.default.createElement(
+      isAuto && /* @__PURE__ */ import_react194.default.createElement(import_react194.default.Fragment, null, "Auto", /* @__PURE__ */ import_react194.default.createElement(
         Box,
         {
           css: {
@@ -31399,7 +31611,7 @@ function HLSQualitySelector({
       selection && Math.min(selection.width || 0, selection.height || 0),
       "p"
     )))
-  )), /* @__PURE__ */ import_react193.default.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ import_react193.default.createElement(
+  )), /* @__PURE__ */ import_react194.default.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ import_react194.default.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -31415,7 +31627,7 @@ function HLSQualitySelector({
       }
     },
     layers.map((layer) => {
-      return /* @__PURE__ */ import_react193.default.createElement(
+      return /* @__PURE__ */ import_react194.default.createElement(
         Dropdown.Item,
         {
           onClick: () => onQualityChange(layer),
@@ -31430,12 +31642,12 @@ function HLSQualitySelector({
             gap: "$2"
           }
         },
-        /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
+        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.CheckIcon, { width: "16px", height: "16px" })
       );
     }),
-    /* @__PURE__ */ import_react193.default.createElement(
+    /* @__PURE__ */ import_react194.default.createElement(
       Dropdown.Item,
       {
         onClick: () => onQualityChange({ height: "auto" }),
@@ -31450,19 +31662,19 @@ function HLSQualitySelector({
           gap: "$2"
         }
       },
-      /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.CheckIcon, { width: "16px", height: "16px" })
     )
   )));
 }
-var import_react193, import_react_use42, import_react_icons91, getQualityText, getBitrateText;
+var import_react194, import_react_use43, import_react_icons92, getQualityText, getBitrateText;
 var init_HLSQualitySelector = __esm({
   "src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react193 = __toESM(require("react"));
-    import_react_use42 = require("react-use");
-    import_react_icons91 = require("@100mslive/react-icons");
+    import_react194 = __toESM(require("react"));
+    import_react_use43 = require("react-use");
+    import_react_icons92 = require("@100mslive/react-icons");
     init_src();
     init_Sheet2();
     init_Theme();
@@ -31473,13 +31685,13 @@ var init_HLSQualitySelector = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
-var import_react194, import_react_icons92, HLSViewTitle;
+var import_react195, import_react_icons93, HLSViewTitle;
 var init_MwebHLSViewTitle = __esm({
   "src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react194 = __toESM(require("react"));
-    import_react_icons92 = require("@100mslive/react-icons");
+    import_react195 = __toESM(require("react"));
+    import_react_icons93 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
     init_HeaderComponents();
@@ -31492,7 +31704,7 @@ var init_MwebHLSViewTitle = __esm({
       const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
       const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
       if (isDetailSidepaneOpen) {
-        return /* @__PURE__ */ import_react194.default.createElement(
+        return /* @__PURE__ */ import_react195.default.createElement(
           Flex,
           {
             gap: "4",
@@ -31507,8 +31719,8 @@ var init_MwebHLSViewTitle = __esm({
               backgroundColor: "$surface_dim"
             }
           },
-          /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
-          /* @__PURE__ */ import_react194.default.createElement(
+          /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
+          /* @__PURE__ */ import_react195.default.createElement(
             Flex,
             {
               onClick: toggleDetailsPane,
@@ -31518,11 +31730,11 @@ var init_MwebHLSViewTitle = __esm({
                 "&:hover": { opacity: "0.8" }
               }
             },
-            /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.ChevronDownIcon, null)
+            /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.ChevronDownIcon, null)
           )
         );
       }
-      return /* @__PURE__ */ import_react194.default.createElement(
+      return /* @__PURE__ */ import_react195.default.createElement(
         Flex,
         {
           gap: "4",
@@ -31536,8 +31748,8 @@ var init_MwebHLSViewTitle = __esm({
             backgroundColor: "$surface_dim"
           }
         },
-        /* @__PURE__ */ import_react194.default.createElement(Logo, null),
-        /* @__PURE__ */ import_react194.default.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ import_react194.default.createElement(Flex, null, /* @__PURE__ */ import_react194.default.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
+        /* @__PURE__ */ import_react195.default.createElement(Logo, null),
+        /* @__PURE__ */ import_react195.default.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ import_react195.default.createElement(Flex, null, /* @__PURE__ */ import_react195.default.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
       );
     };
   }
@@ -31548,18 +31760,18 @@ var HLSView_exports = {};
 __export(HLSView_exports, {
   default: () => HLSView_default
 });
-var import_react195, import_react_use43, import_hls_player3, import_screenfull3, import_ts_pattern11, import_react_sdk97, import_react_icons93, hlsPlayer, toastMap, ToggleChat, HLSView, HLSView_default;
+var import_react196, import_react_use44, import_hls_player3, import_screenfull3, import_ts_pattern11, import_react_sdk97, import_react_icons94, hlsPlayer, toastMap, ToggleChat, HLSView, HLSView_default;
 var init_HLSView = __esm({
   "src/Prebuilt/layouts/HLSView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react195 = __toESM(require("react"));
-    import_react_use43 = require("react-use");
+    import_react196 = __toESM(require("react"));
+    import_react_use44 = require("react-use");
     import_hls_player3 = require("@100mslive/hls-player");
     import_screenfull3 = __toESM(require("screenfull"));
     import_ts_pattern11 = require("ts-pattern");
     import_react_sdk97 = require("@100mslive/react-sdk");
-    import_react_icons93 = require("@100mslive/react-icons");
+    import_react_icons94 = require("@100mslive/react-icons");
     init_ChatToggle();
     init_HlsStatsOverlay();
     init_HMSVideo2();
@@ -31583,60 +31795,69 @@ var init_HLSView = __esm({
     init_hooks();
     init_constants();
     toastMap = {};
-    ToggleChat = () => {
+    ToggleChat = ({ isFullScreen = false }) => {
       const { elements } = useRoomLayoutConferencingScreen();
       const sidepane = (0, import_react_sdk97.useHMSStore)((0, import_react_sdk97.selectAppData)(APP_DATA.sidePane));
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const showChat = !!(elements == null ? void 0 : elements.chat);
-      const isMobile = (0, import_react_use43.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
       const hmsActions = (0, import_react_sdk97.useHMSActions)();
-      (0, import_react195.useEffect)(() => {
-        (0, import_ts_pattern11.match)({ sidepane, isMobile, showChat }).with({ isMobile: true, showChat: true, sidepane: import_ts_pattern11.P.when((value) => !value) }, () => {
+      (0, import_react196.useEffect)(() => {
+        (0, import_ts_pattern11.match)({ sidepane, isMobile, showChat, isFullScreen }).with({ isFullScreen: true }, () => {
+          hmsActions.setAppData(APP_DATA.sidePane, "");
+        }).with({ isMobile: true, showChat: true, sidepane: import_ts_pattern11.P.when((value) => !value) }, () => {
           toggleChat();
         }).with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
           hmsActions.setAppData(APP_DATA.sidePane, "");
         }).otherwise(() => {
         });
-      }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
+      }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
       return null;
     };
     HLSView = () => {
-      var _a8, _b7, _c, _d, _e, _f;
-      const videoRef = (0, import_react195.useRef)(null);
-      const hlsViewRef = (0, import_react195.useRef)();
+      var _a8, _b7, _c, _d, _e, _f, _g;
+      const videoRef = (0, import_react196.useRef)(null);
+      const hlsViewRef = (0, import_react196.useRef)();
+      const { elements } = useRoomLayoutConferencingScreen();
       const hlsState = (0, import_react_sdk97.useHMSStore)(import_react_sdk97.selectHLSState);
       const enablHlsStats = (0, import_react_sdk97.useHMSStore)((0, import_react_sdk97.selectAppData)(APP_DATA.hlsStats));
       const notification = (0, import_react_sdk97.useHMSNotifications)(import_react_sdk97.HMSNotificationTypes.POLL_STOPPED);
       const hmsActions = (0, import_react_sdk97.useHMSActions)();
       const { themeType } = useTheme();
-      const [streamEnded, setStreamEnded] = (0, import_react195.useState)(false);
-      let [hlsStatsState, setHlsStatsState] = (0, import_react195.useState)(null);
+      const [streamEnded, setStreamEnded] = (0, import_react196.useState)(false);
+      let [hlsStatsState, setHlsStatsState] = (0, import_react196.useState)(null);
       const hlsUrl = (_a8 = hlsState.variants[0]) == null ? void 0 : _a8.url;
-      const [availableLayers, setAvailableLayers] = (0, import_react195.useState)([]);
-      const [isVideoLive, setIsVideoLive] = (0, import_react195.useState)(true);
-      const [isCaptionEnabled, setIsCaptionEnabled] = (0, import_react195.useState)(true);
-      const [hasCaptions, setHasCaptions] = (0, import_react195.useState)(false);
-      const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react195.useState)(null);
-      const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react195.useState)(false);
-      const [isSeekEnabled, setIsSeekEnabled] = (0, import_react195.useState)(false);
-      const [isPaused, setIsPaused] = (0, import_react195.useState)(false);
-      const [show, toggle] = (0, import_react_use43.useToggle)(false);
-      const lastHlsUrl = (0, import_react_use43.usePrevious)(hlsUrl);
+      const [availableLayers, setAvailableLayers] = (0, import_react196.useState)([]);
+      const [isVideoLive, setIsVideoLive] = (0, import_react196.useState)(true);
+      const [isCaptionEnabled, setIsCaptionEnabled] = (0, import_react196.useState)(true);
+      const [hasCaptions, setHasCaptions] = (0, import_react196.useState)(false);
+      const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react196.useState)(null);
+      const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react196.useState)(false);
+      const [hoverControlsVisible, setHoverControlsVisible] = (0, import_react196.useState)({
+        seekForward: false,
+        pausePlay: false,
+        seekBackward: false
+      });
+      const [isPaused, setIsPaused] = (0, import_react196.useState)(false);
+      const [show, toggle] = (0, import_react_use44.useToggle)(false);
+      const lastHlsUrl = (0, import_react_use44.usePrevious)(hlsUrl);
       const vanillaStore = (0, import_react_sdk97.useHMSVanillaStore)();
-      const [controlsVisible, setControlsVisible] = (0, import_react195.useState)(true);
-      const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react195.useState)(true);
-      const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react195.useState)(false);
-      const controlsRef = (0, import_react195.useRef)(null);
-      const controlsTimerRef = (0, import_react195.useRef)();
-      const [seekProgress, setSeekProgress] = (0, import_react195.useState)(false);
+      const [controlsVisible, setControlsVisible] = (0, import_react196.useState)(true);
+      const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react196.useState)(true);
+      const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react196.useState)(false);
+      const controlsRef = (0, import_react196.useRef)(null);
+      const controlsTimerRef = (0, import_react196.useRef)();
+      const [seekProgress, setSeekProgress] = (0, import_react196.useState)(false);
       const isFullScreenSupported = import_screenfull3.default.isEnabled;
-      const isMobile = (0, import_react_use43.useMedia)(config.media.md);
+      const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+      const showChat = !!(elements == null ? void 0 : elements.chat);
+      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
       const isLandscape = useIsLandscape();
-      const isFullScreen = (0, import_react_use43.useFullscreen)(hlsViewRef, show, {
+      const isFullScreen = (0, import_react_use44.useFullscreen)(hlsViewRef, show, {
         onClose: () => toggle(false)
       });
-      const [showLoader, setShowLoader] = (0, import_react195.useState)(false);
-      (0, import_react195.useEffect)(() => {
+      const [showLoader, setShowLoader] = (0, import_react196.useState)(false);
+      (0, import_react196.useEffect)(() => {
         const videoEl = videoRef.current;
         const showLoader2 = () => setShowLoader(true);
         const hideLoader = () => setShowLoader(false);
@@ -31647,12 +31868,12 @@ var init_HLSView = __esm({
           videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
         };
       }, []);
-      (0, import_react195.useEffect)(() => {
+      (0, import_react196.useEffect)(() => {
         if (streamEnded && lastHlsUrl !== hlsUrl) {
           setStreamEnded(false);
         }
       }, [hlsUrl, streamEnded, lastHlsUrl]);
-      (0, import_react195.useEffect)(() => {
+      (0, import_react196.useEffect)(() => {
         if (!notification)
           return;
         const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
@@ -31661,7 +31882,7 @@ var init_HLSView = __esm({
           delete toastMap[notification.data.id];
         }
       }, [notification]);
-      (0, import_react195.useEffect)(() => {
+      (0, import_react196.useEffect)(() => {
         const videoElem = videoRef.current;
         const setStreamEndedCallback = () => {
           setStreamEnded(true);
@@ -31672,7 +31893,7 @@ var init_HLSView = __esm({
           videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
         };
       }, [hlsUrl]);
-      const handleQuality = (0, import_react195.useCallback)(
+      const handleQuality = (0, import_react196.useCallback)(
         (quality) => {
           var _a9;
           if (hlsPlayer) {
@@ -31683,7 +31904,7 @@ var init_HLSView = __esm({
         [availableLayers]
         //eslint-disable-line
       );
-      (0, import_react195.useEffect)(() => {
+      (0, import_react196.useEffect)(() => {
         let videoEl = videoRef.current;
         const manifestLoadedHandler = ({ layers }) => {
           setAvailableLayers(layers);
@@ -31711,7 +31932,7 @@ var init_HLSView = __esm({
             if (!toastMap[pollId]) {
               const toastID = ToastManager.addToast({
                 title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-                action: /* @__PURE__ */ import_react195.default.createElement(
+                action: /* @__PURE__ */ import_react196.default.createElement(
                   Button,
                   {
                     onClick: () => {
@@ -31758,7 +31979,17 @@ var init_HLSView = __esm({
         const handleNoLongerLive = ({ isLive }) => {
           setIsVideoLive(isLive);
         };
-        const playbackEventHandler = (data3) => setIsPaused(data3.state === import_hls_player3.HLSPlaybackState.paused);
+        const playbackEventHandler = (data3) => {
+          setIsPaused(data3.state === import_hls_player3.HLSPlaybackState.paused);
+          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+            pausePlay: true
+          }));
+          setTimeout(() => {
+            setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+              pausePlay: false
+            }));
+          }, 2e3);
+        };
         const captionEnabledEventHandler = (isCaptionEnabled2) => {
           setIsCaptionEnabled(isCaptionEnabled2);
         };
@@ -31786,7 +32017,7 @@ var init_HLSView = __esm({
           };
         }
       }, [hlsUrl, vanillaStore, hmsActions]);
-      (0, import_react195.useEffect)(() => {
+      (0, import_react196.useEffect)(() => {
         const onHLSStats = (state) => setHlsStatsState(state);
         if (enablHlsStats) {
           hlsPlayer == null ? void 0 : hlsPlayer.on(import_hls_player3.HMSHLSPlayerEvents.STATS, onHLSStats);
@@ -31808,7 +32039,7 @@ var init_HLSView = __esm({
       const sfnOverlayClose = () => {
         hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
       };
-      (0, import_react195.useEffect)(() => {
+      (0, import_react196.useEffect)(() => {
         if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
           if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
@@ -31828,30 +32059,56 @@ var init_HLSView = __esm({
           }
         };
       }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
-      const onSeekTo = (0, import_react195.useCallback)((seek) => {
-        var _a9;
-        hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a9 = videoRef.current) == null ? void 0 : _a9.currentTime) + seek);
-      }, []);
-      const onDoubleClickHandler = (0, import_react195.useCallback)(
+      const onSeekTo = (0, import_react196.useCallback)(
+        (seek) => {
+          var _a9;
+          (0, import_ts_pattern11.match)({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
+            setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekBackward: true }));
+            setTimeout(() => {
+              setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+                seekBackward: false
+              }));
+            }, 1e3);
+          }).with({ seek: 10, isMobile: false, isLandscape: false }, () => {
+            setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekForward: true }));
+            setTimeout(() => {
+              setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+                seekForward: false
+              }));
+            }, 1e3);
+          }).otherwise(() => null);
+          hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a9 = videoRef.current) == null ? void 0 : _a9.currentTime) + seek);
+        },
+        [hoverControlsVisible, isLandscape, isMobile]
+      );
+      const onDoubleClickHandler = (0, import_react196.useCallback)(
         (event) => {
           var _a9;
           if (!(isMobile || isLandscape) || ((_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type) !== import_react_sdk97.HLSPlaylistType.DVR) {
             return;
           }
           const sidePercentage = event.screenX * 100 / event.target.clientWidth;
-          setIsSeekEnabled(true);
           if (sidePercentage < 45) {
+            setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+              seekBackward: true
+            }));
             onSeekTo(-10);
           } else {
+            setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+              seekForward: true
+            }));
             onSeekTo(10);
           }
           setTimeout(() => {
-            setIsSeekEnabled(false);
-          }, 200);
+            setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+              seekForward: false,
+              seekBackward: false
+            }));
+          }, 1e3);
         },
-        [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, onSeekTo]
+        [hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
       );
-      const onClickHandler = (0, import_react195.useCallback)(() => __async(void 0, null, function* () {
+      const onClickHandler = (0, import_react196.useCallback)(() => __async(void 0, null, function* () {
         var _a9;
         (0, import_ts_pattern11.match)({ isMobile, isLandscape, playlist_type: (_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type }).with({ playlist_type: import_react_sdk97.HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, () => __async(void 0, null, function* () {
           if (isPaused) {
@@ -31869,7 +32126,7 @@ var init_HLSView = __esm({
           }
         ).otherwise(() => null);
       }), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
-      const onHoverHandler = (0, import_react195.useCallback)(
+      const onHoverHandler = (0, import_react196.useCallback)(
         (event) => {
           event.preventDefault();
           if (isMobile || isLandscape) {
@@ -31892,7 +32149,7 @@ var init_HLSView = __esm({
       );
       const keyHandler = useKeyboardHandler(isPaused, hlsPlayer);
       if (!hlsUrl || streamEnded) {
-        return /* @__PURE__ */ import_react195.default.createElement(import_react195.default.Fragment, null, /* @__PURE__ */ import_react195.default.createElement(ToggleChat, null), hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ import_react195.default.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ import_react195.default.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })), /* @__PURE__ */ import_react195.default.createElement(
+        return /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null, /* @__PURE__ */ import_react196.default.createElement(ToggleChat, null), hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ import_react196.default.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ import_react196.default.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })), /* @__PURE__ */ import_react196.default.createElement(
           Flex,
           {
             key: "hls-viewer",
@@ -31904,10 +32161,10 @@ var init_HLSView = __esm({
               flex: isLandscape ? "2 1 0" : "1 1 0"
             }
           },
-          /* @__PURE__ */ import_react195.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react195.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
+          /* @__PURE__ */ import_react196.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react196.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react196.default.createElement(import_react_icons94.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react196.default.createElement(import_react_icons94.GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react196.default.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ import_react196.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
         ));
       }
-      return /* @__PURE__ */ import_react195.default.createElement(
+      return /* @__PURE__ */ import_react196.default.createElement(
         Flex,
         {
           key: "hls-viewer",
@@ -31917,6 +32174,7 @@ var init_HLSView = __esm({
           justify: "center",
           css: {
             flex: isLandscape ? "2 1 0" : "1 1 0",
+            transition: "all 0.3s ease-in-out",
             "&:fullscreen": {
               "& video": {
                 height: "unset !important"
@@ -31924,8 +32182,8 @@ var init_HLSView = __esm({
             }
           }
         },
-        hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ import_react195.default.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ import_react195.default.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
-        /* @__PURE__ */ import_react195.default.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react195.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ import_react195.default.createElement(
+        hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ import_react196.default.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ import_react196.default.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
+        /* @__PURE__ */ import_react196.default.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react196.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ import_react196.default.createElement(
           Flex,
           {
             id: "hls-player-container",
@@ -31947,8 +32205,8 @@ var init_HLSView = __esm({
             }),
             tabIndex: "0"
           },
-          !(isMobile || isLandscape) && /* @__PURE__ */ import_react195.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-          showLoader && /* @__PURE__ */ import_react195.default.createElement(
+          !(isMobile || isLandscape) && /* @__PURE__ */ import_react196.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+          showLoader && /* @__PURE__ */ import_react196.default.createElement(
             Flex,
             {
               align: "center",
@@ -31957,9 +32215,9 @@ var init_HLSView = __esm({
                 position: "absolute"
               }
             },
-            /* @__PURE__ */ import_react195.default.createElement(Loading, { width: 72, height: 72 })
+            /* @__PURE__ */ import_react196.default.createElement(Loading, { width: 72, height: 72 })
           ),
-          /* @__PURE__ */ import_react195.default.createElement(
+          /* @__PURE__ */ import_react196.default.createElement(
             HMSVideoPlayer.Root,
             {
               ref: videoRef,
@@ -31971,53 +32229,36 @@ var init_HLSView = __esm({
                 onDoubleClickHandler(e);
               }
             },
-            /* @__PURE__ */ import_react195.default.createElement(import_react195.default.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ import_react195.default.createElement(import_react195.default.Fragment, null, /* @__PURE__ */ import_react195.default.createElement(
+            /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react196.default.createElement(
               Flex,
               {
                 align: "center",
-                justify: "center",
+                justify: "between",
                 css: {
                   position: "absolute",
                   bg: "#00000066",
                   display: "inline-flex",
                   gap: "$2",
                   zIndex: 1,
-                  size: "100%",
-                  visibility: controlsVisible ? `` : `hidden`,
-                  opacity: controlsVisible ? `1` : "0"
+                  size: "100%"
                 }
               },
-              !showLoader && ((_b7 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b7.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR && /* @__PURE__ */ import_react195.default.createElement(import_react195.default.Fragment, null, /* @__PURE__ */ import_react195.default.createElement(
-                HMSVideoPlayer.Seeker,
-                {
-                  title: "backward",
-                  css: {
-                    visibility: isSeekEnabled ? `` : `hidden`,
-                    opacity: isSeekEnabled ? `1` : "0"
-                  }
-                },
-                /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.BackwardArrowIcon, { width: 32, height: 32 })
-              ), /* @__PURE__ */ import_react195.default.createElement(
-                Box,
+              !showLoader && ((_b7 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b7.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR && /* @__PURE__ */ import_react196.default.createElement(
+                HMSVideoPlayer.PlayPauseSeekControls.Overlay,
                 {
-                  css: {
-                    bg: "rgba(0, 0, 0, 0.6)",
-                    r: "$round"
-                  }
-                },
-                /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused, width: 48, height: 48 })
-              ), /* @__PURE__ */ import_react195.default.createElement(
-                HMSVideoPlayer.Seeker,
-                {
-                  title: "forward",
-                  css: {
-                    visibility: isSeekEnabled ? `` : `hidden`,
-                    opacity: isSeekEnabled ? `1` : "0"
-                  }
-                },
-                /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.ForwardArrowIcon, { width: 32, height: 32 })
-              ))
-            ), /* @__PURE__ */ import_react195.default.createElement(
+                  isPaused,
+                  showControls: controlsVisible,
+                  hoverControlsVisible
+                }
+              )
+            ), isMobile || isLandscape ? /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null, !showLoader && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR && /* @__PURE__ */ import_react196.default.createElement(
+              HMSVideoPlayer.PlayPauseSeekControls.Overlay,
+              {
+                isPaused,
+                showControls: controlsVisible,
+                hoverControlsVisible
+              }
+            ), /* @__PURE__ */ import_react196.default.createElement(
               Flex,
               {
                 ref: controlsRef,
@@ -32035,14 +32276,24 @@ var init_HLSView = __esm({
                   opacity: controlsVisible ? `1` : "0"
                 }
               },
-              /* @__PURE__ */ import_react195.default.createElement(
+              /* @__PURE__ */ import_react196.default.createElement(
                 HMSVideoPlayer.Controls.Root,
                 {
                   css: {
                     p: "$4 $8"
                   }
                 },
-                /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ import_react195.default.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ import_react195.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ import_react195.default.createElement(
+                /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Controls.Right, null, (isLandscape || isMobile && isFullScreen) && showChat && /* @__PURE__ */ import_react196.default.createElement(
+                  ChatToggle,
+                  {
+                    onClick: () => {
+                      if (isFullScreen) {
+                        toggle();
+                      }
+                      toggleChat();
+                    }
+                  }
+                ), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ import_react196.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ import_react196.default.createElement(
                   HLSQualitySelector,
                   {
                     layers: availableLayers,
@@ -32053,9 +32304,9 @@ var init_HLSView = __esm({
                     isAuto: isUserSelectedAuto,
                     containerRef: hlsViewRef.current
                   }
-                ) : null, /* @__PURE__ */ import_react195.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
+                ) : null, /* @__PURE__ */ import_react196.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
               )
-            )) : null, controlsVisible && /* @__PURE__ */ import_react195.default.createElement(
+            )) : null, controlsVisible && /* @__PURE__ */ import_react196.default.createElement(
               Flex,
               {
                 ref: controlsRef,
@@ -32064,7 +32315,7 @@ var init_HLSView = __esm({
                 align: "start",
                 css: {
                   position: "absolute",
-                  bottom: isFullScreen && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? "$8" : "0",
+                  bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? "$8" : "0",
                   left: "0",
                   zIndex: 1,
                   background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
@@ -32074,44 +32325,27 @@ var init_HLSView = __esm({
                   transition: "visibility 0s 0.5s, opacity 0.5s linear"
                 }
               },
-              ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
-              /* @__PURE__ */ import_react195.default.createElement(
+              ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
+              /* @__PURE__ */ import_react196.default.createElement(
                 HMSVideoPlayer.Controls.Root,
                 {
                   css: {
                     p: "$4 $8"
                   }
                 },
-                /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react195.default.createElement(import_react195.default.Fragment, null, ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react195.default.createElement(import_react195.default.Fragment, null, /* @__PURE__ */ import_react195.default.createElement(
-                  HMSVideoPlayer.Seeker,
-                  {
-                    onClick: () => {
-                      onSeekTo(-10);
-                    },
-                    title: "backward"
-                  },
-                  /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.BackwardArrowIcon, { width: 20, height: 20 })
-                ), /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused }), /* @__PURE__ */ import_react195.default.createElement(
-                  HMSVideoPlayer.Seeker,
-                  {
-                    onClick: () => {
-                      onSeekTo(10);
-                    },
-                    title: "forward"
-                  },
-                  /* @__PURE__ */ import_react195.default.createElement(import_react_icons93.ForwardArrowIcon, { width: 20, height: 20 })
-                ), !isVideoLive ? /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ import_react195.default.createElement(
+                /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null, ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null, /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.PlayPauseSeekControls.Button, { isPaused, onSeekTo }), !isVideoLive ? /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ import_react196.default.createElement(
                   IconButton,
                   {
                     css: { px: "$2" },
-                    onClick: () => __async(void 0, null, function* () {
+                    onClick: (e) => __async(void 0, null, function* () {
+                      e.stopPropagation();
                       yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
                       setIsVideoLive(true);
                     }),
                     key: "jump-to-live_btn",
                     "data-testid": "jump-to-live_btn"
                   },
-                  /* @__PURE__ */ import_react195.default.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ import_react195.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react195.default.createElement(
+                  /* @__PURE__ */ import_react196.default.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ import_react196.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react196.default.createElement(
                     Box,
                     {
                       css: {
@@ -32121,7 +32355,7 @@ var init_HLSView = __esm({
                         r: "$1"
                       }
                     }
-                  ), /* @__PURE__ */ import_react195.default.createElement(
+                  ), /* @__PURE__ */ import_react196.default.createElement(
                     Text,
                     {
                       variant: "$body1",
@@ -32132,8 +32366,8 @@ var init_HLSView = __esm({
                     },
                     isVideoLive ? "LIVE" : "GO LIVE"
                   )))
-                ), (isMobile || isLandscape) && !isVideoLive && ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Duration, null) : null),
-                /* @__PURE__ */ import_react195.default.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ import_react195.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react195.default.createElement(
+                ), (isMobile || isLandscape) && !isVideoLive && ((_g = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _g.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Duration, null) : null),
+                /* @__PURE__ */ import_react196.default.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ import_react196.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react196.default.createElement(
                   HLSQualitySelector,
                   {
                     layers: availableLayers,
@@ -32143,13 +32377,13 @@ var init_HLSView = __esm({
                     onQualityChange: handleQuality,
                     isAuto: isUserSelectedAuto
                   }
-                ) : null, isFullScreenSupported ? /* @__PURE__ */ import_react195.default.createElement(FullScreenButton2, { isFullScreen, onToggle: toggle }) : null)
+                ) : null, isFullScreenSupported ? /* @__PURE__ */ import_react196.default.createElement(FullScreenButton2, { isFullScreen, onToggle: toggle }) : null)
               )
             ))
           )
         )),
-        /* @__PURE__ */ import_react195.default.createElement(ToggleChat, null),
-        isMobile && !isFullScreen && /* @__PURE__ */ import_react195.default.createElement(HLSViewTitle, null)
+        /* @__PURE__ */ import_react196.default.createElement(ToggleChat, { isFullScreen }),
+        isMobile && !isFullScreen && /* @__PURE__ */ import_react196.default.createElement(HLSViewTitle, null)
       );
     };
     HLSView_default = HLSView;
@@ -32157,12 +32391,12 @@ var init_HLSView = __esm({
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var import_react196, import_ts_pattern12, import_react_sdk98, HLSView2, VideoStreamingSection;
+var import_react197, import_ts_pattern12, import_react_sdk98, HLSView2, VideoStreamingSection;
 var init_VideoStreamingSection = __esm({
   "src/Prebuilt/layouts/VideoStreamingSection.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react196 = __toESM(require("react"));
+    import_react197 = __toESM(require("react"));
     import_ts_pattern12 = require("ts-pattern");
     import_react_sdk98 = require("@100mslive/react-sdk");
     init_FullPageProgress();
@@ -32172,21 +32406,18 @@ var init_VideoStreamingSection = __esm({
     init_PDFView();
     init_SidePane();
     init_WaitingView();
-    init_WhiteboardView();
     init_useUISettings();
     init_useCloseScreenshareWhiteboard();
     init_hooks();
-    HLSView2 = import_react196.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
+    HLSView2 = import_react197.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
     VideoStreamingSection = ({
       screenType,
       elements,
       hideControls = false
     }) => {
-      var _a8, _b7, _c, _d;
+      var _a8, _b7;
       const localPeerRole = (0, import_react_sdk98.useHMSStore)(import_react_sdk98.selectLocalPeerRoleName);
       const isConnected = (0, import_react_sdk98.useHMSStore)(import_react_sdk98.selectIsConnectedToRoom);
-      const peerSharing = (0, import_react_sdk98.useHMSStore)(import_react_sdk98.selectPeerScreenSharing);
-      const isWhiteboardOpen = (_a8 = (0, import_react_sdk98.useHMSStore)(import_react_sdk98.selectWhiteboard)) == null ? void 0 : _a8.open;
       const hmsActions = (0, import_react_sdk98.useHMSActions)();
       const waitingViewerRole = useWaitingViewerRole();
       const urlToIframe = useUrlToEmbed();
@@ -32194,7 +32425,7 @@ var init_VideoStreamingSection = __esm({
       const isMobileHLSStream = useMobileHLSStream();
       const isLandscapeHLSStream = useLandscapeHLSStream();
       useCloseScreenshareWhiteboard();
-      (0, import_react196.useEffect)(() => {
+      (0, import_react197.useEffect)(() => {
         if (!isConnected) {
           return;
         }
@@ -32211,21 +32442,17 @@ var init_VideoStreamingSection = __esm({
       }
       let ViewComponent;
       if (screenType === "hls_live_streaming") {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(HLSView2, null);
+        ViewComponent = /* @__PURE__ */ import_react197.default.createElement(HLSView2, null);
       } else if (localPeerRole === waitingViewerRole) {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(WaitingView, null);
+        ViewComponent = /* @__PURE__ */ import_react197.default.createElement(WaitingView, null);
       } else if (pdfAnnotatorActive) {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(PDFView, null);
+        ViewComponent = /* @__PURE__ */ import_react197.default.createElement(PDFView, null);
       } else if (urlToIframe) {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(EmbedView, null);
-      } else if (peerSharing) {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(GridLayout, __spreadValues({}, (_b7 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _b7.grid));
-      } else if (isWhiteboardOpen) {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(WhiteboardView, null);
+        ViewComponent = /* @__PURE__ */ import_react197.default.createElement(EmbedView, null);
       } else {
-        ViewComponent = /* @__PURE__ */ import_react196.default.createElement(GridLayout, __spreadValues({}, (_c = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _c.grid));
+        ViewComponent = /* @__PURE__ */ import_react197.default.createElement(GridLayout, __spreadValues({}, (_a8 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a8.grid));
       }
-      return /* @__PURE__ */ import_react196.default.createElement(import_react196.Suspense, { fallback: /* @__PURE__ */ import_react196.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react196.default.createElement(
+      return /* @__PURE__ */ import_react197.default.createElement(import_react197.Suspense, { fallback: /* @__PURE__ */ import_react197.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react197.default.createElement(
         Flex,
         {
           css: {
@@ -32236,7 +32463,7 @@ var init_VideoStreamingSection = __esm({
           direction: (0, import_ts_pattern12.match)({ isLandscapeHLSStream, isMobileHLSStream }).with({ isLandscapeHLSStream: true }, () => "row").with({ isMobileHLSStream: true }, () => "column").otherwise(() => "row")
         },
         ViewComponent,
-        /* @__PURE__ */ import_react196.default.createElement(
+        /* @__PURE__ */ import_react197.default.createElement(
           Box,
           {
             css: {
@@ -32248,11 +32475,11 @@ var init_VideoStreamingSection = __esm({
               overflowY: "clip"
             }
           },
-          /* @__PURE__ */ import_react196.default.createElement(
+          /* @__PURE__ */ import_react197.default.createElement(
             SidePane_default,
             {
               screenType,
-              tileProps: (_d = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _d.grid,
+              tileProps: (_b7 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _b7.grid,
               hideControls
             }
           )
@@ -32263,14 +32490,14 @@ var init_VideoStreamingSection = __esm({
 });
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
-var import_react197, import_react_use44, import_react_icons94, RoomDetailsHeader;
+var import_react198, import_react_use45, import_react_icons95, RoomDetailsHeader;
 var init_RoomDetailsHeader = __esm({
   "src/Prebuilt/components/Header/RoomDetailsHeader.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react197 = __toESM(require("react"));
-    import_react_use44 = require("react-use");
-    import_react_icons94 = require("@100mslive/react-icons");
+    import_react198 = __toESM(require("react"));
+    import_react_use45 = require("react-use");
+    import_react_icons95 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
     init_Theme();
@@ -32280,34 +32507,34 @@ var init_RoomDetailsHeader = __esm({
     init_constants();
     RoomDetailsHeader = () => {
       const { title, description } = useRoomLayoutHeader();
-      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use45.useMedia)(config.media.md);
       const clipLength = 30;
       const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
       const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
       if (!title && !description || isMobile && !title) {
         return null;
       }
-      return /* @__PURE__ */ import_react197.default.createElement(Flex, { direction: isMobile ? "row" : "column", css: { ml: "$8", alignItems: isMobile ? "center" : "start" } }, /* @__PURE__ */ import_react197.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), !isMobile && /* @__PURE__ */ import_react197.default.createElement(Flex, { align: "end", css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react197.default.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, description.slice(0, clipLength)), description.length > clipLength ? /* @__PURE__ */ import_react197.default.createElement(
+      return /* @__PURE__ */ import_react198.default.createElement(Flex, { direction: isMobile ? "row" : "column", css: { ml: "$8", alignItems: isMobile ? "center" : "start" } }, /* @__PURE__ */ import_react198.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), !isMobile && /* @__PURE__ */ import_react198.default.createElement(Flex, { align: "end", css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react198.default.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, description.slice(0, clipLength)), description.length > clipLength ? /* @__PURE__ */ import_react198.default.createElement(
         "span",
         {
           style: { fontWeight: "600", fontSize: "12px", cursor: "pointer", lineHeight: "1rem" },
           onClick: toggleDetailsPane
         },
         "\xA0...more"
-      ) : null), isMobile && description ? /* @__PURE__ */ import_react197.default.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.ChevronRightIcon, { height: 16, width: 16, onClick: toggleDetailsSheet })) : null);
+      ) : null), isMobile && description ? /* @__PURE__ */ import_react198.default.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.ChevronRightIcon, { height: 16, width: 16, onClick: toggleDetailsSheet })) : null);
     };
   }
 });
 
 // src/Prebuilt/components/Header/common.jsx
-var import_react198, import_react_sdk99, import_react_icons95, CamaraFlipActions, AudioActions, AudioSelectionSheet, SelectWithLabel;
+var import_react199, import_react_sdk99, import_react_icons96, CamaraFlipActions, AudioActions, AudioSelectionSheet, SelectWithLabel;
 var init_common2 = __esm({
   "src/Prebuilt/components/Header/common.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react198 = __toESM(require("react"));
+    import_react199 = __toESM(require("react"));
     import_react_sdk99 = require("@100mslive/react-sdk");
-    import_react_icons95 = require("@100mslive/react-icons");
+    import_react_icons96 = require("@100mslive/react-icons");
     init_Divider2();
     init_Label2();
     init_Layout();
@@ -32325,7 +32552,7 @@ var init_common2 = __esm({
       if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
         return null;
       }
-      return /* @__PURE__ */ import_react198.default.createElement(Box, null, /* @__PURE__ */ import_react198.default.createElement(
+      return /* @__PURE__ */ import_react199.default.createElement(Box, null, /* @__PURE__ */ import_react199.default.createElement(
         IconButton_default,
         {
           disabled: !isVideoOn,
@@ -32340,7 +32567,7 @@ var init_common2 = __esm({
             }
           })
         },
-        /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.CameraFlipIcon, null)
+        /* @__PURE__ */ import_react199.default.createElement(import_react_icons96.CameraFlipIcon, null)
       ));
     };
     AudioActions = () => {
@@ -32359,13 +32586,13 @@ var init_common2 = __esm({
       if (!audioFiltered) {
         return null;
       }
-      let AudioIcon = /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.SpeakerIcon, null);
+      let AudioIcon = /* @__PURE__ */ import_react199.default.createElement(import_react_icons96.SpeakerIcon, null);
       if (currentSelection && currentSelection.label.toLowerCase().includes("bluetooth")) {
-        AudioIcon = /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.BluetoothIcon, null);
+        AudioIcon = /* @__PURE__ */ import_react199.default.createElement(import_react_icons96.BluetoothIcon, null);
       } else if (currentSelection && currentSelection.label.toLowerCase().includes("wired")) {
-        AudioIcon = /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.HeadphonesIcon, null);
+        AudioIcon = /* @__PURE__ */ import_react199.default.createElement(import_react_icons96.HeadphonesIcon, null);
       }
-      return /* @__PURE__ */ import_react198.default.createElement(
+      return /* @__PURE__ */ import_react199.default.createElement(
         AudioSelectionSheet,
         {
           audioDevices: availableAudioDevices,
@@ -32384,19 +32611,19 @@ var init_common2 = __esm({
             }
           })
         },
-        /* @__PURE__ */ import_react198.default.createElement(
+        /* @__PURE__ */ import_react199.default.createElement(
           Box,
           {
             onClick: () => __async(void 0, null, function* () {
               yield hmsActions.refreshDevices();
             })
           },
-          /* @__PURE__ */ import_react198.default.createElement(IconButton_default, null, AudioIcon, " ")
+          /* @__PURE__ */ import_react199.default.createElement(IconButton_default, null, AudioIcon, " ")
         )
       );
     };
     AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
-      return /* @__PURE__ */ import_react198.default.createElement(Sheet.Root, null, /* @__PURE__ */ import_react198.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react198.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react198.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react198.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react198.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ import_react198.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react198.default.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.CrossIcon, null))))), /* @__PURE__ */ import_react198.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react198.default.createElement(
+      return /* @__PURE__ */ import_react199.default.createElement(Sheet.Root, null, /* @__PURE__ */ import_react199.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react199.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react199.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react199.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react199.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ import_react199.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react199.default.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react199.default.createElement(import_react_icons96.CrossIcon, null))))), /* @__PURE__ */ import_react199.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react199.default.createElement(
         Flex,
         {
           direction: "column",
@@ -32407,7 +32634,7 @@ var init_common2 = __esm({
           }
         },
         audioDevices.map((audioDevice) => {
-          return /* @__PURE__ */ import_react198.default.createElement(
+          return /* @__PURE__ */ import_react199.default.createElement(
             SelectWithLabel,
             {
               key: audioDevice.deviceId,
@@ -32420,8 +32647,8 @@ var init_common2 = __esm({
         })
       )));
     };
-    SelectWithLabel = ({ label, icon = /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null), checked, id, onChange }) => {
-      return /* @__PURE__ */ import_react198.default.createElement(
+    SelectWithLabel = ({ label, icon = /* @__PURE__ */ import_react199.default.createElement(import_react199.default.Fragment, null), checked, id, onChange }) => {
+      return /* @__PURE__ */ import_react199.default.createElement(
         Flex,
         {
           align: "center",
@@ -32433,7 +32660,7 @@ var init_common2 = __esm({
           },
           onClick: onChange
         },
-        /* @__PURE__ */ import_react198.default.createElement(
+        /* @__PURE__ */ import_react199.default.createElement(
           Label3,
           {
             htmlFor: id,
@@ -32451,20 +32678,20 @@ var init_common2 = __esm({
           icon,
           label
         ),
-        checked && /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.CheckIcon, { width: 24, height: 24 })
+        checked && /* @__PURE__ */ import_react199.default.createElement(import_react_icons96.CheckIcon, { width: 24, height: 24 })
       );
     };
   }
 });
 
 // src/Prebuilt/components/Header/Header.tsx
-var import_react199, import_react_use45, import_react_sdk100, Header2;
+var import_react200, import_react_use46, import_react_sdk100, Header2;
 var init_Header = __esm({
   "src/Prebuilt/components/Header/Header.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react199 = __toESM(require("react"));
-    import_react_use45 = require("react-use");
+    import_react200 = __toESM(require("react"));
+    import_react_use46 = require("react-use");
     import_react_sdk100 = require("@100mslive/react-sdk");
     init_src();
     init_HeaderComponents();
@@ -32473,11 +32700,11 @@ var init_Header = __esm({
     init_common2();
     Header2 = () => {
       const roomState = (0, import_react_sdk100.useHMSStore)(import_react_sdk100.selectRoomState);
-      const isMobile = (0, import_react_use45.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use46.useMedia)(config.media.md);
       if (roomState !== import_react_sdk100.HMSRoomState.Connected) {
-        return /* @__PURE__ */ import_react199.default.createElement(import_react199.default.Fragment, null);
+        return /* @__PURE__ */ import_react200.default.createElement(import_react200.default.Fragment, null);
       }
-      return /* @__PURE__ */ import_react199.default.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ import_react199.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ import_react199.default.createElement(Logo, null), /* @__PURE__ */ import_react199.default.createElement(RoomDetailsHeader, null), /* @__PURE__ */ import_react199.default.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ import_react199.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react199.default.createElement(LiveStatus, null), /* @__PURE__ */ import_react199.default.createElement(RecordingStatus, null), /* @__PURE__ */ import_react199.default.createElement(RecordingPauseStatus, null))), /* @__PURE__ */ import_react199.default.createElement(
+      return /* @__PURE__ */ import_react200.default.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ import_react200.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ import_react200.default.createElement(Logo, null), /* @__PURE__ */ import_react200.default.createElement(RoomDetailsHeader, null), /* @__PURE__ */ import_react200.default.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ import_react200.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react200.default.createElement(LiveStatus, null), /* @__PURE__ */ import_react200.default.createElement(RecordingStatus, null), /* @__PURE__ */ import_react200.default.createElement(RecordingPauseStatus, null))), /* @__PURE__ */ import_react200.default.createElement(
         Flex,
         {
           align: "center",
@@ -32487,8 +32714,8 @@ var init_Header = __esm({
             gap: "$4"
           }
         },
-        /* @__PURE__ */ import_react199.default.createElement(StreamActions, null),
-        isMobile ? /* @__PURE__ */ import_react199.default.createElement(import_react199.default.Fragment, null, /* @__PURE__ */ import_react199.default.createElement(CamaraFlipActions, null), /* @__PURE__ */ import_react199.default.createElement(AudioActions, null)) : null
+        /* @__PURE__ */ import_react200.default.createElement(StreamActions, null),
+        isMobile ? /* @__PURE__ */ import_react200.default.createElement(import_react200.default.Fragment, null, /* @__PURE__ */ import_react200.default.createElement(CamaraFlipActions, null), /* @__PURE__ */ import_react200.default.createElement(AudioActions, null)) : null
       ));
     };
   }
@@ -32504,18 +32731,18 @@ var init_Header2 = __esm({
 });
 
 // src/Prebuilt/components/PreviousRoleInMetadata.tsx
-var import_react200, import_react_sdk101, PreviousRoleInMetadata;
+var import_react201, import_react_sdk101, PreviousRoleInMetadata;
 var init_PreviousRoleInMetadata = __esm({
   "src/Prebuilt/components/PreviousRoleInMetadata.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react200 = require("react");
+    import_react201 = require("react");
     import_react_sdk101 = require("@100mslive/react-sdk");
     init_useMetadata();
     PreviousRoleInMetadata = () => {
       const vanillaStore = (0, import_react_sdk101.useHMSVanillaStore)();
       const { updateMetaData } = useMyMetadata();
-      (0, import_react200.useEffect)(() => {
+      (0, import_react201.useEffect)(() => {
         let previousRole = vanillaStore.getState(import_react_sdk101.selectLocalPeerRoleName);
         const unsubscribe = vanillaStore.subscribe((currentRole) => {
           if (previousRole !== currentRole && currentRole) {
@@ -32531,12 +32758,12 @@ var init_PreviousRoleInMetadata = __esm({
 });
 
 // src/Prebuilt/components/ConferenceScreen.tsx
-var import_react201, import_uuid12, import_react_sdk102, ConferenceScreen;
+var import_react202, import_uuid12, import_react_sdk102, ConferenceScreen;
 var init_ConferenceScreen = __esm({
   "src/Prebuilt/components/ConferenceScreen.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react201 = __toESM(require("react"));
+    import_react202 = __toESM(require("react"));
     import_uuid12 = require("uuid");
     import_react_sdk102 = require("@100mslive/react-sdk");
     init_Footer3();
@@ -32565,16 +32792,16 @@ var init_ConferenceScreen = __esm({
       const roomState = (0, import_react_sdk102.useHMSStore)(import_react_sdk102.selectRoomState);
       const isConnectedToRoom = (0, import_react_sdk102.useHMSStore)(import_react_sdk102.selectIsConnectedToRoom);
       const hmsActions = (0, import_react_sdk102.useHMSActions)();
-      const [hideControls, setHideControls] = (0, import_react201.useState)(false);
+      const [hideControls, setHideControls] = (0, import_react202.useState)(false);
       const dropdownList = (0, import_react_sdk102.useHMSStore)((0, import_react_sdk102.selectAppData)(APP_DATA.dropdownList));
       const authTokenInAppData = useAuthToken();
-      const headerRef = (0, import_react201.useRef)(null);
-      const footerRef = (0, import_react201.useRef)(null);
+      const headerRef = (0, import_react202.useRef)(null);
+      const footerRef = (0, import_react202.useRef)(null);
       const isMobileDevice = isAndroid || isIOS || isIPadOS;
-      const dropdownListRef = (0, import_react201.useRef)();
+      const dropdownListRef = (0, import_react202.useRef)();
       const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
       const showChat = !!((_a8 = screenProps.elements) == null ? void 0 : _a8.chat);
-      const autoRoomJoined = (0, import_react201.useRef)(isPreviewScreenEnabled);
+      const autoRoomJoined = (0, import_react202.useRef)(isPreviewScreenEnabled);
       const isMobileHLSStream = useMobileHLSStream();
       const isLandscapeHLSStream = useLandscapeHLSStream();
       const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
@@ -32584,7 +32811,7 @@ var init_ConferenceScreen = __esm({
           setHideControls((value) => !value);
         }
       };
-      (0, import_react201.useEffect)(() => {
+      (0, import_react202.useEffect)(() => {
         let timeout;
         dropdownListRef.current = dropdownList || [];
         if (dropdownListRef.current && dropdownListRef.current.length === 0) {
@@ -32599,7 +32826,7 @@ var init_ConferenceScreen = __esm({
           clearTimeout(timeout);
         };
       }, [dropdownList, hideControls, isMobileDevice]);
-      (0, import_react201.useEffect)(() => {
+      (0, import_react202.useEffect)(() => {
         if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== import_react_sdk102.HMSRoomState.Connecting && !autoRoomJoined.current) {
           hmsActions.join({
             userName: userName || (0, import_uuid12.v4)(),
@@ -32614,17 +32841,17 @@ var init_ConferenceScreen = __esm({
           autoRoomJoined.current = true;
         }
       }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-      (0, import_react201.useEffect)(() => {
+      (0, import_react202.useEffect)(() => {
         onJoinFunc == null ? void 0 : onJoinFunc();
         return () => {
           PictureInPicture.stop().catch((error) => console.error("stopping pip", error.message));
         };
       }, [onJoinFunc]);
       if (!isConnectedToRoom && ![import_react_sdk102.HMSRoomState.Reconnecting, import_react_sdk102.HMSRoomState.Disconnected].includes(roomState)) {
-        return /* @__PURE__ */ import_react201.default.createElement(FullPageProgress_default, { text: roomState === import_react_sdk102.HMSRoomState.Connecting ? "Joining..." : "" });
+        return /* @__PURE__ */ import_react202.default.createElement(FullPageProgress_default, { text: roomState === import_react_sdk102.HMSRoomState.Connecting ? "Joining..." : "" });
       }
       const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
-      return /* @__PURE__ */ import_react201.default.createElement(import_react201.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react201.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react201.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react201.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ import_react201.default.createElement(
+      return /* @__PURE__ */ import_react202.default.createElement(import_react202.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react202.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react202.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react202.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ import_react202.default.createElement(
         Box,
         {
           ref: headerRef,
@@ -32638,8 +32865,8 @@ var init_ConferenceScreen = __esm({
           },
           "data-testid": "header"
         },
-        /* @__PURE__ */ import_react201.default.createElement(Header2, null)
-      ), /* @__PURE__ */ import_react201.default.createElement(
+        /* @__PURE__ */ import_react202.default.createElement(Header2, null)
+      ), /* @__PURE__ */ import_react202.default.createElement(
         Box,
         {
           css: {
@@ -32658,7 +32885,7 @@ var init_ConferenceScreen = __esm({
           "data-testid": "conferencing",
           onClick: toggleControls
         },
-        screenProps.elements ? /* @__PURE__ */ import_react201.default.createElement(
+        screenProps.elements ? /* @__PURE__ */ import_react202.default.createElement(
           VideoStreamingSection,
           {
             screenType: screenProps.screenType,
@@ -32666,7 +32893,7 @@ var init_ConferenceScreen = __esm({
             hideControls: hideControlsForStreaming
           }
         ) : null
-      ), !screenProps.hideSections.includes("footer") && screenProps.elements && !isMwebHLSStream && /* @__PURE__ */ import_react201.default.createElement(
+      ), !screenProps.hideSections.includes("footer") && screenProps.elements && !isMwebHLSStream && /* @__PURE__ */ import_react202.default.createElement(
         Box,
         {
           ref: footerRef,
@@ -32683,8 +32910,8 @@ var init_ConferenceScreen = __esm({
           },
           "data-testid": "footer"
         },
-        /* @__PURE__ */ import_react201.default.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-      ), isMwebHLSStream && !showChat && /* @__PURE__ */ import_react201.default.createElement(
+        /* @__PURE__ */ import_react202.default.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+      ), isMwebHLSStream && !showChat && /* @__PURE__ */ import_react202.default.createElement(
         Flex,
         {
           css: {
@@ -32696,9 +32923,9 @@ var init_ConferenceScreen = __esm({
           justify: "end",
           gap: "2"
         },
-        /* @__PURE__ */ import_react201.default.createElement(RaiseHand, null),
-        /* @__PURE__ */ import_react201.default.createElement(MoreSettings, { elements: screenProps.elements, screenType: screenProps.screenType }),
-        /* @__PURE__ */ import_react201.default.createElement(
+        /* @__PURE__ */ import_react202.default.createElement(RaiseHand, null),
+        /* @__PURE__ */ import_react202.default.createElement(MoreSettings, { elements: screenProps.elements, screenType: screenProps.screenType }),
+        /* @__PURE__ */ import_react202.default.createElement(
           Box,
           {
             css: {
@@ -32707,26 +32934,26 @@ var init_ConferenceScreen = __esm({
               mb: "$4"
             }
           },
-          /* @__PURE__ */ import_react201.default.createElement(EmojiReaction, null)
+          /* @__PURE__ */ import_react202.default.createElement(EmojiReaction, null)
         )
-      ), /* @__PURE__ */ import_react201.default.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ import_react201.default.createElement(HLSFailureModal, null), /* @__PURE__ */ import_react201.default.createElement(ActivatedPIP, null), /* @__PURE__ */ import_react201.default.createElement(PreviousRoleInMetadata, null)));
+      ), /* @__PURE__ */ import_react202.default.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ import_react202.default.createElement(HLSFailureModal, null), /* @__PURE__ */ import_react202.default.createElement(ActivatedPIP, null), /* @__PURE__ */ import_react202.default.createElement(PreviousRoleInMetadata, null)));
     };
   }
 });
 
 // src/Prebuilt/components/ErrorBoundary.jsx
-var import_react202, import_react_icons96, ErrorBoundary;
+var import_react203, import_react_icons97, ErrorBoundary;
 var init_ErrorBoundary = __esm({
   "src/Prebuilt/components/ErrorBoundary.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react202 = __toESM(require("react"));
-    import_react_icons96 = require("@100mslive/react-icons");
+    import_react203 = __toESM(require("react"));
+    import_react_icons97 = require("@100mslive/react-icons");
     init_Button2();
     init_Layout();
     init_Text2();
     init_Tooltip2();
-    ErrorBoundary = class extends import_react202.Component {
+    ErrorBoundary = class extends import_react203.Component {
       constructor(props) {
         super(props);
         this.state = { error: null, errorInfo: null, isErrorCopied: false };
@@ -32740,7 +32967,7 @@ var init_ErrorBoundary = __esm({
       }
       render() {
         if (this.state.errorInfo) {
-          return /* @__PURE__ */ import_react202.default.createElement(
+          return /* @__PURE__ */ import_react203.default.createElement(
             Flex,
             {
               align: "center",
@@ -32753,7 +32980,7 @@ var init_ErrorBoundary = __esm({
                 backgroundColor: "$background_default"
               }
             },
-            /* @__PURE__ */ import_react202.default.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ import_react202.default.createElement(
+            /* @__PURE__ */ import_react203.default.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ import_react203.default.createElement(
               Flex,
               {
                 direction: "column",
@@ -32764,8 +32991,8 @@ var init_ErrorBoundary = __esm({
                   left: 0
                 }
               },
-              /* @__PURE__ */ import_react202.default.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ import_react202.default.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ import_react202.default.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ import_react202.default.createElement("br", null), "Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on", /* @__PURE__ */ import_react202.default.createElement("a", { href: "https://discord.com/invite/kGdmszyzq2", target: "_blank", rel: "noreferrer" }, "Discord")),
-              /* @__PURE__ */ import_react202.default.createElement(Flex, null, /* @__PURE__ */ import_react202.default.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ import_react202.default.createElement(
+              /* @__PURE__ */ import_react203.default.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ import_react203.default.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ import_react203.default.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ import_react203.default.createElement("br", null), "Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on", /* @__PURE__ */ import_react203.default.createElement("a", { href: "https://discord.com/invite/kGdmszyzq2", target: "_blank", rel: "noreferrer" }, "Discord")),
+              /* @__PURE__ */ import_react203.default.createElement(Flex, null, /* @__PURE__ */ import_react203.default.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ import_react203.default.createElement(
                 Button,
                 {
                   onClick: () => {
@@ -32775,7 +33002,7 @@ var init_ErrorBoundary = __esm({
                   "data-testid": "join_again_btn"
                 },
                 "Reload"
-              )), /* @__PURE__ */ import_react202.default.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ import_react202.default.createElement(
+              )), /* @__PURE__ */ import_react203.default.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ import_react203.default.createElement(
                 Button,
                 {
                   onClick: () => {
@@ -32791,11 +33018,11 @@ var init_ErrorBoundary = __esm({
                   css: { mx: "$8" },
                   "data-testid": "join_again_btn"
                 },
-                /* @__PURE__ */ import_react202.default.createElement(import_react_icons96.CopyIcon, null),
+                /* @__PURE__ */ import_react203.default.createElement(import_react_icons97.CopyIcon, null),
                 " ",
                 this.state.isErrorCopied ? "Copied" : "Copy Details"
               ))),
-              /* @__PURE__ */ import_react202.default.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ import_react202.default.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ import_react202.default.createElement("br", null), /* @__PURE__ */ import_react202.default.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
+              /* @__PURE__ */ import_react203.default.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ import_react203.default.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ import_react203.default.createElement("br", null), /* @__PURE__ */ import_react203.default.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
             ))
           );
         }
@@ -32808,19 +33035,19 @@ var init_ErrorBoundary = __esm({
 // src/Prebuilt/services/FeatureFlags.jsx
 function FeatureFlagsInit() {
   const roomId = (0, import_react_sdk103.useHMSStore)(import_react_sdk103.selectRoomID);
-  (0, import_react203.useEffect)(() => {
+  (0, import_react204.useEffect)(() => {
     if (roomId) {
       FeatureFlags.init(roomId);
     }
   }, [roomId]);
   return null;
 }
-var import_react203, import_react_sdk103, FeatureFlags;
+var import_react204, import_react_sdk103, FeatureFlags;
 var init_FeatureFlags = __esm({
   "src/Prebuilt/services/FeatureFlags.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react203 = require("react");
+    import_react204 = require("react");
     import_react_sdk103 = require("@100mslive/react-sdk");
     FeatureFlags = class {
       static init(roomId) {
@@ -32849,20 +33076,20 @@ var init_FeatureFlags = __esm({
 });
 
 // src/Prebuilt/components/init/Init.jsx
-var import_react204, Init;
+var import_react205, Init;
 var init_Init = __esm({
   "src/Prebuilt/components/init/Init.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react204 = __toESM(require("react"));
+    import_react205 = __toESM(require("react"));
     init_src();
     init_FeatureFlags();
     Init = () => {
       const { toggleTheme } = useTheme();
-      (0, import_react204.useEffect)(() => {
+      (0, import_react205.useEffect)(() => {
         window.toggleUiTheme = toggleTheme;
       }, [toggleTheme]);
-      (0, import_react204.useEffect)(() => {
+      (0, import_react205.useEffect)(() => {
         function resetHeight() {
           var _a8;
           document.body.style.height = `${((_a8 = window.visualViewport) == null ? void 0 : _a8.height) || window.innerHeight}px`;
@@ -32873,18 +33100,18 @@ var init_Init = __esm({
           window.removeEventListener("resize", resetHeight);
         };
       }, []);
-      return /* @__PURE__ */ import_react204.default.createElement(FeatureFlagsInit, null);
+      return /* @__PURE__ */ import_react205.default.createElement(FeatureFlagsInit, null);
     };
   }
 });
 
 // src/Prebuilt/components/Input/KeyboardInputManager.js
-var import_react205, import_react_sdk104, isEvenListenersAttached, _actions, _store, _toggleAudio, _toggleVideo, _hideSidepane, _toggleStatsForNerds, _toggleHlsStats, _keyDownHandler, _bind, _unbind, KeyboardInputManager, KeyboardHandler;
+var import_react206, import_react_sdk104, isEvenListenersAttached, _actions, _store, _toggleAudio, _toggleVideo, _hideSidepane, _toggleStatsForNerds, _toggleHlsStats, _keyDownHandler, _bind, _unbind, KeyboardInputManager, KeyboardHandler;
 var init_KeyboardInputManager = __esm({
   "src/Prebuilt/components/Input/KeyboardInputManager.js"() {
     "use strict";
     init_define_process_env();
-    import_react205 = require("react");
+    import_react206 = require("react");
     import_react_sdk104 = require("@100mslive/react-sdk");
     init_constants();
     isEvenListenersAttached = false;
@@ -32973,7 +33200,7 @@ var init_KeyboardInputManager = __esm({
     KeyboardHandler = () => {
       const store = (0, import_react_sdk104.useHMSVanillaStore)();
       const actions = (0, import_react_sdk104.useHMSActions)();
-      (0, import_react205.useEffect)(() => {
+      (0, import_react206.useEffect)(() => {
         const keyboardManager = new KeyboardInputManager(store, actions);
         keyboardManager.bindAllShortcuts();
         return keyboardManager.unbindAllShortcuts;
@@ -32984,18 +33211,18 @@ var init_KeyboardInputManager = __esm({
 });
 
 // src/Prebuilt/components/hooks/useRedirectToLeave.tsx
-var import_react206, useRedirectToLeave;
+var import_react207, useRedirectToLeave;
 var init_useRedirectToLeave = __esm({
   "src/Prebuilt/components/hooks/useRedirectToLeave.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react206 = require("react");
+    import_react207 = require("react");
     init_AppContext();
     init_PIPManager();
     init_ToastManager();
     useRedirectToLeave = () => {
       const { onLeave } = useHMSPrebuiltContext();
-      const redirect = (0, import_react206.useCallback)(
+      const redirect = (0, import_react207.useCallback)(
         (timeout = 0) => {
           setTimeout(() => {
             PictureInPicture.stop().catch(() => console.error("stopping pip"));
@@ -33011,26 +33238,26 @@ var init_useRedirectToLeave = __esm({
 });
 
 // src/Prebuilt/AppStateContext.tsx
-var import_react207, import_react_use46, import_react_sdk105, AppStateContext, useHMSAppStateContext, useAppStateManager;
+var import_react208, import_react_use47, import_react_sdk105, AppStateContext, useHMSAppStateContext, useAppStateManager;
 var init_AppStateContext = __esm({
   "src/Prebuilt/AppStateContext.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react207 = __toESM(require("react"));
-    import_react_use46 = require("react-use");
+    import_react208 = __toESM(require("react"));
+    import_react_use47 = require("react-use");
     import_react_sdk105 = require("@100mslive/react-sdk");
     init_VBHandler();
     init_roomLayoutProvider();
     init_useRedirectToLeave();
     init_useRoomLayoutScreen();
-    AppStateContext = import_react207.default.createContext({
+    AppStateContext = import_react208.default.createContext({
       rejoin: () => {
         console.log("Rejoin");
       }
     });
     AppStateContext.displayName = "AppStateContext";
     useHMSAppStateContext = () => {
-      const context = (0, import_react207.useContext)(AppStateContext);
+      const context = (0, import_react208.useContext)(AppStateContext);
       if (!context) {
         throw Error("Make sure AppStateContext.Provider is present at the top level of your application");
       }
@@ -33038,16 +33265,16 @@ var init_AppStateContext = __esm({
     };
     useAppStateManager = () => {
       const roomLayout = useRoomLayout();
-      const [activeState, setActiveState] = import_react207.default.useState();
+      const [activeState, setActiveState] = import_react208.default.useState();
       const roomState = (0, import_react_sdk105.useHMSStore)(import_react_sdk105.selectRoomState);
-      const prevRoomState = (0, import_react_use46.usePreviousDistinct)(roomState);
+      const prevRoomState = (0, import_react_use47.usePreviousDistinct)(roomState);
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const { redirectToLeave } = useRedirectToLeave();
       const rejoin = () => {
         setActiveState(isPreviewScreenEnabled ? "preview" /* PREVIEW */ : "meeting" /* MEETING */);
       };
-      (0, import_react207.useEffect)(() => {
+      (0, import_react208.useEffect)(() => {
         if (!roomLayout) {
           return;
         }
@@ -33068,13 +33295,13 @@ var init_AppStateContext = __esm({
 });
 
 // src/Prebuilt/components/LeaveScreen.tsx
-var import_react208, import_react_icons97, LeaveScreen;
+var import_react209, import_react_icons98, LeaveScreen;
 var init_LeaveScreen = __esm({
   "src/Prebuilt/components/LeaveScreen.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react208 = __toESM(require("react"));
-    import_react_icons97 = require("@100mslive/react-icons");
+    import_react209 = __toESM(require("react"));
+    import_react_icons98 = require("@100mslive/react-icons");
     init_ToastManager();
     init_Button2();
     init_Layout();
@@ -33086,7 +33313,7 @@ var init_LeaveScreen = __esm({
     LeaveScreen = () => {
       const { rejoin } = useHMSAppStateContext();
       const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-      return /* @__PURE__ */ import_react208.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react208.default.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ import_react208.default.createElement(Header2, null)), /* @__PURE__ */ import_react208.default.createElement(
+      return /* @__PURE__ */ import_react209.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react209.default.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ import_react209.default.createElement(Header2, null)), /* @__PURE__ */ import_react209.default.createElement(
         Flex,
         {
           justify: "center",
@@ -33094,9 +33321,9 @@ var init_LeaveScreen = __esm({
           align: "center",
           css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
         },
-        /* @__PURE__ */ import_react208.default.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
-        /* @__PURE__ */ import_react208.default.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
-        /* @__PURE__ */ import_react208.default.createElement(
+        /* @__PURE__ */ import_react209.default.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
+        /* @__PURE__ */ import_react209.default.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
+        /* @__PURE__ */ import_react209.default.createElement(
           Text,
           {
             variant: "body1",
@@ -33108,10 +33335,10 @@ var init_LeaveScreen = __esm({
             }
           },
           "Have a nice day",
-          previewPreference.name && /* @__PURE__ */ import_react208.default.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
+          previewPreference.name && /* @__PURE__ */ import_react209.default.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
           "!"
         ),
-        /* @__PURE__ */ import_react208.default.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ import_react208.default.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ import_react208.default.createElement(
+        /* @__PURE__ */ import_react209.default.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ import_react209.default.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ import_react209.default.createElement(
           Button,
           {
             onClick: () => {
@@ -33120,8 +33347,8 @@ var init_LeaveScreen = __esm({
             },
             "data-testid": "join_again_btn"
           },
-          /* @__PURE__ */ import_react208.default.createElement(import_react_icons97.ExitIcon, null),
-          /* @__PURE__ */ import_react208.default.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
+          /* @__PURE__ */ import_react209.default.createElement(import_react_icons98.ExitIcon, null),
+          /* @__PURE__ */ import_react209.default.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
         ))
       ));
     };
@@ -33129,15 +33356,15 @@ var init_LeaveScreen = __esm({
 });
 
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
-var import_react209, import_react_use47, import_ts_pattern13, import_react_icons98, MwebLandscapePrompt;
+var import_react210, import_react_use48, import_ts_pattern13, import_react_icons99, MwebLandscapePrompt;
 var init_MwebLandscapePrompt = __esm({
   "src/Prebuilt/components/MwebLandscapePrompt.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react209 = __toESM(require("react"));
-    import_react_use47 = require("react-use");
+    import_react210 = __toESM(require("react"));
+    import_react_use48 = require("react-use");
     import_ts_pattern13 = require("ts-pattern");
-    import_react_icons98 = require("@100mslive/react-icons");
+    import_react_icons99 = require("@100mslive/react-icons");
     init_Button2();
     init_Layout();
     init_Modal();
@@ -33146,10 +33373,10 @@ var init_MwebLandscapePrompt = __esm({
     init_hooks();
     init_utils2();
     MwebLandscapePrompt = () => {
-      const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = (0, import_react209.useState)(false);
-      const isLandscape = (0, import_react_use47.useMedia)(config.media.ls);
+      const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = (0, import_react210.useState)(false);
+      const isLandscape = (0, import_react_use48.useMedia)(config.media.ls);
       const isLandscapeHLSStream = useLandscapeHLSStream();
-      (0, import_react209.useEffect)(() => {
+      (0, import_react210.useEffect)(() => {
         var _a8;
         if (!isMobileUserAgent) {
           setShowMwebLandscapePrompt(false);
@@ -33175,7 +33402,7 @@ var init_MwebLandscapePrompt = __esm({
       if (isLandscapeHLSStream) {
         return null;
       }
-      return /* @__PURE__ */ import_react209.default.createElement(Dialog.Root, { open: showMwebLandscapePrompt, onOpenChange: setShowMwebLandscapePrompt }, /* @__PURE__ */ import_react209.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react209.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react209.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react209.default.createElement(Box, null, /* @__PURE__ */ import_react209.default.createElement(
+      return /* @__PURE__ */ import_react210.default.createElement(Dialog.Root, { open: showMwebLandscapePrompt, onOpenChange: setShowMwebLandscapePrompt }, /* @__PURE__ */ import_react210.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react210.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react210.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react210.default.createElement(Box, null, /* @__PURE__ */ import_react210.default.createElement(
         Flex,
         {
           css: {
@@ -33184,9 +33411,9 @@ var init_MwebLandscapePrompt = __esm({
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ import_react209.default.createElement(import_react_icons98.RefreshIcon, { style: { marginRight: "0.5rem" } }),
-        /* @__PURE__ */ import_react209.default.createElement(Text, { variant: "lg", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "Please rotate your device")
-      ), /* @__PURE__ */ import_react209.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "We do not support landscape mode as of now, please use the app in portrait mode for the best experience."), /* @__PURE__ */ import_react209.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react209.default.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setShowMwebLandscapePrompt(false) }, "Continue anyway"))))));
+        /* @__PURE__ */ import_react210.default.createElement(import_react_icons99.RefreshIcon, { style: { marginRight: "0.5rem" } }),
+        /* @__PURE__ */ import_react210.default.createElement(Text, { variant: "lg", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "Please rotate your device")
+      ), /* @__PURE__ */ import_react210.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "We do not support landscape mode as of now, please use the app in portrait mode for the best experience."), /* @__PURE__ */ import_react210.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react210.default.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setShowMwebLandscapePrompt(false) }, "Continue anyway"))))));
     };
   }
 });
@@ -33194,7 +33421,7 @@ var init_MwebLandscapePrompt = __esm({
 // src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx
 function AutoplayBlockedModal() {
   const { error, resetError, unblockAudio } = (0, import_react_sdk106.useAutoplayError)();
-  return /* @__PURE__ */ import_react210.default.createElement(
+  return /* @__PURE__ */ import_react211.default.createElement(
     Dialog.Root,
     {
       open: !!error,
@@ -33205,7 +33432,7 @@ function AutoplayBlockedModal() {
         resetError();
       }
     },
-    /* @__PURE__ */ import_react210.default.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ import_react210.default.createElement(DialogRow, null, /* @__PURE__ */ import_react210.default.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ import_react210.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react210.default.createElement(
+    /* @__PURE__ */ import_react211.default.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ import_react211.default.createElement(DialogRow, null, /* @__PURE__ */ import_react211.default.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ import_react211.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react211.default.createElement(
       Button,
       {
         variant: "primary",
@@ -33218,12 +33445,12 @@ function AutoplayBlockedModal() {
     )))
   );
 }
-var import_react210, import_react_sdk106;
+var import_react211, import_react_sdk106;
 var init_AutoplayBlockedModal = __esm({
   "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react210 = __toESM(require("react"));
+    import_react211 = __toESM(require("react"));
     import_react_sdk106 = require("@100mslive/react-sdk");
     init_src();
     init_DialogContent2();
@@ -33231,21 +33458,21 @@ var init_AutoplayBlockedModal = __esm({
 });
 
 // src/Prebuilt/components/Notifications/ChatNotifications.tsx
-var import_react211, import_uuid13, import_react_sdk107, import_react_icons99, NOTIFICATION_TIME_DIFFERENCE, ChatNotifications;
+var import_react212, import_uuid13, import_react_sdk107, import_react_icons100, NOTIFICATION_TIME_DIFFERENCE, ChatNotifications;
 var init_ChatNotifications = __esm({
   "src/Prebuilt/components/Notifications/ChatNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react211 = __toESM(require("react"));
+    import_react212 = __toESM(require("react"));
     import_uuid13 = require("uuid");
     import_react_sdk107 = require("@100mslive/react-sdk");
-    import_react_icons99 = require("@100mslive/react-icons");
+    import_react_icons100 = require("@100mslive/react-icons");
     init_ToastManager();
     NOTIFICATION_TIME_DIFFERENCE = 5e3;
     ChatNotifications = () => {
       const chatState = (0, import_react_sdk107.useHMSStore)((0, import_react_sdk107.selectSessionStore)("chatState" /* CHAT_STATE */));
       const localPeerId = (0, import_react_sdk107.useHMSStore)(import_react_sdk107.selectLocalPeerID);
-      (0, import_react211.useEffect)(() => {
+      (0, import_react212.useEffect)(() => {
         var _a8, _b7;
         if (!chatState || ((_a8 = chatState.updatedBy) == null ? void 0 : _a8.peerId) === localPeerId) {
           return;
@@ -33256,38 +33483,38 @@ var init_ChatNotifications = __esm({
         }
         const notification = {
           id: (0, import_uuid13.v4)(),
-          icon: chatState.enabled ? /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.ChatUnreadIcon, null) : /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.ChatIcon, null),
+          icon: chatState.enabled ? /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.ChatUnreadIcon, null) : /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.ChatIcon, null),
           title: `Chat ${chatState.enabled ? "resumed" : "paused"} by ${(_b7 = chatState.updatedBy) == null ? void 0 : _b7.userName}`
         };
         ToastManager.addToast(notification);
       }, [chatState, localPeerId]);
-      return /* @__PURE__ */ import_react211.default.createElement(import_react211.default.Fragment, null);
+      return /* @__PURE__ */ import_react212.default.createElement(import_react212.default.Fragment, null);
     };
   }
 });
 
 // src/Prebuilt/components/Toast/ToastConfig.jsx
-var import_react212, import_react_sdk108, import_react_icons100, ChatAction, HandRaiseAction, ToastConfig;
+var import_react213, import_react_sdk108, import_react_icons101, ChatAction, HandRaiseAction, ToastConfig;
 var init_ToastConfig = __esm({
   "src/Prebuilt/components/Toast/ToastConfig.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react212 = __toESM(require("react"));
+    import_react213 = __toESM(require("react"));
     import_react_sdk108 = require("@100mslive/react-sdk");
-    import_react_icons100 = require("@100mslive/react-icons");
+    import_react_icons101 = require("@100mslive/react-icons");
     init_Button2();
     init_roomLayoutProvider();
     init_useSidepane();
     init_constants();
-    ChatAction = import_react212.default.forwardRef((_2, ref) => {
+    ChatAction = import_react213.default.forwardRef((_2, ref) => {
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
       if (isChatOpen) {
         return null;
       }
-      return /* @__PURE__ */ import_react212.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
+      return /* @__PURE__ */ import_react213.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
     });
-    HandRaiseAction = import_react212.default.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
+    HandRaiseAction = import_react213.default.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
       var _a8, _b7, _c;
       const hmsActions = (0, import_react_sdk108.useHMSActions)();
       const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
@@ -33300,7 +33527,7 @@ var init_ToastConfig = __esm({
         off_stage_roles = [],
         skip_preview_for_role_change = false
       } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.conferencing) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements.on_stage_exp) || {};
-      const onClickHandler = (0, import_react212.useCallback)(() => __async(void 0, null, function* () {
+      const onClickHandler = (0, import_react213.useCallback)(() => __async(void 0, null, function* () {
         if (isSingleHandRaise) {
           hmsActions.changeRoleOfPeer(id, on_stage_role, skip_preview_for_role_change);
           if (skip_preview_for_role_change) {
@@ -33321,7 +33548,7 @@ var init_ToastConfig = __esm({
       if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {
         return null;
       }
-      return /* @__PURE__ */ import_react212.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
+      return /* @__PURE__ */ import_react213.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
     });
     ToastConfig = {
       PEER_LIST: {
@@ -33330,18 +33557,18 @@ var init_ToastConfig = __esm({
           if (notification.data.length === 1) {
             return {
               title: `${(_a8 = notification.data[0]) == null ? void 0 : _a8.name} joined`,
-              icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleAddIcon, null)
+              icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
             };
           }
           return {
             title: `${(_b7 = notification.data[notification.data.length - 1]) == null ? void 0 : _b7.name} and ${notification.data.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
           };
         },
         multiple: (notifications) => {
           return {
             title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
           };
         }
       },
@@ -33350,13 +33577,13 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} joined`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
           };
         },
         multiple: function(notifications) {
           return {
             title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
           };
         }
       },
@@ -33365,13 +33592,13 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} left`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleRemoveIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleRemoveIcon, null)
           };
         },
         multiple: function(notifications) {
           return {
             title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PeopleRemoveIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleRemoveIcon, null)
           };
         }
       },
@@ -33380,7 +33607,7 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} raised hand`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.HandIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.HandIcon, null)
           };
         },
         multiple: (notifications) => {
@@ -33391,7 +33618,7 @@ var init_ToastConfig = __esm({
           })).size;
           return {
             title: `${(_a8 = notifications[notifications.length - 1].data) == null ? void 0 : _a8.name} ${count > 1 ? `${count} and others` : ""} raised hand`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.HandIcon, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.HandIcon, null)
           };
         }
       },
@@ -33400,8 +33627,8 @@ var init_ToastConfig = __esm({
           var _a8, _b7;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} raised hand`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.HandIcon, null),
-            action: /* @__PURE__ */ import_react212.default.createElement(HandRaiseAction, { id: (_b7 = notification.data) == null ? void 0 : _b7.id })
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.HandIcon, null),
+            action: /* @__PURE__ */ import_react213.default.createElement(HandRaiseAction, { id: (_b7 = notification.data) == null ? void 0 : _b7.id })
           };
         },
         multiple: (notifications) => {
@@ -33412,8 +33639,8 @@ var init_ToastConfig = __esm({
           })).size;
           return {
             title: `${(_a8 = notifications[notifications.length - 1].data) == null ? void 0 : _a8.name} ${count > 1 ? `${count} and others` : ""} raised hand`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.HandIcon, null),
-            action: /* @__PURE__ */ import_react212.default.createElement(HandRaiseAction, { isSingleHandRaise: false })
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.HandIcon, null),
+            action: /* @__PURE__ */ import_react213.default.createElement(HandRaiseAction, { isSingleHandRaise: false })
           };
         }
       },
@@ -33422,15 +33649,15 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `New message from ${(_a8 = notification.data) == null ? void 0 : _a8.senderName}`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.ChatUnreadIcon, null),
-            action: /* @__PURE__ */ import_react212.default.createElement(ChatAction, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.ChatUnreadIcon, null),
+            action: /* @__PURE__ */ import_react213.default.createElement(ChatAction, null)
           };
         },
         multiple: (notifications) => {
           return {
             title: `${notifications.length} new messages`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.ChatUnreadIcon, null),
-            action: /* @__PURE__ */ import_react212.default.createElement(ChatAction, null)
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.ChatUnreadIcon, null),
+            action: /* @__PURE__ */ import_react213.default.createElement(ChatAction, null)
           };
         }
       },
@@ -33438,7 +33665,7 @@ var init_ToastConfig = __esm({
         single: () => {
           return {
             title: `You are now connected`,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.ConnectivityIcon, null),
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.ConnectivityIcon, null),
             variant: "success",
             duration: 3e3
           };
@@ -33450,7 +33677,7 @@ var init_ToastConfig = __esm({
             title: `You are offline for now. while we try to reconnect, please check
         your internet connection. ${message}.
       `,
-            icon: /* @__PURE__ */ import_react212.default.createElement(import_react_icons100.PoorConnectivityIcon, null),
+            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PoorConnectivityIcon, null),
             variant: "warning",
             duration: 3e4
           };
@@ -33530,12 +33757,12 @@ var init_ToastBatcher = __esm({
 });
 
 // src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx
-var import_react213, import_react_sdk109, HandRaisedNotifications;
+var import_react214, import_react_sdk109, HandRaisedNotifications;
 var init_HandRaisedNotifications = __esm({
   "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react213 = require("react");
+    import_react214 = require("react");
     import_react_sdk109 = require("@100mslive/react-sdk");
     init_ToastBatcher();
     init_useRoomLayoutScreen();
@@ -33547,7 +33774,7 @@ var init_HandRaisedNotifications = __esm({
       const vanillaStore = (0, import_react_sdk109.useHMSVanillaStore)();
       const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
       const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
-      (0, import_react213.useEffect)(() => {
+      (0, import_react214.useEffect)(() => {
         var _a8;
         if (!(notification == null ? void 0 : notification.data)) {
           return;
@@ -33569,20 +33796,20 @@ var init_HandRaisedNotifications = __esm({
 });
 
 // src/Prebuilt/components/Notifications/InitErrorModal.tsx
-var import_react214, import_react_sdk110, InitErrorModal;
+var import_react215, import_react_sdk110, InitErrorModal;
 var init_InitErrorModal = __esm({
   "src/Prebuilt/components/Notifications/InitErrorModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react214 = __toESM(require("react"));
+    import_react215 = __toESM(require("react"));
     import_react_sdk110 = require("@100mslive/react-sdk");
     init_src();
     init_DialogContent2();
     InitErrorModal = () => {
       const notification = (0, import_react_sdk110.useHMSNotifications)(import_react_sdk110.HMSNotificationTypes.ERROR);
-      const [showModal, setShowModal] = (0, import_react214.useState)(false);
-      const [info, setInfo] = (0, import_react214.useState)({ title: "Init Error", description: "" });
-      (0, import_react214.useEffect)(() => {
+      const [showModal, setShowModal] = (0, import_react215.useState)(false);
+      const [info, setInfo] = (0, import_react215.useState)({ title: "Init Error", description: "" });
+      (0, import_react215.useEffect)(() => {
         const data3 = notification == null ? void 0 : notification.data;
         if (!data3 || data3.action !== "INIT") {
           return;
@@ -33602,18 +33829,18 @@ var init_InitErrorModal = __esm({
         setInfo({ title, description });
         setShowModal(true);
       }, [notification]);
-      return /* @__PURE__ */ import_react214.default.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ import_react214.default.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ import_react214.default.createElement("br", null), "Current URL - ", window.location.href));
+      return /* @__PURE__ */ import_react215.default.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ import_react215.default.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ import_react215.default.createElement("br", null), "Current URL - ", window.location.href));
     };
   }
 });
 
 // src/Prebuilt/components/Notifications/PeerNotifications.tsx
-var import_react215, import_react_sdk111, notificationTypes, PeerNotifications;
+var import_react216, import_react_sdk111, notificationTypes, PeerNotifications;
 var init_PeerNotifications = __esm({
   "src/Prebuilt/components/Notifications/PeerNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react215 = require("react");
+    import_react216 = require("react");
     import_react_sdk111 = require("@100mslive/react-sdk");
     init_ToastBatcher();
     init_useUISettings();
@@ -33628,7 +33855,7 @@ var init_PeerNotifications = __esm({
       const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
       const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
       const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-      (0, import_react215.useEffect)(() => {
+      (0, import_react216.useEffect)(() => {
         if (!(notification == null ? void 0 : notification.data)) {
           return;
         }
@@ -33681,10 +33908,10 @@ var init_ios_perm_0 = __esm({
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 function PermissionErrorModal() {
   const notification = (0, import_react_sdk112.useHMSNotifications)(import_react_sdk112.HMSNotificationTypes.ERROR);
-  const [deviceType, setDeviceType] = (0, import_react216.useState)("");
-  const [isSystemError, setIsSystemError] = (0, import_react216.useState)(false);
-  const isMobile = (0, import_react_use48.useMedia)(config.media.md);
-  (0, import_react216.useEffect)(() => {
+  const [deviceType, setDeviceType] = (0, import_react217.useState)("");
+  const [isSystemError, setIsSystemError] = (0, import_react217.useState)(false);
+  const isMobile = (0, import_react_use49.useMedia)(config.media.md);
+  (0, import_react217.useEffect)(() => {
     var _a8, _b7, _c, _d, _e;
     if (!notification || ((_a8 = notification.data) == null ? void 0 : _a8.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
       return;
@@ -33705,7 +33932,7 @@ function PermissionErrorModal() {
     }
     setIsSystemError(notification.data.code === 3011);
   }, [notification]);
-  return deviceType ? /* @__PURE__ */ import_react216.default.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ import_react216.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react216.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react216.default.createElement(
+  return deviceType ? /* @__PURE__ */ import_react217.default.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ import_react217.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react217.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react217.default.createElement(
     Dialog.Content,
     {
       css: {
@@ -33715,15 +33942,15 @@ function PermissionErrorModal() {
         zIndex: 23
       }
     },
-    /* @__PURE__ */ import_react216.default.createElement(
+    /* @__PURE__ */ import_react217.default.createElement(
       Dialog.Title,
       {
         css: {
           borderBottom: "1px solid $border_default"
         }
       },
-      isMobile && isIOS ? /* @__PURE__ */ import_react216.default.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default, alt: "iOS Permission flow" }) : null,
-      isMobile && isAndroid ? /* @__PURE__ */ import_react216.default.createElement(
+      isMobile && isIOS ? /* @__PURE__ */ import_react217.default.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default, alt: "iOS Permission flow" }) : null,
+      isMobile && isAndroid ? /* @__PURE__ */ import_react217.default.createElement(
         "img",
         {
           src: android_perm_1_default,
@@ -33731,21 +33958,21 @@ function PermissionErrorModal() {
           alt: "Android Permission flow "
         }
       ) : null,
-      /* @__PURE__ */ import_react216.default.createElement(Text, { variant: "h6" }, "We can't access your ", deviceType)
+      /* @__PURE__ */ import_react217.default.createElement(Text, { variant: "h6" }, "We can't access your ", deviceType)
     ),
-    /* @__PURE__ */ import_react216.default.createElement(Text, { variant: "sm", css: { pt: "$4", pb: "$10", color: "$on_surface_medium" } }, isMobile && isIOS ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.' : null, isMobile && isAndroid ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.` : null, !isMobile ? `Access to ${deviceType} is required. ` : null, isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from sytem settings` : null, !isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from address bar or browser settings.` : null),
-    isMobile && isIOS ? /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, /* @__PURE__ */ import_react216.default.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ import_react216.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
-    isMobile && isAndroid ? /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, /* @__PURE__ */ import_react216.default.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ import_react216.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
-    !isMobile ? /* @__PURE__ */ import_react216.default.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ import_react216.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null
+    /* @__PURE__ */ import_react217.default.createElement(Text, { variant: "sm", css: { pt: "$4", pb: "$10", color: "$on_surface_medium" } }, isMobile && isIOS ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.' : null, isMobile && isAndroid ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.` : null, !isMobile ? `Access to ${deviceType} is required. ` : null, isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from sytem settings` : null, !isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from address bar or browser settings.` : null),
+    isMobile && isIOS ? /* @__PURE__ */ import_react217.default.createElement(import_react217.default.Fragment, null, /* @__PURE__ */ import_react217.default.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ import_react217.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
+    isMobile && isAndroid ? /* @__PURE__ */ import_react217.default.createElement(import_react217.default.Fragment, null, /* @__PURE__ */ import_react217.default.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ import_react217.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
+    !isMobile ? /* @__PURE__ */ import_react217.default.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ import_react217.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null
   ))) : null;
 }
-var import_react216, import_react_use48, import_react_sdk112;
+var import_react217, import_react_use49, import_react_sdk112;
 var init_PermissionErrorModal = __esm({
   "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react216 = __toESM(require("react"));
-    import_react_use48 = require("react-use");
+    import_react217 = __toESM(require("react"));
+    import_react_use49 = require("react-use");
     import_react_sdk112 = require("@100mslive/react-sdk");
     init_src();
     init_android_perm_1();
@@ -33755,12 +33982,12 @@ var init_PermissionErrorModal = __esm({
 });
 
 // src/Prebuilt/components/Notifications/ReconnectNotifications.tsx
-var import_react217, import_react_sdk113, notificationTypes2, notificationId, ReconnectNotifications;
+var import_react218, import_react_sdk113, notificationTypes2, notificationId, ReconnectNotifications;
 var init_ReconnectNotifications = __esm({
   "src/Prebuilt/components/Notifications/ReconnectNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react217 = __toESM(require("react"));
+    import_react218 = __toESM(require("react"));
     import_react_sdk113 = require("@100mslive/react-sdk");
     init_src();
     init_ToastConfig();
@@ -33773,8 +34000,8 @@ var init_ReconnectNotifications = __esm({
     notificationId = null;
     ReconnectNotifications = () => {
       const notification = (0, import_react_sdk113.useHMSNotifications)(notificationTypes2);
-      const [open, setOpen] = (0, import_react217.useState)(false);
-      (0, import_react217.useEffect)(() => {
+      const [open, setOpen] = (0, import_react218.useState)(false);
+      (0, import_react218.useEffect)(() => {
         var _a8, _b7;
         if (!notification) {
           return;
@@ -33793,7 +34020,7 @@ var init_ReconnectNotifications = __esm({
       }, [notification]);
       if (!open)
         return null;
-      return /* @__PURE__ */ import_react217.default.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ import_react217.default.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ import_react217.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react217.default.createElement(
+      return /* @__PURE__ */ import_react218.default.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ import_react218.default.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ import_react218.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react218.default.createElement(
         Dialog.Content,
         {
           css: {
@@ -33807,31 +34034,31 @@ var init_ReconnectNotifications = __esm({
             animation: "none !important"
           }
         },
-        /* @__PURE__ */ import_react217.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react217.default.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ import_react217.default.createElement(Loading, { size: 16 })), /* @__PURE__ */ import_react217.default.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
+        /* @__PURE__ */ import_react218.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react218.default.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ import_react218.default.createElement(Loading, { size: 16 })), /* @__PURE__ */ import_react218.default.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
       )));
     };
   }
 });
 
 // src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx
-var import_react218, import_react_sdk114, import_react_icons101, TrackBulkUnmuteModal;
+var import_react219, import_react_sdk114, import_react_icons102, TrackBulkUnmuteModal;
 var init_TrackBulkUnmuteModal = __esm({
   "src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react218 = __toESM(require("react"));
+    import_react219 = __toESM(require("react"));
     import_react_sdk114 = require("@100mslive/react-sdk");
-    import_react_icons101 = require("@100mslive/react-icons");
+    import_react_icons102 = require("@100mslive/react-icons");
     init_DialogContent2();
     TrackBulkUnmuteModal = () => {
       const hmsActions = (0, import_react_sdk114.useHMSActions)();
-      const [muteNotification, setMuteNotification] = (0, import_react218.useState)(null);
+      const [muteNotification, setMuteNotification] = (0, import_react219.useState)(null);
       const notification = (0, import_react_sdk114.useHMSNotifications)([
         import_react_sdk114.HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
         import_react_sdk114.HMSNotificationTypes.ROOM_ENDED,
         import_react_sdk114.HMSNotificationTypes.REMOVED_FROM_ROOM
       ]);
-      (0, import_react218.useEffect)(() => {
+      (0, import_react219.useEffect)(() => {
         switch (notification == null ? void 0 : notification.type) {
           case import_react_sdk114.HMSNotificationTypes.REMOVED_FROM_ROOM:
           case import_react_sdk114.HMSNotificationTypes.ROOM_ENDED:
@@ -33851,7 +34078,7 @@ var init_TrackBulkUnmuteModal = __esm({
       }
       const { requestedBy: peer, tracks, enabled } = muteNotification;
       const types = new Set(tracks.map((track) => track.type));
-      return /* @__PURE__ */ import_react218.default.createElement(
+      return /* @__PURE__ */ import_react219.default.createElement(
         RequestDialog,
         {
           title: "Unmute request",
@@ -33863,7 +34090,7 @@ var init_TrackBulkUnmuteModal = __esm({
             });
             setMuteNotification(null);
           },
-          Icon: import_react_icons101.MicOnIcon
+          Icon: import_react_icons102.MicOnIcon
         }
       );
     };
@@ -33871,12 +34098,12 @@ var init_TrackBulkUnmuteModal = __esm({
 });
 
 // src/Prebuilt/components/Notifications/TrackNotifications.tsx
-var import_react219, import_react_sdk115, notificationTypes3, TrackNotifications;
+var import_react220, import_react_sdk115, notificationTypes3, TrackNotifications;
 var init_TrackNotifications = __esm({
   "src/Prebuilt/components/Notifications/TrackNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react219 = require("react");
+    import_react220 = require("react");
     import_react_sdk115 = require("@100mslive/react-sdk");
     notificationTypes3 = [
       import_react_sdk115.HMSNotificationTypes.TRACK_ADDED,
@@ -33886,7 +34113,7 @@ var init_TrackNotifications = __esm({
     ];
     TrackNotifications = () => {
       const notification = (0, import_react_sdk115.useHMSNotifications)(notificationTypes3);
-      (0, import_react219.useEffect)(() => {
+      (0, import_react220.useEffect)(() => {
         if (notification) {
           console.debug(`[${notification.type}]`, notification);
         }
@@ -33897,14 +34124,14 @@ var init_TrackNotifications = __esm({
 });
 
 // src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx
-var import_react220, import_react_sdk116, import_react_icons102, TrackUnmuteModal;
+var import_react221, import_react_sdk116, import_react_icons103, TrackUnmuteModal;
 var init_TrackUnmuteModal = __esm({
   "src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react220 = __toESM(require("react"));
+    import_react221 = __toESM(require("react"));
     import_react_sdk116 = require("@100mslive/react-sdk");
-    import_react_icons102 = require("@100mslive/react-icons");
+    import_react_icons103 = require("@100mslive/react-icons");
     init_DialogContent2();
     TrackUnmuteModal = () => {
       const hmsActions = (0, import_react_sdk116.useHMSActions)();
@@ -33913,8 +34140,8 @@ var init_TrackUnmuteModal = __esm({
         import_react_sdk116.HMSNotificationTypes.ROOM_ENDED,
         import_react_sdk116.HMSNotificationTypes.REMOVED_FROM_ROOM
       ]);
-      const [muteNotification, setMuteNotification] = (0, import_react220.useState)(null);
-      (0, import_react220.useEffect)(() => {
+      const [muteNotification, setMuteNotification] = (0, import_react221.useState)(null);
+      (0, import_react221.useEffect)(() => {
         switch (notification == null ? void 0 : notification.type) {
           case import_react_sdk116.HMSNotificationTypes.REMOVED_FROM_ROOM:
           case import_react_sdk116.HMSNotificationTypes.ROOM_ENDED:
@@ -33933,7 +34160,7 @@ var init_TrackUnmuteModal = __esm({
         return null;
       }
       const { requestedBy: peer, track, enabled } = muteNotification;
-      return /* @__PURE__ */ import_react220.default.createElement(
+      return /* @__PURE__ */ import_react221.default.createElement(
         RequestDialog,
         {
           title: `Unmute your ${track.type}?`,
@@ -33943,7 +34170,7 @@ var init_TrackUnmuteModal = __esm({
             hmsActions.setEnabledTrack(track.id, enabled);
             setMuteNotification(null);
           },
-          Icon: import_react_icons102.MicOnIcon
+          Icon: import_react_icons103.MicOnIcon
         }
       );
     };
@@ -33965,14 +34192,14 @@ function Notifications() {
   const { showNotification } = (0, import_react_sdk117.useAwayNotifications)();
   const amIScreenSharing = (0, import_react_sdk117.useHMSStore)(import_react_sdk117.selectIsLocalScreenShared);
   const logoURL = (_b7 = (_a8 = useRoomLayout()) == null ? void 0 : _a8.logo) == null ? void 0 : _b7.url;
-  const handleRoleChangeDenied = (0, import_react221.useCallback)((request) => {
+  const handleRoleChangeDenied = (0, import_react222.useCallback)((request) => {
     ToastManager.addToast({
       title: `${request.peerName} denied your request to join the ${request.role.name} role`,
       variant: "error"
     });
   }, []);
   (0, import_react_sdk117.useCustomEvent)({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
-  (0, import_react221.useEffect)(() => {
+  (0, import_react222.useEffect)(() => {
     var _a9, _b8, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m2, _n2, _o2, _p;
     if (!notification || isNotificationDisabled) {
       return;
@@ -33991,7 +34218,7 @@ function Notifications() {
             ToastManager.addToast({
               title: "The room is currently full, try joining later",
               close: true,
-              icon: /* @__PURE__ */ import_react221.default.createElement(Box, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ import_react221.default.createElement(import_react_icons103.GroupIcon, null))
+              icon: /* @__PURE__ */ import_react222.default.createElement(Box, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ import_react222.default.createElement(import_react_icons104.GroupIcon, null))
             });
           } else {
             ToastManager.addToast({
@@ -34048,7 +34275,7 @@ function Notifications() {
           const pollStartedBy = vanillaStore.getState((0, import_react_sdk117.selectPeerNameByID)(notification.data.startedBy)) || "Participant";
           const pollToastID = ToastManager.addToast({
             title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
-            action: /* @__PURE__ */ import_react221.default.createElement(
+            action: /* @__PURE__ */ import_react222.default.createElement(
               Button,
               {
                 onClick: () => togglePollView(notification.data.id),
@@ -34089,16 +34316,16 @@ function Notifications() {
   if (isNotificationDisabled) {
     return null;
   }
-  return /* @__PURE__ */ import_react221.default.createElement(import_react221.default.Fragment, null, /* @__PURE__ */ import_react221.default.createElement(TrackUnmuteModal, null), /* @__PURE__ */ import_react221.default.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ import_react221.default.createElement(TrackNotifications, null), roomState === import_react_sdk117.HMSRoomState.Connected ? /* @__PURE__ */ import_react221.default.createElement(PeerNotifications, null) : null, /* @__PURE__ */ import_react221.default.createElement(ReconnectNotifications, null), /* @__PURE__ */ import_react221.default.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ import_react221.default.createElement(PermissionErrorModal, null), /* @__PURE__ */ import_react221.default.createElement(InitErrorModal, null), /* @__PURE__ */ import_react221.default.createElement(ChatNotifications, null), /* @__PURE__ */ import_react221.default.createElement(HandRaisedNotifications, null));
+  return /* @__PURE__ */ import_react222.default.createElement(import_react222.default.Fragment, null, /* @__PURE__ */ import_react222.default.createElement(TrackUnmuteModal, null), /* @__PURE__ */ import_react222.default.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ import_react222.default.createElement(TrackNotifications, null), roomState === import_react_sdk117.HMSRoomState.Connected ? /* @__PURE__ */ import_react222.default.createElement(PeerNotifications, null) : null, /* @__PURE__ */ import_react222.default.createElement(ReconnectNotifications, null), /* @__PURE__ */ import_react222.default.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ import_react222.default.createElement(PermissionErrorModal, null), /* @__PURE__ */ import_react222.default.createElement(InitErrorModal, null), /* @__PURE__ */ import_react222.default.createElement(ChatNotifications, null), /* @__PURE__ */ import_react222.default.createElement(HandRaisedNotifications, null));
 }
-var import_react221, import_react_sdk117, import_react_icons103, pollToastKey;
+var import_react222, import_react_sdk117, import_react_icons104, pollToastKey;
 var init_Notifications = __esm({
   "src/Prebuilt/components/Notifications/Notifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react221 = __toESM(require("react"));
+    import_react222 = __toESM(require("react"));
     import_react_sdk117 = require("@100mslive/react-sdk");
-    import_react_icons103 = require("@100mslive/react-icons");
+    import_react_icons104 = require("@100mslive/react-icons");
     init_src();
     init_roomLayoutProvider();
     init_ToastManager();
@@ -34130,13 +34357,13 @@ var init_Notifications2 = __esm({
 });
 
 // src/Prebuilt/components/Preview/PreviewScreen.tsx
-var import_react222, import_react_use49, PreviewScreen;
+var import_react223, import_react_use50, PreviewScreen;
 var init_PreviewScreen = __esm({
   "src/Prebuilt/components/Preview/PreviewScreen.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react222 = __toESM(require("react"));
-    import_react_use49 = require("react-use");
+    import_react223 = __toESM(require("react"));
+    import_react_use50 = require("react-use");
     init_src();
     init_AppContext();
     init_roomLayoutProvider();
@@ -34149,36 +34376,36 @@ var init_PreviewScreen = __esm({
       var _a8, _b7, _c;
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const skipPreview = !isPreviewScreenEnabled;
-      const previewAsRole = (0, import_react_use49.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
+      const previewAsRole = (0, import_react_use50.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
       const { userName } = useHMSPrebuiltContext();
       const initialName = userName || (skipPreview ? "Beam" : "");
       const authToken = useAuthToken();
       const roomLayout = useRoomLayout();
       const { preview_header: previewHeader = {} } = ((_c = (_b7 = (_a8 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
-      return /* @__PURE__ */ import_react222.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react222.default.createElement(
+      return /* @__PURE__ */ import_react223.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react223.default.createElement(
         Flex,
         {
           css: { flex: "1 1 0", position: "relative", overflowY: "auto", color: "$primary_default" },
           justify: "center",
           align: "center"
         },
-        authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ import_react222.default.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole != null ? previewAsRole : void 0 }) : /* @__PURE__ */ import_react222.default.createElement(FullPageProgress_default, null)
+        authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ import_react223.default.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole != null ? previewAsRole : void 0 }) : /* @__PURE__ */ import_react223.default.createElement(FullPageProgress_default, null)
       ));
     };
   }
 });
 
 // src/Prebuilt/components/Toast/Toast.jsx
-var import_react223, Toast2;
+var import_react224, Toast2;
 var init_Toast3 = __esm({
   "src/Prebuilt/components/Toast/Toast.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react223 = __toESM(require("react"));
+    import_react224 = __toESM(require("react"));
     init_Toast2();
     Toast2 = (_a8) => {
       var _b7 = _a8, { title, description, close = true, open, duration, onOpenChange, icon } = _b7, props = __objRest(_b7, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
-      return /* @__PURE__ */ import_react223.default.createElement(
+      return /* @__PURE__ */ import_react224.default.createElement(
         Toast.HMSToast,
         __spreadValues({
           title,
@@ -34195,12 +34422,12 @@ var init_Toast3 = __esm({
 });
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-var import_react224, import_react_sdk118, ToastContainer;
+var import_react225, import_react_sdk118, ToastContainer;
 var init_ToastContainer = __esm({
   "src/Prebuilt/components/Toast/ToastContainer.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react224 = __toESM(require("react"));
+    import_react225 = __toESM(require("react"));
     import_react_sdk118 = require("@100mslive/react-sdk");
     init_Toast2();
     init_Toast3();
@@ -34208,16 +34435,16 @@ var init_ToastContainer = __esm({
     init_constants();
     ToastContainer = () => {
       const isConnected = (0, import_react_sdk118.useHMSStore)(import_react_sdk118.selectIsConnectedToRoom);
-      const [toasts, setToast] = (0, import_react224.useState)([]);
-      (0, import_react224.useEffect)(() => {
+      const [toasts, setToast] = (0, import_react225.useState)([]);
+      (0, import_react225.useEffect)(() => {
         ToastManager.addListener(setToast);
         return () => {
           ToastManager.removeListener(setToast);
         };
       }, []);
-      return /* @__PURE__ */ import_react224.default.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
-        return /* @__PURE__ */ import_react224.default.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
-      }), /* @__PURE__ */ import_react224.default.createElement(
+      return /* @__PURE__ */ import_react225.default.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
+        return /* @__PURE__ */ import_react225.default.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
+      }), /* @__PURE__ */ import_react225.default.createElement(
         Toast.Viewport,
         {
           css: __spreadValues({
@@ -34230,13 +34457,13 @@ var init_ToastContainer = __esm({
 });
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx
-var import_react225, import_react_icons104, RoomDetailsSheet;
+var import_react226, import_react_icons105, RoomDetailsSheet;
 var init_RoomDetailsSheet = __esm({
   "src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react225 = __toESM(require("react"));
-    import_react_icons104 = require("@100mslive/react-icons");
+    import_react226 = __toESM(require("react"));
+    import_react_icons105 = require("@100mslive/react-icons");
     init_Layout();
     init_Sheet2();
     init_Text2();
@@ -34249,27 +34476,27 @@ var init_RoomDetailsSheet = __esm({
       const { title, description, details } = useRoomLayoutHeader();
       const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
       const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS);
-      return /* @__PURE__ */ import_react225.default.createElement(Sheet.Root, { open: showRoomDetailsSheet, onOpenChange: toggleSheet }, /* @__PURE__ */ import_react225.default.createElement(Sheet.Content, { css: { py: "$8", pb: "$12" } }, /* @__PURE__ */ import_react225.default.createElement(
+      return /* @__PURE__ */ import_react226.default.createElement(Sheet.Root, { open: showRoomDetailsSheet, onOpenChange: toggleSheet }, /* @__PURE__ */ import_react226.default.createElement(Sheet.Content, { css: { py: "$8", pb: "$12" } }, /* @__PURE__ */ import_react226.default.createElement(
         Flex,
         {
           justify: "between",
           align: "center",
           css: { w: "100%", borderBottom: "1px solid $border_bright", pb: "$4", mb: "$4", px: "$8" }
         },
-        /* @__PURE__ */ import_react225.default.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Description"),
-        /* @__PURE__ */ import_react225.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react225.default.createElement(import_react_icons104.CrossIcon, null))
-      ), /* @__PURE__ */ import_react225.default.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4", pb: "$8", px: "$8" } }, /* @__PURE__ */ import_react225.default.createElement(Logo, null), /* @__PURE__ */ import_react225.default.createElement(Box, null, /* @__PURE__ */ import_react225.default.createElement(Text, { variant: "sm", css: { c: "$on_secondary_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ import_react225.default.createElement(RoomDetailsRow, { details }))), /* @__PURE__ */ import_react225.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", px: "$8" } }, description)));
+        /* @__PURE__ */ import_react226.default.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Description"),
+        /* @__PURE__ */ import_react226.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react226.default.createElement(import_react_icons105.CrossIcon, null))
+      ), /* @__PURE__ */ import_react226.default.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4", pb: "$8", px: "$8" } }, /* @__PURE__ */ import_react226.default.createElement(Logo, null), /* @__PURE__ */ import_react226.default.createElement(Box, null, /* @__PURE__ */ import_react226.default.createElement(Text, { variant: "sm", css: { c: "$on_secondary_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ import_react226.default.createElement(RoomDetailsRow, { details }))), /* @__PURE__ */ import_react226.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", px: "$8" } }, description)));
     };
   }
 });
 
 // src/Prebuilt/layouts/Sheet.tsx
-var import_react226, import_react_sdk119, Sheet2;
+var import_react227, import_react_sdk119, Sheet2;
 var init_Sheet3 = __esm({
   "src/Prebuilt/layouts/Sheet.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react226 = __toESM(require("react"));
+    import_react227 = __toESM(require("react"));
     import_react_sdk119 = require("@100mslive/react-sdk");
     init_RoomDetailsSheet();
     init_Layout();
@@ -34278,9 +34505,9 @@ var init_Sheet3 = __esm({
       const sheet = (0, import_react_sdk119.useHMSStore)((0, import_react_sdk119.selectAppData)(APP_DATA.sheet));
       let ViewComponent;
       if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
-        ViewComponent = /* @__PURE__ */ import_react226.default.createElement(RoomDetailsSheet, null);
+        ViewComponent = /* @__PURE__ */ import_react227.default.createElement(RoomDetailsSheet, null);
       }
-      return /* @__PURE__ */ import_react226.default.createElement(Box, null, ViewComponent);
+      return /* @__PURE__ */ import_react227.default.createElement(Box, null, ViewComponent);
     };
   }
 });
@@ -34289,10 +34516,10 @@ var init_Sheet3 = __esm({
 function FlyingEmoji() {
   const localPeerId = (0, import_react_sdk120.useHMSStore)(import_react_sdk120.selectLocalPeerID);
   const vanillaStore = (0, import_react_sdk120.useHMSVanillaStore)();
-  const [emojis, setEmojis] = (0, import_react227.useState)([]);
-  const isMobile = (0, import_react_use50.useMedia)(config.media.md);
-  const startingPoints = (0, import_react227.useMemo)(() => getStartingPoints(isMobile), [isMobile]);
-  const showFlyingEmoji = (0, import_react227.useCallback)(
+  const [emojis, setEmojis] = (0, import_react228.useState)([]);
+  const isMobile = (0, import_react_use51.useMedia)(config.media.md);
+  const startingPoints = (0, import_react228.useMemo)(() => getStartingPoints(isMobile), [isMobile]);
+  const showFlyingEmoji = (0, import_react228.useCallback)(
     ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
@@ -34320,10 +34547,10 @@ function FlyingEmoji() {
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
-  (0, import_react227.useEffect)(() => {
+  (0, import_react228.useEffect)(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
-  return /* @__PURE__ */ import_react227.default.createElement(
+  return /* @__PURE__ */ import_react228.default.createElement(
     Box,
     {
       css: {
@@ -34339,7 +34566,7 @@ function FlyingEmoji() {
       }
     },
     emojis.map((emoji) => {
-      return /* @__PURE__ */ import_react227.default.createElement(
+      return /* @__PURE__ */ import_react228.default.createElement(
         Flex,
         {
           key: emoji.id,
@@ -34355,8 +34582,8 @@ function FlyingEmoji() {
             setEmojis(emojis.filter((item) => item.id !== emoji.id));
           }
         },
-        /* @__PURE__ */ import_react227.default.createElement(Box, null, /* @__PURE__ */ import_react227.default.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
-        /* @__PURE__ */ import_react227.default.createElement(
+        /* @__PURE__ */ import_react228.default.createElement(Box, null, /* @__PURE__ */ import_react228.default.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
+        /* @__PURE__ */ import_react228.default.createElement(
           Box,
           {
             css: {
@@ -34366,7 +34593,7 @@ function FlyingEmoji() {
               borderRadius: "$1"
             }
           },
-          /* @__PURE__ */ import_react227.default.createElement(
+          /* @__PURE__ */ import_react228.default.createElement(
             Text,
             {
               css: {
@@ -34382,13 +34609,13 @@ function FlyingEmoji() {
     })
   );
 }
-var import_react227, import_react_use50, import_react_sdk120, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
+var import_react228, import_react_use51, import_react_sdk120, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
 var init_FlyingEmoji = __esm({
   "src/Prebuilt/plugins/FlyingEmoji.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react227 = __toESM(require("react"));
-    import_react_use50 = require("react-use");
+    import_react228 = __toESM(require("react"));
+    import_react_use51 = require("react-use");
     import_react_sdk120 = require("@100mslive/react-sdk");
     init_Layout();
     init_Text2();
@@ -34423,33 +34650,33 @@ var init_FlyingEmoji = __esm({
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
 function RemoteStopScreenshare() {
   const actions = (0, import_react_sdk121.useHMSActions)();
-  const onRemoteStopScreenshare = (0, import_react228.useCallback)(() => __async(this, null, function* () {
+  const onRemoteStopScreenshare = (0, import_react229.useCallback)(() => __async(this, null, function* () {
     yield actions.setScreenShareEnabled(false);
   }), [actions]);
   (0, import_react_sdk121.useCustomEvent)({
     type: REMOTE_STOP_SCREENSHARE_TYPE,
     onEvent: onRemoteStopScreenshare
   });
-  return /* @__PURE__ */ import_react228.default.createElement(import_react228.default.Fragment, null);
+  return /* @__PURE__ */ import_react229.default.createElement(import_react229.default.Fragment, null);
 }
-var import_react228, import_react_sdk121;
+var import_react229, import_react_sdk121;
 var init_RemoteStopScreenshare = __esm({
   "src/Prebuilt/plugins/RemoteStopScreenshare.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react228 = __toESM(require("react"));
+    import_react229 = __toESM(require("react"));
     import_react_sdk121 = require("@100mslive/react-sdk");
     init_constants();
   }
 });
 
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
-var import_react229, import_react_sdk122, useAutoStartStreaming;
+var import_react230, import_react_sdk122, useAutoStartStreaming;
 var init_useAutoStartStreaming = __esm({
   "src/Prebuilt/components/hooks/useAutoStartStreaming.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react229 = require("react");
+    import_react230 = require("react");
     import_react_sdk122 = require("@100mslive/react-sdk");
     init_useUISettings();
     init_hooks();
@@ -34461,8 +34688,8 @@ var init_useAutoStartStreaming = __esm({
       const hmsActions = (0, import_react_sdk122.useHMSActions)();
       const isConnected = (0, import_react_sdk122.useHMSStore)(import_react_sdk122.selectIsConnectedToRoom);
       const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = (0, import_react_sdk122.useRecordingStreaming)();
-      const streamStartedRef = (0, import_react229.useRef)(false);
-      const startHLS = (0, import_react229.useCallback)(() => __async(void 0, null, function* () {
+      const streamStartedRef = (0, import_react230.useRef)(false);
+      const startHLS = (0, import_react230.useCallback)(() => __async(void 0, null, function* () {
         try {
           if (isHLSStarted || !showStreamingUI || isHLSRunning || isRTMPRunning || isHLSRecordingOn || isBrowserRecordingOn) {
             return;
@@ -34485,12 +34712,12 @@ var init_useAutoStartStreaming = __esm({
         isHLSRecordingOn,
         isBrowserRecordingOn
       ]);
-      (0, import_react229.useEffect)(() => {
+      (0, import_react230.useEffect)(() => {
         if (!isHLSStarted && !isHLSRunning) {
           streamStartedRef.current = false;
         }
       }, [isHLSStarted, isHLSRunning]);
-      (0, import_react229.useEffect)(() => {
+      (0, import_react230.useEffect)(() => {
         if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
           return;
         }
@@ -34508,14 +34735,14 @@ function AppRoutes({
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
   const { activeState, rejoin } = useAppStateManager();
-  return /* @__PURE__ */ import_react230.default.createElement(AppStateContext.Provider, { value: { rejoin } }, /* @__PURE__ */ import_react230.default.createElement(import_react230.default.Fragment, null, activeState !== "leave" /* LEAVE */ && /* @__PURE__ */ import_react230.default.createElement(AppData, null), /* @__PURE__ */ import_react230.default.createElement(ToastContainer, null), /* @__PURE__ */ import_react230.default.createElement(Notifications, null), /* @__PURE__ */ import_react230.default.createElement(MwebLandscapePrompt, null), /* @__PURE__ */ import_react230.default.createElement(Sheet2, null), /* @__PURE__ */ import_react230.default.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ import_react230.default.createElement(FlyingEmoji, null), /* @__PURE__ */ import_react230.default.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ import_react230.default.createElement(KeyboardHandler, null), /* @__PURE__ */ import_react230.default.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && activeState && /* @__PURE__ */ import_react230.default.createElement(AppStates, { activeState })));
+  return /* @__PURE__ */ import_react231.default.createElement(AppStateContext.Provider, { value: { rejoin } }, /* @__PURE__ */ import_react231.default.createElement(import_react231.default.Fragment, null, activeState !== "leave" /* LEAVE */ && /* @__PURE__ */ import_react231.default.createElement(AppData, null), /* @__PURE__ */ import_react231.default.createElement(ToastContainer, null), /* @__PURE__ */ import_react231.default.createElement(Notifications, null), /* @__PURE__ */ import_react231.default.createElement(MwebLandscapePrompt, null), /* @__PURE__ */ import_react231.default.createElement(Sheet2, null), /* @__PURE__ */ import_react231.default.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ import_react231.default.createElement(FlyingEmoji, null), /* @__PURE__ */ import_react231.default.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ import_react231.default.createElement(KeyboardHandler, null), /* @__PURE__ */ import_react231.default.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && activeState && /* @__PURE__ */ import_react231.default.createElement(AppStates, { activeState })));
 }
-var import_react230, import_react_sdk123, HMSPrebuilt, AppStates, BackSwipe;
+var import_react231, import_react_sdk123, HMSPrebuilt, AppStates, BackSwipe;
 var init_App = __esm({
   "src/Prebuilt/App.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react230 = __toESM(require("react"));
+    import_react231 = __toESM(require("react"));
     import_react_sdk123 = require("@100mslive/react-sdk");
     init_AppData();
     init_AuthToken();
@@ -34543,7 +34770,7 @@ var init_App = __esm({
     init_useRoomLayoutScreen();
     init_FeatureFlags();
     init_constants();
-    HMSPrebuilt = import_react230.default.forwardRef(
+    HMSPrebuilt = import_react231.default.forwardRef(
       ({
         roomCode = "",
         authToken = "",
@@ -34557,9 +34784,9 @@ var init_App = __esm({
         onJoin
       }, ref) => {
         var _a8, _b7, _c, _d;
-        const reactiveStore = (0, import_react230.useRef)();
-        const [hydrated, setHydrated] = import_react230.default.useState(false);
-        (0, import_react230.useEffect)(() => {
+        const reactiveStore = (0, import_react231.useRef)();
+        const [hydrated, setHydrated] = import_react231.default.useState(false);
+        (0, import_react231.useEffect)(() => {
           setHydrated(true);
           const hms = new import_react_sdk123.HMSReactiveStore();
           const hmsStore = hms.getStore();
@@ -34574,13 +34801,13 @@ var init_App = __esm({
             hmsNotifications
           };
         }, []);
-        (0, import_react230.useEffect)(() => {
+        (0, import_react231.useEffect)(() => {
           if (!ref || !reactiveStore.current) {
             return;
           }
           ref.current = __spreadValues({}, reactiveStore.current);
         }, [ref]);
-        (0, import_react230.useEffect)(() => {
+        (0, import_react231.useEffect)(() => {
           return () => {
             var _a9;
             VBHandler.reset();
@@ -34609,7 +34836,7 @@ var init_App = __esm({
           return null;
         }
         globalStyles();
-        return /* @__PURE__ */ import_react230.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react230.default.createElement(
+        return /* @__PURE__ */ import_react231.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react231.default.createElement(
           HMSPrebuiltContext.Provider,
           {
             value: {
@@ -34626,7 +34853,7 @@ var init_App = __esm({
               }
             }
           },
-          /* @__PURE__ */ import_react230.default.createElement(
+          /* @__PURE__ */ import_react231.default.createElement(
             import_react_sdk123.HMSRoomProvider,
             {
               isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -34635,7 +34862,7 @@ var init_App = __esm({
               notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
               stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
             },
-            /* @__PURE__ */ import_react230.default.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ import_react230.default.createElement(RoomLayoutContext.Consumer, null, (data3) => {
+            /* @__PURE__ */ import_react231.default.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ import_react231.default.createElement(RoomLayoutContext.Consumer, null, (data3) => {
               var _a9;
               const layout = data3 == null ? void 0 : data3.layout;
               const theme2 = ((_a9 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a9[0]) || {};
@@ -34644,7 +34871,7 @@ var init_App = __esm({
               if (typography2 == null ? void 0 : typography2.font_family) {
                 fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
               }
-              return /* @__PURE__ */ import_react230.default.createElement(
+              return /* @__PURE__ */ import_react231.default.createElement(
                 HMSThemeProvider,
                 {
                   themeType: `${theme2.name}-${Date.now()}`,
@@ -34657,8 +34884,8 @@ var init_App = __esm({
                     }
                   }
                 },
-                /* @__PURE__ */ import_react230.default.createElement(Init, null),
-                /* @__PURE__ */ import_react230.default.createElement(DialogContainerProvider, { dialogContainerSelector: containerSelector }, /* @__PURE__ */ import_react230.default.createElement(
+                /* @__PURE__ */ import_react231.default.createElement(Init, null),
+                /* @__PURE__ */ import_react231.default.createElement(DialogContainerProvider, { dialogContainerSelector: containerSelector }, /* @__PURE__ */ import_react231.default.createElement(
                   Box,
                   {
                     className: DEFAULT_PORTAL_CONTAINER.slice(1),
@@ -34670,7 +34897,7 @@ var init_App = __esm({
                       position: "relative"
                     }
                   },
-                  /* @__PURE__ */ import_react230.default.createElement(
+                  /* @__PURE__ */ import_react231.default.createElement(
                     AppRoutes,
                     {
                       authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint,
@@ -34690,16 +34917,16 @@ var init_App = __esm({
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       useAutoStartStreaming();
       if (activeState === "preview" /* PREVIEW */ && isPreviewScreenEnabled) {
-        return /* @__PURE__ */ import_react230.default.createElement(PreviewScreen, null);
+        return /* @__PURE__ */ import_react231.default.createElement(PreviewScreen, null);
       } else if (activeState === "leave" /* LEAVE */ && isLeaveScreenEnabled) {
-        return /* @__PURE__ */ import_react230.default.createElement(LeaveScreen, null);
+        return /* @__PURE__ */ import_react231.default.createElement(LeaveScreen, null);
       }
-      return /* @__PURE__ */ import_react230.default.createElement(ConferenceScreen, null);
+      return /* @__PURE__ */ import_react231.default.createElement(ConferenceScreen, null);
     };
     BackSwipe = () => {
       const isConnectedToRoom = (0, import_react_sdk123.useHMSStore)(import_react_sdk123.selectIsConnectedToRoom);
       const hmsActions = (0, import_react_sdk123.useHMSActions)();
-      (0, import_react230.useEffect)(() => {
+      (0, import_react231.useEffect)(() => {
         const onRouteLeave = () => __async(void 0, null, function* () {
           if (isConnectedToRoom) {
             yield hmsActions.leave();