@lobehub/ui 1.21.1 → 1.22.1

package/es/ActionIcon/index.js

@@ -93,6 +93,10 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
   if (!title) return actionIconBlock;
   return /*#__PURE__*/_jsx(Tooltip, {
     arrow: arrow,
+    mouseEnterDelay: 1,
+    overlayStyle: {
+      pointerEvents: 'none'
+    },
     placement: placement,
     title: title,
     children: actionIconBlock

package/es/ActionIconGroup/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ActionIconProps } from "..";
+import { DivProps } from "../types";
+export interface ActionIconGroupProps extends DivProps {
+    direction?: 'row' | 'column';
+    items: ActionIconProps[];
+    /**
+     * @description The position of the tooltip relative to the target
+     * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
+     */
+    placement?: ActionIconProps['placement'];
+    /**
+     * @description Whether add spotlight background
+     * @default true
+     */
+    spotlight?: boolean;
+    /**
+     * @description The type of the group
+     * @default 'block'
+     */
+    type?: 'ghost' | 'block' | 'pure';
+}
+declare const ActionIconGroup: import("react").NamedExoticComponent<ActionIconGroupProps>;
+export default ActionIconGroup;

package/es/ActionIconGroup/index.js

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "items", "placement", "spotlight", "direction"];
+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 { ActionIcon, Spotlight } from "./..";
+import { memo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type,
+    items = _ref.items,
+    placement = _ref.placement,
+    _ref$spotlight = _ref.spotlight,
+    spotlight = _ref$spotlight === void 0 ? true : _ref$spotlight,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      direction: direction,
+      type: type
+    }),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: styles.container
+  }, props), {}, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), items.map(function (item, index) {
+      return /*#__PURE__*/_jsx(ActionIcon, _objectSpread({
+        placement: placement || (direction === 'column' ? 'right' : 'top'),
+        size: "small"
+      }, item), index);
+    })]
+  }));
+});
+export default ActionIconGroup;

package/es/ActionIconGroup/style.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: {
+    direction: 'row' | 'column';
+    type: 'ghost' | 'block' | 'pure';
+} | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+}>;

package/es/ActionIconGroup/style.js

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
+  var direction = _ref2.direction,
+    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 {
+    container: cx(type !== 'pure' && typeStylish, stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n\n          padding: 2px;\n\n          border-radius: ", "px;\n        "])), direction, token.borderRadius))
+  };
+});

package/es/Avatar/index.js

@@ -17,22 +17,24 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
     background = _ref.background,
     props = _objectWithoutProperties(_ref, _excluded);
+  var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (i) {
+    return avatar.startsWith(i);
+  }));
+  var isEmoji = Boolean(avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar));
   var _useStyles = useStyles({
       background: background,
-      size: size
+      size: size,
+      isEmoji: isEmoji
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var isImage = avatar && ['/', 'http', 'data:'].some(function (i) {
-    return avatar.startsWith(i);
-  });
   var text = isImage ? title : avatar;
   return !isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,
     size: size
   }, props), {}, {
-    children: text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
+    children: isEmoji ? text : text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
   })) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,

package/es/Avatar/style.d.ts

@@ -1,5 +1,6 @@
 export declare const useStyles: (props?: {
     background?: string | undefined;
+    isEmoji?: boolean | undefined;
     size: number;
 } | undefined) => import("antd-style").ReturnStyles<{
     avatar: import("antd-style").SerializedStyles;

package/es/Avatar/style.js

@@ -6,10 +6,11 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token;
   var background = _ref2.background,
-    size = _ref2.size;
+    size = _ref2.size,
+    isEmoji = _ref2.isEmoji;
   var backgroundColor = background !== null && background !== void 0 ? background : token.colorBgContainer;
   var color = readableColor(backgroundColor);
   return {
-    avatar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background: ", ";\n        border: 1px solid ", ";\n\n        > .ant-avatar-string {\n          font-size: ", "px;\n          font-weight: 700;\n          line-height: 1 !important;\n          color: ", ";\n        }\n\n        > * {\n          cursor: pointer;\n        }\n      "])), backgroundColor, background ? 'transparent' : token.colorSplit, size * 0.5, color)
+    avatar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background: ", ";\n        border: 1px solid ", ";\n\n        > .ant-avatar-string {\n          font-size: ", "px;\n          font-weight: 700;\n          line-height: 1 !important;\n          color: ", ";\n        }\n\n        > * {\n          cursor: pointer;\n        }\n      "])), backgroundColor, background ? 'transparent' : token.colorSplit, size * (isEmoji ? 0.7 : 0.5), color)
   };
 });

package/es/ChatItem/style.js

@@ -12,9 +12,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
     showTitle = _ref2.showTitle;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut, primary ? token.colorFill : token.colorFillSecondary);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
-  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary, token.colorFillSecondary);
+  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
     container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),

package/es/Highlighter/index.d.ts

@@ -21,6 +21,11 @@ export interface HighlighterProps extends DivProps {
      * @default true
      */
     showLanguage?: boolean;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
     /**
      * @description The theme of the code block
      * @default 'light'

package/es/Highlighter/index.js

@@ -1,5 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "language", "className", "style", "theme", "copyable", "showLanguage", "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 { CopyButton, Spotlight } from "./..";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,16 +21,21 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     _ref$showLanguage = _ref.showLanguage,
     showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'block' : _ref$type;
+    type = _ref$type === void 0 ? 'block' : _ref$type,
+    spotlight = _ref.spotlight,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(type),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var container = cx(styles.container, className);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: container,
     "data-code-type": "highlighter",
-    style: style,
-    children: [copyable && /*#__PURE__*/_jsx(CopyButton, {
+    style: style
+  }, props), {}, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {
+      size: 240
+    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
       className: styles.button,
       content: children,
       placement: "left"
@@ -37,6 +47,6 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
       theme: theme,
       children: children.trim()
     })]
-  });
+  }));
 });
 export default Highlighter;

package/es/Highlighter/style.d.ts

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

package/es/Highlighter/style.js

@@ -9,10 +9,10 @@ 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 === 'pure' ? 'transparent' : token.colorFillTertiary);
+  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, 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: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
+    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')),
     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/Markdown/CodeBlock.js

@@ -20,6 +20,7 @@ var Code = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/_jsx(Highlighter, {
     className: styles,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+    spotlight: true,
     theme: theme.appearance,
     type: "block",
     children: children instanceof Array ? children[0] : children

package/es/Menu/MenuItem/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const CommandIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ControlIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ShiftIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const AltIcon: () => import("react/jsx-runtime").JSX.Element;

package/es/Menu/MenuItem/icons.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var strokeWidth = 2.2;
+var iconSize = '13px';
+export var CommandIcon = function CommandIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    fill: "none",
+    height: iconSize,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: strokeWidth,
+    viewBox: "0 0 24 24",
+    width: iconSize,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
+    })
+  });
+};
+export var ControlIcon = function ControlIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    className: "lucide lucide-chevron-up",
+    fill: "none",
+    height: iconSize,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: strokeWidth,
+    viewBox: "0 0 24 24",
+    width: iconSize,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("polyline", {
+      points: "18 15 12 9 6 15"
+    })
+  });
+};
+export var ShiftIcon = function ShiftIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    className: "lucide lucide-chevron-up",
+    fill: "none",
+    height: iconSize,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: strokeWidth,
+    viewBox: "0 0 24 24",
+    width: iconSize,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M9 18v-6H5l7-7 7 7h-4v6H9z"
+    })
+  });
+};
+export var AltIcon = function AltIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    className: "lucide lucide-chevron-up",
+    fill: "none",
+    height: iconSize,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: strokeWidth,
+    viewBox: "0 0 24 24",
+    width: iconSize,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M3 3h6l6 18h6"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M14 3h7"
+    })]
+  });
+};

package/es/Menu/MenuItem/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface MenuItemProps {
+    active?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    label: ReactNode;
+    nested?: boolean;
+    selected?: boolean;
+    shortcut?: string[];
+}
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default MenuItem;

package/es/Menu/MenuItem/index.js

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["label", "icon", "disabled", "nested", "shortcut", "active", "selected"];
+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 { ChevronRightIcon } from 'lucide-react';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { AltIcon, CommandIcon, ControlIcon, ShiftIcon } from "./icons";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var KEYBOARD_ICON_MAP = {
+  meta: /*#__PURE__*/_jsx(CommandIcon, {}),
+  control: /*#__PURE__*/_jsx(ControlIcon, {}),
+  shift: /*#__PURE__*/_jsx(ShiftIcon, {}),
+  alt: /*#__PURE__*/_jsx(AltIcon, {}),
+  enter: '↵'
+};
+var CODE_MAP = {
+  meta: 'meta',
+  command: 'meta',
+  cmd: 'meta',
+  ctl: 'control',
+  control: 'control',
+  shift: 'shift',
+  alt: 'alt'
+};
+var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _cx;
+  var label = _ref.label,
+    icon = _ref.icon,
+    disabled = _ref.disabled,
+    nested = _ref.nested,
+    shortcut = _ref.shortcut,
+    active = _ref.active,
+    selected = _ref.selected,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({
+    type: 'button'
+  }, props), {}, {
+    className: cx(styles.item, (_cx = {}, _defineProperty(_cx, styles.selected, selected), _defineProperty(_cx, styles.active, active), _cx)),
+    disabled: disabled,
+    ref: ref,
+    role: "menuitem",
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      gap: 8,
+      horizontal: true,
+      children: [icon && /*#__PURE__*/_jsx("span", {
+        children: icon
+      }), label]
+    }), nested ? /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx(ChevronRightIcon, {
+        className: styles.arrow
+      })
+    }) : shortcut ? /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      horizontal: true,
+      children: shortcut.map(function (c) {
+        var code = CODE_MAP[c.toLowerCase()];
+        return /*#__PURE__*/_jsx("kbd", {
+          className: styles.kbd,
+          children: code ? KEYBOARD_ICON_MAP[code] : c.toUpperCase()
+        }, c);
+      })
+    }) : null]
+  }));
+});
+export default MenuItem;

package/es/Menu/MenuItem/style.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    item: string;
+    selected: string;
+    active: string;
+    arrow: import("antd-style").SerializedStyles;
+    kbd: import("antd-style").SerializedStyles;
+}>;

package/es/Menu/MenuItem/style.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+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\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\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),
+    kbd: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 20px;\n\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n\n      border-radius: 2px;\n    "])), token.fontFamily, token.colorTextQuaternary)
+  };
+});

package/es/Menu/index.d.ts

@@ -0,0 +1,17 @@
+import MenuItem from './MenuItem';
+import { MenuItemType } from './types';
+export interface ContextMenuProps {
+    /**
+     * @description Container element for the context menu
+     */
+    container?: HTMLElement;
+    /**
+     * @description Items to be displayed in the context menu
+     */
+    items: MenuItemType[];
+    /**
+     * @description Label for the context menu
+     */
+    label?: string;
+}
+export default MenuItem;

package/es/Menu/index.js

@@ -0,0 +1,248 @@
+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 = ["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 { FloatingFocusManager, FloatingNode, FloatingPortal, 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";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MenuComponent = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var items = _ref.items,
+    label = _ref.label,
+    container = _ref.container,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    allowHover = _useState6[0],
+    setAllowHover = _useState6[1];
+  var listItemsRef = useRef([]);
+  var listContentRef = useRef(items.map(function (item) {
+    return item.label;
+  }));
+  var allowMouseUpCloseRef = useRef(false);
+  var tree = useFloatingTree();
+  var nodeId = useFloatingNodeId();
+  var parentId = useFloatingParentNodeId();
+  var isNested = parentId !== null;
+  var _useFloating = useFloating({
+      nodeId: nodeId,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: isNested ? 'right-start' : 'bottom-start',
+      middleware: [offset({
+        mainAxis: isNested ? 0 : 4,
+        alignmentAxis: isNested ? -4 : 0
+      }), flip(), shift()],
+      whileElementsMounted: autoUpdate
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var hover = useHover(context, {
+    enabled: isNested && allowHover,
+    delay: {
+      open: 75
+    },
+    handleClose: safePolygon({
+      blockPointerEvents: true
+    })
+  });
+  var click = useClick(context, {
+    event: 'mousedown',
+    toggle: !isNested || !allowHover,
+    ignoreMouse: isNested
+  });
+  var role = useRole(context, {
+    role: 'menu'
+  });
+  var dismiss = useDismiss(context);
+  var listNavigation = useListNavigation(context, {
+    listRef: listItemsRef,
+    activeIndex: activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex
+  });
+  var typeahead = useTypeahead(context, {
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: isOpen ? setActiveIndex : undefined,
+    activeIndex: activeIndex
+  });
+  var _useInteractions = useInteractions([hover, click, role, dismiss, listNavigation, typeahead]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere
+  // in the tree.
+  useEffect(function () {
+    if (!tree) return;
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+    function onSubMenuOpen(event) {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    }
+    tree.events.on('click', handleTreeClick);
+    tree.events.on('menuopen', onSubMenuOpen);
+    return function () {
+      tree.events.off('click', handleTreeClick);
+      tree.events.off('menuopen', onSubMenuOpen);
+    };
+  }, [tree, nodeId, parentId]);
+  useEffect(function () {
+    if (isOpen && tree) {
+      tree.events.emit('menuopen', {
+        parentId: parentId,
+        nodeId: nodeId
+      });
+    }
+  }, [tree, isOpen, nodeId, parentId]);
+
+  // Determine if "hover" logic can run based on the modality of input. This
+  // prevents unwanted focus synchronization as menus open and close with
+  // keyboard navigation and the cursor is resting on the menu.
+  useEffect(function () {
+    function onPointerMove(_ref2) {
+      var pointerType = _ref2.pointerType;
+      if (pointerType !== 'touch') {
+        setAllowHover(true);
+      }
+    }
+    function onKeyDown() {
+      setAllowHover(false);
+    }
+    window.addEventListener('pointermove', onPointerMove, {
+      once: true,
+      capture: true
+    });
+    window.addEventListener('keydown', onKeyDown, true);
+    return function () {
+      window.removeEventListener('pointermove', onPointerMove, {
+        capture: true
+      });
+      window.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [allowHover]);
+  useEffect(function () {
+    var timeout;
+    function onContextMenu(e) {
+      e.preventDefault();
+      refs.setPositionReference({
+        getBoundingClientRect: function getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: e.clientX,
+            y: e.clientY,
+            top: e.clientY,
+            right: e.clientX,
+            bottom: e.clientY,
+            left: e.clientX
+          };
+        }
+      });
+      setIsOpen(true);
+      clearTimeout(timeout);
+      allowMouseUpCloseRef.current = false;
+      timeout = window.setTimeout(function () {
+        allowMouseUpCloseRef.current = true;
+      }, 300);
+    }
+    function onMouseUp() {
+      if (allowMouseUpCloseRef.current) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('contextmenu', onContextMenu);
+    document.addEventListener('mouseup', onMouseUp);
+    return function () {
+      document.removeEventListener('contextmenu', onContextMenu);
+      document.removeEventListener('mouseup', onMouseUp);
+      clearTimeout(timeout);
+    };
+  }, [refs, container]);
+  var renderMenuItem = useCallback(function (item, index) {
+    // 支持渲染分割线
+    if ('type' in item && item.type === 'divider') return /*#__PURE__*/_jsx(Divider, {
+      style: {
+        margin: '4px 12px',
+        minWidth: 'auto',
+        width: 'auto'
+      }
+    });
+    var data = item;
+    var props = _objectSpread({
+      label: data.label,
+      key: data.key,
+      icon: data.icon,
+      shortcut: data.shortcut,
+      active: activeIndex === index
+    }, getItemProps({
+      ref: function ref(node) {
+        listItemsRef.current[index] = node;
+      },
+      onClick: function onClick() {
+        var _data$onClick;
+        (_data$onClick = data.onClick) === null || _data$onClick === void 0 ? void 0 : _data$onClick.call(data);
+        setIsOpen(false);
+      },
+      onMouseUp: function onMouseUp() {
+        var _data$onClick2;
+        (_data$onClick2 = data.onClick) === null || _data$onClick2 === void 0 ? void 0 : _data$onClick2.call(data);
+        setIsOpen(false);
+      }
+    }));
+    if ('children' in item) {
+      return /*#__PURE__*/_jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+        items: item.children
+      }));
+    }
+    return /*#__PURE__*/_jsx(MenuItem, _objectSpread({}, props));
+  }, [activeIndex]);
+  var referenceRef = useMergeRefs([refs.setReference, forwardedRef]);
+  return /*#__PURE__*/_jsxs(FloatingNode, {
+    id: nodeId,
+    children: [!label ? null : /*#__PURE__*/_jsx(MenuItem, _objectSpread(_objectSpread({
+      label: label,
+      nested: isNested,
+      ref: referenceRef,
+      role: isNested ? 'menuitem' : 'menu'
+    }, props), getReferenceProps({
+      onClick: function onClick(event) {
+        event.stopPropagation();
+      }
+    }))), /*#__PURE__*/_jsx(FloatingPortal, {
+      children: isOpen && /*#__PURE__*/_jsx(FloatingFocusManager, {
+        context: context,
+        initialFocus: isNested ? -1 : 0,
+        modal: false,
+        returnFocus: !isNested,
+        children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+          className: styles.container,
+          ref: refs.setFloating
+        }, getFloatingProps()), {}, {
+          children: items === null || items === void 0 ? void 0 : items.map(renderMenuItem)
+        }))
+      })
+    })]
+  });
+});
+export default MenuItem;

package/es/Menu/style.d.ts

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

package/es/Menu/style.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, prefixCls) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    token = _ref.token;
+  return {
+    container: cx(prefixCls, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      user-select: none;\n      scrollbar-width: none;\n\n      overflow-y: auto;\n      overscroll-behavior: contain;\n\n      box-sizing: border-box;\n      width: 200px;\n      padding: 5px;\n\n      font-size: ", ";\n\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: 8px;\n      outline: 0;\n      box-shadow: ", ";\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    "])), token.fontSize, token.colorBgContainer, token.colorBorder, token.boxShadowSecondary)),
+    button: cx("".concat(prefixCls, "-button"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      all: unset;\n\n      cursor: default;\n      user-select: none;\n\n      padding: 12px 10px;\n\n      font-size: ", "px;\n      line-height: 1;\n      color: ", ";\n\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      -webkit-tap-highlight-color: transparent;\n\n      &:hover {\n        background: ", ";\n        border-color: transparent;\n      }\n\n      &:focus-visible {\n        border-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      }\n    "])), token.fontSize, token.colorText, token.colorBgContainer, token.colorBorder, token.borderRadius, token.colorPrimaryBg, token.colorPrimary, token.colorPrimaryBg))
+  };
+});

package/es/Menu/types/index.d.ts

@@ -0,0 +1,5 @@
+import { MenuItemType } from './menuItem';
+export * from './menuItem';
+export interface MenuProps {
+    items: MenuItemType[];
+}

package/es/Menu/types/index.js

@@ -0,0 +1,2 @@
+export * from "./menuItem";
+export {};

package/es/Menu/types/menuItem.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface CommonType {
+    icon?: ReactNode;
+    key: string;
+    label: string;
+    onClick?: () => void;
+}
+export interface GeneralItemType extends CommonType {
+    danger?: boolean;
+    disabled?: boolean;
+    shortcut?: ('meta' | 'control' | 'shift' | 'alt' | string)[];
+}
+export interface SubMenuType extends CommonType {
+    children: MenuItemType[];
+}
+export interface MenuDividerType {
+    dashed?: boolean;
+    type: 'divider';
+}
+export declare type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
+export {};

package/es/Menu/types/menuItem.js

@@ -0,0 +1 @@
+export {};

package/es/Spotlight/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     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 spotlightOpacity = outside ? '0' : '.1';
   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);
+  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        ", "\n      );\n      border-radius: inherit;\n\n      transition: all 0.2s;\n    "])), spotlightOpacity, spotlightSize, spotlightX, spotlightY, isDarkMode ? token.colorText : '#fff', !isDarkMode ? token.colorTextQuaternary : 'transparent');
 });

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\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  ::selection {\n    color: #000;\n    background: ", ";\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) {
@@ -15,12 +15,15 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
   return theme.colorBgLayout;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.motionEaseOut;
+  return theme.yellow9;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.fontFamilyCode;
+  return theme.motionEaseOut;
 }, function (_ref7) {
   var theme = _ref7.theme;
+  return theme.fontFamilyCode;
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.colorFill;
 });
 export default GlobalStyle;

package/es/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
+export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
 export { default as Avatar, type AvatarProps } from './Avatar';
 export type { ChatMessage, MessageRoleType } from './Chat';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';

package/es/index.js

@@ -1,4 +1,5 @@
 export { default as ActionIcon } from "./ActionIcon";
+export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Avatar } from "./Avatar";
 export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";

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-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\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)
+    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-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\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: none;\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/package.json

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