@lobehub/ui 1.18.1 → 1.19.0

package/README.md

@@ -1,7 +1,7 @@
 <a name="readme-top"></a>
 
 <div align="center">
-  
+
 <img width="160" src="https://raw.githubusercontent.com/lobehub/.github/main/profile/Logo.webp">
 
 <h1>Lobe UI</h1>
@@ -15,8 +15,7 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 [![release][release-shield]][release-url]
 [![releaseDate][release-date-shield]][release-date-url]
 [![ciTest][ci-test-shield]][ci-test-url]
-[![ciRelease][ci-release-shield]][ci-release-url]
-<br/>
+[![ciRelease][ci-release-shield]][ci-release-url] <br/>
 [![contributors][contributors-shield]][contributors-url]
 [![forks][forks-shield]][forks-url]
 [![stargazers][stargazers-shield]][stargazers-url]
@@ -26,6 +25,25 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
 </div>
 
+<details>
+<summary><kbd>Table of contents</kbd></summary>
+
+#### TOC
+
+- [📦 Installation](#-installation)
+
+- [🤯 Usage](#-usage)
+
+  - [Compile with NextJS](#compile-with-nextjs)
+
+- [⌨️ Local Development](#️-local-development)
+
+- [🤝 Contributing](#-contributing)
+
+####
+
+</details>
+
 ## 📦 Installation
 
 This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
@@ -36,7 +54,13 @@ To install Lobe UI, run the following command:
 pnpm add @lobehub/ui
 ```
 
-## Usage
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤯 Usage
 
 ### Compile with NextJS
 

package/es/ActionIcon/index.d.ts

@@ -29,6 +29,10 @@ export interface ActionIconProps extends DivProps {
      * @type LucideIcon
      */
     icon: LucideIcon;
+    /**
+     * @description Handle click action
+     */
+    onClick?: () => void;
     /**
      * @description The position of the tooltip relative to the target
      * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
@@ -40,6 +44,11 @@ export interface ActionIconProps extends DivProps {
      * @default 'normal'
      */
     size?: ActionIconSize;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
     /**
      * @description The text shown in the tooltip
      */

package/es/ActionIcon/index.js

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow"];
+var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick"];
 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 { Icon, Tooltip } from "./..";
+import { Icon, Spotlight, Tooltip } from "./..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionIcon = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     active = _ref.active,
@@ -19,6 +20,8 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
     placement = _ref.placement,
     _ref$arrow = _ref.arrow,
     arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    spotlight = _ref.spotlight,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       active: Boolean(active),
@@ -50,18 +53,19 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
-  var actionIconBlock = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+  var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.block, className),
+    onClick: onClick,
     style: _objectSpread({
       width: blockSize,
       height: blockSize,
       borderRadius: borderRadius
     }, style)
   }, props), {}, {
-    children: /*#__PURE__*/_jsx(Icon, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(Icon, {
       icon: icon,
       size: size === 'site' ? 'normal' : size
-    })
+    })]
   }));
   if (!title) return actionIconBlock;
   return /*#__PURE__*/_jsx(Tooltip, {

package/es/ActionIcon/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    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))
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\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 ", ", transform 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            transform: scale(0.8);\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
   };
 });

package/es/Chat/store/index.d.ts

@@ -15,6 +15,6 @@ export declare const Provider: ({ createStore, children }: {
     subscribe: (listener: (state: ChatStore, prevState: ChatStore) => void) => () => void;
     destroy: () => void;
 };
-export { messagesReducer, type MessageDispatch } from './messageReducer';
+export { type MessageDispatch, messagesReducer } from './messageReducer';
 export * from './selectors';
 export type { ChatStore } from './store';

package/es/ColorScales/ScaleRow.js

@@ -1,4 +1,4 @@
-import { message, Space } from 'antd';
+import { Space, message } from 'antd';
 import copy from 'copy-to-clipboard';
 import { memo } from 'react';
 import { alphaBg, useStyles } from "./style";

package/es/ColorScales/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
     view: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n  "]))),
-    scaleBox: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n    &:active {\n      transform: scale(0.95);\n    }\n  "]))),
+    scaleBox: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n\n    &:active {\n      transform: scale(0.95);\n    }\n  "]))),
     scaleItem: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 100%;\n  "]))),
     scaleRowTitle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    width: 64px;\n    height: 32px;\n  "]))),
     text: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "])))

package/es/ContextMenu/MenuItem/style.js

@@ -5,9 +5,9 @@ export var useStyles = createStyles(function (_ref, prefixCls) {
   var css = _ref.css,
     cx = _ref.cx,
     token = _ref.token;
-  var selected = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: bold;\n    color: ", ";\n    background: ", ";\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.colorPrimaryText, token.colorPrimaryBg, token.colorPrimaryTextHover, token.colorPrimaryBgHover);
+  var selected = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: bold;\n    color: ", ";\n    background: ", ";\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.colorPrimaryText, token.colorPrimaryBg, token.colorPrimaryTextHover, token.colorPrimaryBgHover);
   return {
-    item: cx("".concat(prefixCls, "-item"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        all: unset;\n\n        user-select: none;\n        scroll-margin: 50px;\n\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n\n        box-sizing: inherit;\n        width: 100%;\n        padding: 12px 10px;\n\n        font-family: ", ";\n        font-weight: normal;\n        line-height: 1;\n        color: ", ";\n\n        background: transparent;\n        border-radius: 5px;\n        &:hover {\n          background: ", ";\n        }\n      "])), token.fontFamily, token.colorText, token.colorFillTertiary)),
+    item: cx("".concat(prefixCls, "-item"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        all: unset;\n\n        user-select: none;\n        scroll-margin: 50px;\n\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n\n        box-sizing: inherit;\n        width: 100%;\n        padding: 12px 10px;\n\n        font-family: ", ";\n        font-weight: normal;\n        line-height: 1;\n        color: ", ";\n\n        background: transparent;\n        border-radius: 5px;\n\n        &:hover {\n          background: ", ";\n        }\n      "])), token.fontFamily, token.colorText, token.colorFillTertiary)),
     selected: cx("".concat(prefixCls, "-item-selected"), selected),
     active: cx("".concat(prefixCls, "-item-active"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorFillTertiary)),
     arrow: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorTextTertiary),

package/es/ContextMenu/index.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["items", "label", "container"];
 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 { autoUpdate, flip, FloatingFocusManager, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead } from '@floating-ui/react';
+import { FloatingFocusManager, FloatingNode, FloatingPortal, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead } from '@floating-ui/react';
 import { Divider } from 'antd';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import MenuItem from "./MenuItem";

package/es/Conversation/InputArea/index.js

@@ -20,7 +20,7 @@ var useStyles = createStyles(function (_ref) {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: sticky;\n    z-index: ", ";\n    bottom: 0;\n\n    padding-top: 12px;\n    padding-bottom: 24px;\n\n    background-image: linear-gradient(to top, ", " 88%, transparent 100%);\n\n    ", " {\n      width: 100%;\n    }\n  "])), token.zIndexPopupBase, token.colorBgLayout, responsive.mobile),
     boxShadow: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    border-radius: 8px;\n    box-shadow: ", ";\n  "])), token.boxShadowSecondary),
     input: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    border-radius: 8px;\n  "]))),
-    btn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 10;\n    right: 8px;\n    bottom: 8px;\n\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), token.colorTextTertiary, token.colorTextSecondary),
+    btn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 10;\n    right: 8px;\n    bottom: 8px;\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  "])), token.colorTextTertiary, token.colorTextSecondary),
     extra: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextTertiary)
   };
 });

package/es/Conversation/index.js

@@ -4,7 +4,7 @@ var _excluded = ["readonly", "devtools", "includeSystem"];
 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, useRef } from 'react';
-import { createChatStore, Provider } from "../Chat/store";
+import { Provider, createChatStore } from "../Chat/store";
 import ChatContainer from "./App";
 import StoreUpdater from "./StoreUpdater";
 import { jsx as _jsx } from "react/jsx-runtime";

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: ", " !important;\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
+  var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\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 {
@@ -16,8 +16,8 @@ export var useStyle = createStyles(function (_ref, prefix) {
     rightFloat: cx(float, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n      "])))),
     topFloat: cx(float, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        left: 0;\n        width: 100%;\n      "])))),
     bottomFloat: cx(float, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        right: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      "])))),
-    toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        left: -", "px;\n        width: ", "px;\n        height: 100%;\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 4px 0 0 4px;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
-    toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        right: -", "px;\n        width: ", "px;\n        height: 100%;\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 0 4px 4px 0;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
+    toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        left: -", "px;\n        width: ", "px;\n        height: 100%;\n\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 4px 0 0 4px;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
+    toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        right: -", "px;\n        width: ", "px;\n        height: 100%;\n\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 0 4px 4px 0;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
     toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        top: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-left: -20px;\n\n          border-radius: 4px 4px 0 0;\n        }\n      "])), offset, toggleShort, toggleLength, toggleShort)),
     toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        bottom: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: 16px;\n          margin-left: -20px;\n\n          border-radius: 0 0 4px 4px;\n        }\n      "])), offset, toggleShort, toggleLength)),
     panel: cx("".concat(prefix, "-fixed"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut)),

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -11,6 +11,6 @@ export var useStyles = createStyles(function (_ref) {
   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: 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))
+    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))
   };
 });

package/es/Highlighter/index.js

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import CopyButton from "../CopyButton";
-import { useStyles } from "./style";
 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 };

package/es/Highlighter/style.js

@@ -9,8 +9,9 @@ export var useStyles = createStyles(function (_ref, type) {
   var prefix = "".concat(prefixCls, "-highlighter");
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   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 === 'prue' ? 'transparent' : token.colorFillTertiary);
   return {
-    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: auto;\n\n          background-color: ", ";\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n          ", "\n          &:hover {\n            background-color: ", ";\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        "])), type === 'block' ? token.colorFillTertiary : 'transparent', token.borderRadius, token.motionEaseOut, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
+    container: cx(prefix, 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 === 'prue' ? 0 : "16px 24px")),
     button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
     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/Input/style.d.ts

@@ -1,6 +1,6 @@
 export declare const useStyles: (props?: {
     type: 'ghost' | 'block';
 } | undefined) => import("antd-style").ReturnStyles<{
-    input: import("antd-style").SerializedStyles;
-    textarea: import("antd-style").SerializedStyles;
+    input: string;
+    textarea: string;
 }>;

package/es/Input/style.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
-  var css = _ref.css,
+  var cx = _ref.cx,
+    css = _ref.css,
     token = _ref.token;
   var type = _ref2.type;
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
   return {
-    input: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    height: 36px;\n    padding: 0 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    input {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary),
-    textarea: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    padding: 8px 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    textarea {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary)
+    input: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          max-width: 100%;\n          height: 36px;\n          padding: 0 12px;\n\n          transition: background-color 100ms ", ";\n\n          input {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n            border-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.colorFillTertiary, token.colorBorder, token.colorTextQuaternary)),
+    textarea: cx(typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          padding: 8px 12px;\n          transition: background-color 100ms ", ";\n\n          textarea {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n            border-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.colorFillTertiary, token.colorBorder, token.colorTextQuaternary))
   };
 });

package/es/List/ListItem/time.js

@@ -1,5 +1,5 @@
-import 'dayjs/locale/zh-cn';
 import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 dayjs.locale('zh-cn');
 export var getChatItemTime = function getChatItemTime(updateAt) {
   var time = dayjs(updateAt);

package/es/Markdown/CodeBlock.js

@@ -6,7 +6,7 @@ import Highlighter from "../Highlighter";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0px;\n      margin-inline-end: 0px;\n    }\n  "])));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n    }\n  "])));
 });
 var Code = /*#__PURE__*/memo(function (props) {
   var _useStyles = useStyles(),

package/es/SearchBar/index.d.ts

@@ -11,6 +11,11 @@ export interface SearchBarProps extends InputProps {
      * @default 'f'
      */
     shortKey?: string;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/es/SearchBar/index.js

@@ -1,21 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
+var _excluded = ["spotlight", "className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
 var _navigator;
 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 { Tag } from 'antd';
 import { Search } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
-import { Icon, Input } from "./..";
+import { Icon, Input, Spotlight } from "./..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
 var symbol = isAppleDevice ? '⌘' : 'Ctrl';
 var SearchBar = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
+  var spotlight = _ref.spotlight,
+    className = _ref.className,
     value = _ref.value,
     _onChange = _ref.onChange,
     placeholder = _ref.placeholder,
@@ -51,7 +52,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: styles.search,
-    children: [/*#__PURE__*/_jsx(Input, _objectSpread({
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(Input, _objectSpread({
       allowClear: true,
       className: cx(styles.input, className),
       onBlur: function onBlur() {

package/es/SearchBar/style.js

@@ -5,9 +5,9 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
+    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n\n    .ant-input-affix-wrapper {\n      &:hover {\n        border-color: ", ";\n      }\n    }\n\n    .ant-input-affix-wrapper-focused {\n      border-color: ", ";\n\n      &:hover {\n        border-color: ", ";\n      }\n    }\n  "])), token.colorBorder, token.colorTextQuaternary, token.colorTextQuaternary),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
-    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
+    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
     icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
   };
 });

package/es/Snippet/index.d.ts

@@ -15,6 +15,11 @@ export interface SnippetProps extends DivProps {
      * @default 'tsx'
      */
     language?: string;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
     /**
      * @description The symbol to be displayed before the content inside the Snippet component
      */

package/es/Snippet/index.js

@@ -1,11 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["symbol", "language", "children", "copyable", "type"];
+var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight"];
 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 from "../CopyButton";
-import { SyntaxHighlighter } from "../Highlighter";
+import { CopyButton, Spotlight, SyntaxHighlighter } from "./..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,13 +17,14 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
     copyable = _ref$copyable === void 0 ? true : _ref$copyable,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    spotlight = _ref.spotlight,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(type),
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: styles
   }, props), {}, {
-    children: [/*#__PURE__*/_jsx(SyntaxHighlighter, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language,
       children: [symbol, children].filter(Boolean).join(' ')
     }), copyable && /*#__PURE__*/_jsx(CopyButton, {

package/es/Snippet/style.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<string>;

package/es/Snippet/style.js

@@ -1,8 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, type) {
   var css = _ref.css,
+    cx = _ref.cx,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillTertiary) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), token.colorFillTertiary);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid ", ";\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
+  return cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary));
 });

package/es/Spotlight/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface SpotlightProps extends DivProps {
+    size?: number;
+}
+declare const Spotlight: import("react").NamedExoticComponent<SpotlightProps>;
+export default Spotlight;

package/es/Spotlight/index.js

@@ -0,0 +1,68 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["className", "size"];
+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, useEffect, useRef, useState } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var useMouseOffset = function useMouseOffset() {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    outside = _useState4[0],
+    setOutside = _useState4[1];
+  var ref = useRef(null);
+  useEffect(function () {
+    if (ref.current && ref.current.parentElement) {
+      var el = ref.current.parentElement;
+
+      // debounce?
+      var onMouseMove = function onMouseMove(e) {
+        var bound = el.getBoundingClientRect();
+        setOffset({
+          x: e.clientX - bound.x,
+          y: e.clientY - bound.y
+        });
+        setOutside(false);
+      };
+      var onMouseLeave = function onMouseLeave() {
+        setOutside(true);
+      };
+      el.addEventListener('mousemove', onMouseMove);
+      el.addEventListener('mouseleave', onMouseLeave);
+      return function () {
+        el.removeEventListener('mousemove', onMouseMove);
+        el.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, []);
+  return [offset, outside, ref];
+};
+var Spotlight = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMouseOffset = useMouseOffset(),
+    _useMouseOffset2 = _slicedToArray(_useMouseOffset, 3),
+    offset = _useMouseOffset2[0],
+    outside = _useMouseOffset2[1],
+    ref = _useMouseOffset2[2];
+  var _useStyles = useStyles({
+      offset: offset,
+      outside: outside,
+      size: size
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: cx(styles, className),
+    ref: ref
+  }, props));
+});
+export default Spotlight;

package/es/Spotlight/style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: {
+    offset: {
+        x: number;
+        y: number;
+    };
+    outside: boolean;
+    size: number;
+} | undefined) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/es/Spotlight/style.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var _offset$x, _offset$y;
+  var css = _ref.css,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
+  var offset = _ref2.offset,
+    outside = _ref2.outside,
+    size = _ref2.size;
+  var spotlightX = ((_offset$x = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _offset$x !== void 0 ? _offset$x : 0) + 'px';
+  var spotlightY = ((_offset$y = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _offset$y !== void 0 ? _offset$y : 0) + 'px';
+  var spotlightOpacity = outside ? '0' : isDarkMode ? '.1' : '0.07';
+  var spotlightSize = size + 'px';
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      opacity: ", ";\n      background: radial-gradient(\n        ", " circle at ", " ", ",\n        ", ",\n        transparent\n      );\n      border-radius: inherit;\n\n      transition: all 0.2s;\n    "])), spotlightOpacity, spotlightSize, spotlightX, spotlightY, token.colorText);
+});

package/es/StroyBook/style.js

@@ -10,6 +10,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     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        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)
+    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\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/TabsNav/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref) {
   var marginHoriz = 16;
   var paddingVertical = 6;
   return {
-    tabs: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "-tab + ", "-tab {\n        margin: ", "px 4px !important;\n        padding: 0 12px !important;\n      }\n\n      ", "-tab {\n        color: ", ";\n        transition: background-color 100ms ease-out;\n\n        &:first-child {\n          margin: ", "px 4px ", "px 0;\n          padding: ", "px 12px !important;\n        }\n\n        &:hover {\n          color: ", " !important;\n          background: ", ";\n          border-radius: ", "px;\n        }\n      }\n\n      ", "-nav {\n        margin-bottom: 0;\n        &::before {\n          display: none;\n        }\n      }\n    "])), prefix, prefix, marginHoriz, prefix, token.colorTextSecondary, marginHoriz, marginHoriz, paddingVertical, token.colorText, token.colorFillTertiary, token.borderRadius, prefix)
+    tabs: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "-tab + ", "-tab {\n        margin: ", "px 4px !important;\n        padding: 0 12px !important;\n      }\n\n      ", "-tab {\n        color: ", ";\n        transition: background-color 100ms ease-out;\n\n        &:first-child {\n          margin: ", "px 4px ", "px 0;\n          padding: ", "px 12px !important;\n        }\n\n        &:hover {\n          color: ", " !important;\n          background: ", ";\n          border-radius: ", "px;\n        }\n      }\n\n      ", "-nav {\n        margin-bottom: 0;\n\n        &::before {\n          display: none;\n        }\n      }\n    "])), prefix, prefix, marginHoriz, prefix, token.colorTextSecondary, marginHoriz, marginHoriz, paddingVertical, token.colorText, token.colorFillTertiary, token.borderRadius, prefix)
   };
 });

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\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 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\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) {

package/es/ThemeProvider/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { extractStaticStyle, type ThemeMode } from 'antd-style';
+import { type ThemeMode, extractStaticStyle } from 'antd-style';
 import type { CustomStylishParams, CustomTokenParams } from 'antd-style/lib/types/function';
 export interface ThemeProviderProps {
     /**

package/es/ThemeProvider/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { App } from 'antd';
-import { setupStyled, StyleProvider, ThemeProvider as AntdThemeProvider } from 'antd-style';
+import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
 import { memo } from 'react';
 // @ts-ignore
 import ReactFontLoader from 'react-font-loader';

package/es/Tooltip/style.js

@@ -5,6 +5,6 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    tooltip: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .ant-tooltip-inner {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        min-height: unset;\n        padding: 4px 8px;\n\n        color: ", ";\n\n        background-color: ", ";\n        border-radius: ", "px;\n      }\n      .ant-tooltip-arrow {\n        &:before,\n        &:after {\n          background: ", ";\n        }\n      }\n    "])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText)
+    tooltip: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .ant-tooltip-inner {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        min-height: unset;\n        padding: 4px 8px;\n\n        color: ", ";\n\n        background-color: ", ";\n        border-radius: ", "px;\n      }\n\n      .ant-tooltip-arrow {\n        &::before,\n        &::after {\n          background: ", ";\n        }\n      }\n    "])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText)
   };
 });

package/es/hooks/useHighlight.d.ts

@@ -1,4 +1,4 @@
-import { Highlighter } from 'shiki-es';
+import { type Highlighter } from 'shiki-es';
 export declare const languageMap: readonly ["javascript", "js", "jsx", "json", "markdown", "md", "less", "css", "typescript", "ts", "tsx", "diff", "bash"];
 /**
  * @title 代码高亮的存储对象

package/es/index.d.ts

@@ -20,6 +20,7 @@ export { default as MessageModal, type MessageModalProps } from './MessageModal'
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';
+export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as StroyBook, type StroyBookProps, useControls, useCreateStore, } from './StroyBook';
 export { colorScales as colors } from './styles/colors';
 export { default as Swatches, type SwatchesProps } from './Swatches';
@@ -27,3 +28,5 @@ export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
+export { type LobeCustomStylish } from './types/customStylish';
+export { type LobeCustomToken } from './types/customToken';

package/es/index.js

@@ -19,6 +19,7 @@ export { default as MessageModal } from "./MessageModal";
 export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
 export { default as Snippet } from "./Snippet";
+export { default as Spotlight } from "./Spotlight";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
 export { colorScales as colors } from "./styles/colors";
 export { default as Swatches } from "./Swatches";

package/es/styles/algorithms/generateCustomStylish.js

@@ -6,6 +6,6 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     isDarkMode = _ref.isDarkMode;
   return {
     blur: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    markdown: css(_templateObject2 || (_templateObject2 = _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)
+    markdown: css(_templateObject2 || (_templateObject2 = _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\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: 0;\n        margin-inline-end: 0;\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\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\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/types/global.d.ts

@@ -1,5 +1,4 @@
 import 'antd-style';
-
 import { AntdToken } from 'antd-style/lib/types/theme';
 
 import { LobeCustomStylish } from './customStylish';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -18,7 +18,7 @@
     "url": "https://github.com/lobehub/lobe-ui.git"
   },
   "license": "MIT",
-  "author": "LobeHub",
+  "author": "LobeHub <i@lobehub.com>",
   "sideEffects": false,
   "main": "es/index.js",
   "module": "es/index.js",
@@ -37,11 +37,11 @@
     "docs:build": "npm run build:theme && dumi build",
     "doctor": "father doctor",
     "lint": "eslint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
-    "lint:md": "remark . -f -q",
+    "lint:md": "remark . --quiet --frail --output",
     "lint:style": "stylelint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install && npm run setup",
     "prepublishOnly": "father doctor && npm run build",
-    "prettier": "prettier -c --write \"**/**\"",
+    "prettier": "prettier -c --write --no-error-on-unmatched-pattern \"**/**\"",
     "release": "semantic-release",
     "setup": "dumi setup",
     "start": "dumi dev",
@@ -52,7 +52,7 @@
   },
   "lint-staged": {
     "*.md": [
-      "remark -f -q",
+      "remark --quiet --output --",
       "prettier --write --no-error-on-unmatched-pattern"
     ],
     "*.json": [
@@ -60,10 +60,12 @@
     ],
     "*.{js,jsx}": [
       "prettier --write",
+      "stylelint --fix",
       "eslint --fix"
     ],
     "*.{ts,tsx}": [
       "prettier --parser=typescript --write",
+      "stylelint --fix",
       "eslint --fix"
     ]
   },
@@ -100,13 +102,14 @@
   "devDependencies": {
     "@ant-design/colors": "^7",
     "@commitlint/cli": "^17",
+    "@lobehub/lint": "latest",
+    "@react-spring/web": "^9",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash-es": "^4",
     "@types/pangu": "^4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@umijs/lint": "^4",
     "@vitest/coverage-c8": "latest",
     "antd": "^5",
     "antd-style": "^3",
@@ -118,32 +121,17 @@
     "dumi-assets-types": "^1",
     "dumi-theme-lobehub": "workspace:latest",
     "eslint": "^8",
-    "eslint-import-resolver-alias": "^1",
-    "eslint-import-resolver-typescript": "^3",
-    "eslint-plugin-import": "^2",
-    "eslint-plugin-simple-import-sort": "^10",
-    "eslint-plugin-typescript-sort-keys": "^2",
     "father": "^4",
     "husky": "^8",
     "jsdom": "^22",
     "lint-staged": "^13",
-    "postcss-styled-syntax": "^0",
     "prettier": "^2",
-    "prettier-plugin-organize-imports": "^3",
-    "prettier-plugin-packagejson": "^2",
     "react": "^18",
     "react-dom": "^18",
     "remark": "^14",
     "remark-cli": "^11",
-    "remark-lint": "^9",
-    "remark-lint-list-item-indent": "^3",
-    "remark-preset-lint-recommended": "^6",
     "semantic-release": "^21",
-    "semantic-release-config-gitmoji": "^1",
     "stylelint": "^15",
-    "stylelint-config-clean-order": "^5",
-    "stylelint-config-recommended": "^12",
-    "stylelint-order": "^6",
     "typescript": "^5",
     "vitest": "latest"
   },