@lobehub/ui 1.7.1 → 1.7.3

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -10,6 +10,6 @@ export var useStyles = createStyles(function (_ref) {
   return {
     shiki: cx("".concat(prefix, "-shiki"), css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        .shiki {\n          overflow-x: scroll;\n          background: none !important;\n        }\n      "])))),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow-x: scroll;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    loading: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 0;\n      right: 0;\n      color: ", ";\n      padding: 4px 8px;\n      backdrop-filter: saturate(180%) blur(10px);\n      border-radius: ", ";\n    "])), token.colorTextTertiary, token.borderRadiusSM)
+    loading: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 0;\n      right: 0;\n\n      padding: 4px 8px;\n\n      color: ", ";\n\n      backdrop-filter: saturate(180%) blur(10px);\n      border-radius: ", ";\n    "])), token.colorTextTertiary, token.borderRadiusSM)
   };
 });

package/es/Highlighter/style.js

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

package/es/Logo/style.js

@@ -5,6 +5,6 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
     flexCenter: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "]))),
-    extraTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      white-space: nowrap;\n      font-weight: 300;\n    "])))
+    extraTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      font-weight: 300;\n      white-space: nowrap;\n    "])))
   };
 });

package/es/Markdown/index.js

@@ -1,10 +1,11 @@
 import { Divider, Typography } from 'antd';
+import pangu from 'pangu';
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useStyles } from "./style";
 import Code from "./Code";
 import CodeBlock from "./CodeBlock";
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Markdown = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
@@ -23,7 +24,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
       className: cx(styles.container, className),
       components: components,
       remarkPlugins: [remarkGfm],
-      children: children
+      children: pangu.spacing(children)
     })
   });
 });

package/es/Markdown/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n       color: ", ";\n\n\n\n      p {\n        margin: 20px auto;\n        line-height: 2;\n        word-wrap: break-word;\n        font-size: 14px;\n        color: ", ";\n\n        &:not(:last-child) {\n          margin-bottom: 1em;\n        }\n      }\n\n      // hyperlink\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      // inline code\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n\n      // table\n      table {\n        width: 100%;\n        border-spacing: 0;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        padding: 8px;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n      }\n\n      th {\n\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      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      // blockquote\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      // list\n      ul li {\n        line-height: 1.8;\n      }\n    }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.colorTextDescription),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 2;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
     code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
   };
 });

package/es/Snippet/style.js

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

package/es/StroyBook/style.js

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

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  body {\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 1;\n    color: ", ";\n\n    margin: 0;\n    padding: 0;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n  /* \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u6837\u5F0F */\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    margin-right: 4px;\n    background-color: transparent; // \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u80CC\u666F\u8272\n\n    &-thumb {\n      background-color: ", "; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u80CC\u666F\u8272\n      border-radius: 4px; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u5706\u89D2\u534A\u5F84\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\";\n    --font-variations: \"opsz\" auto;\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    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    background-color: transparent;\n\n    &-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -10,10 +10,11 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.colorTextBase;
-}, function (p) {
-  return p.theme.colorBgLayout;
 }, function (_ref4) {
   var theme = _ref4.theme;
+  return theme.colorBgLayout;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.colorFill;
 });
 export default GlobalStyle;

package/es/Tooltip/style.js

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

package/es/styles/customStylish.js

@@ -11,9 +11,9 @@ export var getCustomStylish = function getCustomStylish(_ref) {
     heroButtonGradient: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: linear-gradient(90deg, ", " 0%, ", " 100%);\n    "])), token.gradientColor1, token.gradientColor2),
     heroGradient: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: ", ";\n      background-size: 300% 300%;\n    "])), token.gradientHeroBgG),
     heroGradientFlow: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      animation: flow 5s ease infinite;\n\n      @keyframes flow {\n        0% {\n          background-position: 0 0;\n        }\n\n        50% {\n          background-position: 100% 100%;\n        }\n\n        100% {\n          background-position: 0 0;\n        }\n      }\n    "]))),
-    heroTextShadow: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      will-change: transform;\n\n      text-shadow: 0 8px 20px ", ",\n        0 8px 60px ", ",\n        0 8px 80px ", ";\n    "])), rgba(token.gradientColor2, 0.2), rgba(token.gradientColor3, 0.2), rgba(token.cyan, isDarkMode ? 0.2 : 0.4)),
-    heroBlurBall: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      filter: blur(69px);\n      will-change: transform;\n      background: linear-gradient(\n        135deg,\n        ", " 0%,\n        ", " 30%,\n        ", " 70%,\n        ", " 100%\n      );\n      background-size: 200% 200%;\n      animation: glow 10s ease infinite;\n\n      @keyframes glow {\n        0% {\n          background-position: 0 -100%;\n        }\n\n        50% {\n          background-position: 200% 50%;\n        }\n\n        100% {\n          background-position: 0 -100%;\n        }\n      }\n    "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
-    iconGradientDefault: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      radial-gradient(\n        100% 100% at 50% 0,\n        ", " 0,\n        ", " 100%\n      )"])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
-    blur: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(7px);\n      // background: ", ";\n    "])), rgba(token.colorBgBase, 0.5))
+    heroTextShadow: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      will-change: transform;\n      text-shadow: 0 8px 20px ", ",\n        0 8px 60px ", ",\n        0 8px 80px ", ";\n    "])), rgba(token.gradientColor2, 0.2), rgba(token.gradientColor3, 0.2), rgba(token.cyan, isDarkMode ? 0.2 : 0.4)),
+    heroBlurBall: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      will-change: transform;\n\n      background: linear-gradient(\n        135deg,\n        ", " 0%,\n        ", " 30%,\n        ", " 70%,\n        ", " 100%\n      );\n      background-size: 200% 200%;\n      filter: blur(69px);\n\n      animation: glow 10s ease infinite;\n\n      @keyframes glow {\n        0% {\n          background-position: 0 -100%;\n        }\n\n        50% {\n          background-position: 200% 50%;\n        }\n\n        100% {\n          background-position: 0 -100%;\n        }\n      }\n    "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
+    iconGradientDefault: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      background-image: radial-gradient(\n        100% 100% at 50% 0,\n        ", " 0,\n        ", " 100%\n      );\n    "])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
+    blur: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(7px);\n    "])))
   };
 };

package/es/styles/theme/base.js

@@ -1,3 +1,7 @@
+var FONT_EMOJI = "\"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Apple Color Emoji\", \"Twemoji Mozilla\", \"Noto Color Emoji\", \"Android Emoji\"";
+var FONT_EN = "\"Segoe UI\", \"SF Pro Display\",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif";
+var FONT_CN = "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft Yahei UI\", \"Microsoft Yahei\", \"Source Han Sans CN\", sans-serif";
+var FONT_CODE = "\"Hack Nerd Font Mono\", Hack, \"SFMono Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace";
 export var baseTheme = {
   token: {
     colorInfo: '#0070f3',
@@ -9,7 +13,7 @@ export var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: "'Segoe UI', SegoeUI, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'",
-    fontFamilyCode: "'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+    fontFamily: [FONT_EN, FONT_CN, FONT_EMOJI].join(','),
+    fontFamilyCode: FONT_CODE
   }
 };

package/lib/Highlighter/SyntaxHighlighter/style.js

@@ -45,8 +45,11 @@ var useStyles = (0, import_antd_style.createStyles)(({ css, token, cx, prefixCls
       position: absolute;
       top: 0;
       right: 0;
-      color: ${token.colorTextTertiary};
+
       padding: 4px 8px;
+
+      color: ${token.colorTextTertiary};
+
       backdrop-filter: saturate(180%) blur(10px);
       border-radius: ${token.borderRadiusSM};
     `

package/lib/Highlighter/style.js

@@ -33,18 +33,26 @@ var useStyles = (0, import_antd_style.createStyles)(
       container: cx(
         prefix,
         css`
-          overflow: auto;
           position: relative;
-          transition: background-color 100ms ${token.motionEaseOut};
+
+          overflow: auto;
+
           background-color: ${type === "block" ? (0, import_polished.rgba)(token.colorBgElevated, 0.6) : "transparent"};
           border-radius: ${token.borderRadius}px;
 
+          transition: background-color 100ms ${token.motionEaseOut};
           ${type === "ghost" && css`
             border: 1px solid ${token.colorBorder};
           `}
-
           &:hover {
             background-color: ${type === "prue" ? "transparent" : token.colorFillTertiary};
+            .${buttonHoverCls} {
+              opacity: 1;
+            }
+
+            .${langHoverCls} {
+              opacity: 1;
+            }
           }
 
           .prism-code {
@@ -60,16 +68,6 @@ var useStyles = (0, import_antd_style.createStyles)(
           code {
             background: transparent !important;
           }
-
-          &:hover {
-            .${buttonHoverCls} {
-              opacity: 1;
-            }
-
-            .${langHoverCls} {
-              opacity: 1;
-            }
-          }
         `
       ),
       button: cx(

package/lib/Logo/style.js

@@ -30,8 +30,8 @@ var useStyles = (0, import_antd_style.createStyles)(({ css }) => {
       align-items: center;
     `,
     extraTitle: css`
-      white-space: nowrap;
       font-weight: 300;
+      white-space: nowrap;
     `
   };
 });

package/lib/Markdown/index.js

@@ -33,12 +33,13 @@ __export(Markdown_exports, {
 });
 module.exports = __toCommonJS(Markdown_exports);
 var import_antd = require("antd");
+var import_pangu = __toESM(require("pangu"));
 var import_react = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_style = require("./style");
 var import_Code = __toESM(require("./Code"));
 var import_CodeBlock = __toESM(require("./CodeBlock"));
+var import_style = require("./style");
 var Markdown = (0, import_react.memo)(({ children, className }) => {
   const { styles, cx } = (0, import_style.useStyles)();
   const components = { pre: import_CodeBlock.default, code: import_Code.default, hr: import_antd.Divider, a: import_antd.Typography.Link };
@@ -49,7 +50,7 @@ var Markdown = (0, import_react.memo)(({ children, className }) => {
       components,
       remarkPlugins: [import_remark_gfm.default]
     },
-    children
+    import_pangu.default.spacing(children)
   ));
 });
 var Markdown_default = Markdown;

package/lib/Markdown/style.js

@@ -26,23 +26,31 @@ var import_antd_style = require("antd-style");
 var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode }) => {
   return {
     container: css`
-       color: ${isDarkMode ? token.colorTextSecondary : token.colorText};
-
-
+      color: ${isDarkMode ? token.colorTextSecondary : token.colorText};
 
       p {
         margin: 20px auto;
-        line-height: 2;
-        word-wrap: break-word;
+
         font-size: 14px;
+        line-height: 2;
         color: ${token.colorText};
+        text-align: justify;
+        word-wrap: break-word;
+      }
 
-        &:not(:last-child) {
-          margin-bottom: 1em;
+      blockquote {
+        margin: 16px 0;
+        padding: 0 12px;
+        p {
+          font-style: italic;
+          color: ${token.colorTextDescription};
         }
       }
 
-      // hyperlink
+      p:not(:last-child) {
+        margin-bottom: 1em;
+      }
+
       a {
         color: ${token.colorLink};
 
@@ -59,7 +67,6 @@ var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode })
         max-width: 100%;
       }
 
-      // inline code
       > :not([data-code-type='highlighter']) code {
         padding: 2px 6px;
         color: ${isDarkMode ? token["cyan-7"] : token.colorPrimaryText};
@@ -67,22 +74,26 @@ var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode })
         border-radius: 4px;
       }
 
-
-      // table
       table {
-        width: 100%;
         border-spacing: 0;
-        border: 1px solid ${token.colorBorder};
-        border-radius: ${token.borderRadius}px;
-        padding: 8px;
+
+        width: 100%;
         margin-block-start: 1em;
         margin-block-end: 1em;
         margin-inline-start: 0px;
         margin-inline-end: 0px;
-      }
+        padding: 8px;
 
-      th {
+        border: 1px solid ${token.colorBorder};
+        border-radius: ${token.borderRadius}px;
+      }
 
+      th,
+      td {
+        padding-block-start: 10px;
+        padding-block-end: 10px;
+        padding-inline-start: 16px;
+        padding-inline-end: 16px;
       }
 
       thead {
@@ -101,29 +112,9 @@ var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode })
         }
       }
 
-      th,
-      td {
-        padding-block-start: 10px;
-        padding-block-end: 10px;
-        padding-inline-start: 16px;
-        padding-inline-end: 16px;
-      }
-
-      // blockquote
-      blockquote {
-        margin: 16px 0;
-        padding: 0 12px;
-        p {
-          font-style: italic;
-          color: ${token.colorTextDescription};
-        }
-      }
-
-      // list
       ul li {
         line-height: 1.8;
       }
-    }
     `,
     code: css`
       padding: 2px 4px;

package/lib/Snippet/style.js

@@ -26,21 +26,24 @@ var import_antd_style = require("antd-style");
 var import_polished = require("polished");
 var useStyles = (0, import_antd_style.createStyles)(
   ({ css, token }, type) => css`
-      display: flex;
-      max-width: 100%;
       position: relative;
-      align-items: center;
-      border-radius: ${token.borderRadius}px;
+
+      display: flex;
       gap: 8px;
-      padding: 0 8px 0 12px;
+      align-items: center;
+
+      max-width: 100%;
       height: 36px;
-      transition:  background-color 100ms ${token.motionEaseOut};
+      padding: 0 8px 0 12px;
+
+      border-radius: ${token.borderRadius}px;
 
+      transition: background-color 100ms ${token.motionEaseOut};
       ${type === "block" ? css`
-              background-color: ${(0, import_polished.rgba)(token.colorBgElevated, 0.6)};
-            ` : css`
-              border: 1px solid ${token.colorBorder};
-            `}
+            background-color: ${(0, import_polished.rgba)(token.colorBgElevated, 0.6)};
+          ` : css`
+            border: 1px solid ${token.colorBorder};
+          `}
 
       &:hover {
         background-color: ${token.colorFillTertiary};
@@ -55,11 +58,12 @@ var useStyles = (0, import_antd_style.createStyles)(
       }
 
       pre {
-        background: none !important;
-        padding-top: 6px; !important;
         margin: 0 !important;
+        padding-top: 6px !important;
         line-height: 1;
+        background: none !important;
       }
+
       code[class*='language-'] {
         background: none !important;
       }

package/lib/StroyBook/style.js

@@ -30,6 +30,7 @@ var useStyles = (0, import_antd_style.createStyles)(
         display: flex;
         align-items: stretch;
         justify-content: stretch;
+
         width: inherit;
         min-height: inherit;
         ${mobile && css`
@@ -37,11 +38,12 @@ var useStyles = (0, import_antd_style.createStyles)(
         `}
       `,
       left: css`
-        flex: 1;
+        overflow: auto;
         display: flex;
+        flex: 1;
         align-items: center;
         justify-content: center;
-        overflow: auto;
+
         ${!noPadding && css`
           padding: 40px 24px;
         `}
@@ -60,6 +62,7 @@ var useStyles = (0, import_antd_style.createStyles)(
         --leva-colors-vivid1: ${token.colorWarning};
         --leva-shadows-level1: unset;
         --leva-shadows-level2: unset;
+
         padding: 6px 0;
         background: ${token.colorBgLayout};
         > div {

package/lib/ThemeProvider/GlobalStyle.js

@@ -25,43 +25,62 @@ module.exports = __toCommonJS(GlobalStyle_exports);
 var import_antd_style = require("antd-style");
 var GlobalStyle = import_antd_style.createGlobalStyle`
 
-  body {
+  html,body {
+    --font-settings: "cv01";
+    --font-variations: "opsz" auto;
+
+    overflow-x: hidden;
+
+    margin: 0;
+    padding: 0;
+
     font-family: ${({ theme }) => theme.fontFamily};
     font-size: ${({ theme }) => theme.fontSize}px;
+    font-feature-settings: var(--font-settings);
+    font-variation-settings: var(--font-variations);
     line-height: 1;
     color: ${({ theme }) => theme.colorTextBase};
+    text-size-adjust: none;
+    text-rendering: optimizelegibility;
+    vertical-align: baseline;
 
-    margin: 0;
-    padding: 0;
-    background-color: ${(p) => p.theme.colorBgLayout};
+    color-scheme: dark;
+    background-color: ${({ theme }) => theme.colorBgLayout};
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
   }
 
+
   * {
     box-sizing: border-box;
+    vertical-align: baseline;
   }
 
   #root {
 	  min-height: 100vh;
   }
-  /* 定义滚动槽的样式 */
+
   ::-webkit-scrollbar {
     width: 0;
     height: 4px;
-    margin-right: 4px;
-    background-color: transparent; // 定义滚动槽的背景色
+    background-color: transparent;
 
     &-thumb {
-      background-color: ${({ theme }) => theme.colorFill}; // 定义滚动块的背景色
-      border-radius: 4px; // 定义滚动块的圆角半径
+      background-color: ${({ theme }) => theme.colorFill};
+      border-radius: 4px;
     }
 
     &-corner {
       display: none;
     }
   }
+
+  p {
+    text-align: justify;
+    word-wrap: break-word;
+  }
 `;
 var GlobalStyle_default = GlobalStyle;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/Tooltip/style.js

@@ -27,14 +27,17 @@ var useStyles = (0, import_antd_style.createStyles)(({ css, token }) => {
   return {
     tooltip: css`
       .ant-tooltip-inner {
-        background-color: ${token.colorText};
-        color: ${token.colorBgLayout};
-        padding: 4px 8px;
-        border-radius: ${token.borderRadiusSM}px;
-        min-height: unset;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        min-height: unset;
+        padding: 4px 8px;
+
+        color: ${token.colorBgLayout};
+
+        background-color: ${token.colorText};
+        border-radius: ${token.borderRadiusSM}px;
       }
       .ant-tooltip-arrow {
         &:before,

package/lib/styles/customStylish.js

@@ -67,14 +67,13 @@ var getCustomStylish = ({ css, token, isDarkMode }) => {
     `,
     heroTextShadow: css`
       will-change: transform;
-
       text-shadow: 0 8px 20px ${(0, import_polished.rgba)(token.gradientColor2, 0.2)},
         0 8px 60px ${(0, import_polished.rgba)(token.gradientColor3, 0.2)},
         0 8px 80px ${(0, import_polished.rgba)(token.cyan, isDarkMode ? 0.2 : 0.4)};
     `,
     heroBlurBall: css`
-      filter: blur(69px);
       will-change: transform;
+
       background: linear-gradient(
         135deg,
         ${token.gradientColor3} 0%,
@@ -83,6 +82,8 @@ var getCustomStylish = ({ css, token, isDarkMode }) => {
         ${token.cyan} 100%
       );
       background-size: 200% 200%;
+      filter: blur(69px);
+
       animation: glow 10s ease infinite;
 
       @keyframes glow {
@@ -100,14 +101,14 @@ var getCustomStylish = ({ css, token, isDarkMode }) => {
       }
     `,
     iconGradientDefault: css`
-      radial-gradient(
+      background-image: radial-gradient(
         100% 100% at 50% 0,
         ${(0, import_polished.rgba)(token.colorSolid, 0.2)} 0,
         ${(0, import_polished.rgba)(token.colorSolid, 0.1)} 100%
-      )`,
+      );
+    `,
     blur: css`
       backdrop-filter: blur(7px);
-      // background: ${(0, import_polished.rgba)(token.colorBgBase, 0.5)};
     `
   };
 };

package/lib/styles/theme/base.js

@@ -22,6 +22,10 @@ __export(base_exports, {
   baseTheme: () => baseTheme
 });
 module.exports = __toCommonJS(base_exports);
+var FONT_EMOJI = `"Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"`;
+var FONT_EN = `"Segoe UI", "SF Pro Display",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`;
+var FONT_CN = `"PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif`;
+var FONT_CODE = `"Hack Nerd Font Mono", Hack, "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`;
 var baseTheme = {
   token: {
     colorInfo: "#0070f3",
@@ -33,8 +37,8 @@ var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: `'Segoe UI', SegoeUI, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'`,
-    fontFamilyCode: `'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace`
+    fontFamily: [FONT_EN, FONT_CN, FONT_EMOJI].join(","),
+    fontFamilyCode: FONT_CODE
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -38,12 +38,14 @@
     "docs:build": "npm run build:theme && dumi build",
     "doctor": "father doctor",
     "lint": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "npm run lint --fix",
     "prepare": "husky install && npm run setup",
     "prepublishOnly": "father doctor && npm run build",
     "prettier": "prettier -c --write \"**/**\"",
     "release": "semantic-release",
     "setup": "dumi setup",
     "start": "dumi dev",
+    "stylelint": "stylelint \"{src,test}/**/*.{js,jsx,ts,tsx}\" --fix",
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage  --passWithNoTests",
     "test:update": "vitest -u",
@@ -55,10 +57,12 @@
     ],
     "*.{js,jsx}": [
       "eslint --fix",
+      "stylelint --fix",
       "prettier --write"
     ],
     "*.{ts,tsx}": [
       "eslint --fix",
+      "stylelint --fix",
       "prettier --parser=typescript --write"
     ]
   },
@@ -74,16 +78,17 @@
     "dayjs": "^1",
     "fast-deep-equal": "^3",
     "immer": "^10",
-    "leva": "^0.9.34",
+    "leva": "^0.9",
     "lodash": "^4",
     "lucide-react": "latest",
+    "pangu": "^4",
     "polished": "^4",
     "prism-react-renderer": "^2",
     "re-resizable": "^6",
     "react-layout-kit": "^1",
     "react-markdown": "^8",
     "react-rnd": "^10",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^3",
     "shiki-es": "^0.2",
     "styled-components": "^6.0.0-rc.1",
     "ts-md5": "^1",
@@ -97,6 +102,7 @@
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash": "^4",
+    "@types/pangu": "^4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@umijs/lint": "^4",
@@ -106,7 +112,7 @@
     "commitlint-config-gitmoji": "^2",
     "concurrently": "^8",
     "cross-env": "^7",
-    "dumi": "^2",
+    "dumi": "2",
     "dumi-assets-types": "^1",
     "dumi-theme-lobehub": "latest",
     "eslint": "^8",
@@ -116,6 +122,7 @@
     "husky": "^8",
     "jsdom": "^22",
     "lint-staged": "^13",
+    "postcss-styled-syntax": "^0.4",
     "prettier": "^2",
     "prettier-plugin-organize-imports": "^3",
     "prettier-plugin-packagejson": "^2",
@@ -124,6 +131,9 @@
     "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
     "stylelint": "^15",
+    "stylelint-config-clean-order": "^5",
+    "stylelint-config-recommended": "^12",
+    "stylelint-order": "^6",
     "typescript": "^5",
     "vitest": "latest"
   },