@lobehub/ui 1.26.0 → 1.26.2

package/es/Hero/style.js

@@ -2,26 +2,27 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
+  var cx = _ref.cx,
+    css = _ref.css,
     responsive = _ref.responsive,
     token = _ref.token,
     stylish = _ref.stylish;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  "]))),
-    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    z-index: 10;\n    margin: 0;\n    font-size: 100px;\n\n    ", "\n\n    b {\n      ", "\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n    }\n  "])), responsive({
-      mobile: {
-        fontSize: 72,
-        flexDirection: 'column',
-        display: 'flex',
-        lineHeight: 1.2
-      }
-    }), stylish.gradientAnimation),
-    desc: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: 0;\n    font-size: ", "px;\n    color: ", ";\n    text-align: center;\n\n    ", " {\n      margin: 24px 16px;\n      font-size: ", "px;\n    }\n  "])), token.fontSizeHeading3, token.colorTextSecondary, responsive.mobile, token.fontSizeHeading5),
-    actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    margin-top: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", "\n  "])), responsive({
+    actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    margin-top: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", "\n  "])), responsive({
       mobile: {
         marginTop: 24
       }
     })),
-    canvas: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", ";\n    filter: blur(100px);\n\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 10;\n    top: -250px;\n    left: 50%;\n    transform: translateX(-50%) scale(1.5);\n\n    width: 600px;\n    height: 400px;\n\n    opacity: 0.2;\n\n    ", " {\n      width: 200px;\n      height: 300px;\n    }\n  "])), stylish.gradientAnimation, responsive.mobile)
+    canvas: cx(stylish.gradientAnimation, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 10;\n      top: -250px;\n      left: 50%;\n      transform: translateX(-50%) scale(1.5);\n\n      width: 600px;\n      height: 400px;\n\n      opacity: 0.2;\n      filter: blur(100px);\n\n      ", " {\n        width: 200px;\n        height: 300px;\n      }\n    "])), responsive.mobile)),
+    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  "]))),
+    desc: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-top: 0;\n    font-size: ", "px;\n    color: ", ";\n    text-align: center;\n\n    ", " {\n      margin: 24px 16px;\n      font-size: ", "px;\n    }\n  "])), token.fontSizeHeading3, token.colorTextSecondary, responsive.mobile, token.fontSizeHeading5),
+    title: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: 10;\n    margin: 0;\n    font-size: 100px;\n\n    ", "\n\n    b {\n      ", "\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n    }\n  "])), responsive({
+      mobile: {
+        display: 'flex',
+        flexDirection: 'column',
+        fontSize: 72,
+        lineHeight: 1.2
+      }
+    }), stylish.gradientAnimation)
   };
 });

package/es/Highlighter/SyntaxHighlighter/Prism.js

@@ -21,18 +21,18 @@ export var Prism = /*#__PURE__*/memo(function (_ref) {
       return /*#__PURE__*/_jsx("pre", {
         className: className,
         style: style,
-        children: tokens.map(function (line, i) {
+        children: tokens.map(function (line, index) {
           return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, getLineProps({
-            line: line,
-            key: i
+            key: index,
+            line: line
           })), {}, {
             children: line.map(function (token, key) {
               return /*#__PURE__*/_jsx("span", _objectSpread({}, getTokenProps({
-                token: token,
-                key: key
-              })), i);
+                key: key,
+                token: token
+              })), index);
             })
-          }), i);
+          }), index);
         })
       });
     }

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -4,8 +4,8 @@ import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
+import Icon from "../../Icon";
 import { useHighlight } from "../../hooks/useHighlight";
-import { Icon } from "../..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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: string;
+    prism: import("antd-style").SerializedStyles;
+    shiki: string;
 }>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -9,8 +9,8 @@ export var useStyles = createStyles(function (_ref) {
     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      "])))),
+    loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        right: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        height: 34px;\n        padding: 0 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow-x: scroll;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    loading: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        right: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        height: 34px;\n        padding: 0 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius))
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .shiki {\n          overflow-x: scroll;\n          background: none !important;\n        }\n      "]))))
   };
 });

package/es/Highlighter/index.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
-import SyntaxHighlighter, { type SyntaxHighlighterProps } from './SyntaxHighlighter';
-export { SyntaxHighlighter, SyntaxHighlighterProps };
 export interface HighlighterProps extends DivProps {
     /**
      * @description The code content to be highlighted
@@ -39,3 +37,4 @@ export interface HighlighterProps extends DivProps {
 }
 export declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
 export default Highlighter;
+export { default as SyntaxHighlighter, type SyntaxHighlighterProps } from './SyntaxHighlighter';

package/es/Highlighter/index.js

@@ -4,12 +4,12 @@ var _excluded = ["children", "language", "className", "style", "theme", "copyabl
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
-import { CopyButton, Spotlight } from "./..";
+import CopyButton from "../CopyButton";
+import Spotlight from "../Spotlight";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export { SyntaxHighlighter };
 export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language,
@@ -49,4 +49,5 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     })]
   }));
 });
-export default Highlighter;
+export default Highlighter;
+export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Highlighter/style.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyles: (props?: "block" | "ghost" | "pure" | undefined) => import("antd-style").ReturnStyles<{
-    container: string;
     button: string;
+    container: string;
     lang: string;
 }>;

package/es/Highlighter/style.js

@@ -11,8 +11,8 @@ export var useStyles = createStyles(function (_ref, type) {
   var langHoverCls = "".concat(prefix, "-hover-lang");
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
   return {
-    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
-    button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: ", ";\n          right: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
+    button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: ", ";\n          right: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
+    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
     lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 50;\n          right: 8px;\n          bottom: 8px;\n\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.colorTextPlaceholder))
   };
 });

package/es/Highlighter/theme.js

@@ -9,36 +9,38 @@ export var themeConfig = function themeConfig(isDarkMode) {
   var colorGreen = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][9];
   var colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][9];
   return {
+    colors: {
+      'editor.foreground': colorTextSecondary
+    },
     name: type,
-    type: type,
     semanticHighlighting: true,
     semanticTokenColors: {
-      enumMember: {
-        foreground: colorBlue
-      },
-      'variable.constant': {
+      'annotation:dart': {
         foreground: colorGreen
       },
-      'variable.defaultLibrary': {
-        foreground: colorRed
+      'enumMember': {
+        foreground: colorBlue
       },
-      'variable:dart': {
+      'macro': {
         foreground: colorGreen
       },
-      'property:dart': {
-        foreground: colorGreen
+      'parameter.label:dart': {
+        foreground: colorTextTertiary
       },
-      'annotation:dart': {
+      'property:dart': {
         foreground: colorGreen
       },
-      'parameter.label:dart': {
-        foreground: colorTextTertiary
+      'tomlArrayKey': {
+        foreground: colorRed
       },
-      macro: {
+      'variable.constant': {
         foreground: colorGreen
       },
-      tomlArrayKey: {
+      'variable.defaultLibrary': {
         foreground: colorRed
+      },
+      'variable:dart': {
+        foreground: colorGreen
       }
     },
     tokenColors: [{
@@ -1012,8 +1014,8 @@ export var themeConfig = function themeConfig(isDarkMode) {
         foreground: colorTextTertiary
       }
     }, {
-      name: 'php illegal.non-null-typehinted',
-      scope: 'invalid.illegal.non-null-typehinted.php',
+      name: 'php illegal.non-undefined-typehinted',
+      scope: 'invalid.illegal.non-undefined-typehinted.php',
       settings: {
         foreground: colorRed
       }
@@ -1497,8 +1499,8 @@ export var themeConfig = function themeConfig(isDarkMode) {
       name: 'Comments',
       scope: 'comment, punctuation.definition.comment',
       settings: {
-        foreground: colorTextTertiary,
-        fontStyle: 'italic'
+        fontStyle: 'italic',
+        foreground: colorTextTertiary
       }
     }, {
       name: '[VSCODE-CUSTOM] Markdown Quote',
@@ -1648,8 +1650,6 @@ export var themeConfig = function themeConfig(isDarkMode) {
         fontStyle: 'italic'
       }
     }],
-    colors: {
-      'editor.foreground': colorTextSecondary
-    }
+    type: type
   };
 };

package/es/Icon/index.js

@@ -11,26 +11,34 @@ var calcSize = function calcSize(size) {
   var strokeWidth;
   switch (size) {
     case 'large':
-      fontSize = 24;
-      strokeWidth = 2;
-      break;
+      {
+        fontSize = 24;
+        strokeWidth = 2;
+        break;
+      }
     case 'normal':
-      fontSize = 20;
-      strokeWidth = 2;
-      break;
+      {
+        fontSize = 20;
+        strokeWidth = 2;
+        break;
+      }
     case 'small':
-      fontSize = 14;
-      strokeWidth = 1.5;
-      break;
+      {
+        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;
+      {
+        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;
       }
-      break;
   }
   return {
     fontSize: fontSize,

package/es/Input/index.js

@@ -8,7 +8,7 @@ import { Input as AntInput } from 'antd';
 import { forwardRef, memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var Input = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Input = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
   var className = _ref.className,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'ghost' : _ref$type,
@@ -21,10 +21,10 @@ export var Input = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, re
   return /*#__PURE__*/_jsx(AntInput, _objectSpread({
     bordered: type !== 'pure',
     className: cx(styles.input, className),
-    ref: ref
+    ref: reference
   }, props));
 }));
-export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, reference) {
   var className = _ref2.className,
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'ghost' : _ref2$type,
@@ -40,7 +40,7 @@ export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2
   return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
     bordered: type !== 'pure',
     className: cx(styles.textarea, className),
-    ref: ref,
+    ref: reference,
     style: resize ? style : _objectSpread({
       resize: 'none'
     }, style)

package/es/Layout/index.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useResponsive } from 'antd-style';
 import { memo, useEffect, useState } from 'react';
-import { DraggablePanel } from "./..";
+import DraggablePanel from "../DraggablePanel";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/Layout/style.d.ts

@@ -1,11 +1,11 @@
 export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
     app: import("antd-style").SerializedStyles;
-    header: import("antd-style").SerializedStyles;
-    glass: import("antd-style").SerializedStyles;
-    main: import("antd-style").SerializedStyles;
-    content: import("antd-style").SerializedStyles;
-    footer: import("antd-style").SerializedStyles;
     aside: import("antd-style").SerializedStyles;
     asideInner: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+    footer: import("antd-style").SerializedStyles;
+    glass: import("antd-style").SerializedStyles;
+    header: import("antd-style").SerializedStyles;
+    main: import("antd-style").SerializedStyles;
     toc: import("antd-style").SerializedStyles;
 }>;

package/es/Layout/style.js

@@ -8,13 +8,13 @@ export var useStyles = createStyles(function (_ref, headerHeight) {
   var baseGlass = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    pointer-events: none;\n    content: '';\n    user-select: none;\n\n    position: absolute;\n    z-index: -1;\n    inset: -1px 0 ", ";\n  "])), responsive.mobile ? '-25%' : '-50%');
   return {
     app: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      height: 100vh;\n    "]))),
-    header: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 999;\n      top: 0;\n      max-width: 100%;\n    "]))),
-    glass: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      z-index: 0;\n\n      &::before {\n        ", ";\n        ", ";\n        mask-image: linear-gradient(to bottom, black ", "px, transparent);\n      }\n\n      &::after {\n        ", ";\n      }\n    "])), stylish.blur, baseGlass, headerHeight, baseGlass),
-    main: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      max-width: 100vw;\n    "]))),
-    content: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    "]))),
-    footer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      max-width: 100%;\n    "]))),
-    aside: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    "]))),
-    asideInner: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      width: 100%;\n      height: calc(100vh - 64px);\n    "]))),
+    aside: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    "]))),
+    asideInner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      width: 100%;\n      height: calc(100vh - 64px);\n    "]))),
+    content: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    "]))),
+    footer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      position: relative;\n      max-width: 100%;\n    "]))),
+    glass: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      z-index: 0;\n\n      &::before {\n        ", ";\n        ", ";\n        mask-image: linear-gradient(to bottom, black ", "px, transparent);\n      }\n\n      &::after {\n        ", ";\n      }\n    "])), stylish.blur, baseGlass, headerHeight, baseGlass),
+    header: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 999;\n      top: 0;\n      max-width: 100%;\n    "]))),
+    main: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      max-width: 100vw;\n    "]))),
     toc: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])))
   };
 });

package/es/List/ListItem/index.d.ts

@@ -60,5 +60,5 @@ export interface ListItemProps {
      */
     title: string;
 }
-declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>;
+declare const ListItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>>;
 export default ListItem;

package/es/List/ListItem/index.js

@@ -1,55 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "renderActions", "className", "style", "showAction", "classNames"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { convertAlphaToSolid } from "../../utils/colorUtils";
+import { useStyles } from "./style";
 import { getChatItemTime } from "./time";
-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,
-    cx = _ref.cx,
-    token = _ref.token;
-  var textOverlay = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    --overlay-background: ", ";\n\n    position: absolute;\n    z-index: 10;\n    top: 0;\n    right: 0;\n\n    width: 32px;\n    height: 44px;\n\n    background: linear-gradient(to right, transparent, var(--overlay-background));\n  "])), token.colorBgLayout);
-  var overlayColor = convertAlphaToSolid(token.colorFillContent, token.colorBgLayout);
-  var hoverOverlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", " {\n      --overlay-background: ", ";\n    }\n  "])), cx(textOverlay), overlayColor);
-  return {
-    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      border-radius: 8px;\n\n      &:hover {\n        background: ", ";\n        ", "\n      }\n    "])), token.colorTextTertiary, token.colorFillContent, hoverOverlay),
-    active: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n      background: ", ";\n\n      ", "\n    "])), token.colorText, token.colorFillContent, hoverOverlay),
-    content: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
-    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 0.9em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "]))),
-    time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),
-    desc: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-top: 2px;\n\n      font-size: 0.75em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      opacity: 0.5;\n    "]))),
-    textOverlay: textOverlay
-  };
-});
 
 /**
  * 卡片列表项的属性
  */
-
-var ListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var active = _ref2.active,
-    avatar = _ref2.avatar,
-    loading = _ref2.loading,
-    description = _ref2.description,
-    date = _ref2.date,
-    title = _ref2.title,
-    onHoverChange = _ref2.onHoverChange,
-    renderActions = _ref2.renderActions,
-    className = _ref2.className,
-    style = _ref2.style,
-    showAction = _ref2.showAction,
-    _ref2$classNames = _ref2.classNames,
-    classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
-    props = _objectWithoutProperties(_ref2, _excluded);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
+  var active = _ref.active,
+    avatar = _ref.avatar,
+    loading = _ref.loading,
+    description = _ref.description,
+    date = _ref.date,
+    title = _ref.title,
+    onHoverChange = _ref.onHoverChange,
+    renderActions = _ref.renderActions,
+    className = _ref.className,
+    style = _ref.style,
+    showAction = _ref.showAction,
+    _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -61,7 +40,7 @@ var ListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     horizontal: true,
     paddingBlock: 8,
     paddingInline: '12px 8px',
-    ref: ref,
+    ref: reference,
     style: style
   }, props), {}, {
     onMouseEnter: function onMouseEnter() {
@@ -106,5 +85,5 @@ var ListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       children: getChatItemTime(date)
     })]
   }));
-});
+}));
 export default ListItem;

package/es/List/ListItem/style.d.ts

@@ -0,0 +1,9 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    active: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+    desc: import("antd-style").SerializedStyles;
+    textOverlay: import("antd-style").SerializedStyles;
+    time: import("antd-style").SerializedStyles;
+    title: import("antd-style").SerializedStyles;
+}>;

package/es/List/ListItem/style.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import { createStyles } from 'antd-style';
+import { convertAlphaToSolid } from "../../utils/colorUtils";
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    token = _ref.token;
+  var textOverlay = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    --overlay-background: ", ";\n\n    position: absolute;\n    z-index: 10;\n    top: 0;\n    right: 0;\n\n    width: 32px;\n    height: 44px;\n\n    background: linear-gradient(to right, transparent, var(--overlay-background));\n  "])), token.colorBgLayout);
+  var overlayColor = convertAlphaToSolid(token.colorFillContent, token.colorBgLayout);
+  var hoverOverlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", " {\n      --overlay-background: ", ";\n    }\n  "])), cx(textOverlay), overlayColor);
+  return {
+    active: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background: ", ";\n\n      ", "\n    "])), token.colorText, token.colorFillContent, hoverOverlay),
+    container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      border-radius: 8px;\n\n      &:hover {\n        background: ", ";\n        ", "\n      }\n    "])), token.colorTextTertiary, token.colorFillContent, hoverOverlay),
+    content: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
+    desc: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-top: 2px;\n\n      font-size: 0.75em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      opacity: 0.5;\n    "]))),
+    textOverlay: textOverlay,
+    time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),
+    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 0.9em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])))
+  };
+});

package/es/List/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 declare const List: {
-    Item: import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>;
+    Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>>;
 };
 export default List;

package/es/Logo/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 import { DivProps } from "../types";
 export interface LogoProps extends DivProps {
     /**
      * @description Additional React Node to be rendered next to the logo
      */
-    extra?: React.ReactNode;
+    extra?: ReactNode;
     /**
      * @description Size of the logo in pixels
      * @default 32