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

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,10 +23,11 @@ __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 } = token;
-  const contentPadding = `${token.paddingXS}px ${token.paddingLG}px ${token.paddingLG}px ${token.paddingLG}px`;
+  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)";
   return {
@@ -34,11 +35,28 @@ var genDrawerStyle = (token) => {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
         [`${componentCls}-header`]: {
-          padding: `${token.padding}px ${token.paddingLG}px`,
+          position: "relative",
+          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
-          zIndex: 10
+          zIndex: 10,
+          [`${componentCls}-title`]: {
+            fontSize: fontSizeHeading3
+          },
+          // 标题栏底部增加分割线
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "1px",
+            backgroundColor: colorSplit,
+            // 使用负margin让分割线贯通到content边缘
+            marginLeft: calc(token.paddingLG).mul(-1).equal(),
+            marginRight: calc(token.paddingLG).mul(-1).equal()
+          }
         },
         [`${componentCls}-header-shadow`]: {
           boxShadow: boxShadowBottom
@@ -54,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,
@@ -65,6 +83,10 @@ var genDrawerStyle = (token) => {
             alignItems: "center"
           }
         },
+        // footer 跟随内容或滚动到底部时，padding-top 设为 0
+        [`${componentCls}-footer-container-no-padding-top`]: {
+          paddingTop: 0
+        },
         [`${componentCls}-footer-container-shadow`]: {
           boxShadow: boxShadowTop
         }
@@ -79,7 +101,7 @@ var genDrawerStyle = (token) => {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
         [`${componentCls}-body-content`]: {
-          padding: `${token.paddingXS}px ${token.paddingLG}px`
+          paddingBottom: token.paddingXS
         }
       }
     }

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

@@ -17,6 +17,7 @@ export type LabelTooltipType = WrapperTooltipProps | React.ReactNode;
 export interface FormItemProps extends AntFormItemProps {
     tooltip?: WrapperTooltipProps | ReactNode;
     action?: ReactNode;
+    description?: ReactNode;
 }
 type CompoundedComponent = React.FC<FormItemProps> & {
     useStatus: typeof AntFormItem.useStatus;

package/lib/form/FormItem.js

@@ -49,6 +49,7 @@ var FormItem = ({
   label,
   tooltip,
   action,
+  description,
   layout: externalLayout,
   prefixCls: customizePrefixCls,
   className,
@@ -58,7 +59,9 @@ var FormItem = ({
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("form", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const formItemCls = (0, import_classnames.default)(className);
+  const formItemCls = (0, import_classnames.default)(className, {
+    [`${prefixCls}-item-has-description`]: !!description
+  });
   const {
     layout: contextLayout,
     // compatible with vertical for version < antd 27.0.0
@@ -80,6 +83,8 @@ var FormItem = ({
       ...restTooltipProps
     };
   }
+  const isVertical = layout === "vertical" || vertical;
+  const descriptionContent = description && isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-item-description`, children: description }) : null;
   return wrapSSR(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       AntFormItem,
@@ -94,7 +99,10 @@ var FormItem = ({
         prefixCls: customizePrefixCls,
         className: formItemCls,
         ...restProps,
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          descriptionContent,
+          children
+        ] })
       }
     )
   );

package/lib/form/style/index.js

@@ -25,8 +25,14 @@ __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`]: {
+        paddingTop: token.paddingXXS,
+        fontSize: token.fontSizeSM
+      }
+    },
     [`${componentCls}${componentCls}-vertical`]: {
       [`${componentCls}-item:not(${componentCls}-item-horizontal)`]: {
         [`${componentCls}-item-label > label`]: {
@@ -36,6 +42,19 @@ var genFormStyle = (token) => {
             right: 0
           }
         }
+      },
+      [`${componentCls}-item-has-description`]: {
+        [`${componentCls}-item-control-input`]: {
+          minHeight: "auto"
+        },
+        [`${componentCls}-item-label`]: {
+          paddingBottom: token.paddingXXS
+        },
+        [`${componentCls}-item-description`]: {
+          paddingBottom: calc(token.paddingXXS).add(2).equal(),
+          fontSize: token.fontSizeSM,
+          color: token.colorTextDescription
+        }
       }
     }
   };

package/lib/input-number/index.d.ts

@@ -8,7 +8,8 @@ export interface InputNumberLocale {
 export interface InputNumberProps extends AntInputNumberProps {
     locale?: InputNumberLocale;
 }
-type CompoundedComponent = React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<HTMLInputElement>> & {
+type InputNumberRef = React.ComponentRef<typeof AntInputNumber>;
+type CompoundedComponent = React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputNumberRef>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: typeof AntInputNumber._InternalPanelDoNotUseOrYouWillBeFired;
 };
 declare const InputNumber: CompoundedComponent;

package/lib/locale/ja-JP.d.ts

@@ -0,0 +1,3 @@
+import type { Locale } from '.';
+declare const _default: Locale;
+export default _default;

package/lib/locale/ja-JP.js

@@ -0,0 +1,60 @@
+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/locale/ja-JP.ts
+var ja_JP_exports = {};
+__export(ja_JP_exports, {
+  default: () => ja_JP_default
+});
+module.exports = __toCommonJS(ja_JP_exports);
+var import_ja_JP = __toESM(require("antd/es/locale/ja_JP"));
+var ja_JP_default = {
+  ...import_ja_JP.default,
+  global: {
+    ...import_ja_JP.default.global,
+    inputPlaceholder: "入力してください"
+  },
+  Pagination: {
+    ...import_ja_JP.default.Pagination,
+    total: "合計 ${total} 件"
+  },
+  Drawer: {
+    okText: "確定",
+    cancelText: "キャンセル"
+  },
+  Table: {
+    ...import_ja_JP.default.Table,
+    batchOperationBar: {
+      selected: "選択済み",
+      object: "件",
+      cancel: "キャンセル",
+      collapse: "折りたたむ",
+      open: "展開"
+    }
+  }
+};

package/lib/modal/Modal.js

@@ -33,6 +33,7 @@ __export(Modal_exports, {
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_antd = require("antd");
+var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
 var import_config_provider = __toESM(require("../config-provider"));
@@ -67,12 +68,31 @@ var Modal = ({
     )
   );
 };
-Modal.info = (props) => import_static_function.modal.info(props);
-Modal.success = (props) => import_static_function.modal.success(props);
-Modal.error = (props) => import_static_function.modal.error(props);
-Modal.warning = (props) => import_static_function.modal.warning(props);
-Modal.warn = (props) => import_static_function.modal.warning(props);
-Modal.confirm = (props) => import_static_function.modal.confirm(props);
+Modal.info = (props) => import_static_function.modal.info({
+  // use outlined icon
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoCircleOutlined, {}),
+  ...props
+});
+Modal.success = (props) => import_static_function.modal.success({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleOutlined, {}),
+  ...props
+});
+Modal.error = (props) => import_static_function.modal.error({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleOutlined, {}),
+  ...props
+});
+Modal.warning = (props) => import_static_function.modal.warning({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {}),
+  ...props
+});
+Modal.warn = (props) => import_static_function.modal.warning({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {}),
+  ...props
+});
+Modal.confirm = (props) => import_static_function.modal.confirm({
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {}),
+  ...props
+});
 Modal.useModal = import_antd.Modal.useModal;
 Modal.destroyAll = import_antd.Modal.destroyAll;
 Modal.config = import_antd.Modal.config;

package/lib/modal/style/index.js

@@ -28,25 +28,60 @@ var genModalStyle = (token) => {
   const {
     antCls,
     componentCls,
-    marginXXS,
     marginLG,
-    paddingMD,
-    borderRadius,
-    controlHeight,
     fontSizeHeading5,
-    lineHeightHeading5
+    lineHeightHeading5,
+    fontSizeHeading3,
+    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)`]: {
-      [`${componentCls}-header`]: {
-        marginBottom: marginLG
+    [`${componentCls}:not(${componentCls}-confirm):not(${componentCls}-progress)`]: {
+      [`${componentCls}-content`]: {
+        paddingBlock: token.padding,
+        [`${componentCls}-close`]: {
+          marginTop: token.marginXXS,
+          marginRight: token.marginXXS
+        },
+        [`${componentCls}-header`]: {
+          position: "relative",
+          marginBottom: 0,
+          paddingBottom: token.padding,
+          [`${componentCls}-title`]: {
+            fontSize: fontSizeHeading3
+          },
+          // 使用伪元素创建贯通的分割线
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "1px",
+            backgroundColor: colorSplit,
+            // antd Modal content默认padding通常是24px，使用负margin让分割线贯通
+            // 如果antd使用其他padding值，可能需要调整
+            marginLeft: calc(token.paddingLG).mul(-1).equal(),
+            marginRight: calc(token.paddingLG).mul(-1).equal()
+          }
+        },
+        [`${componentCls}-body`]: {
+          paddingTop: token.paddingLG,
+          marginInline: calc(token.marginLG).mul(-1).equal(),
+          paddingInline: token.paddingLG
+        }
       },
       [`${componentCls}-footer`]: {
-        marginTop: marginLG,
+        paddingTop: token.paddingLG,
+        marginTop: 0,
+        [`${antCls}-btn`]: {
+          height: 28,
+          minHeight: 28
+        },
         [`${componentCls}-footer-content`]: {
           display: "flex",
           justifyContent: "space-between",
@@ -62,12 +97,16 @@ var genModalStyle = (token) => {
     /* Modal.Progress */
     [`${componentCls}${componentCls}-progress`]: {
       [`${componentCls}-content`]: {
-        padding: `${token.paddingXL + token.padding}px ${token.paddingLG + token.padding}px`,
+        padding: token.paddingLG,
+        [`${componentCls}-close`]: {
+          marginTop: token.marginSM,
+          marginRight: token.marginXXS
+        },
         [`${componentCls}-header`]: {
           textAlign: "center",
           marginBottom: token.marginXXL,
           [`${componentCls}-title`]: {
-            fontSize: token.fontSizeHeading4
+            fontSize: fontSizeHeading3
           }
         },
         [`${componentCls}-body`]: {
@@ -86,18 +125,39 @@ var genModalStyle = (token) => {
           }
         },
         [`${componentCls}-footer`]: {
-          textAlign: "center"
+          textAlign: "center",
+          [`${antCls}-btn`]: {
+            height: 28,
+            minHeight: 28
+          }
         }
       }
     },
     /* Modal.method() */
     [`${componentCls}-confirm`]: {
-      [`${componentCls}-body ${componentCls}-confirm-title +${componentCls}-confirm-content`]: {
-        marginBlockStart: marginXXS,
-        color: token.colorTextSecondary
+      [`${componentCls}-content`]: {
+        padding: token.paddingLG
       },
-      [`${componentCls}-confirm-btns`]: {
-        marginTop: marginLG
+      [`${componentCls}-body`]: {
+        [`${componentCls}-confirm-title`]: {
+          fontSize: fontSizeHeading3
+        },
+        [`${componentCls}-confirm-body > ${token.iconCls}`]: {
+          height: calc(token.fontSizeHeading3).mul(token.lineHeight).equal()
+        },
+        [`${componentCls}-confirm-paragraph`]: {
+          rowGap: token.marginSM
+        },
+        [`${componentCls}-confirm-content`]: {
+          color: token.colorTextSecondary
+        },
+        [`${componentCls}-confirm-btns`]: {
+          marginTop: marginLG,
+          [`${antCls}-btn`]: {
+            height: 28,
+            minHeight: 28
+          }
+        }
       }
     }
   };

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/static-function/index.js

@@ -36,8 +36,11 @@ __export(static_function_exports, {
   token: () => token
 });
 module.exports = __toCommonJS(static_function_exports);
+var import_react = require("react");
 var import_antd = require("antd");
 var import_alias = __toESM(require("antd/lib/theme/util/alias"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_style = __toESM(require("../modal/style"));
 var import_theme = __toESM(require("../theme"));
 var import_default = __toESM(require("../theme/default"));
 var { defaultAlgorithm, defaultSeed, useToken } = import_theme.default;
@@ -45,7 +48,7 @@ var _a, _b, _c;
 var mapToken = {
   ...defaultAlgorithm(defaultSeed),
   ...import_default.default.token,
-  // 需要覆盖部分 Alias Token 的值
+  // need to override some Alias Token values
   override: {
     boxShadow: (_a = import_default.default.token) == null ? void 0 : _a.boxShadow,
     boxShadowSecondary: (_b = import_default.default.token) == null ? void 0 : _b.boxShadowSecondary,
@@ -58,6 +61,9 @@ var notification = import_antd.notification;
 var modal = import_antd.Modal;
 var static_function_default = () => {
   token = useToken().token;
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("modal");
+  (0, import_style.default)(prefixCls);
   const staticFunction = import_antd.App.useApp();
   message = {
     ...staticFunction.message,