@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.10

package/lib/config-provider/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConfigProvider as AntConfigProvider } from 'antd';
 import type { ConfigProviderProps as AntConfigProviderProps, ConfigConsumerProps as AntConfigConsumerProps, ThemeConfig as AntThemeConfig } from 'antd/es/config-provider';
-import type { ComponentStyleConfig, CardConfig as AntCardConfig } from 'antd/es/config-provider/context';
+import type { ComponentStyleConfig, CardConfig as AntCardConfig, TableConfig as AntTableConfig } from 'antd/es/config-provider/context';
 import type { AppProps } from 'antd/es/app';
 import type { PaginationConfig } from 'antd/es/pagination';
 import type { SpinIndicator } from 'antd/es/spin';
@@ -14,8 +14,9 @@ export * from 'antd/es/config-provider/SizeContext';
 export * from 'antd/es/config-provider/DisabledContext';
 export * from 'antd/es/config-provider';
 export interface ThemeConfig extends AntThemeConfig {
-    isDark?: boolean;
     isAliyun?: boolean;
+    isDark?: boolean;
+    isCompact?: boolean;
 }
 export type CardConfig = AntCardConfig & {
     divided?: boolean;
@@ -23,7 +24,7 @@ export type CardConfig = AntCardConfig & {
 export type SpinConfig = ComponentStyleConfig & {
     indicator?: SpinIndicator;
 };
-export type TableConfig = ComponentStyleConfig & {
+export type TableConfig = AntTableConfig & {
     selectionColumnWidth?: number;
 };
 export interface ConfigConsumerProps extends AntConfigConsumerProps {

package/lib/config-provider/index.js

@@ -40,21 +40,29 @@ var import_StyleContext = __toESM(require("@ant-design/cssinjs/es/StyleContext")
 var import_icons = require("@oceanbase/icons");
 var import_aliyun_theme = __toESM(require("@oceanbase/aliyun-theme"));
 var import_lodash = require("lodash");
+var import_app = __toESM(require("../app"));
 var import_static_function = __toESM(require("../static-function"));
 var import_theme = __toESM(require("../theme"));
 var import_default = __toESM(require("../theme/default"));
 var import_dark = __toESM(require("../theme/dark"));
+var import_compact = __toESM(require("../theme/compact"));
 var import_DefaultRenderEmpty = __toESM(require("./DefaultRenderEmpty"));
+var import_global = __toESM(require("../style/global"));
+var import_cssVariables = __toESM(require("../style/cssVariables"));
 __reExport(config_provider_exports, require("./navigate"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/context"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/SizeContext"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/DisabledContext"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var ExtendedConfigContext = import_react.default.createContext({
   navigate: void 0,
   hideOnSinglePage: false,
   injectStaticFunction: true
 });
+var getLocaleTokenValue = (mergedThemeToken, locale, tokenKey, tokenValue, tokenValueEn) => {
+  return tokenValue !== mergedThemeToken[tokenKey] ? { [tokenKey]: tokenValue } : ["en", "en-gb"].includes(locale.locale) ? { [tokenKey]: tokenValueEn } : {};
+};
 var ConfigProvider = ({
   children,
   theme,
@@ -71,24 +79,57 @@ var ConfigProvider = ({
   appProps,
   ...restProps
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const parentContext = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
   const parentExtendedContext = import_react.default.useContext(ExtendedConfigContext);
-  const { isDark, isAliyun } = (0, import_lodash.merge)({}, parentContext.theme, theme);
-  const customTheme = isAliyun ? import_aliyun_theme.default : isDark ? import_dark.default : void 0;
+  const { isAliyun, isDark, isCompact } = (0, import_lodash.merge)({}, parentContext.theme, theme);
+  const aliyunThemeConfig = isAliyun ? import_aliyun_theme.default : void 0;
+  const darkThemeConfig = isDark && !isAliyun ? isCompact ? import_dark.default : {
+    ...import_dark.default,
+    token: {
+      ...import_dark.default.token,
+      ...Object.fromEntries(
+        Object.entries(import_default.default.token).filter(
+          ([key]) => {
+            var _a2;
+            return !((_a2 = key == null ? void 0 : key.toLowerCase()) == null ? void 0 : _a2.startsWith("color"));
+          }
+        )
+      )
+    }
+  } : void 0;
+  const compactThemeConfig = isCompact && !isAliyun ? isDark ? import_compact.default : {
+    ...import_compact.default,
+    token: {
+      ...import_compact.default.token,
+      ...Object.fromEntries(
+        Object.entries(import_default.default.token).filter(
+          ([key]) => {
+            var _a2;
+            return ((_a2 = key == null ? void 0 : key.toLowerCase()) == null ? void 0 : _a2.startsWith("color")) && !["colorBgBase", "colorTextBase"].includes(key);
+          }
+        )
+      )
+    }
+  } : void 0;
   const mergedTheme = (0, import_lodash.merge)(
     {},
-    customTheme ? {} : import_default.default,
+    isAliyun ? {} : isDark || isCompact ? import_theme.default.defaultSeed : import_default.default,
     parentContext.theme,
-    customTheme,
+    aliyunThemeConfig,
+    darkThemeConfig,
+    compactThemeConfig,
     theme
   );
   const { token } = import_theme.default.useToken();
   const fontFamily = ((_a = mergedTheme.token) == null ? void 0 : _a.fontFamily) || token.fontFamily;
+  const fontWeightWeak = ((_b = mergedTheme.token) == null ? void 0 : _b.fontWeightWeak) || token.fontWeightWeak;
+  const fontWeight = ((_c = mergedTheme.token) == null ? void 0 : _c.fontWeight) || token.fontWeight;
+  const fontWeightStrong = ((_d = mergedTheme.token) == null ? void 0 : _d.fontWeightStrong) || token.fontWeightStrong;
   const parentStyleContext = import_react.default.useContext(import_StyleContext.default);
   const mergedStyleProviderProps = (0, import_lodash.merge)({}, parentStyleContext, styleProviderProps);
   const mergedLocale = (0, import_lodash.merge)({}, parentContext.locale, locale);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_antd.ConfigProvider,
     {
       locale: mergedLocale,
@@ -96,7 +137,18 @@ var ConfigProvider = ({
       collapse: (0, import_lodash.merge)(
         {},
         {
-          expandIcon: ({ isActive }) => /* @__PURE__ */ import_react.default.createElement(import_icons.CaretRightOutlined, { rotate: isActive ? 90 : 0 })
+          expandIcon: ({ isActive }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.CaretRightOutlined,
+              {
+                rotate: isActive ? 90 : 0,
+                style: {
+                  color: ((_a2 = mergedTheme.token) == null ? void 0 : _a2.colorIcon) || ((_b2 = mergedTheme.token) == null ? void 0 : _b2.colorTextSecondary)
+                }
+              }
+            );
+          }
         },
         parentContext.collapse,
         collapse
@@ -110,34 +162,85 @@ var ConfigProvider = ({
         form
       ),
       spin: (0, import_lodash.merge)({}, parentContext.spin, spin),
-      table: (0, import_lodash.merge)({}, parentContext.table, table),
+      table: (0, import_lodash.merge)(
+        {},
+        {
+          expandable: {
+            expandIcon: ({ expandable, expanded, onExpand, record }) => {
+              var _a2, _b2;
+              return expandable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icons.CaretRightOutlined,
+                {
+                  onClick: (e) => onExpand(record, e),
+                  style: {
+                    // marginRight: mergedTheme.token?.marginXS || 8,
+                    transition: `transform 0.2s`,
+                    transform: expanded ? "rotate(90deg)" : void 0,
+                    color: ((_a2 = mergedTheme.token) == null ? void 0 : _a2.colorIcon) || ((_b2 = mergedTheme.token) == null ? void 0 : _b2.colorTextSecondary)
+                  }
+                }
+              );
+            }
+          }
+        },
+        parentContext.table,
+        table
+      ),
       tabs: (0, import_lodash.merge)({}, parentContext.tabs, tabs),
       theme: (0, import_lodash.merge)({}, mergedTheme, {
-        token: (
-          // custom fontFamily
-          fontFamily !== import_default.default.token.fontFamily ? { fontFamily } : (
-            // use fontFamilyEn for en
-            ["en", "en-gb"].includes(mergedLocale.locale) ? {
-              fontFamily: import_default.fontFamilyEn
-            } : {}
+        token: {
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontFamily",
+            fontFamily,
+            import_default.fontFamilyEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeightWeak",
+            fontWeightWeak,
+            import_default.fontWeightWeakEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeight",
+            fontWeight,
+            import_default.fontWeightEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeightStrong",
+            fontWeightStrong,
+            import_default.fontWeightStrongEn
           )
-        )
+        }
       }),
-      renderEmpty: parentContext.renderEmpty || ((componentName) => /* @__PURE__ */ import_react.default.createElement(import_DefaultRenderEmpty.default, { componentName })),
-      ...restProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      ExtendedConfigContext.Provider,
-      {
-        value: {
-          navigate: navigate === void 0 ? parentExtendedContext.navigate : navigate,
-          hideOnSinglePage: ((_b = parentContext.pagination) == null ? void 0 : _b.showSizeChanger) ? false : hideOnSinglePage !== void 0 ? hideOnSinglePage : parentExtendedContext.hideOnSinglePage,
-          // inject static function to outermost ConfigProvider only
-          injectStaticFunction: false
+      renderEmpty: parentContext.renderEmpty || ((componentName) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultRenderEmpty.default, { componentName })),
+      ...restProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ExtendedConfigContext.Provider,
+        {
+          value: {
+            navigate: navigate === void 0 ? parentExtendedContext.navigate : navigate,
+            hideOnSinglePage: ((_e = parentContext.pagination) == null ? void 0 : _e.showSizeChanger) ? false : hideOnSinglePage !== void 0 ? hideOnSinglePage : parentExtendedContext.hideOnSinglePage,
+            // inject static function to outermost ConfigProvider only
+            injectStaticFunction: false
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cssVariables.default, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global.default, { prefixCls: restProps.prefixCls }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_app.default, { component: false, ...appProps, children: [
+              children,
+              parentExtendedContext.injectStaticFunction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_static_function.default, {})
+            ] })
+          ] })
         }
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps }, /* @__PURE__ */ import_react.default.createElement(import_antd.App, { component: false, ...appProps }, children, parentExtendedContext.injectStaticFunction && /* @__PURE__ */ import_react.default.createElement(import_static_function.default, null)))
-    )
+      )
+    }
   );
 };
 ConfigProvider.ConfigContext = import_antd.ConfigProvider.ConfigContext;

package/lib/descriptions/hooks/useItems.js

@@ -37,6 +37,7 @@ var import_warning = __toESM(require("antd/es/_util/warning"));
 var import_toArray = __toESM(require("rc-util/lib/Children/toArray"));
 var import_typography = __toESM(require("../../typography"));
 var import_getEllipsisConfig = require("../../_util/getEllipsisConfig");
+var import_jsx_runtime = require("react/jsx-runtime");
 var children2Items = (children) => {
   const childrenItems = (0, import_toArray.default)(children).map((node) => {
     if (import_react.default.isValidElement(node)) {
@@ -63,7 +64,7 @@ function convertItem(props, bordered) {
   return {
     ...restItemProps,
     // 无边框并且子元素非 Typography 时外面包一层 Typography.Text，以实现自动省略
-    children: bordered || (itemChildrenType == null ? void 0 : itemChildrenType.__ANT_TYPOGRAPHY) ? itemChildren : /* @__PURE__ */ import_react.default.createElement(
+    children: bordered || (itemChildrenType == null ? void 0 : itemChildrenType.__ANT_TYPOGRAPHY) ? itemChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_typography.default.Text,
       {
         ...restContentProps,
@@ -76,9 +77,9 @@ function convertItem(props, bordered) {
           } : editable === true ? {
             autoSize: false
           } : editable
-        )
-      },
-      itemChildren
+        ),
+        children: itemChildren
+      }
     )
   };
 }

package/lib/descriptions/index.d.ts

@@ -9,6 +9,16 @@ export interface DescriptionsItemType extends AntDescriptionsItemType {
 }
 export interface DescriptionsProps extends AntDescriptionsProps {
     items?: DescriptionsItemType[];
+    /** Whether the descriptions is collapsible */
+    collapsible?: boolean;
+    /** Whether the descriptions is collapsed (controlled mode) */
+    collapsed?: boolean;
+    /** Default collapsed state (uncontrolled mode) */
+    defaultCollapsed?: boolean;
+    /** Callback when collapsed state changes */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Content alignment, when set to 'left', all content values will be aligned to the left based on the longest label width */
+    contentAlign?: 'left';
 }
 type CompoundedComponent = React.FC<DescriptionsProps> & {
     Item: typeof DescriptionsItem;

package/lib/descriptions/index.js

@@ -35,39 +35,87 @@ __export(descriptions_exports, {
 module.exports = __toCommonJS(descriptions_exports);
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
+var import_icons = require("@oceanbase/icons");
 var import_config_provider = __toESM(require("../config-provider"));
+var import_theme = __toESM(require("../theme"));
 var import_Item = __toESM(require("./Item"));
 var import_useItems = __toESM(require("./hooks/useItems"));
 var import_style = __toESM(require("./style"));
 __reExport(descriptions_exports, require("antd/es/descriptions"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Descriptions = ({
   children,
   bordered,
   layout = "horizontal",
   colon = layout === "vertical" ? false : void 0,
   items,
+  title,
   prefixCls: customizePrefixCls,
   className,
+  column = 3,
+  collapsible,
+  collapsed: outerCollapsed,
+  defaultCollapsed,
+  onCollapse,
+  contentAlign,
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const { token } = import_theme.default.useToken();
   const prefixCls = getPrefixCls("descriptions", customizePrefixCls);
   const typographyPrefixCls = getPrefixCls("typography", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls, typographyPrefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls, typographyPrefixCls);
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react.useState)(defaultCollapsed ?? false);
+  const collapsed = outerCollapsed !== void 0 ? outerCollapsed : internalCollapsed;
+  const handleCollapse = (0, import_react.useCallback)(() => {
+    const newCollapsed = !collapsed;
+    if (outerCollapsed === void 0) {
+      setInternalCollapsed(newCollapsed);
+    }
+    onCollapse == null ? void 0 : onCollapse(newCollapsed);
+  }, [collapsed, outerCollapsed, onCollapse]);
+  const newItems = (0, import_useItems.default)(items, children, bordered);
+  const descriptionsTitle = (0, import_react.useMemo)(() => {
+    if (!collapsible) {
+      return title;
+    }
+    if (!title) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-title-wrapper`, onClick: handleCollapse, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_icons.CaretRightFilled,
+        {
+          className: `${prefixCls}-collapsible-icon`,
+          style: {
+            transition: `transform ${token.motionDurationMid}`,
+            transform: collapsed ? void 0 : "rotate(90deg)",
+            color: token.colorIcon,
+            marginRight: token.marginXS
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
+    ] });
+  }, [collapsible, title, collapsed, prefixCls, token, handleCollapse]);
   const descriptionsCls = (0, import_classnames.default)(className, {
     [`${prefixCls}-vertical`]: layout === "vertical",
-    [`${prefixCls}-horizontal`]: layout === "horizontal"
+    [`${prefixCls}-horizontal`]: layout === "horizontal",
+    [`${prefixCls}-collapsible`]: collapsible,
+    [`${prefixCls}-collapsed`]: collapsible && collapsed,
+    [`${prefixCls}-content-align-left`]: contentAlign === "left"
   });
-  const newItems = (0, import_useItems.default)(items, children, bordered);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Descriptions,
       {
         layout,
         colon,
         bordered,
+        column,
         items: newItems,
+        title: descriptionsTitle,
         prefixCls: customizePrefixCls,
         className: descriptionsCls,
         ...restProps

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

@@ -1,15 +1,12 @@
 /// <reference types="react" />
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 import type { DescriptionsProps } from '..';
-export type DescriptionsToken = FullToken<'Alert'> & {
+export type DescriptionsToken = FullToken<'Descriptions'> & {
     typographyPrefixCls: string;
     typographyComponentCls: string;
 };
 export declare const genVerticalStyle: (size: DescriptionsProps['size'], token: Partial<DescriptionsToken>) => CSSObject;
 export declare const genDescriptionsStyle: GenerateStyle<DescriptionsToken>;
-declare const _default: (prefixCls: string, typographyPrefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, typographyPrefixCls: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;

package/lib/descriptions/style/index.js

@@ -29,7 +29,7 @@ var genVerticalStyle = (size, token) => {
   const { componentCls } = token;
   const paddingMap = {
     default: {
-      paddingIn: token.paddingXS,
+      paddingIn: token.paddingXXS,
       paddingOut: token.paddingLG
     },
     middle: {
@@ -54,18 +54,44 @@ var genVerticalStyle = (size, token) => {
         [`& > th, & > td`]: {
           paddingBottom: paddingConfig.paddingOut
         }
+      },
+      [`${componentCls}-item`]: {
+        [`${componentCls}-item-label`]: {
+          fontSize: token.fontSizeSM
+        }
       }
     }
   };
 };
 var genDescriptionsStyle = (token) => {
-  const { componentCls, typographyComponentCls } = token;
+  const { componentCls, typographyComponentCls, calc } = token;
   return {
     [`${componentCls}`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.margin
+      },
+      // collapsible title style
+      [`${componentCls}-title-wrapper`]: {
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        userSelect: "none",
+        [`${componentCls}-collapsible-icon`]: {
+          fontSize: token.fontSizeLG
+        }
+      },
       ...genVerticalStyle("default", token),
+      [`${componentCls}-row > th, ${componentCls}-row > td`]: {
+        paddingRight: token.paddingLG
+      },
+      [`${componentCls}-item-label`]: {
+        fontWeight: token.fontWeightWeak,
+        [`&${componentCls}-item-no-colon::after`]: {
+          display: "none"
+        }
+      },
       [`${componentCls}-item-container`]: {
         [`${componentCls}-item-content`]: {
-          paddingRight: 12,
           [`${typographyComponentCls}-edit-content`]: {
             insetInlineStart: 0,
             marginTop: 0,
@@ -75,15 +101,99 @@ var genDescriptionsStyle = (token) => {
       },
       [`${componentCls}-item-container:has(${`${typographyComponentCls}-edit-content`})`]: {
         alignItems: "center",
-        height: token.fontSize * token.lineHeight
+        height: calc(token.fontSize).mul(token.lineHeight).equal()
+      }
+    },
+    [`${componentCls}${componentCls}-middle`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.marginSM
+      },
+      ...genVerticalStyle("middle", token)
+    },
+    [`${componentCls}${componentCls}-small`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.marginXS
+      },
+      ...genVerticalStyle("small", token)
+    },
+    // collapsed state
+    [`${componentCls}${componentCls}-collapsed`]: {
+      [`${componentCls}-view`]: {
+        display: "none"
+      }
+    },
+    // contentAlign="left": label column auto width based on longest label
+    // For non-bordered mode: use CSS Grid to make label and content align across rows
+    [`${componentCls}${componentCls}-content-align-left:not(${componentCls}-bordered)`]: {
+      [`${componentCls}-view`]: {
+        display: "block"
+      },
+      // Make table, tbody, tr, td all transparent to grid layout
+      [`${componentCls}-view > table`]: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr"
+      },
+      [`${componentCls}-view > table > tbody`]: {
+        display: "contents"
+      },
+      [`${componentCls}-row`]: {
+        display: "contents"
+      },
+      [`${componentCls}-row > td${componentCls}-item`]: {
+        display: "contents"
+      },
+      [`${componentCls}-item-container`]: {
+        display: "contents"
+      },
+      [`${componentCls}-item-label`]: {
+        whiteSpace: "nowrap",
+        paddingBottom: token.padding,
+        paddingInlineEnd: token.paddingLG
+      },
+      [`${componentCls}-item-content`]: {
+        paddingBottom: token.padding
+      },
+      [`&${componentCls}-middle`]: {
+        [`${componentCls}-item-label`]: {
+          paddingBottom: token.paddingSM,
+          paddingInlineEnd: token.paddingLG
+        },
+        [`${componentCls}-item-content`]: {
+          paddingBottom: token.paddingSM
+        }
+      },
+      [`&${componentCls}-small`]: {
+        [`${componentCls}-title`]: {
+          fontSize: token.fontSize
+        },
+        [`${componentCls}-item-label`]: {
+          paddingBottom: token.paddingXS,
+          paddingInlineEnd: token.paddingLG
+        },
+        [`${componentCls}-item-content`]: {
+          paddingBottom: token.paddingXS
+        }
       }
     },
-    [`${componentCls}${componentCls}-middle`]: genVerticalStyle("middle", token),
-    [`${componentCls}${componentCls}-small`]: genVerticalStyle("small", token)
+    // For bordered mode: label and content are in separate th and td
+    [`${componentCls}${componentCls}-content-align-left${componentCls}-bordered`]: {
+      [`${componentCls}-view > table`]: {
+        tableLayout: "auto"
+      },
+      [`${componentCls}-row`]: {
+        [`& > th`]: {
+          whiteSpace: "nowrap",
+          width: 1
+        },
+        [`& > td`]: {
+          width: "100%"
+        }
+      }
+    }
   };
 };
 var style_default = (prefixCls, typographyPrefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Descriptions", (token) => {
+  const useStyle = (0, import_genComponentStyleHook.genStyleHooks)("Descriptions", (token) => {
     return [
       genDescriptionsStyle({
         ...token,