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

package/lib/result/index.d.ts

@@ -8,10 +8,10 @@ export type ResultStatusType = AntResultStatusType | 'processing';
 export interface ResultProps extends Omit<AntResultProps, 'status'> {
     status?: ResultStatusType;
 }
-export interface ResultType extends React.FC<ResultProps> {
+export type ResultType = React.FC<ResultProps> & {
     PRESENTED_IMAGE_403: typeof Image403;
     PRESENTED_IMAGE_404: typeof Image404;
     PRESENTED_IMAGE_500: typeof Image500;
-}
+};
 declare const Result: ResultType;
 export default Result;

package/lib/result/index.js

@@ -33,7 +33,7 @@ __export(result_exports, {
   default: () => result_default
 });
 module.exports = __toCommonJS(result_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
@@ -46,22 +46,23 @@ var import__2 = __toESM(require("./404"));
 var import__3 = __toESM(require("./500"));
 var import_style = __toESM(require("./style"));
 __reExport(result_exports, require("antd/es/result"), module.exports);
-var Result = ({ status, prefixCls: customizePrefixCls, ...restProps }) => {
+var import_jsx_runtime = require("react/jsx-runtime");
+var Result = ({ prefixCls: customizePrefixCls, className, status, ...restProps }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("result", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const resultCls = (0, import_classnames.default)(prefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
+  const resultCls = (0, import_classnames.default)(className);
   const statusMap = {
-    success: /* @__PURE__ */ import_react.default.createElement(import_Success.default, null),
-    error: /* @__PURE__ */ import_react.default.createElement(import_Error.default, null),
-    warning: /* @__PURE__ */ import_react.default.createElement(import_Warning.default, null),
-    processing: /* @__PURE__ */ import_react.default.createElement(import_Processing.default, null),
-    403: /* @__PURE__ */ import_react.default.createElement(import__.default, null),
-    404: /* @__PURE__ */ import_react.default.createElement(import__2.default, null),
-    500: /* @__PURE__ */ import_react.default.createElement(import__3.default, null)
+    success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Success.default, {}),
+    error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Error.default, {}),
+    warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Warning.default, {}),
+    processing: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Processing.default, {}),
+    403: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {}),
+    404: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, {}),
+    500: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__3.default, {})
   };
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Result,
       {
         icon: statusMap[status],

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type ResultToken = FullToken<'Result'>;
 export declare const genResultStyle: GenerateStyle<ResultToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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/result/style/index.js

@@ -47,12 +47,9 @@ var genResultStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Result", (token) => {
-    return [genResultStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Result", (token) => {
+  return [genResultStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genResultStyle

package/lib/segmented/index.d.ts

@@ -6,6 +6,7 @@ import type { SegmentedRawOption } from 'rc-segmented';
 export * from 'antd/es/segmented';
 type BadgeType = BadgeProps | BadgeProps['count'];
 export type SegmentedLabeledOption = AntSegmentedLabeledOption & {
+    icon?: React.ReactNode;
     ellipsis?: EllipsisConfig;
     badge?: BadgeType;
 };

package/lib/segmented/index.js

@@ -40,6 +40,7 @@ var import_typography = __toESM(require("../typography"));
 var import_badge = __toESM(require("../badge"));
 var import_style = __toESM(require("./style"));
 __reExport(segmented_exports, require("antd/es/segmented"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var isReactNode = (item) => {
   return import_react.default.isValidElement(item);
 };
@@ -47,24 +48,34 @@ var Segmented = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, options, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("segmented", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const renderBadge = (0, import_react.useCallback)((badge) => {
       if (typeof badge === "object" && !isReactNode(badge)) {
-        return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { ...badge });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.default, { ...badge });
       }
-      return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { count: badge });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.default, { count: badge });
     }, []);
     const newOptions = options == null ? void 0 : options.map((item) => {
       if (typeof item === "object") {
-        const { label, badge, ...restItem } = item;
+        const {
+          label,
+          icon,
+          badge,
+          ellipsis = { tooltip: true },
+          ...restItem
+        } = item;
         return {
           ...restItem,
-          label: /* @__PURE__ */ import_react.default.createElement(import_antd.Flex, { gap: 4, align: "center", justify: "center" }, (item == null ? void 0 : item.ellipsis) ? /* @__PURE__ */ import_react.default.createElement(import_typography.default.Text, { ellipsis: item.ellipsis }, label) : label, badge && renderBadge(badge))
+          label: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Flex, { align: "center", justify: "center", children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item-icon`, children: icon }),
+            ellipsis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.default.Text, { ellipsis, children: label }) : label,
+            badge && renderBadge(badge)
+          ] })
         };
       }
       return item;
     });
-    return wrapSSR(/* @__PURE__ */ import_react.default.createElement(import_antd.Segmented, { ref, options: newOptions, ...restProps }));
+    return wrapCSSVar(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Segmented, { ref, options: newOptions, ...restProps }));
   }
 );
 if (process.env.NODE_ENV !== "production") {

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

@@ -2,8 +2,5 @@
 import type { FullToken, GenerateStyle } from 'antd/lib/theme/internal';
 export type SegmentedToken = FullToken<'Segmented'>;
 export declare const genSegmentedStyle: GenerateStyle<SegmentedToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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/segmented/style/index.js

@@ -45,6 +45,7 @@ var genSegmentedStyle = (token) => {
       [`>${componentCls}-item`]: {
         [`>${componentCls}-item-label`]: {
           [`${antCls}-badge >${antCls}-badge-count`]: {
+            marginInlineStart: 4,
             backgroundColor: colorFillSecondary,
             color: "inherit",
             boxShadow: "none"
@@ -54,12 +55,9 @@ var genSegmentedStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Segmented", (token) => {
-    return [genSegmentedStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Segmented", (token) => {
+  return [genSegmentedStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genSegmentedStyle

package/lib/select/index.js

@@ -40,6 +40,7 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_en_US = __toESM(require("../locale/en-US"));
 var import_style = __toESM(require("./style"));
 __reExport(select_exports, require("antd/es/select"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var InternalSelect = import_react.default.forwardRef(
   ({ locale: customLocale, prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
     const { locale: contextLocale, getPrefixCls } = (0, import_react.useContext)(
@@ -53,10 +54,10 @@ var InternalSelect = import_react.default.forwardRef(
       ...customLocale
     };
     const prefixCls = getPrefixCls("select", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const selectCls = (0, import_classnames.default)(className);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_antd.Select,
         {
           ref,

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type SelectToken = FullToken<'Select'>;
 export declare const genSelectStyle: GenerateStyle<SelectToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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/select/style/index.js

@@ -28,18 +28,18 @@ var genSelectStyle = (token) => {
   const { componentCls } = token;
   return {
     [`${componentCls}`]: {
-      [`${componentCls}-arrow${componentCls}-arrow-loading`]: {
+      [`${componentCls}-selection-placeholder`]: {
+        fontWeight: token.fontWeightWeak
+      },
+      [`${componentCls}-clear`]: {
         color: token.colorTextTertiary
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Select", (token) => {
-    return [genSelectStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Select", (token) => {
+  return [genSelectStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genSelectStyle

package/lib/slider/index.js

@@ -39,14 +39,15 @@ var import_react = __toESM(require("react"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_style = __toESM(require("./style"));
 __reExport(slider_exports, require("antd/es/slider"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Slider = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("slider", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const sliderCls = (0, import_classnames.default)(className);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Slider, { ref, prefixCls: customizePrefixCls, className: sliderCls, ...restProps })
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Slider, { ref, prefixCls: customizePrefixCls, className: sliderCls, ...restProps })
     );
   }
 );

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type SliderToken = FullToken<'Slider'>;
 export declare const genSliderStyle: GenerateStyle<SliderToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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/slider/style/index.js

@@ -23,32 +23,33 @@ __export(style_exports, {
   genSliderStyle: () => genSliderStyle
 });
 module.exports = __toCommonJS(style_exports);
-var import_lodash = require("lodash");
+var import_cssinjs = require("@ant-design/cssinjs");
 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 = (0, import_cssinjs.unit)(calc(dotSize).div(2).equal());
+  const handleOffset = (0, import_cssinjs.unit)(
+    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`
         }
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Slider", (token) => {
-    return [genSliderStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Slider", (token) => {
+  return [genSliderStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genSliderStyle

package/lib/space/index.js

@@ -43,11 +43,12 @@ var import_antd = require("antd");
 var import_style = __toESM(require("./style"));
 __reExport(space_exports, require("antd/es/space"), module.exports);
 var import_context = require("antd/es/space/context");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Space = React.forwardRef(
   ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
     const { getPrefixCls } = React.useContext(import_config_provider.ConfigContext);
     const prefixCls = getPrefixCls("space", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const supportFlexGap = (0, import_useFlexGapSupport.default)();
     const spaceCls = (0, import_classnames.default)(
       {
@@ -56,7 +57,7 @@ var Space = React.forwardRef(
       },
       className
     );
-    return wrapSSR(/* @__PURE__ */ React.createElement(import_antd.Space, { ref, className: spaceCls, ...restProps }));
+    return wrapCSSVar(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Space, { ref, className: spaceCls, ...restProps }));
   }
 );
 if (process.env.NODE_ENV !== "production") {

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import { type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type SpaceToken = FullToken<'Space'>;
 export declare const genSpaceStyle: GenerateStyle<SpaceToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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/space/style/index.js

@@ -47,12 +47,9 @@ var genSpaceStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Space", (token) => {
-    return [genSpaceStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Space", (token) => {
+  return [genSpaceStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genSpaceStyle

package/lib/spin/index.js

@@ -35,13 +35,14 @@ __export(spin_exports, {
 module.exports = __toCommonJS(spin_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_lottie = __toESM(require("../lottie"));
 var import_spin = __toESM(require("./assets/spin.json"));
 var import_spin_gray = __toESM(require("./assets/spin-gray.json"));
 var import_style = __toESM(require("./style"));
 __reExport(spin_exports, require("antd/es/spin"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Spin = ({
   prefixCls: customizePrefixCls,
   className,
@@ -50,11 +51,11 @@ var Spin = ({
   ...restProps
 }) => {
   const { getPrefixCls, spin } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const indicator = customizeIndicator || (spin == null ? void 0 : spin.indicator) || (gray ? /* @__PURE__ */ import_react.default.createElement(import_lottie.default, { animationData: import_spin_gray.default }) : /* @__PURE__ */ import_react.default.createElement(import_lottie.default, { animationData: import_spin.default }));
+  const indicator = customizeIndicator || (spin == null ? void 0 : spin.indicator) || (gray ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lottie.default, { animationData: import_spin_gray.default }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lottie.default, { animationData: import_spin.default }));
   const isDefaultIndicator = !(customizeIndicator || (spin == null ? void 0 : spin.indicator));
   const isGrayIndicator = isDefaultIndicator && gray;
   const prefixCls = getPrefixCls("spin", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
   const spinCls = (0, import_classnames.default)(
     {
       [`${prefixCls}-oceanbase`]: isDefaultIndicator,
@@ -62,8 +63,8 @@ var Spin = ({
     },
     className
   );
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Spin,
       {
         prefixCls: customizePrefixCls,
@@ -75,7 +76,7 @@ var Spin = ({
   );
 };
 Spin.setDefaultIndicator = import_antd.Spin.setDefaultIndicator;
-Spin.setDefaultIndicator(/* @__PURE__ */ import_react.default.createElement(Spin, null));
+Spin.setDefaultIndicator(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spin, {}));
 if (process.env.NODE_ENV !== "production") {
   Spin.displayName = import_antd.Spin.displayName;
 }

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

@@ -1,13 +1,10 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type SpinToken = FullToken<'Spin'> & {
     spinDotSize: number;
     spinDotSizeSM: number;
     spinDotSizeLG: number;
 };
 export declare const genSpinStyle: GenerateStyle<SpinToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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/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()
       }
     }
   };
@@ -83,26 +83,24 @@ var genSpinStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Spin", (token) => {
-    return [
-      genSpinStyle({
-        ...token,
-        // https://github.com/ant-design/ant-design/blob/master/components/spin/style/index.tsx#L238
-        // spinDotSize: (token.controlHeightLG / 2) * ratio,
-        // spinDotSizeSM: token.controlHeightLG * 0.35 * ratio,
-        // spinDotSizeLG: token.controlHeight * ratio,
-        spinDotSize: token.controlHeight * 1.75,
-        // 56,
-        spinDotSizeSM: token.controlHeight * 1.125,
-        // 36
-        spinDotSizeLG: token.controlHeight * 2.25
-        // 72
-      })
-    ];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Spin", (token) => {
+  const { calc } = token;
+  return [
+    genSpinStyle({
+      ...token,
+      // https://github.com/ant-design/ant-design/blob/master/components/spin/style/index.tsx#L238
+      // spinDotSize: (token.controlHeightLG / 2) * ratio,
+      // spinDotSizeSM: token.controlHeightLG * 0.35 * ratio,
+      // spinDotSizeLG: token.controlHeight * ratio,
+      spinDotSize: calc(token.controlHeight).mul(1.75).equal(),
+      // 56,
+      spinDotSizeSM: calc(token.controlHeight).mul(1.125).equal(),
+      // 36
+      spinDotSizeLG: calc(token.controlHeight).mul(2.25).equal()
+      // 72
+    })
+  ];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genSpinStyle

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,

package/lib/style/cssVariables.d.ts

@@ -0,0 +1,25 @@
+/**
+ * OceanBase Design System - CSS Variables Style
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ * 根据主题 token 值动态生成
+ */
+import React from 'react';
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import type { GlobalToken } from '../theme/interface';
+/**
+ * 根据 token 生成 CSS 变量样式
+ */
+declare const genCssVariablesStyle: (token: GlobalToken, prefix?: string) => CSSInterpolation;
+export interface CssVariablesStyleProps {
+    /**
+     * CSS 变量前缀，默认为 'ob'
+     */
+    prefix?: string;
+}
+/**
+ * CSS 变量注入组件
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ */
+declare const CssVariablesStyle: React.FC<CssVariablesStyleProps>;
+export { CssVariablesStyle, genCssVariablesStyle };
+export default CssVariablesStyle;