add all frontend files

node_modules/antd/es/card/Card.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { Tab, TabBarExtraContent } from 'rc-tabs/lib/interface';
+import type { TabsProps } from '../tabs';
+export type CardType = 'inner';
+export type CardSize = 'default' | 'small';
+export interface CardTabListType extends Omit<Tab, 'label'> {
+    key: string;
+    /** @deprecated Please use `label` instead */
+    tab?: React.ReactNode;
+    label?: React.ReactNode;
+}
+type SemanticName = 'header' | 'body' | 'extra' | 'actions' | 'title' | 'cover';
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    prefixCls?: string;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    /** @deprecated Please use `variant` instead */
+    bordered?: boolean;
+    /** @deprecated Please use `styles.header` instead */
+    headStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.body` instead */
+    bodyStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    loading?: boolean;
+    hoverable?: boolean;
+    children?: React.ReactNode;
+    id?: string;
+    className?: string;
+    rootClassName?: string;
+    size?: CardSize;
+    type?: CardType;
+    cover?: React.ReactNode;
+    actions?: React.ReactNode[];
+    tabList?: CardTabListType[];
+    tabBarExtraContent?: TabBarExtraContent;
+    onTabChange?: (key: string) => void;
+    activeTabKey?: string;
+    defaultActiveTabKey?: string;
+    tabProps?: TabsProps;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+    variant?: 'borderless' | 'outlined';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export default Card;

node_modules/antd/es/card/Card.js

@@ -0,0 +1,193 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import omit from "rc-util/es/omit";
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import useSize from '../config-provider/hooks/useSize';
+import Skeleton from '../skeleton';
+import Tabs from '../tabs';
+import Grid from './Grid';
+import useStyle from './style';
+import useVariant from '../form/hooks/useVariants';
+const ActionNode = props => {
+  const {
+    actionClasses,
+    actions = [],
+    actionStyle
+  } = props;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: actionClasses,
+    style: actionStyle
+  }, actions.map((action, index) => {
+    // Move this out since eslint not allow index key
+    // And eslint-disable makes conflict with rollup
+    // ref https://github.com/ant-design/ant-design/issues/46022
+    const key = `action-${index}`;
+    return /*#__PURE__*/React.createElement("li", {
+      style: {
+        width: `${100 / actions.length}%`
+      },
+      key: key
+    }, /*#__PURE__*/React.createElement("span", null, action));
+  }));
+};
+const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      prefixCls: customizePrefixCls,
+      className,
+      rootClassName,
+      style,
+      extra,
+      headStyle = {},
+      bodyStyle = {},
+      title,
+      loading,
+      bordered,
+      variant: customVariant,
+      size: customizeSize,
+      type,
+      cover,
+      actions,
+      tabList,
+      children,
+      activeTabKey,
+      defaultActiveTabKey,
+      tabBarExtraContent,
+      hoverable,
+      tabProps = {},
+      classNames: customClassNames,
+      styles: customStyles
+    } = props,
+    others = __rest(props, ["prefixCls", "className", "rootClassName", "style", "extra", "headStyle", "bodyStyle", "title", "loading", "bordered", "variant", "size", "type", "cover", "actions", "tabList", "children", "activeTabKey", "defaultActiveTabKey", "tabBarExtraContent", "hoverable", "tabProps", "classNames", "styles"]);
+  const {
+    getPrefixCls,
+    direction,
+    card
+  } = React.useContext(ConfigContext);
+  const [variant] = useVariant('card', customVariant, bordered);
+  // =================Warning===================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Card');
+    [['headStyle', 'styles.header'], ['bodyStyle', 'styles.body'], ['bordered', 'variant']].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
+  const onTabChange = key => {
+    var _a;
+    (_a = props.onTabChange) === null || _a === void 0 ? void 0 : _a.call(props, key);
+  };
+  const moduleClass = moduleName => {
+    var _a;
+    return classNames((_a = card === null || card === void 0 ? void 0 : card.classNames) === null || _a === void 0 ? void 0 : _a[moduleName], customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames[moduleName]);
+  };
+  const moduleStyle = moduleName => {
+    var _a;
+    return Object.assign(Object.assign({}, (_a = card === null || card === void 0 ? void 0 : card.styles) === null || _a === void 0 ? void 0 : _a[moduleName]), customStyles === null || customStyles === void 0 ? void 0 : customStyles[moduleName]);
+  };
+  const isContainGrid = React.useMemo(() => {
+    let containGrid = false;
+    React.Children.forEach(children, element => {
+      if ((element === null || element === void 0 ? void 0 : element.type) === Grid) {
+        containGrid = true;
+      }
+    });
+    return containGrid;
+  }, [children]);
+  const prefixCls = getPrefixCls('card', customizePrefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  const loadingBlock = /*#__PURE__*/React.createElement(Skeleton, {
+    loading: true,
+    active: true,
+    paragraph: {
+      rows: 4
+    },
+    title: false
+  }, children);
+  const hasActiveTabKey = activeTabKey !== undefined;
+  const extraProps = Object.assign(Object.assign({}, tabProps), {
+    [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey ? activeTabKey : defaultActiveTabKey,
+    tabBarExtraContent
+  });
+  let head;
+  const mergedSize = useSize(customizeSize);
+  const tabSize = !mergedSize || mergedSize === 'default' ? 'large' : mergedSize;
+  const tabs = tabList ? (/*#__PURE__*/React.createElement(Tabs, Object.assign({
+    size: tabSize
+  }, extraProps, {
+    className: `${prefixCls}-head-tabs`,
+    onChange: onTabChange,
+    items: tabList.map(_a => {
+      var {
+          tab
+        } = _a,
+        item = __rest(_a, ["tab"]);
+      return Object.assign({
+        label: tab
+      }, item);
+    })
+  }))) : null;
+  if (title || extra || tabs) {
+    const headClasses = classNames(`${prefixCls}-head`, moduleClass('header'));
+    const titleClasses = classNames(`${prefixCls}-head-title`, moduleClass('title'));
+    const extraClasses = classNames(`${prefixCls}-extra`, moduleClass('extra'));
+    const mergedHeadStyle = Object.assign(Object.assign({}, headStyle), moduleStyle('header'));
+    head = /*#__PURE__*/React.createElement("div", {
+      className: headClasses,
+      style: mergedHeadStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-head-wrapper`
+    }, title && (/*#__PURE__*/React.createElement("div", {
+      className: titleClasses,
+      style: moduleStyle('title')
+    }, title)), extra && (/*#__PURE__*/React.createElement("div", {
+      className: extraClasses,
+      style: moduleStyle('extra')
+    }, extra))), tabs);
+  }
+  const coverClasses = classNames(`${prefixCls}-cover`, moduleClass('cover'));
+  const coverDom = cover ? (/*#__PURE__*/React.createElement("div", {
+    className: coverClasses,
+    style: moduleStyle('cover')
+  }, cover)) : null;
+  const bodyClasses = classNames(`${prefixCls}-body`, moduleClass('body'));
+  const mergedBodyStyle = Object.assign(Object.assign({}, bodyStyle), moduleStyle('body'));
+  const body = /*#__PURE__*/React.createElement("div", {
+    className: bodyClasses,
+    style: mergedBodyStyle
+  }, loading ? loadingBlock : children);
+  const actionClasses = classNames(`${prefixCls}-actions`, moduleClass('actions'));
+  const actionDom = (actions === null || actions === void 0 ? void 0 : actions.length) ? (/*#__PURE__*/React.createElement(ActionNode, {
+    actionClasses: actionClasses,
+    actionStyle: moduleStyle('actions'),
+    actions: actions
+  })) : null;
+  const divProps = omit(others, ['onTabChange']);
+  const classString = classNames(prefixCls, card === null || card === void 0 ? void 0 : card.className, {
+    [`${prefixCls}-loading`]: loading,
+    [`${prefixCls}-bordered`]: variant !== 'borderless',
+    [`${prefixCls}-hoverable`]: hoverable,
+    [`${prefixCls}-contain-grid`]: isContainGrid,
+    [`${prefixCls}-contain-tabs`]: tabList === null || tabList === void 0 ? void 0 : tabList.length,
+    [`${prefixCls}-${mergedSize}`]: mergedSize,
+    [`${prefixCls}-type-${type}`]: !!type,
+    [`${prefixCls}-rtl`]: direction === 'rtl'
+  }, className, rootClassName, hashId, cssVarCls);
+  const mergedStyle = Object.assign(Object.assign({}, card === null || card === void 0 ? void 0 : card.style), style);
+  return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref
+  }, divProps, {
+    className: classString,
+    style: mergedStyle
+  }), head, coverDom, body, actionDom));
+});
+export default Card;

node_modules/antd/es/card/Grid.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    className?: string;
+    hoverable?: boolean;
+    style?: React.CSSProperties;
+}
+declare const Grid: React.FC<CardGridProps>;
+export default Grid;

node_modules/antd/es/card/Grid.js

@@ -0,0 +1,32 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider';
+const Grid = _a => {
+  var {
+      prefixCls,
+      className,
+      hoverable = true
+    } = _a,
+    props = __rest(_a, ["prefixCls", "className", "hoverable"]);
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefix = getPrefixCls('card', prefixCls);
+  const classString = classNames(`${prefix}-grid`, className, {
+    [`${prefix}-grid-hoverable`]: hoverable
+  });
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: classString
+  }));
+};
+export default Grid;

node_modules/antd/es/card/Meta.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface CardMetaProps {
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    avatar?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+declare const Meta: React.FC<CardMetaProps>;
+export default Meta;

node_modules/antd/es/card/Meta.js

@@ -0,0 +1,44 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider';
+const Meta = props => {
+  const {
+      prefixCls: customizePrefixCls,
+      className,
+      avatar,
+      title,
+      description
+    } = props,
+    others = __rest(props, ["prefixCls", "className", "avatar", "title", "description"]);
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('card', customizePrefixCls);
+  const classString = classNames(`${prefixCls}-meta`, className);
+  const avatarDom = avatar ? (/*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-meta-avatar`
+  }, avatar)) : null;
+  const titleDom = title ? (/*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-meta-title`
+  }, title)) : null;
+  const descriptionDom = description ? (/*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-meta-description`
+  }, description)) : null;
+  const MetaDetail = titleDom || descriptionDom ? (/*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-meta-detail`
+  }, titleDom, descriptionDom)) : null;
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
+    className: classString
+  }), avatarDom, MetaDetail);
+};
+export default Meta;

node_modules/antd/es/card/index.d.ts

@@ -0,0 +1,13 @@
+import InternalCard from './Card';
+import Grid from './Grid';
+import Meta 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;
+    Meta: typeof Meta;
+}
+declare const Card: CardInterface;
+export default Card;

node_modules/antd/es/card/index.js

@@ -0,0 +1,12 @@
+"use client";
+
+import InternalCard from './Card';
+import Grid from './Grid';
+import Meta from './Meta';
+const Card = InternalCard;
+Card.Grid = Grid;
+Card.Meta = Meta;
+if (process.env.NODE_ENV !== 'production') {
+  Card.displayName = 'Card';
+}
+export default Card;

node_modules/antd/es/card/style/index.d.ts

@@ -0,0 +1,71 @@
+import type { GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /**
+     * @desc 卡片头部背景色
+     * @descEN Background color of card header
+     */
+    headerBg: string;
+    /**
+     * @desc 卡片头部文字大小
+     * @descEN Font size of card header
+     */
+    headerFontSize: number | string;
+    /**
+     * @desc 小号卡片头部文字大小
+     * @descEN Font size of small card header
+     */
+    headerFontSizeSM: number | string;
+    /**
+     * @desc 卡片头部高度
+     * @descEN Height of card header
+     */
+    headerHeight: number | string;
+    /**
+     * @desc 小号卡片头部高度
+     * @descEN Height of small card header
+     */
+    headerHeightSM: number | string;
+    /**
+     * @desc 小号卡片内边距
+     * @descEN Padding of small card body
+     */
+    bodyPaddingSM: number;
+    /**
+     * @desc 小号卡片头部内边距
+     * @descEN Padding of small card head
+     */
+    headerPaddingSM: number;
+    /**
+     * @desc 卡片内边距
+     * @descEN Padding of card body
+     */
+    bodyPadding: number;
+    /**
+     * @desc 卡片头部内边距
+     * @descEN Padding of card head
+     */
+    headerPadding: number;
+    /**
+     * @desc 操作区背景色
+     * @descEN Background color of card actions
+     */
+    actionsBg: string;
+    /**
+     * @desc 操作区每一项的外间距
+     * @descEN Margin of each item in card actions
+     */
+    actionsLiMargin: string;
+    /**
+     * @desc 内置标签页组件下间距
+     * @descEN Margin bottom of tabs component
+     */
+    tabsMarginBottom: number;
+    /**
+     * @desc 额外区文字颜色
+     * @descEN Text color of extra area
+     */
+    extraColor: string;
+}
+export declare const prepareComponentToken: GetDefaultToken<'Card'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

node_modules/antd/es/card/style/index.js

@@ -0,0 +1,351 @@
+import { unit } from '@ant-design/cssinjs';
+import { clearFix, resetComponent, textEllipsis } from '../../style';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+// ============================== Styles ==============================
+// ============================== Head ==============================
+const genCardHeadStyle = token => {
+  const {
+    antCls,
+    componentCls,
+    headerHeight,
+    headerPadding,
+    tabsMarginBottom
+  } = token;
+  return Object.assign(Object.assign({
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    minHeight: headerHeight,
+    marginBottom: -1,
+    padding: `0 ${unit(headerPadding)}`,
+    color: token.colorTextHeading,
+    fontWeight: token.fontWeightStrong,
+    fontSize: token.headerFontSize,
+    background: token.headerBg,
+    borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorderSecondary}`,
+    borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`
+  }, clearFix()), {
+    '&-wrapper': {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    '&-title': Object.assign(Object.assign({
+      display: 'inline-block',
+      flex: 1
+    }, textEllipsis), {
+      [`
+          > ${componentCls}-typography,
+          > ${componentCls}-typography-edit-content
+        `]: {
+        insetInlineStart: 0,
+        marginTop: 0,
+        marginBottom: 0
+      }
+    }),
+    [`${antCls}-tabs-top`]: {
+      clear: 'both',
+      marginBottom: tabsMarginBottom,
+      color: token.colorText,
+      fontWeight: 'normal',
+      fontSize: token.fontSize,
+      '&-bar': {
+        borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorderSecondary}`
+      }
+    }
+  });
+};
+// ============================== Grid ==============================
+const genCardGridStyle = token => {
+  const {
+    cardPaddingBase,
+    colorBorderSecondary,
+    cardShadow,
+    lineWidth
+  } = token;
+  return {
+    width: '33.33%',
+    padding: cardPaddingBase,
+    border: 0,
+    borderRadius: 0,
+    boxShadow: `
+      ${unit(lineWidth)} 0 0 0 ${colorBorderSecondary},
+      0 ${unit(lineWidth)} 0 0 ${colorBorderSecondary},
+      ${unit(lineWidth)} ${unit(lineWidth)} 0 0 ${colorBorderSecondary},
+      ${unit(lineWidth)} 0 0 0 ${colorBorderSecondary} inset,
+      0 ${unit(lineWidth)} 0 0 ${colorBorderSecondary} inset;
+    `,
+    transition: `all ${token.motionDurationMid}`,
+    '&-hoverable:hover': {
+      position: 'relative',
+      zIndex: 1,
+      boxShadow: cardShadow
+    }
+  };
+};
+// ============================== Actions ==============================
+const genCardActionsStyle = token => {
+  const {
+    componentCls,
+    iconCls,
+    actionsLiMargin,
+    cardActionsIconSize,
+    colorBorderSecondary,
+    actionsBg
+  } = token;
+  return Object.assign(Object.assign({
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    background: actionsBg,
+    borderTop: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+    display: 'flex',
+    borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`
+  }, clearFix()), {
+    '& > li': {
+      margin: actionsLiMargin,
+      color: token.colorTextDescription,
+      textAlign: 'center',
+      '> span': {
+        position: 'relative',
+        display: 'block',
+        minWidth: token.calc(token.cardActionsIconSize).mul(2).equal(),
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        cursor: 'pointer',
+        '&:hover': {
+          color: token.colorPrimary,
+          transition: `color ${token.motionDurationMid}`
+        },
+        [`a:not(${componentCls}-btn), > ${iconCls}`]: {
+          display: 'inline-block',
+          width: '100%',
+          color: token.colorIcon,
+          lineHeight: unit(token.fontHeight),
+          transition: `color ${token.motionDurationMid}`,
+          '&:hover': {
+            color: token.colorPrimary
+          }
+        },
+        [`> ${iconCls}`]: {
+          fontSize: cardActionsIconSize,
+          lineHeight: unit(token.calc(cardActionsIconSize).mul(token.lineHeight).equal())
+        }
+      },
+      '&:not(:last-child)': {
+        borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`
+      }
+    }
+  });
+};
+// ============================== Meta ==============================
+const genCardMetaStyle = token => Object.assign(Object.assign({
+  margin: `${unit(token.calc(token.marginXXS).mul(-1).equal())} 0`,
+  display: 'flex'
+}, clearFix()), {
+  '&-avatar': {
+    paddingInlineEnd: token.padding
+  },
+  '&-detail': {
+    overflow: 'hidden',
+    flex: 1,
+    '> div:not(:last-child)': {
+      marginBottom: token.marginXS
+    }
+  },
+  '&-title': Object.assign({
+    color: token.colorTextHeading,
+    fontWeight: token.fontWeightStrong,
+    fontSize: token.fontSizeLG
+  }, textEllipsis),
+  '&-description': {
+    color: token.colorTextDescription
+  }
+});
+// ============================== Inner ==============================
+const genCardTypeInnerStyle = token => {
+  const {
+    componentCls,
+    colorFillAlter,
+    headerPadding,
+    bodyPadding
+  } = token;
+  return {
+    [`${componentCls}-head`]: {
+      padding: `0 ${unit(headerPadding)}`,
+      background: colorFillAlter,
+      '&-title': {
+        fontSize: token.fontSize
+      }
+    },
+    [`${componentCls}-body`]: {
+      padding: `${unit(token.padding)} ${unit(bodyPadding)}`
+    }
+  };
+};
+// ============================== Loading ==============================
+const genCardLoadingStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    overflow: 'hidden',
+    [`${componentCls}-body`]: {
+      userSelect: 'none'
+    }
+  };
+};
+// ============================== Basic ==============================
+const genCardStyle = token => {
+  const {
+    componentCls,
+    cardShadow,
+    cardHeadPadding,
+    colorBorderSecondary,
+    boxShadowTertiary,
+    bodyPadding,
+    extraColor
+  } = token;
+  return {
+    [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
+      position: 'relative',
+      background: token.colorBgContainer,
+      borderRadius: token.borderRadiusLG,
+      [`&:not(${componentCls}-bordered)`]: {
+        boxShadow: boxShadowTertiary
+      },
+      [`${componentCls}-head`]: genCardHeadStyle(token),
+      [`${componentCls}-extra`]: {
+        // https://stackoverflow.com/a/22429853/3040605
+        marginInlineStart: 'auto',
+        color: extraColor,
+        fontWeight: 'normal',
+        fontSize: token.fontSize
+      },
+      [`${componentCls}-body`]: {
+        padding: bodyPadding,
+        borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`
+      },
+      [`${componentCls}-grid`]: genCardGridStyle(token),
+      [`${componentCls}-cover`]: {
+        '> *': {
+          display: 'block',
+          width: '100%',
+          borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`
+        }
+      },
+      [`${componentCls}-actions`]: genCardActionsStyle(token),
+      [`${componentCls}-meta`]: genCardMetaStyle(token)
+    }),
+    [`${componentCls}-bordered`]: {
+      border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+      [`${componentCls}-cover`]: {
+        marginTop: -1,
+        marginInlineStart: -1,
+        marginInlineEnd: -1
+      }
+    },
+    [`${componentCls}-hoverable`]: {
+      cursor: 'pointer',
+      transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`,
+      '&:hover': {
+        borderColor: 'transparent',
+        boxShadow: cardShadow
+      }
+    },
+    [`${componentCls}-contain-grid`]: {
+      borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0 `,
+      [`${componentCls}-body`]: {
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      [`&:not(${componentCls}-loading) ${componentCls}-body`]: {
+        marginBlockStart: token.calc(token.lineWidth).mul(-1).equal(),
+        marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(),
+        padding: 0
+      }
+    },
+    [`${componentCls}-contain-tabs`]: {
+      [`> div${componentCls}-head`]: {
+        minHeight: 0,
+        [`${componentCls}-head-title, ${componentCls}-extra`]: {
+          paddingTop: cardHeadPadding
+        }
+      }
+    },
+    [`${componentCls}-type-inner`]: genCardTypeInnerStyle(token),
+    [`${componentCls}-loading`]: genCardLoadingStyle(token),
+    [`${componentCls}-rtl`]: {
+      direction: 'rtl'
+    }
+  };
+};
+// ============================== Size ==============================
+const genCardSizeStyle = token => {
+  const {
+    componentCls,
+    bodyPaddingSM,
+    headerPaddingSM,
+    headerHeightSM,
+    headerFontSizeSM
+  } = token;
+  return {
+    [`${componentCls}-small`]: {
+      [`> ${componentCls}-head`]: {
+        minHeight: headerHeightSM,
+        padding: `0 ${unit(headerPaddingSM)}`,
+        fontSize: headerFontSizeSM,
+        [`> ${componentCls}-head-wrapper`]: {
+          [`> ${componentCls}-extra`]: {
+            fontSize: token.fontSize
+          }
+        }
+      },
+      [`> ${componentCls}-body`]: {
+        padding: bodyPaddingSM
+      }
+    },
+    [`${componentCls}-small${componentCls}-contain-tabs`]: {
+      [`> ${componentCls}-head`]: {
+        [`${componentCls}-head-title, ${componentCls}-extra`]: {
+          paddingTop: 0,
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }
+    }
+  };
+};
+export const prepareComponentToken = token => {
+  var _a, _b;
+  return {
+    headerBg: 'transparent',
+    headerFontSize: token.fontSizeLG,
+    headerFontSizeSM: token.fontSize,
+    headerHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
+    headerHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
+    actionsBg: token.colorBgContainer,
+    actionsLiMargin: `${token.paddingSM}px 0`,
+    tabsMarginBottom: -token.padding - token.lineWidth,
+    extraColor: token.colorText,
+    bodyPaddingSM: 12,
+    // Fixed padding.
+    headerPaddingSM: 12,
+    bodyPadding: (_a = token.bodyPadding) !== null && _a !== void 0 ? _a : token.paddingLG,
+    headerPadding: (_b = token.headerPadding) !== null && _b !== void 0 ? _b : token.paddingLG
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks('Card', token => {
+  const cardToken = mergeToken(token, {
+    cardShadow: token.boxShadowCard,
+    cardHeadPadding: token.padding,
+    cardPaddingBase: token.paddingLG,
+    cardActionsIconSize: token.fontSize
+  });
+  return [
+  // Style
+  genCardStyle(cardToken),
+  // Size
+  genCardSizeStyle(cardToken)];
+}, prepareComponentToken);