@stream-io/video-react-sdk 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/index.cjs.js

@@ -4,7 +4,9 @@ var videoClient = require('@stream-io/video-client');
 var videoReactBindings = require('@stream-io/video-react-bindings');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var react$1 = require('@floating-ui/react');
+var i18n = require('@stream-io/i18n');
+var react$1 = require('@stream-io/i18n/react');
+var react$2 = require('@floating-ui/react');
 var clsx = require('clsx');
 
 const Audio = react.memo(function AudioRender({ participant, trackType = 'audioTrack', ...rest }) {
@@ -39,18 +41,169 @@ const ParticipantsAudio = (props) => {
 };
 ParticipantsAudio.displayName = 'ParticipantsAudio';
 
+/**
+ * The SDK's bundled translation data: the keys that cannot carry an inline `defaultValue` at their
+ * call site. `Streami18n` layers it under *every* language, so a partial dictionary never knocks
+ * these out.
+ *
+ * Empty, and that is the intended steady state. The four lookups this SDK resolved from a runtime
+ * value — the only candidates for an entry here — are written as `switch` statements over literal
+ * `t()` calls instead, so every branch carries its own English copy inline and the codegen reads it
+ * straight off the call site. Nothing is left without a default. `timestamp.*` / `duration.*`
+ * formatter expressions would also live here; this SDK has none yet.
+ *
+ * Adding an entry later needs no wiring. `Streami18n` already spreads this into the core options and
+ * `scripts/generate-i18n-keys.mts` already reads this path, so a new key reaches `keys.ts` on the
+ * next `build-translations` run — where a key nothing references, or one that shadows an inline
+ * default, fails a codegen guard.
+ */
+const runtimeDefaults = {};
+
+/**
+ * Wrapper around [i18next](https://www.i18next.com/) for this SDK's translations. Pass an instance
+ * to `<StreamVideo i18nInstance={…}>` to control the language and the copy.
+ *
+ * The implementation lives in `@stream-io/i18n`, shared with the React Native SDK and with Chat.
+ * What this subclass adds is what is this package's own: its bundled translation data, and the two
+ * type parameters — core cannot supply either, because the key catalog is generated from *this*
+ * package's `t()` call sites.
+ *
+ * ## Overriding some of the English copy
+ *
+ * ```ts
+ * const i18n = new Streami18n({
+ *   translationsForLanguage: {
+ *     'common.participants.label': 'People',
+ *   },
+ * });
+ * ```
+ *
+ * ## Adding a language
+ *
+ * ```ts
+ * import 'dayjs/locale/nl';
+ *
+ * const i18n = new Streami18n({ language: 'nl' });
+ * i18n.registerTranslation('nl', {
+ *   'callControls.cancelCallButton.leaveCall.title': 'Verlaten',
+ * });
+ * ```
+ *
+ * No dayjs locale file defines `calendar` — that field belongs to the calendar plugin — so a
+ * language whose relative dates must read natively needs the locale import *and* a `calendar`
+ * config passed as the third argument.
+ *
+ * Type your dictionary as `TranslationDictionary` to turn a typo or a key removed in a later major
+ * into a compile error. A **partial dictionary is safe**: any key you leave out renders the English
+ * copy that ships inline at each call site, never a raw dotted path — so there is no need to
+ * translate everything before shipping a language.
+ *
+ * Reactivity goes through `i18n.state`, a `StateStore`. `setLanguage()` returns nothing — the new
+ * `t` is published to that store, which the provider subscribes to.
+ */
+class Streami18n extends i18n.Streami18n {
+    constructor(options = {}) {
+        super({
+            ...options,
+            // Merged, not replaced. Spreading `options` over a literal would let an integrator supplying
+            // one entry silently drop the SDK's own bundled data, which then renders as raw keys.
+            runtimeDefaults: { ...runtimeDefaults, ...options.runtimeDefaults },
+        });
+    }
+}
+
+/**
+ * The `t` in force before i18next has initialized, and the context's default.
+ *
+ * Core's factory, instantiated against this SDK's catalog so it is typed exactly like the real `t`.
+ * It honours the inline `defaultValue` each prose call site passes, which is what stops raw dotted
+ * keys flashing on the first frame.
+ */
+const defaultTranslatorFunction = i18n.createDefaultTranslatorFunction();
+/**
+ * Built from the shared factory in `@stream-io/i18n/react`.
+ *
+ * A **default value** is supplied rather than making the hook throw, and that is deliberate: it
+ * matches what `useI18n` did before this module existed, and it is what lets the `embedded/`
+ * components — which are used standalone, outside any provider — render correct English instead of
+ * crashing. Chat's React Native SDK throws instead; hence core exposes this as a factory.
+ */
+const { TranslationContext, TranslationProvider, useTranslationContext } = react$1.createTranslationContext({
+    defaultValue: {
+        t: defaultTranslatorFunction,
+        tDateTimeParser: i18n.defaultDateTimeParser,
+    },
+    displayName: 'StreamVideoTranslationContext',
+});
+/**
+ * Reads `t` and `tDateTimeParser` from the closest provider.
+ *
+ * Works outside a provider too — the default translator renders each call site's inline English.
+ *
+ * The name is `useI18n` rather than core's `useTranslationContext` because ~500 call sites in this
+ * SDK already import it; renaming them is churn with no payoff.
+ *
+ * @example
+ * const { t } = useI18n();
+ * const label = t('callControls.cancelCallButton.leaveCall.title', 'Leave call');
+ */
+const useI18n = useTranslationContext;
+
+/**
+ * Resolves the translation context value: creates or adopts a {@link Streami18n} instance,
+ * registers the supplied dictionaries, initializes it and keeps `t` fresh across language changes.
+ *
+ * `init()` and the store subscription belong to `useStreami18nState` in `@stream-io/i18n/react`,
+ * shared with the React Native SDK.
+ */
+const useStreami18n = ({ i18nInstance, language, translations, }) => {
+    // Lazy `useState`, not `useMemo`: `new Streami18n()` is a real allocation with identity that must
+    // survive a re-render, and this repo lints `react-hooks/purity` as an error — `useMemo` is a
+    // cache React is free to drop, so constructing there is a purity violation. A later change to
+    // `i18nInstance` is ignored on purpose; swapping the instance mid-tree is not a supported move.
+    const [i18n] = react.useState(() => {
+        const instance = i18nInstance ?? new Streami18n({ language });
+        // Registered here rather than in an effect. `useStreami18nState` calls `init()` from its own
+        // effect, which runs *before* any effect declared below it in this hook — so a dictionary
+        // registered in an effect would arrive after i18next was already initialized, and the first
+        // `init()` would warn that the language has no dictionary.
+        if (translations) {
+            for (const [code, dictionary] of Object.entries(translations)) {
+                instance.registerTranslation(code, dictionary);
+            }
+        }
+        return instance;
+    });
+    // No `onInitError` handler: core already logs a warning and leaves the instance usable, with `t`
+    // still rendering each call site's inline English. Pass one only to surface init failures
+    // somewhere other than the console.
+    const translators = react$1.useStreami18nState(i18n);
+    react.useEffect(() => {
+        // Guarded on the current value: `setLanguage` re-runs the formatter factories and a full
+        // i18next `changeLanguage`, and the first render already constructed the instance with
+        // `language`. Undefined means "leave whatever the instance was configured with".
+        if (!language || i18n.currentLanguage === language)
+            return;
+        i18n.setLanguage(language);
+    }, [i18n, language]);
+    // Returned as-is: `useStreami18nState` already caches this object and only produces a new one
+    // when `t` or `tDateTimeParser` actually changes, so wrapping it in a `useMemo` would add a
+    // second cache over a stable value.
+    return translators;
+};
+
 const ParticipantViewContext = react.createContext(undefined);
 const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
 
 const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: offsetInPx = 10, }) => {
-    const { refs, x, y, update, elements: { domReference, floating }, context, } = react$1.useFloating({
+    const { refs, x, y, update, elements: { domReference, floating }, context, } = react$2.useFloating({
         placement,
         strategy,
         middleware: [
-            react$1.offset(offsetInPx),
-            react$1.shift(),
-            react$1.flip(),
-            react$1.size({
+            react$2.offset(offsetInPx),
+            react$2.shift(),
+            react$2.flip(),
+            react$2.size({
                 padding: 10,
                 apply: ({ availableHeight, elements }) => {
                     Object.assign(elements.floating.style, {
@@ -65,7 +218,7 @@ const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: off
     react.useEffect(() => {
         if (!domReference || !floating)
             return;
-        const cleanup = react$1.autoUpdate(domReference, floating, update);
+        const cleanup = react$2.autoUpdate(domReference, floating, update);
         return () => cleanup();
     }, [domReference, floating, update]);
     return { refs, x, y, domReference, floating, strategy, context };
@@ -189,7 +342,7 @@ const useRequestPermission = (permission) => {
  * 2. Maps the device list to a format more suitable for rendering.
  */
 function useDeviceList(devices, selectedDeviceId) {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     return react.useMemo(() => {
         let selectedDeviceInfo = null;
         let selectedIndex = null;
@@ -205,7 +358,7 @@ function useDeviceList(devices, selectedDeviceId) {
         if (selectedDeviceInfo === null || selectedIndex === null) {
             const defaultDevice = {
                 deviceId: 'default',
-                label: t('Default'),
+                label: t('common.default.label', 'Default'),
                 isSelected: true,
             };
             selectedDeviceInfo = defaultDevice;
@@ -607,7 +760,7 @@ const useMenuContext = () => {
 };
 const MenuPortal = ({ children, refs, }) => {
     const [portalRoot, setPortalRoot] = react.useState(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsxRuntime.jsx(react$1.FloatingOverlay, { children: jsxRuntime.jsx(react$1.FloatingPortal, { root: portalRoot, children: jsxRuntime.jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsxRuntime.jsx(react$2.FloatingOverlay, { children: jsxRuntime.jsx(react$2.FloatingPortal, { root: portalRoot, children: jsxRuntime.jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
 };
 const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = exports.MenuVisualType.MENU, children, onToggle, }) => {
     const [menuShown, setMenuShown] = react.useState(false);
@@ -669,6 +822,7 @@ const GenericMenu = ({ children, onItemClick, }) => {
 const GenericMenuButtonItem = ({ children, ...rest }) => {
     return (jsxRuntime.jsx("li", { className: "str-video__generic-menu--item", children: jsxRuntime.jsx("button", { ...rest, children: children }) }));
 };
+const GenericMenuSeparator = () => (jsxRuntime.jsx("li", { className: "str-video__generic-menu--separator", role: "separator" }));
 
 const Icon = ({ className, icon }) => (jsxRuntime.jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`, className) }));
 
@@ -697,7 +851,7 @@ const ParticipantActionsContextMenu = () => {
     const [fullscreenModeOn, setFullscreenModeOn] = react.useState(!!document.fullscreenElement);
     const call = videoReactBindings.useCall();
     const isPiP = usePictureInPictureState(videoElement ?? undefined);
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { pin, sessionId, userId } = participant;
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
@@ -769,12 +923,14 @@ const ParticipantActionsContextMenu = () => {
         return document.exitPictureInPicture().catch(console.error);
     };
     const { close } = useMenuContext() || {};
-    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.KICK_USER], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsxRuntime.jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
-                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
-                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-                }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
-                    direction: isPiP ? t('Leave') : t('Enter'),
-                }) })), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin
+                        ? t('participantView.unpin.label', 'Unpin')
+                        : t('participantView.actionsMenu.pin.label', 'Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('participantView.actionsMenu.pinForEveryone.label', 'Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('participantView.actionsMenu.unpinForEveryone.label', 'Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('participantView.actionsMenu.block.label', 'Block')] }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.KICK_USER], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsxRuntime.jsx(Icon, { icon: "kick-user" }), t('participantView.actionsMenu.kick.label', 'Kick')] }) }), jsxRuntime.jsx(GenericMenuSeparator, {}), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('participantView.actionsMenu.turnOffVideo.label', 'Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('participantView.actionsMenu.turnOffScreenShare.label', 'Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('participantView.actionsMenu.muteAudio.label', 'Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('participantView.actionsMenu.muteScreenShareAudio.label', 'Mute screen share audio')] }))] }), participantViewElement &&
+                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: [jsxRuntime.jsx(Icon, { icon: "fullscreen" }), fullscreenModeOn
+                        ? t('participantView.actionsMenu.leaveFullscreen.label', 'Leave fullscreen')
+                        : t('participantView.actionsMenu.enterFullscreen.label', 'Enter fullscreen')] })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: [jsxRuntime.jsx(Icon, { icon: "pip" }), isPiP
+                        ? t('participantView.actionsMenu.leavePip.label', 'Leave picture-in-picture')
+                        : t('participantView.actionsMenu.enterPip.label', 'Enter picture-in-picture')] })), jsxRuntime.jsx(GenericMenuSeparator, {}), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('participantView.actionsMenu.allowAudio.label', 'Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('participantView.actionsMenu.allowVideo.label', 'Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('participantView.actionsMenu.allowScreenSharing.label', 'Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('participantView.actionsMenu.disableAudio.label', 'Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('participantView.actionsMenu.disableVideo.label', 'Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('participantView.actionsMenu.disableScreenSharing.label', 'Disable screen sharing') })] })] }));
 };
 
 const isComponentType = (elementOrComponent) => {
@@ -839,34 +995,39 @@ const BaseVideo = react.forwardRef(function BaseVideoRender({ stream, ...rest },
         } }));
 });
 
-const BaseVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
+const variantClasses = ({ size = 'md', showOutline }) => [
+    `str-video__avatar--size-${size}`,
+    showOutline && 'str-video__avatar--outlined',
+];
+const Avatar = ({ imageSrc, name, style, className, size = 'md', showOutline, ...rest }) => {
     const [error, setError] = react.useState(false);
+    if (!imageSrc || error) {
+        return name ? (jsxRuntime.jsx(AvatarFallback, { className: className, style: style, names: name.split(/\s+/).filter(Boolean), size: size, showOutline: showOutline })) : null;
+    }
+    return (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', variantClasses({ size, showOutline }), className), src: imageSrc, style: style, ...rest }));
+};
+const AvatarFallback = ({ className, names, style, size = 'md', showOutline, }) => {
+    const isCompact = size === 'xs' || size === 'sm';
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', variantClasses({ size, showOutline }), className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0]?.[0], !isCompact && names[1]?.[0]] }) }));
+};
+
+const BaseVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
     const name = participant.name || participant.userId;
-    return (jsxRuntime.jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
-                (name ? (jsxRuntime.jsx(InitialsFallback, { name: name })) : (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))), participant.image && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: name, className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(participant.image || name) && (jsxRuntime.jsx(Avatar, { size: "2xl", showOutline: true, imageSrc: participant.image, name: name })), !participant.image && !name && (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))] }));
 });
-const InitialsFallback = (props) => {
-    const { name } = props;
-    const initials = name
-        .split(' ')
-        .slice(0, 2)
-        .map((n) => n[0])
-        .join('');
-    return (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
-};
 
 const DefaultVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('common.videoDisabled.text', 'Video is disabled') }));
 });
 
 const DefaultPictureInPicturePlaceholder = react.forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('videoPlaceholder.videoPlayingInPopup.text', 'Video is playing in a popup') }));
 });
 
 const ABSOLUTE_POSITION_STYLE = { position: 'absolute' };
-const Video$1 = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
+const Video = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
     const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
     const call = videoReactBindings.useCall();
     const [videoElement, setVideoElement] = react.useState(null);
@@ -940,7 +1101,7 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
                     refs?.setVideoElement?.(element);
                 } })), isPiP && PictureInPicturePlaceholder && (jsxRuntime.jsx(PictureInPicturePlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
 };
-Video$1.displayName = 'Video';
+Video.displayName = 'Video';
 
 const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) => {
     const call = videoReactBindings.useCall();
@@ -951,14 +1112,6 @@ const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) =>
     }, [trackedElement, call, sessionId, trackType]);
 };
 
-const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
-    const [error, setError] = react.useState(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(!imageSrc || error) && name && (jsxRuntime.jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style, ...rest }))] }));
-};
-const AvatarFallback = ({ className, names, style, }) => {
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
-};
-
 const BackgroundFiltersProviderImpl = react.lazy(() => Promise.resolve().then(function () { return require('./background-filters-DMStbSEg.cjs.js'); }).then((m) => ({
     default: m.BackgroundFiltersProvider,
 })));
@@ -987,40 +1140,36 @@ const BackgroundFiltersProvider = (props) => {
     return (jsxRuntime.jsx(react.Suspense, { fallback: SuspenseFallback, children: jsxRuntime.jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
 };
 
-const IconButton = react.forwardRef(function IconButtonRender(props, ref) {
-    const { icon, enabled, variant, onClick, className, ...rest } = props;
-    return (jsxRuntime.jsx("button", { className: clsx('str-video__call-controls__button', className, {
-            [`str-video__call-controls__button--variant-${variant}`]: variant,
-            'str-video__call-controls__button--enabled': enabled,
-        }), onClick: (e) => {
-            e.preventDefault();
-            onClick?.(e);
-        }, ref: ref, ...rest, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
+/**
+ * A compact badge for counts, notifications and error markers.
+ *
+ * Without `icon` it is a pill that grows with its content; with `icon` it is a
+ * circle of the size given by `size`.
+ *
+ * The badge carries no positioning of its own — whatever it annotates places
+ * it. For the call controls, rendering a badge among `CompositeButton`'s
+ * children anchors it to the top-right corner of the button.
+ */
+const Badge = react.forwardRef(function BadgeRender({ variant = 'default', size = 'sm', icon, className, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { ref: ref, className: clsx('str-video__badge', `str-video__badge--${variant}`, `str-video__badge--size-${size}`, icon && 'str-video__badge--icon', className), ...rest, children: icon ? jsxRuntime.jsx(Icon, { icon: icon }) : children }));
 });
 
-const CompositeButton = react.forwardRef(function CompositeButtonRender({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
-    return (jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button', className, {
-            'str-video__composite-button--caption': caption,
-            'str-video__composite-button--menu': Menu,
-        }), title: title, ref: ref, children: [jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button__button-group', {
-                    'str-video__composite-button__button-group--active': active,
-                    'str-video__composite-button__button-group--active-primary': active && variant === 'primary',
-                    'str-video__composite-button__button-group--active-secondary': active && variant === 'secondary',
-                    'str-video__composite-button__button-group--disabled': disabled,
-                }), children: [jsxRuntime.jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
-                            e.preventDefault();
-                            onClick?.(e);
-                        }, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+const Button = react.forwardRef(function ButtonRender({ variant = 'primary', appearance = 'solid', size = 'md', active, className, type = 'button', children, ...rest }, ref) {
+    return (jsxRuntime.jsx("button", { ref: ref, type: type, className: clsx('str-video__button', `str-video__button--${variant}`, `str-video__button--${appearance}`, `str-video__button--size-${size}`, className), ...rest, "aria-pressed": active ?? rest['aria-pressed'], children: children }));
 });
-const DefaultToggleMenuButton = react.forwardRef(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
-    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
-            'str-video__menu-toggle-button--active': menuShown,
-        }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+
+const IconButton = react.forwardRef(function IconButtonRender({ icon, className, ...props }, ref) {
+    return (jsxRuntime.jsx(Button, { ref: ref, className: clsx('str-video__button--icon-only', className), ...props, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
 });
 
-const TextButton = ({ children, ...rest }) => {
-    return (jsxRuntime.jsx("button", { ...rest, className: "str-video__text-button", children: children }));
-};
+const CompositeButton = react.forwardRef(function CompositeButtonRender({ appearance, caption, children, className, disabled, Menu, menuOffset, menuPlacement, onMenuToggle, active, size = 'md', title, ToggleMenuButton = CompositeCaret, variant = 'secondary', ...buttonProps }, ref) {
+    return (jsxRuntime.jsxs("div", { ref: ref, title: title, className: clsx('str-video__composite-button', `str-video__composite-button--${variant}`, `str-video__composite-button--size-${size}`, `str-video__composite-button--${appearance ?? 'solid'}`, Menu && 'str-video__composite-button--menu', className), children: [jsxRuntime.jsxs("div", { className: "str-video__composite-button__group", children: [jsxRuntime.jsx(Button, { variant: variant, appearance: appearance, size: size, disabled: disabled, active: active, className: "str-video__composite-button__action str-video__button--icon-only", ...buttonProps, children: children }), Menu &&
+                        (disabled ? (jsxRuntime.jsx(CompositeCaret, { menuShown: false, disabled: true })) : (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu })))] }), caption && (jsxRuntime.jsx("span", { className: "str-video__composite-button__caption", children: caption }))] }));
+});
+const CompositeCaret = react.forwardRef(function CompositeCaretRender({ menuShown, disabled }, ref) {
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__composite-button__caret", size: "xs", appearance: "ghost", disabled: disabled, "aria-label": t('common.toggleMenu.ariaLabel', 'Toggle menu'), "aria-haspopup": "menu", "aria-expanded": menuShown, icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+});
 
 const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
     const call = videoReactBindings.useCall();
@@ -1039,11 +1188,16 @@ const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
             }
         }
     }, [onClick, onAccept, call]);
-    return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-accept", variant: "success", "data-testid": "accept-call-button", onClick: handleClick }));
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__accept-call-button", size: "sm", disabled: disabled, icon: "call-accept", variant: "secondary", "data-testid": "accept-call-button", onClick: handleClick }));
 };
 
+const ICON_BY_STATE = {
+    success: 'checkmark',
+    error: 'exclamation-circle-fill',
+    loading: 'loading',
+};
 const Notification = (props) => {
-    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, iconClassName = 'str-video__notification__icon', close, } = props;
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, state, close, } = props;
     const { refs, x, y, strategy } = useFloatingUIPreset({
         placement,
         strategy: 'absolute',
@@ -1056,12 +1210,13 @@ const Notification = (props) => {
         }, visibilityTimeout);
         return () => clearTimeout(timeout);
     }, [isVisible, resetIsVisible, visibilityTimeout]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
+    const icon = state && `str-video__icon str-video__icon--${ICON_BY_STATE[state]}`;
+    return (jsxRuntime.jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: clsx('str-video__notification', state && `str-video__notification--${state}`, close && 'str-video__notification--dismissible', className), ref: refs.setFloating, style: {
                     position: strategy,
                     top: y ?? 0,
                     left: x ?? 0,
                     overflowY: 'auto',
-                }, children: [iconClassName && jsxRuntime.jsx("i", { className: iconClassName }), jsxRuntime.jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsxRuntime.jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
+                }, children: [icon && jsxRuntime.jsx("i", { className: icon }), jsxRuntime.jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsxRuntime.jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
 };
 
 const PermissionNotification = (props) => {
@@ -1084,24 +1239,26 @@ const PermissionNotification = (props) => {
     }, [hasPermission]);
     const resetIsVisible = react.useCallback(() => setShowNotification(undefined), []);
     if (isAwaitingApproval) {
-        return (jsxRuntime.jsx(Notification, { isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
+        return (jsxRuntime.jsx(Notification, { state: "loading", isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
     }
-    return (jsxRuntime.jsx(Notification, { isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
+    return (jsxRuntime.jsx(Notification, { state: showNotification === 'granted' ? 'success' : 'error', isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
 };
 
 const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { isSpeakingWhileMuted } = useMicrophoneState();
-    const { t } = videoReactBindings.useI18n();
-    const message = text ?? t('You are muted. Unmute to speak.');
+    const { t } = useI18n();
+    const message = text ??
+        t('notification.speakingWhileMuted.text', 'You are muted. Unmute to speak.');
     return (jsxRuntime.jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, placement: placement || 'top-start', children: children }));
 };
 
 const RecordingInProgressNotification = ({ children, text, }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     const [isVisible, setVisible] = react.useState(false);
-    const message = text ?? t('Recording in progress...');
+    const message = text ??
+        t('notification.recordingInProgress.text', 'Recording in progress...');
     react.useEffect(() => {
         if (isCallRecordingInProgress) {
             setVisible(true);
@@ -1110,12 +1267,12 @@ const RecordingInProgressNotification = ({ children, text, }) => {
             setVisible(false);
         }
     }, [isCallRecordingInProgress]);
-    return (jsxRuntime.jsx(Notification, { message: message, iconClassName: "str-video__icon str-video__icon--recording-on", isVisible: isVisible, placement: "top-start", close: () => setVisible(false), children: children }));
+    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isVisible, placement: "top-start", close: () => setVisible(false), children: children }));
 };
 
 const MicCaptureErrorNotification = ({ children, text, placement, }) => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const [isVisible, setIsVisible] = react.useState(false);
     react.useEffect(() => {
         if (!call)
@@ -1125,8 +1282,8 @@ const MicCaptureErrorNotification = ({ children, text, placement, }) => {
         });
     }, [call]);
     const message = text ??
-        t('Your microphone is not capturing audio. Please check your setup.');
-    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
+        t('notification.micCaptureError.text', 'Your microphone is not capturing audio. Please check your setup.');
+    return (jsxRuntime.jsx(Notification, { message: message, state: "error", isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
 };
 
 const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
@@ -1134,22 +1291,20 @@ const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
 };
 
 const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
-    const arrowRef = react.useRef(null);
-    const { refs, x, y, strategy, context } = useFloatingUIPreset({
+    const { refs, x, y, strategy } = useFloatingUIPreset({
         placement: tooltipPlacement,
         strategy: 'absolute',
-        middleware: [react$1.arrow({ element: arrowRef })],
     });
     react.useEffect(() => {
         refs.setReference(referenceElement);
     }, [referenceElement, refs]);
     if (!visible)
         return null;
-    return (jsxRuntime.jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
             position: strategy,
             top: y ?? 0,
             left: x ?? 0,
-        }, children: [jsxRuntime.jsx(react$1.FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
+        }, children: children }));
 };
 
 const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
@@ -1201,18 +1356,18 @@ function isNotAllowedError(error) {
 }
 
 const RecordEndConfirmation = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse } = videoReactBindings.useToggleCallRecording();
     const { close } = useMenuContext();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
-    return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsxRuntime.jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsxRuntime.jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__text", children: [jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('callControls.recordCallButton.endRecording.title', 'End recording') }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('callControls.recordCallButton.confirmEndRecording.description', 'Are you sure you want end the recording?') })] })] }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(Button, { variant: "destructive", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (t('callControls.recordCallButton.endRecording.title', 'End recording')) }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", onClick: close, children: t('common.cancel.label', 'Cancel') })] })] }));
 };
 const ToggleEndRecordingMenuButton = react.forwardRef(function ToggleEndRecordingMenuButtonRender(props, ref) {
-    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsxRuntime.jsx(Icon, { icon: "recording-off" }) }));
+    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: true, variant: "destructive", "data-testid": "recording-stop-button", children: jsxRuntime.jsx(Icon, { icon: "recording-off" }) }));
 });
 const RecordCallConfirmationButton = (props) => {
     const { caption } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
     if (isCallRecordingInProgress) {
@@ -1222,28 +1377,30 @@ const RecordCallConfirmationButton = (props) => {
             ], children: jsxRuntime.jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: exports.MenuVisualType.PORTAL, children: jsxRuntime.jsx(RecordEndConfirmation, { onError: props.onError }) }) }));
     }
     const title = isAwaitingResponse
-        ? t('Waiting for recording to start...')
-        : (caption ?? t('Record call'));
+        ? t('callControls.recordCallButton.waitingRecordingStart.title', 'Waiting for recording to start...')
+        : (caption ??
+            t('callControls.recordCallButton.recordCall.title', 'Record call'));
     return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
             videoClient.OwnCapability.START_RECORD_CALL,
             videoClient.OwnCapability.STOP_RECORD_CALL,
-        ], children: jsxRuntime.jsx(WithTooltip, { title: title, children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }) }));
+        ], children: jsxRuntime.jsx(WithTooltip, { title: title, children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: isCallRecordingInProgress ? 'destructive' : 'secondary', "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }) }));
 };
 const RecordCallButton = (props) => {
     const { caption } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
-    let title = caption ?? t('Record call');
+    let title = caption ??
+        t('callControls.recordCallButton.recordCall.title', 'Record call');
     if (isAwaitingResponse) {
         title = isCallRecordingInProgress
-            ? t('Waiting for recording to stop...')
-            : t('Waiting for recording to start...');
+            ? t('callControls.recordCallButton.waitingRecordingStop.title', 'Waiting for recording to stop...')
+            : t('callControls.recordCallButton.waitingRecordingStart.title', 'Waiting for recording to start...');
     }
     return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
             videoClient.OwnCapability.START_RECORD_CALL,
             videoClient.OwnCapability.STOP_RECORD_CALL,
-        ], children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": isCallRecordingInProgress
+        ], children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: isCallRecordingInProgress ? 'destructive' : 'secondary', "data-testid": isCallRecordingInProgress
                 ? 'recording-stop-button'
                 : 'recording-start-button', title: title, onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off' })) }) }));
 };
@@ -1305,8 +1462,8 @@ const ReactionsButton = ({ reactions = defaultReactions, }) => {
     return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: exports.MenuVisualType.MENU, children: jsxRuntime.jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
 };
 const ToggleReactionsMenuButton = react.forwardRef(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(WithTooltip, { title: t('callControls.reactionsButton.reactions.title', 'Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
 });
 const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
     const call = videoReactBindings.useCall();
@@ -1321,7 +1478,7 @@ const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
 };
 
 const ScreenShareButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, optimisticUpdates } = props;
     const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = videoReactBindings.useCallStateHooks();
     const isSomeoneScreenSharing = useHasOngoingScreenShare();
@@ -1343,7 +1500,10 @@ const ScreenShareButton = (props) => {
             await screenShare.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsxRuntime.jsx(WithTooltip, { title: caption ?? t('Share screen'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: "primary", "data-testid": isSomeoneScreenSharing
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.screenShareButton.permissionGranted.text', 'You can now share your screen.'), messageAwaitingApproval: t('callControls.screenShareButton.awaitingApproval.text', 'Awaiting for an approval to share screen.'), messageRevoked: t('callControls.screenShareButton.permissionRevoked.text', 'You can no longer share your screen.'), children: jsxRuntime.jsx(WithTooltip, { title: caption ??
+                    t('callControls.screenShareButton.shareScreen.title', 'Share screen'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: isSomeoneScreenSharing || amIScreenSharing
+                        ? 'primary'
+                        : 'secondary', "data-testid": isSomeoneScreenSharing
                         ? 'screen-share-stop-button'
                         : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };
@@ -1399,7 +1559,7 @@ const DeviceLevelIndicator = ({ deviceId }) => {
 const DeviceAudioPreviewItem = ({ device, onSelect, }) => {
     if (device.deviceId === 'default')
         return null;
-    return (jsxRuntime.jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsxRuntime.jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsxRuntime.jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+    return (jsxRuntime.jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsxRuntime.jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), jsxRuntime.jsx("span", { className: "str-video__device-settings__option__label", children: device.label }), jsxRuntime.jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
 };
 
 const SelectContext = react.createContext({});
@@ -1409,12 +1569,12 @@ const Select = (props) => {
     const [activeIndex, setActiveIndex] = react.useState(null);
     const [selectedIndex, setSelectedIndex] = react.useState(defaultSelectedIndex);
     const [selectedLabel, setSelectedLabel] = react.useState(defaultSelectedLabel);
-    const { refs, context } = react$1.useFloating({
+    const { refs, context } = react$2.useFloating({
         placement: 'bottom-start',
         open: isOpen,
         onOpenChange: setIsOpen,
-        whileElementsMounted: react$1.autoUpdate,
-        middleware: [react$1.flip()],
+        whileElementsMounted: react$2.autoUpdate,
+        middleware: [react$2.flip()],
     });
     const elementsRef = react.useRef([]);
     const labelsRef = react.useRef([]);
@@ -1434,34 +1594,34 @@ const Select = (props) => {
             handleSelect(index);
         }
     };
-    const listNav = react$1.useListNavigation(context, {
+    const listNav = react$2.useListNavigation(context, {
         listRef: elementsRef,
         activeIndex,
         selectedIndex,
         onNavigate: setActiveIndex,
     });
-    const typeahead = react$1.useTypeahead(context, {
+    const typeahead = react$2.useTypeahead(context, {
         listRef: labelsRef,
         activeIndex,
         selectedIndex,
         onMatch: handleTypeaheadMatch,
     });
-    const click = react$1.useClick(context);
-    const dismiss = react$1.useDismiss(context);
-    const role = react$1.useRole(context, { role: 'listbox' });
-    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([listNav, typeahead, click, dismiss, role]);
+    const click = react$2.useClick(context);
+    const dismiss = react$2.useDismiss(context);
+    const role = react$2.useRole(context, { role: 'listbox' });
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$2.useInteractions([listNav, typeahead, click, dismiss, role]);
     const selectContext = react.useMemo(() => ({
         activeIndex,
         selectedIndex,
         getItemProps,
         handleSelect,
     }), [activeIndex, selectedIndex, getItemProps, handleSelect]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__dropdown", children: [jsxRuntime.jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxRuntime.jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), selectedLabel] }), jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsxRuntime.jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsxRuntime.jsx(react$1.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__dropdown", children: [jsxRuntime.jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxRuntime.jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), jsxRuntime.jsx("span", { className: "str-video__dropdown-selected__text", children: selectedLabel })] }), jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsxRuntime.jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsxRuntime.jsx(react$2.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsxRuntime.jsx(react$2.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
 };
 const DropDownSelectOption = (props) => {
     const { selected, label, icon } = props;
     const { getItemProps, handleSelect } = react.useContext(SelectContext);
-    const { ref, index } = react$1.useListItem();
+    const { ref, index } = react$2.useListItem();
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__dropdown-option', {
             'str-video__dropdown-option--selected': selected,
         }), ref: ref, ...getItemProps({
@@ -1477,7 +1637,7 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
     return (jsxRuntime.jsxs("label", { className: clsx('str-video__device-settings__option', {
             'str-video__device-settings__option--selected': selected,
             'str-video__device-settings__option--disabled': disabled,
-        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), jsxRuntime.jsx("span", { className: "str-video__device-settings__option__label", children: label })] }));
 };
 const DeviceSelectorList = (props) => {
     const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;
@@ -1537,8 +1697,8 @@ const SpeakerTest = (props) => {
     const { selectedDevice } = useSpeakerState();
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
-    const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"2.0.0-beta.0"}/assets/piano.mp3`, } = props;
+    const { t } = useI18n();
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"2.0.0-beta.1"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1573,7 +1733,9 @@ const SpeakerTest = (props) => {
         }
     }, [isPlaying, audioUrl]);
     const handleAudioEnded = react.useCallback(() => setIsPlaying(false), []);
-    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-test", children: [jsxRuntime.jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsxRuntime.jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxRuntime.jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-test", children: [jsxRuntime.jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsxRuntime.jsx(CompositeButton, { className: "str-video__speaker-test__button", appearance: "outline", size: "sm", onClick: handleStartTest, type: "button", children: jsxRuntime.jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), isPlaying
+                            ? t('deviceSettings.speakerTest.stopTest.label', 'Stop test')
+                            : t('deviceSettings.speakerTest.testSpeaker.label', 'Test speaker')] }) })] }));
 };
 
 const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
@@ -1581,7 +1743,7 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
     const { microphone, selectedDevice, devices } = useMicrophoneState();
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
             await microphone.select(deviceId);
-        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AudioVolumeIndicator, {}), jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" })] })) }));
 };
 const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = videoReactBindings.useCallStateHooks();
@@ -1590,7 +1752,7 @@ const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = tru
         return null;
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
             speaker.select(deviceId);
-        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl }) }));
 };
 
 const DeviceVideoPreview = ({ deviceId }) => {
@@ -1641,38 +1803,41 @@ const DeviceSettings = ({ visualType = exports.MenuVisualType.MENU, }) => {
     return (jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleDeviceSettingsMenuButton, visualType: visualType, children: jsxRuntime.jsx(Menu, {}) }));
 };
 const Menu = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings", children: [jsxRuntime.jsx(DeviceSelectorVideo, { title: t('Select a Camera') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { title: t('Select a Mic') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { title: t('Select Speakers') })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings", children: [jsxRuntime.jsx(DeviceSelectorVideo, { title: t('deviceSettings.selectCamera.title', 'Select a Camera') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { title: t('deviceSettings.selectMic.title', 'Select a Mic') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { title: t('deviceSettings.selectSpeakers.title', 'Select Speakers') })] }));
 };
 const ToggleDeviceSettingsMenuButton = react.forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(IconButton, { active: menuShown, size: "sm", variant: "secondary", className: clsx('str-video__device-settings__button', {
             'str-video__device-settings__button--active': menuShown,
-        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+        }), title: t('deviceSettings.toggleDeviceMenu.title', 'Toggle device menu'), icon: "device-settings", ref: ref }));
 });
 
 const ToggleAudioPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useMicrophoneState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
     const localParticipant = useLocalParticipant();
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
-    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser audio permissions')
-            : isSystemMuted
-                ? t('Microphone is paused by your system')
-                : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
+    return (jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+            ? t('common.waitingForPermission.title', 'Waiting for permission')
+            : !hasBrowserPermission
+                ? t('callControls.toggleAudioButton.checkBrowserAudioPermissions.title', 'Check your browser audio permissions')
+                : isSystemMuted
+                    ? t('callControls.toggleAudioButton.microphonePausedBySystem.title', 'Microphone is paused by your system')
+                    : (caption ??
+                        t('callControls.toggleAudioButton.mic.title', 'Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
                 ? 'preview-audio-unmute-button'
                 : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }));
 };
 const ToggleAudioPublishingButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.RequestPermissionRequestPermissionsEnum.SEND_AUDIO);
     const { useMicrophoneState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
@@ -1688,43 +1853,49 @@ const ToggleAudioPublishingButton = (props) => {
             await microphone.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your audio')
-                    : !hasBrowserPermission
-                        ? t('Check your browser mic permissions')
-                        : isSystemMuted
-                            ? t('Microphone is paused by your system')
-                            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.toggleAudioButton.permissionGranted.text', 'You can now speak.'), messageAwaitingApproval: t('callControls.toggleAudioButton.awaitingApproval.text', 'Awaiting for an approval to speak.'), messageRevoked: t('callControls.toggleAudioButton.permissionRevoked.text', 'You can no longer speak.'), children: jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+                    ? t('common.waitingForPermission.title', 'Waiting for permission')
+                    : !hasPermission
+                        ? t('callControls.toggleAudioButton.noPermissionToShareAudio.title', 'You have no permission to share your audio')
+                        : !hasBrowserPermission
+                            ? t('callControls.toggleAudioButton.checkBrowserMicPermissions.title', 'Check your browser mic permissions')
+                            : isSystemMuted
+                                ? t('callControls.toggleAudioButton.microphonePausedBySystem.title', 'Microphone is paused by your system')
+                                : (caption ??
+                                    t('callControls.toggleAudioButton.mic.title', 'Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         // disable button while the toggle action is pending when not using optimistic updates
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && hasPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }) }) }));
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || !hasPermission || isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCameraState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
     const localParticipant = useLocalParticipant();
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.VIDEO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
-    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser video permissions')
-            : isSystemMuted
-                ? t('Camera is paused by your system')
-                : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+    return (jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+            ? t('common.waitingForPermission.title', 'Waiting for permission')
+            : !hasBrowserPermission
+                ? t('callControls.toggleVideoButton.checkBrowserVideoPermissions.title', 'Check your browser video permissions')
+                : isSystemMuted
+                    ? t('callControls.toggleVideoButton.cameraPausedBySystem.title', 'Camera is paused by your system')
+                    : (caption ??
+                        t('callControls.toggleVideoButton.video.title', 'Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: optionsAwareIsMute ? 'destructive' : 'secondary', "data-testid": optionsAwareIsMute
                 ? 'preview-video-unmute-button'
                 : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.RequestPermissionRequestPermissionsEnum.SEND_VIDEO);
     const { useCameraState, useCallSettings, useLocalParticipant } = videoReactBindings.useCallStateHooks();
@@ -1742,36 +1913,37 @@ const ToggleVideoPublishingButton = (props) => {
             await camera.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your video')
-                    : !hasBrowserPermission
-                        ? t('Check your browser video permissions')
-                        : !isPublishingVideoAllowed
-                            ? t('Video publishing is disabled by the system')
-                            : isSystemMuted
-                                ? t('Camera is paused by your system')
-                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.toggleVideoButton.permissionGranted.text', 'You can now share your video.'), messageAwaitingApproval: t('callControls.toggleVideoButton.awaitingApproval.text', 'Awaiting for an approval to share your video.'), messageRevoked: t('callControls.toggleVideoButton.permissionRevoked.text', 'You can no longer share your video.'), children: jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+                    ? t('common.waitingForPermission.title', 'Waiting for permission')
+                    : !hasPermission
+                        ? t('callControls.toggleVideoButton.noPermissionToShareVideo.title', 'You have no permission to share your video')
+                        : !hasBrowserPermission
+                            ? t('callControls.toggleVideoButton.checkBrowserVideoPermissions.title', 'Check your browser video permissions')
+                            : !isPublishingVideoAllowed
+                                ? t('callControls.toggleVideoButton.videoPublishingDisabled.title', 'Video publishing is disabled by the system')
+                                : isSystemMuted
+                                    ? t('callControls.toggleVideoButton.cameraPausedBySystem.title', 'Camera is paused by your system')
+                                    : caption ||
+                                        t('callControls.toggleVideoButton.video.title', 'Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         !isPublishingVideoAllowed ||
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission ||
                             !hasPermission ||
-                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
-                            hasBrowserPermission &&
-                            hasPermission &&
-                            isPublishingVideoAllowed && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
+                            !isPublishingVideoAllowed ||
+                            isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }) }) }));
 };
 
 const EndCallMenu = (props) => {
     const { onLeave, onEnd } = props;
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.END_CALL], children: jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxRuntime.jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__end-call__leave", "data-testid": "leave-call-button", onClick: onLeave, children: [jsxRuntime.jsx(Icon, { icon: "logout" }), t('callControls.cancelCallButton.leaveCall.title', 'Leave call')] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.END_CALL], children: jsxRuntime.jsxs(Button, { variant: "destructive", className: "str-video__end-call__end", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsxRuntime.jsx(Icon, { icon: "call-end" }), t('callControls.cancelCallButton.endCallForAll.label', 'End call for all')] }) })] }));
 };
 const CancelCallToggleMenuButton = react.forwardRef(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(WithTooltip, { title: t('callControls.cancelCallButton.leaveCall.title', 'Leave call'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: "destructive", "data-testid": "leave-call-button", ref: ref }) }));
 });
 const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     const call = videoReactBindings.useCall();
@@ -1807,9 +1979,9 @@ const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     }, [onClick, onLeave, call]);
     return (jsxRuntime.jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsxRuntime.jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
 };
-const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
+const CancelCallButton = ({ disabled, caption, size, onClick, onLeave, }) => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const handleClick = react.useCallback(async (e) => {
         if (onClick) {
             onClick(e);
@@ -1825,7 +1997,8 @@ const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
             }
         }
     }, [onClick, onLeave, call]);
-    return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: caption ?? t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
+    return (jsxRuntime.jsx(IconButton, { size: size, disabled: disabled, icon: "call-end", variant: "destructive", title: caption ??
+            t('callControls.cancelCallButton.leaveCall.title', 'Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
 };
 
 const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(ToggleVideoPublishingButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(ReactionsButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(ScreenShareButton, {}) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
@@ -1833,188 +2006,12 @@ const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-
                 videoClient.OwnCapability.STOP_RECORD_CALL,
             ], children: jsxRuntime.jsx(RecordCallButton, {}) }), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
 
-const CallStatsLatencyChart = react.lazy(() => Promise.resolve().then(function () { return require('./latency-chart-CpL1M_s0.cjs.js'); }));
-var Status;
-(function (Status) {
-    Status["GOOD"] = "Good";
-    Status["OK"] = "Ok";
-    Status["BAD"] = "Bad";
-})(Status || (Status = {}));
-const CallStats = (props) => {
-    const { latencyLowBound = 75, latencyHighBound = 400, audioJitterLowBound = 10, audioJitterHighBound = 30, videoJitterLowBound = 20, videoJitterHighBound = 50, showCodecInfo = false, LatencyChartSuspenseFallback = null, } = props;
-    const [latencyBuffer, setLatencyBuffer] = react.useState(() => {
-        const now = Date.now();
-        return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
-    });
-    const { t } = videoReactBindings.useI18n();
-    const [publishBitrate, setPublishBitrate] = react.useState('-');
-    const [subscribeBitrate, setSubscribeBitrate] = react.useState('-');
-    const [publishAudioBitrate, setPublishAudioBitrate] = react.useState('-');
-    const [subscribeAudioBitrate, setSubscribeAudioBitrate] = react.useState('-');
-    const previousStats = react.useRef(undefined);
-    const { useCallStatsReport } = videoReactBindings.useCallStateHooks();
-    const callStatsReport = useCallStatsReport();
-    react.useEffect(() => {
-        if (!callStatsReport)
-            return;
-        if (!previousStats.current) {
-            previousStats.current = callStatsReport;
-            return;
-        }
-        const previousCallStatsReport = previousStats.current;
-        setPublishBitrate(() => {
-            return calculatePublishBitrate(previousCallStatsReport, callStatsReport);
-        });
-        setSubscribeBitrate(() => {
-            return calculateSubscribeBitrate(previousCallStatsReport, callStatsReport);
-        });
-        setPublishAudioBitrate(() => {
-            return calculatePublishAudioBitrate(previousCallStatsReport, callStatsReport);
-        });
-        setSubscribeAudioBitrate(() => {
-            return calculateSubscribeAudioBitrate(previousCallStatsReport, callStatsReport);
-        });
-        setLatencyBuffer((latencyBuf) => {
-            const newLatencyBuffer = latencyBuf.slice(-19);
-            newLatencyBuffer.push({
-                x: callStatsReport.timestamp,
-                y: callStatsReport.publisherStats.averageRoundTripTimeInMs ||
-                    callStatsReport.publisherAudioStats.averageRoundTripTimeInMs,
-            });
-            return newLatencyBuffer;
-        });
-        previousStats.current = callStatsReport;
-    }, [callStatsReport]);
-    const latencyComparison = {
-        lowBound: latencyLowBound,
-        highBound: latencyHighBound,
-        value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
-    };
-    const audioJitterComparison = {
-        lowBound: audioJitterLowBound,
-        highBound: audioJitterHighBound,
-    };
-    const videoJitterComparison = {
-        lowBound: videoJitterLowBound,
-        highBound: videoJitterHighBound,
-    };
-    return (jsxRuntime.jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__latencychart", children: jsxRuntime.jsx(react.Suspense, { fallback: LatencyChartSuspenseFallback, children: jsxRuntime.jsx(CallStatsLatencyChart, { values: latencyBuffer }) }) }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Video performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
-                                ...videoJitterComparison,
-                                value: callStatsReport.subscriberStats.averageJitterInMs,
-                            } }), jsxRuntime.jsx(StatCard, { label: t('Publish jitter'), value: `${callStatsReport.publisherStats.averageJitterInMs} ms.`, comparison: {
-                                ...videoJitterComparison,
-                                value: callStatsReport.publisherStats.averageJitterInMs,
-                            } }), jsxRuntime.jsx(StatCard, { label: `${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`, value: toFrameSize(callStatsReport.publisherStats) }), jsxRuntime.jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsxRuntime.jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsxRuntime.jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "mic" }), t('Audio Performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key audio data points below to assess audio performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherAudioStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Audio codec'), value: formatAudioCodec(callStatsReport) }), jsxRuntime.jsx(StatCard, { label: t('Audio bitrate (publish)'), value: publishAudioBitrate }), jsxRuntime.jsx(StatCard, { label: t('Audio bitrate (receive)'), value: subscribeAudioBitrate }), jsxRuntime.jsx(StatCard, { label: t('Audio jitter (publish)'), value: `${callStatsReport.publisherAudioStats.averageJitterInMs} ms.`, comparison: {
-                                ...audioJitterComparison,
-                                value: callStatsReport.publisherAudioStats.averageJitterInMs,
-                            } }), jsxRuntime.jsx(StatCard, { label: t('Audio jitter (receive)'), value: `${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`, comparison: {
-                                ...audioJitterComparison,
-                                value: callStatsReport.subscriberAudioStats.averageJitterInMs,
-                            } })] })] })) }));
-};
-const StatCardExplanation = (props) => {
-    const { description } = props;
-    const [isOpen, setIsOpen] = react.useState(false);
-    const { refs, floatingStyles, context } = react$1.useFloating({
-        open: isOpen,
-        onOpenChange: setIsOpen,
-    });
-    const hover = react$1.useHover(context);
-    const { getReferenceProps, getFloatingProps } = react$1.useInteractions([hover]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__call-explanation", ref: refs.setReference, ...getReferenceProps(), children: jsxRuntime.jsx(Icon, { className: "str-video__call-explanation__icon", icon: "info" }) }), isOpen && (jsxRuntime.jsx("div", { className: "str-video__call-explanation__description", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: description }))] }));
-};
-const StatsTag = (props) => {
-    const { children, status } = props;
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__call-stats__tag', {
-            'str-video__call-stats__tag--good': status === Status.GOOD,
-            'str-video__call-stats__tag--ok': status === Status.OK,
-            'str-video__call-stats__tag--bad': status === Status.BAD,
-        }), children: jsxRuntime.jsx("div", { className: "str-video__call-stats__tag__text", children: children }) }));
-};
-const StatCard = (props) => {
-    const { label, value, description, comparison } = props;
-    const { t } = videoReactBindings.useI18n();
-    const status = comparison ? toStatus(comparison) : undefined;
-    return (jsxRuntime.jsxs("div", { className: "str-video__call-stats__card", children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-content", children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-label", children: [label, description && jsxRuntime.jsx(StatCardExplanation, { description: description })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__card-value", children: value })] }), status && jsxRuntime.jsx(StatsTag, { status: status, children: t(status) })] }));
-};
-const toStatus = (config) => {
-    const { value, lowBound, highBound } = config;
-    if (value <= lowBound)
-        return Status.GOOD;
-    if (value >= lowBound && value <= highBound)
-        return Status.OK;
-    if (value >= highBound)
-        return Status.BAD;
-    return Status.GOOD;
-};
-const toFrameSize = (stats) => {
-    const { highestFrameWidth: w, highestFrameHeight: h, highestFramesPerSecond: fps, } = stats;
-    let size = `-`;
-    if (w && h) {
-        size = `${w}x${h}`;
-        if (fps) {
-            size += `@${fps}fps.`;
-        }
-    }
-    return size;
-};
-const formatCodec = (callStatsReport) => {
-    const { codecPerTrackType } = callStatsReport.publisherStats;
-    if (!codecPerTrackType || !codecPerTrackType[videoClient.SfuModels.TrackType.VIDEO]) {
-        return '';
-    }
-    const [, name] = codecPerTrackType[videoClient.SfuModels.TrackType.VIDEO].split('/');
-    return name ? ` (${name})` : '';
-};
-const formatAudioCodec = (callStatsReport) => {
-    const { codecPerTrackType } = callStatsReport.publisherAudioStats;
-    if (!codecPerTrackType || !codecPerTrackType[videoClient.SfuModels.TrackType.AUDIO]) {
-        return '';
-    }
-    const [, name] = codecPerTrackType[videoClient.SfuModels.TrackType.AUDIO].split('/');
-    return name ?? '';
-};
-const calculatePublishBitrate = (previousCallStatsReport, callStatsReport) => {
-    const { publisherStats: { totalBytesSent: previousTotalBytesSent, timestamp: previousTimestamp, }, } = previousCallStatsReport;
-    const { publisherStats: { totalBytesSent, timestamp }, } = callStatsReport;
-    const bytesSent = totalBytesSent - previousTotalBytesSent;
-    const timeElapsed = timestamp - previousTimestamp;
-    return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
-};
-const calculateSubscribeBitrate = (previousCallStatsReport, callStatsReport) => {
-    const { subscriberStats: { totalBytesReceived: previousTotalBytesReceived, timestamp: previousTimestamp, }, } = previousCallStatsReport;
-    const { subscriberStats: { totalBytesReceived, timestamp }, } = callStatsReport;
-    const bytesReceived = totalBytesReceived - previousTotalBytesReceived;
-    const timeElapsed = timestamp - previousTimestamp;
-    return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
-};
-const calculatePublishAudioBitrate = (previousCallStatsReport, callStatsReport) => {
-    const previousAudioStats = previousCallStatsReport.publisherAudioStats;
-    const audioStats = callStatsReport.publisherAudioStats;
-    const bytesSent = audioStats.totalBytesSent - previousAudioStats.totalBytesSent;
-    const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
-    return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
-};
-const calculateSubscribeAudioBitrate = (previousCallStatsReport, callStatsReport) => {
-    const previousAudioStats = previousCallStatsReport.subscriberAudioStats;
-    const audioStats = callStatsReport.subscriberAudioStats;
-    const bytesReceived = audioStats.totalBytesReceived - previousAudioStats.totalBytesReceived;
-    const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
-    return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
-};
-
-const CallStatsButton = () => (jsxRuntime.jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton, children: jsxRuntime.jsx(CallStats, {}) }));
-const ToggleMenuButton = react.forwardRef(function ToggleMenuButtonRender(props, ref) {
-    const { t } = videoReactBindings.useI18n();
-    const { caption, menuShown } = props;
-    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsxRuntime.jsx(Icon, { icon: "stats" }) }));
-});
-
 const ToggleAudioOutputButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, Menu = DeviceSelectorAudioOutput, menuPlacement = 'top', onMenuToggle, } = props;
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
-    return (jsxRuntime.jsx(WithTooltip, { title: caption || t('Speakers'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsx(CompositeButton, { Menu: Menu, menuPlacement: menuPlacement, caption: caption, "data-testid": "audio-output-button", onMenuToggle: (shown) => {
+    return (jsxRuntime.jsx(WithTooltip, { title: caption ||
+            t('callControls.toggleAudioOutputButton.speakers.title', 'Speakers'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsx(CompositeButton, { Menu: Menu, menuPlacement: menuPlacement, caption: caption, "data-testid": "audio-output-button", onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
             }, children: jsxRuntime.jsx(Icon, { icon: "speaker" }) }) }));
@@ -2031,34 +2028,43 @@ const BlockedUserListingItem = ({ userId }) => {
         if (userId)
             call?.unblockUser(userId);
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsx(TextButton, { onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsx(Button, { appearance: "ghost", size: "xs", variant: "secondary", onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
 };
 
 const CallParticipantListHeader = ({ onClose, }) => {
     const { useParticipants, useAnonymousParticipantCount } = videoReactBindings.useCallStateHooks();
     const participants = useParticipants();
     const anonymousParticipantCount = useAnonymousParticipantCount();
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('common.participants.label', 'Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('participantList.anonymousCount.text', ', and ({{ anonymousCount }}) anonymous', { anonymousCount: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
 const CallParticipantListingItem = react.memo(function CallParticipantListingItemRender({ participant, DisplayName = DefaultDisplayName, }) {
     const isAudioOn = videoClient.hasAudio(participant);
     const isVideoOn = videoClient.hasVideo(participant);
     const isPinnedOn = videoClient.isPinned(participant);
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsxRuntime.jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn
+                            ? t('participantList.microphoneOn.title', 'Microphone on')
+                            : t('participantList.microphoneOff.title', 'Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn
+                            ? t('participantList.cameraOn.title', 'Camera on')
+                            : t('participantList.cameraOff.title', 'Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsxRuntime.jsx(MediaIndicator, { title: t('participantList.pinned.title', 'Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
 });
 CallParticipantListingItem.displayName = 'CallParticipantListingItem';
 const MediaIndicator = (props) => (jsxRuntime.jsx(WithTooltip, { ...props }));
 const DefaultDisplayName = ({ participant }) => {
     const connectedUser = videoReactBindings.useConnectedUser();
-    const { t } = videoReactBindings.useI18n();
-    const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
-    const nameOrId = participant.name || participant.userId || t('Unknown');
+    const { t } = useI18n();
+    const meFlag = participant.userId === connectedUser?.id
+        ? t('participantList.me.text', 'Me')
+        : '';
+    const nameOrId = participant.name ||
+        participant.userId ||
+        t('participantList.unknown.text', 'Unknown');
     let displayName;
     if (!participant.name) {
-        displayName = meFlag || nameOrId || t('Unknown');
+        displayName =
+            meFlag || nameOrId || t('participantList.unknown.text', 'Unknown');
     }
     else if (meFlag) {
         displayName = `${nameOrId} (${meFlag})`;
@@ -2069,14 +2075,14 @@ const DefaultDisplayName = ({ participant }) => {
     return (jsxRuntime.jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
 };
 const ToggleButton$2 = react.forwardRef(function ToggleButtonRender(props, ref) {
-    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__participant-listing-item__menu-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, icon: "ellipsis" }));
 });
 
 const CallParticipantListing = ({ data, }) => (jsxRuntime.jsx("div", { className: "str-video__participant-listing", children: data.map((participant) => (jsxRuntime.jsx(CallParticipantListingItem, { participant: participant }, participant.sessionId))) }));
 
 const EmptyParticipantSearchList = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__participant-list--empty", children: t('No participants found') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__participant-list--empty", children: t('participantList.noParticipantsFound.text', 'No participants found') }));
 };
 
 const SearchInput = ({ exitSearch, isActive, ...rest }) => {
@@ -2096,7 +2102,7 @@ const SearchInput = ({ exitSearch, isActive, ...rest }) => {
     }, [inputElement]);
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__search-input__container', {
             'str-video__search-input__container--active': isActive,
-        }), children: [jsxRuntime.jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsxRuntime.jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsxRuntime.jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsxRuntime.jsx("span", { className: "str-video__search-input__icon" }))] }));
+        }), children: [jsxRuntime.jsx("span", { className: "str-video__search-input__icon" }), jsxRuntime.jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive && (jsxRuntime.jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsxRuntime.jsx("span", { className: "str-video__search-input__icon--active" }) }))] }));
 };
 
 function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) {
@@ -2155,11 +2161,11 @@ const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearch
 };
 const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const muteAll = react.useCallback(() => {
         call?.muteAllUsers('audio');
     }, [call]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: t('Mute all') }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(Button, { appearance: "ghost", size: "xs", variant: "secondary", onClick: muteAll, children: t('participantList.muteAll.label', 'Mute all') }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-current": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
 };
 const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = videoReactBindings.useCallStateHooks();
@@ -2200,7 +2206,7 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     return (jsxRuntime.jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
 };
 const ToggleButton$1 = react.forwardRef(function ToggleButtonRender(props, ref) {
-    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__participant-list__filter-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, icon: "filter" }));
 });
 
 const CallPreview = (props) => {
@@ -2221,8 +2227,8 @@ const CallPreview = (props) => {
 };
 
 const CallRecordingListHeader = ({ callRecordings, onRefresh, }) => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__title", children: [jsxRuntime.jsx("span", { children: t('Call Recordings') }), callRecordings.length ? jsxRuntime.jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), onRefresh && (jsxRuntime.jsx(IconButton, { icon: "refresh", title: t('Refresh'), onClick: onRefresh }))] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__title", children: [jsxRuntime.jsx("span", { children: t('callRecordingList.callRecordings.title', 'Call Recordings') }), callRecordings.length ? jsxRuntime.jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), onRefresh && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", title: t('callRecordingList.refresh.title', 'Refresh'), onClick: onRefresh, icon: "refresh" }))] }));
 };
 
 const dateFormat = (date) => {
@@ -2341,7 +2347,7 @@ const RingingCallControls = () => {
     if (!call)
         return null;
     const buttonsDisabled = callCallingState !== videoClient.CallingState.RINGING;
-    return (jsxRuntime.jsx("div", { className: "str-video__pending-call-controls", children: call.isCreatedByMe ? (jsxRuntime.jsx(CancelCallButton, { disabled: buttonsDisabled })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AcceptCallButton, { disabled: buttonsDisabled }), jsxRuntime.jsx(CancelCallButton, { onClick: () => {
+    return (jsxRuntime.jsx("div", { className: "str-video__pending-call-controls", children: call.isCreatedByMe ? (jsxRuntime.jsx(CancelCallButton, { size: "sm", disabled: buttonsDisabled })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AcceptCallButton, { disabled: buttonsDisabled }), jsxRuntime.jsx(CancelCallButton, { size: "sm", onClick: () => {
                         const reason = call.isCreatedByMe ? 'cancel' : 'decline';
                         call.leave({ reject: true, reason }).catch((err) => {
                             console.error(`Failed to reject`, err);
@@ -2349,22 +2355,42 @@ const RingingCallControls = () => {
                     }, disabled: buttonsDisabled })] })) }));
 };
 
-const CALLING_STATE_TO_LABEL = {
-    [videoClient.CallingState.JOINING]: 'Joining',
-    [videoClient.CallingState.RINGING]: 'Ringing',
-    [videoClient.CallingState.MIGRATING]: 'Migrating',
-    [videoClient.CallingState.RECONNECTING]: 'Re-connecting',
-    [videoClient.CallingState.RECONNECTING_FAILED]: 'Failed',
-    [videoClient.CallingState.OFFLINE]: 'No internet connection',
-    [videoClient.CallingState.IDLE]: '',
-    [videoClient.CallingState.UNKNOWN]: '',
-    [videoClient.CallingState.JOINED]: 'Joined',
-    [videoClient.CallingState.LEFT]: 'Left call',
+/**
+ * The label rendered for the current calling state.
+ *
+ * A `switch` of literal `t()` calls rather than a `Record<CallingState, string>` fed into a `t()`
+ * lookup on a runtime value: the literal keys are statically extractable, which is what makes
+ * `Migrating`, `Failed`, `Joined` and `Left call` translatable - none had a catalog entry before.
+ * `IDLE` and `UNKNOWN` render nothing and get no key.
+ */
+const getCallingStateLabel = (callingState, t) => {
+    switch (callingState) {
+        case videoClient.CallingState.JOINING:
+            return t('ringingCall.callingState.joining.text', 'Joining');
+        case videoClient.CallingState.RINGING:
+            return t('ringingCall.callingState.ringing.text', 'Ringing');
+        case videoClient.CallingState.MIGRATING:
+            return t('ringingCall.callingState.migrating.text', 'Migrating');
+        case videoClient.CallingState.RECONNECTING:
+            return t('ringingCall.callingState.reconnecting.text', 'Re-connecting');
+        case videoClient.CallingState.RECONNECTING_FAILED:
+            return t('ringingCall.callingState.reconnectingFailed.text', 'Failed');
+        case videoClient.CallingState.OFFLINE:
+            return t('ringingCall.callingState.offline.text', 'No internet connection');
+        case videoClient.CallingState.JOINED:
+            return t('ringingCall.callingState.joined.text', 'Joined');
+        case videoClient.CallingState.LEFT:
+            return t('ringingCall.callingState.left.text', 'Left call');
+        case videoClient.CallingState.IDLE:
+        case videoClient.CallingState.UNKNOWN:
+        default:
+            return undefined;
+    }
 };
 const RingingCall = (props) => {
     const { includeSelf = false, totalMembersToShow = 3 } = props;
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCallCallingState, useCallMembers } = videoReactBindings.useCallStateHooks();
     const callingState = useCallCallingState();
     const members = useCallMembers();
@@ -2385,8 +2411,8 @@ const RingingCall = (props) => {
             membersToShow.splice(0, 1, self.user);
         }
     }
-    const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
-    return (jsxRuntime.jsxs("div", { className: "str-video__call-panel str-video__call-panel--ringing", children: [jsxRuntime.jsx("div", { className: "str-video__call-panel__members-list", children: membersToShow.map((user) => (jsxRuntime.jsxs("div", { className: "str-video__call-panel__member-box", children: [jsxRuntime.jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (jsxRuntime.jsx("div", { className: "str-video__member_details", children: jsxRuntime.jsx("span", { className: "str-video__member_name", children: user.name }) }))] }, user.id))) }), callingStateLabel && (jsxRuntime.jsx("div", { className: "str-video__call-panel__calling-state-label", children: t(callingStateLabel) })), [videoClient.CallingState.RINGING, videoClient.CallingState.JOINING].includes(callingState) && (jsxRuntime.jsx(RingingCallControls, {}))] }));
+    const callingStateLabel = getCallingStateLabel(callingState, t);
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-panel str-video__call-panel--ringing", children: [jsxRuntime.jsx("div", { className: "str-video__call-panel__members-list", children: membersToShow.map((user) => (jsxRuntime.jsxs("div", { className: "str-video__call-panel__member-box", children: [jsxRuntime.jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (jsxRuntime.jsx("div", { className: "str-video__member_details", children: jsxRuntime.jsx("span", { className: "str-video__member_name", children: user.name }) }))] }, user.id))) }), callingStateLabel && (jsxRuntime.jsx("div", { className: "str-video__call-panel__calling-state-label", children: callingStateLabel })), [videoClient.CallingState.RINGING, videoClient.CallingState.JOINING].includes(callingState) && (jsxRuntime.jsx(RingingCallControls, {}))] }));
 };
 
 const byNameOrId = (a, b) => {
@@ -2438,7 +2464,7 @@ const PermissionRequests = () => {
     // don't render anything if there are no permission requests
     if (permissionRequests.length === 0)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxRuntime.jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxRuntime.jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsxRuntime.jsx(Button, { type: "button", onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxRuntime.jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxRuntime.jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button", onClick: () => {
                             setExpanded((e) => !e);
                         }, children: expanded ? 'Hide requests' : 'Show requests' })] }), expanded && (jsxRuntime.jsx(PermissionRequestList, { ref: refs.setFloating, style: {
                     position: strategy,
@@ -2449,51 +2475,71 @@ const PermissionRequests = () => {
 };
 const PermissionRequestList = react.forwardRef(function PermissionRequestListRender(props, ref) {
     const { permissionRequests, handleUpdatePermission, ...rest } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     return (jsxRuntime.jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
             const { user, permissions } = request;
-            return (jsxRuntime.jsx(react.Fragment, { children: permissions.map((permission) => (jsxRuntime.jsxs("div", { className: "str-video__permission-request", children: [jsxRuntime.jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--allow", type: "button", onClick: handleUpdatePermission(request, 'grant'), children: t('Allow') }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'revoke'), children: t('Revoke') }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'dismiss'), children: t('Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
+            return (jsxRuntime.jsx(react.Fragment, { children: permissions.map((permission) => (jsxRuntime.jsxs("div", { className: "str-video__permission-request", children: [jsxRuntime.jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsxRuntime.jsx(Button, { variant: "primary", appearance: "solid", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--allow", onClick: handleUpdatePermission(request, 'grant'), children: t('common.allow.label', 'Allow') }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--reject", onClick: handleUpdatePermission(request, 'revoke'), children: t('common.revoke.label', 'Revoke') }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--reject", onClick: handleUpdatePermission(request, 'dismiss'), children: t('common.dismiss.label', 'Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
         }) }));
 });
-const Button = (props) => {
-    const { className, ...rest } = props;
-    return (jsxRuntime.jsx("button", { className: clsx('str-video__permission-request__button', className), ...rest }));
-};
 const messageForPermission = (userName, permission, t) => {
     switch (permission) {
         case videoClient.OwnCapability.SEND_AUDIO:
-            return t('{{ userName }} is requesting to speak', { userName });
+            return t('permissions.requestingToSpeak.text', '{{ userName }} is requesting to speak', { userName });
         case videoClient.OwnCapability.SEND_VIDEO:
-            return t('{{ userName }} is requesting to share their camera', {
+            return t('permissions.requestingCamera.text', '{{ userName }} is requesting to share their camera', {
                 userName,
             });
         case videoClient.OwnCapability.SCREENSHARE:
-            return t('{{ userName }} is requesting to present their screen', {
+            return t('permissions.requestingScreenShare.text', '{{ userName }} is requesting to present their screen', {
                 userName,
             });
         default:
-            return t('{{ userName }} is requesting permission: {{ permission }}', {
+            return t('permissions.requestingPermission.text', '{{ userName }} is requesting permission: {{ permission }}', {
                 userName,
                 permission,
             });
     }
 };
 
-const StreamTheme = ({ as: Component = 'div', className, children, ...props }) => {
-    return (jsxRuntime.jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
+const StreamTheme = ({ as: Component = 'div', className, children, theme = 'str-video__theme-dark', ...props }) => {
+    return (jsxRuntime.jsx(Component, { ...props, className: clsx('str-video', theme, className), children: children }));
 };
 
 const DefaultDisabledVideoPreview = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('common.videoDisabled.text', 'Video is disabled') }));
 };
 const DefaultNoCameraPreview = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('common.noCameraFound.text', 'No camera found') }));
+};
+/**
+ * Reports whether the local user is currently speaking, before they join the
+ * call. `MicrophoneManager` only runs its detector while the microphone is
+ * muted (for `speakingWhileMuted`), so this mirrors `AudioVolumeIndicator` and
+ * runs one on the live microphone stream instead.
+ */
+const useLocalSpeaking = (enabled) => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [isSpeaking, setIsSpeaking] = react.useState(false);
+    react.useEffect(() => {
+        if (!enabled || !isEnabled || !mediaStream) {
+            setIsSpeaking(false);
+            return;
+        }
+        const dispose = videoClient.createSoundDetector(mediaStream, ({ isSoundDetected }) => setIsSpeaking(isSoundDetected), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            setIsSpeaking(false);
+            dispose().catch(console.error);
+        };
+    }, [enabled, isEnabled, mediaStream]);
+    return isSpeaking;
 };
-const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
+const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, speakingIndicatorVisible = false, }) => {
     const { useCameraState } = videoReactBindings.useCallStateHooks();
     const { devices, status, isMute, mediaStream } = useCameraState();
+    const isSpeaking = useLocalSpeaking(speakingIndicatorVisible);
     let contents;
     if (isMute && devices?.length === 0) {
         contents = jsxRuntime.jsx(NoCameraPreview, {});
@@ -2508,21 +2554,43 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     else {
         contents = jsxRuntime.jsx(DisabledVideoPreview, {});
     }
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className, {
+            'str-video__video-preview-container--speaking': isSpeaking,
+        }), children: contents }));
+};
+
+/** How many of the three bars are lit, per quality level. */
+const ACTIVE_BARS = {
+    [videoClient.SfuModels.ConnectionQuality.POOR]: 1,
+    [videoClient.SfuModels.ConnectionQuality.GOOD]: 2,
+    [videoClient.SfuModels.ConnectionQuality.EXCELLENT]: 3,
+};
+const BAR_COUNT = 3;
+/**
+ * Three ascending bars showing a participant's connection quality.
+ */
+const ConnectionQualityIndicator = ({ quality, title, className, }) => {
+    const activeBars = ACTIVE_BARS[quality];
+    if (!activeBars)
+        return null;
+    const level = videoClient.SfuModels.ConnectionQuality[quality].toLowerCase();
+    return (jsxRuntime.jsx("span", { className: clsx('str-video__connection-quality-indicator', `str-video__connection-quality-indicator--${level}`, className), title: title ?? level, children: Array.from({ length: BAR_COUNT }, (_, index) => (jsxRuntime.jsx("span", { className: clsx('str-video__connection-quality-indicator__bar', index < activeBars &&
+                'str-video__connection-quality-indicator__bar--active') }, index))) }));
 };
 
 const ToggleButton = react.forwardRef(function ToggleButtonRender(props, ref) {
-    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__participant-view__menu-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, title: t('participantView.moreOptions.title', 'More options'), icon: "ellipsis" }));
 });
 const DefaultScreenShareOverlay = () => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const stopScreenShare = () => {
         call?.screenShare.disable().catch((err) => {
             console.error('Failed to stop screen sharing:', err);
         });
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('common.presentingYourScreen.text', 'You are presenting your screen') }), jsxRuntime.jsxs(Button, { variant: "destructive", onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), ' ', t('participantView.stopScreenSharing.label', 'Stop Screen Sharing')] })] }));
 };
 /**
  * Rendered over a remote participant's tile when the browser's autoplay policy
@@ -2531,8 +2599,8 @@ const DefaultScreenShareOverlay = () => {
  */
 const DefaultAudioBlockedNotification = () => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("button", { type: "button", className: "str-video__audio-blocked-notification", onClick: call?.resumeAudio, "aria-live": "polite", children: jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__message", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__text", children: [jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__title", children: t('Audio is blocked by your system') }), jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__subtitle", children: t('Click or tap to play audio') })] })] }) }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("button", { type: "button", className: "str-video__audio-blocked-notification", onClick: call?.resumeAudio, "aria-live": "polite", children: jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__message", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__text", children: [jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__title", children: t('participantView.audioBlocked.title', 'Audio is blocked by your system') }), jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__subtitle", children: t('participantView.audioBlocked.description', 'Click or tap to play audio') })] })] }) }));
 };
 const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, AudioBlockedNotification = DefaultAudioBlockedNotification, }) => {
     const { participant, trackType } = useParticipantViewContext();
@@ -2553,17 +2621,17 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const { participant, trackType } = useParticipantViewContext();
     const { isLocalParticipant, connectionQuality, pin, sessionId, name, userId, } = participant;
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
-    const connectionQualityAsString = !!connectionQuality &&
-        videoClient.SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
+    const { t } = useI18n();
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
     const isTrackPaused = trackType !== 'none' ? videoClient.hasPausedTrack(participant, trackType) : false;
     const isAudioConnecting = videoReactBindings.useIsAudioConnecting(participant);
     const isVideoConnecting = videoReactBindings.useIsVideoConnecting(participant);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && isVideoConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--video-connecting", tooltip: t('Video is connecting...') })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsxRuntime.jsx("span", { title: canUnpin ? t('Unpin') : t('Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
-                    connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("div", { className: "str-video__participant-details__name", children: [jsxRuntime.jsx("span", { className: "str-video__participant-details__name-text", children: name || userId }), indicatorsVisible && isAudioConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('participantView.audioConnecting.title', 'Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && isVideoConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--video-connecting", tooltip: t('participantView.videoConnecting.title', 'Video is connecting...') })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('participantView.videoPausedInsufficientBandwidth.title', 'Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsxRuntime.jsx("span", { title: canUnpin
+                                ? t('participantView.unpin.label', 'Unpin')
+                                : t('participantList.pinned.title', 'Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { state: "error", isVisible: isLocalParticipant &&
+                    connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('participantView.connectionQuality.poor.text', 'Poor connection quality. Please check your internet connection.'), children: connectionQuality && (jsxRuntime.jsx(ConnectionQualityIndicator, { quality: connectionQuality })) }))] }));
 };
 const SpeechIndicator = () => {
     const { participant } = useParticipantViewContext();
@@ -2613,7 +2681,7 @@ const ParticipantView = react.memo(react.forwardRef(function ParticipantViewRend
             applyElementToRef(ref, element);
             setTrackedElement(element);
         }, className: clsx('str-video__participant-view', isDominantSpeaker &&
-            'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
+            'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
                         trackType !== 'videoTrack' ||
                         isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
 }));
@@ -2623,185 +2691,27 @@ ParticipantView.displayName = 'ParticipantView';
 const StreamCall = videoReactBindings.StreamCallProvider;
 StreamCall.displayName = 'StreamCall';
 
-var Joining = "Joining";
-var Mic = "Mic";
-var Ringing = "Ringing";
-var Speakers = "Speakers";
-var Video = "Video";
-var Live = "Live";
-var Reactions = "Reactions";
-var Statistics = "Statistics";
-var Invite = "Invite";
-var Join = "Join";
-var You = "You";
-var Me = "Me";
-var Unknown = "Unknown";
-var Default = "Default";
-var Refresh = "Refresh";
-var Allow = "Allow";
-var Revoke = "Revoke";
-var Dismiss = "Dismiss";
-var Pinned = "Pinned";
-var Unpin = "Unpin";
-var Pin = "Pin";
-var Block = "Block";
-var Kick = "Kick";
-var Enter = "Enter";
-var Leave = "Leave";
-var Participants = "Participants";
-var Anonymous = ", and ({{ count }}) anonymous";
-var Speaker = "Speaker";
-var Microphone = "Microphone";
-var Backstage = "Backstage";
-var en = {
-	Joining: Joining,
-	Mic: Mic,
-	"No internet connection": "No internet connection",
-	"Re-connecting": "Re-connecting",
-	Ringing: Ringing,
-	"Screen Share": "Screen Share",
-	"Select a Camera": "Select a Camera",
-	"Select a Mic": "Select a Mic",
-	"Select Speakers": "Select Speakers",
-	Speakers: Speakers,
-	Video: Video,
-	"You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
-	"Background filters performance is degraded. Consider disabling filters for better performance.": "Background filters performance is degraded. Consider disabling filters for better performance.",
-	Live: Live,
-	"Livestream starts soon": "Livestream starts soon",
-	"Livestream starts at {{ time }}": "Livestream starts at {{ time }}",
-	"{{ count }} participants joined early_one": "{{ count }} participant joined early",
-	"{{ count }} participants joined early_other": "{{ count }} participants joined early",
-	"You can now speak.": "You can now speak.",
-	"Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
-	"You can no longer speak.": "You can no longer speak.",
-	"You can now share your video.": "You can now share your video.",
-	"Awaiting for an approval to share your video.": "Awaiting for an approval to share your video.",
-	"You can no longer share your video.": "You can no longer share your video.",
-	"Waiting for recording to stop...": "Waiting for recording to stop...",
-	"Waiting for recording to start...": "Waiting for recording to start...",
-	"Record call": "Record call",
-	Reactions: Reactions,
-	Statistics: Statistics,
-	"You can now share your screen.": "You can now share your screen.",
-	"Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
-	"You can no longer share your screen.": "You can no longer share your screen.",
-	"Share screen": "Share screen",
-	"Incoming Call...": "Incoming Call...",
-	"Calling...": "Calling...",
-	"Mute All": "Mute All",
-	Invite: Invite,
-	Join: Join,
-	You: You,
-	Me: Me,
-	Unknown: Unknown,
-	"Toggle device menu": "Toggle device menu",
-	Default: Default,
-	"Call Recordings": "Call Recordings",
-	Refresh: Refresh,
-	"Check your browser video permissions": "Check your browser video permissions",
-	"Video publishing is disabled by the system": "Video publishing is disabled by the system",
-	"You have no permission to share your video": "You have no permission to share your video",
-	"You have no permission to share your audio": "You have no permission to share your audio",
-	"You are presenting your screen": "You are presenting your screen",
-	"Stop Screen Sharing": "Stop Screen Sharing",
-	"Audio is blocked by your system": "Audio is blocked by your system",
-	"Click or tap to play audio": "Click or tap to play audio",
-	Allow: Allow,
-	Revoke: Revoke,
-	Dismiss: Dismiss,
-	"Microphone on": "Microphone on",
-	"Microphone off": "Microphone off",
-	"Microphone is paused by your system": "Microphone is paused by your system",
-	"Camera on": "Camera on",
-	"Camera off": "Camera off",
-	"Camera is paused by your system": "Camera is paused by your system",
-	"No camera found": "No camera found",
-	"Video is disabled": "Video is disabled",
-	Pinned: Pinned,
-	Unpin: Unpin,
-	Pin: Pin,
-	"Pin for everyone": "Pin for everyone",
-	"Unpin for everyone": "Unpin for everyone",
-	Block: Block,
-	Kick: Kick,
-	"Turn off video": "Turn off video",
-	"Turn off screen share": "Turn off screen share",
-	"Mute audio": "Mute audio",
-	"Mute screen share audio": "Mute screen share audio",
-	"Allow audio": "Allow audio",
-	"Allow video": "Allow video",
-	"Allow screen sharing": "Allow screen sharing",
-	"Disable audio": "Disable audio",
-	"Disable video": "Disable video",
-	"Disable screen sharing": "Disable screen sharing",
-	Enter: Enter,
-	Leave: Leave,
-	"Leave call": "Leave call",
-	"End call for all": "End call for all",
-	"{{ direction }} fullscreen": "{{ direction }} fullscreen",
-	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
-	"Dominant Speaker": "Dominant Speaker",
-	"Poor connection quality": "Poor connection quality. Please check your internet connection.",
-	"Video paused due to insufficient bandwidth": "Video paused due to insufficient bandwidth",
-	"Audio is connecting...": "Audio is connecting...",
-	"Video is connecting...": "Video is connecting...",
-	Participants: Participants,
-	Anonymous: Anonymous,
-	"No participants found": "No participants found",
-	"Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
-	"{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
-	"{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",
-	"{{ userName }} is requesting to share their camera": "{{ userName }} is requesting to share their camera",
-	"{{ userName }} is requesting to present their screen": "{{ userName }} is requesting to present their screen",
-	"{{ userName }} is requesting permission: {{ permission }}": "{{ userName }} is requesting permission: {{ permission }}",
-	"Applying...": "Applying...",
-	"Disable blur": "Disable blur",
-	"Blur background": "Blur background",
-	"Migrating...": "Migrating...",
-	"Reconnecting...": "Reconnecting...",
-	"You are offline. Check your internet connection.": "You are offline. Check your internet connection.",
-	"Failed to restore connection. Please try again.": "Failed to restore connection. Please try again.",
-	"Failed to join. Please try again.": "Failed to join. Please try again.",
-	"Set up your call before joining": "Set up your call before joining",
-	"Please grant your browser permission to access your camera and microphone.": "Please grant your browser permission to access your camera and microphone.",
-	"Start call": "Start call",
-	Speaker: Speaker,
-	Microphone: Microphone,
-	Backstage: Backstage,
-	"Go Live": "Go Live",
-	"Stop Live": "End Live",
-	"Enter Backstage": "Enter Backstage",
-	"Prepare your livestream": "Prepare your livestream",
-	"Ready to go live": "Ready to go live",
-	"Stream is ready!": "Stream is ready!",
-	"Waiting for the livestream to start": "Waiting for the livestream to start",
-	"{{ count }} waiting": "{{ count }} waiting",
-	"Join Stream": "Join Stream",
-	"Join automatically when stream starts": "Join automatically when stream starts",
-	"Display name": "Display name",
-	"Permission needed": "Permission needed",
-	"Call ended": "Call ended",
-	"Rejoin call": "Rejoin call",
-	"Left by mistake?": "Left by mistake?",
-	"Help us improve": "Help us improve",
-	"Leave feedback": "Leave feedback",
-	"Failed to rejoin. Please try again.": "Failed to rejoin. Please try again.",
-	"Share your feedback": "Share your feedback",
-	"Tell us about your experience...": "Tell us about your experience...",
-	"Submit feedback": "Submit feedback",
-	"Feedback message": "Feedback message",
-	"How was your call quality?": "How was your call quality?",
-	"Rate {{ count }} star_one": "Rate {{ count }} star",
-	"Rate {{ count }} star_other": "Rate {{ count }} stars",
-	"Thank you!": "Thank you!",
-	"Your feedback helps improve call quality.": "Your feedback helps improve call quality."
-};
-
-const translations = { en };
-
-const StreamVideo = (props) => {
-    return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { translationsOverrides: translations, ...props }));
+/**
+ * StreamVideo is the root provider of the SDK: it provides the client to the component tree and
+ * mounts the SDK's translation context.
+ *
+ * The i18n runtime lives here rather than in `@stream-io/video-react-bindings` because the key
+ * catalog is generated from *this* package's `t()` call sites.
+ *
+ * This also fixes a real bug in the previous implementation, which rendered
+ * `<StreamVideoProvider translationsOverrides={translations} {...props} />`. Because `{...props}`
+ * came last, an integrator passing `translationsOverrides` *replaced* the SDK's bundled strings
+ * instead of merging with them, leaving every untranslated key rendering as a raw dotted path.
+ * `useStreami18n` layers integrator dictionaries over the SDK's own defaults, so a partial
+ * dictionary is now safe.
+ */
+const StreamVideo = ({ children, client, i18nInstance, language, translations, }) => {
+    const translationContext = useStreami18n({
+        i18nInstance,
+        language,
+        translations,
+    });
+    return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { client: client, children: jsxRuntime.jsx(TranslationProvider, { value: translationContext, children: children }) }));
 };
 StreamVideo.displayName = 'StreamVideo';
 
@@ -2982,7 +2892,7 @@ const BackstageLayout = (props) => {
     const { useParticipantCount, useCallStartsAt } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const startsAt = useCallStartsAt();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const [startsAtPassed, setStartsAtPassed] = react.useState(() => !!startsAt && startsAt.getTime() < Date.now());
     react.useEffect(() => {
         if (!startsAt || startsAtPassed)
@@ -2996,17 +2906,20 @@ const BackstageLayout = (props) => {
         return () => clearInterval(interval);
     }, [startsAt, startsAtPassed]);
     return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__starts-at", children: startsAtPassed
-                        ? t('Livestream starts soon')
-                        : t('Livestream starts at {{ time }}', {
+                        ? t('livestream.backstage.startsSoon.text', 'Livestream starts soon')
+                        : t('livestream.backstage.startsAt.text', 'Livestream starts at {{ time }}', {
                             time: startsAt.toLocaleTimeString([], {
                                 hour: '2-digit',
                                 minute: '2-digit',
                             }),
-                        }) })), showEarlyParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
-                        count: humanizeParticipantCount
-                            ? videoClient.humanize(participantCount)
-                            : participantCount,
-                    }) }))] }) }));
+                        }) })), showEarlyParticipantCount && (jsxRuntime.jsxs("span", { className: "str-video__livestream-layout__early-viewers-count", children: [jsxRuntime.jsx(Icon, { icon: "livestream-viewers" }), t('livestream.backstage.participantsJoinedEarly.text', {
+                            count: participantCount,
+                            formattedCount: humanizeParticipantCount
+                                ? videoClient.humanize(participantCount)
+                                : participantCount,
+                            defaultValue_one: '{{ formattedCount }} participant joined early',
+                            defaultValue_other: '{{ formattedCount }} participants joined early',
+                        })] }))] }) }));
 };
 BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props) => {
@@ -3024,14 +2937,14 @@ const ParticipantOverlay = (props) => {
     const toggleFullScreen = useToggleFullScreen();
     const { speaker, volume } = useSpeakerState();
     const isSpeakerMuted = volume === 0;
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
-                                ? videoClient.humanize(participantCount)
-                                : participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsxRuntime.jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsxRuntime.jsxs("span", { className: "str-video__livestream-layout__live-badge", children: [jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge__dot", "aria-hidden": "true" }), t('common.live.label', 'Live')] })), showParticipantCount && (jsxRuntime.jsxs("span", { className: "str-video__livestream-layout__viewers-count", children: [jsxRuntime.jsx(Icon, { icon: "livestream-viewers" }), humanizeParticipantCount
+                                    ? videoClient.humanize(participantCount)
+                                    : participantCount] })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: jsxRuntime.jsx("span", { children: participant.name || participant.userId || '' }) }))] }), jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsxRuntime.jsx(IconButton, { icon: isSpeakerMuted ? 'speaker-off' : 'speaker', variant: "secondary", appearance: "solid", size: "sm", className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
                                 'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
                             participantViewElement &&
                             typeof participantViewElement.requestFullscreen !==
-                                'undefined' && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
+                                'undefined' && (jsxRuntime.jsx(IconButton, { icon: "fullscreen", variant: "secondary", appearance: "solid", size: "sm", className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
@@ -3096,6 +3009,7 @@ const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPi
         }), children: group.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
 };
 const PaginatedGridLayout = (props) => {
+    const { t } = useI18n();
     const { groupSize = (props.groupSize || 0) > 0
         ? props.groupSize || GROUP_SIZE
         : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, muted, } = props;
@@ -3127,7 +3041,7 @@ const PaginatedGridLayout = (props) => {
     const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", icon: "caret-left", "aria-label": t('callLayout.paginatedGridLayout.previousPage.ariaLabel', 'Previous page'), disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", disabled: page === pageCount - 1, icon: "caret-right", "aria-label": t('callLayout.paginatedGridLayout.nextPage.ariaLabel', 'Next page'), onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
 };
 PaginatedGridLayout.displayName = 'PaginatedGridLayout';
 
@@ -3232,6 +3146,7 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
 };
 SpeakerLayout.displayName = 'SpeakerLayout';
 const HorizontalScrollButtons = ({ scrollWrapper, }) => {
+    const { t } = useI18n();
     const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
     const scrollStartClickHandler = () => {
         scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
@@ -3239,9 +3154,10 @@ const HorizontalScrollButtons = ({ scrollWrapper, }) => {
     const scrollEndClickHandler = () => {
         scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (jsxRuntime.jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (jsxRuntime.jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollStartClickHandler, icon: "caret-left", "aria-label": t('callLayout.speakerLayout.scrollParticipantsLeft.ariaLabel', 'Scroll participants left'), className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollEndClickHandler, icon: "caret-right", "aria-label": t('callLayout.speakerLayout.scrollParticipantsRight.ariaLabel', 'Scroll participants right'), className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
 };
 const VerticalScrollButtons = ({ scrollWrapper, }) => {
+    const { t } = useI18n();
     const scrollPosition = useVerticalScrollPosition(scrollWrapper);
     const scrollTopClickHandler = () => {
         scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
@@ -3249,11 +3165,11 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
     const scrollBottomClickHandler = () => {
         scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollTopClickHandler, icon: "caret-up", "aria-label": t('callLayout.speakerLayout.scrollParticipantsUp.ariaLabel', 'Scroll participants up'), className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollBottomClickHandler, icon: "caret-down", "aria-label": t('callLayout.speakerLayout.scrollParticipantsDown.ariaLabel', 'Scroll participants down'), className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
 };
 
 const Pip = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
     const [layoutWrapperElement, setLayoutWrapperElement] = react.useState(null);
     const call = videoReactBindings.useCall();
@@ -3272,7 +3188,7 @@ const Pip = (props) => {
     if (!call)
         return null;
     return (jsxRuntime.jsxs("div", { className: "str-video__pip-layout", ref: setLayoutWrapperElement, children: [screenSharingParticipant &&
-                (screenSharingParticipant.isLocalParticipant ? (jsxRuntime.jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('You are presenting your screen') })] })) : (jsxRuntime.jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), participants.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId)))] }));
+                (screenSharingParticipant.isLocalParticipant ? (jsxRuntime.jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('common.presentingYourScreen.text', 'You are presenting your screen') })] })) : (jsxRuntime.jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), participants.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId)))] }));
 };
 Pip.displayName = 'PipLayout.Pip';
 
@@ -3298,7 +3214,7 @@ const getGridDensity = (count) => {
  * Use this when you need a more structured grid view in PIP mode.
  */
 const Grid = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, groupSize = 9, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
     const [page, setPage] = react.useState(0);
     const [wrapperElement, setWrapperElement] = react.useState(null);
@@ -3324,7 +3240,7 @@ const Grid = (props) => {
     if (!call)
         return null;
     return (jsxRuntime.jsxs("div", { className: "str-video__pip-layout str-video__pip-layout--grid", ref: setWrapperElement, children: [screenSharingParticipant &&
-                (screenSharingParticipant.isLocalParticipant ? (jsxRuntime.jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('You are presenting your screen') })] })) : (jsxRuntime.jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), jsxRuntime.jsxs("div", { className: "str-video__pip-layout__grid-container", children: [pageArrowsVisible && page > 0 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)), className: "str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--left" })), selectedGroup && (jsxRuntime.jsx("div", { className: clsx('str-video__pip-layout__grid', `str-video__pip-layout__grid--${getGridDensity(selectedGroup.length)}`), children: selectedGroup.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) })), pageArrowsVisible && page < pageCount - 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)), className: "str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--right" }))] })] }));
+                (screenSharingParticipant.isLocalParticipant ? (jsxRuntime.jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('common.presentingYourScreen.text', 'You are presenting your screen') })] })) : (jsxRuntime.jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), jsxRuntime.jsxs("div", { className: "str-video__pip-layout__grid-container", children: [pageArrowsVisible && page > 0 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", size: "sm", variant: "secondary", onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)), className: "str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--left" })), selectedGroup && (jsxRuntime.jsx("div", { className: clsx('str-video__pip-layout__grid', `str-video__pip-layout__grid--${getGridDensity(selectedGroup.length)}`), children: selectedGroup.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) })), pageArrowsVisible && page < pageCount - 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-right", size: "sm", variant: "secondary", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)), className: "str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--right" }))] })] }));
 };
 Grid.displayName = 'PipLayout.Grid';
 
@@ -3411,7 +3327,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("2.0.0-beta.0").split('.');
+const [major, minor, patch] = ("2.0.0-beta.1").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3419,6 +3335,22 @@ videoClient.setSdkInfo({
     patch,
 });
 
+Object.defineProperty(exports, "asDynamicKey", {
+    enumerable: true,
+    get: function () { return i18n.asDynamicKey; }
+});
+Object.defineProperty(exports, "defaultDateTimeParser", {
+    enumerable: true,
+    get: function () { return i18n.defaultDateTimeParser; }
+});
+Object.defineProperty(exports, "getDateString", {
+    enumerable: true,
+    get: function () { return i18n.getDateString; }
+});
+Object.defineProperty(exports, "predefinedFormatters", {
+    enumerable: true,
+    get: function () { return i18n.predefinedFormatters; }
+});
 exports.AcceptCallButton = AcceptCallButton;
 exports.Audio = Audio;
 exports.AudioVolumeIndicator = AudioVolumeIndicator;
@@ -3426,7 +3358,9 @@ exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.BackgroundFiltersProvider = BackgroundFiltersProvider;
 exports.BackstageLayout = BackstageLayout;
+exports.Badge = Badge;
 exports.BaseVideo = BaseVideo;
+exports.Button = Button;
 exports.CallControls = CallControls;
 exports.CallParticipantListing = CallParticipantListing;
 exports.CallParticipantListingItem = CallParticipantListingItem;
@@ -3435,11 +3369,10 @@ exports.CallPreview = CallPreview;
 exports.CallRecordingList = CallRecordingList;
 exports.CallRecordingListHeader = CallRecordingListHeader;
 exports.CallRecordingListItem = CallRecordingListItem;
-exports.CallStats = CallStats;
-exports.CallStatsButton = CallStatsButton;
 exports.CancelCallButton = CancelCallButton;
 exports.CancelCallConfirmButton = CancelCallConfirmButton;
 exports.CompositeButton = CompositeButton;
+exports.ConnectionQualityIndicator = ConnectionQualityIndicator;
 exports.DefaultAudioBlockedNotification = DefaultAudioBlockedNotification;
 exports.DefaultParticipantViewUI = DefaultParticipantViewUI;
 exports.DefaultReactionsMenu = DefaultReactionsMenu;
@@ -3455,6 +3388,7 @@ exports.DropDownSelectOption = DropDownSelectOption;
 exports.EmptyCallRecordingListing = EmptyCallRecordingListing;
 exports.GenericMenu = GenericMenu;
 exports.GenericMenuButtonItem = GenericMenuButtonItem;
+exports.GenericMenuSeparator = GenericMenuSeparator;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.LivestreamLayout = LivestreamLayout;
@@ -3489,28 +3423,29 @@ exports.SpeakerLayout = SpeakerLayout;
 exports.SpeakerTest = SpeakerTest;
 exports.SpeakingWhileMutedNotification = SpeakingWhileMutedNotification;
 exports.SpeechIndicator = SpeechIndicator;
-exports.StatCard = StatCard;
 exports.StreamCall = StreamCall;
 exports.StreamTheme = StreamTheme;
 exports.StreamVideo = StreamVideo;
-exports.TextButton = TextButton;
+exports.Streami18n = Streami18n;
 exports.ToggleAudioOutputButton = ToggleAudioOutputButton;
 exports.ToggleAudioPreviewButton = ToggleAudioPreviewButton;
 exports.ToggleAudioPublishingButton = ToggleAudioPublishingButton;
 exports.ToggleVideoPreviewButton = ToggleVideoPreviewButton;
 exports.ToggleVideoPublishingButton = ToggleVideoPublishingButton;
 exports.Tooltip = Tooltip;
-exports.Video = Video$1;
+exports.TranslationContext = TranslationContext;
+exports.TranslationProvider = TranslationProvider;
+exports.Video = Video;
 exports.VideoPreview = VideoPreview;
 exports.WithTooltip = WithTooltip;
 exports.applyFilter = applyFilter;
 exports.defaultEmojiReactionMap = defaultEmojiReactionMap;
 exports.defaultReactions = defaultReactions;
-exports.translations = translations;
 exports.useBackgroundFilters = useBackgroundFilters;
 exports.useDeviceList = useDeviceList;
 exports.useFilteredParticipants = useFilteredParticipants;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
+exports.useI18n = useI18n;
 exports.useLoopbackRecording = useLoopbackRecording;
 exports.useMenuContext = useMenuContext;
 exports.useModeration = useModeration;
@@ -3518,6 +3453,7 @@ exports.useNoiseCancellation = useNoiseCancellation;
 exports.useParticipantViewContext = useParticipantViewContext;
 exports.usePersistedDevicePreferences = usePersistedDevicePreferences;
 exports.useRequestPermission = useRequestPermission;
+exports.useStreami18n = useStreami18n;
 exports.useTrackElementVisibility = useTrackElementVisibility;
 exports.useVerticalScrollPosition = useVerticalScrollPosition;
 Object.keys(videoClient).forEach(function (k) {