@lobehub/ui 1.121.0 → 1.122.0

package/es/Header/style.js

@@ -11,6 +11,6 @@ export var useStyles = createStyles(function (_ref) {
     content: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 64px;\n    padding: 0 24px;\n    background-color: ", ";\n    border-bottom: 1px solid ", ";\n\n    ", " {\n      padding: 0 12px;\n    }\n  "])), rgba(token.colorBgLayout, 0.4), token.colorSplit, responsive.mobile),
     header: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    grid-area: head;\n    align-self: stretch;\n    width: 100%;\n  "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    z-index: 10;\n  "]))),
-    right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    z-index: 10;\n    display: flex;\n    flex: 1;\n    justify-content: space-between;\n\n    &-aside {\n      display: flex;\n      align-items: center;\n\n      ", " {\n        justify-content: center;\n        margin: 8px 16px;\n        padding-top: 24px;\n        border-top: 1px solid ", ";\n      }\n    }\n  "])), responsive.mobile, token.colorBorder)
+    right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    z-index: 10;\n\n    &-aside {\n      display: flex;\n      align-items: center;\n\n      ", " {\n        justify-content: center;\n        margin: 8px 16px;\n        padding-top: 24px;\n        border-top: 1px solid ", ";\n      }\n    }\n  "])), responsive.mobile, token.colorBorder)
   };
 });

package/es/Hero/index.js

@@ -17,8 +17,11 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var ButtonGroups = useCallback(function () {
-    return Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx("div", {
+    return Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Flexbox, {
       className: styles.actions,
+      gap: 24,
+      horizontal: true,
+      justify: 'center',
       children: actions.map(function (_ref2, index) {
         var text = _ref2.text,
           link = _ref2.link,

package/es/Hero/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     stylish = _ref.stylish;
   return {
-    actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 24px;\n    justify-content: center;\n    margin-top: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", " {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-top: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  "])), responsive.mobile),
+    actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-top: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", " {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-top: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  "])), responsive.mobile),
     canvas: cx(stylish.gradientAnimation, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 10;\n      top: -250px;\n      left: 50%;\n      transform: translateX(-50%) scale(1.5);\n\n      width: 600px;\n      height: 400px;\n\n      opacity: 0.2;\n      filter: blur(100px);\n\n      ", " {\n        width: 200px;\n        height: 300px;\n      }\n    "])), responsive.mobile)),
     container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  "]))),
     desc: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-top: 0;\n    font-size: ", "px;\n    color: ", ";\n    text-align: center;\n\n    ", " {\n      margin: 24px 16px;\n      font-size: ", "px;\n    }\n  "])), token.fontSizeHeading3, token.colorTextSecondary, responsive.mobile, token.fontSizeHeading5),

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,7 +1,7 @@
 import { useThemeMode } from 'antd-style';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
-import { Center } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 import Icon from "../../Icon";
 import { useHighlight } from "../../hooks/useHighlight";
 import { useStyles } from "./style";
@@ -36,10 +36,12 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
         __html: data
       },
       style: style
-    }), isLoading && /*#__PURE__*/_jsxs(Center, {
+    }), isLoading && /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
       className: styles.loading,
       gap: 8,
       horizontal: true,
+      justify: 'center',
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: Loader2,
         spin: true

package/es/Highlighter/SyntaxHighlighter/style.js

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

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

@@ -1,2 +1 @@
-import 'dayjs/locale/zh-cn';
 export declare const getChatItemTime: (updateAt: number) => string;

package/es/List/ListItem/time.js

@@ -1,10 +1,6 @@
 import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-dayjs.locale('zh-cn');
 export var getChatItemTime = function getChatItemTime(updateAt) {
   var time = dayjs(updateAt);
-  var diff = dayjs().day() - time.day();
   if (time.isSame(dayjs(), 'day')) return time.format('HH:mm');
-  if (diff === 1) return '昨天';
   return time.format('MM-DD');
 };

package/es/MessageModal/index.js

@@ -70,7 +70,7 @@ var MessageModal = /*#__PURE__*/memo(function (_ref2) {
         padding: 16
       }
     } : {},
-    title: text === null || text === void 0 ? void 0 : text.title,
+    title: (text === null || text === void 0 ? void 0 : text.title) || ' ',
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       defaultValue: value,
       height: height,

package/es/SideNav/index.js

@@ -17,8 +17,11 @@ var SideNav = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles, className)
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: cx(styles, className),
+    flex: 'none',
+    justify: 'space-between'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsxs(Flexbox, {
       align: "center",

package/es/SideNav/style.js

@@ -4,5 +4,5 @@ import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 64px;\n    height: 100%;\n    min-height: 640px;\n    padding: 16px 0;\n\n    background: ", ";\n    border-right: 1px solid ", ";\n  "])), token.colorBgContainer, token.colorBorder);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 64px;\n    height: 100%;\n    min-height: 640px;\n    padding: 16px 0;\n\n    background: ", ";\n    border-right: 1px solid ", ";\n  "])), token.colorBgContainer, token.colorBorder);
 });

package/es/Snippet/index.js

@@ -4,6 +4,7 @@ var _excluded = ["symbol", "language", "children", "copyable", "type", "spotligh
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import CopyButton from "../CopyButton";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
 import Spotlight from "../Spotlight";
@@ -25,8 +26,11 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(type),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.container, className)
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: cx(styles.container, className),
+    gap: 8,
+    horizontal: true
   }, rest), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language,

package/es/Snippet/style.js

@@ -8,6 +8,6 @@ export var useStyles = createStyles(function (_ref, type) {
     prefixCls = _ref.prefixCls;
   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(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n        display: flex;\n        gap: 8px;\n        align-items: center;\n\n        max-width: 100%;\n        height: 38px;\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        .", "-highlighter-shiki {\n          position: relative;\n          overflow: hidden;\n          flex: 1;\n        }\n\n        .prism-code {\n          background: none !important;\n        }\n\n        pre {\n          overflow-x: auto !important;\n          overflow-y: hidden !important;\n          display: flex;\n          align-items: center;\n\n          width: 100%;\n          height: 36px !important;\n          margin: 0 !important;\n\n          line-height: 1;\n\n          background: none !important;\n        }\n\n        code[class*='language-'] {\n          background: none !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary, prefixCls))
+    container: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        max-width: 100%;\n        height: 38px;\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        .", "-highlighter-shiki {\n          position: relative;\n          overflow: hidden;\n          flex: 1;\n        }\n\n        .prism-code {\n          background: none !important;\n        }\n\n        pre {\n          overflow-x: auto !important;\n          overflow-y: hidden !important;\n          display: flex;\n          align-items: center;\n\n          width: 100%;\n          height: 36px !important;\n          margin: 0 !important;\n\n          line-height: 1;\n\n          background: none !important;\n        }\n\n        code[class*='language-'] {\n          background: none !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary, prefixCls))
   };
 });

package/es/SpotlightCard/SpotlightCardItem.js

@@ -20,7 +20,7 @@ var SpotlightCardItem = /*#__PURE__*/memo(function (_ref) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.itemContainer, className),
     style: _objectSpread({
       borderRadius: borderRadius

package/es/SpotlightCard/style.js

@@ -14,6 +14,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      &:hover > .", "::after {\n        opacity: 1;\n      }\n    "])), CHILDREN_CLASSNAME),
     content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      z-index: 2;\n\n      flex-grow: 1;\n\n      height: 100%;\n      margin: 1px;\n\n      background: ", ";\n      border-radius: ", "px;\n    "])), token.colorBgContainer, borderRadius - 1),
     grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: grid;\n\n      ", " {\n        display: flex;\n        flex-direction: column;\n      }\n    "])), responsive.mobile),
-    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: relative;\n\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      &::before,\n      &::after {\n        content: '';\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n        border-radius: inherit;\n\n        transition: opacity 500ms;\n      }\n\n      &::before {\n        pointer-events: none;\n        user-select: none;\n        z-index: 3;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      &::after {\n        z-index: 1;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      :hover::before {\n        opacity: 1;\n      }\n    "])), rgba(token.colorBorderSecondary, 0.75), borderRadius, size, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), size * 0.75, rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
+    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: 100%;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      &::before,\n      &::after {\n        content: '';\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n        border-radius: inherit;\n\n        transition: opacity 500ms;\n      }\n\n      &::before {\n        pointer-events: none;\n        user-select: none;\n        z-index: 3;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      &::after {\n        z-index: 1;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      :hover::before {\n        opacity: 1;\n      }\n    "])), rgba(token.colorBorderSecondary, 0.75), borderRadius, size, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), size * 0.75, rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
   };
 });

package/es/StoryBook/index.js

@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useResponsive } from 'antd-style';
 import { LevaPanel } from 'leva';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import DraggablePanel from "../DraggablePanel";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,11 +22,17 @@ export var StoryBook = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(Boolean(noPadding)),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.editor, className)
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'stretch',
+    className: cx(styles.editor, className),
+    horizontal: !mobile,
+    justify: 'stretch'
   }, rest), {}, {
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
       className: styles.left,
+      flex: 1,
+      justify: 'center',
       children: children
     }), /*#__PURE__*/_jsx(DraggablePanel, {
       className: styles.right,

package/es/StoryBook/style.js

@@ -6,8 +6,8 @@ export var useStyles = createStyles(function (_ref, noPadding) {
     token = _ref.token,
     responsive = _ref.responsive;
   return {
-    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: stretch;\n      justify-content: stretch;\n\n      width: inherit;\n      min-height: inherit;\n\n      ", " {\n        flex-direction: column;\n      }\n    "])), responsive.mobile),
-    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: auto;\n      display: flex;\n      flex: 1;\n      align-items: center;\n      justify-content: center;\n\n      position: relative;\n\n      ", "\n    "])), !noPadding && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 40px 24px;\n      "])))),
+    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: inherit;\n      min-height: inherit;\n    "]))),
+    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: auto;\n      position: relative;\n\n      ", "\n    "])), !noPadding && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 40px 24px;\n      "])))),
     leva: css(_templateObject4 || (_templateObject4 = _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),
     right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: ", ";\n\n      ", " {\n        .draggable-panel-fixed {\n          width: 100% !important;\n        }\n      }\n    "])), token.colorBgLayout, responsive.mobile)
   };

package/es/Tag/index.js

@@ -17,7 +17,7 @@ var useStyles = createStyles(function (_ref) {
     token = _ref.token;
   return {
     small: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 2px 6px;\n    line-height: 1;\n  "]))),
-    tag: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", " !important;\n    background: ", ";\n    border: ", "px;\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.colorTextSecondary, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFill))
+    tag: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    user-select: none;\n    color: ", " !important;\n    background: ", ";\n    border: ", "px;\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.colorTextSecondary, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFill))
   };
 });
 var Tag = /*#__PURE__*/memo(function (_ref2) {

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -3,5 +3,5 @@ var _templateObject;
 import { css } from 'antd-style';
 import { readableColor, rgba } from 'polished';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-checkbox-inner:after {\n    border-color: ", " !important;\n  }\n\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-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: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-image-preview-close,\n    .", "-image-preview-switch-right,.", "-image-preview-switch-left {\n    ", ";\n    border-radius: ", "px;\n    background: ", ";\n\n    width: 32px;\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.stylish.blur, token.borderRadiusLG, rgba(token.colorBgMask, 0.1), token.prefixCls);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-checkbox-inner:after {\n    border-color: ", " !important;\n  }\n\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-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: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-image-preview-close,\n    .", "-image-preview-switch-right,.", "-image-preview-switch-left {\n    ", ";\n    border-radius: ", "px;\n    background: ", ";\n\n    width: 32px;\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n  }\n\n  .", "-dropdown {\n    .", "-dropdown-menu {\n      border: 1px solid ", ";\n      border-radius: ", "px !important;\n      box-shadow: ", ";\n    }\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.stylish.blur, token.borderRadiusLG, rgba(token.colorBgMask, 0.1), token.prefixCls, token.prefixCls, token.colorBorderSecondary, token.borderRadius, token.boxShadowSecondary, token.prefixCls);
 });

package/es/TokenTag/index.js

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useResponsive } from 'antd-style';
 import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import FluentEmoji from "../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,8 +42,12 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
     className: cx(styles.container, className),
+    flex: 'none',
+    gap: 4,
+    horizontal: true,
     ref: ref
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {

package/es/TokenTag/style.js

@@ -31,6 +31,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var roundStylish = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 0 ", "px 0 ", "px;\n      background: ", ";\n      border-radius: ", "px;\n    "])), (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, isDarkMode ? token.colorFillSecondary : token.colorFillTertiary, HEIGHT / 2);
   var squareStylish = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), token.borderRadiusSM);
   return {
-    container: cx(percentStyle, shape === 'round' ? roundStylish : squareStylish, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          user-select: none;\n\n          overflow: hidden;\n          display: flex;\n          flex: 0;\n          gap: 4px;\n          align-items: center;\n\n          min-width: fit-content;\n          height: ", "px;\n\n          font-family: ", ";\n          font-size: 13px;\n          line-height: 1;\n        "])), HEIGHT, token.fontFamilyCode))
+    container: cx(percentStyle, shape === 'round' ? roundStylish : squareStylish, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          user-select: none;\n\n          overflow: hidden;\n\n          min-width: fit-content;\n          height: ", "px;\n\n          font-family: ", ";\n          font-size: 13px;\n          line-height: 1;\n        "])), HEIGHT, token.fontFamilyCode))
   };
 });

package/es/index.d.ts

@@ -36,6 +36,7 @@ export { default as FormFooter, type FormFooterProps } from './Form/components/F
 export { default as FormGroup, type FormGroupProps } from './Form/components/FormGroup';
 export { default as FormItem, type FormItemProps } from './Form/components/FormItem';
 export { default as FormTitle, type FormTitleProps } from './Form/components/FormTitle';
+export { default as GaussianBackground, type GaussianBackgroundProps } from './GaussianBackground';
 export { default as Giscus, type GiscusProps } from './Giscus';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';
 export { default as GridBackground, type GridBackgroundProps } from './GridBackground';

package/es/index.js

@@ -35,6 +35,7 @@ export { default as FormFooter } from "./Form/components/FormFooter";
 export { default as FormGroup } from "./Form/components/FormGroup";
 export { default as FormItem } from "./Form/components/FormItem";
 export { default as FormTitle } from "./Form/components/FormTitle";
+export { default as GaussianBackground } from "./GaussianBackground";
 export { default as Giscus } from "./Giscus";
 export { default as GradientButton } from "./GradientButton";
 export { default as GridBackground } from "./GridBackground";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.121.0",
+  "version": "1.122.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -144,7 +144,6 @@
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
-    "styled-components": "^6",
     "stylelint": "^15",
     "typescript": "^5",
     "vitest": "latest"

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

@@ -1,4 +0,0 @@
-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/ContextMenu/MenuItem/icons.js

@@ -1,73 +0,0 @@
-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/ContextMenu/MenuItem/index.d.ts

@@ -1,12 +0,0 @@
-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/ContextMenu/MenuItem/index.js

@@ -1,73 +0,0 @@
-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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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 = {
-  alt: /*#__PURE__*/_jsx(AltIcon, {}),
-  control: /*#__PURE__*/_jsx(ControlIcon, {}),
-  enter: '↵',
-  meta: /*#__PURE__*/_jsx(CommandIcon, {}),
-  shift: /*#__PURE__*/_jsx(ShiftIcon, {})
-};
-var CODE_MAP = {
-  alt: 'alt',
-  cmd: 'meta',
-  command: 'meta',
-  control: 'control',
-  ctl: 'control',
-  meta: 'meta',
-  shift: 'shift'
-};
-var MenuItem = /*#__PURE__*/forwardRef(function (_ref, reference) {
-  var _cx;
-  var label = _ref.label,
-    icon = _ref.icon,
-    disabled = _ref.disabled,
-    nested = _ref.nested,
-    shortcut = _ref.shortcut,
-    active = _ref.active,
-    selected = _ref.selected,
-    properties = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({
-    type: 'button'
-  }, properties), {}, {
-    className: cx(styles.item, (_cx = {}, _defineProperty(_cx, styles.selected, selected), _defineProperty(_cx, styles.active, active), _cx)),
-    disabled: disabled,
-    ref: reference,
-    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);
-      })
-    }) : undefined]
-  }));
-});
-export default MenuItem;

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

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

package/es/ContextMenu/MenuItem/style.js

@@ -1,16 +0,0 @@
-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 {
-    active: cx("".concat(prefixCls, "-item-active"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorFillTertiary)),
-    arrow: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorTextTertiary),
-    item: cx("".concat(prefixCls, "-item"), css(_templateObject4 || (_templateObject4 = _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)),
-    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),
-    selected: cx("".concat(prefixCls, "-item-selected"), selected)
-  };
-});

package/es/ContextMenu/style.d.ts

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

package/es/ContextMenu/style.js

@@ -1,12 +0,0 @@
-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 {
-    button: cx("".concat(prefixCls, "-button"), css(_templateObject || (_templateObject = _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)),
-    container: cx(prefixCls, css(_templateObject2 || (_templateObject2 = _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))
-  };
-});

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

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

package/es/ContextMenu/types/index.js

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

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

@@ -1,21 +0,0 @@
-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 type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
-export {};

package/es/ContextMenu/types/menuItem.js

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