@stream-io/video-react-sdk 1.40.1 → 1.41.0

package/dist/src/core/components/StreamVideo/StreamVideo.d.ts

@@ -1,6 +1,6 @@
 import { StreamVideoProps } from '@stream-io/video-react-bindings';
 import { PropsWithChildren } from 'react';
 export declare const StreamVideo: {
-    (props: PropsWithChildren<StreamVideoProps>): import("react/jsx-runtime").JSX.Element;
+    (props: PropsWithChildren<StreamVideoProps>): import("react").JSX.Element;
     displayName: string;
 };

package/dist/src/core/components/Video/Video.d.ts

@@ -57,6 +57,6 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
     };
 };
 export declare const Video: {
-    ({ enabled, mirror, trackType, participant, className, VideoPlaceholder, PictureInPicturePlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ enabled, mirror, trackType, participant, className, VideoPlaceholder, PictureInPicturePlaceholder, refs, ...rest }: VideoProps): import("react").JSX.Element | null;
     displayName: string;
 };

package/dist/src/embedded/EmbeddedClientProvider.d.ts

@@ -18,4 +18,4 @@ export interface EmbeddedClientProviderProps {
  * Shared provider wrapper for embedded components.
  * Handles client/call initialization and wraps children with all necessary providers.
  */
-export declare const EmbeddedClientProvider: ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, onError, layout, theme, children, }: EmbeddedClientProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmbeddedClientProvider: ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, onError, layout, theme, children, }: EmbeddedClientProviderProps) => import("react").JSX.Element;

package/dist/src/embedded/call/CallControls.d.ts

@@ -5,5 +5,5 @@ interface CallControlsProps {
 /**
  * Renders the active call control bar
  */
-export declare const CallControls: ({ showParticipants, onToggleParticipants, }: CallControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CallControls: ({ showParticipants, onToggleParticipants, }: CallControlsProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/call/CallHeader.d.ts

@@ -1,4 +1,4 @@
 /**
  * Renders the call header bar with elapsed time and leave/end call button.
  */
-export declare const CallHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const CallHeader: () => import("react").JSX.Element;

package/dist/src/embedded/call/CallLayout.d.ts

@@ -1,4 +1,4 @@
 /**
  * CallLayout renders the active call experience with layout, controls and sidebar.
  */
-export declare const CallLayout: () => import("react/jsx-runtime").JSX.Element;
+export declare const CallLayout: () => import("react").JSX.Element;

package/dist/src/embedded/call/CallStateRouter.d.ts

@@ -1,4 +1,4 @@
 /**
  * CallStateRouter is the state decider component that manages view state transitions.
  */
-export declare const CallStateRouter: () => import("react/jsx-runtime").JSX.Element;
+export declare const CallStateRouter: () => import("react").JSX.Element;

package/dist/src/embedded/call/EmbeddedCall.d.ts

@@ -3,4 +3,4 @@ import type { EmbeddedMeetingProps } from '../types';
  * Drop-in video call component that renders a lobby, active call,
  * and post-call feedback screen. Handles client and call setup internally.
  */
-export declare const EmbeddedCall: ({ children, ...props }: EmbeddedMeetingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmbeddedCall: ({ children, ...props }: EmbeddedMeetingProps) => import("react").JSX.Element;

package/dist/src/embedded/context/ConfigurationContext.d.ts

@@ -4,7 +4,7 @@ export interface EmbeddedConfiguration {
     layout?: LayoutOption;
     onError?: (error: any) => void;
 }
-export declare const ConfigurationProvider: ({ children, layout, onError, }: PropsWithChildren<EmbeddedConfiguration>) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfigurationProvider: ({ children, layout, onError, }: PropsWithChildren<EmbeddedConfiguration>) => import("react").JSX.Element;
 /**
  * Hook to access embedded configuration settings.
  */

package/dist/src/embedded/livestream/EmbeddedLivestream.d.ts

@@ -2,4 +2,4 @@ import type { EmbeddedLivestreamProps } from '../types';
 /**
  * Drop-in livestream component. Renders host or viewer UI based on permissions.
  */
-export declare const EmbeddedLivestream: ({ children, ...props }: EmbeddedLivestreamProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmbeddedLivestream: ({ children, ...props }: EmbeddedLivestreamProps) => import("react").JSX.Element;

package/dist/src/embedded/livestream/LivestreamUI.d.ts

@@ -1 +1 @@
-export declare const LivestreamUI: () => import("react/jsx-runtime").JSX.Element;
+export declare const LivestreamUI: () => import("react").JSX.Element;

package/dist/src/embedded/livestream/host/HostLayout.d.ts

@@ -4,4 +4,4 @@ export type HostViewProps = {
     onGoLive: () => void;
     onStopLive: () => void;
 };
-export declare const HostLayout: ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }: HostViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HostLayout: ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }: HostViewProps) => import("react").JSX.Element;

package/dist/src/embedded/livestream/host/HostStateRouter.d.ts

@@ -1 +1 @@
-export declare const HostStateRouter: () => import("react/jsx-runtime").JSX.Element;
+export declare const HostStateRouter: () => import("react").JSX.Element;

package/dist/src/embedded/livestream/viewer/ViewerLayout.d.ts

@@ -1 +1 @@
-export declare const ViewerLayout: () => import("react/jsx-runtime").JSX.Element;
+export declare const ViewerLayout: () => import("react").JSX.Element;

package/dist/src/embedded/livestream/viewer/ViewerLobby.d.ts

@@ -1,4 +1,4 @@
 export type ViewerLobbyProps = {
     onJoin: () => Promise<void>;
 };
-export declare const ViewerLobby: ({ onJoin }: ViewerLobbyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewerLobby: ({ onJoin }: ViewerLobbyProps) => import("react").JSX.Element;

package/dist/src/embedded/livestream/viewer/ViewerStateRouter.d.ts

@@ -1 +1 @@
-export declare const ViewerStateRouter: () => import("react/jsx-runtime").JSX.Element;
+export declare const ViewerStateRouter: () => import("react").JSX.Element;

package/dist/src/embedded/shared/BlurToggleButton/BlurToggleButton.d.ts

@@ -1,2 +1,2 @@
-export declare const BlurToggleButton: () => import("react/jsx-runtime").JSX.Element | null;
-export declare const CameraMenuWithBlur: () => import("react/jsx-runtime").JSX.Element;
+export declare const BlurToggleButton: () => import("react").JSX.Element | null;
+export declare const CameraMenuWithBlur: () => import("react").JSX.Element;

package/dist/src/embedded/shared/CallFeedback/CallEndedScreen.d.ts

@@ -2,5 +2,5 @@ interface CallEndedScreenProps {
     onJoin?: () => void;
     onFeedback: () => void;
 }
-export declare const CallEndedScreen: ({ onJoin, onFeedback, }: CallEndedScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CallEndedScreen: ({ onJoin, onFeedback, }: CallEndedScreenProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/CallFeedback/CallFeedback.d.ts

@@ -1,4 +1,4 @@
 export interface CallFeedbackProps {
     onJoin?: () => void;
 }
-export declare const CallFeedback: ({ onJoin }: CallFeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CallFeedback: ({ onJoin }: CallFeedbackProps) => import("react").JSX.Element;

package/dist/src/embedded/shared/CallFeedback/RatingScreen.d.ts

@@ -1,5 +1,5 @@
 interface RatingScreenProps {
     onSubmit: (rating: number, message: string) => void;
 }
-export declare const RatingScreen: ({ onSubmit }: RatingScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RatingScreen: ({ onSubmit }: RatingScreenProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/CallFeedback/StarRating.d.ts

@@ -2,5 +2,5 @@ interface StarRatingProps {
     value: number;
     onChange: (rating: number) => void;
 }
-export declare const StarRating: ({ value, onChange }: StarRatingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StarRating: ({ value, onChange }: StarRatingProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/CallFeedback/ThankYouScreen.d.ts

@@ -1 +1 @@
-export declare const ThankYouScreen: () => import("react/jsx-runtime").JSX.Element;
+export declare const ThankYouScreen: () => import("react").JSX.Element;

package/dist/src/embedded/shared/ConnectionNotification/ConnectionNotification.d.ts

@@ -1 +1 @@
-export declare const ConnectionNotification: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const ConnectionNotification: () => import("react").JSX.Element | null;

package/dist/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.d.ts

@@ -1 +1 @@
-export declare const EmbeddedParticipantViewUI: () => import("react/jsx-runtime").JSX.Element;
+export declare const EmbeddedParticipantViewUI: () => import("react").JSX.Element;

package/dist/src/embedded/shared/JoinError/JoinError.d.ts

@@ -1,5 +1,5 @@
 interface JoinErrorProps {
     onJoin: () => void;
 }
-export declare const JoinError: ({ onJoin }: JoinErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const JoinError: ({ onJoin }: JoinErrorProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/Lobby/DeviceControls.d.ts

@@ -1,5 +1,5 @@
 interface DeviceControlsProps {
     isVideoEnabled: boolean;
 }
-export declare const DeviceControls: ({ isVideoEnabled }: DeviceControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeviceControls: ({ isVideoEnabled }: DeviceControlsProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/Lobby/DisabledDeviceButton.d.ts

@@ -2,5 +2,5 @@ interface DisabledDeviceButtonProps {
     icon: string;
     label: string;
 }
-export declare const DisabledDeviceButton: ({ icon, label, }: DisabledDeviceButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledDeviceButton: ({ icon, label, }: DisabledDeviceButtonProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/Lobby/Lobby.d.ts

@@ -6,5 +6,5 @@ interface LobbyProps {
 /**
  * Lobby component - Device setup screen before joining a call.
  */
-export declare const Lobby: ({ onJoin, title, joinLabel }: LobbyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Lobby: ({ onJoin, title, joinLabel }: LobbyProps) => import("react").JSX.Element;
 export {};

package/dist/src/embedded/shared/Lobby/ToggleCameraButton.d.ts

@@ -1 +1 @@
-export declare const ToggleCameraButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleCameraButton: () => import("react").JSX.Element;

package/dist/src/embedded/shared/Lobby/ToggleMicButton.d.ts

@@ -1 +1 @@
-export declare const ToggleMicButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleMicButton: () => import("react").JSX.Element;

package/dist/src/embedded/shared/Lobby/VideoPreviewFallbacks.d.ts

@@ -1,2 +1,2 @@
-export declare const DisabledVideoPreview: () => import("react/jsx-runtime").JSX.Element;
-export declare const NoCameraPreview: () => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledVideoPreview: () => import("react").JSX.Element;
+export declare const NoCameraPreview: () => import("react").JSX.Element;

package/dist/src/embedded/shared/ViewersCount/ViewersCount.d.ts

@@ -1,5 +1,5 @@
 interface ViewersCountProps {
     count: number;
 }
-export declare const ViewersCount: ({ count }: ViewersCountProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewersCount: ({ count }: ViewersCountProps) => import("react").JSX.Element;
 export {};

package/dist/src/hooks/useRequestPermission.d.ts

@@ -1,5 +1,5 @@
-import { OwnCapability } from '@stream-io/video-client';
-export declare const useRequestPermission: (permission: OwnCapability) => {
+import { RequestPermissionRequestPermissionsEnum } from '@stream-io/video-client';
+export declare const useRequestPermission: (permission: RequestPermissionRequestPermissionsEnum) => {
     requestPermission: () => Promise<boolean>;
     hasPermission: boolean;
     canRequestPermission: boolean;

package/dist/src/wrappers/LivestreamPlayer/LivestreamPlayer.d.ts

@@ -34,4 +34,4 @@ export type LivestreamPlayerProps = {
      */
     onError?: (error: any) => void;
 };
-export declare const LivestreamPlayer: (props: PropsWithChildren<LivestreamPlayerProps>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const LivestreamPlayer: (props: PropsWithChildren<LivestreamPlayerProps>) => import("react").JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.40.1",
+  "version": "1.41.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -44,10 +44,10 @@
     "*.css"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.27.19",
-    "@stream-io/video-client": "1.56.0",
-    "@stream-io/video-filters-web": "0.8.5",
-    "@stream-io/video-react-bindings": "1.19.1",
+    "@floating-ui/react": "^0.27.20",
+    "@stream-io/video-client": "1.58.0",
+    "@stream-io/video-filters-web": "0.8.6",
+    "@stream-io/video-react-bindings": "1.20.0",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
     "react-chartjs-2": "^5.3.1"
@@ -60,16 +60,16 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@stream-io/audio-filters-web": "^0.10.3",
+    "@stream-io/audio-filters-web": "^0.10.4",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-styling": "^1.15.0",
-    "@types/node": "^25.9.3",
-    "@types/react": "~19.2.15",
-    "@types/react-dom": "~19.2.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "@stream-io/video-styling": "^1.15.1",
+    "@types/node": "^25.9.5",
+    "@types/react": "~19.2.18",
+    "@types/react-dom": "~19.2.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "rimraf": "^6.1.3",
-    "rollup": "^4.60.4",
+    "rollup": "^4.62.4",
     "typescript": "^6.0.3"
   }
 }

package/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -106,14 +106,12 @@ const useTrackFramesPerSecond = (call: Call | undefined) => {
     }
 
     let previousSnapshot:
-      | (MediaStreamTrackVideoStats & { capturedAt: number })
-      | undefined;
+      (MediaStreamTrackVideoStats & { capturedAt: number }) | undefined;
     let previousTrackId: string | undefined;
 
     const intervalId = setInterval(() => {
       const track = rootMediaStream?.getVideoTracks()[0] as
-        | MediaStreamTrackWithStats
-        | undefined;
+        MediaStreamTrackWithStats | undefined;
 
       const stats = track?.stats;
       if (!track || !stats) {

package/src/components/Button/CompositeButton.tsx

@@ -29,7 +29,7 @@ export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
 export const CompositeButton = forwardRef<
   HTMLDivElement,
   IconButtonWithMenuProps
->(function CompositeButton(
+>(function CompositeButtonRender(
   {
     disabled,
     caption,
@@ -100,7 +100,7 @@ export const CompositeButton = forwardRef<
 const DefaultToggleMenuButton = forwardRef<
   HTMLButtonElement,
   ToggleMenuButtonProps
->(function DefaultToggleMenuButton({ menuShown }, ref) {
+>(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
   return (
     <IconButton
       className={clsx('str-video__menu-toggle-button', {

package/src/components/Button/IconButton.tsx

@@ -9,7 +9,7 @@ export type ButtonWithIconProps = {
 } & ComponentProps<'button'> &
   IconProps;
 
-export const IconButton = forwardRef(function IconButton(
+export const IconButton = forwardRef(function IconButtonRender(
   props: ButtonWithIconProps,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {

package/src/components/CallControls/CallStatsButton.tsx

@@ -19,7 +19,7 @@ export const CallStatsButton = () => (
 const ToggleMenuButton = forwardRef<
   HTMLDivElement,
   ToggleMenuButtonProps<HTMLDivElement> & CallStatsButtonProps
->(function ToggleMenuButton(props, ref) {
+>(function ToggleMenuButtonRender(props, ref) {
   const { t } = useI18n();
   const { caption, menuShown } = props;
 

package/src/components/CallControls/CancelCallButton.tsx

@@ -49,7 +49,7 @@ const EndCallMenu = (props: {
 const CancelCallToggleMenuButton = forwardRef<
   HTMLButtonElement,
   ToggleMenuButtonProps
->(function CancelCallToggleMenuButton({ menuShown }, ref) {
+>(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
   const { t } = useI18n();
   return (
     <WithTooltip title={t('Leave call')} tooltipDisabled={menuShown}>

package/src/components/CallControls/ReactionsButton.tsx

@@ -66,7 +66,7 @@ export const ReactionsButton = ({
 const ToggleReactionsMenuButton = forwardRef<
   HTMLDivElement,
   ToggleMenuButtonProps
->(function ToggleReactionsMenuButton({ menuShown }, ref) {
+>(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
   const { t } = useI18n();
   return (
     <WithTooltip title={t('Reactions')} tooltipDisabled={menuShown}>

package/src/components/CallControls/RecordCallButton.tsx

@@ -62,7 +62,7 @@ const RecordEndConfirmation = (props: PropsWithErrorHandler) => {
 const ToggleEndRecordingMenuButton = forwardRef<
   HTMLDivElement,
   ToggleMenuButtonProps
->(function ToggleEndRecordingMenuButton(props, ref) {
+>(function ToggleEndRecordingMenuButtonRender(props, ref) {
   return (
     <CompositeButton
       ref={ref}

package/src/components/CallControls/ScreenShareButton.tsx

@@ -1,4 +1,7 @@
-import { OwnCapability } from '@stream-io/video-client';
+import {
+  OwnCapability,
+  RequestPermissionRequestPermissionsEnum,
+} from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
@@ -29,7 +32,7 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
     useCallStateHooks();
   const isSomeoneScreenSharing = useHasOngoingScreenShare();
   const { hasPermission, requestPermission, isAwaitingPermission } =
-    useRequestPermission(OwnCapability.SCREENSHARE);
+    useRequestPermission(RequestPermissionRequestPermissionsEnum.SCREENSHARE);
 
   const callSettings = useCallSettings();
   const isScreenSharingAllowed = callSettings?.screensharing.enabled;

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,4 +1,8 @@
-import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import {
+  OwnCapability,
+  RequestPermissionRequestPermissionsEnum,
+  SfuModels,
+} from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
@@ -139,7 +143,7 @@ export const ToggleAudioPublishingButton = (
   } = props;
 
   const { hasPermission, requestPermission, isAwaitingPermission } =
-    useRequestPermission(OwnCapability.SEND_AUDIO);
+    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_AUDIO);
 
   const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
   const {

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -5,7 +5,11 @@ import {
   UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
-import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import {
+  OwnCapability,
+  RequestPermissionRequestPermissionsEnum,
+  SfuModels,
+} from '@stream-io/video-client';
 import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
@@ -137,7 +141,7 @@ export const ToggleVideoPublishingButton = (
   } = props;
 
   const { hasPermission, requestPermission, isAwaitingPermission } =
-    useRequestPermission(OwnCapability.SEND_VIDEO);
+    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_VIDEO);
 
   const { useCameraState, useCallSettings, useLocalParticipant } =
     useCallStateHooks();

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -21,7 +21,7 @@ type CallParticipantListingItemProps = {
   DisplayName?: ComponentType<{ participant: StreamVideoParticipant }>;
 };
 export const CallParticipantListingItem = memo(
-  function CallParticipantListingItem({
+  function CallParticipantListingItemRender({
     participant,
     DisplayName = DefaultDisplayName,
   }: CallParticipantListingItemProps) {
@@ -114,7 +114,7 @@ const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  function ToggleButton(props, ref) {
+  function ToggleButtonRender(props, ref) {
     return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
   },
 );

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -226,7 +226,7 @@ const BlockedUsersSearchResults = ({
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  function ToggleButton(props, ref) {
+  function ToggleButtonRender(props, ref) {
     return <IconButton enabled={props.menuShown} icon="filter" ref={ref} />;
   },
 );

package/src/components/DeviceSettings/DeviceSettings.tsx

@@ -41,7 +41,7 @@ const Menu = () => {
 const ToggleDeviceSettingsMenuButton = forwardRef<
   HTMLButtonElement,
   ToggleMenuButtonProps
->(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
+>(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
   const { t } = useI18n();
   return (
     <IconButton

package/src/components/Permissions/PermissionRequests.tsx

@@ -126,7 +126,7 @@ export type PermissionRequestListProps = ComponentProps<'div'> & {
 export const PermissionRequestList = forwardRef<
   HTMLDivElement,
   PermissionRequestListProps
->(function PermissionRequestList(props, ref) {
+>(function PermissionRequestListRender(props, ref) {
   const { permissionRequests, handleUpdatePermission, ...rest } = props;
 
   const { t } = useI18n();

package/src/core/components/Audio/Audio.tsx

@@ -18,7 +18,7 @@ export type AudioProps = ComponentPropsWithoutRef<'audio'> & {
   trackType?: AudioTrackType;
 };
 
-export const Audio = memo(function Audio({
+export const Audio = memo(function AudioRender({
   participant,
   trackType = 'audioTrack',
   ...rest

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -55,7 +55,7 @@ export type DefaultParticipantViewUIProps = {
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  function ToggleButton(props, ref) {
+  function ToggleButtonRender(props, ref) {
     return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
   },
 );

package/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx

@@ -6,6 +6,8 @@ import {
   hasScreenShareAudio,
   hasVideo,
   OwnCapability,
+  UpdateUserPermissionsRequestGrantPermissionsEnum,
+  UpdateUserPermissionsRequestRevokePermissionsEnum,
 } from '@stream-io/video-client';
 import { useParticipantViewContext } from './ParticipantViewContext';
 import {
@@ -41,19 +43,21 @@ export const ParticipantActionsContextMenu = () => {
   const muteScreenShareAudio = () =>
     call?.muteUser(userId, 'screenshare_audio');
 
-  const grantPermission = (permission: string) => () => {
-    call?.updateUserPermissions({
-      user_id: userId,
-      grant_permissions: [permission],
-    });
-  };
+  const grantPermission =
+    (permission: UpdateUserPermissionsRequestGrantPermissionsEnum) => () => {
+      call?.updateUserPermissions({
+        user_id: userId,
+        grant_permissions: [permission],
+      });
+    };
 
-  const revokePermission = (permission: string) => () => {
-    call?.updateUserPermissions({
-      user_id: userId,
-      revoke_permissions: [permission],
-    });
-  };
+  const revokePermission =
+    (permission: UpdateUserPermissionsRequestRevokePermissionsEnum) => () => {
+      call?.updateUserPermissions({
+        user_id: userId,
+        revoke_permissions: [permission],
+      });
+    };
 
   const toggleParticipantPin = () => {
     if (pin) {