@lobehub/ui 1.115.3 → 1.116.0

package/es/ActionIcon/calcSize.d.ts

@@ -0,0 +1,5 @@
+import { ActionIconSize } from "./index";
+export declare const calcSize: (size?: ActionIconSize) => {
+    blockSize: number;
+    borderRadius: number;
+};

package/es/ActionIcon/calcSize.js

@@ -0,0 +1,40 @@
+export var calcSize = function calcSize(size) {
+  var blockSize;
+  var borderRadius;
+  switch (size) {
+    case 'large':
+      {
+        blockSize = 44;
+        borderRadius = 8;
+        break;
+      }
+    case 'normal':
+      {
+        blockSize = 36;
+        borderRadius = 5;
+        break;
+      }
+    case 'small':
+      {
+        blockSize = 24;
+        borderRadius = 5;
+        break;
+      }
+    case 'site':
+      {
+        blockSize = 34;
+        borderRadius = 5;
+        break;
+      }
+    default:
+      {
+        blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
+        borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
+        break;
+      }
+  }
+  return {
+    blockSize: blockSize,
+    borderRadius: borderRadius
+  };
+};

package/es/ActionIcon/index.d.ts

@@ -1,14 +1,13 @@
 /// <reference types="react" />
-import { type IconProps } from "../Icon";
-import { type TooltipProps } from "../Tooltip";
-import { DivProps } from "../types";
-export type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
+import { type IconProps, type IconSizeConfig, type IconSizeType } from "../Icon";
+import type { TooltipProps } from "../Tooltip";
+interface ActionIconSizeConfig extends IconSizeConfig {
     blockSize?: number;
     borderRadius?: number;
-    fontSize?: number;
-    strokeWidth?: number;
-};
-export interface ActionIconProps extends DivProps {
+}
+type ActionIconSizeType = 'site' | IconSizeType;
+export type ActionIconSize = ActionIconSizeType | ActionIconSizeConfig;
+export interface ActionIconProps extends Omit<IconProps, 'size' | 'icon'> {
     /**
      * @description Whether the icon is active or not
      * @default false
@@ -19,17 +18,11 @@ export interface ActionIconProps extends DivProps {
      * @default false
      */
     arrow?: boolean;
-    color?: IconProps['color'];
-    fill?: IconProps['fill'];
     /**
      * @description Glass blur style
      * @default 'false'
      */
     glass?: boolean;
-    /**
-     * @description The icon element to be rendered
-     * @type LucideIcon
-     */
     icon?: IconProps['icon'];
     /**
      * @description Set the loading status of ActionIcon

package/es/ActionIcon/index.js

@@ -1,57 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay"];
+var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay", "fillOpacity", "fillRule", "focusable"];
 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; }
 import { Loader2 } from 'lucide-react';
-import { forwardRef, useMemo } from 'react';
+import { Suspense, forwardRef, lazy, useMemo } from 'react';
 import Icon from "../Icon";
-import Spotlight from "../Spotlight";
-import Tooltip from "../Tooltip";
+import { calcSize } from "./calcSize";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var calcSize = function calcSize(size) {
-  var blockSize;
-  var borderRadius;
-  switch (size) {
-    case 'large':
-      {
-        blockSize = 44;
-        borderRadius = 8;
-        break;
-      }
-    case 'normal':
-      {
-        blockSize = 36;
-        borderRadius = 5;
-        break;
-      }
-    case 'small':
-      {
-        blockSize = 24;
-        borderRadius = 5;
-        break;
-      }
-    case 'site':
-      {
-        blockSize = 34;
-        borderRadius = 5;
-        break;
-      }
-    default:
-      {
-        blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
-        borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
-        break;
-      }
-  }
-  return {
-    blockSize: blockSize,
-    borderRadius: borderRadius
-  };
-};
+var Tooltip = /*#__PURE__*/lazy(function () {
+  return import("../Tooltip");
+});
+var Spotlight = /*#__PURE__*/lazy(function () {
+  return import("../Spotlight");
+});
 var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = _ref.color,
     fill = _ref.fill,
@@ -72,6 +36,9 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     loading = _ref.loading,
     _ref$tooltipDelay = _ref.tooltipDelay,
     tooltipDelay = _ref$tooltipDelay === void 0 ? 0.5 : _ref$tooltipDelay,
+    fillOpacity = _ref.fillOpacity,
+    fillRule = _ref.fillRule,
+    focusable = _ref.focusable,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       active: Boolean(active),
@@ -84,21 +51,23 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, [size]),
     blockSize = _useMemo.blockSize,
     borderRadius = _useMemo.borderRadius;
-  var content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
-      className: styles.icon,
-      color: color,
-      fill: fill,
-      icon: icon,
-      size: size === 'site' ? 'normal' : size
-    }), children]
-  });
-  var spin = /*#__PURE__*/_jsx(Icon, {
+  var iconProps = {
     color: color,
-    icon: Loader2,
-    size: size === 'site' ? 'normal' : size,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    fillRule: fillRule,
+    focusable: focusable,
+    size: size === 'site' ? 'normal' : size
+  };
+  var content = icon && /*#__PURE__*/_jsx(Icon, _objectSpread({
+    className: styles.icon,
+    icon: icon
+  }, iconProps));
+  var spin = /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
+    icon: Loader2
+  }, iconProps), {}, {
     spin: true
-  });
+  }));
   var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.block, className),
     onClick: loading ? undefined : onClick,
@@ -109,18 +78,24 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
       width: blockSize
     }, style)
   }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), loading ? spin : content]
+    children: [/*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: spotlight && /*#__PURE__*/_jsx(Spotlight, {})
+    }), loading ? spin : content, children]
   }));
   if (!title) return actionIconBlock;
-  return /*#__PURE__*/_jsx(Tooltip, {
-    arrow: arrow,
-    mouseEnterDelay: tooltipDelay,
-    overlayStyle: {
-      pointerEvents: 'none'
-    },
-    placement: placement,
-    title: title,
-    children: actionIconBlock
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: actionIconBlock,
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      arrow: arrow,
+      mouseEnterDelay: tooltipDelay,
+      overlayStyle: {
+        pointerEvents: 'none'
+      },
+      placement: placement,
+      title: title,
+      children: actionIconBlock
+    })
   });
 });
 export default ActionIcon;

package/es/ChatItem/components/ErrorContent.js

@@ -16,9 +16,9 @@ var ErrorContent = /*#__PURE__*/memo(function (_ref) {
     }),
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, {
+    className: styles.errorContent,
     gap: 8,
     children: [/*#__PURE__*/_jsx(Alert, _objectSpread({
-      className: styles.alert,
       showIcon: true,
       type: 'error'
     }, error)), message]

package/es/ChatItem/index.js

@@ -4,17 +4,21 @@ var _excluded = ["avatarAddon", "onAvatarClick", "actions", "className", "primar
 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; }
 import { useResponsive } from 'antd-style';
-import { memo } from 'react';
+import { Suspense, lazy, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import Actions from "./components/Actions";
 import Avatar from "./components/Avatar";
 import BorderSpacing from "./components/BorderSpacing";
-import ErrorContent from "./components/ErrorContent";
 import MessageContent from "./components/MessageContent";
 import Title from "./components/Title";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Actions = /*#__PURE__*/lazy(function () {
+  return import("./components/Actions");
+});
+var ErrorContent = /*#__PURE__*/lazy(function () {
+  return import("./components/ErrorContent");
+});
 var MOBILE_AVATAR_SIZE = 32;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var avatarAddon = _ref.avatarAddon,
@@ -78,10 +82,13 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         className: styles.messageContent,
         direction: type === 'block' ? placement === 'left' ? 'horizontal' : 'horizontal-reverse' : 'vertical',
         gap: 8,
-        children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
-          error: error,
-          message: errorMessage,
-          placement: placement
+        children: [error ? /*#__PURE__*/_jsx(Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/_jsx(ErrorContent, {
+            error: error,
+            message: errorMessage,
+            placement: placement
+          })
         }) : /*#__PURE__*/_jsx(MessageContent, {
           editing: editing,
           message: message,
@@ -94,11 +101,14 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
           renderMessage: renderMessage,
           text: text,
           type: type
-        }), /*#__PURE__*/_jsx(Actions, {
-          actions: actions,
-          editing: editing,
-          placement: placement,
-          type: type
+        }), /*#__PURE__*/_jsx(Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/_jsx(Actions, {
+            actions: actions,
+            editing: editing,
+            placement: placement,
+            type: type
+          })
         })]
       })]
     }), mobile && type === 'block' && /*#__PURE__*/_jsx(BorderSpacing, {

package/es/ChatItem/style.d.ts

@@ -8,12 +8,12 @@ export declare const useStyles: (props?: {
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
     actions: string;
-    alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     avatarGroupContainer: import("antd-style").SerializedStyles;
     container: string;
     editingContainer: string;
     editingInput: import("antd-style").SerializedStyles;
+    errorContent: import("antd-style").SerializedStyles;
     loading: import("antd-style").SerializedStyles;
     message: string;
     messageContainer: string;

package/es/ChatItem/style.js

@@ -21,16 +21,16 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
   return {
     actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
-    alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""]))),
-    avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
-    avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 8px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
-    editingContainer: cx(editingStylish, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
-    editingInput: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
+    avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
+    avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 8px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
+    editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
+    editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
+    errorContent: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        ", " {\n          width: 100%;\n        }\n      "])), responsive.mobile),
     loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n\n          ", " {\n            max-width: 100%;\n          }\n        "])), responsive.mobile)),
+    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n\n          ", " {\n            flex-direction: column !important;\n            width: 100%;\n          }\n        "])), responsive.mobile)),
     messageExtra: cx('message-extra'),
     name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };

package/es/EditableMessage/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-import { type MessageInputProps } from "../MessageInput";
-import { type MessageModalProps } from "../MessageModal";
+import type { MessageInputProps } from "../MessageInput";
+import type { MessageModalProps } from "../MessageModal";
 export interface EditableMessageProps {
     /**
      * @title The class name for the Markdown and MessageInput component

package/es/EditableMessage/index.js

@@ -3,14 +3,18 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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; }
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { Suspense, lazy, memo } from 'react';
 import useControlledState from 'use-merge-value';
 import Markdown from "../Markdown";
-import MessageInput from "../MessageInput";
-import MessageModal from "../MessageModal";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var MessageInput = /*#__PURE__*/lazy(function () {
+  return import("../MessageInput");
+});
+var MessageModal = /*#__PURE__*/lazy(function () {
+  return import("../MessageModal");
+});
 var useStyles = createStyles(function (_ref) {
   var stylish = _ref.stylish;
   return {
@@ -55,26 +59,29 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref2) {
     expand = _useControlledState4[0],
     setExpand = _useControlledState4[1];
   var isAutoSize = height === 'auto';
-  var input = /*#__PURE__*/_jsx(MessageInput, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
-    classNames: {
-      textarea: classNames === null || classNames === void 0 ? void 0 : classNames.textarea
-    },
-    defaultValue: value,
-    editButtonSize: editButtonSize,
-    height: height,
-    onCancel: function onCancel() {
-      return setTyping(false);
-    },
-    onConfirm: function onConfirm(text) {
-      _onChange === null || _onChange === void 0 || _onChange(text);
-      setTyping(false);
-    },
-    placeholder: placeholder,
-    style: stylesProps === null || stylesProps === void 0 ? void 0 : stylesProps.input,
-    text: text,
-    textareaClassname: classNames === null || classNames === void 0 ? void 0 : classNames.input,
-    type: inputType
+  var input = /*#__PURE__*/_jsx(Suspense, {
+    fallback: null,
+    children: /*#__PURE__*/_jsx(MessageInput, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
+      classNames: {
+        textarea: classNames === null || classNames === void 0 ? void 0 : classNames.textarea
+      },
+      defaultValue: value,
+      editButtonSize: editButtonSize,
+      height: height,
+      onCancel: function onCancel() {
+        return setTyping(false);
+      },
+      onConfirm: function onConfirm(text) {
+        _onChange === null || _onChange === void 0 || _onChange(text);
+        setTyping(false);
+      },
+      placeholder: placeholder,
+      style: stylesProps === null || stylesProps === void 0 ? void 0 : stylesProps.input,
+      text: text,
+      textareaClassname: classNames === null || classNames === void 0 ? void 0 : classNames.input,
+      type: inputType
+    })
   });
   if (!value && showEditWhenEmpty) return input;
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -87,23 +94,26 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref2) {
         overflowY: 'auto'
       }, stylesProps === null || stylesProps === void 0 ? void 0 : stylesProps.markdown),
       children: value || placeholder
-    }), /*#__PURE__*/_jsx(MessageModal, {
-      editing: isEdit,
-      extra: model === null || model === void 0 ? void 0 : model.extra,
-      footer: model === null || model === void 0 ? void 0 : model.footer,
-      height: height,
-      onChange: function onChange(text) {
-        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
-      },
-      onEditingChange: setTyping,
-      onOpenChange: function onOpenChange(e) {
-        setExpand(e);
-        setTyping(false);
-      },
-      open: expand,
-      placeholder: placeholder,
-      text: text,
-      value: value
+    }), /*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: /*#__PURE__*/_jsx(MessageModal, {
+        editing: isEdit,
+        extra: model === null || model === void 0 ? void 0 : model.extra,
+        footer: model === null || model === void 0 ? void 0 : model.footer,
+        height: height,
+        onChange: function onChange(text) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
+        },
+        onEditingChange: setTyping,
+        onOpenChange: function onOpenChange(e) {
+          setExpand(e);
+          setTyping(false);
+        },
+        open: expand,
+        placeholder: placeholder,
+        text: text,
+        value: value
+      })
     })]
   });
 });

package/es/EmojiPicker/index.js

@@ -1,32 +1,53 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import data from '@emoji-mart/data';
-import Picker from '@emoji-mart/react';
+import DEFAULT_I18N from '@emoji-mart/data/i18n/en.json';
 import { Avatar } from "./..";
 import { Popover } from 'antd';
-import { memo } from 'react';
+import { Suspense, lazy, memo } from 'react';
 import useSWR from 'swr';
 import useMergeState from 'use-merge-value';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+var Picker = /*#__PURE__*/lazy(function () {
+  return import('@emoji-mart/react');
+});
+var DEFAULT_EMOJI = '🤖';
+var DEFAULT_LOCALE = 'en-US';
+var DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
+var formatLocale = function formatLocale(locale) {
+  return locale.split('-')[0];
+};
 var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
   var value = _ref.value,
     _ref$defaultAvatar = _ref.defaultAvatar,
-    defaultAvatar = _ref$defaultAvatar === void 0 ? '🤖' : _ref$defaultAvatar,
+    defaultAvatar = _ref$defaultAvatar === void 0 ? DEFAULT_EMOJI : _ref$defaultAvatar,
     _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? 'rgba(0,0,0,0)' : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? DEFAULT_BACKGROUND_COLOR : _ref$backgroundColor,
     onChange = _ref.onChange,
     _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
-  var _useSWR = useSWR(locale, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    locale = _ref$locale === void 0 ? DEFAULT_LOCALE : _ref$locale;
+  var _useMergeState = useMergeState(locale, {
+      defaultValue: locale
+    }),
+    _useMergeState2 = _slicedToArray(_useMergeState, 2),
+    emojiLocale = _useMergeState2[0],
+    setEmojiLocale = _useMergeState2[1];
+  var _useMergeState3 = useMergeState('🤖', {
+      defaultValue: defaultAvatar,
+      onChange: onChange,
+      value: value
+    }),
+    _useMergeState4 = _slicedToArray(_useMergeState3, 2),
+    ava = _useMergeState4[0],
+    setAva = _useMergeState4[1];
+  var _useSWR = useSWR(emojiLocale === DEFAULT_LOCALE ? null : emojiLocale, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return import("@emoji-mart/data/i18n/".concat(locale.split('-')[0], ".json"));
+            return import("@emoji-mart/data/i18n/".concat(formatLocale(emojiLocale), ".json"));
           case 2:
             return _context.abrupt("return", _context.sent);
           case 3:
@@ -34,28 +55,32 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
             return _context.stop();
         }
       }, _callee);
-    }))),
-    i18n = _useSWR.data;
-  var _useMergeState = useMergeState('🤖', {
-      defaultValue: defaultAvatar,
-      onChange: onChange,
-      value: value
+    })), {
+      onError: function onError() {
+        return setEmojiLocale(DEFAULT_LOCALE);
+      },
+      onErrorRetry: function onErrorRetry() {
+        return setEmojiLocale(DEFAULT_LOCALE);
+      }
     }),
-    _useMergeState2 = _slicedToArray(_useMergeState, 2),
-    ava = _useMergeState2[0],
-    setAva = _useMergeState2[1];
+    i18n = _useSWR.data;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
   return /*#__PURE__*/_jsx(Popover, {
     content: /*#__PURE__*/_jsx("div", {
       className: styles.picker,
-      children: /*#__PURE__*/_jsx(Picker, {
-        data: data,
-        i18n: i18n,
-        locale: locale.split('-')[0],
-        onEmojiSelect: function onEmojiSelect(e) {
-          return setAva(e.native);
-        },
-        skinTonePosition: 'none',
-        theme: 'auto'
+      children: /*#__PURE__*/_jsx(Suspense, {
+        fallback: null,
+        children: /*#__PURE__*/_jsx(Picker, {
+          data: data,
+          i18n: i18n || DEFAULT_I18N,
+          locale: formatLocale(emojiLocale) || DEFAULT_LOCALE,
+          onEmojiSelect: function onEmojiSelect(e) {
+            return setAva(e.native);
+          },
+          skinTonePosition: 'none',
+          theme: 'auto'
+        })
       })
     }),
     placement: 'left',

package/es/Giscus/index.d.ts

@@ -1,5 +1,5 @@
 import { type GiscusProps as GiscusComponentProps } from '@giscus/react';
-import { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 export interface GiscusProps extends GiscusComponentProps {
     className?: string;
     style?: CSSProperties;

package/es/Highlighter/index.js

@@ -3,15 +3,17 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
 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; }
-import { memo } from 'react';
+import { Suspense, lazy, memo } from 'react';
 import CopyButton from "../CopyButton";
-import Spotlight from "../Spotlight";
 import Tag from "../Tag";
 import FullFeatured from "./FullFeatured";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Spotlight = /*#__PURE__*/lazy(function () {
+  return import("../Spotlight");
+});
 export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var fullFeatured = _ref.fullFeatured,
     _ref$copyButtonSize = _ref.copyButtonSize,
@@ -44,8 +46,11 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     "data-code-type": "highlighter",
     style: style
   }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {
-      size: 240
+    children: [/*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: spotlight && /*#__PURE__*/_jsx(Spotlight, {
+        size: 240
+      })
     }), copyable && /*#__PURE__*/_jsx(CopyButton, {
       className: styles.button,
       content: children,

package/es/Icon/calcSize.d.ts

@@ -0,0 +1,5 @@
+import { IconSize } from "./index";
+export declare const calcSize: (size?: IconSize) => {
+    fontSize: string | number;
+    strokeWidth: string | number;
+};

package/es/Icon/calcSize.js

@@ -0,0 +1,39 @@
+export var calcSize = function calcSize(size) {
+  var fontSize;
+  var strokeWidth;
+  switch (size) {
+    case 'large':
+      {
+        fontSize = 24;
+        strokeWidth = 2;
+        break;
+      }
+    case 'normal':
+      {
+        fontSize = 20;
+        strokeWidth = 2;
+        break;
+      }
+    case 'small':
+      {
+        fontSize = 14;
+        strokeWidth = 1.5;
+        break;
+      }
+    default:
+      {
+        if (size) {
+          fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
+          strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
+        } else {
+          fontSize = '1em';
+          strokeWidth = 2;
+        }
+        break;
+      }
+  }
+  return {
+    fontSize: fontSize,
+    strokeWidth: strokeWidth
+  };
+};

package/es/Icon/index.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
-import { LucideIcon } from 'lucide-react';
+import { LucideIcon, LucideProps } from 'lucide-react';
 import { DivProps } from "../types";
-export type IconSize = 'large' | 'normal' | 'small' | {
+export interface IconSizeConfig extends Pick<LucideProps, 'strokeWidth' | 'absoluteStrokeWidth'> {
     fontSize?: number;
-    strokeWidth?: number;
-};
-export interface IconProps extends DivProps {
-    color?: string;
-    fill?: string;
+}
+export type IconSizeType = 'large' | 'normal' | 'small';
+export type IconSize = IconSizeType | IconSizeConfig;
+export interface IconProps extends DivProps, Pick<LucideProps, 'fill' | 'fillRule' | 'fillOpacity' | 'color' | 'focusable'> {
     /**
      * @description The icon element to be rendered
      * @type LucideIcon
@@ -24,5 +23,5 @@ export interface IconProps extends DivProps {
      */
     spin?: boolean;
 }
-declare const Icon: import("react").NamedExoticComponent<IconProps>;
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export default Icon;

package/es/Icon/index.js

@@ -1,57 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "size", "color", "fill", "className", "spin"];
+var _excluded = ["icon", "size", "color", "fill", "className", "focusable", "spin", "fillRule", "fillOpacity"],
+  _excluded2 = ["fontSize"];
 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; }
-import { memo, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { calcSize } from "./calcSize";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var calcSize = function calcSize(size) {
-  var fontSize;
-  var strokeWidth;
-  switch (size) {
-    case 'large':
-      {
-        fontSize = 24;
-        strokeWidth = 2;
-        break;
-      }
-    case 'normal':
-      {
-        fontSize = 20;
-        strokeWidth = 2;
-        break;
-      }
-    case 'small':
-      {
-        fontSize = 14;
-        strokeWidth = 1.5;
-        break;
-      }
-    default:
-      {
-        if (size) {
-          fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
-          strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
-        } else {
-          fontSize = '1em';
-          strokeWidth = 2;
-        }
-        break;
-      }
-  }
-  return {
-    fontSize: fontSize,
-    strokeWidth: strokeWidth
-  };
-};
-var Icon = /*#__PURE__*/memo(function (_ref) {
+var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
     size = _ref.size,
     color = _ref.color,
-    fill = _ref.fill,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? 'transparent' : _ref$fill,
     className = _ref.className,
+    focusable = _ref.focusable,
     spin = _ref.spin,
+    fillRule = _ref.fillRule,
+    fillOpacity = _ref.fillOpacity,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
@@ -61,20 +28,22 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
       return calcSize(size);
     }, [size]),
     fontSize = _useMemo.fontSize,
-    strokeWidth = _useMemo.strokeWidth;
+    restSize = _objectWithoutProperties(_useMemo, _excluded2);
   return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
     className: cx('anticon', spin && styles.spin, className),
     role: "img"
   }, rest), {}, {
-    children: /*#__PURE__*/_jsx(SvgIcon, {
+    children: /*#__PURE__*/_jsx(SvgIcon, _objectSpread({
       color: color,
-      fill: fill !== null && fill !== void 0 ? fill : 'transparent',
-      focusable: false,
+      fill: fill,
+      fillOpacity: fillOpacity,
+      fillRule: fillRule,
+      focusable: focusable,
       height: fontSize,
+      ref: ref,
       size: fontSize,
-      strokeWidth: strokeWidth,
       width: fontSize
-    })
+    }, restSize))
   }));
 });
 export default Icon;

package/es/SearchBar/index.js

@@ -5,15 +5,17 @@ var _excluded = ["defaultValue", "spotlight", "className", "value", "onInputChan
 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; }
 import { Search } from 'lucide-react';
-import { memo, useEffect, useRef, useState } from 'react';
+import { Suspense, lazy, memo, useEffect, useRef, useState } from 'react';
 import useControlledState from 'use-merge-value';
 import Icon from "../Icon";
 import { Input } from "../Input";
-import Spotlight from "../Spotlight";
 import Tag from "../Tag";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Spotlight = /*#__PURE__*/lazy(function () {
+  return import("../Spotlight");
+});
 var SearchBar = /*#__PURE__*/memo(function (_ref) {
   var defaultValue = _ref.defaultValue,
     spotlight = _ref.spotlight,
@@ -66,7 +68,10 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.search, className),
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(Input, _objectSpread({
+    children: [/*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: spotlight && /*#__PURE__*/_jsx(Spotlight, {})
+    }), /*#__PURE__*/_jsx(Input, _objectSpread({
       allowClear: true,
       className: styles.input,
       onBlur: function onBlur() {

package/es/Snippet/index.js

@@ -3,13 +3,15 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight", "className"];
 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; }
-import { memo } from 'react';
+import { Suspense, lazy, memo } from 'react';
 import CopyButton from "../CopyButton";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
-import Spotlight from "../Spotlight";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Spotlight = /*#__PURE__*/lazy(function () {
+  return import("../Spotlight");
+});
 var Snippet = /*#__PURE__*/memo(function (_ref) {
   var symbol = _ref.symbol,
     _ref$language = _ref.language,
@@ -28,7 +30,10 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
   }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+    children: [/*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: spotlight && /*#__PURE__*/_jsx(Spotlight, {})
+    }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language,
       children: [symbol, children].filter(Boolean).join(' ')
     }), copyable && /*#__PURE__*/_jsx(CopyButton, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.115.3",
+  "version": "1.116.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",