agora-ui-foundation 3.2.0 → 3.3.0

package/lib/components/participants/index.js

@@ -49,7 +49,8 @@ var FcrParticipants = exports.FcrParticipants = function FcrParticipants(props)
     _props$perspectiveTyp = props.perspectiveType,
     perspectiveType = _props$perspectiveTyp === void 0 ? 'host' : _props$perspectiveTyp,
     userRenderer = props.userRenderer,
-    onInvite = props.onInvite;
+    onInvite = props.onInvite,
+    hasPinnedStream = props.hasPinnedStream;
   var userRowRenderer = function userRowRenderer(renderProps) {
     var key = renderProps.key,
       parent = renderProps.parent,
@@ -61,11 +62,16 @@ var FcrParticipants = exports.FcrParticipants = function FcrParticipants(props)
       columnIndex: 0,
       rowIndex: index,
       children: function children(_ref) {
+        var _userList$index, _userList$index2;
         var measure = _ref.measure;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: style,
           onLoad: measure,
-          children: userRenderer ? userRenderer(userList[index]) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.FcrParticipant, _objectSpread(_objectSpread({}, userList[index]), {}, {
+          children: userRenderer ? userRenderer(userList[index]) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.FcrParticipant, _objectSpread(_objectSpread({
+            isPin: !!((_userList$index = userList[index]) !== null && _userList$index !== void 0 && _userList$index.isPin),
+            hasPinnedStream: hasPinnedStream
+          }, userList[index]), {}, {
+            allowedOperations: ((_userList$index2 = userList[index]) === null || _userList$index2 === void 0 ? void 0 : _userList$index2.allowedOperations) || [],
             perspectiveType: perspectiveType,
             onParticipantsButtonClick: props.toggleParticipantAction
           }))

package/lib/components/participants/index.stories.d.ts

@@ -1,6 +1,3 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { FcrParticipants } from '.';
+import { Meta } from '@storybook/react';
 declare const meta: Meta;
-type Story = StoryObj<typeof FcrParticipants>;
-export declare const Basic: Story;
 export default meta;

package/lib/components/participants/index.stories.js

@@ -1,34 +1,10 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Basic = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _ = require(".");
-var _data = require("./data");
-var _windowHeader = require("../window-header");
-var _i18n = require("../../i18n");
-var _jsxRuntime = require("react/jsx-runtime");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+exports["default"] = void 0;
 var meta = {
   title: 'Components/Participants',
   tags: ['autodocs'],
@@ -54,18 +30,4 @@ var meta = {
     }
   }
 };
-var Basic = exports.Basic = {
-  args: {
-    userList: _data.userList,
-    type: 'window',
-    perspectiveType: 'attendee',
-    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-      title: (0, _i18n.transI18n)('fmt_role_participant'),
-      type: _windowHeader.WindowType.WINDOW
-    })
-  },
-  render: function render(props) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrParticipants, _objectSpread({}, props));
-  }
-};
 var _default = exports["default"] = meta;

package/lib/components/participants/participants-more/index.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
-import { IFcrParticipantProps } from '../attendee';
+import { ParticipantsMoreActionsProps } from '../attendee';
 import './index.css';
-export declare const FcrParticipantsMoreActions: FC<IFcrParticipantProps>;
+declare const FcrParticipantsMoreActions: FC<ParticipantsMoreActionsProps>;
+export { FcrParticipantsMoreActions };

package/lib/components/participants/participants-more/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FcrParticipantsMoreActions = void 0;
-require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.is-array.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.async-iterator.filter.js");
@@ -16,156 +16,176 @@ require("core-js/modules/esnext.iterator.filter.js");
 var _dropMenu = require("../../drop-menu");
 var _icon = require("../../icon");
 var _type = require("../../icon/type");
+var _attendee = require("../attendee");
 require("./index.css");
-var _i18n = require("../../../i18n");
+var _i18next = require("i18next");
+var _cameraState = require("../../room-screen-share-state-bar/camera-state");
 var _jsxRuntime = require("react/jsx-runtime");
 var FcrParticipantsMoreActions = exports.FcrParticipantsMoreActions = function FcrParticipantsMoreActions(props) {
   var isMe = props.isMe,
     userId = props.userId,
     hasVideo = props.hasVideo,
-    _props$onParticipants = props.onParticipantsButtonClick,
-    onParticipantsButtonClick = _props$onParticipants === void 0 ? function () {} : _props$onParticipants,
-    userName = props.userName;
-  var t = (0, _i18n.useI18n)();
-  var allActions = [{
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_MOBILE_CHAT3,
-      size: 20,
-      colors: {
-        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
-      }
+    hasAudio = props.hasAudio,
+    onParticipantsButtonClick = props.onParticipantsButtonClick,
+    userName = props.userName,
+    userRole = props.userRole,
+    isPin = props.isPin,
+    hasPinnedStream = props.hasPinnedStream,
+    allowedOperations = props.allowedOperations,
+    audioDeviceType = props.audioDeviceType,
+    userType = props.userType,
+    hideActions = props.hideActions;
+  var cameraStateType = !hasVideo ? 'primary' : 'danger';
+  var allOperationMenu = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: true
     }),
-    title: t('fmt_attendies_button_privatechat'),
-    key: 'PRIVATE_CHAT',
-    type: 'primary',
+    title: (0, _i18next.t)('fmt_device_label_video_start'),
+    key: 'start_video',
+    type: cameraStateType,
+    canOperation: !hasVideo && userType !== 'phone',
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('PRIVATE_CHAT', userId);
+      onParticipantsButtonClick(_attendee.ParticipantActionType.UNMUTE_VIDEO, userId);
     },
-    role: ['host'],
     classNames: 'fcr-drop-menu-option-with-under-line'
   }, {
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_MOBILE_CAMERA2,
-      size: 20,
-      colors: {
-        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
-      }
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: true
     }),
-    title: "".concat(isMe || hasVideo ? '' : t('fmt_attendies_button_request')).concat(hasVideo ? t('fmt_device_label_video_stop') : t('fmt_device_label_video_start')),
-    key: 'toggle_video',
+    title: (0, _i18next.t)('fmt_sip_button_opencamera'),
+    key: 'request_start_video',
     type: 'primary',
+    canOperation: !hasVideo && !isMe && userType !== 'phone',
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick(hasVideo ? 'MUTE_VIDEO' : 'UNMUTE_VIDEO', userId);
+      onParticipantsButtonClick(_attendee.ParticipantActionType.UNMUTE_VIDEO, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: false
+    }),
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: (0, _i18next.t)('fmt_device_label_video_stop')
+    }),
+    key: 'stop_video',
+    type: cameraStateType,
+    canOperation: hasVideo && userType !== 'phone',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_attendee.ParticipantActionType.MUTE_VIDEO, userId);
     },
-    role: ['host', 'me'],
     classNames: 'fcr-drop-menu-option-with-under-line'
   }, {
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_FOCUSONHIM,
+      type: _type.FcrIconType.FCR_MOBILE_CHAT3,
       size: 20,
       colors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext5)'
       }
     }),
-    title: t('fmt_attendies_options_setfocus'),
-    key: 'set_as_focus_video',
-    type: 'disabled',
-    role: ['host', 'attendee'],
+    title: (0, _i18next.t)('fmt_attendies_label_privatechat'),
+    key: 'private_chat',
+    type: 'primary',
+    canOperation: !isMe && userType !== 'phone',
     onButtonClick: function onButtonClick() {
-      console.log('Remove user', userId);
+      onParticipantsButtonClick(_attendee.ParticipantActionType.PRIVATE_CHAT, userId);
     }
   }, {
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    icon: isPin ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_UNPIN,
+      size: 20
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type.FcrIconType.FCR_PINPAGE,
       size: 20,
       colors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext5)'
       }
     }),
-    title: "PIN",
+    title: isPin ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: (0, _i18next.t)('fmt_attendies_options_cancelfixed')
+    }) : hasPinnedStream ? (0, _i18next.t)('fmt_attendies_options_replacefixed') : (0, _i18next.t)('fmt_attendies_options_fixfirst'),
     key: 'pin',
-    type: 'disabled',
-    role: ['host', 'attendee', 'me'],
+    type: isPin ? 'danger' : 'primary',
+    canOperation: userType === 'normal' || userType === 'meeting-system' && hasVideo,
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('PIN', userId);
+      onParticipantsButtonClick(isPin ? _attendee.ParticipantActionType.REMOVE_PIN : _attendee.ParticipantActionType.ADD_PIN, userId);
     },
     classNames: 'fcr-drop-menu-option-with-under-line'
   }, {
-    title: t('fmt_attendies_options_sethost'),
+    title: (0, _i18next.t)('fmt_attendies_options_sethost'),
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_PINPAGE,
+      type: _type.FcrIconType.FCR_HOST2,
       size: 20,
       colors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext5)'
       }
     }),
     key: 'set_as_host',
-    role: ['host'],
+    canOperation: userRole !== _attendee.FcrUserRole.HOST && userType === 'normal',
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('SET_AS_HOST', userId);
+      onParticipantsButtonClick(_attendee.ParticipantActionType.SET_AS_HOST, userId);
     }
   }, {
-    title: t('fmt_attendies_options_setcohost'),
+    title: (0, _i18next.t)('fmt_attendies_options_setcohost'),
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_PINPAGE,
+      type: _type.FcrIconType.FCR_COHOST2,
       size: 20,
       colors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext5)'
       }
     }),
-    key: 'set_as_co-host',
-    role: ['host'],
-    type: 'disabled'
+    key: 'set_as_co_host',
+    type: 'primary',
+    canOperation: userRole !== _attendee.FcrUserRole.COHOST && userType === 'normal',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_attendee.ParticipantActionType.SET_AS_CO_HOST, userId);
+    }
   }, {
+    title: (0, _i18next.t)('fmt_attendies_options_revokecohost'),
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_RENAME,
+      type: _type.FcrIconType.FCR_PINPAGE,
       size: 20,
       colors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext5)'
       }
     }),
-    title: t('fmt_sip_button_rename'),
-    key: 'rename',
-    type: 'disabled',
-    role: ['me'],
+    key: 'revoke_co_host',
+    type: 'danger',
+    canOperation: userRole === _attendee.FcrUserRole.COHOST && userType === 'normal',
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('RENAME', userId);
-    },
-    classNames: 'fcr-drop-menu-option-with-under-line'
+      onParticipantsButtonClick(_attendee.ParticipantActionType.SET_AS_ATTENDEE, userId);
+    }
   }, {
-    title: t('fmt_attendies_options_allowlocalrecord'),
+    title: (0, _i18next.t)('fmt_modules_tips_mergevideo'),
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_PINPAGE,
+      type: _type.FcrIconType.FCR_MOBILE_CAMERA2,
       size: 20,
       colors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext5)'
       }
     }),
-    key: 'allow_record_local_video',
-    role: ['host'],
-    type: 'disabled',
+    key: 'merge_video',
+    type: 'primary',
+    canOperation: userType === 'phone',
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('ALL_RECORDING_LOCAL_VIDEO', userId);
-    },
-    classNames: 'fcr-drop-menu-option-with-under-line'
+      onParticipantsButtonClick(_attendee.ParticipantActionType.MERGE_VIDEO, userId);
+    }
   }, {
-    title: t('fmt_attendies_options_putinwaitingroom'),
+    title: (0, _i18next.t)('fmt_attendies_options_putinwaitingroom'),
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-      type: _type.FcrIconType.FCR_PINPAGE,
+      type: _type.FcrIconType.FCR_PUT_WAITING_ROOM,
       size: 20,
       colors: {
-        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+        iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
       }
     }),
     key: 'put_into_waiting_room',
-    role: ['host'],
-    type: 'disabled',
+    type: 'danger',
+    canOperation: true,
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('PUT_IN_WAITING_ROOM', userId);
-    },
-    classNames: 'fcr-drop-menu-option-with-under-line'
+      onParticipantsButtonClick(_attendee.ParticipantActionType.PUT_IN_WAITING_ROOM, userId);
+    }
   }, {
-    title: t('fmt_attendies_button_remove'),
+    title: (0, _i18next.t)('fmt_attendies_button_remove'),
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: _type.FcrIconType.FCR_SETTING_NONE,
       size: 20,
@@ -173,24 +193,24 @@ var FcrParticipantsMoreActions = exports.FcrParticipantsMoreActions = function F
         iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
       }
     }),
-    key: 'KICK_OUT',
+    key: 'kick_out',
     type: 'danger',
-    role: ['host'],
+    canOperation: true,
     onButtonClick: function onButtonClick() {
-      onParticipantsButtonClick('KICK_OUT', userId);
+      onParticipantsButtonClick(_attendee.ParticipantActionType.KICK_OUT, userId);
     }
   }];
-  var hostActions = allActions.filter(function (action) {
-    return action.role.includes('host');
-  });
-  var attendeeActions = allActions.filter(function (action) {
-    return action.role.includes('attendee');
-  });
-  var selfActions = allActions.filter(function (action) {
-    return action.role.includes('me');
-  });
-  var currentActions = props.isMe ? selfActions : props.perspectiveType === 'host' ? hostActions : attendeeActions;
+  var currentActions = Array.isArray(allowedOperations) && allowedOperations.length > 0 ? allOperationMenu.filter(function (item) {
+    return allowedOperations.includes(item.key) && item.canOperation;
+  }).filter(function (item) {
+    if (hideActions && hideActions.length) {
+      return hideActions.includes(item.key) ? false : true;
+    } else {
+      return true;
+    }
+  }) : allOperationMenu;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    className: "fcr-participants-more-dropmenu",
     title: userName,
     options: currentActions
   });

package/lib/components/radio/index.css

@@ -53,9 +53,9 @@
 }
 .fcr-radio-label {
   color: var(--fcr_ui_scene_icontext1);
-  font-size: 12px;
+  font-size: 14px;
   line-height: 12px;
-  font-weight: 300;
+  font-weight: 400;
   padding-left: 4px;
   user-select: none;
   overflow-x: hidden;

package/lib/components/room-screen-share-state-bar/camera-state/index.js

@@ -16,7 +16,8 @@ var CameraState = exports.CameraState = function CameraState(props) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
       type: isCameraMuted ? _type.FcrIconType.FCR_CAMERAOFF : _type.FcrIconType.FCR_CAMERA,
       colors: {
-        iconPrimary: isCameraMuted ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_ui_scene_black8)'
+        iconPrimary: isCameraMuted ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_web_ui_scene_mainicon1)',
+        iconSecondary: isCameraMuted ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_web_ui_scene_mainicon1)'
       },
       size: size
     })

package/lib/components/room-screen-share-state-bar/device/index.css

@@ -7,21 +7,36 @@
   width: 100%;
   height: 32px;
   border-radius: var(--fcr_cornerradius_xxs);
+  padding-left: 6px;
 }
+
 .share-action-nav__media-title {
   font-size: 12px;
   font-weight: 400;
   color: var(--fcr_ui_scene_icontext1);
   text-align: left;
 }
+
 .share-action-nav__media-list-group .fcr-radio:hover {
   background-color: var(--fcr_web_ui_scene_hover);
 }
 
 .share-action-nav__media-list-group .fcr-radio-label {
   font-weight: 500;
+  margin-left: 8px;
+  padding: 0px;
+  font-size: 13px;
+}
+
+.share-action-nav__media-list-group .fcr-radio-input-wrapper svg {
+  width: 14px;
+  height: 14px;
+}
+
+.share-action-nav__media-list-group .fcr-radio:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
 }
 
 .share-action-nav__device-setting {
   font-size: 12px;
-}
+}

package/lib/components/room-screen-share-state-bar/device/index.js

@@ -29,7 +29,8 @@ var CameraDevice = exports.CameraDevice = function CameraDevice(props) {
         icon: {
           type: isMuted ? _type.FcrIconType.FCR_CAMERAOFF : _type.FcrIconType.FCR_CAMERA,
           colors: {
-            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            iconPrimary: isMuted ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_web_ui_scene_mainicon1)',
+            iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
           },
           size: 32
         },

package/lib/components/room-screen-share-state-bar/more/index.js

@@ -27,7 +27,7 @@ var More = exports.More = function More(props) {
       content: props.morePopoverContent ? props.morePopoverContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(MorePopoverContent, {}),
       overlayInnerStyle: {
         border: 0,
-        boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+        boxShadow: 'var(--fcr_web_light_dropup_m)',
         borderRadius: 'var(--fcr_cornerradius_l)'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip

package/lib/components/room-screen-share-state-bar/share-action-nav/index.css

@@ -65,7 +65,7 @@
 .share-action-nav__popover {
   color: var(--fcr_ui_scene_icontext1);
   border: 0.5px solid var(--fcr_ui_scene_line1);
-  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  box-shadow: var(--fcr_web_light_dropup_m);
   border-radius: var(--fcr_cornerradius_l);
   background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
 }
@@ -97,6 +97,7 @@
   gap: 8px;
   padding: 6px;
   box-sizing: border-box;
+  font-size: 13px;
 }
 
 .share-action-nav__popover-option:hover {

package/lib/components/room-screen-share-state-bar/share-audio/index.css

@@ -27,6 +27,11 @@
 .share-audio-popover .fcr-radio:hover {
   background-color: var(--fcr_web_ui_scene_hover);
 }
+
+.share-audio-popover .fcr-radio:hover .fcr-radio-label {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
 .share-audio-popover .fcr-radio {
   width: 100%;
   border-radius: 4px;
@@ -41,21 +46,40 @@
 
 .share-audio-popover .fcr-radio-transparent .fcr-radio-label {
   color: var(--fcr_ui_scene_icontext1);
+  font-weight: 400;
 }
 
-.share-audio-popover
+.share-audio-popover .share-audio-options svg {
+  width: 14px;
+  height: 14px;
+}
+
+.share-audio-popover .share-audio-options .fcr-radio-transparent:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.share-audio-popover .fcr-radio-transparent:hover .fcr-radio-label,
+.share-audio-popover .fcr-radio-transparent:hover .radio-label-normal {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+/* .share-audio-popover
   .fcr-radio-transparent
   .fcr-radio-input-wrapper:has(> input:checked)
   ~ .fcr-radio-label {
   color: var(--fcr_web_ui_scene_mainicon2);
-}
+} */
 
 .share-audio-popover
   .fcr-radio-transparent
+  .share-audio-popover
+  .fcr-radio:hover
   .fcr-radio-input-wrapper
   > input:checked
-  ~ .fcr-radio-label {
-  color: var(--fcr_web_ui_scene_mainicon2);
+  ~ .fcr-radio-inner
+  svg
+  path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
 }
 
 /* .radio-label-active {

package/lib/components/room-screen-share-state-bar/share-audio/index.js

@@ -100,7 +100,7 @@ var ShareAudio = exports.ShareAudio = function ShareAudio(props) {
       overlayClassName: "share-audio-popover",
       overlayInnerStyle: {
         border: 0,
-        boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+        boxShadow: 'var(--fcr_web_light_dropup_m)',
         borderRadius: 'var(--fcr_cornerradius_l)',
         padding: '4px 6px'
       },
@@ -137,7 +137,7 @@ var ShareAudioOptions = function ShareAudioOptions(props) {
           children: t('fmt_uimanager_option_Monochannel')
         }),
         value: AudioProcessingChannel.MONO,
-        iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+        iconColor: 'var(--fcr_ui_scene_icontext1)',
         styleType: 'transparent'
       }, {
         label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -145,7 +145,7 @@ var ShareAudioOptions = function ShareAudioOptions(props) {
           children: t('fmt_uimanager_option_Stereo')
         }),
         value: AudioProcessingChannel.STEREO,
-        iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
+        iconColor: 'var(--fcr_ui_scene_icontext1)',
         styleType: 'transparent'
       }],
       onChange: function onChange(value) {

package/lib/components/state-bar/index.css

@@ -354,9 +354,9 @@
 .fcr-state-bar__meeting-info-drop .fcr-drop-menu {
   width: 100%;
   border:1px solid var(--fcr_ui_scene_line1);
-  box-shadow: 0 0 15px 0 var(--fcr_web_light_dropup_m);
-
+  box-shadow: var(--fcr_web_light_dropup_m);
 }
+
 .fcr-state-bar__meeting-info-drop .fcr-drop-menu-option-text{
     overflow: hidden;
     text-overflow: ellipsis;

package/lib/components/tabs/index.css

@@ -1,6 +1,6 @@
 .fcr-tabs {
   color: var(--fcr_ui_scene_icontext2);
-  border-radius: var(--fcr_cornerradius_l);
+  border-radius: var(--fcr_cornerradius_s);
   padding: 4px;
   font-size: 16px;
   line-height: 1;

package/lib/components/tabs/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import './index.css';
 export type TabsProps = {
     items: {
-        label: string;
+        label: string | React.ReactNode;
         key: string;
     }[];
     activeKey: string;

package/lib/components/tooltips-button/tooltip-button.css

@@ -35,14 +35,14 @@
 .frc-tooltip-button__popover {
   color: var(--fcr_ui_scene_icontext1);
   border: 0.5px solid var(--fcr_ui_scene_line1);
-  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  box-shadow: var(--fcr_web_light_dropup_l);
   border-radius: var(--fcr_cornerradius_l);
   background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
   overflow: hidden;
 }
 .frc-tooltip-button__popover  .fcr-tooltip-inner{
   border: 0;
-  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  box-shadow: var(--fcr_web_light_dropup_m);
   border-radius: var(--fcr_cornerradius_l);
   color: var(--fcr_ui_scene_icontext1);
   padding: 10px;

package/lib/components/watermark/index.css

@@ -0,0 +1,3 @@
+.fcr-watermark-wrapper {
+  height: 100%;
+}