@lobehub/ui 1.170.8 → 2.0.0

package/es/FileTypeIcon/FileTypeIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FileTypeIconProps } from './type';
+declare const FileTypeIcon: import("react").NamedExoticComponent<FileTypeIconProps>;
+export default FileTypeIcon;

package/es/FileTypeIcon/FileTypeIcon.js

@@ -0,0 +1,84 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["icon", "color", "filetype", "type", "size", "style", "variant", "className", "ref"];
+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) { _defineProperty(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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo, useMemo } from 'react';
+import { Center } from 'react-layout-kit';
+import FileIcon from "./components/FileIcon";
+import FolderIcon from "./components/FolderIcon";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FileTypeIcon = /*#__PURE__*/memo(function (_ref) {
+  var icon = _ref.icon,
+    color = _ref.color,
+    filetype = _ref.filetype,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'file' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 48 : _ref$size,
+    style = _ref.style,
+    variant = _ref.variant,
+    className = _ref.className,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var isMono = variant === 'mono';
+  var filetypeShort = useMemo(function () {
+    return filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype;
+  }, [filetype]);
+  var fontSize = useMemo(function () {
+    if (filetypeShort && filetypeShort.length > 3) {
+      return 24 / (4 + (filetypeShort.length - 3));
+    }
+    return 6;
+  }, [filetypeShort]);
+  var iconColor = useMemo(function () {
+    return isMono ? theme.isDarkMode ? theme.colorFill : theme.colorBgContainer : color || theme.geekblue;
+  }, [isMono, theme.isDarkMode, theme.colorFill, theme.colorBgContainer, color]);
+  var content = type === 'file' ? /*#__PURE__*/_jsx(FileIcon, _objectSpread({
+    filetypeShort: filetypeShort,
+    fontSize: fontSize,
+    hasIcon: !!icon,
+    iconColor: iconColor,
+    isMono: isMono,
+    size: size
+  }, rest)) : /*#__PURE__*/_jsx(FolderIcon, _objectSpread({
+    filetype: filetype,
+    fontSize: fontSize,
+    hasIcon: !!icon,
+    iconColor: iconColor,
+    isMono: isMono,
+    size: size
+  }, rest));
+  if (!icon) return content;
+  return /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    flex: 'none',
+    height: size,
+    ref: ref,
+    style: style,
+    width: size
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.inner,
+      style: {
+        fontSize: size / 2.4,
+        top: type === 'file' ? '20%' : '16%'
+      },
+      children: icon
+    }), content]
+  }));
+});
+FileTypeIcon.displayName = 'FileTypeIcon';
+export default FileTypeIcon;

package/es/FileTypeIcon/components/FileIcon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SvgProps } from "../../types";
+interface FileIconProps extends SvgProps {
+    filetypeShort?: string;
+    fontSize?: number;
+    hasIcon?: boolean;
+    iconColor?: string;
+    isMono?: boolean;
+    size?: number;
+}
+declare const FileIcon: import("react").NamedExoticComponent<FileIconProps>;
+export default FileIcon;

package/es/{Swatches/index.js → FileTypeIcon/components/FileIcon.js}

@@ -1,7 +1,5 @@
-'use client';
-
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["style", "colors", "activeColor", "onSelect", "size"];
+var _excluded = ["size", "isMono", "hasIcon", "iconColor", "filetypeShort", "className", "fontSize", "style"];
 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) { _defineProperty(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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -9,61 +7,53 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { CheckIcon } from 'lucide-react';
-import { darken } from 'polished';
 import { memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-import Icon from "../Icon";
-import { useStyles } from "./style";
+import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Swatches = /*#__PURE__*/memo(function (_ref) {
-  var style = _ref.style,
-    colors = _ref.colors,
-    activeColor = _ref.activeColor,
-    onSelect = _ref.onSelect,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
+var FileIcon = /*#__PURE__*/memo(function (_ref) {
+  var size = _ref.size,
+    isMono = _ref.isMono,
+    hasIcon = _ref.hasIcon,
+    iconColor = _ref.iconColor,
+    filetypeShort = _ref.filetypeShort,
+    className = _ref.className,
+    fontSize = _ref.fontSize,
+    style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(size),
+  var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles,
     theme = _useStyles.theme;
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    gap: 8,
-    horizontal: true,
-    style: _objectSpread({
-      flexWrap: 'wrap'
-    }, style)
+  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
+    className: cx(styles.icon, !hasIcon && className),
+    height: size,
+    style: hasIcon ? undefined : style,
+    viewBox: "0 0 24 24",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg"
   }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(Flexbox, {
-      className: cx(styles.container, !activeColor && styles.active),
-      onClick: function onClick() {
-        onSelect === null || onSelect === void 0 || onSelect();
-      },
-      style: {
-        background: theme.colorBgContainer
-      }
-    }), colors.map(function (c, index) {
-      var isActive = c === activeColor;
-      return /*#__PURE__*/_jsx(Center, {
-        className: cx(styles.container, isActive && styles.active),
-        onClick: function onClick() {
-          onSelect === null || onSelect === void 0 || onSelect(c);
-        },
-        style: {
-          background: c
-        },
-        children: isActive && /*#__PURE__*/_jsx(Icon, {
-          color: darken(0.3, c),
-          icon: CheckIcon,
-          size: {
-            fontSize: 14,
-            strokeWidth: 4
-          }
-        })
-      }, "".concat(c, "_").concat(index));
+    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
     })]
   }));
 });
-export default Swatches;
+export default FileIcon;

package/es/FileTypeIcon/components/FolderIcon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SvgProps } from "../../types";
+interface FolderIconProps extends SvgProps {
+    filetype?: string;
+    fontSize?: number;
+    hasIcon?: boolean;
+    iconColor?: string;
+    isMono?: boolean;
+    size?: number;
+}
+declare const FolderIcon: import("react").NamedExoticComponent<FolderIconProps>;
+export default FolderIcon;

package/es/FileTypeIcon/components/FolderIcon.js

@@ -0,0 +1,52 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["size", "isMono", "hasIcon", "iconColor", "filetype", "className", "fontSize", "style"];
+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) { _defineProperty(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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import { useStyles } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FolderIcon = /*#__PURE__*/memo(function (_ref) {
+  var size = _ref.size,
+    isMono = _ref.isMono,
+    hasIcon = _ref.hasIcon,
+    iconColor = _ref.iconColor,
+    filetype = _ref.filetype,
+    className = _ref.className,
+    fontSize = _ref.fontSize,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
+    className: cx(styles.icon, !hasIcon && className),
+    height: size,
+    style: hasIcon ? undefined : style,
+    viewBox: "0 0 24 24",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 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
+    }), !hasIcon && filetype && /*#__PURE__*/_jsx("text", {
+      fill: isMono ? theme.colorTextSecondary : '#fff',
+      fontSize: fontSize,
+      fontWeight: "bold",
+      textAnchor: "middle",
+      x: "50%",
+      y: "70%",
+      children: filetype.toUpperCase()
+    })]
+  }));
+});
+export default FolderIcon;

package/es/FileTypeIcon/index.d.ts

@@ -1,13 +1,2 @@
-import { ReactNode } from 'react';
-import { DivProps, SvgProps } from "../types";
-type IconProps = SvgProps & DivProps;
-export interface FileTypeIconProps extends IconProps {
-    color?: string;
-    filetype?: string;
-    icon?: ReactNode;
-    size?: number;
-    type?: 'file' | 'folder';
-    variant?: 'color' | 'mono';
-}
-declare const FileTypeIcon: import("react").NamedExoticComponent<FileTypeIconProps>;
-export default FileTypeIcon;
+export { default } from './FileTypeIcon';
+export type * from './type';

package/es/FileTypeIcon/index.js

@@ -1,123 +1 @@
-'use client';
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["icon", "color", "filetype", "type", "size", "style", "variant", "className"];
-var _templateObject, _templateObject2;
-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) { _defineProperty(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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-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 {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),
-    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: none;\n      line-height: 1;\n    "])))
-  };
-});
-var FileTypeIcon = /*#__PURE__*/memo(function (_ref2) {
-  var icon = _ref2.icon,
-    color = _ref2.color,
-    filetype = _ref2.filetype,
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? 'file' : _ref2$type,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 48 : _ref2$size,
-    style = _ref2.style,
-    variant = _ref2.variant,
-    className = _ref2.className,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
-  var filetypeShort = filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype;
-  var fontSize = useMemo(function () {
-    if (filetypeShort && filetypeShort.length > 3) {
-      return 24 / (4 + (filetypeShort.length - 3));
-    }
-    return 6;
-  }, [filetypeShort]);
-  var isMono = variant === 'mono';
-  var iconColor = isMono ? theme.isDarkMode ? theme.colorFill : theme.colorBgContainer : color || theme.geekblue;
-  var content;
-  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), {}, {
-    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), {}, {
-    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__*/_jsxs(Center, _objectSpread(_objectSpread({
-    className: cx(styles.container, className),
-    flex: 'none',
-    height: size,
-    style: style,
-    width: size
-  }, 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;
+export { default } from "./FileTypeIcon";

package/es/{mobile/MobileNavBar → FileTypeIcon}/style.d.ts

@@ -1,7 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    center: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
+    icon: import("antd-style").SerializedStyles;
     inner: import("antd-style").SerializedStyles;
-    left: import("antd-style").SerializedStyles;
-    right: import("antd-style").SerializedStyles;
 }>;

package/es/FileTypeIcon/style.js

@@ -0,0 +1,11 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),
+    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: none;\n      line-height: 1;\n    "]))),
+    inner: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 1;\n    "])))
+  };
+});

package/es/FileTypeIcon/type.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, Ref } from 'react';
+import type { DivProps, SvgProps } from "../types";
+type IconProps = SvgProps & DivProps;
+export interface FileTypeIconProps extends IconProps {
+    color?: string;
+    filetype?: string;
+    icon?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    size?: number;
+    type?: 'file' | 'folder';
+    variant?: 'color' | 'mono';
+}
+export {};

package/es/FileTypeIcon/type.js

@@ -0,0 +1 @@
+export {};

package/es/FluentEmoji/FluentEmoji.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FluentEmojiProps } from './type';
+declare const FluentEmoji: import("react").NamedExoticComponent<FluentEmojiProps>;
+export default FluentEmoji;

package/es/FluentEmoji/FluentEmoji.js

@@ -0,0 +1,78 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["emoji", "className", "style", "type", "size", "unoptimized", "ref"];
+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) { _defineProperty(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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo, useMemo, useState } from 'react';
+import { Center } from 'react-layout-kit';
+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,
+    style = _ref.style,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? '3d' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 40 : _ref$size,
+    unoptimized = _ref.unoptimized,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadingFail = _useState2[0],
+    setLoadingFail = _useState2[1];
+  var genCdnUrl = useCdnFn();
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var emojiUrl = useMemo(function () {
+    return genEmojiUrl(emoji, type);
+  }, [type, emoji]);
+  if (type === 'raw' || !emojiUrl || loadingFail) return /*#__PURE__*/_jsx(Center, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    flex: 'none',
+    height: size,
+    ref: ref,
+    role: 'img',
+    style: _objectSpread({
+      fontSize: size * 0.9
+    }, style),
+    width: size
+  }, rest), {}, {
+    children: emoji
+  }));
+  return /*#__PURE__*/_jsx(Img, _objectSpread({
+    alt: emoji,
+    className: className,
+    height: size,
+    loading: 'lazy',
+    onError: function onError() {
+      return setLoadingFail(true);
+    },
+    ref: ref,
+    src: genCdnUrl(emojiUrl),
+    style: _objectSpread({
+      flex: 'none'
+    }, style),
+    unoptimized: unoptimized,
+    width: size
+  }, rest));
+});
+FluentEmoji.displayName = 'FluentEmoji';
+export default FluentEmoji;

package/es/FluentEmoji/index.d.ts

@@ -1,22 +1,2 @@
-/// <reference types="react" />
-import { DivProps } from "../types";
-import { EmojiType } from './utils';
-export interface FluentEmojiProps extends DivProps {
-    /**
-     * @description The emoji character to be rendered
-     */
-    emoji: string;
-    /**
-     * @description Size of the emoji
-     * @default 40
-     */
-    size?: number;
-    /**
-     * @description The type of the FluentUI emoji set to be used
-     * @default '3d'
-     */
-    type?: EmojiType;
-    unoptimized?: boolean;
-}
-declare const FluentEmoji: import("react").NamedExoticComponent<FluentEmojiProps>;
-export default FluentEmoji;
+export { default } from './FluentEmoji';
+export type * from './type';