@lobehub/ui 1.15.0 → 1.16.1

package/es/ActionIcon/style.d.ts

@@ -2,5 +2,5 @@ export declare const useStyles: (props?: {
     active: boolean;
     glass: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
-    block: import("antd-style").SerializedStyles;
+    block: string;
 }>;

package/es/ActionIcon/style.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        color: ", ";\n\n        background: ", ";\n\n        transition: color 600ms ", ",\n          background-color 100ms ", ";\n\n        ", "\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, glass && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          backdrop-filter: saturate(180%) blur(10px);\n        "]))), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: color 600ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
   };
 });

package/es/Avatar/index.d.ts

@@ -1,9 +1,26 @@
 import { FC } from 'react';
 export interface AvatarProps {
+    /**
+     * @description The URL or base64 data of the avatar image
+     */
     avatar?: string;
+    /**
+     * @description The title text to display if avatar is not provided
+     */
     title?: string;
+    /**
+     * @description The size of the avatar in pixels
+     * @default 40
+     */
     size?: number;
+    /**
+     * @description The shape of the avatar
+     * @default 'circle'
+     */
     shape?: 'circle' | 'square';
+    /**
+     * @description The background color of the avatar
+     */
     background?: string;
 }
 declare const Avatar: FC<AvatarProps>;

package/es/Avatar/index.js

@@ -1,25 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { Avatar as A } from 'antd';
-import { createStyles } from 'antd-style';
 import { Center } from 'react-layout-kit';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
-  return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    > * {\n      cursor: pointer;\n    }\n  "]))),
-    border: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), token.colorBorder)
-  };
-});
-var Avatar = function Avatar(_ref2) {
-  var avatar = _ref2.avatar,
-    title = _ref2.title,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 40 : _ref2$size,
-    _ref2$shape = _ref2.shape,
-    shape = _ref2$shape === void 0 ? 'circle' : _ref2$shape,
-    background = _ref2.background;
+var Avatar = function Avatar(_ref) {
+  var avatar = _ref.avatar,
+    title = _ref.title,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 40 : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
+    background = _ref.background;
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     theme = _useStyles.theme;

package/es/Avatar/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    border: import("antd-style").SerializedStyles;
+}>;

package/es/Avatar/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    > * {\n      cursor: pointer;\n    }\n  "]))),
+    border: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), token.colorBorder)
+  };
+});

package/es/ContextMenu/index.d.ts

@@ -1,8 +1,17 @@
 import { HTMLProps } from 'react';
 import { MenuItemType } from './types';
 export interface ContextMenuProps {
+    /**
+     * @description Label for the context menu
+     */
     label?: string;
+    /**
+     * @description Items to be displayed in the context menu
+     */
     items: MenuItemType[];
+    /**
+     * @description Container element for the context menu
+     */
     container?: HTMLElement;
 }
 declare const ContextMenu: import("react").ForwardRefExoticComponent<Omit<ContextMenuProps & HTMLProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/es/Conversation/App.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 export interface AppProps {
     /**
-     * @title 是否只读
+     * @description Whether the component is in readonly mode.
+     * @default false
      */
     readonly?: boolean;
     /**
-     * @title 是否包含系统消息
+     * @description Whether to include system messages in the chat.
+     * @default true
      */
     includeSystem?: boolean;
 }

package/es/Conversation/ChatList/MessageItem/Toolbar.js

@@ -16,9 +16,11 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background: ", ";\n      backdrop-filter: blur(6px);\n      border-radius: 4px;\n    "])), rgba(token.colorBgElevated, 0.2))
+    container: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        background: ", ";\n        border-radius: 4px;\n      "])), rgba(token.colorBgElevated, 0.2)))
   };
 });
 var Toolbar = /*#__PURE__*/memo(function (_ref2) {

package/es/Conversation/index.d.ts

@@ -2,6 +2,10 @@
 import { AppProps } from './App';
 import { StoreUpdaterProps } from './StoreUpdater';
 export interface ConversationProps extends StoreUpdaterProps, AppProps {
+    /**
+     * @description Whether to enable devtools or not
+     * @default false
+     */
     devtools?: boolean;
 }
 declare const Conversation: import("react").NamedExoticComponent<ConversationProps>;

package/es/DraggablePanel/index.js

@@ -183,7 +183,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     },
     children: children
   }));
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs("aside", {
     ref: ref,
     className: cx(styles.container,
     // @ts-ignore

package/es/EditableMessage/index.d.ts

@@ -1,41 +1,50 @@
 /// <reference types="react" />
 export interface EditableMessageProps {
     /**
-     * @title 当前文本值
+     * @title The current text value
      */
     value: string;
     /**
-     * @title 值改变时的回调函数
-     * @param value - 改变后的值
+     * @title Callback function when the value changes
+     * @param value - The new value
      */
     onChange?: (value: string) => void;
     /**
-     * @title 是否打开模态框
+     * @title Whether the modal is open or not
      * @default false
      */
     openModal?: boolean;
     /**
-     * @title 模态框打开状态变化的回调函数
-     * @param open - 模态框是否打开
+     * @title Callback function when the modal open state changes
+     * @param open - Whether the modal is open or not
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * @title 是否处于编辑状态
+     * @title Whether the component is in edit mode or not
      * @default false
      */
     editing?: boolean;
     /**
-     * @title 编辑状态变化的回调函数
-     * @param editing - 是否处于编辑状态
+     * @title Callback function when the editing state changes
+     * @param editing - Whether the component is in edit mode or not
      */
     onEditingChange?: (editing: boolean) => void;
     /**
-     * @title 当文本值为空时是否显示编辑按钮
+     * @title Whether to show the edit button when the text value is empty
      * @default false
      */
     showEditWhenEmpty?: boolean;
+    /**
+     * @title The class name for the Markdown and MessageInput component
+     */
     classNames?: {
+        /**
+         * @title The class name for the Markdown component
+         */
         markdown?: string;
+        /**
+         * @title The class name for the MessageInput component
+         */
         input?: string;
     };
 }

package/es/EditableMessageList/index.d.ts

@@ -1,8 +1,19 @@
 /// <reference types="react" />
 import { ChatMessage } from "../Chat";
 export interface EditableMessageListProps {
+    /**
+     * @description The data sources to be rendered
+     */
     dataSources: ChatMessage[];
+    /**
+     * @description Callback function triggered when the data sources are changed
+     * @param chatMessages - the updated data sources
+     */
     onChange?: (chatMessages: ChatMessage[]) => void;
+    /**
+     * @description Whether the component is disabled or not
+     * @default false
+     */
     disabled?: boolean;
 }
 export declare const EditableMessageList: import("react").NamedExoticComponent<EditableMessageListProps>;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useHighlight } from "../../hooks/useHighlight";
 import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
+import { useThemeMode } from 'antd-style';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
-import { useThemeMode } from 'antd-style';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("div", {
-      className: styles.prism,
+      className: styles.shiki,
       children: /*#__PURE__*/_jsx("pre", {
         children: /*#__PURE__*/_jsx("code", {
           children: children
@@ -48,7 +48,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
         style: {
           color: theme.colorTextTertiary
         }
-      }), "shiki rendering..."]
+      }), "Highlighting..."]
     })]
   });
 });

package/es/Highlighter/SyntaxHighlighter/style.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     shiki: string;
     prism: import("antd-style").SerializedStyles;
-    loading: import("antd-style").SerializedStyles;
+    loading: string;
 }>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -5,11 +5,12 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token,
     cx = _ref.cx,
-    prefixCls = _ref.prefixCls;
+    prefixCls = _ref.prefixCls,
+    stylish = _ref.stylish;
   var prefix = "".concat(prefixCls, "-highlighter");
   return {
     shiki: cx("".concat(prefix, "-shiki"), css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        .shiki {\n          overflow-x: scroll;\n          background: none !important;\n        }\n      "])))),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow-x: scroll;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    loading: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 0;\n      right: 0;\n\n      padding: 4px 8px;\n\n      color: ", ";\n\n      backdrop-filter: saturate(180%) blur(10px);\n      border-radius: ", ";\n    "])), token.colorTextTertiary, token.borderRadiusSM)
+    loading: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 0;\n        right: 0;\n\n        padding: 4px 8px;\n\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.colorTextTertiary, token.borderRadiusSM))
   };
 });

package/es/Icon/index.js

@@ -5,8 +5,7 @@ import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'normal' : _ref$size,
+    size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded);
   var fontSize;
   var strokeWidth;
@@ -25,8 +24,13 @@ var Icon = function Icon(_ref) {
       strokeWidth = 1.5;
       break;
     default:
-      fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
-      strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
+      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 /*#__PURE__*/_jsx(SvgIcon, _objectSpread({

package/es/MessageModal/index.d.ts

@@ -1,10 +1,30 @@
 /// <reference types="react" />
 export interface MessageModalProps {
+    /**
+     * @description Whether the modal is open or not
+     * @default false
+     */
     open?: boolean;
+    /**
+     * @description Callback fired when open state is changed
+     */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * @description Whether the message is being edited or not
+     * @default false
+     */
     editing?: boolean;
+    /**
+     * @description Callback fired when editing state is changed
+     */
     onEditingChange?: (editing: boolean) => void;
+    /**
+     * @description Callback fired when message content is changed
+     */
     onChange?: (text: string) => void;
+    /**
+     * @description The value of the message content
+     */
     value: string;
 }
 declare const MessageModal: import("react").NamedExoticComponent<MessageModalProps>;

package/es/MessageModal/index.js

@@ -1,31 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+import Markdown from "../Markdown";
+import MessageInput from "../MessageInput";
 import { AimOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
-import Markdown from "../Markdown";
-import MessageInput from "../MessageInput";
+import { useStyles } from "./style";
 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,
-    prefixCls = _ref.prefixCls;
-  return {
-    modal: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 70%;\n    .", "-modal-header {\n      margin-bottom: 24px;\n    }\n  "])), prefixCls),
-    body: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow-y: scroll;\n    max-height: 70vh;\n  "])))
-  };
-});
-var MessageModal = /*#__PURE__*/memo(function (_ref2) {
-  var editing = _ref2.editing,
-    open = _ref2.open,
-    onOpenChange = _ref2.onOpenChange,
-    onEditingChange = _ref2.onEditingChange,
-    value = _ref2.value,
-    onChange = _ref2.onChange;
+var MessageModal = /*#__PURE__*/memo(function (_ref) {
+  var editing = _ref.editing,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    onEditingChange = _ref.onEditingChange,
+    value = _ref.value,
+    onChange = _ref.onChange;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   var _useControlledState = useControlledState(false, {

package/es/MessageModal/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    modal: import("antd-style").SerializedStyles;
+    body: import("antd-style").SerializedStyles;
+}>;

package/es/MessageModal/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    prefixCls = _ref.prefixCls;
+  return {
+    modal: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 70%;\n    .", "-modal-header {\n      margin-bottom: 24px;\n    }\n  "])), prefixCls),
+    body: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow-y: scroll;\n    max-height: 70vh;\n  "])))
+  };
+});

package/es/SearchBar/index.d.ts

@@ -1,7 +1,15 @@
 /// <reference types="react" />
 import { InputProps } from "../index";
 export interface SearchBarProps extends InputProps {
+    /**
+     * @description The shortcut key to focus on the input. Only works if `enableShortKey` is true
+     * @default 'f'
+     */
     shortKey?: string;
+    /**
+     * @description Whether to enable the shortcut key to focus on the input
+     * @default false
+     */
     enableShortKey?: boolean;
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;

package/es/Swatches/index.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
 export interface SwatchesProps {
+    /**
+     * @description An array of colors to be displayed as swatches
+     */
     colors: string[];
+    /**
+     * @description The currently active color
+     * @default undefined
+     */
     activeColor?: string;
+    /**
+     * @description A function to be called when a swatch is selected
+     * @default undefined
+     */
     onSelect?: (c: string | null) => void;
 }
 declare const Swatches: import("react").NamedExoticComponent<SwatchesProps>;

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n\n  * {\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    background-color: transparent;\n\n    &-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  code {\n\t  font-family: ", " !important;\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n  \n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::-webkit-scrollbar {\n\t  width: 0;\n\t  height: 4px;\n\t  background-color: transparent;\n\n\t  &-thumb {\n\t\t  background-color: transparent;\n\t\t  border-radius: 4px;\n\t\t  transition: background-color 500ms ", ";\n\t  }\n\n\t  &-corner {\n\t\t  display: none;\n\t  }\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n  \n  code {\n\t  font-family: ", " !important;\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n\n  *:hover, *:focus {\n\t  ::-webkit-scrollbar {\n\t\t  &-thumb {\n\t\t\t  background-color: ", ";\n\t\t  }\n\t  }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -15,9 +15,12 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
   return theme.colorBgLayout;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.colorFill;
+  return theme.motionEaseOut;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.fontFamilyCode;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.colorFill;
 });
 export default GlobalStyle;

package/es/styles/algorithms/generateCustomStylish.js

@@ -13,7 +13,7 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     heroGradientFlow: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      animation: flow 5s ease infinite;\n\n      @keyframes flow {\n        0% {\n          background-position: 0 0;\n        }\n\n        50% {\n          background-position: 100% 100%;\n        }\n\n        100% {\n          background-position: 0 0;\n        }\n      }\n    "]))),
     heroBlurBall: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      will-change: transform;\n\n      background: linear-gradient(\n        135deg,\n        ", " 0%,\n        ", " 30%,\n        ", " 70%,\n        ", " 100%\n      );\n      background-size: 200% 200%;\n      filter: blur(69px);\n\n      animation: glow 10s ease infinite;\n\n      @keyframes glow {\n        0% {\n          background-position: 0 -100%;\n        }\n\n        50% {\n          background-position: 200% 50%;\n        }\n\n        100% {\n          background-position: 0 -100%;\n        }\n      }\n    "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
     iconGradientDefault: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-image: radial-gradient(\n        100% 100% at 50% 0,\n        ", " 0,\n        ", " 100%\n      );\n    "])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
-    blur: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(7px);\n    "]))),
+    blur: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
     markdown: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
   };
 };

package/es/styles/colors.js

@@ -75,7 +75,7 @@ export var colorScales = {
     light: ['#ffffff', '#f8f8f8', '#eeeeee', '#e3e3e3', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#666666', '#333333', '#080808'],
     lightA: ['rgba(0, 0, 0, 0.015)', 'rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.06)', 'rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.18)', 'rgba(0, 0, 0, 0.24)', 'rgba(0, 0, 0, 0.32)', 'rgba(0, 0, 0, 0.38)', 'rgba(0, 0, 0, 0.44)', 'rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.68)', 'rgba(0, 0, 0, 0.84)', 'rgba(0, 0, 0, 0.98)'],
     dark: ['#000000', '#111111', '#222222', '#2d2d2d', '#333333', '#444444', '#555555', '#666666', '#6f6f6f', '#777777', '#aaaaaa', '#dddddd', '#ffffff'],
-    darkA: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.04)', 'rgba(255, 255, 255, 0.08)', 'rgba(255, 255, 255, 0.16)', 'rgba(255, 255, 255, 0.24)', 'rgba(255, 255, 255, 0.28)', 'rgba(255, 255, 255, 0.32)', 'rgba(255, 255, 255, 0.38)', 'rgba(255, 255, 255, 0.44)', 'rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 255, 0.66)', 'rgba(255, 255, 255, 0.84)', '#ffffff']
+    darkA: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.06)', 'rgba(255, 255, 255, 0.10)', 'rgba(255, 255, 255, 0.16)', 'rgba(255, 255, 255, 0.24)', 'rgba(255, 255, 255, 0.28)', 'rgba(255, 255, 255, 0.32)', 'rgba(255, 255, 255, 0.38)', 'rgba(255, 255, 255, 0.44)', 'rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 255, 0.66)', 'rgba(255, 255, 255, 0.84)', '#ffffff']
   },
   bnw: {
     light: ['#ffffff', '#f5f5f5', '#eeeeee', '#cccccc', '#aaaaaa', '#888888', '#666666', '#444444', '#333333', '#222222', '#111111', '#111111', '#111111'],

package/package.json

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