add all frontend files

node_modules/antd/es/list/Item.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+type SemanticName = 'actions' | 'extra';
+export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    classNames?: Partial<Record<SemanticName, string>>;
+    children?: ReactNode;
+    prefixCls?: string;
+    style?: CSSProperties;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+    extra?: ReactNode;
+    actions?: ReactNode[];
+    colStyle?: CSSProperties;
+}
+export interface ListItemMetaProps {
+    avatar?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    description?: ReactNode;
+    prefixCls?: string;
+    style?: CSSProperties;
+    title?: ReactNode;
+}
+export declare const Meta: FC<ListItemMetaProps>;
+declare const InternalItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
+export type ListItemTypeProps = typeof InternalItem & {
+    Meta: typeof Meta;
+};
+declare const Item: ListItemTypeProps;
+export default Item;

node_modules/antd/es/list/Item.js

@@ -0,0 +1,125 @@
+"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 React, { Children, useContext } from 'react';
+import classNames from 'classnames';
+import { cloneElement } from '../_util/reactNode';
+import { ConfigContext } from '../config-provider';
+import { Col } from '../grid';
+import { ListContext } from './context';
+export const Meta = _a => {
+  var {
+      prefixCls: customizePrefixCls,
+      className,
+      avatar,
+      title,
+      description
+    } = _a,
+    others = __rest(_a, ["prefixCls", "className", "avatar", "title", "description"]);
+  const {
+    getPrefixCls
+  } = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('list', customizePrefixCls);
+  const classString = classNames(`${prefixCls}-item-meta`, className);
+  const content = /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-item-meta-content`
+  }, title && /*#__PURE__*/React.createElement("h4", {
+    className: `${prefixCls}-item-meta-title`
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-item-meta-description`
+  }, description));
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
+    className: classString
+  }), avatar && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-item-meta-avatar`
+  }, avatar), (title || description) && content);
+};
+const InternalItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      prefixCls: customizePrefixCls,
+      children,
+      actions,
+      extra,
+      styles,
+      className,
+      classNames: customizeClassNames,
+      colStyle
+    } = props,
+    others = __rest(props, ["prefixCls", "children", "actions", "extra", "styles", "className", "classNames", "colStyle"]);
+  const {
+    grid,
+    itemLayout
+  } = useContext(ListContext);
+  const {
+    getPrefixCls,
+    list
+  } = useContext(ConfigContext);
+  const moduleClass = moduleName => {
+    var _a, _b;
+    return classNames((_b = (_a = list === null || list === void 0 ? void 0 : list.item) === null || _a === void 0 ? void 0 : _a.classNames) === null || _b === void 0 ? void 0 : _b[moduleName], customizeClassNames === null || customizeClassNames === void 0 ? void 0 : customizeClassNames[moduleName]);
+  };
+  const moduleStyle = moduleName => {
+    var _a, _b;
+    return Object.assign(Object.assign({}, (_b = (_a = list === null || list === void 0 ? void 0 : list.item) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b[moduleName]), styles === null || styles === void 0 ? void 0 : styles[moduleName]);
+  };
+  const isItemContainsTextNodeAndNotSingular = () => {
+    let result = false;
+    Children.forEach(children, element => {
+      if (typeof element === 'string') {
+        result = true;
+      }
+    });
+    return result && Children.count(children) > 1;
+  };
+  const isFlexMode = () => {
+    if (itemLayout === 'vertical') {
+      return !!extra;
+    }
+    return !isItemContainsTextNodeAndNotSingular();
+  };
+  const prefixCls = getPrefixCls('list', customizePrefixCls);
+  const actionsContent = actions && actions.length > 0 && (/*#__PURE__*/React.createElement("ul", {
+    className: classNames(`${prefixCls}-item-action`, moduleClass('actions')),
+    key: "actions",
+    style: moduleStyle('actions')
+  }, actions.map((action, i) => (
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement("li", {
+    key: `${prefixCls}-item-action-${i}`
+  }, action, i !== actions.length - 1 && /*#__PURE__*/React.createElement("em", {
+    className: `${prefixCls}-item-action-split`
+  }))))));
+  const Element = grid ? 'div' : 'li';
+  const itemChildren = /*#__PURE__*/React.createElement(Element, Object.assign({}, others, !grid ? {
+    ref
+  } : {}, {
+    className: classNames(`${prefixCls}-item`, {
+      [`${prefixCls}-item-no-flex`]: !isFlexMode()
+    }, className)
+  }), itemLayout === 'vertical' && extra ? [/*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-item-main`,
+    key: "content"
+  }, children, actionsContent), /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-item-extra`, moduleClass('extra')),
+    key: "extra",
+    style: moduleStyle('extra')
+  }, extra)] : [children, actionsContent, cloneElement(extra, {
+    key: 'extra'
+  })]);
+  return grid ? (/*#__PURE__*/React.createElement(Col, {
+    ref: ref,
+    flex: 1,
+    style: colStyle
+  }, itemChildren)) : itemChildren;
+});
+const Item = InternalItem;
+Item.Meta = Meta;
+export default Item;

node_modules/antd/es/list/context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ListGridType } from '.';
+export interface ListConsumerProps {
+    grid?: ListGridType;
+    itemLayout?: string;
+}
+export declare const ListContext: React.Context<ListConsumerProps>;
+export declare const ListConsumer: React.Consumer<ListConsumerProps>;

node_modules/antd/es/list/context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const ListContext = /*#__PURE__*/React.createContext({});
+export const ListConsumer = ListContext.Consumer;

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { RowProps } from '../grid';
+import type { PaginationConfig } from '../pagination';
+import type { SpinProps } from '../spin';
+import Item from './Item';
+export type { ListConsumerProps } from './context';
+export type { ListItemMetaProps, ListItemProps } from './Item';
+export type ColumnCount = number;
+export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface ListGridType {
+    gutter?: RowProps['gutter'];
+    column?: ColumnCount;
+    xs?: ColumnCount;
+    sm?: ColumnCount;
+    md?: ColumnCount;
+    lg?: ColumnCount;
+    xl?: ColumnCount;
+    xxl?: ColumnCount;
+}
+export type ListSize = 'small' | 'default' | 'large';
+export type ListItemLayout = 'horizontal' | 'vertical';
+export interface ListProps<T> {
+    bordered?: boolean;
+    className?: string;
+    rootClassName?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    dataSource?: T[];
+    extra?: React.ReactNode;
+    grid?: ListGridType;
+    id?: string;
+    itemLayout?: ListItemLayout;
+    loading?: boolean | SpinProps;
+    loadMore?: React.ReactNode;
+    pagination?: PaginationConfig | false;
+    prefixCls?: string;
+    rowKey?: ((item: T) => React.Key) | keyof T;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    size?: ListSize;
+    split?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    locale?: ListLocale;
+}
+export interface ListLocale {
+    emptyText: React.ReactNode;
+}
+declare function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare const ListWithForwardRef: (<T>(props: ListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof InternalList>) & Pick<React.FC, "displayName">;
+type CompoundedComponent = typeof ListWithForwardRef & {
+    Item: typeof Item;
+};
+declare const List: CompoundedComponent;
+export default List;

node_modules/antd/es/list/index.js

@@ -0,0 +1,220 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 extendsObject from '../_util/extendsObject';
+import { responsiveArray } from '../_util/responsiveObserver';
+import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import useSize from '../config-provider/hooks/useSize';
+import { Row } from '../grid';
+import useBreakpoint from '../grid/hooks/useBreakpoint';
+import Pagination from '../pagination';
+import Spin from '../spin';
+import { ListContext } from './context';
+import Item from './Item';
+import useStyle from './style';
+function InternalList(props, ref) {
+  const {
+      pagination = false,
+      prefixCls: customizePrefixCls,
+      bordered = false,
+      split = true,
+      className,
+      rootClassName,
+      style,
+      children,
+      itemLayout,
+      loadMore,
+      grid,
+      dataSource = [],
+      size: customizeSize,
+      header,
+      footer,
+      loading = false,
+      rowKey,
+      renderItem,
+      locale
+    } = props,
+    rest = __rest(props, ["pagination", "prefixCls", "bordered", "split", "className", "rootClassName", "style", "children", "itemLayout", "loadMore", "grid", "dataSource", "size", "header", "footer", "loading", "rowKey", "renderItem", "locale"]);
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
+  const [paginationCurrent, setPaginationCurrent] = React.useState(paginationObj.defaultCurrent || 1);
+  const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);
+  const {
+    getPrefixCls,
+    direction,
+    className: contextClassName,
+    style: contextStyle
+  } = useComponentConfig('list');
+  const {
+    renderEmpty
+  } = React.useContext(ConfigContext);
+  const defaultPaginationProps = {
+    current: 1,
+    total: 0,
+    position: 'bottom'
+  };
+  const triggerPaginationEvent = eventName => (page, pageSize) => {
+    var _a;
+    setPaginationCurrent(page);
+    setPaginationSize(pageSize);
+    if (pagination) {
+      (_a = pagination === null || pagination === void 0 ? void 0 : pagination[eventName]) === null || _a === void 0 ? void 0 : _a.call(pagination, page, pageSize);
+    }
+  };
+  const onPaginationChange = triggerPaginationEvent('onChange');
+  const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
+  const renderInternalItem = (item, index) => {
+    if (!renderItem) {
+      return null;
+    }
+    let key;
+    if (typeof rowKey === 'function') {
+      key = rowKey(item);
+    } else if (rowKey) {
+      key = item[rowKey];
+    } else {
+      key = item.key;
+    }
+    if (!key) {
+      key = `list-item-${index}`;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, renderItem(item, index));
+  };
+  const isSomethingAfterLastItem = !!(loadMore || pagination || footer);
+  const prefixCls = getPrefixCls('list', customizePrefixCls);
+  // Style
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  let loadingProp = loading;
+  if (typeof loadingProp === 'boolean') {
+    loadingProp = {
+      spinning: loadingProp
+    };
+  }
+  const isLoading = !!(loadingProp === null || loadingProp === void 0 ? void 0 : loadingProp.spinning);
+  const mergedSize = useSize(customizeSize);
+  // large => lg
+  // small => sm
+  let sizeCls = '';
+  switch (mergedSize) {
+    case 'large':
+      sizeCls = 'lg';
+      break;
+    case 'small':
+      sizeCls = 'sm';
+      break;
+    default:
+      break;
+  }
+  const classString = classNames(prefixCls, {
+    [`${prefixCls}-vertical`]: itemLayout === 'vertical',
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-split`]: split,
+    [`${prefixCls}-bordered`]: bordered,
+    [`${prefixCls}-loading`]: isLoading,
+    [`${prefixCls}-grid`]: !!grid,
+    [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem,
+    [`${prefixCls}-rtl`]: direction === 'rtl'
+  }, contextClassName, className, rootClassName, hashId, cssVarCls);
+  const paginationProps = extendsObject(defaultPaginationProps, {
+    total: dataSource.length,
+    current: paginationCurrent,
+    pageSize: paginationSize
+  }, pagination || {});
+  const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
+  paginationProps.current = Math.min(paginationProps.current, largestPage);
+  const paginationContent = pagination && (/*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-pagination`)
+  }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
+    align: "end"
+  }, paginationProps, {
+    onChange: onPaginationChange,
+    onShowSizeChange: onPaginationShowSizeChange
+  }))));
+  let splitDataSource = _toConsumableArray(dataSource);
+  if (pagination) {
+    if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
+      splitDataSource = _toConsumableArray(dataSource).splice((paginationProps.current - 1) * paginationProps.pageSize, paginationProps.pageSize);
+    }
+  }
+  const needResponsive = Object.keys(grid || {}).some(key => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key));
+  const screens = useBreakpoint(needResponsive);
+  const currentBreakpoint = React.useMemo(() => {
+    for (let i = 0; i < responsiveArray.length; i += 1) {
+      const breakpoint = responsiveArray[i];
+      if (screens[breakpoint]) {
+        return breakpoint;
+      }
+    }
+    return undefined;
+  }, [screens]);
+  const colStyle = React.useMemo(() => {
+    if (!grid) {
+      return undefined;
+    }
+    const columnCount = currentBreakpoint && grid[currentBreakpoint] ? grid[currentBreakpoint] : grid.column;
+    if (columnCount) {
+      return {
+        width: `${100 / columnCount}%`,
+        maxWidth: `${100 / columnCount}%`
+      };
+    }
+  }, [JSON.stringify(grid), currentBreakpoint]);
+  let childrenContent = isLoading && /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: 53
+    }
+  });
+  if (splitDataSource.length > 0) {
+    const items = splitDataSource.map(renderInternalItem);
+    childrenContent = grid ? (/*#__PURE__*/React.createElement(Row, {
+      gutter: grid.gutter
+    }, React.Children.map(items, child => (/*#__PURE__*/React.createElement("div", {
+      key: child === null || child === void 0 ? void 0 : child.key,
+      style: colStyle
+    }, child))))) : (/*#__PURE__*/React.createElement("ul", {
+      className: `${prefixCls}-items`
+    }, items));
+  } else if (!children && !isLoading) {
+    childrenContent = /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-empty-text`
+    }, (locale === null || locale === void 0 ? void 0 : locale.emptyText) || (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('List')) || /*#__PURE__*/React.createElement(DefaultRenderEmpty, {
+      componentName: "List"
+    }));
+  }
+  const paginationPosition = paginationProps.position;
+  const contextValue = React.useMemo(() => ({
+    grid,
+    itemLayout
+  }), [JSON.stringify(grid), itemLayout]);
+  return wrapCSSVar(/*#__PURE__*/React.createElement(ListContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    style: Object.assign(Object.assign({}, contextStyle), style),
+    className: classString
+  }, rest), (paginationPosition === 'top' || paginationPosition === 'both') && paginationContent, header && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-header`
+  }, header), /*#__PURE__*/React.createElement(Spin, Object.assign({}, loadingProp), childrenContent, children), footer && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-footer`
+  }, footer), loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent)));
+}
+const ListWithForwardRef = /*#__PURE__*/React.forwardRef(InternalList);
+if (process.env.NODE_ENV !== 'production') {
+  ListWithForwardRef.displayName = 'List';
+}
+const List = ListWithForwardRef;
+List.Item = Item;
+export default List;

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

@@ -0,0 +1,62 @@
+import type { CSSProperties } from 'react';
+import type { GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /**
+     * @desc 内容宽度
+     * @descEN Width of content
+     */
+    contentWidth: number | string;
+    /**
+     * @desc 大号列表项内间距
+     * @descEN Padding of large item
+     */
+    itemPaddingLG: string;
+    /**
+     * @desc 小号列表项内间距
+     * @descEN Padding of small item
+     */
+    itemPaddingSM: string;
+    /**
+     * @desc 列表项内间距
+     * @descEN Padding of item
+     */
+    itemPadding: string;
+    /**
+     * @desc 头部区域背景色
+     * @descEN Background color of header
+     */
+    headerBg: string;
+    /**
+     * @desc 底部区域背景色
+     * @descEN Background color of footer
+     */
+    footerBg: string;
+    /**
+     * @desc 空文本内边距
+     * @descEN Padding of empty text
+     */
+    emptyTextPadding: CSSProperties['padding'];
+    /**
+     * @desc Meta 下间距
+     * @descEN Margin bottom of meta
+     */
+    metaMarginBottom: CSSProperties['marginBottom'];
+    /**
+     * @desc 头像右间距
+     * @descEN Right margin of avatar
+     */
+    avatarMarginRight: CSSProperties['marginRight'];
+    /**
+     * @desc 标题下间距
+     * @descEN Margin bottom of title
+     */
+    titleMarginBottom: CSSProperties['marginBottom'];
+    /**
+     * @desc 描述文字大小
+     * @descEN Font size of description
+     */
+    descriptionFontSize: number;
+}
+export declare const prepareComponentToken: GetDefaultToken<'List'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

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

@@ -0,0 +1,330 @@
+import { unit } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+const genBorderedStyle = token => {
+  const {
+    listBorderedCls,
+    componentCls,
+    paddingLG,
+    margin,
+    itemPaddingSM,
+    itemPaddingLG,
+    marginLG,
+    borderRadiusLG
+  } = token;
+  const innerCornerBorderRadius = unit(token.calc(borderRadiusLG).sub(token.lineWidth).equal());
+  return {
+    [listBorderedCls]: {
+      border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+      borderRadius: borderRadiusLG,
+      [`${componentCls}-header`]: {
+        borderRadius: `${innerCornerBorderRadius} ${innerCornerBorderRadius} 0 0`
+      },
+      [`${componentCls}-footer`]: {
+        borderRadius: `0 0 ${innerCornerBorderRadius} ${innerCornerBorderRadius}`
+      },
+      [`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
+        paddingInline: paddingLG
+      },
+      [`${componentCls}-pagination`]: {
+        margin: `${unit(margin)} ${unit(marginLG)}`
+      }
+    },
+    [`${listBorderedCls}${componentCls}-sm`]: {
+      [`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: {
+        padding: itemPaddingSM
+      }
+    },
+    [`${listBorderedCls}${componentCls}-lg`]: {
+      [`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: {
+        padding: itemPaddingLG
+      }
+    }
+  };
+};
+const genResponsiveStyle = token => {
+  const {
+    componentCls,
+    screenSM,
+    screenMD,
+    marginLG,
+    marginSM,
+    margin
+  } = token;
+  return {
+    [`@media screen and (max-width:${screenMD}px)`]: {
+      [componentCls]: {
+        [`${componentCls}-item`]: {
+          [`${componentCls}-item-action`]: {
+            marginInlineStart: marginLG
+          }
+        }
+      },
+      [`${componentCls}-vertical`]: {
+        [`${componentCls}-item`]: {
+          [`${componentCls}-item-extra`]: {
+            marginInlineStart: marginLG
+          }
+        }
+      }
+    },
+    [`@media screen and (max-width: ${screenSM}px)`]: {
+      [componentCls]: {
+        [`${componentCls}-item`]: {
+          flexWrap: 'wrap',
+          [`${componentCls}-action`]: {
+            marginInlineStart: marginSM
+          }
+        }
+      },
+      [`${componentCls}-vertical`]: {
+        [`${componentCls}-item`]: {
+          flexWrap: 'wrap-reverse',
+          [`${componentCls}-item-main`]: {
+            minWidth: token.contentWidth
+          },
+          [`${componentCls}-item-extra`]: {
+            margin: `auto auto ${unit(margin)}`
+          }
+        }
+      }
+    }
+  };
+};
+// =============================== Base ===============================
+const genBaseStyle = token => {
+  const {
+    componentCls,
+    antCls,
+    controlHeight,
+    minHeight,
+    paddingSM,
+    marginLG,
+    padding,
+    itemPadding,
+    colorPrimary,
+    itemPaddingSM,
+    itemPaddingLG,
+    paddingXS,
+    margin,
+    colorText,
+    colorTextDescription,
+    motionDurationSlow,
+    lineWidth,
+    headerBg,
+    footerBg,
+    emptyTextPadding,
+    metaMarginBottom,
+    avatarMarginRight,
+    titleMarginBottom,
+    descriptionFontSize
+  } = token;
+  return {
+    [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
+      position: 'relative',
+      // fix https://github.com/ant-design/ant-design/issues/46177
+      ['--rc-virtual-list-scrollbar-bg']: token.colorSplit,
+      '*': {
+        outline: 'none'
+      },
+      [`${componentCls}-header`]: {
+        background: headerBg
+      },
+      [`${componentCls}-footer`]: {
+        background: footerBg
+      },
+      [`${componentCls}-header, ${componentCls}-footer`]: {
+        paddingBlock: paddingSM
+      },
+      [`${componentCls}-pagination`]: {
+        marginBlockStart: marginLG,
+        // https://github.com/ant-design/ant-design/issues/20037
+        [`${antCls}-pagination-options`]: {
+          textAlign: 'start'
+        }
+      },
+      [`${componentCls}-spin`]: {
+        minHeight,
+        textAlign: 'center'
+      },
+      [`${componentCls}-items`]: {
+        margin: 0,
+        padding: 0,
+        listStyle: 'none'
+      },
+      [`${componentCls}-item`]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: itemPadding,
+        color: colorText,
+        [`${componentCls}-item-meta`]: {
+          display: 'flex',
+          flex: 1,
+          alignItems: 'flex-start',
+          maxWidth: '100%',
+          [`${componentCls}-item-meta-avatar`]: {
+            marginInlineEnd: avatarMarginRight
+          },
+          [`${componentCls}-item-meta-content`]: {
+            flex: '1 0',
+            width: 0,
+            color: colorText
+          },
+          [`${componentCls}-item-meta-title`]: {
+            margin: `0 0 ${unit(token.marginXXS)} 0`,
+            color: colorText,
+            fontSize: token.fontSize,
+            lineHeight: token.lineHeight,
+            '> a': {
+              color: colorText,
+              transition: `all ${motionDurationSlow}`,
+              '&:hover': {
+                color: colorPrimary
+              }
+            }
+          },
+          [`${componentCls}-item-meta-description`]: {
+            color: colorTextDescription,
+            fontSize: descriptionFontSize,
+            lineHeight: token.lineHeight
+          }
+        },
+        [`${componentCls}-item-action`]: {
+          flex: '0 0 auto',
+          marginInlineStart: token.marginXXL,
+          padding: 0,
+          fontSize: 0,
+          listStyle: 'none',
+          '& > li': {
+            position: 'relative',
+            display: 'inline-block',
+            padding: `0 ${unit(paddingXS)}`,
+            color: colorTextDescription,
+            fontSize: token.fontSize,
+            lineHeight: token.lineHeight,
+            textAlign: 'center',
+            '&:first-child': {
+              paddingInlineStart: 0
+            }
+          },
+          [`${componentCls}-item-action-split`]: {
+            position: 'absolute',
+            insetBlockStart: '50%',
+            insetInlineEnd: 0,
+            width: lineWidth,
+            height: token.calc(token.fontHeight).sub(token.calc(token.marginXXS).mul(2)).equal(),
+            transform: 'translateY(-50%)',
+            backgroundColor: token.colorSplit
+          }
+        }
+      },
+      [`${componentCls}-empty`]: {
+        padding: `${unit(padding)} 0`,
+        color: colorTextDescription,
+        fontSize: token.fontSizeSM,
+        textAlign: 'center'
+      },
+      [`${componentCls}-empty-text`]: {
+        padding: emptyTextPadding,
+        color: token.colorTextDisabled,
+        fontSize: token.fontSize,
+        textAlign: 'center'
+      },
+      // ============================ without flex ============================
+      [`${componentCls}-item-no-flex`]: {
+        display: 'block'
+      }
+    }),
+    [`${componentCls}-grid ${antCls}-col > ${componentCls}-item`]: {
+      display: 'block',
+      maxWidth: '100%',
+      marginBlockEnd: margin,
+      paddingBlock: 0,
+      borderBlockEnd: 'none'
+    },
+    [`${componentCls}-vertical ${componentCls}-item`]: {
+      alignItems: 'initial',
+      [`${componentCls}-item-main`]: {
+        display: 'block',
+        flex: 1
+      },
+      [`${componentCls}-item-extra`]: {
+        marginInlineStart: marginLG
+      },
+      [`${componentCls}-item-meta`]: {
+        marginBlockEnd: metaMarginBottom,
+        [`${componentCls}-item-meta-title`]: {
+          marginBlockStart: 0,
+          marginBlockEnd: titleMarginBottom,
+          color: colorText,
+          fontSize: token.fontSizeLG,
+          lineHeight: token.lineHeightLG
+        }
+      },
+      [`${componentCls}-item-action`]: {
+        marginBlockStart: padding,
+        marginInlineStart: 'auto',
+        '> li': {
+          padding: `0 ${unit(padding)}`,
+          '&:first-child': {
+            paddingInlineStart: 0
+          }
+        }
+      }
+    },
+    [`${componentCls}-split ${componentCls}-item`]: {
+      borderBlockEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+      '&:last-child': {
+        borderBlockEnd: 'none'
+      }
+    },
+    [`${componentCls}-split ${componentCls}-header`]: {
+      borderBlockEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
+    },
+    [`${componentCls}-split${componentCls}-empty ${componentCls}-footer`]: {
+      borderTop: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
+    },
+    [`${componentCls}-loading ${componentCls}-spin-nested-loading`]: {
+      minHeight: controlHeight
+    },
+    [`${componentCls}-split${componentCls}-something-after-last-item ${antCls}-spin-container > ${componentCls}-items > ${componentCls}-item:last-child`]: {
+      borderBlockEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
+    },
+    [`${componentCls}-lg ${componentCls}-item`]: {
+      padding: itemPaddingLG
+    },
+    [`${componentCls}-sm ${componentCls}-item`]: {
+      padding: itemPaddingSM
+    },
+    // Horizontal
+    [`${componentCls}:not(${componentCls}-vertical)`]: {
+      [`${componentCls}-item-no-flex`]: {
+        [`${componentCls}-item-action`]: {
+          float: 'right'
+        }
+      }
+    }
+  };
+};
+export const prepareComponentToken = token => ({
+  contentWidth: 220,
+  itemPadding: `${unit(token.paddingContentVertical)} 0`,
+  itemPaddingSM: `${unit(token.paddingContentVerticalSM)} ${unit(token.paddingContentHorizontal)}`,
+  itemPaddingLG: `${unit(token.paddingContentVerticalLG)} ${unit(token.paddingContentHorizontalLG)}`,
+  headerBg: 'transparent',
+  footerBg: 'transparent',
+  emptyTextPadding: token.padding,
+  metaMarginBottom: token.padding,
+  avatarMarginRight: token.padding,
+  titleMarginBottom: token.paddingSM,
+  descriptionFontSize: token.fontSize
+});
+// ============================== Export ==============================
+export default genStyleHooks('List', token => {
+  const listToken = mergeToken(token, {
+    listBorderedCls: `${token.componentCls}-bordered`,
+    minHeight: token.controlHeightLG
+  });
+  return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];
+}, prepareComponentToken);