@lobehub/ui 1.117.0 → 1.118.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,16 @@
1
- /// <reference types="react" />
2
1
  import { type AlertProps as AntAlertProps } from 'antd';
2
+ import { type ReactNode } from 'react';
3
3
  export interface AlertProps extends AntAlertProps {
4
+ classNames?: {
5
+ alert?: string;
6
+ container?: string;
7
+ };
4
8
  colorfulText?: boolean;
5
- styleType?: 'block' | 'ghost' | 'pure';
9
+ extra?: ReactNode;
10
+ text?: {
11
+ detail?: string;
12
+ };
13
+ variant?: 'default' | 'block' | 'ghost' | 'pure';
6
14
  }
7
15
  declare const Alert: import("react").NamedExoticComponent<AlertProps>;
8
16
  export default Alert;
package/es/Alert/index.js CHANGED
@@ -1,16 +1,19 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _excluded = ["closeIcon", "closable", "description", "showIcon", "type", "styleType", "icon", "colorfulText", "style"];
4
+ var _excluded = ["closeIcon", "closable", "description", "showIcon", "type", "variant", "icon", "colorfulText", "style", "extra", "classNames", "text"];
4
5
  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; }
5
6
  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; }
6
- import { Alert as AntdAlert } from 'antd';
7
+ import { Alert as AntdAlert, message } from 'antd';
7
8
  import { camelCase } from 'lodash-es';
8
- import { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';
9
- import { memo } from 'react';
9
+ import { AlertTriangle, CheckCircle, ChevronDown, ChevronRight, Info, X, XCircle } from 'lucide-react';
10
+ import { memo, useState } from 'react';
11
+ import { Flexbox } from 'react-layout-kit';
10
12
  import ActionIcon from "../ActionIcon";
11
13
  import Icon from "../Icon";
12
14
  import { useStyles } from "./style";
13
15
  import { jsx as _jsx } from "react/jsx-runtime";
16
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
17
  var typeIcons = {
15
18
  error: XCircle,
16
19
  info: Info,
@@ -26,17 +29,26 @@ var colors = function colors(theme) {
26
29
  };
27
30
  var Alert = /*#__PURE__*/memo(function (_ref) {
28
31
  var closeIcon = _ref.closeIcon,
29
- closable = _ref.closable,
32
+ _ref$closable = _ref.closable,
33
+ closable = _ref$closable === void 0 ? false : _ref$closable,
30
34
  description = _ref.description,
31
- showIcon = _ref.showIcon,
35
+ _ref$showIcon = _ref.showIcon,
36
+ showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
32
37
  _ref$type = _ref.type,
33
38
  type = _ref$type === void 0 ? 'info' : _ref$type,
34
- styleType = _ref.styleType,
39
+ variant = _ref.variant,
35
40
  icon = _ref.icon,
36
41
  _ref$colorfulText = _ref.colorfulText,
37
42
  colorfulText = _ref$colorfulText === void 0 ? true : _ref$colorfulText,
38
43
  style = _ref.style,
44
+ extra = _ref.extra,
45
+ classNames = _ref.classNames,
46
+ text = _ref.text,
39
47
  rest = _objectWithoutProperties(_ref, _excluded);
48
+ var _useState = useState(true),
49
+ _useState2 = _slicedToArray(_useState, 2),
50
+ expand = _useState2[0],
51
+ setExpand = _useState2[1];
40
52
  var _useStyles = useStyles({
41
53
  closable: !!closable,
42
54
  hasTitle: !!description,
@@ -45,8 +57,8 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
45
57
  theme = _useStyles.theme,
46
58
  styles = _useStyles.styles,
47
59
  cx = _useStyles.cx;
48
- return /*#__PURE__*/_jsx(AntdAlert, _objectSpread({
49
- className: cx(styles.container, colorfulText && styles.colorfulText, styleType === 'block' && styles.styleBlock, styleType === 'ghost' && styles.styleGhost, styleType === 'pure' && styles.stylePure),
60
+ var alert = /*#__PURE__*/_jsx(AntdAlert, _objectSpread({
61
+ className: cx(styles.container, colorfulText && styles.colorfulText, !!extra && styles.hasExtra, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure, classNames === null || classNames === void 0 ? void 0 : classNames.alert, !extra && styles.container),
50
62
  closable: closable,
51
63
  closeIcon: closeIcon || /*#__PURE__*/_jsx(ActionIcon, {
52
64
  color: colors(theme, type),
@@ -66,5 +78,43 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
66
78
  }, style),
67
79
  type: type
68
80
  }, rest));
81
+ if (!extra) return alert;
82
+ return /*#__PURE__*/_jsxs(Flexbox, {
83
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
84
+ children: [alert, /*#__PURE__*/_jsxs(Flexbox, {
85
+ className: cx(styles.extra, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure),
86
+ style: {
87
+ background: colors(theme, type, 'bg'),
88
+ borderColor: colors(theme, type, 'border'),
89
+ color: colors(theme, type),
90
+ fontSize: description ? 14 : 12
91
+ },
92
+ children: [/*#__PURE__*/_jsxs(Flexbox, {
93
+ align: 'center',
94
+ className: cx(styles.extraHeader, variant === 'pure' && styles.variantPureExtraHeader),
95
+ gap: message ? 6 : 10,
96
+ horizontal: true,
97
+ style: {
98
+ borderColor: colors(theme, type, 'border')
99
+ },
100
+ children: [/*#__PURE__*/_jsx(ActionIcon, {
101
+ color: colorfulText ? colors(theme, type) : undefined,
102
+ icon: expand ? ChevronDown : ChevronRight,
103
+ onClick: function onClick() {
104
+ return setExpand(!expand);
105
+ },
106
+ size: {
107
+ blockSize: 24,
108
+ fontSize: 18
109
+ }
110
+ }), /*#__PURE__*/_jsx("div", {
111
+ children: (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details'
112
+ })]
113
+ }), expand && /*#__PURE__*/_jsx("div", {
114
+ className: cx(styles.extraBody, variant === 'pure' && styles.variantPure),
115
+ children: extra
116
+ })]
117
+ })]
118
+ });
69
119
  });
70
120
  export default Alert;
@@ -5,7 +5,12 @@ export declare const useStyles: (props?: {
5
5
  } | undefined) => import("antd-style").ReturnStyles<{
6
6
  colorfulText: import("antd-style").SerializedStyles;
7
7
  container: string;
8
- styleBlock: import("antd-style").SerializedStyles;
9
- styleGhost: import("antd-style").SerializedStyles;
10
- stylePure: import("antd-style").SerializedStyles;
8
+ extra: import("antd-style").SerializedStyles;
9
+ extraBody: import("antd-style").SerializedStyles;
10
+ extraHeader: import("antd-style").SerializedStyles;
11
+ hasExtra: import("antd-style").SerializedStyles;
12
+ variantBlock: import("antd-style").SerializedStyles;
13
+ variantGhost: import("antd-style").SerializedStyles;
14
+ variantPure: import("antd-style").SerializedStyles;
15
+ variantPureExtraHeader: import("antd-style").SerializedStyles;
11
16
  }>;
package/es/Alert/style.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
3
3
  import { createStyles } from 'antd-style';
4
4
  export var useStyles = createStyles(function (_ref, _ref2) {
5
5
  var cx = _ref.cx,
6
+ token = _ref.token,
6
7
  css = _ref.css,
7
8
  prefixCls = _ref.prefixCls;
8
9
  var closable = _ref2.closable,
@@ -12,9 +13,14 @@ export var useStyles = createStyles(function (_ref, _ref2) {
12
13
  var baseInlinePadding = hasTitle ? 16 : 12;
13
14
  return {
14
15
  colorfulText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "-alert-message,.", "-alert-description {\n color: inherit;\n }\n "])), prefixCls, prefixCls),
15
- container: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n align-items: flex-start;\n\n padding-right: ", "px;\n padding-left: ", "px;\n padding-block: ", "px;\n\n .", "-alert-message {\n font-weight: ", ";\n line-height: 24px;\n word-break: break-all;\n }\n .", "-alert-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n .", "-alert-close-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n "])), hasTitle ? 12 : 8, closable ? baseInlinePadding : baseInlinePadding * 1.5, showIcon ? baseInlinePadding : baseInlinePadding * 1.5, baseBlockPadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", "-alert-description {\n line-height: 1.5;\n word-break: break-all;\n opacity: 0.75;\n }\n "])), prefixCls)),
16
- styleBlock: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border: none;\n "]))),
17
- styleGhost: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: transparent;\n "]))),
18
- stylePure: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 0 !important;\n background: transparent;\n border: none;\n "])))
16
+ container: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n flex-direction: row;\n gap: ", "px;\n align-items: flex-start;\n\n max-width: 100%;\n padding-right: ", "px;\n padding-left: ", "px;\n padding-block: ", "px;\n\n .", "-alert-message {\n font-weight: ", ";\n line-height: 24px;\n word-break: break-all;\n }\n .", "-alert-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n .", "-alert-close-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n "])), hasTitle ? 12 : 8, closable ? baseInlinePadding : baseInlinePadding * 1.5, showIcon ? baseInlinePadding : baseInlinePadding * 1.5, baseBlockPadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", "-alert-description {\n line-height: 1.5;\n word-break: break-all;\n opacity: 0.75;\n }\n "])), prefixCls)),
17
+ extra: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n\n overflow: hidden;\n\n max-width: 100%;\n\n border: 1px solid;\n border-top: none;\n border-bottom-right-radius: ", "px;\n border-bottom-left-radius: ", "px;\n "])), token.borderRadiusLG, token.borderRadiusLG),
18
+ extraBody: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow-x: auto;\n width: 100%;\n padding-block: ", "px;\n padding-inline: ", "px;\n "])), baseBlockPadding, baseInlinePadding),
19
+ extraHeader: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding-block: ", "px;\n padding-inline: ", "px;\n border-top: 1px dashed;\n "])), baseBlockPadding * 0.75, baseInlinePadding * 0.75),
20
+ hasExtra: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n "]))),
21
+ variantBlock: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border: none;\n "]))),
22
+ variantGhost: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n background: transparent !important;\n "]))),
23
+ variantPure: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding: 0 !important;\n background: transparent !important;\n border: none;\n "]))),
24
+ variantPureExtraHeader: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-top: ", "px;\n margin-left: ", "px;\n padding-inline: 0;\n "])), baseBlockPadding, -baseInlinePadding * 0.25)
19
25
  };
20
26
  });
@@ -6,7 +6,6 @@ import { Flexbox } from 'react-layout-kit';
6
6
  import Alert from "../../Alert";
7
7
  import { useStyles } from "../style";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
9
  var ErrorContent = /*#__PURE__*/memo(function (_ref) {
11
10
  var message = _ref.message,
12
11
  error = _ref.error,
@@ -15,14 +14,14 @@ var ErrorContent = /*#__PURE__*/memo(function (_ref) {
15
14
  placement: placement
16
15
  }),
17
16
  styles = _useStyles.styles;
18
- return /*#__PURE__*/_jsxs(Flexbox, {
19
- className: styles.errorContent,
20
- gap: 8,
21
- children: [/*#__PURE__*/_jsx(Alert, _objectSpread({
17
+ return /*#__PURE__*/_jsx(Flexbox, {
18
+ className: styles.errorContainer,
19
+ children: /*#__PURE__*/_jsx(Alert, _objectSpread({
22
20
  closable: false,
21
+ extra: message,
23
22
  showIcon: true,
24
23
  type: 'error'
25
- }, error)), message]
24
+ }, error))
26
25
  });
27
26
  });
28
27
  export default ErrorContent;
@@ -13,7 +13,7 @@ export declare const useStyles: (props?: {
13
13
  container: string;
14
14
  editingContainer: string;
15
15
  editingInput: import("antd-style").SerializedStyles;
16
- errorContent: import("antd-style").SerializedStyles;
16
+ errorContainer: import("antd-style").SerializedStyles;
17
17
  loading: import("antd-style").SerializedStyles;
18
18
  message: string;
19
19
  messageContainer: string;
@@ -20,17 +20,17 @@ export var useStyles = createStyles(function (_ref, _ref2) {
20
20
  var typeStylish = type === 'block' ? blockStylish : pureStylish;
21
21
  var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
22
22
  return {
23
- actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n align-self: ", ";\n justify-content: ", ";\n "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n pointer-events: none !important;\n opacity: 0 !important;\n "])))),
23
+ actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: none;\n align-self: ", ";\n justify-content: ", ";\n "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n pointer-events: none !important;\n opacity: 0 !important;\n "])))),
24
24
  avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n flex: none;\n width: ", "px;\n height: ", "px;\n "])), avatarSize, avatarSize),
25
25
  avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), avatarSize),
26
- container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n max-width: 100vw;\n padding: 12px 16px;\n\n time {\n display: inline-block;\n white-space: nowrap;\n }\n\n div[role='menubar'] {\n display: flex;\n }\n\n time,\n div[role='menubar'] {\n pointer-events: none;\n opacity: 0;\n transition: opacity 200ms ", ";\n }\n\n &:hover {\n time,\n div[role='menubar'] {\n pointer-events: unset;\n opacity: 1;\n }\n }\n\n ", " {\n padding: 4px 8px;\n }\n "])), token.motionEaseOut, responsive.mobile)),
26
+ container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n max-width: 100vw;\n padding: 16px;\n\n time {\n display: inline-block;\n white-space: nowrap;\n }\n\n div[role='menubar'] {\n display: flex;\n }\n\n time,\n div[role='menubar'] {\n pointer-events: none;\n opacity: 0;\n transition: opacity 200ms ", ";\n }\n\n &:hover {\n time,\n div[role='menubar'] {\n pointer-events: unset;\n opacity: 1;\n }\n }\n\n ", " {\n padding: 4px 8px;\n }\n "])), token.motionEaseOut, responsive.mobile)),
27
27
  editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding: 8px 12px 12px;\n border: 1px solid ", ";\n\n &:active,\n &:hover {\n border-color: ", ";\n }\n "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n "])), token.colorFillQuaternary, token.borderRadius)),
28
28
  editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: 100%;\n "]))),
29
- errorContent: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n ", " {\n width: 100%;\n }\n "])), responsive.mobile),
29
+ errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n width: 100%;\n "]))),
30
30
  loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", ";\n bottom: 0;\n left: ", ";\n\n width: 16px;\n height: 16px;\n\n color: ", ";\n\n background: ", ";\n border-radius: 50%;\n "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
31
31
  message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n position: relative;\n "])))),
32
- messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: relative;\n\n ", " {\n overflow-x: auto;\n max-width: 100%;\n }\n "])), responsive.mobile)),
33
- messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n position: relative;\n overflow-x: hidden;\n\n ", " {\n flex-direction: column !important;\n width: 100%;\n }\n "])), responsive.mobile)),
32
+ messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\n\n ", " {\n overflow-x: auto;\n }\n "])), responsive.mobile)),
33
+ messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n position: relative;\n overflow-x: hidden;\n max-width: 100%;\n\n ", " {\n flex-direction: column !important;\n }\n "])), responsive.mobile)),
34
34
  messageExtra: cx('message-extra'),
35
35
  name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: ", ";\n top: ", ";\n right: ", ";\n left: ", ";\n\n margin-bottom: 6px;\n\n font-size: 12px;\n line-height: 1;\n color: ", ";\n text-align: ", ";\n "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
36
36
  };
@@ -13,8 +13,8 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
13
13
  blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n backdrop-filter: blur(36px);\n "]))),
14
14
  bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n width: 0;\n height: 4px;\n background-color: transparent;\n\n &-thumb {\n background-color: ", ";\n border-radius: 4px;\n transition: background-color 500ms ", ";\n }\n\n &-corner {\n display: none;\n width: 0;\n height: 0;\n }\n }\n "])), token.colorFill, token.motionEaseOut),
15
15
  gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-image: linear-gradient(\n -45deg,\n ", ",\n ", ",\n ", ",\n ", "\n );\n background-size: 400% 400%;\n border-radius: inherit;\n animation: 5s ", " 5s ease infinite;\n "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
16
- markdown: css(_templateObject6 || (_templateObject6 = _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: 0 0;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n word-break: break-all;\n word-wrap: break-word;\n\n + * {\n margin-block-end: 0.5em;\n }\n }\n\n > *:last-child {\n margin-bottom: 0 !important;\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 [data-code-type='highlighter'] {\n border: none;\n border-radius: ", "px;\n\n > code {\n padding: 0 !important;\n border: none !important;\n }\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: 1em 1em;\n margin-inline: 0 0;\n padding: 8px;\n\n border: 1px solid ", ";\n border-radius: ", "px;\n\n code {\n display: inline-flex;\n }\n }\n\n th,\n td {\n padding-block: 10px 10px;\n padding-inline: 16px 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 > ol > li::marker {\n color: ", " !important;\n }\n\n > ul > li {\n line-height: 1.8;\n list-style-type: disc;\n\n &::marker {\n color: ", " !important;\n }\n }\n\n ol,\n ul {\n > li::marker {\n color: ", ";\n }\n }\n\n details {\n margin-bottom: 1em;\n padding: 12px 16px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n\n transition: all 400ms ", ";\n }\n\n details[open] {\n summary {\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n }\n }\n "])), token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan9A : token.cyan10A, token.colorTextDescription, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
17
- markdownInChat: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n h1 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.6em;\n }\n\n h2 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.4em;\n }\n\n h3 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.2em;\n }\n\n h4 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.1em;\n }\n\n h5 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1em;\n }\n "]))),
16
+ markdown: css(_templateObject6 || (_templateObject6 = _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: 0 0;\n\n font-size: 14px;\n line-height: 2;\n color: ", ";\n word-break: break-all;\n word-wrap: break-word;\n\n + * {\n margin-block-end: 1em;\n }\n\n &:not(:last-child) {\n margin-bottom: 1.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 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 [data-code-type='highlighter'] {\n border: none;\n border-radius: ", "px;\n\n > code {\n padding: 0 !important;\n border: none !important;\n }\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: 1em 1em;\n margin-inline: 0 0;\n padding: 8px;\n\n border: 1px solid ", ";\n border-radius: ", "px;\n\n code {\n display: inline-flex;\n }\n }\n\n th,\n td {\n padding-block: 10px 10px;\n padding-inline: 16px 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 > ol > li::marker {\n color: ", " !important;\n }\n\n > ul > li {\n line-height: 1.8;\n list-style-type: disc;\n\n &::marker {\n color: ", " !important;\n }\n }\n\n ol,\n ul {\n > li::marker {\n color: ", ";\n }\n }\n\n details {\n margin-bottom: 1em;\n padding: 12px 16px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n\n transition: all 400ms ", ";\n }\n\n details[open] {\n summary {\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n }\n }\n "])), token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan9A : token.cyan10A, token.colorTextDescription, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
17
+ markdownInChat: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n h1 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.6em;\n }\n\n h2 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.4em;\n }\n\n h3 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.2em;\n }\n\n h4 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1.1em;\n }\n\n h5 {\n margin-top: 0;\n margin-block-start: 0;\n font-size: 1em;\n }\n\n > *:last-child {\n margin-bottom: 0 !important;\n }\n\n p {\n line-height: 1.8;\n\n + * {\n margin-block-end: 0.5em;\n }\n\n &:not(:last-child) {\n margin-bottom: 1em;\n }\n }\n "]))),
18
18
  noScrollbar: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n display: none;\n width: 0;\n height: 0;\n background-color: transparent;\n }\n "]))),
19
19
  resetLinkColor: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n cursor: pointer;\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n "])), token.colorTextSecondary, token.colorText)
20
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.117.0",
3
+ "version": "1.118.0",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",