@lobehub/ui 1.158.1 → 1.160.0

package/es/EmojiPicker/AvatarUploader.js

@@ -6,6 +6,8 @@ import AvatarEditor from 'react-avatar-editor';
 import { Center, Flexbox } from 'react-layout-kit';
 import Icon from "../Icon";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Dragger = Upload.Dragger;
 var createUploadImageHandler = function createUploadImageHandler(onUploadImage) {
   return function (file) {
@@ -50,69 +52,78 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
     });
     onUpload === null || onUpload === void 0 || onUpload(file);
   };
-  return /*#__PURE__*/React.createElement(Flexbox, {
+  return /*#__PURE__*/_jsxs(Flexbox, {
     padding: 10,
     style: {
       position: 'relative'
     },
-    width: '100%'
-  }, !previewImage && /*#__PURE__*/React.createElement(Dragger, {
-    accept: 'image',
-    beforeUpload: beforeUpload,
-    itemRender: function itemRender() {
-      return void 0;
-    },
-    maxCount: 1,
-    multiple: false
-  }, /*#__PURE__*/React.createElement(Center, {
-    gap: 16,
-    height: compressSize,
-    width: compressSize
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ImageUpIcon,
-    size: {
-      fontSize: 48,
-      strokeWidth: 1.5
-    }
-  }), /*#__PURE__*/React.createElement("div", null, (texts === null || texts === void 0 ? void 0 : texts.draggerDesc) || 'Click or Drag image to this area to upload'))), previewImage && /*#__PURE__*/React.createElement(Center, {
-    gap: 8,
-    style: {
-      position: 'relative'
-    },
-    width: '100%'
-  }, /*#__PURE__*/React.createElement(Flexbox, {
-    className: styles.editor
-  }, /*#__PURE__*/React.createElement(AvatarEditor, {
-    border: 0,
-    borderRadius: compressSize / 2,
-    height: compressSize,
-    image: previewImage,
-    ref: editor,
-    width: compressSize
-  })), /*#__PURE__*/React.createElement(Flexbox, {
-    gap: 8,
-    horizontal: true,
-    style: {
-      position: 'relative'
-    },
-    width: '100%'
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: ChevronLeftIcon
-    }),
-    onClick: function onClick() {
-      return setPreviewImage('');
-    },
-    style: {
-      flex: 'none'
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleUpload,
-    style: {
-      flex: 1,
-      fontWeight: 500
-    },
-    type: 'primary'
-  }, (texts === null || texts === void 0 ? void 0 : texts.uploadBtn) || 'Crop and Upload'))));
+    width: '100%',
+    children: [!previewImage && /*#__PURE__*/_jsx(Dragger, {
+      accept: 'image',
+      beforeUpload: beforeUpload,
+      itemRender: function itemRender() {
+        return void 0;
+      },
+      maxCount: 1,
+      multiple: false,
+      children: /*#__PURE__*/_jsxs(Center, {
+        gap: 16,
+        height: compressSize,
+        width: compressSize,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: ImageUpIcon,
+          size: {
+            fontSize: 48,
+            strokeWidth: 1.5
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          children: (texts === null || texts === void 0 ? void 0 : texts.draggerDesc) || 'Click or Drag image to this area to upload'
+        })]
+      })
+    }), previewImage && /*#__PURE__*/_jsxs(Center, {
+      gap: 8,
+      style: {
+        position: 'relative'
+      },
+      width: '100%',
+      children: [/*#__PURE__*/_jsx(Flexbox, {
+        className: styles.editor,
+        children: /*#__PURE__*/_jsx(AvatarEditor, {
+          border: 0,
+          borderRadius: compressSize / 2,
+          height: compressSize,
+          image: previewImage,
+          ref: editor,
+          width: compressSize
+        })
+      }), /*#__PURE__*/_jsxs(Flexbox, {
+        gap: 8,
+        horizontal: true,
+        style: {
+          position: 'relative'
+        },
+        width: '100%',
+        children: [/*#__PURE__*/_jsx(Button, {
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: ChevronLeftIcon
+          }),
+          onClick: function onClick() {
+            return setPreviewImage('');
+          },
+          style: {
+            flex: 'none'
+          }
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleUpload,
+          style: {
+            flex: 1,
+            fontWeight: 500
+          },
+          type: 'primary',
+          children: (texts === null || texts === void 0 ? void 0 : texts.uploadBtn) || 'Crop and Upload'
+        })]
+      })]
+    })]
+  });
 });
 export default AvatarUploader;

package/es/EmojiPicker/index.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
@@ -23,6 +22,8 @@ import TabsNav from "../TabsNav";
 import Tooltip from "../Tooltip";
 import AvatarUploader from "./AvatarUploader";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_AVATAR = '🤖';
 var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
   var value = _ref.value,
@@ -111,26 +112,28 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
   }, [active, open]);
   var items = [{
     key: 'emoji',
-    label: /*#__PURE__*/React.createElement(Tooltip, {
-      title: (texts === null || texts === void 0 ? void 0 : texts.emoji) || 'Emoji'
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: SmileIcon,
-      size: {
-        fontSize: 20,
-        strokeWidth: 2.5
-      }
-    }))
+    label: /*#__PURE__*/_jsx(Tooltip, {
+      title: (texts === null || texts === void 0 ? void 0 : texts.emoji) || 'Emoji',
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: SmileIcon,
+        size: {
+          fontSize: 20,
+          strokeWidth: 2.5
+        }
+      })
+    })
   }, allowUpload && {
     key: 'upload',
-    label: /*#__PURE__*/React.createElement(Tooltip, {
-      title: (texts === null || texts === void 0 ? void 0 : texts.upload) || 'Upload'
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: UploadIcon,
-      size: {
-        fontSize: 20,
-        strokeWidth: 2.5
-      }
-    }))
+    label: /*#__PURE__*/_jsx(Tooltip, {
+      title: (texts === null || texts === void 0 ? void 0 : texts.upload) || 'Upload',
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: UploadIcon,
+        size: {
+          fontSize: 20,
+          strokeWidth: 2.5
+        }
+      })
+    })
   }].concat(_toConsumableArray(customTabs.map(function (tab) {
     return {
       key: tab.value,
@@ -138,9 +141,9 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
     };
   }))).filter(Boolean);
   var showTabs = items && items.length > 1;
-  return /*#__PURE__*/React.createElement(Popover, {
+  return /*#__PURE__*/_jsx(Popover, {
     arrow: false,
-    content: /*#__PURE__*/React.createElement(Flexbox, {
+    content: /*#__PURE__*/_jsxs(Flexbox, {
       className: cx(styles.picker, popupClassName),
       onMouseEnter: function onMouseEnter() {
         return setActive(true);
@@ -152,89 +155,95 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
       style: _objectSpread({
         minWidth: 310,
         paddingTop: showTabs ? 4 : 0
-      }, popupStyle)
-    }, showTabs && /*#__PURE__*/React.createElement(Flexbox, {
-      align: 'center',
-      horizontal: true,
-      justify: 'space-between',
-      paddingInline: 10
-    }, /*#__PURE__*/React.createElement(TabsNav, {
-      activeKey: tab,
-      items: items,
-      onChange: function onChange(key) {
-        return setTab(key);
-      },
-      variant: 'compact'
-    }), allowDelete && /*#__PURE__*/React.createElement(ActionIcon, {
-      icon: TrashIcon,
-      onClick: function onClick() {
-        handleAvatarChange(defaultAvatar);
-        onDelete === null || onDelete === void 0 || onDelete();
-      },
-      size: {
-        fontSize: 20,
-        strokeWidth: 2.5
-      },
-      title: (texts === null || texts === void 0 ? void 0 : texts.delete) || 'Delete'
-    })), tab === 'emoji' && /*#__PURE__*/React.createElement(Picker, {
-      custom: customEmojis,
-      data: data,
-      i18n: i18n,
-      icons: 'outline',
-      locale: locale.split('-')[0],
-      navPosition: showTabs ? 'bottom' : 'top',
-      onEmojiSelect: function onEmojiSelect(e) {
-        return handleAvatarChange(e.src || e.native);
-      },
-      previewPosition: 'none',
-      skinTonePosition: 'none',
-      theme: theme.isDarkMode ? 'dark' : 'light'
-    }), tab === 'upload' && /*#__PURE__*/React.createElement(AvatarUploader, {
-      compressSize: compressSize,
-      onChange: handleAvatarChange,
-      onUpload: onUpload,
-      texts: texts
-    }), customTabs.map(function (item) {
-      return tab === item.value && /*#__PURE__*/React.createElement(Flexbox, {
-        key: item.value,
-        padding: 10
-      }, item.render(handleAvatarChange));
-    })),
+      }, popupStyle),
+      children: [showTabs && /*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        horizontal: true,
+        justify: 'space-between',
+        paddingInline: 10,
+        children: [/*#__PURE__*/_jsx(TabsNav, {
+          activeKey: tab,
+          items: items,
+          onChange: function onChange(key) {
+            return setTab(key);
+          },
+          variant: 'compact'
+        }), allowDelete && /*#__PURE__*/_jsx(ActionIcon, {
+          icon: TrashIcon,
+          onClick: function onClick() {
+            handleAvatarChange(defaultAvatar);
+            onDelete === null || onDelete === void 0 || onDelete();
+          },
+          size: {
+            fontSize: 20,
+            strokeWidth: 2.5
+          },
+          title: (texts === null || texts === void 0 ? void 0 : texts.delete) || 'Delete'
+        })]
+      }), tab === 'emoji' && /*#__PURE__*/_jsx(Picker, {
+        custom: customEmojis,
+        data: data,
+        i18n: i18n,
+        icons: 'outline',
+        locale: locale.split('-')[0],
+        navPosition: showTabs ? 'bottom' : 'top',
+        onEmojiSelect: function onEmojiSelect(e) {
+          return handleAvatarChange(e.src || e.native);
+        },
+        previewPosition: 'none',
+        skinTonePosition: 'none',
+        theme: theme.isDarkMode ? 'dark' : 'light'
+      }), tab === 'upload' && /*#__PURE__*/_jsx(AvatarUploader, {
+        compressSize: compressSize,
+        onChange: handleAvatarChange,
+        onUpload: onUpload,
+        texts: texts
+      }), customTabs.map(function (item) {
+        return tab === item.value && /*#__PURE__*/_jsx(Flexbox, {
+          padding: 10,
+          children: item.render(handleAvatarChange)
+        }, item.value);
+      })]
+    }),
     destroyTooltipOnHide: true,
     open: open,
     placement: 'bottomLeft',
     rootClassName: styles.popover,
-    trigger: ['click']
-  }, /*#__PURE__*/React.createElement(Center, _extends({
-    className: cx(styles.avatar, className),
-    flex: 'none',
-    height: size,
-    onClick: function onClick(e) {
-      if (loading) return;
-      setOpen(!open);
-      _onClick === null || _onClick === void 0 || _onClick(e);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setActive(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setActive(false);
-    },
-    width: size
-  }, rest), loading && /*#__PURE__*/React.createElement(Center, {
-    className: styles.loading,
-    height: '100%',
-    width: '100%'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: Loader2Icon,
-    size: {
-      fontSize: size / 2
-    },
-    spin: true
-  })), /*#__PURE__*/React.createElement(Avatar, {
-    avatar: ava,
-    background: backgroundColor,
-    size: size
-  })));
+    trigger: ['click'],
+    children: /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
+      className: cx(styles.avatar, className),
+      flex: 'none',
+      height: size,
+      onClick: function onClick(e) {
+        if (loading) return;
+        setOpen(!open);
+        _onClick === null || _onClick === void 0 || _onClick(e);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setActive(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setActive(false);
+      },
+      width: size
+    }, rest), {}, {
+      children: [loading && /*#__PURE__*/_jsx(Center, {
+        className: styles.loading,
+        height: '100%',
+        width: '100%',
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: Loader2Icon,
+          size: {
+            fontSize: size / 2
+          },
+          spin: true
+        })
+      }), /*#__PURE__*/_jsx(Avatar, {
+        avatar: ava,
+        background: backgroundColor,
+        size: size
+      })]
+    }))
+  });
 });
 export default EmojiPicker;

package/es/EmptyCard/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["cover", "visible", "defaultVisible", "onVisibleChange", "alt", "title", "desc", "width", "height", "imageProps"];
@@ -11,6 +11,8 @@ import useMergeState from 'use-merge-value';
 import ActionIcon from "../ActionIcon";
 import Img from "../Img";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var EmptyCard = /*#__PURE__*/memo(function (_ref) {
   var cover = _ref.cover,
     visible = _ref.visible,
@@ -34,28 +36,34 @@ var EmptyCard = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   if (!value) return null;
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: styles.container
-  }, rest), /*#__PURE__*/React.createElement(ActionIcon, {
-    className: styles.close,
-    icon: X,
-    onClick: function onClick() {
-      return setValue(false);
-    },
-    size: {
-      blockSize: 24,
-      fontSize: 16
-    }
-  }), cover && /*#__PURE__*/React.createElement(Img, _extends({
-    alt: alt,
-    className: styles.image,
-    height: height,
-    src: cover,
-    width: width
-  }, imageProps)), /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, title && /*#__PURE__*/React.createElement("h3", null, title), desc && /*#__PURE__*/React.createElement("p", {
-    className: styles.desc
-  }, desc)));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(ActionIcon, {
+      className: styles.close,
+      icon: X,
+      onClick: function onClick() {
+        return setValue(false);
+      },
+      size: {
+        blockSize: 24,
+        fontSize: 16
+      }
+    }), cover && /*#__PURE__*/_jsx(Img, _objectSpread({
+      alt: alt,
+      className: styles.image,
+      height: height,
+      src: cover,
+      width: width
+    }, imageProps)), /*#__PURE__*/_jsxs("div", {
+      className: styles.content,
+      children: [title && /*#__PURE__*/_jsx("h3", {
+        children: title
+      }), desc && /*#__PURE__*/_jsx("p", {
+        className: styles.desc,
+        children: desc
+      })]
+    })]
+  }));
 });
 export default EmptyCard;

package/es/FileTypeIcon/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["icon", "color", "filetype", "type", "size", "style", "variant", "className"];
@@ -8,6 +8,8 @@ var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { Center } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
@@ -41,66 +43,75 @@ var FileTypeIcon = /*#__PURE__*/memo(function (_ref2) {
   var isMono = variant === 'mono';
   var iconColor = isMono ? theme.isDarkMode ? theme.colorFill : theme.colorBgContainer : color || theme.geekblue;
   var content;
-  content = type === 'file' ? /*#__PURE__*/React.createElement("svg", _extends({
+  content = type === 'file' ? /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
     className: cx(styles.icon, !icon && className),
     height: size,
     style: icon ? undefined : style,
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, rest), /*#__PURE__*/React.createElement("path", {
-    d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
-    fill: iconColor
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M14 2l6 6h-4a2 2 0 01-2-2V2z",
-    fill: isMono ? theme.colorFill : '#fff',
-    fillOpacity: ".5"
-  }), filetypeShort && /*#__PURE__*/React.createElement("text", {
-    fill: isMono ? theme.colorTextSecondary : '#fff',
-    fontSize: fontSize,
-    fontWeight: "bold",
-    textAnchor: "middle",
-    x: "50%",
-    y: "70%"
-  }, filetypeShort.toUpperCase()), /*#__PURE__*/React.createElement("path", {
-    d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
-    fill: 'transparent',
-    stroke: theme.colorFillSecondary,
-    strokeWidth: 0.5
-  })) : /*#__PURE__*/React.createElement("svg", _extends({
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
+      fill: iconColor
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M14 2l6 6h-4a2 2 0 01-2-2V2z",
+      fill: isMono ? theme.colorFill : '#fff',
+      fillOpacity: ".5"
+    }), filetypeShort && /*#__PURE__*/_jsx("text", {
+      fill: isMono ? theme.colorTextSecondary : '#fff',
+      fontSize: fontSize,
+      fontWeight: "bold",
+      textAnchor: "middle",
+      x: "50%",
+      y: "70%",
+      children: filetypeShort.toUpperCase()
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
+      fill: 'transparent',
+      stroke: theme.colorFillSecondary,
+      strokeWidth: 0.5
+    })]
+  })) : /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
     className: cx(styles.icon, !icon && className),
     height: size,
     style: icon ? undefined : style,
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, rest), /*#__PURE__*/React.createElement("path", {
-    d: "M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z",
-    fill: iconColor,
-    stroke: theme.colorFillSecondary,
-    strokeWidth: 0.5
-  }), !icon && filetype && /*#__PURE__*/React.createElement("text", {
-    fill: isMono ? theme.colorTextSecondary : '#fff',
-    fontSize: fontSize,
-    fontWeight: "bold",
-    textAnchor: "middle",
-    x: '50%',
-    y: "70%"
-  }, filetype.toUpperCase()));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z",
+      fill: iconColor,
+      stroke: theme.colorFillSecondary,
+      strokeWidth: 0.5
+    }), !icon && filetype && /*#__PURE__*/_jsx("text", {
+      fill: isMono ? theme.colorTextSecondary : '#fff',
+      fontSize: fontSize,
+      fontWeight: "bold",
+      textAnchor: "middle",
+      x: '50%',
+      y: "70%",
+      children: filetype.toUpperCase()
+    })]
+  }));
   if (!icon) return content;
-  return /*#__PURE__*/React.createElement(Center, _extends({
+  return /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     flex: 'none',
     height: size,
     style: style,
     width: size
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: size / 2.4,
-      position: 'absolute',
-      top: type === 'file' ? '20%' : '16%',
-      zIndex: 1
-    }
-  }, icon), content);
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        fontSize: size / 2.4,
+        position: 'absolute',
+        top: type === 'file' ? '20%' : '16%',
+        zIndex: 1
+      },
+      children: icon
+    }), content]
+  }));
 });
 export default FileTypeIcon;

package/es/FluentEmoji/index.js

@@ -8,6 +8,7 @@ import { useCdnFn } from "../ConfigProvider";
 import Img from "../Img";
 import { useStyles } from "./style";
 import { genEmojiUrl } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
 var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
   var emoji = _ref.emoji,
     className = _ref.className,
@@ -28,16 +29,17 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
   var emojiUrl = useMemo(function () {
     return genEmojiUrl(emoji, type);
   }, [type, emoji]);
-  if (type === 'pure' || !emojiUrl || loadingFail) return /*#__PURE__*/React.createElement(Center, {
+  if (type === 'pure' || !emojiUrl || loadingFail) return /*#__PURE__*/_jsx(Center, {
     className: cx(styles.container, className),
     flex: 'none',
     height: size,
     style: _objectSpread({
       fontSize: size * 0.9
     }, style),
-    width: size
-  }, emoji);
-  return /*#__PURE__*/React.createElement(Img, {
+    width: size,
+    children: emoji
+  });
+  return /*#__PURE__*/_jsx(Img, {
     alt: emoji,
     className: className,
     height: size,