@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/calendar/style/index.js

@@ -1,11 +1,168 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-require("./index.less");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genCalendarStyles = exports["default"] = void 0;
 
-require("../../date-picker/style");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-require("../../radio/style");
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-require("../../select/style");
+var _style = require("../../style");
+
+var _style2 = require("../../date-picker/style");
+
+var _style3 = require("../../input/style");
+
+var _internal = require("../../theme/internal");
+
+var genCalendarStyles = function genCalendarStyles(token) {
+  var _ref, _ref2, _ref3, _ref6, _ref7, _ref8, _ref11;
+
+  var calendarCls = token.calendarCls,
+      componentCls = token.componentCls,
+      calendarFullBg = token.calendarFullBg,
+      calendarFullPanelBg = token.calendarFullPanelBg,
+      calendarItemActiveBg = token.calendarItemActiveBg;
+  return _ref11 = {}, (0, _defineProperty2["default"])(_ref11, calendarCls, (0, _extends3["default"])((0, _extends3["default"])((0, _extends3["default"])({}, (0, _style2.genPanelStyle)(token)), (0, _style.resetComponent)(token)), (0, _defineProperty2["default"])({
+    background: calendarFullBg,
+    '&-rtl': {
+      direction: 'rtl'
+    }
+  }, calendarCls + "-header", (_ref = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    padding: token.paddingSM + "px 0"
+  }, (0, _defineProperty2["default"])(_ref, calendarCls + "-year-select", {
+    minWidth: token.yearControlWidth
+  }), (0, _defineProperty2["default"])(_ref, calendarCls + "-month-select", {
+    minWidth: token.monthControlWidth,
+    marginInlineStart: token.marginXS
+  }), (0, _defineProperty2["default"])(_ref, calendarCls + "-mode-switch", {
+    marginInlineStart: token.marginXS
+  }), _ref)))), (0, _defineProperty2["default"])(_ref11, calendarCls + " " + componentCls + "-panel", (_ref2 = {
+    background: calendarFullPanelBg,
+    border: 0,
+    borderTop: token.lineWidth + "px " + token.lineType + " " + token.colorSplit,
+    borderRadius: 0
+  }, (0, _defineProperty2["default"])(_ref2, componentCls + "-month-panel, " + componentCls + "-date-panel", {
+    width: 'auto'
+  }), (0, _defineProperty2["default"])(_ref2, componentCls + "-body", {
+    padding: token.paddingXS + "px 0"
+  }), (0, _defineProperty2["default"])(_ref2, componentCls + "-content", {
+    width: '100%'
+  }), _ref2)), (0, _defineProperty2["default"])(_ref11, calendarCls + "-mini", (_ref3 = {
+    borderRadius: token.borderRadiusLG
+  }, (0, _defineProperty2["default"])(_ref3, calendarCls + "-header", {
+    paddingInlineEnd: token.paddingXS,
+    paddingInlineStart: token.paddingXS
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-panel", {
+    borderRadius: "0 0 " + token.borderRadiusLG + "px " + token.borderRadiusLG + "px"
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-content", {
+    height: token.miniContentHeight,
+    th: {
+      height: 'auto',
+      padding: 0,
+      lineHeight: token.weekHeight + "px"
+    }
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-cell::before", {
+    pointerEvents: 'none'
+  }), _ref3)), (0, _defineProperty2["default"])(_ref11, "" + calendarCls + calendarCls + "-full", (_ref7 = {}, (0, _defineProperty2["default"])(_ref7, componentCls + "-panel", (0, _defineProperty2["default"])({
+    display: 'block',
+    width: '100%',
+    textAlign: 'end',
+    background: calendarFullBg,
+    border: 0
+  }, componentCls + "-body", {
+    'th, td': {
+      padding: 0
+    },
+    th: {
+      height: 'auto',
+      paddingInlineEnd: token.paddingSM,
+      paddingBottom: token.paddingXXS,
+      lineHeight: token.weekHeight + "px"
+    }
+  })), (0, _defineProperty2["default"])(_ref7, componentCls + "-cell", (_ref6 = {
+    '&::before': {
+      display: 'none'
+    },
+    '&:hover': (0, _defineProperty2["default"])({}, calendarCls + "-date", {
+      background: token.controlItemBgHover
+    })
+  }, (0, _defineProperty2["default"])(_ref6, calendarCls + "-date-today::before", {
+    display: 'none'
+  }), (0, _defineProperty2["default"])(_ref6, '&-in-view:is(&-selected)', (0, _defineProperty2["default"])({}, calendarCls + "-date, " + calendarCls + "-date-today", {
+    background: calendarItemActiveBg
+  })), (0, _defineProperty2["default"])(_ref6, '&-selected, &-selected:hover', (0, _defineProperty2["default"])({}, calendarCls + "-date, " + calendarCls + "-date-today", (0, _defineProperty2["default"])({}, calendarCls + "-date-value", {
+    color: token.colorPrimary
+  }))), _ref6)), (0, _defineProperty2["default"])(_ref7, calendarCls + "-date", {
+    display: 'block',
+    width: 'auto',
+    height: 'auto',
+    margin: "0 " + token.marginXS / 2 + "px",
+    padding: token.paddingXS / 2 + "px " + token.paddingXS + "px 0",
+    border: 0,
+    borderTop: token.lineWidthBold + "px " + token.lineType + " " + token.colorSplit,
+    borderRadius: 0,
+    transition: "background " + token.motionDurationSlow,
+    '&-value': {
+      lineHeight: token.dateValueHeight + "px",
+      transition: "color " + token.motionDurationSlow
+    },
+    '&-content': {
+      position: 'static',
+      width: 'auto',
+      height: token.dateContentHeight,
+      overflowY: 'auto',
+      color: token.colorText,
+      lineHeight: token.lineHeight,
+      textAlign: 'start'
+    },
+    '&-today': (0, _defineProperty2["default"])({
+      borderColor: token.colorPrimary
+    }, calendarCls + "-date-value", {
+      color: token.colorText
+    })
+  }), _ref7)), (0, _defineProperty2["default"])(_ref11, "@media only screen and (max-width: " + token.screenXS + "px) ", (0, _defineProperty2["default"])({}, "" + calendarCls, (0, _defineProperty2["default"])({}, calendarCls + "-header", (_ref8 = {
+    display: 'block'
+  }, (0, _defineProperty2["default"])(_ref8, calendarCls + "-year-select", {
+    width: '50%'
+  }), (0, _defineProperty2["default"])(_ref8, calendarCls + "-month-select", {
+    width: "calc(50% - " + token.paddingXS + "px)"
+  }), (0, _defineProperty2["default"])(_ref8, calendarCls + "-mode-switch", {
+    width: '100%',
+    marginTop: token.marginXS,
+    marginInlineStart: 0,
+    '> label': {
+      width: '50%',
+      textAlign: 'center'
+    }
+  }), _ref8)))), _ref11;
+};
+
+exports.genCalendarStyles = genCalendarStyles;
+
+var _default = (0, _internal.genComponentStyleHook)('Calendar', function (token) {
+  var calendarCls = token.componentCls + "-calendar";
+  var calendarToken = (0, _internal.mergeToken)((0, _style3.initInputToken)(token), (0, _style2.initPickerPanelToken)(token), {
+    calendarCls: calendarCls,
+    pickerCellInnerCls: token.componentCls + "-cell-inner",
+    calendarFullBg: token.colorBgContainer,
+    calendarFullPanelBg: token.colorBgContainer,
+    calendarItemActiveBg: token.controlItemBgActive,
+    dateValueHeight: token.controlHeightSM,
+    weekHeight: token.controlHeightSM * 0.75,
+    dateContentHeight: (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2
+  });
+  return [genCalendarStyles(calendarToken)];
+}, {
+  yearControlWidth: 80,
+  monthControlWidth: 70,
+  miniContentHeight: 256
+});
+
+exports["default"] = _default;

package/lib/card/Card.js

@@ -13,6 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
@@ -29,6 +31,8 @@ var _tabs = _interopRequireDefault(require("../tabs"));
 
 var _Grid = _interopRequireDefault(require("./Grid"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -49,9 +53,9 @@ function getAction(actions) {
       // eslint-disable-next-line react/no-array-index-key
       React.createElement("li", {
         style: {
-          width: "".concat(100 / actions.length, "%")
+          width: 100 / actions.length + "%"
         },
-        key: "action-".concat(index)
+        key: "action-" + index
       }, /*#__PURE__*/React.createElement("span", null, action))
     );
   });
@@ -109,6 +113,12 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
       others = __rest(props, ["prefixCls", "className", "extra", "headStyle", "bodyStyle", "title", "loading", "bordered", "size", "type", "cover", "actions", "tabList", "children", "activeTabKey", "defaultActiveTabKey", "tabBarExtraContent", "hoverable", "tabProps"]);
 
   var prefixCls = getPrefixCls('card', customizePrefixCls);
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
   var loadingBlock = /*#__PURE__*/React.createElement(_skeleton["default"], {
     loading: true,
     active: true,
@@ -123,7 +133,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var tabs = tabList && tabList.length ? /*#__PURE__*/React.createElement(_tabs["default"], (0, _extends3["default"])({
     size: "large"
   }, extraProps, {
-    className: "".concat(prefixCls, "-head-tabs"),
+    className: prefixCls + "-head-tabs",
     onChange: onTabChange,
     items: tabList.map(function (item) {
       var _a;
@@ -138,35 +148,35 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   if (title || extra || tabs) {
     head = /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-head"),
+      className: prefixCls + "-head",
       style: headStyle
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-head-wrapper")
+      className: prefixCls + "-head-wrapper"
     }, title && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-head-title")
+      className: prefixCls + "-head-title"
     }, title), extra && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-extra")
+      className: prefixCls + "-extra"
     }, extra)), tabs);
   }
 
   var coverDom = cover ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-cover")
+    className: prefixCls + "-cover"
   }, cover) : null;
   var body = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-body"),
+    className: prefixCls + "-body",
     style: bodyStyle
   }, loading ? loadingBlock : children);
   var actionDom = actions && actions.length ? /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-actions")
+    className: prefixCls + "-actions"
   }, getAction(actions)) : null;
   var divProps = (0, _omit["default"])(others, ['onTabChange']);
   var mergedSize = customizeSize || size;
-  var classString = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-loading"), loading), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-bordered"), bordered), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-hoverable"), hoverable), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-contain-grid"), isContainGrid()), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-contain-tabs"), tabList && tabList.length), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(mergedSize), mergedSize), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-type-").concat(type), !!type), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
-  return /*#__PURE__*/React.createElement("div", (0, _extends3["default"])({
+  var classString = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-loading", loading), (0, _defineProperty2["default"])(_classNames, prefixCls + "-bordered", bordered), (0, _defineProperty2["default"])(_classNames, prefixCls + "-hoverable", hoverable), (0, _defineProperty2["default"])(_classNames, prefixCls + "-contain-grid", isContainGrid()), (0, _defineProperty2["default"])(_classNames, prefixCls + "-contain-tabs", tabList && tabList.length), (0, _defineProperty2["default"])(_classNames, prefixCls + "-" + mergedSize, mergedSize), (0, _defineProperty2["default"])(_classNames, prefixCls + "-type-" + type, !!type), (0, _defineProperty2["default"])(_classNames, prefixCls + "-rtl", direction === 'rtl'), _classNames), className, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement("div", (0, _extends3["default"])({
     ref: ref
   }, divProps, {
     className: classString
-  }), head, coverDom, body, actionDom);
+  }), head, coverDom, body, actionDom));
 });
 var _default = Card;
 exports["default"] = _default;

package/lib/card/Grid.js

@@ -42,7 +42,7 @@ var Grid = function Grid(_a) {
   return /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, null, function (_ref) {
     var getPrefixCls = _ref.getPrefixCls;
     var prefix = getPrefixCls('card', prefixCls);
-    var classString = (0, _classnames["default"])("".concat(prefix, "-grid"), className, (0, _defineProperty2["default"])({}, "".concat(prefix, "-grid-hoverable"), hoverable));
+    var classString = (0, _classnames["default"])(prefix + "-grid", className, (0, _defineProperty2["default"])({}, prefix + "-grid-hoverable", hoverable));
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, props, {
       className: classString
     }));

package/lib/card/Meta.js

@@ -42,18 +42,18 @@ var Meta = function Meta(props) {
         others = __rest(props, ["prefixCls", "className", "avatar", "title", "description"]);
 
     var prefixCls = getPrefixCls('card', customizePrefixCls);
-    var classString = (0, _classnames["default"])("".concat(prefixCls, "-meta"), className);
+    var classString = (0, _classnames["default"])(prefixCls + "-meta", className);
     var avatarDom = avatar ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-meta-avatar")
+      className: prefixCls + "-meta-avatar"
     }, avatar) : null;
     var titleDom = title ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-meta-title")
+      className: prefixCls + "-meta-title"
     }, title) : null;
     var descriptionDom = description ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-meta-description")
+      className: prefixCls + "-meta-description"
     }, description) : null;
     var MetaDetail = titleDom || descriptionDom ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-meta-detail")
+      className: prefixCls + "-meta-detail"
     }, titleDom, descriptionDom) : null;
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, others, {
       className: classString

package/lib/card/index.d.ts

@@ -1,9 +1,9 @@
 import InternalCard from './Card';
 import Grid from './Grid';
 import Meta from './Meta';
-export { CardProps, CardTabListType } from './Card';
-export { CardGridProps } from './Grid';
-export { CardMetaProps } from './Meta';
+export type { CardProps, CardTabListType } from './Card';
+export type { CardGridProps } from './Grid';
+export type { CardMetaProps } from './Meta';
 type InternalCardType = typeof InternalCard;
 export interface CardInterface extends InternalCardType {
     Grid: typeof Grid;

package/lib/card/style/index.d.ts

@@ -1,4 +1,4 @@
-import '../../style/default.less';
-import './index.less';
-import '../../skeleton/style';
-import '../../tabs/style';
+export interface ComponentToken {
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/lib/card/style/index.js

@@ -1,9 +1,305 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-require("./index.less");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-require("../../skeleton/style");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-require("../../tabs/style");
+var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _internal = require("../../theme/internal");
+
+var _style = require("../../style"); // ============================== Styles ==============================
+// ============================== Head ==============================
+
+
+var genCardHeadStyle = function genCardHeadStyle(token) {
+  var antCls = token.antCls,
+      componentCls = token.componentCls,
+      cardHeadHeight = token.cardHeadHeight,
+      cardHeadPadding = token.cardHeadPadding,
+      cardPaddingBase = token.cardPaddingBase,
+      cardHeadTabsMarginBottom = token.cardHeadTabsMarginBottom;
+  return (0, _extends5["default"])((0, _extends5["default"])({
+    minHeight: cardHeadHeight,
+    marginBottom: -1,
+    padding: "0 " + cardPaddingBase + "px",
+    color: token.colorTextHeading,
+    fontWeight: token.fontWeightStrong,
+    fontSize: token.fontSizeLG,
+    background: 'transparent',
+    borderBottom: token.lineWidth + "px " + token.lineType + " " + token.colorBorderSecondary,
+    borderRadius: token.borderRadiusLG + "px " + token.borderRadiusLG + "px 0 0"
+  }, (0, _style.clearFix)()), (0, _defineProperty2["default"])({
+    '&-wrapper': {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    '&-title': (0, _extends5["default"])((0, _extends5["default"])({
+      display: 'inline-block',
+      flex: 1,
+      padding: cardHeadPadding + "px 0"
+    }, _style.textEllipsis), (0, _defineProperty2["default"])({}, "\n          > " + componentCls + "-typography,\n          > " + componentCls + "-typography-edit-content\n        ", {
+      insetInlineStart: 0,
+      marginTop: 0,
+      marginBottom: 0
+    }))
+  }, antCls + "-tabs-top", {
+    clear: 'both',
+    marginBottom: cardHeadTabsMarginBottom,
+    color: token.colorText,
+    fontWeight: 'normal',
+    fontSize: token.fontSize,
+    '&-bar': {
+      borderBottom: token.lineWidth + "px " + token.lineType + " " + token.colorBorderSecondary
+    }
+  }));
+}; // ============================== Grid ==============================
+
+
+var genCardGridStyle = function genCardGridStyle(token) {
+  var cardPaddingBase = token.cardPaddingBase,
+      colorBorderSecondary = token.colorBorderSecondary,
+      cardShadow = token.cardShadow,
+      lineWidth = token.lineWidth;
+  return {
+    width: '33.33%',
+    padding: cardPaddingBase,
+    border: 0,
+    borderRadius: 0,
+    boxShadow: "\n      " + lineWidth + "px 0 0 0 " + colorBorderSecondary + ",\n      0 " + lineWidth + "px 0 0 " + colorBorderSecondary + ",\n      " + lineWidth + "px " + lineWidth + "px 0 0 " + colorBorderSecondary + ",\n      " + lineWidth + "px 0 0 0 " + colorBorderSecondary + " inset,\n      0 " + lineWidth + "px 0 0 " + colorBorderSecondary + " inset;\n    ",
+    transition: "all " + token.motionDurationMid,
+    '&-hoverable:hover': {
+      position: 'relative',
+      zIndex: 1,
+      boxShadow: cardShadow
+    }
+  };
+}; // ============================== Actions ==============================
+
+
+var genCardActionsStyle = function genCardActionsStyle(token) {
+  var _span;
+
+  var componentCls = token.componentCls,
+      iconCls = token.iconCls,
+      cardActionsLiMargin = token.cardActionsLiMargin,
+      cardActionsIconSize = token.cardActionsIconSize,
+      colorBorderSecondary = token.colorBorderSecondary;
+  return (0, _extends5["default"])((0, _extends5["default"])({
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    background: token.colorBgContainer,
+    borderTop: token.lineWidth + "px " + token.lineType + " " + colorBorderSecondary,
+    display: 'flex',
+    borderRadius: "0 0 " + token.borderRadiusLG + "px " + token.borderRadiusLG + "px "
+  }, (0, _style.clearFix)()), {
+    '& > li': {
+      margin: cardActionsLiMargin,
+      color: token.colorTextDescription,
+      textAlign: 'center',
+      '> span': (_span = {
+        position: 'relative',
+        display: 'block',
+        minWidth: token.cardActionsIconSize * 2,
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        cursor: 'pointer',
+        '&:hover': {
+          color: token.colorPrimary,
+          transition: "color " + token.motionDurationMid
+        }
+      }, (0, _defineProperty2["default"])(_span, "a:not(" + componentCls + "-btn), > " + iconCls, {
+        display: 'inline-block',
+        width: '100%',
+        color: token.colorTextDescription,
+        lineHeight: token.fontSize * token.lineHeight + "px",
+        transition: "color " + token.motionDurationMid,
+        '&:hover': {
+          color: token.colorPrimary
+        }
+      }), (0, _defineProperty2["default"])(_span, "> " + iconCls, {
+        fontSize: cardActionsIconSize,
+        lineHeight: cardActionsIconSize * token.lineHeight + "px"
+      }), _span),
+      '&:not(:last-child)': {
+        borderInlineEnd: token.lineWidth + "px " + token.lineType + " " + colorBorderSecondary
+      }
+    }
+  });
+}; // ============================== Meta ==============================
+
+
+var genCardMetaStyle = function genCardMetaStyle(token) {
+  return (0, _extends5["default"])((0, _extends5["default"])({
+    margin: "-" + token.marginXXS + "px 0",
+    display: 'flex'
+  }, (0, _style.clearFix)()), {
+    '&-avatar': {
+      paddingInlineEnd: token.padding
+    },
+    '&-detail': {
+      overflow: 'hidden',
+      flex: 1,
+      '> div:not(:last-child)': {
+        marginBottom: token.marginXS
+      }
+    },
+    '&-title': (0, _extends5["default"])({
+      color: token.colorTextHeading,
+      fontWeight: token.fontWeightStrong,
+      fontSize: token.fontSizeLG
+    }, _style.textEllipsis),
+    '&-description': {
+      color: token.colorTextDescription
+    }
+  });
+}; // ============================== Inner ==============================
+
+
+var genCardTypeInnerStyle = function genCardTypeInnerStyle(token) {
+  var _ref;
+
+  var componentCls = token.componentCls,
+      cardPaddingBase = token.cardPaddingBase,
+      colorFillAlter = token.colorFillAlter,
+      cardInnerHeadPadding = token.cardInnerHeadPadding;
+  return _ref = {}, (0, _defineProperty2["default"])(_ref, componentCls + "-head", {
+    padding: "0 " + cardPaddingBase + "px",
+    background: colorFillAlter,
+    '&-title': {
+      padding: cardInnerHeadPadding + "px 0",
+      fontSize: token.fontSize
+    }
+  }), (0, _defineProperty2["default"])(_ref, componentCls + "-body", {
+    padding: token.padding + "px " + cardPaddingBase + "px"
+  }), (0, _defineProperty2["default"])(_ref, componentCls + "-extra", {
+    padding: cardInnerHeadPadding + 1.5 + "px 0"
+  }), _ref;
+}; // ============================== Loading ==============================
+
+
+var genCardLoadingStyle = function genCardLoadingStyle(token) {
+  var componentCls = token.componentCls;
+  return (0, _defineProperty2["default"])({
+    overflow: 'hidden'
+  }, componentCls + "-body", {
+    userSelect: 'none'
+  });
+}; // ============================== Basic ==============================
+
+
+var genCardStyle = function genCardStyle(token) {
+  var _extends4, _ref4, _ref5, _ref7;
+
+  var componentCls = token.componentCls,
+      cardShadow = token.cardShadow,
+      cardHeadHeight = token.cardHeadHeight,
+      cardHeadPadding = token.cardHeadPadding,
+      colorBorderSecondary = token.colorBorderSecondary,
+      boxShadow = token.boxShadow,
+      cardPaddingBase = token.cardPaddingBase;
+  return _ref7 = {}, (0, _defineProperty2["default"])(_ref7, componentCls, (0, _extends5["default"])((0, _extends5["default"])({}, (0, _style.resetComponent)(token)), (_extends4 = {
+    position: 'relative',
+    background: token.colorBgContainer,
+    borderRadius: token.borderRadiusLG
+  }, (0, _defineProperty2["default"])(_extends4, "&:not(" + componentCls + "-bordered)", {
+    boxShadow: boxShadow
+  }), (0, _defineProperty2["default"])(_extends4, componentCls + "-head", genCardHeadStyle(token)), (0, _defineProperty2["default"])(_extends4, componentCls + "-extra", {
+    // https://stackoverflow.com/a/22429853/3040605
+    marginInlineStart: 'auto',
+    padding: '',
+    color: '',
+    fontWeight: 'normal',
+    fontSize: token.fontSize
+  }), (0, _defineProperty2["default"])(_extends4, componentCls + "-body", (0, _extends5["default"])({
+    padding: cardPaddingBase,
+    borderRadius: " 0 0 " + token.borderRadiusLG + "px " + token.borderRadiusLG + "px"
+  }, (0, _style.clearFix)())), (0, _defineProperty2["default"])(_extends4, componentCls + "-grid", genCardGridStyle(token)), (0, _defineProperty2["default"])(_extends4, componentCls + "-cover", {
+    '> *': {
+      display: 'block',
+      width: '100%'
+    },
+    img: {
+      borderRadius: token.borderRadiusLG + "px " + token.borderRadiusLG + "px 0 0"
+    }
+  }), (0, _defineProperty2["default"])(_extends4, componentCls + "-actions", genCardActionsStyle(token)), (0, _defineProperty2["default"])(_extends4, componentCls + "-meta", genCardMetaStyle(token)), _extends4))), (0, _defineProperty2["default"])(_ref7, componentCls + "-bordered", (0, _defineProperty2["default"])({
+    border: token.lineWidth + "px " + token.lineType + " " + colorBorderSecondary
+  }, componentCls + "-cover", {
+    marginTop: -1,
+    marginInlineStart: -1,
+    marginInlineEnd: -1
+  })), (0, _defineProperty2["default"])(_ref7, componentCls + "-hoverable", {
+    cursor: 'pointer',
+    transition: "box-shadow " + token.motionDurationMid + ", border-color " + token.motionDurationMid,
+    '&:hover': {
+      borderColor: 'transparent',
+      boxShadow: cardShadow
+    }
+  }), (0, _defineProperty2["default"])(_ref7, componentCls + "-contain-grid", (_ref4 = {}, (0, _defineProperty2["default"])(_ref4, componentCls + "-body", {
+    display: 'flex',
+    flexWrap: 'wrap'
+  }), (0, _defineProperty2["default"])(_ref4, "&:not(" + componentCls + "-loading) " + componentCls + "-body", {
+    marginBlockStart: -token.lineWidth,
+    marginInlineStart: -token.lineWidth,
+    padding: 0
+  }), _ref4)), (0, _defineProperty2["default"])(_ref7, componentCls + "-contain-tabs", (0, _defineProperty2["default"])({}, "> " + componentCls + "-head", (_ref5 = {}, (0, _defineProperty2["default"])(_ref5, componentCls + "-head-title", {
+    minHeight: cardHeadHeight - cardHeadPadding,
+    paddingBottom: 0
+  }), (0, _defineProperty2["default"])(_ref5, componentCls + "-extra", {
+    paddingBottom: 0
+  }), _ref5))), (0, _defineProperty2["default"])(_ref7, componentCls + "-type-inner", genCardTypeInnerStyle(token)), (0, _defineProperty2["default"])(_ref7, componentCls + "-loading", genCardLoadingStyle(token)), (0, _defineProperty2["default"])(_ref7, componentCls + "-rtl", {
+    direction: 'rtl'
+  }), _ref7;
+}; // ============================== Size ==============================
+
+
+var genCardSizeStyle = function genCardSizeStyle(token) {
+  var _ref8, _ref10;
+
+  var componentCls = token.componentCls,
+      cardPaddingSM = token.cardPaddingSM,
+      fontSize = token.fontSize,
+      lineHeight = token.lineHeight,
+      cardHeaderHeightSM = token.cardHeaderHeightSM;
+  var cardHeadPaddingSM = (cardHeaderHeightSM - fontSize * lineHeight) / 2;
+  return (0, _defineProperty2["default"])({}, componentCls + "-small", (_ref10 = {}, (0, _defineProperty2["default"])(_ref10, "> " + componentCls + "-head", (0, _defineProperty2["default"])({
+    minHeight: cardHeaderHeightSM,
+    padding: "0 " + cardPaddingSM + "px",
+    fontSize: token.fontSize
+  }, "> " + componentCls + "-head-wrapper", (_ref8 = {}, (0, _defineProperty2["default"])(_ref8, "> " + componentCls + "-head-title", {
+    padding: cardHeadPaddingSM + "px 0"
+  }), (0, _defineProperty2["default"])(_ref8, "> " + componentCls + "-extra", {
+    padding: cardHeadPaddingSM + "px 0",
+    fontSize: token.fontSize
+  }), _ref8))), (0, _defineProperty2["default"])(_ref10, "> " + componentCls + "-body", {
+    padding: cardPaddingSM
+  }), _ref10));
+}; // ============================== Export ==============================
+
+
+var _default = (0, _internal.genComponentStyleHook)('Card', function (token) {
+  var cardToken = (0, _internal.mergeToken)(token, {
+    cardShadow: token.boxShadowCard,
+    cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
+    cardHeaderHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
+    cardHeadPadding: token.padding,
+    cardPaddingBase: token.paddingLG,
+    cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
+    cardInnerHeadPadding: token.paddingSM,
+    cardActionsLiMargin: token.paddingSM + "px 0",
+    cardActionsIconSize: token.fontSize,
+    cardPaddingSM: 12 // Fixed padding.
+
+  });
+  return [// Style
+  genCardStyle(cardToken), // Size
+  genCardSizeStyle(cardToken)];
+});
+
+exports["default"] = _default;