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

package/lib/Login/style/index.js

@@ -0,0 +1,267 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genLoginStyle: () => genLoginStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genLoginStyle = (token) => {
+  const {
+    componentCls,
+    antCls,
+    iconCls,
+    colorTextTertiary,
+    colorPrimary,
+    colorBorder,
+    borderRadius
+  } = token;
+  return {
+    [`${componentCls}-container`]: {
+      display: "flex",
+      justifyContent: "space-between",
+      minWidth: 960,
+      height: "100vh",
+      minHeight: 600,
+      overflow: "auto",
+      [`${componentCls}-bg`]: {
+        width: "40%",
+        height: "100%",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        [`${componentCls}-info`]: {
+          margin: "185px 48px 0 48px",
+          color: "#fff",
+          fontWeight: token.fontWeightStrong,
+          fontSize: 56,
+          fontFamily: "PingFangSC",
+          [`${componentCls}-start`]: {
+            marginTop: 22,
+            color: "#f4f4f4",
+            fontWeight: token.fontWeightStrong,
+            fontSize: 32,
+            letterSpacing: 0
+          }
+        }
+      },
+      [`${componentCls}-card`]: {
+        display: "flex",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        minHeight: 600,
+        backgroundColor: "#fff",
+        [`${componentCls}-locale`]: {
+          position: "absolute",
+          top: 24,
+          right: 24,
+          color: colorTextTertiary,
+          fontFamily: "PingFangSC-Regular",
+          cursor: "pointer"
+        },
+        [`${componentCls}-board`]: {
+          position: "absolute",
+          top: 48
+        },
+        [`${componentCls}-content`]: {
+          marginTop: -60,
+          width: 404,
+          [`${componentCls}-logo`]: {
+            display: "block",
+            height: 68,
+            margin: "0 auto",
+            marginBottom: 40
+          },
+          [`${componentCls}-activate-logo, ${componentCls}-reigster-logo`]: {
+            display: "block",
+            height: 68,
+            margin: "0 auto"
+          },
+          [`${componentCls}-register, ${componentCls}-activate`]: {
+            [`${antCls}-form-item-with-help`]: {
+              marginBottom: 24
+            }
+          },
+          [`${componentCls}-form`]: {
+            width: "100%",
+            "input::placeholder": {
+              fontSize: 14
+            },
+            [`${antCls}-form-item`]: {
+              marginBottom: 24,
+              paddingBottom: 0
+            },
+            [`${antCls}-input-affix-wrapper`]: {
+              [`${antCls}-input:not(${antCls}-input-disabled)`]: {
+                boxShadow: "inset 0 0 0 1000px white !important"
+              },
+              [`${antCls}-input:-internal-autofill-selected`]: {
+                boxShadow: "inset 0 0 0 1000px white !important"
+              },
+              [`${antCls}-input:focus:-internal-autofill-selected`]: {
+                boxShadow: "inset 0 0 0 1000px white !important"
+              }
+            },
+            [`${antCls}-input-affix-wrapper ${antCls}-input:not(:first-child)`]: {
+              paddingLeft: 8
+            },
+            [`${antCls}-input-affix-wrapper-focused`]: {
+              borderColor: colorPrimary
+            },
+            [`${componentCls}-form-focus-input`]: {
+              [`${antCls}-input-prefix`]: {
+                [`${iconCls}`]: {
+                  color: colorPrimary
+                }
+              }
+            }
+          },
+          [`${componentCls}-auth-code`]: {
+            display: "flex",
+            alignItems: "start",
+            width: "100%",
+            marginBottom: 24,
+            paddingBottom: 0,
+            [`> ${antCls}-space-item:first-child`]: {
+              flex: 1
+            },
+            [`${antCls}-form-item`]: {
+              marginBottom: 0
+            },
+            [`${componentCls}-code-btn`]: {
+              position: "relative",
+              height: 38,
+              border: `1px solid ${colorBorder}`,
+              borderRadius,
+              cursor: "pointer",
+              img: {
+                height: 38,
+                borderRadius
+              },
+              [`${componentCls}-code-mask`]: {
+                position: "absolute",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: 38,
+                color: "#fff",
+                background: "rgba(0, 0, 0, 0.5)",
+                borderRadius,
+                cursor: "pointer",
+                opacity: 0,
+                transition: "opacity 0.3s",
+                inset: 0
+              },
+              [`&.${componentCls}-error, &:hover`]: {
+                [`${componentCls}-code-mask`]: {
+                  opacity: 1
+                }
+              }
+            }
+          },
+          [`${componentCls}-submit-btn`]: {},
+          [`${componentCls}-switch-btn`]: {
+            marginTop: 24,
+            textAlign: "center",
+            cursor: "pointer"
+          },
+          [`${componentCls}-watermark-wrapper`]: {
+            position: "absolute",
+            bottom: 40,
+            width: 404,
+            textAlign: "center",
+            [`${componentCls}-watermark`]: {
+              height: 16
+            }
+          },
+          [`${componentCls}-alert`]: {
+            marginBottom: 24,
+            borderRadius
+          }
+        }
+      },
+      "@media (max-height: 650px)": {
+        [`${componentCls}-watermark-wrapper`]: {
+          position: "absolute",
+          top: 600
+        }
+      }
+    },
+    [`${componentCls}-container-with-board`]: {
+      [`${componentCls}-card`]: {
+        [`${componentCls}-content`]: {
+          marginTop: 0
+        }
+      }
+    },
+    [`${componentCls}-container-mobile`]: {
+      flexDirection: "column",
+      minWidth: "auto",
+      [`${componentCls}-banner`]: {
+        height: "25%"
+      },
+      [`${componentCls}-bg`]: {
+        width: "100%"
+      },
+      [`${componentCls}-card`]: {
+        alignItems: "start",
+        width: "100%",
+        height: "75%",
+        marginTop: -48,
+        padding: "0 32px",
+        borderRadius: "16px 16px 0 0",
+        position: "relative",
+        [`${componentCls}-board`]: {
+          top: 8,
+          left: 24
+        },
+        [`${componentCls}-locale`]: {
+          top: 8
+        },
+        [`${componentCls}-content`]: {
+          width: "100%",
+          marginTop: 40,
+          [`${componentCls}-logo`]: {
+            height: 48,
+            marginBottom: 24
+          },
+          [`${componentCls}-watermark-wrapper`]: {
+            width: "100%",
+            position: "static",
+            marginTop: 96
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Login", (token) => {
+    return [genLoginStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genLoginStyle
+});

package/lib/NavMenu/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 export interface NavMenuItem {
     key: string;
     title: string;
@@ -15,5 +14,5 @@ export interface NavMenuProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const _default: (props: NavMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const _default: (props: NavMenuProps) => React.JSX.Element;
 export default _default;

package/lib/NavMenu/index.js

@@ -36,13 +36,14 @@ var import_design = require("@oceanbase/design");
 var import_lodash = require("lodash");
 var import_path_to_regexp = require("path-to-regexp");
 var import_react = require("react");
-var import_util = require("../_util");
 var import_useNavigate = __toESM(require("../_util/useNavigate"));
-var import_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("menu");
 var NavMenu_default = (props) => {
   const { menuList, className, style } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("menu");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(["0"]);
   const [menus, setMenus] = (0, import_react.useState)([]);
   const location = window.location;
@@ -96,18 +97,20 @@ var NavMenu_default = (props) => {
     },
     [navigate]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-container ${className}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_design.Menu,
-    {
-      style: { height: "100%", borderRight: 0 },
-      defaultSelectedKeys: ["0"],
-      selectedKeys,
-      onSelect: onMenuItemSelect,
-      mode: "inline",
-      theme: "light",
-      children: menus.map((config) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { disabled: config.disabled ?? false, children: config.openNewTab ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, href: config.link, target: "_blank", rel: "noreferrer", children: config.title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, onClick: () => onMenuClick(config.link), children: config.title }) }, config.key);
-      })
-    }
-  ) });
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-container ${className || ""}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_design.Menu,
+      {
+        style: { height: "100%", borderRight: 0 },
+        defaultSelectedKeys: ["0"],
+        selectedKeys,
+        onSelect: onMenuItemSelect,
+        mode: "inline",
+        theme: "light",
+        children: menus.map((config) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { disabled: config.disabled ?? false, children: config.openNewTab ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, href: config.link, target: "_blank", rel: "noreferrer", children: config.title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { id: config.id, onClick: () => onMenuClick(config.link), children: config.title }) }, config.key);
+        })
+      }
+    ) })
+  );
 };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type NavMenuToken = OBToken;
+export declare const genNavMenuStyle: GenerateStyle<NavMenuToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/lib/NavMenu/style/index.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/NavMenu/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genNavMenuStyle: () => genNavMenuStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genNavMenuStyle = (token) => {
+  const { componentCls, antCls } = token;
+  return {
+    [`${componentCls}-container`]: {
+      marginTop: 21,
+      backgroundColor: "transparent",
+      userSelect: "none",
+      ul: {
+        backgroundColor: "transparent",
+        li: {
+          paddingRight: "0 !important",
+          [`${antCls}-menu-title-content`]: {
+            padding: "0 20px",
+            borderRadius: 10,
+            transition: "0.6s",
+            "&:hover": {
+              backgroundColor: "#e4e8f5"
+            }
+          }
+        },
+        [`${antCls}-menu-item:not(${antCls}-menu-item-selected):hover`]: {
+          backgroundColor: "transparent !important"
+        },
+        [`${antCls}-menu-item-selected`]: {
+          backgroundColor: "transparent !important",
+          [`${antCls}-menu-title-content`]: {
+            backgroundColor: "#d7e2fc",
+            a: {
+              color: "transparent",
+              fontFamily: "SourceSansPro-Semibold, SourceSansPro-Regular",
+              background: "linear-gradient(-45deg, #002bff 0%, #0080ff 100%)",
+              backgroundClip: "text"
+            }
+          },
+          "&::after": {
+            display: "none"
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("NavMenu", (token) => {
+    return [genNavMenuStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genNavMenuStyle
+});

package/lib/Ranger/QuickPicker.js

@@ -39,10 +39,8 @@ var import_dayjs = __toESM(require("dayjs"));
 var import_lodash = require("lodash");
 var import_moment = __toESM(require("moment"));
 var import_react = require("react");
-var import_util = require("../_util");
 var import_constant = require("./constant");
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("ranger-quick-picker");
 var RangeDropdown = ({
   selects,
   onChange,
@@ -51,6 +49,8 @@ var RangeDropdown = ({
   locale = {},
   ...rest
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls("ranger-quick-picker");
   const menu = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_design.Menu,
     {
@@ -80,6 +80,8 @@ var RangeSelect = ({
   size,
   ...rest
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls("ranger-quick-picker");
   const handleChange = (nextValue) => {
     onChange(nextValue);
   };

package/lib/Ranger/Ranger.d.ts

@@ -1,7 +1,6 @@
 import type { RangePickerProps } from '@oceanbase/design/es/date-picker';
 import type { Dayjs } from 'dayjs';
 import type { Moment } from 'moment';
-import './index.less';
 import type { QuickPickerProps } from './QuickPicker';
 import type { RangeOption } from './typing';
 export type RangeName = 'customize' | string;

package/lib/Ranger/Ranger.js

@@ -39,13 +39,11 @@ var import_moment = __toESM(require("moment"));
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
 var import_constant = require("./constant");
-var import_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_QuickPicker = __toESM(require("./QuickPicker"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("ranger");
 var Ranger = (props) => {
   var _a;
   const {
@@ -65,6 +63,9 @@ var Ranger = (props) => {
     quickPickerProps = {},
     ...rest
   } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("ranger");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const isMoment = import_moment.default.isMoment(defaultValue == null ? void 0 : defaultValue[0]) || import_moment.default.isMoment(defaultValue == null ? void 0 : defaultValue[1]) || import_moment.default.isMoment(value == null ? void 0 : value[0]) || import_moment.default.isMoment(value == null ? void 0 : value[1]);
   const [innerValue, setInnerValue] = (0, import_react.useState)(value ?? defaultValue);
   const [rangeName, setRangeName] = (0, import_react.useState)(
@@ -122,50 +123,52 @@ var Ranger = (props) => {
   }
   const showRange = mode === "default" || rangeName === import_constant.CUSTOMIZE;
   const showQuickPicker = selects.length !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_design.Space,
-    {
-      size: 0,
-      className: (0, import_classnames.default)(
-        {
-          [`${prefix}-show-range`]: showRange
-        },
-        prefix
-      ),
-      style: rest.style,
-      children: [
-        showQuickPicker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_QuickPicker.default,
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_design.Space,
+      {
+        size: 0,
+        className: (0, import_classnames.default)(
           {
-            customable: true,
-            type: internalQuickType,
-            onChange: rangeChange,
-            onNameChange: handleNameChange,
-            selects,
-            name: rangeName,
-            locale,
-            isMoment,
-            size,
-            ...quickPickerProps
-          }
+            [`${prefixCls}-show-range`]: showRange
+          },
+          prefixCls
         ),
-        showRange && // @ts-ignore
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_design.DatePicker.RangePicker,
-          {
-            disabledDate: pastOnly ? disabledFuture : disabledDate,
-            format: import_constant.DATE_TIME_FORMAT,
-            defaultValue,
-            value: innerValue || defaultInternalValue,
-            onChange: datePickerChange,
-            showTime: true,
-            className: `${prefix}-range-picker`,
-            size,
-            ...(0, import_lodash.omit)(rest, "value", "onChange")
-          }
-        )
-      ]
-    }
+        style: rest.style,
+        children: [
+          showQuickPicker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_QuickPicker.default,
+            {
+              customable: true,
+              type: internalQuickType,
+              onChange: rangeChange,
+              onNameChange: handleNameChange,
+              selects,
+              name: rangeName,
+              locale,
+              isMoment,
+              size,
+              ...quickPickerProps
+            }
+          ),
+          showRange && // @ts-ignore
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.DatePicker.RangePicker,
+            {
+              disabledDate: pastOnly ? disabledFuture : disabledDate,
+              format: import_constant.DATE_TIME_FORMAT,
+              defaultValue,
+              value: innerValue || defaultInternalValue,
+              onChange: datePickerChange,
+              showTime: true,
+              className: `${prefixCls}-range-picker`,
+              size,
+              ...(0, import_lodash.omit)(rest, "value", "onChange")
+            }
+          )
+        ]
+      }
+    )
   );
 };
 var Ranger_default = (0, import_LocaleWrapper.default)({

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type RangerToken = OBToken;
+export declare const genRangerStyle: GenerateStyle<RangerToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/lib/Ranger/style/index.js

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Ranger/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genRangerStyle: () => genRangerStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genRangerStyle = (token) => {
+  const { componentCls, antCls } = token;
+  return {
+    [`${componentCls}`]: {
+      [`${antCls}-space-item:nth-child(2)`]: {
+        flex: 1,
+        width: "100%",
+        [`${antCls}-picker, ${antCls}-picker-range, ${componentCls}-range-picker`]: {
+          width: "100%",
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          input: {
+            textAlign: "center"
+          }
+        }
+      },
+      [`${componentCls}-date-picker`]: {
+        [`${antCls}-select-selector`]: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          "&:hover": {
+            zIndex: 1
+          }
+        },
+        [`${antCls}-select-arrow`]: {
+          zIndex: 1
+        }
+      }
+    },
+    [`${componentCls}-show-range`]: {
+      [`${componentCls}-quick-picker.${componentCls}-quick-picker-select`]: {
+        marginRight: -1,
+        [`${antCls}-select-selector`]: {
+          borderTopRightRadius: "0 !important",
+          borderBottomRightRadius: "0 !important",
+          "&:hover": {
+            zIndex: 1
+          }
+        },
+        [`${antCls}-select-arrow`]: {
+          zIndex: 1
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Ranger", (token) => {
+    return [genRangerStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genRangerStyle
+});

package/lib/SideTip/index.d.ts

@@ -2,7 +2,6 @@ import type { BadgeProps } from '@oceanbase/design/es/badge/index';
 import type { TooltipPropsWithTitle } from '@oceanbase/design/es/tooltip/index';
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export type SideTipType = 'primary' | 'default';
 export type SideTipSize = 'small' | 'default';
 export interface Position {