fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/action-bar/{notification-bar → components/notification-bar}/components/virtual-image/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = VirtualImage;
-var _dome = _interopRequireDefault(require("../../dome.png"));
+var _dome = _interopRequireDefault(require("../../assets/dome.png"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function VirtualImage(props) {

package/lib/modules/action-bar/{notification-bar → components/notification-bar}/index.js

@@ -11,8 +11,6 @@ require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.map.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");
-require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");
@@ -22,7 +20,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _interpreter = _interopRequireDefault(require("./components/interpreter"));
 var _virtualImage = _interopRequireDefault(require("./components/virtual-image"));
-var _store = require("../store");
+var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
 var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(function () {

package/lib/modules/action-bar/components/participants/index.js

@@ -19,13 +19,13 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 require("./index.css");
-var _actionBarCollapesItems = require("../../action-bar-collapes-items");
+var _collapse = require("../collapse");
 var _jsxRuntime = require("react/jsx-runtime");
 var Participants = exports.Participants = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
     order = _ref.order;
   var transI18n = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_actionBarCollapesItems.actionBarCollapseContext),
+  var _useContext = (0, _react.useContext)(_collapse.actionBarCollapseContext),
     visibleList = _useContext.visibleList;
   var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
     toggleParticipants = _useContext2.toggleParticipants,

package/lib/modules/action-bar/components/placement/index.d.ts

@@ -0,0 +1,4 @@
+import { ActionBarItemPlacementProps } from '../../types';
+export declare const ActionBarItemPlacement: import("react").ForwardRefExoticComponent<ActionBarItemPlacementProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib/modules/action-bar/components/placement/index.js

@@ -0,0 +1,18 @@
+"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.ActionBarItemPlacement = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ActionBarItemPlacement = exports.ActionBarItemPlacement = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames["default"])("fcr-action-bar-".concat(props.placement)),
+    children: props.children
+  });
+});

package/lib/modules/action-bar/components/record/stop-record-dialog.d.ts

@@ -1,5 +1,3 @@
 import { PropsWithChildren } from 'react';
-export interface StopCloudRecordingProps {
-    stopCloudRecording: () => void;
-}
+import { StopCloudRecordingProps } from '../../types';
 export declare const StopCloudRecording: ({ stopCloudRecording, children, }: PropsWithChildren<StopCloudRecordingProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/screen-share/submenu.js

@@ -37,10 +37,12 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
     startScreenShare = _useContext.startScreenShare,
     hasScreenShare = _useContext.hasScreenShare,
     hasCloseWriteBoardPermission = _useContext.hasCloseWriteBoardPermission,
-    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission;
+    sharingOwnerUser = _useContext.sharingOwnerUser,
+    hasStopScreenSharePermission = _useContext.hasStopScreenSharePermission,
+    closeShareScreen = _useContext.closeShareScreen;
   var t = (0, _i18n.useI18n)();
   var hasHostPermission = [_fcrCore.FcrUserRole.HOST, _fcrCore.FcrUserRole.COHOST].includes(localUserRole);
-  var hasBoardControlPermission = boardOwnerUser && localUser.userId !== boardOwnerUser.userId && hasCloseWriteBoardPermission && hasAllowWriteBoardPermission;
+  var hasBoardControlPermission = boardOwnerUser && localUser.userId !== boardOwnerUser.userId && hasCloseWriteBoardPermission;
   // 需求变更，联席主持人也可以禁用主持人的白板，注释掉联席主持人不能禁用的逻辑
   // (FcrUserRole.HOST === localUserRole ||
   //   (FcrUserRole.COHOST === localUserRole && FcrUserRole.HOST !== boardOwnerUser?.userRole));
@@ -137,6 +139,24 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
       closeWhiteboard();
     }
   }];
+  var shareScrennControlMenus = [{
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      shape: "rounded",
+      block: true,
+      children: t('fmt_screenshare_button_disableshare', {
+        reason1: sharingOwnerUser ? (0, _truncate["default"])(sharingOwnerUser.userName, {
+          length: 8,
+          separator: ' '
+        }) : t('fmt_actionbar_screenshare_labels_others')
+      })
+    }),
+    key: 'close_share_screen',
+    onButtonClick: function onButtonClick() {
+      closeShareScreen();
+    }
+  }];
   if ((0, _env.isElectron)()) {
     menus.push.apply(menus, menusElectronOnly);
   } else {
@@ -148,6 +168,9 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
   if (hasBoardControlPermission) {
     menus.push.apply(menus, boardControlMenus);
   }
+  if (hasStopScreenSharePermission) {
+    menus.push.apply(menus, shareScrennControlMenus);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
     options: menus
   });

package/lib/modules/action-bar/components/security/index.js

@@ -22,7 +22,8 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
     order = _ref.order;
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
-    setEnableWaitingRoom = _useContext.setEnableWaitingRoom;
+    setEnableWaitingRoom = _useContext.setEnableWaitingRoom,
+    privilegeProvider = _useContext.privilegeProvider;
   var transI18n = (0, _i18n.useI18n)();
   var title = transI18n('fmt_screenshare_controlbar_button_security');
   var tooltip = transI18n('fmt_screenshare_controlbar_button_security');
@@ -32,6 +33,7 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
       popoverProps: {
         trigger: 'click',
         content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {
+          privilege: privilegeProvider,
           setEnableWaitingRoom: setEnableWaitingRoom
         }),
         overlayInnerStyle: {

package/lib/modules/action-bar/components/smaller/index.d.ts

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

package/lib/modules/action-bar/components/smaller/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmallerActionbar = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("../../store");
+var _microphone = require("../../../components/device-control/components/microphone");
+var _jsxRuntime = require("react/jsx-runtime");
+var SmallerActionbar = exports.SmallerActionbar = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    microphoneEnabled = _useContext.microphoneEnabled,
+    enableMicrophone = _useContext.enableMicrophone,
+    toggleFold = _useContext.toggleFold;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-action-bar-smaller",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      placement: "top",
+      content: transI18n('fmt_toolbar_tips_expand'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar--unfold",
+        onClick: toggleFold,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPDOWN,
+          colors: {
+            iconPrimary: 'black'
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      placement: "top",
+      content: microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar-smaller-micphone",
+        onClick: function onClick() {
+          return enableMicrophone(!microphoneEnabled);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphone.MicrophoneControl, {
+          showTitle: false
+        })
+      })
+    })]
+  });
+});

package/lib/modules/action-bar/components/trigger-output-language/index.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+export declare const TriggerOutputLanguage: () => import("react/jsx-runtime").JSX.Element | null;

package/lib/modules/action-bar/components/trigger-output-language/index.js

@@ -0,0 +1,231 @@
+"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.TriggerOutputLanguage = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _reactRnd = require("react-rnd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _store = require("../../store");
+var _useLanguageConfig = require("../../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _guideTooltip = require("../trigger-subscribe-language/guide-tooltip");
+var _loadingWrapper = require("../../../interpreter/loading-wrapper");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var useDefaultPosition = function useDefaultPosition() {
+  var position = (0, _react.useMemo)(function () {
+    var windowWidth = window.innerWidth;
+    var width = 210;
+    var height = 60;
+    var x = windowWidth / 2 - width / 2;
+    return {
+      x: x,
+      y: -86,
+      width: width,
+      height: height
+    };
+  }, []);
+  return position;
+};
+var useGuideContent = function useGuideContent() {
+  var transI18n = (0, _i18n.useI18n)();
+  return (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "switch-language-channels-guide-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_INTERPRETATION2,
+          size: 25,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-text",
+        children: transI18n('fmt_interpretation_interpreter_toast_label_change_channel')
+      })]
+    });
+  }, []);
+};
+var useOutputLanguageOptionList = function useOutputLanguageOptionList() {
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    interpreter = _useContext.interpreter;
+  return (0, _react.useMemo)(function () {
+    var outputLanguageOptionList = [];
+    if (interpreter) {
+      var sourceLanguage = interpreter.sourceLanguage,
+        targetLanguage = interpreter.targetLanguage;
+      outputLanguageOptionList = [sourceLanguage, targetLanguage];
+    }
+    return outputLanguageOptionList.map(function (language) {
+      var languageConfig = getLanguageConfig(language);
+      var abbr = languageConfig.abbr,
+        imgSrc = languageConfig.imgSrc,
+        value = languageConfig.value;
+      return {
+        label: abbr,
+        imgSrc: imgSrc,
+        value: value
+      };
+    });
+  }, [interpreter]);
+};
+var usePosition = function usePosition() {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    startX = _useState2[0],
+    setStartX = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    startY = _useState4[0],
+    setStartY = _useState4[1];
+  var handleMouseDown = function handleMouseDown(e) {
+    setStartX(e.clientX);
+    setStartY(e.clientY);
+  };
+  return {
+    handleMouseDown: handleMouseDown,
+    startX: startX,
+    startY: startY
+  };
+};
+var TriggerOutputLanguage = exports.TriggerOutputLanguage = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_store.ActionBarContext),
+    setOutputLanguage = _useContext2.setOutputLanguage,
+    outputLanguage = _useContext2.outputLanguage;
+  var position = usePosition();
+  var outputLanguageOptionList = useOutputLanguageOptionList();
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var guideTooltip = (0, _react.useRef)();
+  var handleSetOutputLanguage = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(language) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.next = 3;
+            return setOutputLanguage(language);
+          case 3:
+            setLoading(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSetOutputLanguage(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var handleMouseUp = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(e, language) {
+      var moveThreshold, dx, dy, isSet;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            moveThreshold = 5; // 移动阈值
+            dx = Math.abs(e.clientX - position.startX);
+            dy = Math.abs(e.clientY - position.startY);
+            isSet = dx < moveThreshold && dy < moveThreshold;
+            if (isSet) {
+              handleSetOutputLanguage(language);
+            }
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleMouseUp(_x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onDragStart = function onDragStart() {
+    if (guideTooltip.current) {
+      guideTooltip.current.setShow(false);
+    }
+  };
+  var guideContent = useGuideContent();
+  var defaultPosition = useDefaultPosition();
+  var _useState7 = (0, _react.useState)(defaultPosition.x),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    currentCoordinateX = _useState8[0],
+    setCurrentCoordinateX = _useState8[1];
+  var _useState9 = (0, _react.useState)(defaultPosition.y),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    currentCoordinateY = _useState10[0],
+    setCurrentCoordinateY = _useState10[1];
+  var onDrag = function onDrag(_, data) {
+    setCurrentCoordinateX(data.x);
+    setCurrentCoordinateY(data.y > -60 ? -60 : data.y);
+  };
+  if (!outputLanguage) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": defaultPosition,
+    onDrag: onDrag,
+    position: {
+      x: currentCoordinateX,
+      y: currentCoordinateY
+    },
+    bounds: "window",
+    enableResizing: false,
+    onDragStart: onDragStart,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
+      content: "",
+      guideContent: guideContent,
+      ref: guideTooltip,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
+        maskClassName: "switch-language-loading",
+        loading: loading,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "switch-language-channels-bar",
+          children: outputLanguageOptionList.map(function (option) {
+            var value = option.value,
+              imgSrc = option.imgSrc,
+              label = option.label;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onMouseDown: position.handleMouseDown,
+              onMouseUp: function onMouseUp(e) {
+                handleMouseUp(e, value);
+              },
+              className: (0, _classnames["default"])('switch-language-channels-action', {
+                'switch-language-channels-action__checked': outputLanguage === value
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "switch-language-channels-action-bg",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "switch-language-channels-action-icon",
+                  src: imgSrc
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "switch-language-channels-action-text",
+                  children: label
+                })]
+              })
+            }, value);
+          })
+        })
+      })
+    })
+  });
+});

package/lib/modules/action-bar/components/trigger-subscribe-language/guide-tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { GuideTooltipProps } from '../../../types';
+export declare const GuideTooltip: import("react").ForwardRefExoticComponent<GuideTooltipProps & import("react").RefAttributes<unknown>>;

package/lib/modules/action-bar/{trigger-output-language-room → components/trigger-subscribe-language}/guide-tooltip/index.js

@@ -16,15 +16,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 var GuideTooltip = exports.GuideTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     content = props.content,
-    guideContent = props.guideContent,
-    _props$initShowGuide = props.initShowGuide,
-    initShowGuide = _props$initShowGuide === void 0 ? true : _props$initShowGuide,
-    onClose = props.onClose;
-  var _useState = (0, _react.useState)(initShowGuide),
+    guideContent = props.guideContent;
+  var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     show = _useState2[0],
     setShow = _useState2[1];
-  var showGuideRef = (0, _react.useRef)(initShowGuide);
+  var firstRender = (0, _react.useRef)(true);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       setShow: setShow,
@@ -33,8 +30,7 @@ var GuideTooltip = exports.GuideTooltip = /*#__PURE__*/(0, _react.forwardRef)(fu
   }, [show]);
   var close = function close() {
     setShow(false);
-    showGuideRef.current = false;
-    onClose && onClose(false);
+    firstRender.current = false;
   };
   var guideContentDom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-guide-tooltip-close-container",
@@ -51,24 +47,23 @@ var GuideTooltip = exports.GuideTooltip = /*#__PURE__*/(0, _react.forwardRef)(fu
       }
     })]
   });
-  (0, _react.useEffect)(function () {
-    if (initShowGuide) {
-      showGuideRef.current = true;
-      setShow(true);
-    }
-  }, [guideContent]);
+  var guideContentRef = (0, _react.useRef)(guideContent);
   var onVisibleChange = function onVisibleChange(visible) {
-    if (!showGuideRef.current) {
+    if (!firstRender.current) {
       setShow(visible);
     }
   };
+  (0, _react.useEffect)(function () {
+    firstRender.current = true;
+    if (guideContentRef.current !== guideContent) {
+      setShow(true);
+    }
+  }, [guideContent]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
     overlayClassName: "fcr-guide-tooltip",
     mouseEnterDelay: 0,
-    onVisibleChange: onVisibleChange
-    // content={showGuideContetRef.current}
-    ,
-    content: showGuideRef.current ? guideContentDom : content,
+    onVisibleChange: onVisibleChange,
+    content: firstRender.current ? guideContentDom : content,
     visible: show,
     children: children
   });

package/lib/modules/action-bar/components/trigger-subscribe-language/index.d.ts

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