@oceanbase/design 1.0.0-alpha.4 → 1.0.0-alpha.6

package/lib/config-provider/index.js

@@ -45,7 +45,9 @@ 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"));
 __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);
@@ -57,8 +59,8 @@ var ExtendedConfigContext = import_react.default.createContext({
   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 getLocaleTokenValue = (mergedThemeToken, locale, tokenKey, tokenValue, tokenValueEn) => {
+  return tokenValue !== mergedThemeToken[tokenKey] ? { [tokenKey]: tokenValue } : ["en", "en-gb"].includes(locale.locale) ? { [tokenKey]: tokenValueEn } : {};
 };
 var ConfigProvider = ({
   children,
@@ -79,13 +81,43 @@ var ConfigProvider = ({
   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);
-  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();
@@ -154,9 +186,22 @@ var ConfigProvider = ({
       tabs: (0, import_lodash.merge)({}, parentContext.tabs, tabs),
       theme: (0, import_lodash.merge)({}, mergedTheme, {
         token: {
-          ...getLocaleTokenValue(mergedLocale, "fontFamily", fontFamily, import_default.fontFamilyEn),
-          ...getLocaleTokenValue(mergedLocale, "fontWeight", fontWeight, import_default.fontWeightEn),
           ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontFamily",
+            fontFamily,
+            import_default.fontFamilyEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeight",
+            fontWeight,
+            import_default.fontWeightEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
             mergedLocale,
             "fontWeightStrong",
             fontWeightStrong,
@@ -175,10 +220,13 @@ var ConfigProvider = ({
             // 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, {})
-          ] }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global.default, {}),
+            /* @__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, {})
+            ] })
+          ] })
         }
       )
     }

package/lib/descriptions/style/index.js

@@ -64,7 +64,7 @@ var genVerticalStyle = (size, token) => {
   };
 };
 var genDescriptionsStyle = (token) => {
-  const { componentCls, typographyComponentCls } = token;
+  const { componentCls, typographyComponentCls, calc } = token;
   return {
     [`${componentCls}`]: {
       ...genVerticalStyle("default", token),
@@ -80,7 +80,7 @@ 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`]: genVerticalStyle("middle", token),

package/lib/drawer/style/index.js

@@ -23,9 +23,10 @@ __export(style_exports, {
   genDrawerStyle: () => genDrawerStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genDrawerStyle = (token) => {
-  const { componentCls, antCls, fontSizeHeading3, colorSplit } = token;
+  const { componentCls, antCls, fontSizeHeading3, colorSplit, calc } = token;
   const contentPadding = token.paddingLG;
   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)";
@@ -35,7 +36,7 @@ var genDrawerStyle = (token) => {
       [`${componentCls}-content`]: {
         [`${componentCls}-header`]: {
           position: "relative",
-          padding: `${token.padding}px ${token.paddingLG}px`,
+          padding: `${(0, import_cssinjs.unit)(token.padding)} ${(0, import_cssinjs.unit)(token.paddingLG)}`,
           borderBottom: "none",
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure header box-shadow cover body content
@@ -53,8 +54,8 @@ var genDrawerStyle = (token) => {
             height: "1px",
             backgroundColor: colorSplit,
             // 使用负margin让分割线贯通到content边缘
-            marginLeft: `-${token.paddingLG}px`,
-            marginRight: `-${token.paddingLG}px`
+            marginLeft: calc(token.paddingLG).mul(-1).equal(),
+            marginRight: calc(token.paddingLG).mul(-1).equal()
           }
         },
         [`${componentCls}-header-shadow`]: {
@@ -71,7 +72,7 @@ var genDrawerStyle = (token) => {
         },
         [`${componentCls}-footer-container`]: {
           position: "sticky",
-          padding: `${token.padding}px ${token.paddingLG}px`,
+          padding: `${(0, import_cssinjs.unit)(token.padding)} ${(0, import_cssinjs.unit)(token.paddingLG)}`,
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure footer box-shadow cover body content
           zIndex: 10,

package/lib/empty/style/index.js

@@ -23,9 +23,10 @@ __export(style_exports, {
   genEmptyStyle: () => genEmptyStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genEmptyStyle = (token) => {
-  const { antCls, componentCls, colorTextTertiary, colorText, colorTextSecondary } = token;
+  const { antCls, componentCls, colorTextTertiary, colorText, colorTextSecondary, calc } = token;
   return {
     [`${componentCls}`]: {
       [`${componentCls}-image`]: {
@@ -59,7 +60,7 @@ var genEmptyStyle = (token) => {
             [`${antCls}-steps-item-icon`]: {
               height: token.controlHeightSM,
               width: token.controlHeightSM,
-              lineHeight: `${token.controlHeightSM}px`,
+              lineHeight: (0, import_cssinjs.unit)(token.controlHeightSM),
               backgroundColor: token.colorFillSecondary,
               // override default border color
               borderColor: token.colorFillSecondary,
@@ -73,9 +74,9 @@ var genEmptyStyle = (token) => {
                 color: colorText,
                 fontSize: token.fontSize,
                 fontWeight: token.fontWeightStrong,
-                lineHeight: `${token.controlHeightSM}px`,
+                lineHeight: (0, import_cssinjs.unit)(token.controlHeightSM),
                 "&::after": {
-                  top: token.controlHeightSM / 2
+                  top: calc(token.controlHeightSM).div(2).equal()
                 }
               },
               [`${antCls}-steps-item-description`]: {

package/lib/form/FormItem.d.ts

@@ -4,7 +4,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
 declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     useStatus: () => {
-        status?: "" | "success" | "warning" | "error" | "validating";
+        status?: "" | "warning" | "error" | "success" | "validating";
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/lib/form/style/index.js

@@ -25,7 +25,7 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genFormStyle = (token) => {
-  const { componentCls } = token;
+  const { componentCls, calc } = token;
   return {
     [componentCls]: {
       [`${componentCls}-item-extra`]: {
@@ -51,7 +51,7 @@ var genFormStyle = (token) => {
           paddingBottom: token.paddingXXS
         },
         [`${componentCls}-item-description`]: {
-          paddingBottom: token.paddingXXS + 2,
+          paddingBottom: calc(token.paddingXXS).add(2).equal(),
           fontSize: token.fontSizeSM,
           color: token.colorTextDescription
         }

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import './global.css';
 export * from 'antd';
 export { version } from '../package.json';
 export { default as Alert } from './alert';

package/lib/index.js

@@ -72,7 +72,6 @@ __export(src_exports, {
   version: () => import_package.version
 });
 module.exports = __toCommonJS(src_exports);
-var import_global = require("./global.css");
 __reExport(src_exports, require("antd"), module.exports);
 var import_package = require("../package.json");
 var import_alert = __toESM(require("./alert"));

package/lib/modal/style/index.js

@@ -32,11 +32,12 @@ var genModalStyle = (token) => {
     fontSizeHeading5,
     lineHeightHeading5,
     fontSizeHeading3,
-    colorSplit
+    colorSplit,
+    calc
   } = token;
   const top = 100;
   const bottom = 100;
-  const titleHeight = fontSizeHeading5 * lineHeightHeading5;
+  const titleHeight = calc(fontSizeHeading5).mul(lineHeightHeading5).equal();
   return {
     /* Modal */
     [`${componentCls}:not(${componentCls}-confirm):not(${componentCls}-progress)`]: {
@@ -64,13 +65,13 @@ var genModalStyle = (token) => {
             backgroundColor: colorSplit,
             // antd Modal content默认padding通常是24px，使用负margin让分割线贯通
             // 如果antd使用其他padding值，可能需要调整
-            marginLeft: `-${token.paddingLG}px`,
-            marginRight: `-${token.paddingLG}px`
+            marginLeft: calc(token.paddingLG).mul(-1).equal(),
+            marginRight: calc(token.paddingLG).mul(-1).equal()
           }
         },
         [`${componentCls}-body`]: {
           paddingTop: token.paddingLG,
-          marginInline: `-${token.marginLG}px`,
+          marginInline: calc(token.marginLG).mul(-1).equal(),
           paddingInline: token.paddingLG
         }
       },
@@ -142,7 +143,7 @@ var genModalStyle = (token) => {
           fontSize: fontSizeHeading3
         },
         [`${componentCls}-confirm-body > ${token.iconCls}`]: {
-          height: token.fontSizeHeading3 * token.lineHeight
+          height: calc(token.fontSizeHeading3).mul(token.lineHeight).equal()
         },
         [`${componentCls}-confirm-paragraph`]: {
           rowGap: token.marginSM

package/lib/radio/style/index.js

@@ -25,13 +25,14 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genRadioStyle = (token) => {
-  const { componentCls, radioSize, fontSize, fontSizeLG, lineHeight } = token;
+  const { componentCls, radioSize, fontSize, fontSizeLG, lineHeight, calc } = token;
+  const marginBottom = calc(calc(fontSize).mul(lineHeight).equal()).sub(radioSize || fontSizeLG).div(-2).equal();
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}`]: {
         alignSelf: "baseline",
         [`${componentCls}-inner`]: {
-          marginBottom: -(fontSize * lineHeight - (radioSize || fontSizeLG)) / 2
+          marginBottom
         }
       }
     }

package/lib/slider/style/index.js

@@ -23,21 +23,22 @@ __export(style_exports, {
   genSliderStyle: () => genSliderStyle
 });
 module.exports = __toCommonJS(style_exports);
-var import_lodash = require("lodash");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genSliderStyle = (token) => {
-  const { componentCls, dotSize = 8, handleSize = 10, handleLineWidth = 2 } = token;
+  const { componentCls, dotSize = 8, handleSize = 10, handleLineWidth = 2, calc } = token;
+  const dotSizeHalf = calc(dotSize).div(2).equal();
+  const handleOffset = calc(handleSize).add(calc(handleLineWidth).mul(2).equal()).div(2).equal();
   return {
     [`${componentCls}${componentCls}-horizontal`]: {
       [`${componentCls}-mark`]: {
         [`${componentCls}-mark-text[style*="left: 0%;"]`]: {
-          transform: `translateX(calc(0% - ${dotSize / 2}px)) !important`
+          transform: `translateX(calc(0% - ${dotSizeHalf})) !important`
         },
         [`${componentCls}-mark-text[style*="left: 100%;"]`]: {
-          transform: `translateX(calc(-100% + ${dotSize / 2}px)) !important`
+          transform: `translateX(calc(-100% + ${dotSizeHalf})) !important`
         },
         [`${componentCls}-mark-text[style="transform: translateX(-50%);"]`]: {
-          transform: `translateX(calc(0% - ${(handleSize + (0, import_lodash.toNumber)(handleLineWidth) * 2) / 2}px)) !important`
+          transform: `translateX(calc(0% - ${handleOffset})) !important`
         }
       }
     }

package/lib/spin/style/index.js

@@ -25,9 +25,9 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genSizeStyle = (spinDotSize, token) => {
-  const { componentCls, colorText } = token;
+  const { componentCls, colorText, calc } = token;
   const spinDotWidth = spinDotSize;
-  const spinDotHight = spinDotWidth * (295 / 397);
+  const spinDotHight = calc(spinDotWidth).mul(295).div(397).equal();
   return {
     // only work for oceanbase indicator
     [`&${componentCls}-oceanbase`]: {
@@ -43,12 +43,12 @@ var genSizeStyle = (spinDotSize, token) => {
   };
 };
 var genNestedSizeStyle = (spinDotSize, token) => {
-  const { componentCls, fontSize } = token;
+  const { componentCls, fontSize, calc } = token;
   const spinDotWidth = spinDotSize;
-  const spinDotHight = spinDotWidth * (295 / 397);
-  const dotMarginLeft = -spinDotWidth / 2;
-  const dotMarginTop = -spinDotHight / 2;
-  const textPaddingTop = (spinDotHight - fontSize) / 2 + 2;
+  const spinDotHight = calc(spinDotWidth).mul(295).div(397).equal();
+  const dotMarginLeft = calc(spinDotWidth).div(-2).equal();
+  const dotMarginTop = calc(spinDotHight).div(-2).equal();
+  const textPaddingTop = calc(spinDotHight).sub(fontSize).div(2).add(2).equal();
   return {
     // only work for oceanbase indicator
     // `& > ${componentCls}-oceanbase` is compatible with double .ant-spin like Table loading
@@ -61,7 +61,7 @@ var genNestedSizeStyle = (spinDotSize, token) => {
         paddingTop: textPaddingTop
       },
       [`&${componentCls}-show-text ${componentCls}-dot`]: {
-        marginTop: dotMarginTop - 10
+        marginTop: calc(dotMarginTop).sub(10).equal()
       }
     }
   };
@@ -85,6 +85,7 @@ var genSpinStyle = (token) => {
 };
 var style_default = (prefixCls) => {
   const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Spin", (token) => {
+    const { calc } = token;
     return [
       genSpinStyle({
         ...token,
@@ -92,11 +93,11 @@ var style_default = (prefixCls) => {
         // spinDotSize: (token.controlHeightLG / 2) * ratio,
         // spinDotSizeSM: token.controlHeightLG * 0.35 * ratio,
         // spinDotSizeLG: token.controlHeight * ratio,
-        spinDotSize: token.controlHeight * 1.75,
+        spinDotSize: calc(token.controlHeight).mul(1.75).equal(),
         // 56,
-        spinDotSizeSM: token.controlHeight * 1.125,
+        spinDotSizeSM: calc(token.controlHeight).mul(1.125).equal(),
         // 36
-        spinDotSizeLG: token.controlHeight * 2.25
+        spinDotSizeLG: calc(token.controlHeight).mul(2.25).equal()
         // 72
       })
     ];

package/lib/style/global.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import 'antd/dist/reset.css';
+declare const GlobalStyle: React.FC;
+export { GlobalStyle };
+export default GlobalStyle;

package/lib/style/global.js

@@ -0,0 +1,101 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/style/global.tsx
+var global_exports = {};
+__export(global_exports, {
+  GlobalStyle: () => GlobalStyle,
+  default: () => global_default
+});
+module.exports = __toCommonJS(global_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = __toESM(require("../theme"));
+var import_Inter = __toESM(require("../fonts/Inter.woff2"));
+var import_Consolas = __toESM(require("../fonts/Consolas.woff2"));
+var import_HelveticaNeue = __toESM(require("../fonts/HelveticaNeue.woff2"));
+var import_reset = require("antd/dist/reset.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var genGlobalStyle = (token) => {
+  return [
+    // Priority: local font > self-hosting font > remote font
+    {
+      "@font-face": {
+        fontFamily: "'Inter'",
+        src: `local('Inter'), url(${import_Inter.default}) format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2') format('woff2')`,
+        fontDisplay: "swap"
+      }
+    },
+    {
+      "@font-face": {
+        fontFamily: "'Consolas'",
+        src: `local('Consolas'), url(${import_Consolas.default}) format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2') format('woff2')`,
+        fontDisplay: "swap"
+      }
+    },
+    {
+      "@font-face": {
+        fontFamily: "'Helvetica Neue'",
+        src: `local('Helvetica Neue'), url(${import_HelveticaNeue.default}) format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2') format('woff2')`,
+        fontDisplay: "swap"
+      }
+    },
+    // Global element styles
+    {
+      "pre, code, kbd, samp": {
+        fontFamily: token.fontFamilyCode
+      },
+      "*": {
+        scrollbarColor: `${token.colorFillSecondary} transparent`
+      },
+      ".rc-virtual-list-scrollbar-thumb": {
+        background: `${token.colorFillSecondary} !important`
+      }
+    }
+  ];
+};
+var GlobalStyle = () => {
+  const { theme, token } = import_theme.default.useToken();
+  const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+    {
+      theme,
+      token,
+      path: ["global"],
+      hashId: "",
+      // Empty hashId for global styles
+      order: -1e3
+      // Inject before other styles
+    },
+    () => genGlobalStyle(token)
+  );
+  return wrapSSR(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}));
+};
+var global_default = GlobalStyle;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStyle
+});

package/lib/style/reset.css

@@ -1 +1,2 @@
-@import '~antd/dist/reset.css';
+/* antd/dist/reset.css is imported in global.tsx */
+/* reserve this file for compatibility with antd */

package/lib/table/style/index.js

@@ -23,6 +23,7 @@ __export(style_exports, {
   genTableStyle: () => genTableStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTableStyle = (token) => {
   const {
@@ -38,9 +39,9 @@ var genTableStyle = (token) => {
     colorBorderSecondary,
     padding,
     marginLG,
-    marginXS
+    marginXS,
+    calc
   } = token;
-  console.log(token.fontWeight);
   return {
     // 表格通用样式
     [`${componentCls}-wrapper ${componentCls}`]: {
@@ -93,7 +94,7 @@ var genTableStyle = (token) => {
         // empty style
         [`${componentCls}-placeholder td`]: {},
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 360 - token.paddingSM * 2,
+          minHeight: calc(360).sub(calc(token.paddingSM).mul(2).equal()).equal(),
           display: "flex",
           justifyContent: "center",
           alignItems: "center"
@@ -123,7 +124,7 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}${componentCls}-middle`]: {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 260 - token.paddingXS * 2
+          minHeight: calc(260).sub(calc(token.paddingXS).mul(2).equal()).equal()
         }
       }
     },
@@ -131,14 +132,14 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}${componentCls}-small`]: {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 160 - token.paddingXXS * 2
+          minHeight: calc(160).sub(calc(token.paddingXXS).mul(2).equal()).equal()
         }
       }
     },
     // 带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
       [`${componentCls}-footer`]: {
-        borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
+        borderRadius: `0px 0px ${(0, import_cssinjs.unit)(token.borderRadiusLG)} ${(0, import_cssinjs.unit)(token.borderRadiusLG)}`
       }
     },
     // 带内部边框的表格样式
@@ -201,15 +202,15 @@ var genTableStyle = (token) => {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
-              marginLeft: token.marginXL + token.lineWidth * 2
+              marginLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
             },
             [`& > *${componentCls}-expanded-row-fixed`]: {
-              paddingLeft: token.marginXL + token.lineWidth * 2 + token.padding
+              paddingLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal()
             }
           },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.lineWidth * 2
+            marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).equal()
           }
         }
       },
@@ -217,7 +218,7 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.lineWidth * 2 + token.margin
+            marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
           }
         }
       }
@@ -229,15 +230,15 @@ var genTableStyle = (token) => {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
-              marginLeft: token.marginXL + token.marginXL + token.lineWidth * 2
+              marginLeft: calc(token.marginXL).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
             },
             [`& > *${componentCls}-expanded-row-fixed`]: {
-              paddingLeft: token.marginXL + token.marginXL + token.lineWidth * 2 + token.padding
+              paddingLeft: calc(token.marginXL).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal()
             }
           },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.marginXL + token.lineWidth * 2
+            marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
           }
         }
       },
@@ -245,7 +246,7 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin
+            marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
           }
         }
       }
@@ -263,7 +264,7 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}-pagination`]: {
         [`&${antCls}-pagination`]: {
-          padding: `${padding}px 0`,
+          padding: `${(0, import_cssinjs.unit)(padding)} 0`,
           margin: "0 !important"
         },
         // 批量操作栏样式
@@ -276,7 +277,7 @@ var genTableStyle = (token) => {
             color: colorTextSecondary,
             fontWeight: token.fontWeightStrong,
             [`${componentCls}-batch-operation-selection-count`]: {
-              margin: `0 ${marginXS}px`,
+              margin: `0 ${(0, import_cssinjs.unit)(marginXS)}`,
               color: colorLink
             }
           }

package/lib/theme/compact.d.ts

@@ -1,5 +1,5 @@
 declare const compactTheme: {
-    token: import("antd/es/theme/internal").AliasToken;
+    token: import("antd/es/theme/internal").SeedToken;
     components: {
         InputNumber: {
             handleVisible: boolean;