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

package/lib/card/index.js

@@ -42,12 +42,14 @@ var import_util2 = require("../_util");
 var import_style = __toESM(require("./style"));
 __reExport(card_exports, require("antd/es/card/Card"), module.exports);
 __reExport(card_exports, require("antd/es/card"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Card = import_react.default.forwardRef(
   ({
     children,
     size,
     title,
     tabList,
+    tabProps,
     divided: outerDivided,
     prefixCls: customizePrefixCls,
     bodyStyle,
@@ -74,26 +76,33 @@ var Card = import_react.default.forwardRef(
       if (!(0, import_util.isNullValue)(item.tag)) {
         return {
           ...item,
-          tab: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.tab, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${tabsPrefixCls}-tab-tag` }, item.tag))
+          tab: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { size: 4, children: [
+            item.tab,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tag, { bordered: false, className: `${tabsPrefixCls}-tab-tag`, children: item.tag })
+          ] })
         };
       }
       return item;
     });
     return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_antd.Card,
         {
           ref,
           size,
           title,
           tabList: newTabList,
+          tabProps: {
+            size: "middle",
+            ...tabProps
+          },
           prefixCls: customizePrefixCls,
           bodyStyle,
           styles,
           className: cardCls,
-          ...restProps
-        },
-        children
+          ...restProps,
+          children
+        }
       )
     );
   }

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

@@ -1,6 +1,6 @@
 /// <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';
 export type CardToken = FullToken<'Card'> & {
     tabsComponentCls: string;
     tabsPrefixCls: string;

package/lib/card/style/index.js

@@ -62,6 +62,16 @@ var genCardStyle = (token) => {
       // nested Card style
       [`${componentCls}:not(${componentCls}-bordered):not(${componentCls}-type-inner)`]: {
         boxShadow: "none"
+      },
+      // nested and bordered Card radius
+      [`${componentCls}${componentCls}-bordered`]: {
+        borderRadius: token.borderRadiusLG - 2,
+        [`${componentCls}${componentCls}-bordered`]: {
+          borderRadius: token.borderRadius,
+          [`${componentCls}${componentCls}-bordered`]: {
+            borderRadius: token.borderRadiusSM
+          }
+        }
       }
     },
     [`${componentCls}${componentCls}-no-divider`]: {

package/lib/checkbox/index.js

@@ -39,6 +39,7 @@ var import_react = __toESM(require("react"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_style = __toESM(require("./style"));
 __reExport(checkbox_exports, require("antd/es/checkbox"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var InternalCheckbox = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
@@ -46,7 +47,7 @@ var InternalCheckbox = import_react.default.forwardRef(
     const { wrapSSR } = (0, import_style.default)(prefixCls);
     const checkboxCls = (0, import_classnames.default)(className);
     return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_antd.Checkbox,
         {
           ref,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type CheckboxToken = FullToken<'Checkbox'>;
 export declare const genCheckboxStyle: GenerateStyle<CheckboxToken>;
 declare const _default: (prefixCls: string) => {

package/lib/config-provider/DefaultRenderEmpty.js

@@ -32,9 +32,10 @@ __export(DefaultRenderEmpty_exports, {
   default: () => DefaultRenderEmpty_default
 });
 module.exports = __toCommonJS(DefaultRenderEmpty_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import__ = require(".");
 var import_empty = __toESM(require("../empty"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var DefaultRenderEmpty = (props) => {
   const { componentName } = props;
   const { getPrefixCls } = (0, import_react.useContext)(import__.ConfigContext);
@@ -45,9 +46,9 @@ var DefaultRenderEmpty = (props) => {
     case "Cascader":
     case "Transfer":
     case "Mentions":
-      return /* @__PURE__ */ import_react.default.createElement(import_empty.default, { image: import_empty.default.PRESENTED_IMAGE_SIMPLE, className: `${prefix}-small` });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.default, { image: import_empty.default.PRESENTED_IMAGE_SIMPLE, className: `${prefix}-small` });
     default:
-      return /* @__PURE__ */ import_react.default.createElement(import_empty.default, { image: import_empty.default.PRESENTED_IMAGE_SIMPLE });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.default, { image: import_empty.default.PRESENTED_IMAGE_SIMPLE });
   }
 };
 var DefaultRenderEmpty_default = DefaultRenderEmpty;

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

@@ -1 +1,12 @@
+import type { ThemeConfig as AntThemeConfig, MappingAlgorithm } from 'antd';
+import type { AliasToken, OverrideToken } from '../theme/interface';
 export * from 'antd/es/config-provider/context';
+type ComponentsConfig = {
+    [key in keyof OverrideToken]?: OverrideToken[key] & {
+        algorithm?: boolean | MappingAlgorithm | MappingAlgorithm[];
+    };
+};
+export interface ThemeConfig extends AntThemeConfig {
+    token?: Partial<AliasToken>;
+    components?: ComponentsConfig;
+}

package/lib/config-provider/index.js

@@ -40,6 +40,7 @@ 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"));
@@ -50,11 +51,15 @@ __reExport(config_provider_exports, require("antd/es/config-provider/context"),
 __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 = (locale, tokenKey, tokenValue, tokenValueEn) => {
+  return tokenValue !== import_default.default.token[tokenKey] ? { [tokenKey]: tokenValue } : ["en", "en-gb"].includes(locale.locale) ? { [tokenKey]: tokenValueEn } : {};
+};
 var ConfigProvider = ({
   children,
   theme,
@@ -71,7 +76,7 @@ var ConfigProvider = ({
   appProps,
   ...restProps
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   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);
@@ -85,10 +90,12 @@ var ConfigProvider = ({
   );
   const { token } = import_theme.default.useToken();
   const fontFamily = ((_a = mergedTheme.token) == null ? void 0 : _a.fontFamily) || token.fontFamily;
+  const fontWeight = ((_b = mergedTheme.token) == null ? void 0 : _b.fontWeight) || token.fontWeight;
+  const fontWeightStrong = ((_c = mergedTheme.token) == null ? void 0 : _c.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 +103,7 @@ var ConfigProvider = ({
       collapse: (0, import_lodash.merge)(
         {},
         {
-          expandIcon: ({ isActive }) => /* @__PURE__ */ import_react.default.createElement(import_icons.CaretRightOutlined, { rotate: isActive ? 90 : 0 })
+          expandIcon: ({ isActive }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, { rotate: isActive ? 90 : 0 })
         },
         parentContext.collapse,
         collapse
@@ -113,31 +120,35 @@ var ConfigProvider = ({
       table: (0, import_lodash.merge)({}, 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(mergedLocale, "fontFamily", fontFamily, import_default.fontFamilyEn),
+          ...getLocaleTokenValue(mergedLocale, "fontWeight", fontWeight, import_default.fontWeightEn),
+          ...getLocaleTokenValue(
+            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: ((_d = parentContext.pagination) == null ? void 0 : _d.showSizeChanger) ? false : hideOnSinglePage !== void 0 ? hideOnSinglePage : parentExtendedContext.hideOnSinglePage,
+            // inject static function to outermost ConfigProvider only
+            injectStaticFunction: false
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps, children: /* @__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.d.ts

@@ -5,17 +5,17 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
     key?: React.Key;
     label?: React.ReactNode;
     span?: number | "filled" | {
-        xxl?: number;
-        xl?: number;
-        lg?: number;
-        md?: number;
-        sm?: number;
         xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        xxl?: number;
     };
     style?: React.CSSProperties;
-    className?: string;
     classNames?: Partial<Record<"label" | "content", string>>;
     styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
+    className?: string;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

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.js

@@ -35,12 +35,13 @@ __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_config_provider = __toESM(require("../config-provider"));
 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,
@@ -61,7 +62,7 @@ var Descriptions = ({
   });
   const newItems = (0, import_useItems.default)(items, children, bordered);
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Descriptions,
       {
         layout,

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

@@ -1,6 +1,6 @@
 /// <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'> & {
     typographyPrefixCls: string;

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,6 +54,11 @@ var genVerticalStyle = (size, token) => {
         [`& > th, & > td`]: {
           paddingBottom: paddingConfig.paddingOut
         }
+      },
+      [`${componentCls}-item`]: {
+        [`${componentCls}-item-label`]: {
+          fontSize: token.fontSizeSM
+        }
       }
     }
   };

package/lib/drawer/index.js

@@ -43,9 +43,11 @@ var import_button = __toESM(require("../button"));
 var import_en_US = __toESM(require("../locale/en-US"));
 var import_style = __toESM(require("./style"));
 __reExport(drawer_exports, require("antd/es/drawer"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Drawer = ({
   locale: customLocale,
   children,
+  loading,
   onOk,
   onClose,
   onCancel,
@@ -75,24 +77,25 @@ var Drawer = ({
   const [contentElment, setContentElement] = (0, import_react.useState)(null);
   (0, import_ahooks.useSize)(contentElment);
   const scroll = (0, import_ahooks.useScroll)(contentElment);
-  const isScroll = (contentElment == null ? void 0 : contentElment.scrollHeight) !== (contentElment == null ? void 0 : contentElment.clientHeight);
-  const isStartScroll = scroll.top > 0;
-  const isTotalScroll = Math.abs(
+  const isScroll = !loading && (contentElment == null ? void 0 : contentElment.scrollHeight) !== (contentElment == null ? void 0 : contentElment.clientHeight);
+  const isStartScroll = !loading && scroll.top > 0;
+  const isTotalScroll = !loading && Math.abs(
     ((contentElment == null ? void 0 : contentElment.scrollHeight) || 0) - ((contentElment == null ? void 0 : contentElment.clientHeight) || 0) - ((contentElment == null ? void 0 : contentElment.scrollTop) || 0)
   ) < 1;
   const handleCancel = onCancel || onClose;
   const showFooter = !!(footer || onOk) && footer !== false && footer !== null;
   const drawerCls = (0, import_classnames.default)(
-    prefixCls,
     {
+      [`${prefixCls}-loading`]: loading,
       [`${prefixCls}-with-footer`]: showFooter
     },
     rootClassName
   );
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_antd.Drawer,
       {
+        loading,
         destroyOnClose: true,
         onClose: handleCancel,
         rootClassName: drawerCls,
@@ -103,34 +106,42 @@ var Drawer = ({
           })
         },
         styles: (0, import_lodash.omit)(styles, ["body", "footer"]),
-        ...restProps
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          ref: (element) => {
-            setContentElement(element);
-          },
-          className: `${prefixCls}-body-content`,
-          style: {
-            ...bodyStyle,
-            ...styles == null ? void 0 : styles.body
-          }
-        },
-        children
-      ),
-      showFooter && // footer className should not be `${prefixCls}-footer` to avoid conflicts with antd
-      // ref: https://github.com/ant-design/ant-design/blob/master/components/drawer/style/index.ts#L214
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(`${prefixCls}-footer-container`, {
-            [`${prefixCls}-footer-container-shadow`]: isScroll && !isTotalScroll
-          }),
-          style: styles == null ? void 0 : styles.footer
-        },
-        (0, import_react.isValidElement)(footer) ? footer : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-footer-content` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: onOk, type: "primary", loading: confirmLoading, ...okButtonProps }, okText || (drawerLocale == null ? void 0 : drawerLocale.okText)), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleCancel }, cancelText || (drawerLocale == null ? void 0 : drawerLocale.cancelText))), footerExtra)
-      )
+        ...restProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: (element) => {
+                setContentElement(element);
+              },
+              className: `${prefixCls}-body-content`,
+              style: {
+                ...bodyStyle,
+                ...styles == null ? void 0 : styles.body
+              },
+              children
+            }
+          ),
+          showFooter && // footer className should not be `${prefixCls}-footer` to avoid conflicts with antd
+          // ref: https://github.com/ant-design/ant-design/blob/master/components/drawer/style/index.ts#L214
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_classnames.default)(`${prefixCls}-footer-container`, {
+                [`${prefixCls}-footer-container-shadow`]: isScroll && !isTotalScroll
+              }),
+              style: styles == null ? void 0 : styles.footer,
+              children: (0, import_react.isValidElement)(footer) ? footer : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-footer-content`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, { onClick: onOk, type: "primary", loading: confirmLoading, ...okButtonProps, children: okText || (drawerLocale == null ? void 0 : drawerLocale.okText) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, { onClick: handleCancel, children: cancelText || (drawerLocale == null ? void 0 : drawerLocale.cancelText) })
+                ] }),
+                footerExtra
+              ] })
+            }
+          )
+        ]
+      }
     )
   );
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type DrawerToken = FullToken<'Drawer'>;
 export declare const genDrawerStyle: GenerateStyle<DrawerToken>;
 declare const _default: (prefixCls: string) => {

package/lib/drawer/style/index.js

@@ -25,7 +25,8 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genDrawerStyle = (token) => {
-  const { componentCls } = token;
+  const { componentCls, antCls } = token;
+  const contentPadding = `${token.paddingXS}px ${token.paddingLG}px ${token.paddingLG}px ${token.paddingLG}px`;
   const boxShadowBottom = "0 2px 4px 0 rgba(54,69,99,0.04), 0 1px 6px -1px rgba(54,69,99,0.04), 0 1px 2px 0 rgba(54,69,99,0.06)";
   const boxShadowTop = "0 -2px 4px 0 rgba(54,69,99,0.04), 0 -1px 6px -1px rgba(54,69,99,0.04), 0 -1px 2px 0 rgba(54,69,99,0.06)";
   return {
@@ -33,7 +34,7 @@ var genDrawerStyle = (token) => {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
         [`${componentCls}-header`]: {
-          padding: "16px 24px",
+          padding: `${token.padding}px ${token.paddingLG}px`,
           borderBottom: "none",
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure header box-shadow cover body content
@@ -48,12 +49,12 @@ var genDrawerStyle = (token) => {
           flexDirection: "column"
         },
         [`${componentCls}-body-content`]: {
-          padding: "8px 24px 24px 24px",
+          padding: contentPadding,
           overflow: "auto"
         },
         [`${componentCls}-footer-container`]: {
           position: "sticky",
-          padding: "16px 24px",
+          padding: `${token.padding}px ${token.paddingLG}px`,
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure footer box-shadow cover body content
           zIndex: 10,
@@ -69,11 +70,16 @@ var genDrawerStyle = (token) => {
         }
       }
     },
+    [`${componentCls}${componentCls}-loading`]: {
+      [`${componentCls}-body > ${antCls}-skeleton`]: {
+        padding: contentPadding
+      }
+    },
     [`${componentCls}${componentCls}-with-footer`]: {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
         [`${componentCls}-body-content`]: {
-          padding: "8px 24px 8px 24px"
+          padding: `${token.paddingXS}px ${token.paddingLG}px`
         }
       }
     }

package/lib/dropdown/dropdown-button.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/dropdown/dropdown-button.tsx
@@ -32,11 +22,11 @@ __export(dropdown_button_exports, {
   default: () => dropdown_button_default
 });
 module.exports = __toCommonJS(dropdown_button_exports);
-var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_icons = require("@oceanbase/icons");
-var DropdownButton = ({ icon = /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null), ...restProps }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown.Button, { icon, ...restProps });
+var import_jsx_runtime = require("react/jsx-runtime");
+var DropdownButton = ({ icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownOutlined, {}), ...restProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown.Button, { icon, ...restProps });
 };
 DropdownButton.__ANT_BUTTON = true;
 var dropdown_button_default = DropdownButton;

package/lib/dropdown/index.js

@@ -33,12 +33,12 @@ __export(dropdown_exports, {
   default: () => dropdown_default
 });
 module.exports = __toCommonJS(dropdown_exports);
-var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_dropdown_button = __toESM(require("./dropdown-button"));
 __reExport(dropdown_exports, require("antd/es/dropdown"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown, { ...props });
 };
 Dropdown._InternalPanelDoNotUseOrYouWillBeFired = import_antd.Dropdown._InternalPanelDoNotUseOrYouWillBeFired;
 Dropdown.Button = import_dropdown_button.default;