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

package/dist/esm/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedParticipantViewUI.js","sources":["../../../../../../../../src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport clsx from 'clsx';\nimport { DefaultParticipantViewUI } from '../../../core';\nimport { useParticipantViewContext } from '../../../core';\n\nexport const EmbeddedParticipantViewUI = () => {\n  const { participantViewElement, trackType } = useParticipantViewContext();\n\n  const handleDoubleClick = useCallback(() => {\n    if (!participantViewElement) return;\n    if (typeof participantViewElement.requestFullscreen === 'undefined') return;\n\n    if (!document.fullscreenElement) {\n      participantViewElement.requestFullscreen().catch(console.error);\n    } else {\n      document.exitFullscreen().catch(console.error);\n    }\n  }, [participantViewElement]);\n\n  return (\n    <div\n      className={clsx(\n        'str-video__embedded-participant-view-ui',\n        trackType === 'screenShareTrack' &&\n          'str-video__embedded-participant-view-ui--screen-share',\n      )}\n      onDoubleClick={handleDoubleClick}\n    >\n      <DefaultParticipantViewUI />\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,yBAAyB,GAAG,MAAK;IAC5C,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAAG,yBAAyB,EAAE;AAEzE,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,sBAAsB;YAAE;AAC7B,QAAA,IAAI,OAAO,sBAAsB,CAAC,iBAAiB,KAAK,WAAW;YAAE;AAErE,QAAA,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;YAC/B,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACjE;aAAO;YACL,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAChD;AACF,IAAA,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;IAE5B,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,yCAAyC,EACzC,SAAS,KAAK,kBAAkB;YAC9B,uDAAuD,CAC1D,EACD,aAAa,EAAE,iBAAiB,EAAA,QAAA,EAEhCA,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAAA,CACxB;AAEV;;;;"}
+{"version":3,"file":"EmbeddedParticipantViewUI.js","sources":["../../../../../../../../src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport clsx from 'clsx';\nimport { DefaultParticipantViewUI } from '../../../core';\nimport { useParticipantViewContext } from '../../../core';\n\nexport const EmbeddedParticipantViewUI = () => {\n  const { participantViewElement, trackType } = useParticipantViewContext();\n\n  const handleDoubleClick = useCallback(() => {\n    if (!participantViewElement) return;\n    if (typeof participantViewElement.requestFullscreen === 'undefined') return;\n\n    if (!document.fullscreenElement) {\n      participantViewElement.requestFullscreen().catch(console.error);\n    } else {\n      document.exitFullscreen().catch(console.error);\n    }\n  }, [participantViewElement]);\n\n  return (\n    <div\n      className={clsx(\n        'str-video__embedded-participant-view-ui',\n        trackType === 'screenShareTrack' &&\n          'str-video__embedded-participant-view-ui--screen-share',\n      )}\n      onDoubleClick={handleDoubleClick}\n    >\n      <DefaultParticipantViewUI />\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,yBAAyB,GAAG,MAAK;IAC5C,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAAG,yBAAyB,EAAE;AAEzE,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,sBAAsB;YAAE;AAC7B,QAAA,IAAI,OAAO,sBAAsB,CAAC,iBAAiB,KAAK,WAAW;YAAE;AAErE,QAAA,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;YAC/B,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACjE;aAAO;YACL,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAChD;AACF,IAAA,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;IAE5B,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,yCAAyC,EACzC,SAAS,KAAK,kBAAkB;YAC9B,uDAAuD,CAC1D,EACD,aAAa,EAAE,iBAAiB,EAAA,QAAA,EAEhCA,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAAA,CACxB;AAEV;;;;"}

package/dist/esm/src/embedded/shared/JoinError/JoinError.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import { Button } from '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@stream-io/video-react-bindings';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -27,7 +29,7 @@ import '../../../core/components/Video/DefaultVideoPlaceholder.js';
 
 const JoinError = ({ onJoin }) => {
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__embedded-join-error", children: [jsx("h2", { className: "str-video__embedded-join-error__title", children: t('Failed to join the call') }), jsx("p", { className: "str-video__embedded-join-error__message", children: t("We couldn't connect to the server. Please check your connection and try again.") }), jsxs("button", { type: "button", className: "str-video__button", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('Try again')] })] }));
+    return (jsxs("div", { className: "str-video__embedded-join-error", children: [jsx("h2", { className: "str-video__embedded-join-error__title", children: t('joinError.failedToJoin.title', 'Failed to join the call') }), jsx("p", { className: "str-video__embedded-join-error__message", children: t('joinError.couldNotConnect.text', "We couldn't connect to the server. Please check your connection and try again.") }), jsxs(Button, { size: "sm", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('common.tryAgain.label', 'Try again')] })] }));
 };
 
 export { JoinError };

package/dist/esm/src/embedded/shared/JoinError/JoinError.js.map

@@ -1 +1 @@
-{"version":3,"file":"JoinError.js","sources":["../../../../../../../../src/embedded/shared/JoinError/JoinError.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface JoinErrorProps {\n  onJoin: () => void;\n}\n\nexport const JoinError = ({ onJoin }: JoinErrorProps) => {\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__embedded-join-error\">\n      <h2 className=\"str-video__embedded-join-error__title\">\n        {t('Failed to join the call')}\n      </h2>\n      <p className=\"str-video__embedded-join-error__message\">\n        {t(\n          \"We couldn't connect to the server. Please check your connection and try again.\",\n        )}\n      </p>\n      <button type=\"button\" className=\"str-video__button\" onClick={onJoin}>\n        <Icon icon=\"login\" />\n        {t('Try again')}\n      </button>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;MAOa,SAAS,GAAG,CAAC,EAAE,MAAM,EAAkB,KAAI;AACtD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAClD,CAAC,CAAC,yBAAyB,CAAC,EAAA,CAC1B,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACnD,CAAC,CACA,gFAAgF,CACjF,EAAA,CACC,EACJD,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CACjEC,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACpB,CAAC,CAAC,WAAW,CAAC,CAAA,EAAA,CACR,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"JoinError.js","sources":["../../../../../../../../src/embedded/shared/JoinError/JoinError.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { Button, Icon } from '../../../components';\n\ninterface JoinErrorProps {\n  onJoin: () => void;\n}\n\nexport const JoinError = ({ onJoin }: JoinErrorProps) => {\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__embedded-join-error\">\n      <h2 className=\"str-video__embedded-join-error__title\">\n        {t('joinError.failedToJoin.title', 'Failed to join the call')}\n      </h2>\n      <p className=\"str-video__embedded-join-error__message\">\n        {t(\n          'joinError.couldNotConnect.text',\n          \"We couldn't connect to the server. Please check your connection and try again.\",\n        )}\n      </p>\n      <Button size=\"sm\" onClick={onJoin}>\n        <Icon icon=\"login\" />\n        {t('common.tryAgain.label', 'Try again')}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAOa,SAAS,GAAG,CAAC,EAAE,MAAM,EAAkB,KAAI;AACtD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAClD,CAAC,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,EAAA,CAC1D,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACnD,CAAC,CACA,gCAAgC,EAChC,gFAAgF,CACjF,EAAA,CACC,EACJD,IAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACpB,CAAC,CAAC,uBAAuB,EAAE,WAAW,CAAC,CAAA,EAAA,CACjC,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/embedded/shared/Lobby/DeviceControls.js

@@ -1,10 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useConnectedUser, useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -12,15 +17,12 @@ import '../../../components/CallControls/ReactionsButton.js';
 import { ToggleAudioPreviewButton } from '../../../components/CallControls/ToggleAudioButton.js';
 import { ToggleVideoPreviewButton } from '../../../components/CallControls/ToggleVideoButton.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -33,11 +35,13 @@ import { NoCameraPreview, DisabledVideoPreview } from './VideoPreviewFallbacks.j
 
 const DeviceControls = ({ isVideoEnabled }) => {
     const { t } = useI18n();
+    const user = useConnectedUser();
     const { useCameraState, useMicrophoneState } = useCallStateHooks();
     const { hasBrowserPermission: hasCameraPermission } = useCameraState();
     const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__embedded-lobby__video-preview", children: [jsx(VideoPreview, { DisabledVideoPreview: DisabledVideoPreview, NoCameraPreview: NoCameraPreview }), jsxs("div", { className: "str-video__embedded-lobby__media-toggle", children: [jsx(ToggleAudioPreviewButton, { Menu: null }), isVideoEnabled && jsx(ToggleVideoPreviewButton, { Menu: null })] })] }), jsxs("div", { className: "str-video__embedded-lobby__media", children: [hasMicPermission ? (jsx(ToggleMicButton, {})) : (jsx(DisabledDeviceButton, { icon: "mic", label: t('Permission needed') })), isVideoEnabled &&
-                        (hasCameraPermission ? (jsx(ToggleCameraButton, {})) : (jsx(DisabledDeviceButton, { icon: "camera", label: t('Permission needed') })))] })] }));
+    const displayName = user?.name || user?.id;
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__embedded-lobby__video-preview", children: [jsx(VideoPreview, { DisabledVideoPreview: DisabledVideoPreview, NoCameraPreview: NoCameraPreview }), displayName && (jsx("span", { className: "str-video__embedded-lobby__participant-label", children: jsx("span", { className: "str-video__embedded-lobby__participant-label-text", children: displayName }) })), jsxs("div", { className: "str-video__embedded-lobby__media-toggle", children: [jsx(ToggleAudioPreviewButton, { Menu: null }), isVideoEnabled && jsx(ToggleVideoPreviewButton, { Menu: null })] })] }), jsxs("div", { className: "str-video__embedded-lobby__media", children: [hasMicPermission ? (jsx(ToggleMicButton, {})) : (jsx(DisabledDeviceButton, { icon: "mic", label: t('lobby.deviceControls.permissionNeeded.label', 'Permission needed') })), isVideoEnabled &&
+                        (hasCameraPermission ? (jsx(ToggleCameraButton, {})) : (jsx(DisabledDeviceButton, { icon: "camera", label: t('lobby.deviceControls.permissionNeeded.label', 'Permission needed') })))] })] }));
 };
 
 export { DeviceControls };

package/dist/esm/src/embedded/shared/Lobby/DeviceControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceControls.js","sources":["../../../../../../../../src/embedded/shared/Lobby/DeviceControls.tsx"],"sourcesContent":["import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  ToggleAudioPreviewButton,\n  ToggleVideoPreviewButton,\n  VideoPreview,\n} from '../../../components';\nimport { ToggleMicButton } from './ToggleMicButton';\nimport { ToggleCameraButton } from './ToggleCameraButton';\nimport { DisabledDeviceButton } from './DisabledDeviceButton';\nimport { DisabledVideoPreview, NoCameraPreview } from './VideoPreviewFallbacks';\n\ninterface DeviceControlsProps {\n  isVideoEnabled: boolean;\n}\n\nexport const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {\n  const { t } = useI18n();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  return (\n    <>\n      <div className=\"str-video__embedded-lobby__video-preview\">\n        <VideoPreview\n          DisabledVideoPreview={DisabledVideoPreview}\n          NoCameraPreview={NoCameraPreview}\n        />\n        <div className=\"str-video__embedded-lobby__media-toggle\">\n          <ToggleAudioPreviewButton Menu={null} />\n          {isVideoEnabled && <ToggleVideoPreviewButton Menu={null} />}\n        </div>\n      </div>\n\n      <div className=\"str-video__embedded-lobby__media\">\n        {hasMicPermission ? (\n          <ToggleMicButton />\n        ) : (\n          <DisabledDeviceButton icon=\"mic\" label={t('Permission needed')} />\n        )}\n        {isVideoEnabled &&\n          (hasCameraPermission ? (\n            <ToggleCameraButton />\n          ) : (\n            <DisabledDeviceButton\n              icon=\"camera\"\n              label={t('Permission needed')}\n            />\n          ))}\n      </div>\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAea,cAAc,GAAG,CAAC,EAAE,cAAc,EAAuB,KAAI;AACxE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAElE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACvDE,GAAA,CAAC,YAAY,EAAA,EACX,oBAAoB,EAAE,oBAAoB,EAC1C,eAAe,EAAE,eAAe,EAAA,CAChC,EACFF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDE,GAAA,CAAC,wBAAwB,EAAA,EAAC,IAAI,EAAE,IAAI,GAAI,EACvC,cAAc,IAAIA,GAAA,CAAC,wBAAwB,IAAC,IAAI,EAAE,IAAI,EAAA,CAAI,IACvD,CAAA,EAAA,CACF,EAENF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC9C,gBAAgB,IACfE,GAAA,CAAC,eAAe,KAAG,KAEnBA,GAAA,CAAC,oBAAoB,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAA,CAAI,CACnE,EACA,cAAc;AACb,yBAAC,mBAAmB,IAClBA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,KAEtBA,IAAC,oBAAoB,EAAA,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAA,CAC7B,CACH,CAAC,CAAA,EAAA,CACA,CAAA,EAAA,CACL;AAEP;;;;"}
+{"version":3,"file":"DeviceControls.js","sources":["../../../../../../../../src/embedded/shared/Lobby/DeviceControls.tsx"],"sourcesContent":["import {\n  useCallStateHooks,\n  useConnectedUser,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport {\n  ToggleAudioPreviewButton,\n  ToggleVideoPreviewButton,\n  VideoPreview,\n} from '../../../components';\nimport { ToggleMicButton } from './ToggleMicButton';\nimport { ToggleCameraButton } from './ToggleCameraButton';\nimport { DisabledDeviceButton } from './DisabledDeviceButton';\nimport { DisabledVideoPreview, NoCameraPreview } from './VideoPreviewFallbacks';\n\ninterface DeviceControlsProps {\n  isVideoEnabled: boolean;\n}\n\nexport const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {\n  const { t } = useI18n();\n  const user = useConnectedUser();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n  const displayName = user?.name || user?.id;\n\n  return (\n    <>\n      <div className=\"str-video__embedded-lobby__video-preview\">\n        <VideoPreview\n          DisabledVideoPreview={DisabledVideoPreview}\n          NoCameraPreview={NoCameraPreview}\n        />\n        {displayName && (\n          <span className=\"str-video__embedded-lobby__participant-label\">\n            <span className=\"str-video__embedded-lobby__participant-label-text\">\n              {displayName}\n            </span>\n          </span>\n        )}\n        <div className=\"str-video__embedded-lobby__media-toggle\">\n          <ToggleAudioPreviewButton Menu={null} />\n          {isVideoEnabled && <ToggleVideoPreviewButton Menu={null} />}\n        </div>\n      </div>\n\n      <div className=\"str-video__embedded-lobby__media\">\n        {hasMicPermission ? (\n          <ToggleMicButton />\n        ) : (\n          <DisabledDeviceButton\n            icon=\"mic\"\n            label={t(\n              'lobby.deviceControls.permissionNeeded.label',\n              'Permission needed',\n            )}\n          />\n        )}\n        {isVideoEnabled &&\n          (hasCameraPermission ? (\n            <ToggleCameraButton />\n          ) : (\n            <DisabledDeviceButton\n              icon=\"camera\"\n              label={t(\n                'lobby.deviceControls.permissionNeeded.label',\n                'Permission needed',\n              )}\n            />\n          ))}\n      </div>\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBa,cAAc,GAAG,CAAC,EAAE,cAAc,EAAuB,KAAI;AACxE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,IAAI,GAAG,gBAAgB,EAAE;IAC/B,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAElE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;IACvE,MAAM,WAAW,GAAG,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,EAAE;IAE1C,QACEA,4BACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACvDC,IAAC,YAAY,EAAA,EACX,oBAAoB,EAAE,oBAAoB,EAC1C,eAAe,EAAE,eAAe,EAAA,CAChC,EACD,WAAW,KACVA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8CAA8C,YAC5DA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAChE,WAAW,EAAA,CACP,EAAA,CACF,CACR,EACDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,IAAC,wBAAwB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,EACvC,cAAc,IAAIA,IAAC,wBAAwB,EAAA,EAAC,IAAI,EAAE,IAAI,GAAI,CAAA,EAAA,CACvD,CAAA,EAAA,CACF,EAEND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC9C,gBAAgB,IACfC,GAAA,CAAC,eAAe,KAAG,KAEnBA,IAAC,oBAAoB,EAAA,EACnB,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,CAAC,CACN,6CAA6C,EAC7C,mBAAmB,CACpB,EAAA,CACD,CACH,EACA,cAAc;AACb,yBAAC,mBAAmB,IAClBA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,KAEtBA,GAAA,CAAC,oBAAoB,EAAA,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAC,CACN,6CAA6C,EAC7C,mBAAmB,CACpB,GACD,CACH,CAAC,CAAA,EAAA,CACA,CAAA,EAAA,CACL;AAEP;;;;"}

package/dist/esm/src/embedded/shared/Lobby/DisabledDeviceButton.js

@@ -2,11 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-react-bindings';
 import '@stream-io/video-client';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
 import { Icon } from '../../../components/Icon/Icon.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';

package/dist/esm/src/embedded/shared/Lobby/DisabledDeviceButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisabledDeviceButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/DisabledDeviceButton.tsx"],"sourcesContent":["import { Icon } from '../../../components';\n\ninterface DisabledDeviceButtonProps {\n  icon: string;\n  label: string;\n}\n\nexport const DisabledDeviceButton = ({\n  icon,\n  label,\n}: DisabledDeviceButtonProps) => (\n  <div className=\"str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled\">\n    <Icon\n      className=\"str-video__embedded-lobby__device-button-icon\"\n      icon={icon}\n    />\n    <span className=\"str-video__embedded-lobby__device-button-label\">\n      {label}\n    </span>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,oBAAoB,GAAG,CAAC,EACnC,IAAI,EACJ,KAAK,GACqB,MAC1BA,cAAK,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC1GC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAE,IAAI,EAAA,CACV,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,KAAK,EAAA,CACD,CAAA,EAAA,CACH;;;;"}
+{"version":3,"file":"DisabledDeviceButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/DisabledDeviceButton.tsx"],"sourcesContent":["import { Icon } from '../../../components';\n\ninterface DisabledDeviceButtonProps {\n  icon: string;\n  label: string;\n}\n\nexport const DisabledDeviceButton = ({\n  icon,\n  label,\n}: DisabledDeviceButtonProps) => (\n  <div className=\"str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled\">\n    <Icon\n      className=\"str-video__embedded-lobby__device-button-icon\"\n      icon={icon}\n    />\n    <span className=\"str-video__embedded-lobby__device-button-label\">\n      {label}\n    </span>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,oBAAoB,GAAG,CAAC,EACnC,IAAI,EACJ,KAAK,GACqB,MAC1BA,cAAK,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC1GC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAE,IAAI,EAAA,CACV,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,KAAK,EAAA,CACD,CAAA,EAAA,CACH;;;;"}

package/dist/esm/src/embedded/shared/Lobby/Lobby.js

@@ -1,10 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useI18n, useConnectedUser, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import { Button } from '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -31,14 +33,13 @@ import { DeviceControls } from './DeviceControls.js';
  */
 const Lobby = ({ onJoin, title, joinLabel }) => {
     const { t } = useI18n();
-    const user = useConnectedUser();
     const { useCameraState, useCallSettings } = useCallStateHooks();
     const { isMute } = useCameraState();
     const settings = useCallSettings();
     const isVideoEnabled = settings?.video.enabled ?? true;
-    const resolvedJoinLabel = joinLabel ?? t('Join');
-    const resolvedTitle = title ?? t('Set up your call before joining');
-    return (jsx("div", { className: "str-video__embedded-lobby", children: jsxs("div", { className: "str-video__embedded-lobby__content", children: [jsx("h1", { className: "str-video__embedded-lobby__heading", children: resolvedTitle }), jsx("div", { className: clsx('str-video__embedded-lobby__camera', isMute && 'str-video__embedded-lobby__camera--off'), children: jsx(DeviceControls, { isVideoEnabled: isVideoEnabled }) }), jsxs("div", { className: "str-video__embedded-lobby__display-name", children: [jsx("div", { className: "str-video__embedded-lobby__display-name-label", children: t('Display name') }), jsx("span", { className: "str-video__embedded-lobby__display-name-value", children: user?.name }), jsxs("button", { className: "str-video__button", onClick: onJoin, children: [jsx(Icon, { className: "str-video__button__icon", icon: "login" }), resolvedJoinLabel] })] })] }) }));
+    const resolvedJoinLabel = joinLabel ?? t('lobby.join.label', 'Join');
+    const resolvedTitle = title ?? t('lobby.setUpYourCall.title', 'Set up your call before joining');
+    return (jsx("div", { className: "str-video__embedded-lobby", children: jsxs("div", { className: "str-video__embedded-lobby__content", children: [jsxs("div", { className: "str-video__embedded-lobby__title", children: [jsx(Icon, { icon: "language", className: "str-video__embedded-lobby__title-icon" }), jsx("h1", { className: "str-video__embedded-lobby__heading", children: resolvedTitle })] }), jsx("div", { className: clsx('str-video__embedded-lobby__camera', isMute && 'str-video__embedded-lobby__camera--off'), children: jsx(DeviceControls, { isVideoEnabled: isVideoEnabled }) }), jsxs(Button, { className: "str-video__embedded-lobby__join", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), resolvedJoinLabel] })] }) }));
 };
 
 export { Lobby };

package/dist/esm/src/embedded/shared/Lobby/Lobby.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lobby.js","sources":["../../../../../../../../src/embedded/shared/Lobby/Lobby.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  useCallStateHooks,\n  useConnectedUser,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\nimport { DeviceControls } from './DeviceControls';\n\ninterface LobbyProps {\n  onJoin: () => void;\n  title?: string;\n  joinLabel?: string;\n}\n\n/**\n * Lobby component - Device setup screen before joining a call.\n */\nexport const Lobby = ({ onJoin, title, joinLabel }: LobbyProps) => {\n  const { t } = useI18n();\n  const user = useConnectedUser();\n  const { useCameraState, useCallSettings } = useCallStateHooks();\n\n  const { isMute } = useCameraState();\n  const settings = useCallSettings();\n\n  const isVideoEnabled = settings?.video.enabled ?? true;\n  const resolvedJoinLabel = joinLabel ?? t('Join');\n  const resolvedTitle = title ?? t('Set up your call before joining');\n\n  return (\n    <div className=\"str-video__embedded-lobby\">\n      <div className=\"str-video__embedded-lobby__content\">\n        <h1 className=\"str-video__embedded-lobby__heading\">{resolvedTitle}</h1>\n        <div\n          className={clsx(\n            'str-video__embedded-lobby__camera',\n            isMute && 'str-video__embedded-lobby__camera--off',\n          )}\n        >\n          <DeviceControls isVideoEnabled={isVideoEnabled} />\n        </div>\n\n        <div className=\"str-video__embedded-lobby__display-name\">\n          <div className=\"str-video__embedded-lobby__display-name-label\">\n            {t('Display name')}\n          </div>\n          <span className=\"str-video__embedded-lobby__display-name-value\">\n            {user?.name}\n          </span>\n          <button className=\"str-video__button\" onClick={onJoin}>\n            <Icon className=\"str-video__button__icon\" icon=\"login\" />\n            {resolvedJoinLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;AAEG;AACI,MAAM,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAc,KAAI;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,IAAI,GAAG,gBAAgB,EAAE;IAC/B,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAE/D,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AACnC,IAAA,MAAM,QAAQ,GAAG,eAAe,EAAE;IAElC,MAAM,cAAc,GAAG,QAAQ,EAAE,KAAK,CAAC,OAAO,IAAI,IAAI;IACtD,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,iCAAiC,CAAC;IAEnE,QACEA,aAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACxCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,aACjDD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,aAAa,EAAA,CAAM,EACvEA,aACE,SAAS,EAAE,IAAI,CACb,mCAAmC,EACnC,MAAM,IAAI,wCAAwC,CACnD,EAAA,QAAA,EAEDA,IAAC,cAAc,EAAA,EAAC,cAAc,EAAE,cAAc,GAAI,EAAA,CAC9C,EAENC,cAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+CAA+C,YAC3D,CAAC,CAAC,cAAc,CAAC,EAAA,CACd,EACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAC5D,IAAI,EAAE,IAAI,GACN,EACPC,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAC,OAAO,GAAG,EACxD,iBAAiB,IACX,CAAA,EAAA,CACL,CAAA,EAAA,CACF,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"Lobby.js","sources":["../../../../../../../../src/embedded/shared/Lobby/Lobby.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { Button, Icon } from '../../../components';\nimport { DeviceControls } from './DeviceControls';\n\ninterface LobbyProps {\n  onJoin: () => void;\n  title?: string;\n  joinLabel?: string;\n}\n\n/**\n * Lobby component - Device setup screen before joining a call.\n */\nexport const Lobby = ({ onJoin, title, joinLabel }: LobbyProps) => {\n  const { t } = useI18n();\n  const { useCameraState, useCallSettings } = useCallStateHooks();\n\n  const { isMute } = useCameraState();\n  const settings = useCallSettings();\n\n  const isVideoEnabled = settings?.video.enabled ?? true;\n  const resolvedJoinLabel = joinLabel ?? t('lobby.join.label', 'Join');\n  const resolvedTitle =\n    title ?? t('lobby.setUpYourCall.title', 'Set up your call before joining');\n\n  return (\n    <div className=\"str-video__embedded-lobby\">\n      <div className=\"str-video__embedded-lobby__content\">\n        <div className=\"str-video__embedded-lobby__title\">\n          <Icon\n            icon=\"language\"\n            className=\"str-video__embedded-lobby__title-icon\"\n          />\n          <h1 className=\"str-video__embedded-lobby__heading\">\n            {resolvedTitle}\n          </h1>\n        </div>\n        <div\n          className={clsx(\n            'str-video__embedded-lobby__camera',\n            isMute && 'str-video__embedded-lobby__camera--off',\n          )}\n        >\n          <DeviceControls isVideoEnabled={isVideoEnabled} />\n        </div>\n\n        <Button className=\"str-video__embedded-lobby__join\" onClick={onJoin}>\n          <Icon icon=\"login\" />\n          {resolvedJoinLabel}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;AAEG;AACI,MAAM,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAc,KAAI;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAE/D,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AACnC,IAAA,MAAM,QAAQ,GAAG,eAAe,EAAE;IAElC,MAAM,cAAc,GAAG,QAAQ,EAAE,KAAK,CAAC,OAAO,IAAI,IAAI;IACtD,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpE,MAAM,aAAa,GACjB,KAAK,IAAI,CAAC,CAAC,2BAA2B,EAAE,iCAAiC,CAAC;AAE5E,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,YACxCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,aACjDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CD,IAAC,IAAI,EAAA,EACH,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uCAAuC,EAAA,CACjD,EACFA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,YAC/C,aAAa,EAAA,CACX,IACD,EACNA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,mCAAmC,EACnC,MAAM,IAAI,wCAAwC,CACnD,YAEDA,GAAA,CAAC,cAAc,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA,CAAI,GAC9C,EAENC,IAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CACjED,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,GAAG,EACpB,iBAAiB,IACX,CAAA,EAAA,CACL,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/Lobby/ToggleCameraButton.js

@@ -3,10 +3,15 @@ import { forwardRef } from 'react';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-client';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
 import { Icon } from '../../../components/Icon/Icon.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import { MenuToggle, MenuVisualType } from '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';

package/dist/esm/src/embedded/shared/Lobby/ToggleCameraButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleCameraButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/ToggleCameraButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport {\n  Icon,\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n} from '../../../components';\nimport { CameraMenuWithBlur } from '../BlurToggleButton/BlurToggleButton';\n\nconst ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleMenuButtonRender(props, ref) {\n    const { useCameraState } = useCallStateHooks();\n    const { selectedDevice: selectedCamera, devices: cameras } =\n      useCameraState();\n\n    return (\n      <button ref={ref} className=\"str-video__embedded-lobby__device-button\">\n        <Icon\n          className=\"str-video__embedded-lobby__device-button-icon\"\n          icon=\"camera\"\n        />\n        <span className=\"str-video__embedded-lobby__device-button-label\">\n          {cameras?.find((c: MediaDeviceInfo) => c.deviceId === selectedCamera)\n            ?.label || 'Default'}\n        </span>\n        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />\n      </button>\n    );\n  },\n);\n\nexport const ToggleCameraButton = () => {\n  return (\n    <MenuToggle\n      placement=\"top-start\"\n      ToggleButton={ToggleMenuButton}\n      visualType={MenuVisualType.MENU}\n    >\n      <CameraMenuWithBlur />\n    </MenuToggle>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AACxC,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GACxD,cAAc,EAAE;AAElB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,QAAQ,EAAA,CACb,EACFA,cAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,OAAO,EAAE,IAAI,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,QAAQ,KAAK,cAAc;sBAChE,KAAK,IAAI,SAAS,EAAA,CACjB,EACPA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,EAAA,CAAI,CAAA,EAAA,CACxD;AAEb,CAAC,CACF;AAEM,MAAM,kBAAkB,GAAG,MAAK;IACrC,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,WAAW,EACrB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAE/BA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACX;AAEjB;;;;"}
+{"version":3,"file":"ToggleCameraButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/ToggleCameraButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport {\n  Icon,\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n} from '../../../components';\nimport { CameraMenuWithBlur } from '../BlurToggleButton/BlurToggleButton';\n\nconst ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleMenuButtonRender(props, ref) {\n    const { useCameraState } = useCallStateHooks();\n    const { selectedDevice: selectedCamera, devices: cameras } =\n      useCameraState();\n\n    return (\n      <button ref={ref} className=\"str-video__embedded-lobby__device-button\">\n        <Icon\n          className=\"str-video__embedded-lobby__device-button-icon\"\n          icon=\"camera\"\n        />\n        <span className=\"str-video__embedded-lobby__device-button-label\">\n          {cameras?.find((c: MediaDeviceInfo) => c.deviceId === selectedCamera)\n            ?.label || 'Default'}\n        </span>\n        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />\n      </button>\n    );\n  },\n);\n\nexport const ToggleCameraButton = () => {\n  return (\n    <MenuToggle\n      placement=\"top-start\"\n      ToggleButton={ToggleMenuButton}\n      visualType={MenuVisualType.MENU}\n    >\n      <CameraMenuWithBlur />\n    </MenuToggle>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AACxC,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GACxD,cAAc,EAAE;AAElB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,QAAQ,EAAA,CACb,EACFA,cAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,OAAO,EAAE,IAAI,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,QAAQ,KAAK,cAAc;sBAChE,KAAK,IAAI,SAAS,EAAA,CACjB,EACPA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,EAAA,CAAI,CAAA,EAAA,CACxD;AAEb,CAAC,CACF;AAEM,MAAM,kBAAkB,GAAG,MAAK;IACrC,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,WAAW,EACrB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAE/BA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACX;AAEjB;;;;"}

package/dist/esm/src/embedded/shared/Lobby/ToggleMicButton.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -15,12 +20,9 @@ import '../../../components/DropdownSelect/DropdownSelect.js';
 import { MenuToggle, MenuVisualType } from '../../../components/Menu/MenuToggle.js';
 import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from '../../../components/DeviceSettings/DeviceSelectorAudio.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -34,7 +36,7 @@ const ToggleMenuButton = forwardRef(function ToggleMenuButtonRender(props, ref)
 });
 const ToggleMicButton = () => {
     const { t } = useI18n();
-    return (jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton, visualType: MenuVisualType.MENU, children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }));
+    return (jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton, visualType: MenuVisualType.MENU, children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') })] }));
 };
 
 export { ToggleMicButton };

package/dist/esm/src/embedded/shared/Lobby/ToggleMicButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMicButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/ToggleMicButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n} from '../../../components';\n\nconst ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleMenuButtonRender(props, ref) {\n    const { useMicrophoneState } = useCallStateHooks();\n    const { selectedDevice: selectedMic, devices: microphones } =\n      useMicrophoneState();\n\n    return (\n      <button ref={ref} className=\"str-video__embedded-lobby__device-button\">\n        <Icon\n          className=\"str-video__embedded-lobby__device-button-icon\"\n          icon=\"mic\"\n        />\n        <span className=\"str-video__embedded-lobby__device-button-label\">\n          {microphones?.find((m: MediaDeviceInfo) => m.deviceId === selectedMic)\n            ?.label || 'Default'}\n        </span>\n        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />\n      </button>\n    );\n  },\n);\n\nexport const ToggleMicButton = () => {\n  const { t } = useI18n();\n\n  return (\n    <MenuToggle\n      placement=\"top-start\"\n      ToggleButton={ToggleMenuButton}\n      visualType={MenuVisualType.MENU}\n    >\n      <DeviceSelectorAudioInput visualType=\"list\" title={t('Microphone')} />\n      <DeviceSelectorAudioOutput visualType=\"list\" title={t('Speaker')} />\n    </MenuToggle>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AACxC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,GACzD,kBAAkB,EAAE;AAEtB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,KAAK,EAAA,CACV,EACFA,cAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,WAAW,EAAE,IAAI,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,QAAQ,KAAK,WAAW;sBACjE,KAAK,IAAI,SAAS,EAAA,CACjB,EACPA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,EAAA,CAAI,CAAA,EAAA,CACxD;AAEb,CAAC,CACF;AAEM,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,QACED,KAAC,UAAU,EAAA,EACT,SAAS,EAAC,WAAW,EACrB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,CAAC,IAAI,aAE/BC,GAAA,CAAC,wBAAwB,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EAAA,CAAI,EACtEA,GAAA,CAAC,yBAAyB,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EAAA,CAAI,CAAA,EAAA,CACzD;AAEjB;;;;"}
+{"version":3,"file":"ToggleMicButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/ToggleMicButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n} from '../../../components';\n\nconst ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleMenuButtonRender(props, ref) {\n    const { useMicrophoneState } = useCallStateHooks();\n    const { selectedDevice: selectedMic, devices: microphones } =\n      useMicrophoneState();\n\n    return (\n      <button ref={ref} className=\"str-video__embedded-lobby__device-button\">\n        <Icon\n          className=\"str-video__embedded-lobby__device-button-icon\"\n          icon=\"mic\"\n        />\n        <span className=\"str-video__embedded-lobby__device-button-label\">\n          {microphones?.find((m: MediaDeviceInfo) => m.deviceId === selectedMic)\n            ?.label || 'Default'}\n        </span>\n        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />\n      </button>\n    );\n  },\n);\n\nexport const ToggleMicButton = () => {\n  const { t } = useI18n();\n\n  return (\n    <MenuToggle\n      placement=\"top-start\"\n      ToggleButton={ToggleMenuButton}\n      visualType={MenuVisualType.MENU}\n    >\n      <DeviceSelectorAudioInput\n        visualType=\"list\"\n        title={t('common.microphone.label', 'Microphone')}\n      />\n      <DeviceSelectorAudioOutput\n        visualType=\"list\"\n        title={t('common.speaker.label', 'Speaker')}\n      />\n    </MenuToggle>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AACxC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,GACzD,kBAAkB,EAAE;AAEtB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,KAAK,EAAA,CACV,EACFA,cAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,WAAW,EAAE,IAAI,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,QAAQ,KAAK,WAAW;sBACjE,KAAK,IAAI,SAAS,EAAA,CACjB,EACPA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,EAAA,CAAI,CAAA,EAAA,CACxD;AAEb,CAAC,CACF;AAEM,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,QACED,IAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,WAAW,EACrB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAAA,CAE/BC,GAAA,CAAC,wBAAwB,EAAA,EACvB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,yBAAyB,EAAE,YAAY,CAAC,GACjD,EACFA,GAAA,CAAC,yBAAyB,EAAA,EACxB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAA,CAC3C,CAAA,EAAA,CACS;AAEjB;;;;"}

package/dist/esm/src/embedded/shared/Lobby/VideoPreviewFallbacks.js

@@ -1,10 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { useI18n, useCallStateHooks, useConnectedUser } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useConnectedUser } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import 'react';
+import '@stream-io/i18n/react';
 import { Avatar } from '../../../components/Avatar/Avatar.js';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
-import 'react';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-client';
 import 'clsx';
 import '@floating-ui/react';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -32,7 +34,7 @@ const DisabledVideoPreview = () => {
     const { hasBrowserPermission: hasCameraPermission } = useCameraState();
     const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
     const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
-    return (jsx("div", { className: "str-video__embedded-lobby__no-permission", children: hasBrowserMediaPermission ? (jsx(Avatar, { imageSrc: user?.image, name: user?.name || user?.id })) : (t('Please grant your browser permission to access your camera and microphone.')) }));
+    return (jsx("div", { className: "str-video__embedded-lobby__no-permission", children: hasBrowserMediaPermission ? (jsx(Avatar, { imageSrc: user?.image, name: user?.name || user?.id })) : (t('lobby.videoPreviewFallbacks.grantBrowserPermission.text', 'Please grant your browser permission to access your camera and microphone.')) }));
 };
 const NoCameraPreview = () => {
     const { t } = useI18n();
@@ -41,9 +43,9 @@ const NoCameraPreview = () => {
     const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
     const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
     if (!hasBrowserMediaPermission) {
-        return (jsx("div", { className: "str-video__embedded-lobby__no-permission", children: t('Please grant your browser permission to access your camera and microphone.') }));
+        return (jsx("div", { className: "str-video__embedded-lobby__no-permission", children: t('lobby.videoPreviewFallbacks.grantBrowserPermission.text', 'Please grant your browser permission to access your camera and microphone.') }));
     }
-    return (jsx("div", { className: "str-video__video-preview__no-camera-preview", children: t('No camera found') }));
+    return (jsx("div", { className: "str-video__video-preview__no-camera-preview", children: t('common.noCameraFound.text', 'No camera found') }));
 };
 
 export { DisabledVideoPreview, NoCameraPreview };

package/dist/esm/src/embedded/shared/Lobby/VideoPreviewFallbacks.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPreviewFallbacks.js","sources":["../../../../../../../../src/embedded/shared/Lobby/VideoPreviewFallbacks.tsx"],"sourcesContent":["import {\n  useCallStateHooks,\n  useConnectedUser,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { Avatar } from '../../../components';\n\nexport const DisabledVideoPreview = () => {\n  const { t } = useI18n();\n\n  const user = useConnectedUser();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;\n\n  return (\n    <div className=\"str-video__embedded-lobby__no-permission\">\n      {hasBrowserMediaPermission ? (\n        <Avatar imageSrc={user?.image} name={user?.name || user?.id} />\n      ) : (\n        t(\n          'Please grant your browser permission to access your camera and microphone.',\n        )\n      )}\n    </div>\n  );\n};\n\nexport const NoCameraPreview = () => {\n  const { t } = useI18n();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;\n\n  if (!hasBrowserMediaPermission) {\n    return (\n      <div className=\"str-video__embedded-lobby__no-permission\">\n        {t(\n          'Please grant your browser permission to access your camera and microphone.',\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"str-video__video-preview__no-camera-preview\">\n      {t('No camera found')}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,oBAAoB,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,MAAM,IAAI,GAAG,gBAAgB,EAAE;IAC/B,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAElE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,MAAM,yBAAyB,GAAG,mBAAmB,IAAI,gBAAgB;AAEzE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACtD,yBAAyB,IACxBA,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,EAAE,GAAI,KAE/D,CAAC,CACC,4EAA4E,CAC7E,CACF,EAAA,CACG;AAEV;AAEO,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,MAAM,yBAAyB,GAAG,mBAAmB,IAAI,gBAAgB;IAEzE,IAAI,CAAC,yBAAyB,EAAE;AAC9B,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACtD,CAAC,CACA,4EAA4E,CAC7E,EAAA,CACG;IAEV;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACzD,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACjB;AAEV;;;;"}
+{"version":3,"file":"VideoPreviewFallbacks.js","sources":["../../../../../../../../src/embedded/shared/Lobby/VideoPreviewFallbacks.tsx"],"sourcesContent":["import {\n  useCallStateHooks,\n  useConnectedUser,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { Avatar } from '../../../components';\n\nexport const DisabledVideoPreview = () => {\n  const { t } = useI18n();\n\n  const user = useConnectedUser();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;\n\n  return (\n    <div className=\"str-video__embedded-lobby__no-permission\">\n      {hasBrowserMediaPermission ? (\n        <Avatar imageSrc={user?.image} name={user?.name || user?.id} />\n      ) : (\n        t(\n          'lobby.videoPreviewFallbacks.grantBrowserPermission.text',\n          'Please grant your browser permission to access your camera and microphone.',\n        )\n      )}\n    </div>\n  );\n};\n\nexport const NoCameraPreview = () => {\n  const { t } = useI18n();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;\n\n  if (!hasBrowserMediaPermission) {\n    return (\n      <div className=\"str-video__embedded-lobby__no-permission\">\n        {t(\n          'lobby.videoPreviewFallbacks.grantBrowserPermission.text',\n          'Please grant your browser permission to access your camera and microphone.',\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"str-video__video-preview__no-camera-preview\">\n      {t('common.noCameraFound.text', 'No camera found')}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,oBAAoB,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,MAAM,IAAI,GAAG,gBAAgB,EAAE;IAC/B,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAElE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,MAAM,yBAAyB,GAAG,mBAAmB,IAAI,gBAAgB;IAEzE,QACEA,aAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACtD,yBAAyB,IACxBA,GAAA,CAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,EAAE,EAAA,CAAI,KAE/D,CAAC,CACC,yDAAyD,EACzD,4EAA4E,CAC7E,CACF,EAAA,CACG;AAEV;AAEO,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,MAAM,yBAAyB,GAAG,mBAAmB,IAAI,gBAAgB;IAEzE,IAAI,CAAC,yBAAyB,EAAE;AAC9B,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACtD,CAAC,CACA,yDAAyD,EACzD,4EAA4E,CAC7E,EAAA,CACG;IAEV;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACzD,CAAC,CAAC,2BAA2B,EAAE,iBAAiB,CAAC,EAAA,CAC9C;AAEV;;;;"}

package/dist/esm/src/embedded/shared/ViewersCount/ViewersCount.js

@@ -3,10 +3,15 @@ import { humanize } from '@stream-io/video-client';
 import 'react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-react-bindings';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
 import { Icon } from '../../../components/Icon/Icon.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';

package/dist/esm/src/embedded/shared/ViewersCount/ViewersCount.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewersCount.js","sources":["../../../../../../../../src/embedded/shared/ViewersCount/ViewersCount.tsx"],"sourcesContent":["import { humanize } from '@stream-io/video-client';\nimport { Icon } from '../../../components';\n\ninterface ViewersCountProps {\n  count: number;\n}\n\nexport const ViewersCount = ({ count }: ViewersCountProps) => (\n  <div className=\"str-video__embedded-livestream-duration__viewers\">\n    <Icon\n      icon=\"eye\"\n      className=\"str-video__embedded-livestream-duration__eye-icon\"\n    />\n    <span className=\"str-video__embedded-livestream-duration__count\">\n      {humanize(count)}\n    </span>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAqB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC/DC,IAAC,IAAI,EAAA,EACH,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,mDAAmD,EAAA,CAC7D,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,QAAQ,CAAC,KAAK,CAAC,EAAA,CACX,CAAA,EAAA,CACH;;;;"}
+{"version":3,"file":"ViewersCount.js","sources":["../../../../../../../../src/embedded/shared/ViewersCount/ViewersCount.tsx"],"sourcesContent":["import { humanize } from '@stream-io/video-client';\nimport { Icon } from '../../../components';\n\ninterface ViewersCountProps {\n  count: number;\n}\n\nexport const ViewersCount = ({ count }: ViewersCountProps) => (\n  <div className=\"str-video__embedded-livestream-duration__viewers\">\n    <Icon\n      icon=\"eye\"\n      className=\"str-video__embedded-livestream-duration__eye-icon\"\n    />\n    <span className=\"str-video__embedded-livestream-duration__count\">\n      {humanize(count)}\n    </span>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAqB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC/DC,IAAC,IAAI,EAAA,EACH,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,mDAAmD,EAAA,CAC7D,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,QAAQ,CAAC,KAAK,CAAC,EAAA,CACX,CAAA,EAAA,CACH;;;;"}

package/dist/esm/src/hooks/useDeviceList.js

@@ -1,5 +1,7 @@
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../i18n/TranslationContext.js';
 import { useMemo } from 'react';
+import '@stream-io/i18n/react';
 
 /**
  * Utility hook that helps render a list of devices or implement a device selector.
@@ -25,7 +27,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;

package/dist/esm/src/hooks/useDeviceList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDeviceList.js","sources":["../../../../../../src/hooks/useDeviceList.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { useMemo } from 'react';\n\nexport interface DeviceListItem {\n  deviceId: string;\n  label: string;\n  isSelected: boolean;\n}\n\n/**\n * Utility hook that helps render a list of devices or implement a device selector.\n * Compared to someting like `useCameraState().devices`, it has some handy features:\n * 1. Adds the \"Default\" device to the list if applicable (either the user did not\n * select a device, or a previously selected device is no longer available).\n * 2. Maps the device list to a format more suitable for rendering.\n */\nexport function useDeviceList(\n  devices: MediaDeviceInfo[],\n  selectedDeviceId: string | undefined,\n): {\n  deviceList: DeviceListItem[];\n  selectedDeviceInfo: DeviceListItem;\n  selectedIndex: number;\n} {\n  const { t } = useI18n();\n\n  return useMemo(() => {\n    let selectedDeviceInfo: DeviceListItem | null = null;\n    let selectedIndex: number | null = null;\n\n    const deviceList: DeviceListItem[] = devices.map((d, i) => {\n      const isSelected = d.deviceId === selectedDeviceId;\n      const device = { deviceId: d.deviceId, label: d.label, isSelected };\n\n      if (isSelected) {\n        selectedDeviceInfo = device;\n        selectedIndex = i;\n      }\n\n      return device;\n    });\n\n    if (selectedDeviceInfo === null || selectedIndex === null) {\n      const defaultDevice = {\n        deviceId: 'default',\n        label: t('Default'),\n        isSelected: true,\n      };\n\n      selectedDeviceInfo = defaultDevice;\n      selectedIndex = 0;\n      deviceList.unshift(defaultDevice);\n    }\n\n    return { deviceList, selectedDeviceInfo, selectedIndex };\n  }, [devices, selectedDeviceId, t]);\n}\n"],"names":[],"mappings":";;;AASA;;;;;;AAMG;AACG,SAAU,aAAa,CAC3B,OAA0B,EAC1B,gBAAoC,EAAA;AAMpC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,OAAO,OAAO,CAAC,MAAK;QAClB,IAAI,kBAAkB,GAA0B,IAAI;QACpD,IAAI,aAAa,GAAkB,IAAI;QAEvC,MAAM,UAAU,GAAqB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACxD,YAAA,MAAM,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,gBAAgB;AAClD,YAAA,MAAM,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE;YAEnE,IAAI,UAAU,EAAE;gBACd,kBAAkB,GAAG,MAAM;gBAC3B,aAAa,GAAG,CAAC;YACnB;AAEA,YAAA,OAAO,MAAM;AACf,QAAA,CAAC,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,IAAI,aAAa,KAAK,IAAI,EAAE;AACzD,YAAA,MAAM,aAAa,GAAG;AACpB,gBAAA,QAAQ,EAAE,SAAS;AACnB,gBAAA,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC;AACnB,gBAAA,UAAU,EAAE,IAAI;aACjB;YAED,kBAAkB,GAAG,aAAa;YAClC,aAAa,GAAG,CAAC;AACjB,YAAA,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;QACnC;AAEA,QAAA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE;IAC1D,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;AACpC;;;;"}
+{"version":3,"file":"useDeviceList.js","sources":["../../../../../../src/hooks/useDeviceList.tsx"],"sourcesContent":["import { useI18n } from '../i18n';\nimport { useMemo } from 'react';\n\nexport interface DeviceListItem {\n  deviceId: string;\n  label: string;\n  isSelected: boolean;\n}\n\n/**\n * Utility hook that helps render a list of devices or implement a device selector.\n * Compared to someting like `useCameraState().devices`, it has some handy features:\n * 1. Adds the \"Default\" device to the list if applicable (either the user did not\n * select a device, or a previously selected device is no longer available).\n * 2. Maps the device list to a format more suitable for rendering.\n */\nexport function useDeviceList(\n  devices: MediaDeviceInfo[],\n  selectedDeviceId: string | undefined,\n): {\n  deviceList: DeviceListItem[];\n  selectedDeviceInfo: DeviceListItem;\n  selectedIndex: number;\n} {\n  const { t } = useI18n();\n\n  return useMemo(() => {\n    let selectedDeviceInfo: DeviceListItem | null = null;\n    let selectedIndex: number | null = null;\n\n    const deviceList: DeviceListItem[] = devices.map((d, i) => {\n      const isSelected = d.deviceId === selectedDeviceId;\n      const device = { deviceId: d.deviceId, label: d.label, isSelected };\n\n      if (isSelected) {\n        selectedDeviceInfo = device;\n        selectedIndex = i;\n      }\n\n      return device;\n    });\n\n    if (selectedDeviceInfo === null || selectedIndex === null) {\n      const defaultDevice = {\n        deviceId: 'default',\n        label: t('common.default.label', 'Default'),\n        isSelected: true,\n      };\n\n      selectedDeviceInfo = defaultDevice;\n      selectedIndex = 0;\n      deviceList.unshift(defaultDevice);\n    }\n\n    return { deviceList, selectedDeviceInfo, selectedIndex };\n  }, [devices, selectedDeviceId, t]);\n}\n"],"names":[],"mappings":";;;;;AASA;;;;;;AAMG;AACG,SAAU,aAAa,CAC3B,OAA0B,EAC1B,gBAAoC,EAAA;AAMpC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,OAAO,OAAO,CAAC,MAAK;QAClB,IAAI,kBAAkB,GAA0B,IAAI;QACpD,IAAI,aAAa,GAAkB,IAAI;QAEvC,MAAM,UAAU,GAAqB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACxD,YAAA,MAAM,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,gBAAgB;AAClD,YAAA,MAAM,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE;YAEnE,IAAI,UAAU,EAAE;gBACd,kBAAkB,GAAG,MAAM;gBAC3B,aAAa,GAAG,CAAC;YACnB;AAEA,YAAA,OAAO,MAAM;AACf,QAAA,CAAC,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,IAAI,aAAa,KAAK,IAAI,EAAE;AACzD,YAAA,MAAM,aAAa,GAAG;AACpB,gBAAA,QAAQ,EAAE,SAAS;AACnB,gBAAA,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC;AAC3C,gBAAA,UAAU,EAAE,IAAI;aACjB;YAED,kBAAkB,GAAG,aAAa;YAClC,aAAa,GAAG,CAAC;AACjB,YAAA,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;QACnC;AAEA,QAAA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE;IAC1D,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;AACpC;;;;"}

package/dist/esm/src/i18n/Streami18n.js

@@ -0,0 +1,58 @@
+import { Streami18n as Streami18n$1 } from '@stream-io/i18n';
+import { runtimeDefaults } from './runtimeDefaults.js';
+
+/**
+ * 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 Streami18n$1 {
+    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 },
+        });
+    }
+}
+
+export { Streami18n };
+//# sourceMappingURL=Streami18n.js.map

package/dist/esm/src/i18n/Streami18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Streami18n.js","sources":["../../../../../../src/i18n/Streami18n.ts"],"sourcesContent":["import { Streami18n as CoreStreami18n } from '@stream-io/i18n';\nimport type { Streami18nOptions as CoreStreami18nOptions } from '@stream-io/i18n';\n\nimport { runtimeDefaults } from './runtimeDefaults';\nimport type { BundledKey, TranslationCatalog } from './types';\n\n/**\n * Options for {@link Streami18n}.\n *\n * Core's options, narrowed to this SDK's catalog so `translationsForLanguage` is key-checked.\n * `runtimeDefaults` is *merged* over the SDK's own rather than replacing it, so supplying it adds to\n * what the SDK ships.\n */\nexport type Streami18nOptions = CoreStreami18nOptions<TranslationCatalog>;\n\n/**\n * Wrapper around [i18next](https://www.i18next.com/) for this SDK's translations. Pass an instance\n * to `<StreamVideo i18nInstance={…}>` to control the language and the copy.\n *\n * The implementation lives in `@stream-io/i18n`, shared with the React Native SDK and with Chat.\n * What this subclass adds is what is this package's own: its bundled translation data, and the two\n * type parameters — core cannot supply either, because the key catalog is generated from *this*\n * package's `t()` call sites.\n *\n * ## Overriding some of the English copy\n *\n * ```ts\n * const i18n = new Streami18n({\n *   translationsForLanguage: {\n *     'common.participants.label': 'People',\n *   },\n * });\n * ```\n *\n * ## Adding a language\n *\n * ```ts\n * import 'dayjs/locale/nl';\n *\n * const i18n = new Streami18n({ language: 'nl' });\n * i18n.registerTranslation('nl', {\n *   'callControls.cancelCallButton.leaveCall.title': 'Verlaten',\n * });\n * ```\n *\n * No dayjs locale file defines `calendar` — that field belongs to the calendar plugin — so a\n * language whose relative dates must read natively needs the locale import *and* a `calendar`\n * config passed as the third argument.\n *\n * Type your dictionary as `TranslationDictionary` to turn a typo or a key removed in a later major\n * into a compile error. A **partial dictionary is safe**: any key you leave out renders the English\n * copy that ships inline at each call site, never a raw dotted path — so there is no need to\n * translate everything before shipping a language.\n *\n * Reactivity goes through `i18n.state`, a `StateStore`. `setLanguage()` returns nothing — the new\n * `t` is published to that store, which the provider subscribes to.\n */\nexport class Streami18n extends CoreStreami18n<TranslationCatalog, BundledKey> {\n  constructor(options: Streami18nOptions = {}) {\n    super({\n      ...options,\n      // Merged, not replaced. Spreading `options` over a literal would let an integrator supplying\n      // one entry silently drop the SDK's own bundled data, which then renders as raw keys.\n      runtimeDefaults: { ...runtimeDefaults, ...options.runtimeDefaults },\n    });\n  }\n}\n"],"names":["CoreStreami18n"],"mappings":";;;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;AACG,MAAO,UAAW,SAAQA,YAA8C,CAAA;AAC5E,IAAA,WAAA,CAAY,UAA6B,EAAE,EAAA;AACzC,QAAA,KAAK,CAAC;AACJ,YAAA,GAAG,OAAO;;;YAGV,eAAe,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,eAAe,EAAE;AACpE,SAAA,CAAC;IACJ;AACD;;;;"}