agora-ui-foundation 1.0.0

package/lib/components/Icon-text/index.css

@@ -0,0 +1,35 @@
+.fcr-icon-text {
+  display: flex;
+}
+
+.fcr-icon-text-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.fcr-icon-text__text {
+  margin-left: 4px;
+  font-family: 'Helvetica Neue';
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-icon-text__text--small {
+  font-size: 10px;
+  line-height: 10px;
+  font-weight: 300;
+}
+
+.fcr-icon-text__text--large {
+  line-height: 17px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.fcr-icon-text__text--medium {
+  line-height: 14px;
+  font-size: 12px;
+  font-weight: 400;
+}

package/lib/components/Icon-text/index.d.ts

@@ -0,0 +1,25 @@
+import React, { CSSProperties } from 'react';
+import './index.css';
+import { FcrIconType } from '../icon/type';
+import { FcrIconProps } from '../icon';
+export interface IconTextProps {
+    icon: FcrIconType;
+    styles?: CSSProperties;
+    fontSize?: 'small' | 'medium' | 'large';
+    colors?: FcrIconProps['colors'];
+    txt?: string;
+    iconTransform?: boolean;
+    classnames?: {
+        [key: string]: boolean;
+    };
+    /**
+     * 支持点击
+     */
+    enable?: boolean;
+    onClick?: () => void;
+    /**
+     * icon 和 text 换顺序
+     */
+    iconReverse?: boolean;
+}
+export declare const IconText: React.FC<React.PropsWithChildren<IconTextProps>>;

package/lib/components/Icon-text/index.js

@@ -0,0 +1,78 @@
+"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.iterator.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/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconText = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _icon = require("../icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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; }
+var IconText = exports.IconText = function IconText(_ref) {
+  var styles = _ref.styles,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 'large' : _ref$fontSize,
+    icon = _ref.icon,
+    colors = _ref.colors,
+    txt = _ref.txt,
+    transform = _ref.iconTransform,
+    classnames = _ref.classnames,
+    enable = _ref.enable,
+    _onClick = _ref.onClick,
+    iconReverse = _ref.iconReverse;
+  var cls = (0, _classnames["default"])('fcr-icon-text');
+  var spanCls = (0, _classnames["default"])('fcr-icon-text__text', _objectSpread({
+    'fcr-icon-text__text--small': fontSize === 'small',
+    'fcr-icon-text__text--medium': fontSize === 'medium',
+    'fcr-icon-text__text--large': fontSize === 'large'
+  }, classnames));
+  var text = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: spanCls,
+      children: txt
+    });
+  }, [txt]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    style: _objectSpread({}, styles),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: 'fcr-icon-text-wrapper',
+      children: [iconReverse && text, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        style: _objectSpread({}, transform && {
+          transform: 'rotate(180deg)'
+        }),
+        type: icon,
+        colors: colors,
+        size: fontSize === 'small' ? 10 : 24,
+        onClick: function onClick() {
+          if (enable) {
+            _onClick && _onClick();
+          }
+        }
+      }), !iconReverse && text]
+    })
+  });
+};

package/lib/components/Icon-text/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IconText, IconTextProps } from '.';
+declare const meta: Meta<typeof IconText>;
+export declare const Doc: (props: IconTextProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/Icon-text/index.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Doc = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ = require(".");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/IconText',
+  tags: ['autodocs'],
+  component: _.IconText,
+  args: {
+    styles: {
+      display: 'flex'
+    }
+  },
+  argTypes: {}
+};
+var Doc = exports.Doc = function Doc(props) {
+  var styles = props.styles;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    basicVisible = _useState2[0],
+    setBasicVisible = _useState2[1];
+  var handleChange = function handleChange(val) {
+    if (!val) {
+      setBasicVisible(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (!basicVisible) {
+      var timerId = setTimeout(function () {
+        setBasicVisible(true);
+        clearTimeout(timerId);
+      }, 2 * 1000);
+    }
+  }, [basicVisible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: 50,
+      border: 'solid 0.5px #e5e7eb'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Basic:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.IconText, {
+        icon: _type.FcrIconType.FCR_SETTING_NONE,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        },
+        txt: "\u5168\u4F53\u7981\u8A00"
+      })]
+    })
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/action-bar/board/index.d.ts

@@ -0,0 +1,4 @@
+export declare const Board: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/board/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Board = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+var Board = exports.Board = function Board(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var handleClick = function handleClick() {};
+  var icon = true ? _type.FcrIconType.FCR_WHITEBOARD_ON : _type.FcrIconType.FCR_WHITEBOARD;
+  var title = 'Board';
+  var tooltip = 'Board';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: icon,
+      title: title,
+      onClick: handleClick,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/breakout-room/index.d.ts

@@ -0,0 +1,4 @@
+export declare const BreakoutRoom: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/breakout-room/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreakoutRoom = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+var BreakoutRoom = exports.BreakoutRoom = function BreakoutRoom(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = 'BreakoutRoom';
+  var tooltip = 'BreakoutRoom';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_V2_BREAKROOM,
+      title: title,
+      onClick: function onClick() {},
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/chat/index.css

@@ -0,0 +1,67 @@
+.fcr-action-bar-chat {
+  position: relative;
+}
+.fcr-chatroom-tooltip-content {
+  display: flex;
+  gap: 12px;
+  position: relative;
+}
+.fcr-chatroom-tooltip-content-close {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--fcr_cornerradius_round);
+  right: -7px;
+  top: -9px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-chatroom-tooltip-content-close:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-chatroom-tooltip-content-from {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+}
+.fcr-chatroom-tooltip-content-from span {
+  font-weight: 600;
+}
+.fcr-chatroom-tooltip-content-from,
+.fcr-chatroom-tooltip-content-msg {
+  text-align: left;
+}
+.fcr-chatroom-tooltip-content-msg {
+  padding-top: 5px;
+  color: var(--fcr_ui_scene_icontext1);
+
+  font-size: 13px;
+  line-height: 17px;
+}
+.fcr-chatroom-tooltip {
+  max-width: 450px;
+}
+
+.fcr-action-bar-chat-wrapper {
+  position: relative;
+}
+.fcr-action-bar-chat-unread-count {
+  border-radius: var(--fcr_cornerradius_xs);
+  border-color: var(--fcr_web_ui_scene_fill2);
+  border-style: solid;
+  border-width: 2px;
+  height: 14px;
+  line-height: 14px;
+  background: var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_white10);
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 12px;
+  padding: 0 4px;
+  box-sizing: content-box;
+  z-index: 1;
+}

package/lib/components/action-bar/chat/index.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+export declare const Chat: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/chat/index.js

@@ -0,0 +1,134 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chat = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _i18n = require("../../../i18n");
+var _avatar = require("../../avatar");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+require("./index.css");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var Chat = exports.Chat = function Chat(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var title = t('fmt_chat_window_title');
+  var tooltip = t('fmt_chat_window_title');
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipVisible = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    chatTooltipVisible = _useState4[0],
+    setChatTooltipVisible = _useState4[1];
+  var handleTooltipVisibleChange = function handleTooltipVisibleChange(visible) {
+    if (visible && chatTooltipVisible) {
+      setTooltipVisible(false);
+    } else {
+      setTooltipVisible(visible);
+    }
+  };
+  var handleChatTooltipVisibleChange = function handleChatTooltipVisibleChange(visible) {
+    if (visible && tooltipVisible) {
+      setTooltipVisible(false);
+    }
+    setChatTooltipVisible(visible);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-action-bar-chat-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-chat-unread-count",
+      children: "99"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      onVisibleChange: handleChatTooltipVisibleChange,
+      overlayClassName: "fcr-chatroom-tooltip",
+      overlayInnerStyle: {
+        padding: '15px 12px',
+        background: 'var(--fcr_mobile_ui_scene_color_popup_fill1)',
+        border: "1px solid var(--fcr_ui_scene_line2)",
+        boxShadow: 'none'
+      },
+      arrowContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        colors: {
+          iconPrimary: 'var(--fcr_mobile_ui_scene_color_popup_fill1)',
+          iconSecondary: 'var(--fcr_ui_scene_line2)'
+        },
+        type: _type.FcrIconType.FCR_TOOLTIP_ARROW,
+        size: 16
+      }),
+      visible: chatTooltipVisible,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrChatroomTooltipContent, {
+        onClick: function onClick() {},
+        message: null
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        onVisibleChange: handleTooltipVisibleChange,
+        visible: tooltipVisible,
+        content: tooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+          id: id,
+          order: order,
+          className: "fcr-action-bar-chat",
+          icon: _type.FcrIconType.FCR_CHAT2,
+          title: title,
+          iconColors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          }
+        })
+      })
+    })]
+  });
+};
+var FcrChatroomTooltipContent = function FcrChatroomTooltipContent(_ref2) {
+  var message = _ref2.message,
+    onClick = _ref2.onClick;
+  var transI18n = (0, _i18n.useI18n)();
+  var isPrivateMessage = false;
+  var msg = '这是什么意思？这是什么意思？是好ajskajsajslkajslajsajshakjs是这是什么意思？这是什么意思？是好ajskajsajslkajslajsajshakjs...';
+  var nickName = 'aaa';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-chatroom-tooltip-content",
+    onClick: onClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-chatroom-tooltip-content-close",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_CLOSE,
+        size: 10,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+      size: 32,
+      textSize: 15,
+      nickName: nickName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-chatroom-tooltip-content-text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-chatroom-tooltip-content-from",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [transI18n('fmt_chats_label_from'), " \xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: nickName
+          })]
+        }), isPrivateMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: "fcr-chatroom-tooltip-content-from-private",
+          children: ["\xA0(", transI18n('fcr_chat_label_private'), ")"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-chatroom-tooltip-content-msg",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: msg
+        })
+      })]
+    })]
+  });
+};

package/lib/components/action-bar/device/index.css

@@ -0,0 +1,149 @@
+.fcr-action-bar-device {
+  border-radius: var(--fcr_cornerradius_s);
+  position: relative;
+  width: 71px;
+  cursor: pointer;
+}
+.fcr-action-bar-device:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+.fcr-action-bar-device-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.fcr-action-bar-device-inner .fcr-microphone path:first-of-type {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-action-bar-device-inner .fcr-microphone stop:nth-of-type(1),
+.fcr-action-bar-device-inner .fcr-microphone stop:nth-of-type(2) {
+  stop-color: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-action-bar-device-text {
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 12px;
+  font-size: 12px;
+  text-align: center;
+  font-weight: 400;
+}
+.fcr-action-bar-device-extra {
+  border-radius: var(--fcr_cornerradius_xs);
+  position: absolute;
+  right: 3px;
+  top: 3px;
+  width: 18px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-action-bar-device-extra:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+.fcr-action-bar-device-extra:hover svg {
+  transform: translateY(-3px);
+  transition: all 0.2s;
+}
+
+.fcr-action-bar--device-popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  width: 245px !important;
+  text-align: left !important;
+}
+
+.fcr-device-popover-content-device {
+  padding: 8px 10px;
+}
+.fcr-device-popover-content-device:not(:first-child) {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+.fcr-device-popover-content-device-label {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  line-height: 32px;
+  padding-left: 13px;
+}
+.fcr-device-popover-content-device-options {
+  margin-top: 8px;
+}
+.fcr-device-popover-content-device-options .fcr-radio {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 32px;
+  width: 100%;
+  padding: 0 6px;
+  transition: all 0.2s ease;
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover .fcr-radio-label {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-device-options .fcr-radio:hover .fcr-radio-inner svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner {
+  width: 14px;
+  height: 14px;
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner svg {
+  width: 14px;
+  height: 14px;
+}
+.fcr-device-popover-content-device-options .fcr-radio-inner svg path {
+  fill: var(--fcr_ui_scene_icontext1);
+  transition: all 0.1s ease;
+}
+.fcr-device-popover-content-device-options .fcr-radio-label {
+  padding-left: 8px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 13px;
+  line-height: 100%;
+  transition: all 0.1s ease;
+}
+.fcr-device-popover-content-more {
+  border-top-width: 1px;
+  border-top-style: solid;
+  padding: 8px 10px;
+}
+.fcr-device-popover-content-more-item {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 32px;
+  width: 100%;
+  padding: 4px 6px 4px 36px;
+  font-size: 13px;
+  line-height: 100%;
+  color: var(--fcr_ui_scene_icontext1, #373C42);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.fcr-device-popover-content-more-item.contain-icon {
+  padding: 4px 6px;
+}
+.fcr-device-popover-content-more-item:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-device-popover-content-more-item:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-device-popover-content-more-item svg {
+  flex-shrink: 0;
+}
+.fcr-device-popover-content-more-item path {
+  fill: var(--fcr_ui_scene_icontext5);
+  transition: all 0.2s ease;
+}
+.fcr-device-popover-content-more-item span {
+  min-width: 0;
+  overflow: hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+}

package/lib/components/action-bar/device/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import './index.css';
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled, volume, }: {
+    size?: number | undefined;
+    micEnabled?: boolean | undefined;
+    volume?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MicrophoneDevice: FC;
+export declare const CameraDevice: FC;