@lobehub/ui 1.14.2 → 1.16.0

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/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/style.js

@@ -6,7 +6,7 @@ var toggleLength = 40;
 var toggleShort = 16;
 export var useStyle = createStyles(function (_ref, prefix) {
   var token = _ref.token;
-  var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
+  var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", " !important;\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
   var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 1001;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
   var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 2000;\n  "])));
   return {

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/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/StroyBook/index.js

@@ -29,16 +29,19 @@ export var StroyBook = /*#__PURE__*/memo(function (_ref) {
     children: [/*#__PURE__*/_jsx("div", {
       className: styles.left,
       children: children
-    }), /*#__PURE__*/_jsxs(DraggablePanel, {
+    }), /*#__PURE__*/_jsx(DraggablePanel, {
       className: styles.right,
       placement: mobile ? 'bottom' : 'right',
       minWidth: 280,
-      children: [/*#__PURE__*/_jsx(LevaPanel, {
-        fill: true,
-        store: levaStore,
-        titleBar: false,
-        flat: true
-      }), ' ']
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.leva,
+        children: [/*#__PURE__*/_jsx(LevaPanel, {
+          fill: true,
+          store: levaStore,
+          titleBar: false,
+          flat: true
+        }), ' ']
+      })
     })]
   }));
 });

package/es/StroyBook/style.d.ts

@@ -5,4 +5,5 @@ export declare const useStyles: (props?: {
     editor: import("antd-style").SerializedStyles;
     left: import("antd-style").SerializedStyles;
     right: import("antd-style").SerializedStyles;
+    leva: import("antd-style").SerializedStyles;
 }>;

package/es/StroyBook/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
@@ -9,6 +9,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBgLayout, token.colorFillSecondary)
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorBgLayout),
+    leva: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n        padding: 6px 0;\n\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorFillSecondary)
   };
 });

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/styles/algorithms/generateColorPalette.js

@@ -12,10 +12,10 @@ export var generateColorNeutralPalette = function generateColorNeutralPalette(_r
   var scale = _ref3.scale,
     appearance = _ref3.appearance;
   return {
-    colorText: scale["".concat(appearance, "A")][12],
-    colorTextSecondary: scale["".concat(appearance, "A")][10],
-    colorTextTertiary: scale["".concat(appearance, "A")][8],
-    colorTextQuaternary: scale["".concat(appearance, "A")][6],
+    colorText: scale[appearance][12],
+    colorTextSecondary: scale[appearance][10],
+    colorTextTertiary: scale[appearance][8],
+    colorTextQuaternary: scale[appearance][6],
     colorBorder: scale[appearance][4],
     colorBorderSecondary: scale[appearance][3],
     colorFill: scale["".concat(appearance, "A")][3],

package/es/styles/algorithms/generateCustomStylish.js

@@ -14,6 +14,6 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     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    "]))),
-    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      code,\n      pre * {\n        font-size: ", "px;\n      }\n\n      pre {\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\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.fontSizeSM, token.borderRadius, 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)
+    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/algorithms/generateCustomToken.js

@@ -32,7 +32,8 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
 
 // @ts-ignore
 export var generateCustomToken = function generateCustomToken(_ref4) {
-  var isDarkMode = _ref4.isDarkMode;
+  var isDarkMode = _ref4.isDarkMode,
+    token = _ref4.token;
   var colorCustomToken = {};
   Object.entries(colorScales).forEach(function (_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
@@ -48,7 +49,7 @@ export var generateCustomToken = function generateCustomToken(_ref4) {
   var gradientColor2 = isDarkMode ? colorScales.magenta.darkA[8] : colorScales.cyan.darkA[8];
   var gradientColor3 = colorScales.purple.darkA[8];
   var colorSolid = isDarkMode ? '#fff' : '#000';
-  return _objectSpread(_objectSpread({}, colorCustomToken), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, token), colorCustomToken), {}, {
     headerHeight: 64,
     footerHeight: 300,
     sidebarWidth: 240,

package/es/styles/colors.js

@@ -73,9 +73,9 @@ export var colorScales = {
   },
   gray: {
     light: ['#ffffff', '#f8f8f8', '#eeeeee', '#e3e3e3', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#666666', '#333333', '#080808'],
-    lightA: ['rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.04)', 'rgba(0, 0, 0, 0.08)', '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)'],
+    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.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']
+    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']
   },
   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.14.2",
+  "version": "1.16.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",