@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/lib/card/components/Loading/style.js

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cardLoading = void 0;
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _cssinjs = require("@ant-design/cssinjs");
 var _provider = require("../../../provider");
-var cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
+const cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
   '0%': {
     backgroundPosition: '0 50%'
   },
@@ -21,37 +18,42 @@ var cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
     backgroundPosition: '0 50%'
   }
 });
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    '&-loading': {
-      overflow: 'hidden'
-    },
-    '&-loading &-body': {
-      userSelect: 'none'
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-loading': {
+        overflow: 'hidden'
+      },
+      '&-loading &-body': {
+        userSelect: 'none'
+      },
+      [`${token.componentCls}-loading-content`]: {
+        width: '100%',
+        p: {
+          marginBlock: 0,
+          marginInline: 0
+        }
+      },
+      [`${token.componentCls}-loading-block`]: {
+        height: '14px',
+        marginBlock: '4px',
+        background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
+        backgroundSize: '600% 600%',
+        borderRadius: token.borderRadius,
+        animationName: cardLoading,
+        animationDuration: '1.4s',
+        animationTimingFunction: 'ease',
+        animationIterationCount: 'infinite'
+      }
     }
-  }, "".concat(token.componentCls, "-loading-content"), {
-    width: '100%',
-    p: {
-      marginBlock: 0,
-      marginInline: 0
-    }
-  }), "".concat(token.componentCls, "-loading-block"), {
-    height: '14px',
-    marginBlock: '4px',
-    background: "linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))",
-    backgroundSize: '600% 600%',
-    borderRadius: token.borderRadius,
-    animationName: cardLoading,
-    animationDuration: '1.4s',
-    animationTimingFunction: 'ease',
-    animationIterationCount: 'infinite'
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProCardLoading', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProCardLoading', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

package/lib/card/components/Operation/index.js

@@ -1,28 +1,30 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var ProCardOperation = function ProCardOperation(props) {
-  var className = props.className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    children = props.children;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-card-operation');
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var classString = (0, _classnames.default)(prefixCls, className, hashId);
+const ProCardOperation = props => {
+  const {
+    className,
+    style = {},
+    children
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-card-operation');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
+  const classString = (0, _clsx.clsx)(prefixCls, className, hashId);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classString,
     style: style,

package/lib/card/components/Operation/style.d.ts

@@ -4,6 +4,6 @@ export interface ProToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/card/components/Operation/style.js

@@ -1,31 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-    marginBlock: token.marginLG,
-    marginInline: 0,
-    color: token.colorText,
-    fontWeight: '500',
-    fontSize: '20px',
-    lineHeight: '38px'
-  });
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      marginBlock: token.marginLG,
+      marginInline: 0,
+      color: token.colorText,
+      fontWeight: '500',
+      fontSize: '20px',
+      lineHeight: '38px'
+    }
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProCardOperation', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProCardOperation', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

package/lib/card/components/Statistic/index.js

@@ -1,65 +1,68 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "layout", "style", "description", "children", "title", "tip", "status", "trend", "prefix", "icon"];
-var Statistic = function Statistic(props) {
-  var className = props.className,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'inline' : _props$layout,
-    style = props.style,
-    description = props.description,
-    children = props.children,
-    title = props.title,
-    tip = props.tip,
-    status = props.status,
-    trend = props.trend,
-    prefix = props.prefix,
-    icon = props.icon,
-    others = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-card-statistic');
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var classString = (0, _classnames.default)(prefixCls, className, hashId);
-  var statusClass = (0, _classnames.default)("".concat(prefixCls, "-status"), hashId);
-  var iconClass = (0, _classnames.default)("".concat(prefixCls, "-icon"), hashId);
-  var wrapperClass = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), hashId);
-  var contentClass = (0, _classnames.default)("".concat(prefixCls, "-content"), hashId);
-  var statisticClassName = (0, _classnames.default)(hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-layout-").concat(layout), layout), "".concat(prefixCls, "-trend-").concat(trend), trend));
-  var tipDom = tip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+const Statistic = props => {
+  const {
+    className,
+    layout = 'inline',
+    style,
+    description,
+    children,
+    title,
+    tip,
+    status,
+    trend,
+    prefix,
+    icon,
+    ...others
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-card-statistic');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
+  const classString = (0, _clsx.clsx)(prefixCls, className, hashId);
+  const statusClass = (0, _clsx.clsx)(`${prefixCls}-status`, hashId);
+  const iconClass = (0, _clsx.clsx)(`${prefixCls}-icon`, hashId);
+  const wrapperClass = (0, _clsx.clsx)(`${prefixCls}-wrapper`, hashId);
+  const contentClass = (0, _clsx.clsx)(`${prefixCls}-content`, hashId);
+  const statisticClassName = (0, _clsx.clsx)(hashId, {
+    [`${prefixCls}-layout-${layout}`]: layout,
+    [`${prefixCls}-trend-${trend}`]: trend
+  });
+  const tipDom = tip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
     title: tip,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.QuestionCircleOutlined, {
-      className: "".concat(prefixCls, "-tip ").concat(hashId).trim()
+      className: `${prefixCls}-tip ${hashId}`.trim()
     })
   });
-  var trendIconClassName = (0, _classnames.default)("".concat(prefixCls, "-trend-icon"), hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-trend-icon-").concat(trend), trend));
-  var trendDom = trend && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const trendIconClassName = (0, _clsx.clsx)(`${prefixCls}-trend-icon`, hashId, {
+    [`${prefixCls}-trend-icon-${trend}`]: trend
+  });
+  const trendDom = trend && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: trendIconClassName
   });
-  var statusDom = status && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const statusDom = status && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: statusClass,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Badge, {
       status: status,
       text: null
     })
   });
-  var iconDom = icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const iconDom = icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: iconClass,
     children: icon
   });
@@ -70,16 +73,17 @@ var Statistic = function Statistic(props) {
       className: wrapperClass,
       children: [statusDom, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: contentClass,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Statistic, (0, _objectSpread2.default)({
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Statistic, {
           title: (title || tipDom) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [title, tipDom]
           }),
           prefix: (trendDom || prefix) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [trendDom, prefix]
           }),
-          className: statisticClassName
-        }, others)), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefixCls, "-description ").concat(hashId).trim(),
+          className: statisticClassName,
+          ...others
+        }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${prefixCls}-description ${hashId}`.trim(),
           children: description
         })]
       })]

package/lib/card/components/Statistic/style.d.ts

@@ -4,6 +4,6 @@ export interface ProListToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/card/components/Statistic/style.js

@@ -1,87 +1,105 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'flex',
-    fontSize: token.fontSize,
-    '& + &': {
-      marginBlockStart: 4
-    },
-    '&-tip': {
-      marginInlineStart: 4
-    },
-    '&-wrapper': (0, _defineProperty2.default)({
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
       display: 'flex',
-      width: '100%'
-    }, "".concat(token.componentCls, "-status"), {
-      width: '14px'
-    }),
-    '&-icon': {
-      marginInlineEnd: 16
-    },
-    '&-trend-icon': {
-      width: 0,
-      height: 0,
-      borderInlineEnd: '3.5px solid transparent',
-      borderBlockEnd: '9px solid #000',
-      borderInlineStart: '3.5px solid transparent',
-      '&-up': {
-        transform: 'rotate(0deg)'
+      fontSize: token.fontSize,
+      '& + &': {
+        marginBlockStart: 4
       },
-      '&-down': {
-        transform: 'rotate(180deg)'
+      '&-tip': {
+        marginInlineStart: 4
+      },
+      '&-wrapper': {
+        display: 'flex',
+        width: '100%',
+        [`${token.componentCls}-status`]: {
+          width: '14px'
+        }
+      },
+      '&-icon': {
+        marginInlineEnd: 16
+      },
+      '&-trend-icon': {
+        width: 0,
+        height: 0,
+        borderInlineEnd: '3.5px solid transparent',
+        borderBlockEnd: '9px solid #000',
+        borderInlineStart: '3.5px solid transparent',
+        '&-up': {
+          transform: 'rotate(0deg)'
+        },
+        '&-down': {
+          transform: 'rotate(180deg)'
+        }
+      },
+      '&-content': {
+        width: '100%'
+      },
+      '&-description': {
+        width: '100%'
+      },
+      [`${token.antCls}-statistic-title`]: {
+        color: token.colorText
+      },
+      '&-trend-up': {
+        [`${token.antCls}-statistic-content`]: {
+          color: '#f5222d',
+          [`${token.componentCls}-trend-icon`]: {
+            borderBlockEndColor: '#f5222d'
+          }
+        }
+      },
+      '&-trend-down': {
+        [`${token.antCls}-statistic-content`]: {
+          color: '#389e0d',
+          [`${token.componentCls}-trend-icon`]: {
+            borderBlockEndColor: '#52c41a'
+          }
+        }
+      },
+      '& &-layout-horizontal': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        [`${token.antCls}-statistic-title`]: {
+          marginBlockEnd: 0
+        },
+        [`${token.antCls}-statistic-content-value`]: {
+          fontWeight: 500
+        },
+        [`${token.antCls}-statistic-title,${token.antCls}-statistic-content,${token.antCls}-statistic-content-suffix,${token.antCls}-statistic-content-prefix,${token.antCls}-statistic-content-value-decimal`]: {
+          fontSize: token.fontSize
+        }
+      },
+      '& &-layout-inline': {
+        display: 'inline-flex',
+        color: token.colorTextSecondary,
+        [`${token.antCls}-statistic-title`]: {
+          marginInlineEnd: '6px',
+          marginBlockEnd: 0
+        },
+        [`${token.antCls}-statistic-content`]: {
+          color: token.colorTextSecondary
+        },
+        [`${token.antCls}-statistic-title,${token.antCls}-statistic-content,${token.antCls}-statistic-content-suffix,${token.antCls}-statistic-content-prefix,${token.antCls}-statistic-content-value-decimal`]: {
+          fontSize: token.fontSizeSM
+        }
       }
-    },
-    '&-content': {
-      width: '100%'
-    },
-    '&-description': {
-      width: '100%'
     }
-  }, "".concat(token.antCls, "-statistic-title"), {
-    color: token.colorText
-  }), '&-trend-up', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-statistic-content"), (0, _defineProperty2.default)({
-    color: '#f5222d'
-  }, "".concat(token.componentCls, "-trend-icon"), {
-    borderBlockEndColor: '#f5222d'
-  }))), '&-trend-down', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-statistic-content"), (0, _defineProperty2.default)({
-    color: '#389e0d'
-  }, "".concat(token.componentCls, "-trend-icon"), {
-    borderBlockEndColor: '#52c41a'
-  }))), '& &-layout-horizontal', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'flex',
-    justifyContent: 'space-between'
-  }, "".concat(token.antCls, "-statistic-title"), {
-    marginBlockEnd: 0
-  }), "".concat(token.antCls, "-statistic-content-value"), {
-    fontWeight: 500
-  }), "".concat(token.antCls, "-statistic-title,").concat(token.antCls, "-statistic-content,").concat(token.antCls, "-statistic-content-suffix,").concat(token.antCls, "-statistic-content-prefix,").concat(token.antCls, "-statistic-content-value-decimal"), {
-    fontSize: token.fontSize
-  })), '& &-layout-inline', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'inline-flex',
-    color: token.colorTextSecondary
-  }, "".concat(token.antCls, "-statistic-title"), {
-    marginInlineEnd: '6px',
-    marginBlockEnd: 0
-  }), "".concat(token.antCls, "-statistic-content"), {
-    color: token.colorTextSecondary
-  }), "".concat(token.antCls, "-statistic-title,").concat(token.antCls, "-statistic-content,").concat(token.antCls, "-statistic-content-suffix,").concat(token.antCls, "-statistic-content-prefix,").concat(token.antCls, "-statistic-content-value-decimal"), {
-    fontSize: token.fontSizeSM
-  })));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('Statistic', function (token) {
-    var proListToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('Statistic', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proListToken)];
   });
 }

package/lib/card/components/StatisticCard/index.js

@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _Card = _interopRequireDefault(require("../Card"));
 var _Divider = _interopRequireDefault(require("../Divider"));
@@ -18,59 +15,69 @@ var _Operation = _interopRequireDefault(require("../Operation"));
 var _Statistic = _interopRequireDefault(require("../Statistic"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "statistic", "className", "chart", "chartPlacement", "footer"];
-var StatisticCard = function StatisticCard(props) {
-  var children = props.children,
-    statistic = props.statistic,
-    className = props.className,
-    chart = props.chart,
-    chartPlacement = props.chartPlacement,
-    footer = props.footer,
-    others = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-statistic-card');
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var classString = (0, _classnames.default)(prefixCls, className, hashId);
+const StatisticCard = props => {
+  const {
+    children,
+    statistic,
+    className,
+    chart,
+    chartPlacement,
+    footer,
+    ...others
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-statistic-card');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
+  const classString = (0, _clsx.clsx)(prefixCls, className, hashId);
 
   // 在 StatisticCard 中时默认为 vertical。
-  var statisticDom = statistic && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Statistic.default, (0, _objectSpread2.default)({
-    layout: "vertical"
-  }, statistic));
-  var chartCls = (0, _classnames.default)("".concat(prefixCls, "-chart"), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-chart-left"), chartPlacement === 'left' && chart && statistic), "".concat(prefixCls, "-chart-right"), chartPlacement === 'right' && chart && statistic));
-  var chartDom = chart && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const statisticDom = statistic && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Statistic.default, {
+    layout: "vertical",
+    ...statistic
+  });
+  const chartCls = (0, _clsx.clsx)(`${prefixCls}-chart`, hashId, {
+    [`${prefixCls}-chart-left`]: chartPlacement === 'left' && chart && statistic,
+    [`${prefixCls}-chart-right`]: chartPlacement === 'right' && chart && statistic
+  });
+  const chartDom = chart && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: chartCls,
     children: chart
   });
-  var contentCls = (0, _classnames.default)("".concat(prefixCls, "-content "), hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-content-horizontal"), chartPlacement === 'left' || chartPlacement === 'right'));
+  const contentCls = (0, _clsx.clsx)(`${prefixCls}-content `, hashId, {
+    [`${prefixCls}-content-horizontal`]: chartPlacement === 'left' || chartPlacement === 'right'
+  });
 
   // 默认上下结构
-  var contentDom = (chartDom || statisticDom) && (chartPlacement === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  const contentDom = (chartDom || statisticDom) && (chartPlacement === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: contentCls,
     children: [chartDom, statisticDom]
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: contentCls,
     children: [statisticDom, chartDom]
   }));
-  var footerDom = footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(prefixCls, "-footer ").concat(hashId).trim(),
+  const footerDom = footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${prefixCls}-footer ${hashId}`.trim(),
     children: footer
   });
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    className: classString
-  }, others), {}, {
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+    className: classString,
+    ...others,
     children: [contentDom, children, footerDom]
-  })));
+  }));
 };
-var Group = function Group(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StatisticCard, (0, _objectSpread2.default)({
-    bodyStyle: {
+const Group = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StatisticCard, {
+  styles: {
+    body: {
       padding: 0
     }
-  }, props));
-};
+  },
+  ...props
+});
 StatisticCard.Statistic = _Statistic.default;
 StatisticCard.Divider = _Divider.default;
 StatisticCard.Operation = _Operation.default;

package/lib/card/components/StatisticCard/style.d.ts

@@ -4,6 +4,6 @@ export interface ProListToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };