1

video-gen-admin/node_modules/antd/es/descriptions/Cell.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { CellSemanticClassNames, CellSemanticStyles } from './DescriptionsContext';
+export interface CellProps {
+    itemPrefixCls: string;
+    span: number;
+    className?: string;
+    component: string;
+    style?: React.CSSProperties;
+    /** @deprecated Please use `styles.label` instead */
+    labelStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.content` instead */
+    contentStyle?: React.CSSProperties;
+    classNames?: CellSemanticClassNames;
+    styles?: CellSemanticStyles;
+    bordered?: boolean;
+    label?: React.ReactNode;
+    content?: React.ReactNode;
+    colon?: boolean;
+    type?: 'label' | 'content' | 'item';
+}
+declare const Cell: React.FC<CellProps>;
+export default Cell;

video-gen-admin/node_modules/antd/es/descriptions/Cell.js

@@ -0,0 +1,72 @@
+"use client";
+
+import React from 'react';
+import { clsx } from 'clsx';
+import { useMergeSemantic } from '../_util/hooks';
+import { isNonNullable } from '../_util/is';
+import DescriptionsContext from './DescriptionsContext';
+const Cell = props => {
+  const {
+    itemPrefixCls,
+    component,
+    span,
+    className,
+    style,
+    labelStyle,
+    contentStyle,
+    bordered,
+    label,
+    content,
+    colon,
+    type,
+    styles,
+    classNames
+  } = props;
+  const Component = component;
+  const {
+    classNames: contextClassNames,
+    styles: contextStyles
+  } = React.useContext(DescriptionsContext);
+  const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, classNames], [contextStyles, styles], {
+    props
+  });
+  const mergedLabelStyle = {
+    ...labelStyle,
+    ...mergedStyles.label
+  };
+  const mergedContentStyle = {
+    ...contentStyle,
+    ...mergedStyles.content
+  };
+  if (bordered) {
+    return /*#__PURE__*/React.createElement(Component, {
+      colSpan: span,
+      style: style,
+      className: clsx(className, {
+        [`${itemPrefixCls}-item-${type}`]: type === 'label' || type === 'content',
+        [mergedClassNames.label]: mergedClassNames.label && type === 'label',
+        [mergedClassNames.content]: mergedClassNames.content && type === 'content'
+      })
+    }, isNonNullable(label) && /*#__PURE__*/React.createElement("span", {
+      style: mergedLabelStyle
+    }, label), isNonNullable(content) && /*#__PURE__*/React.createElement("span", {
+      style: mergedContentStyle
+    }, content));
+  }
+  return /*#__PURE__*/React.createElement(Component, {
+    className: clsx(`${itemPrefixCls}-item`, className),
+    style: style,
+    colSpan: span
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${itemPrefixCls}-item-container`
+  }, isNonNullable(label) && (/*#__PURE__*/React.createElement("span", {
+    style: mergedLabelStyle,
+    className: clsx(`${itemPrefixCls}-item-label`, mergedClassNames.label, {
+      [`${itemPrefixCls}-item-no-colon`]: !colon
+    })
+  }, label)), isNonNullable(content) && (/*#__PURE__*/React.createElement("span", {
+    style: mergedContentStyle,
+    className: clsx(`${itemPrefixCls}-item-content`, mergedClassNames.content)
+  }, content))));
+};
+export default Cell;

video-gen-admin/node_modules/antd/es/descriptions/DescriptionsContext.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type CellSemanticClassNames = {
+    label?: string;
+    content?: string;
+};
+export type CellSemanticStyles = {
+    label?: React.CSSProperties;
+    content?: React.CSSProperties;
+};
+export interface DescriptionsContextProps {
+    /** @deprecated Please use `styles.label` instead */
+    labelStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.content` instead */
+    contentStyle?: React.CSSProperties;
+    classNames?: CellSemanticClassNames;
+    styles?: CellSemanticStyles;
+}
+declare const DescriptionsContext: React.Context<DescriptionsContextProps>;
+export default DescriptionsContext;

video-gen-admin/node_modules/antd/es/descriptions/DescriptionsContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const DescriptionsContext = /*#__PURE__*/React.createContext(null);
+export default DescriptionsContext;

video-gen-admin/node_modules/antd/es/descriptions/Item.d.ts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+import type { Breakpoint } from '../_util/responsiveObserver';
+import type { CellSemanticClassNames, CellSemanticStyles } from './DescriptionsContext';
+export interface DescriptionsItemProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    label?: React.ReactNode;
+    /** @deprecated Please use `styles.label` instead */
+    labelStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.content` instead */
+    contentStyle?: React.CSSProperties;
+    classNames?: CellSemanticClassNames;
+    styles?: CellSemanticStyles;
+    span?: number | 'filled' | {
+        [key in Breakpoint]?: number;
+    };
+    children?: React.ReactNode;
+}
+declare const DescriptionsItem: React.FC<React.PropsWithChildren<DescriptionsItemProps>>;
+export default DescriptionsItem;

video-gen-admin/node_modules/antd/es/descriptions/Item.js

@@ -0,0 +1,6 @@
+// JSX Structure Syntactic Sugar. Never reach the render code.
+/* istanbul ignore next */
+const DescriptionsItem = props => {
+  return props.children;
+};
+export default DescriptionsItem;

video-gen-admin/node_modules/antd/es/descriptions/Row.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { InternalDescriptionsItemType } from '.';
+export interface RowProps {
+    prefixCls: string;
+    vertical: boolean;
+    row: InternalDescriptionsItemType[];
+    bordered?: boolean;
+    colon: boolean;
+    index: number;
+    children?: React.ReactNode;
+}
+declare const Row: React.FC<RowProps>;
+export default Row;

video-gen-admin/node_modules/antd/es/descriptions/Row.js

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from 'react';
+import Cell from './Cell';
+import DescriptionsContext from './DescriptionsContext';
+function renderCells(items, {
+  colon,
+  prefixCls,
+  bordered
+}, {
+  component,
+  type,
+  showLabel,
+  showContent,
+  labelStyle: rootLabelStyle,
+  contentStyle: rootContentStyle,
+  styles: rootStyles
+}) {
+  return items.map(({
+    label,
+    children,
+    prefixCls: itemPrefixCls = prefixCls,
+    className,
+    style,
+    labelStyle,
+    contentStyle,
+    span = 1,
+    key,
+    styles,
+    classNames
+  }, index) => {
+    if (typeof component === 'string') {
+      return /*#__PURE__*/React.createElement(Cell, {
+        key: `${type}-${key || index}`,
+        className: className,
+        style: style,
+        classNames: classNames,
+        styles: {
+          label: {
+            ...rootLabelStyle,
+            ...rootStyles?.label,
+            ...labelStyle,
+            ...styles?.label
+          },
+          content: {
+            ...rootContentStyle,
+            ...rootStyles?.content,
+            ...contentStyle,
+            ...styles?.content
+          }
+        },
+        span: span,
+        colon: colon,
+        component: component,
+        itemPrefixCls: itemPrefixCls,
+        bordered: bordered,
+        label: showLabel ? label : null,
+        content: showContent ? children : null,
+        type: type
+      });
+    }
+    return [/*#__PURE__*/React.createElement(Cell, {
+      key: `label-${key || index}`,
+      className: className,
+      style: {
+        ...rootLabelStyle,
+        ...rootStyles?.label,
+        ...style,
+        ...labelStyle,
+        ...styles?.label
+      },
+      span: 1,
+      colon: colon,
+      component: component[0],
+      itemPrefixCls: itemPrefixCls,
+      bordered: bordered,
+      label: label,
+      type: "label"
+    }), /*#__PURE__*/React.createElement(Cell, {
+      key: `content-${key || index}`,
+      className: className,
+      style: {
+        ...rootContentStyle,
+        ...rootStyles?.content,
+        ...style,
+        ...contentStyle,
+        ...styles?.content
+      },
+      span: span * 2 - 1,
+      component: component[1],
+      itemPrefixCls: itemPrefixCls,
+      bordered: bordered,
+      content: children,
+      type: "content"
+    })];
+  });
+}
+const Row = props => {
+  const descContext = React.useContext(DescriptionsContext);
+  const {
+    prefixCls,
+    vertical,
+    row,
+    index,
+    bordered
+  } = props;
+  if (vertical) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+      key: `label-${index}`,
+      className: `${prefixCls}-row`
+    }, renderCells(row, props, {
+      component: 'th',
+      type: 'label',
+      showLabel: true,
+      ...descContext
+    })), /*#__PURE__*/React.createElement("tr", {
+      key: `content-${index}`,
+      className: `${prefixCls}-row`
+    }, renderCells(row, props, {
+      component: 'td',
+      type: 'content',
+      showContent: true,
+      ...descContext
+    })));
+  }
+  return /*#__PURE__*/React.createElement("tr", {
+    key: index,
+    className: `${prefixCls}-row`
+  }, renderCells(row, props, {
+    component: bordered ? ['th', 'td'] : 'td',
+    type: 'item',
+    showLabel: true,
+    showContent: true,
+    ...descContext
+  }));
+};
+export default Row;

video-gen-admin/node_modules/antd/es/descriptions/constant.d.ts

@@ -0,0 +1,3 @@
+import type { Breakpoint } from '../_util/responsiveObserver';
+declare const DEFAULT_COLUMN_MAP: Record<Breakpoint, number>;
+export default DEFAULT_COLUMN_MAP;

video-gen-admin/node_modules/antd/es/descriptions/constant.js

@@ -0,0 +1,10 @@
+const DEFAULT_COLUMN_MAP = {
+  xxxl: 4,
+  xxl: 3,
+  xl: 3,
+  lg: 3,
+  md: 3,
+  sm: 2,
+  xs: 1
+};
+export default DEFAULT_COLUMN_MAP;

video-gen-admin/node_modules/antd/es/descriptions/hooks/useItems.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { DescriptionsItemType, InternalDescriptionsItemType } from '..';
+import type { ScreenMap } from '../../_util/responsiveObserver';
+export default function useItems(screens: ScreenMap, items?: DescriptionsItemType[], children?: React.ReactNode): InternalDescriptionsItemType[];

video-gen-admin/node_modules/antd/es/descriptions/hooks/useItems.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { toArray } from '@rc-component/util';
+import { isNumber } from '../../_util/is';
+import { matchScreen } from '../../_util/responsiveObserver';
+// Convert children into items
+const transChildren2Items = childNodes => toArray(childNodes).map(node => ({
+  ...node?.props,
+  key: node.key
+}));
+export default function useItems(screens, items, children) {
+  const mergedItems = React.useMemo(() =>
+  // Take `items` first or convert `children` into items
+  items || transChildren2Items(children), [items, children]);
+  const responsiveItems = React.useMemo(() => mergedItems.map(({
+    span,
+    ...restItem
+  }) => {
+    if (span === 'filled') {
+      return {
+        ...restItem,
+        filled: true
+      };
+    }
+    return {
+      ...restItem,
+      span: isNumber(span) ? span : matchScreen(screens, span)
+    };
+  }), [mergedItems, screens]);
+  return responsiveItems;
+}

video-gen-admin/node_modules/antd/es/descriptions/hooks/useRow.d.ts

@@ -0,0 +1,3 @@
+import type { InternalDescriptionsItemType } from '..';
+declare const useRow: (mergedColumn: number, items: InternalDescriptionsItemType[]) => InternalDescriptionsItemType[][];
+export default useRow;

video-gen-admin/node_modules/antd/es/descriptions/hooks/useRow.js

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { devUseWarning } from '../../_util/warning';
+// Calculate the sum of span in a row
+function getCalcRows(rowItems, mergedColumn) {
+  let rows = [];
+  let tmpRow = [];
+  let exceed = false;
+  let count = 0;
+  rowItems.filter(n => n).forEach(rowItem => {
+    const {
+      filled,
+      ...restItem
+    } = rowItem;
+    if (filled) {
+      tmpRow.push(restItem);
+      rows.push(tmpRow);
+      // reset
+      tmpRow = [];
+      count = 0;
+      return;
+    }
+    const restSpan = mergedColumn - count;
+    count += rowItem.span || 1;
+    if (count >= mergedColumn) {
+      if (count > mergedColumn) {
+        exceed = true;
+        tmpRow.push({
+          ...restItem,
+          span: restSpan
+        });
+      } else {
+        tmpRow.push(restItem);
+      }
+      rows.push(tmpRow);
+      // reset
+      tmpRow = [];
+      count = 0;
+    } else {
+      tmpRow.push(restItem);
+    }
+  });
+  if (tmpRow.length > 0) {
+    rows.push(tmpRow);
+  }
+  rows = rows.map(rows => {
+    const count = rows.reduce((acc, item) => acc + (item.span || 1), 0);
+    if (count < mergedColumn) {
+      // If the span of the last element in the current row is less than the column, then add its span to the remaining columns
+      const last = rows[rows.length - 1];
+      last.span = mergedColumn - (count - (last.span || 1));
+      return rows;
+    }
+    return rows;
+  });
+  return [rows, exceed];
+}
+const useRow = (mergedColumn, items) => {
+  const [rows, exceed] = useMemo(() => getCalcRows(items, mergedColumn), [items, mergedColumn]);
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Descriptions');
+    process.env.NODE_ENV !== "production" ? warning(!exceed, 'usage', 'Sum of column `span` in a line not match `column` of Descriptions.') : void 0;
+  }
+  return rows;
+};
+export default useRow;

video-gen-admin/node_modules/antd/es/descriptions/index.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
+import type { Breakpoint } from '../_util/responsiveObserver';
+import type { SizeType } from '../config-provider/SizeContext';
+import DescriptionsContext from './DescriptionsContext';
+import type { DescriptionsContextProps } from './DescriptionsContext';
+import type { DescriptionsItemProps } from './Item';
+import DescriptionsItem from './Item';
+interface CompoundedComponent {
+    Item: typeof DescriptionsItem;
+}
+export interface InternalDescriptionsItemType extends Omit<DescriptionsItemProps, 'span'> {
+    key?: React.Key;
+    filled?: boolean;
+    span?: number;
+}
+export interface DescriptionsItemType extends Omit<DescriptionsItemProps, 'prefixCls'> {
+    key?: React.Key;
+}
+export type DescriptionsSemanticName = keyof DescriptionsSemanticClassNames & keyof DescriptionsSemanticStyles;
+export type DescriptionsSemanticClassNames = {
+    root?: string;
+    header?: string;
+    title?: string;
+    extra?: string;
+    label?: string;
+    content?: string;
+};
+export type DescriptionsSemanticStyles = {
+    root?: React.CSSProperties;
+    header?: React.CSSProperties;
+    title?: React.CSSProperties;
+    extra?: React.CSSProperties;
+    label?: React.CSSProperties;
+    content?: React.CSSProperties;
+};
+export type DescriptionsClassNamesType = SemanticClassNamesType<DescriptionsProps, DescriptionsSemanticClassNames>;
+export type DescriptionsStylesType = SemanticStylesType<DescriptionsProps, DescriptionsSemanticStyles>;
+export interface DescriptionsProps {
+    prefixCls?: string;
+    className?: string;
+    rootClassName?: string;
+    style?: React.CSSProperties;
+    bordered?: boolean;
+    /**
+     * Note: `default` is deprecated and will be removed in v7, please use `medium` instead.
+     */
+    size?: SizeType | 'default';
+    /**
+     * @deprecated use `items` instead
+     */
+    children?: React.ReactNode;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    column?: number | Partial<Record<Breakpoint, number>>;
+    layout?: 'horizontal' | 'vertical';
+    colon?: boolean;
+    /**
+     * @deprecated use `styles.label` instead
+     */
+    labelStyle?: React.CSSProperties;
+    /**
+     * @deprecated use `styles.content` instead
+     */
+    contentStyle?: React.CSSProperties;
+    styles?: DescriptionsStylesType;
+    classNames?: DescriptionsClassNamesType;
+    items?: DescriptionsItemType[];
+    id?: string;
+}
+declare const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent;
+export type { DescriptionsContextProps };
+export { DescriptionsContext };
+export default Descriptions;

video-gen-admin/node_modules/antd/es/descriptions/index.js

@@ -0,0 +1,138 @@
+"use client";
+
+/* eslint-disable react/no-array-index-key */
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { useMergeSemantic } from '../_util/hooks';
+import { isNumber } from '../_util/is';
+import { matchScreen } from '../_util/responsiveObserver';
+import { devUseWarning } from '../_util/warning';
+import { useComponentConfig } from '../config-provider/context';
+import useSize from '../config-provider/hooks/useSize';
+import useBreakpoint from '../grid/hooks/useBreakpoint';
+import DEFAULT_COLUMN_MAP from './constant';
+import DescriptionsContext from './DescriptionsContext';
+import useItems from './hooks/useItems';
+import useRow from './hooks/useRow';
+import DescriptionsItem from './Item';
+import Row from './Row';
+import useStyle from './style';
+const Descriptions = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    title,
+    extra,
+    column,
+    colon = true,
+    bordered,
+    layout,
+    children,
+    className,
+    rootClassName,
+    style,
+    size: customizeSize,
+    labelStyle,
+    contentStyle,
+    styles,
+    items,
+    classNames,
+    ...restProps
+  } = props;
+  const {
+    getPrefixCls,
+    direction,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles
+  } = useComponentConfig('descriptions');
+  const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
+  const screens = useBreakpoint();
+  // ============================== Warn ==============================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Descriptions');
+    warning.deprecated(customizeSize !== 'default', 'size="default"', 'size="large"');
+    [['labelStyle', 'styles.label'], ['contentStyle', 'styles.content']].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
+  // Column count
+  const mergedColumn = React.useMemo(() => {
+    if (isNumber(column)) {
+      return column;
+    }
+    return matchScreen(screens, {
+      ...DEFAULT_COLUMN_MAP,
+      ...column
+    }) ?? 3;
+  }, [screens, column]);
+  // Items with responsive
+  const mergedItems = useItems(screens, items, children);
+  const mergedSize = useSize(customizeSize);
+  const rows = useRow(mergedColumn, mergedItems);
+  const [hashId, cssVarCls] = useStyle(prefixCls);
+  // =========== Merged Props for Semantic ==========
+  const mergedProps = {
+    ...props,
+    column: mergedColumn,
+    items: mergedItems,
+    size: mergedSize
+  };
+  const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, classNames], [contextStyles, styles], {
+    props: mergedProps
+  });
+  // ======================== Render ========================
+  const memoizedValue = React.useMemo(() => ({
+    labelStyle,
+    contentStyle,
+    styles: {
+      label: mergedStyles.label,
+      content: mergedStyles.content
+    },
+    classNames: {
+      label: mergedClassNames.label,
+      content: mergedClassNames.content
+    }
+  }), [labelStyle, contentStyle, mergedStyles.label, mergedStyles.content, mergedClassNames.label, mergedClassNames.content]);
+  return /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
+    value: memoizedValue
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(prefixCls, contextClassName, mergedClassNames.root, {
+      [`${prefixCls}-medium`]: mergedSize === 'medium' || mergedSize === 'middle',
+      [`${prefixCls}-small`]: mergedSize === 'small',
+      [`${prefixCls}-bordered`]: !!bordered,
+      [`${prefixCls}-rtl`]: direction === 'rtl'
+    }, className, rootClassName, hashId, cssVarCls),
+    style: {
+      ...contextStyle,
+      ...mergedStyles.root,
+      ...style
+    },
+    ...restProps
+  }, (title || extra) && (/*#__PURE__*/React.createElement("div", {
+    className: clsx(`${prefixCls}-header`, mergedClassNames.header),
+    style: mergedStyles.header
+  }, title && (/*#__PURE__*/React.createElement("div", {
+    className: clsx(`${prefixCls}-title`, mergedClassNames.title),
+    style: mergedStyles.title
+  }, title)), extra && (/*#__PURE__*/React.createElement("div", {
+    className: clsx(`${prefixCls}-extra`, mergedClassNames.extra),
+    style: mergedStyles.extra
+  }, extra)))), /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-view`
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rows.map((row, index) => (/*#__PURE__*/React.createElement(Row, {
+    key: index,
+    index: index,
+    colon: colon,
+    prefixCls: prefixCls,
+    vertical: layout === 'vertical',
+    bordered: bordered,
+    row: row
+  }))))))));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Descriptions.displayName = 'Descriptions';
+}
+export { DescriptionsContext };
+Descriptions.Item = DescriptionsItem;
+export default Descriptions;

video-gen-admin/node_modules/antd/es/descriptions/style/index.d.ts

@@ -0,0 +1,57 @@
+import type { GetDefaultToken } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    /**
+     * @desc 标签背景色
+     * @descEN Background color of label
+     */
+    labelBg: string;
+    /**
+     * @desc 标签文字颜色
+     * @descEN Text color of label
+     */
+    labelColor: string;
+    /**
+     * @desc 标题文字颜色
+     * @descEN Text color of title
+     */
+    titleColor: string;
+    /**
+     * @desc 标题下间距
+     * @descEN Bottom margin of title
+     */
+    titleMarginBottom: number;
+    /**
+     * @desc 子项下间距
+     * @descEN Bottom padding of item
+     */
+    itemPaddingBottom: number;
+    /**
+     * @desc 子项结束间距
+     * @descEN End padding of item
+     */
+    itemPaddingEnd: number;
+    /**
+     * @desc 冒号右间距
+     * @descEN Right margin of colon
+     */
+    colonMarginRight: number;
+    /**
+     * @desc 冒号左间距
+     * @descEN Left margin of colon
+     */
+    colonMarginLeft: number;
+    /**
+     * @desc 内容区域文字颜色
+     * @descEN Text color of content
+     */
+    contentColor: string;
+    /**
+     * @desc 额外区域文字颜色
+     * @descEN Text color of extra area
+     */
+    extraColor: string;
+}
+export declare const prepareComponentToken: GetDefaultToken<'Descriptions'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
+export default _default;

video-gen-admin/node_modules/antd/es/descriptions/style/index.js

@@ -0,0 +1,202 @@
+import { unit } from '@ant-design/cssinjs';
+import { resetComponent, textEllipsis } from '../../style';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+const genBorderedStyle = token => {
+  const {
+    componentCls,
+    labelBg
+  } = token;
+  return {
+    [`&${componentCls}-bordered`]: {
+      [`> ${componentCls}-view`]: {
+        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+        '> table': {
+          tableLayout: 'auto'
+        },
+        [`${componentCls}-row`]: {
+          borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+          '&:first-child': {
+            '> th:first-child, > td:first-child': {
+              borderStartStartRadius: token.borderRadiusLG
+            }
+          },
+          '&:last-child': {
+            borderBottom: 'none',
+            '> th:first-child, > td:first-child': {
+              borderEndStartRadius: token.borderRadiusLG
+            }
+          },
+          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
+            padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
+            borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+            '&:last-child': {
+              borderInlineEnd: 'none'
+            }
+          },
+          [`> ${componentCls}-item-label`]: {
+            color: token.colorTextSecondary,
+            backgroundColor: labelBg,
+            '&::after': {
+              display: 'none'
+            }
+          }
+        }
+      },
+      [`&${componentCls}-medium`]: {
+        [`${componentCls}-row`]: {
+          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
+            padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`
+          }
+        }
+      },
+      [`&${componentCls}-small`]: {
+        [`${componentCls}-row`]: {
+          [`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
+            padding: `${unit(token.paddingXS)} ${unit(token.padding)}`
+          }
+        }
+      }
+    }
+  };
+};
+const genDescriptionStyles = token => {
+  const {
+    componentCls,
+    extraColor,
+    itemPaddingBottom,
+    itemPaddingEnd,
+    colonMarginRight,
+    colonMarginLeft,
+    titleMarginBottom
+  } = token;
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      ...genBorderedStyle(token),
+      '&-rtl': {
+        direction: 'rtl'
+      },
+      [`${componentCls}-header`]: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: titleMarginBottom
+      },
+      [`${componentCls}-title`]: {
+        ...textEllipsis,
+        flex: 'auto',
+        color: token.titleColor,
+        fontWeight: token.fontWeightStrong,
+        fontSize: token.fontSizeLG,
+        lineHeight: token.lineHeightLG
+      },
+      [`${componentCls}-extra`]: {
+        marginInlineStart: 'auto',
+        color: extraColor,
+        fontSize: token.fontSize
+      },
+      [`${componentCls}-view`]: {
+        width: '100%',
+        borderRadius: token.borderRadiusLG,
+        table: {
+          width: '100%',
+          tableLayout: 'fixed',
+          borderCollapse: 'collapse'
+        }
+      },
+      [`${componentCls}-row`]: {
+        '> th, > td': {
+          paddingBottom: itemPaddingBottom,
+          paddingInlineEnd: itemPaddingEnd
+        },
+        '> th:last-child, > td:last-child': {
+          paddingInlineEnd: 0
+        },
+        '&:last-child': {
+          borderBottom: 'none',
+          '> th, > td': {
+            paddingBottom: 0
+          }
+        }
+      },
+      [`${componentCls}-item-label`]: {
+        color: token.labelColor,
+        fontWeight: 'normal',
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        textAlign: 'start',
+        '&::after': {
+          content: '":"',
+          position: 'relative',
+          top: -0.5,
+          // magic for position
+          marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`
+        },
+        [`&${componentCls}-item-no-colon::after`]: {
+          content: '""'
+        }
+      },
+      [`${componentCls}-item-no-label`]: {
+        '&::after': {
+          margin: 0,
+          content: '""'
+        }
+      },
+      [`${componentCls}-item-content`]: {
+        display: 'table-cell',
+        flex: 1,
+        color: token.contentColor,
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        wordBreak: 'break-word',
+        overflowWrap: 'break-word'
+      },
+      [`${componentCls}-item`]: {
+        paddingBottom: 0,
+        verticalAlign: 'top',
+        '&-container': {
+          display: 'flex',
+          [`${componentCls}-item-label`]: {
+            display: 'inline-flex',
+            alignItems: 'baseline'
+          },
+          [`${componentCls}-item-content`]: {
+            display: 'inline-flex',
+            alignItems: 'baseline',
+            minWidth: '1em'
+          }
+        }
+      },
+      '&-medium': {
+        [`${componentCls}-row`]: {
+          '> th, > td': {
+            paddingBottom: token.paddingSM
+          }
+        }
+      },
+      '&-small': {
+        [`${componentCls}-row`]: {
+          '> th, > td': {
+            paddingBottom: token.paddingXS
+          }
+        }
+      }
+    }
+  };
+};
+export const prepareComponentToken = token => ({
+  labelBg: token.colorFillAlter,
+  labelColor: token.colorTextTertiary,
+  titleColor: token.colorText,
+  titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
+  itemPaddingBottom: token.padding,
+  itemPaddingEnd: token.padding,
+  colonMarginRight: token.marginXS,
+  colonMarginLeft: token.marginXXS / 2,
+  contentColor: token.colorText,
+  extraColor: token.colorText
+});
+// ============================== Export ==============================
+export default genStyleHooks('Descriptions', token => {
+  const descriptionToken = mergeToken(token, {});
+  return genDescriptionStyles(descriptionToken);
+}, prepareComponentToken);