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

package/lib/TaskGraph/style/index.js

@@ -0,0 +1,143 @@
+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/TaskGraph/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genTaskGraphStyle: () => genTaskGraphStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genTaskGraphStyle = (token) => {
+  const {
+    componentCls,
+    proComponentsCls,
+    antCls,
+    colorText,
+    colorTextSecondary,
+    fontWeightStrong
+  } = token;
+  return {
+    "#container": {
+      position: "relative",
+      paddingBottom: "0 !important",
+      [`${antCls}-page-header`]: {
+        paddingTop: 12,
+        paddingBottom: 12
+      },
+      [`${proComponentsCls}-page-container-header-inner`]: {
+        backgroundColor: "#fafbff",
+        [`${antCls}-page-header-heading ${antCls}-page-header-heading-title`]: {
+          fontSize: 16
+        }
+      },
+      [`${componentCls}-split-pane`]: {
+        top: "auto !important",
+        height: "calc(100% - 36px) !important",
+        minHeight: "calc(100% - 36px) !important",
+        margin: -24,
+        [`${componentCls}-tabs-wrapper`]: {
+          width: "100%"
+        },
+        [`${antCls}-tabs`]: {
+          height: "100%",
+          [`${antCls}-tabs-nav-container`]: {
+            height: 32,
+            paddingTop: 4
+          },
+          [`${antCls}-tabs-bar`]: {
+            marginBottom: 0,
+            backgroundColor: "#fff",
+            borderBottom: "none"
+          },
+          [`${antCls}-tabs-tab`]: {
+            minWidth: 120,
+            height: 28,
+            margin: 0,
+            padding: 0,
+            fontSize: 12,
+            lineHeight: 28,
+            backgroundColor: "#fff",
+            border: "none",
+            borderBottom: "1px solid #e8e8e8",
+            borderRadius: 0,
+            transition: "none",
+            "&:hover": {
+              color: colorTextSecondary
+            },
+            div: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              height: 20,
+              marginTop: 4,
+              padding: "0 8px",
+              borderLeft: "1px solid #e8e8e8"
+            }
+          },
+          [`${antCls}-tabs-tab:last-child`]: {
+            div: {
+              borderLeft: "none"
+            }
+          },
+          [`${antCls}-tabs-tab-active`]: {
+            color: colorText,
+            fontWeight: fontWeightStrong,
+            backgroundColor: "#f7f8fc",
+            borderBottom: "none",
+            borderLeft: "none",
+            borderRadius: 2,
+            div: {
+              borderLeft: "none"
+            },
+            [`& + ${antCls}-tabs-tab`]: {
+              div: {
+                borderLeft: "none"
+              }
+            }
+          },
+          [`${antCls}-tabs-extra-content`]: {
+            marginRight: 16,
+            lineHeight: 32
+          },
+          [`${antCls}-tabs-content`]: {
+            height: "calc(100% - 64px)",
+            padding: 16,
+            overflow: "scroll",
+            color: colorTextSecondary,
+            lineHeight: 22,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all",
+            backgroundColor: "#f7f8fc"
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("TaskGraph", (token) => {
+    return [genTaskGraphStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genTaskGraphStyle
+});

package/lib/Welcome/index.d.ts

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '@oceanbase/design/es/button';
 import React from 'react';
-import './index.less';
 export interface IntroduceItem {
     image: string;
     title: string;

package/lib/Welcome/index.js

@@ -35,13 +35,13 @@ module.exports = __toCommonJS(Welcome_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 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_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_step = __toESM(require("./step"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("welcome");
 var Welcome = ({
   title,
   description,
@@ -56,13 +56,16 @@ var Welcome = ({
   className,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("welcome");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const isDefault = stepType === "default";
   const renderStep = (item, index) => {
-    const DefaultStep = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 12, "data-testid": "steps", className: `${prefix}-item`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-order-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-order`, children: index + 1 }) }),
+    const DefaultStep = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 12, "data-testid": "steps", className: `${prefixCls}-item`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-order-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-order`, children: index + 1 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: item.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: item.description })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefixCls}-title`, children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefixCls}-description`, children: item.description })
       ] })
     ] }, item.title);
     const StepProps = {
@@ -76,62 +79,64 @@ var Welcome = ({
     const StepItem = isDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultStep, {}, item.title) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_step.default, { "data-testid": "steps", ...StepProps }, item.title);
     return StepItem;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${`${prefix}-container`} ${className}`, ...restProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_design.Row,
-      {
-        className: `${prefix}-page-header`,
-        style: {
-          backgroundImage: `url("${bgImage}")`
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, className: `${prefix}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 16, className: `${prefix}-description`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Card, { bordered: false, className: `${prefix}-introduce`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Row, { gutter: 78, children: introduces.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 8, className: `${prefix}-item`, "data-testid": "introduces", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: item.image, alt: "", height: 80 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: item.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: item.description })
-      ] })
-    ] }, item.image)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { className: `${prefix}-content`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { justify: "space-around", children: [
-        steps.map((item, index) => renderStep(item, index)),
-        isDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-btn-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_design.Button,
-          {
-            size: "large",
-            type: "primary",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusOutlined, {}),
-            block: true,
-            ...buttonProps,
-            children: buttonText
-          }
-        ) }) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 10, className: `${prefix}-right`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: locale.helpTitle }),
-        helps.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_design.Button,
-          {
-            shape: "round",
-            onClick: () => {
-              (0, import_util.directTo)(item.link);
-            },
-            className: (0, import_classnames.default)({
-              [`${prefix}-more`]: !!item.isMore
-            }),
-            "data-testid": "helps",
-            children: item.title
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-container ${className || ""}`, ...restProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_design.Row,
+        {
+          className: `${prefixCls}-page-header`,
+          style: {
+            backgroundImage: `url("${bgImage}")`
           },
-          item.title
-        ))
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, className: `${prefixCls}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: title }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 16, className: `${prefixCls}-description`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Card, { bordered: false, className: `${prefixCls}-introduce`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Row, { gutter: 78, children: introduces.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 8, className: `${prefixCls}-item`, "data-testid": "introduces", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: item.image, alt: "", height: 80 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefixCls}-title`, children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefixCls}-description`, children: item.description })
+        ] })
+      ] }, item.image)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { className: `${prefixCls}-content`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 14, className: isDefault ? `${prefixCls}-left` : "borderRight", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { justify: "space-around", children: [
+          steps.map((item, index) => renderStep(item, index)),
+          isDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-btn-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Button,
+            {
+              size: "large",
+              type: "primary",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusOutlined, {}),
+              block: true,
+              ...buttonProps,
+              children: buttonText
+            }
+          ) }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 10, className: `${prefixCls}-right`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefixCls}-title`, children: locale.helpTitle }),
+          helps.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Button,
+            {
+              shape: "round",
+              onClick: () => {
+                (0, import_util.directTo)(item.link);
+              },
+              className: (0, import_classnames.default)({
+                [`${prefixCls}-more`]: !!item.isMore
+              }),
+              "data-testid": "helps",
+              children: item.title
+            },
+            item.title
+          ))
+        ] })
       ] })
     ] })
-  ] });
+  );
 };
 var Welcome_default = (0, import_LocaleWrapper.default)({
   componentName: "Welcome",

package/lib/Welcome/step/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 WelcomeStepToken = OBToken;
+export declare const genWelcomeStepStyle: GenerateStyle<WelcomeStepToken>;
+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/Welcome/step/style/index.js

@@ -0,0 +1,74 @@
+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/Welcome/step/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genWelcomeStepStyle: () => genWelcomeStepStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../../_util/genComponentStyleHook");
+var genWelcomeStepStyle = (token) => {
+  const { componentCls, colorText, colorTextTertiary, colorPrimary } = token;
+  return {
+    [`${componentCls}`]: {
+      display: "flex",
+      marginBottom: 30,
+      padding: "20px 30px 20px 0",
+      background: token.colorBgContainer,
+      border: "1px solid rgba(0, 0, 0, 0.06)",
+      borderRadius: 2,
+      "&:hover": {
+        boxShadow: "0 4px 16px 0",
+        cursor: "pointer"
+      },
+      "&:nth-child(even)": {
+        marginRight: 0
+      },
+      [`${componentCls}-left`]: {
+        padding: "0 20px"
+      },
+      [`${componentCls}-right`]: {
+        [`${componentCls}-title`]: {
+          color: colorText,
+          fontSize: 16,
+          lineHeight: 24
+        },
+        [`${componentCls}-description`]: {
+          color: colorTextTertiary
+        }
+      },
+      [`${componentCls}-operations`]: {
+        color: colorPrimary,
+        fontSize: 14,
+        lineHeight: 22
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("WelcomeStep", (token) => {
+    return [genWelcomeStepStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genWelcomeStepStyle
+});

package/lib/Welcome/step.d.ts

@@ -1,4 +1,3 @@
-import './index.less';
 export interface OperationProps {
     text: string;
     onClick: () => void;

package/lib/Welcome/step.js

@@ -33,24 +33,28 @@ __export(step_exports, {
 });
 module.exports = __toCommonJS(step_exports);
 var import_design = require("@oceanbase/design");
+var import_react = require("react");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
+var import_style = __toESM(require("./step/style"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("welcome-step");
 var WelcomeStep = (props) => {
   const { title, description, operations, imgUrl, locale } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 11, className: prefix, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-left`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: imgUrl, alt: "", width: "60" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-right`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: description }),
-      operations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-operations`, children: operations == null ? void 0 : operations.map((operation, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { onClick: operation.onClick, className: `${prefix}-operation`, children: operation.text || locale.defaultOperation }, index);
-      }) })
-    ] })
-  ] }, title);
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("welcome-step");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 11, className: prefixCls, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-left`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: imgUrl, alt: "", width: "60" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-right`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefixCls}-title`, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefixCls}-description`, children: description }),
+        operations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-operations`, children: operations == null ? void 0 : operations.map((operation, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { onClick: operation.onClick, className: `${prefixCls}-operation`, children: operation.text || locale.defaultOperation }, index);
+        }) })
+      ] })
+    ] }, title)
+  );
 };
 var step_default = (0, import_LocaleWrapper.default)({
   componentName: "WelcomeStep",

package/lib/Welcome/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 WelcomeToken = OBToken;
+export declare const genWelcomeStyle: GenerateStyle<WelcomeToken>;
+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/Welcome/style/index.js

@@ -0,0 +1,188 @@
+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/Welcome/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genWelcomeStyle: () => genWelcomeStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genWelcomeStyle = (token) => {
+  const { componentCls, antCls, colorBgContainer, colorText, colorTextSecondary, colorTextTertiary, colorTextQuaternary, colorPrimary } = token;
+  return {
+    [`${componentCls}-container`]: {
+      height: "100%",
+      paddingBottom: "0 !important",
+      backgroundColor: colorBgContainer,
+      ".tech-page-container-content": {
+        padding: "0 !important"
+      },
+      [`${componentCls}-page-header`]: {
+        height: 272,
+        paddingTop: 72,
+        paddingLeft: 100,
+        color: colorBgContainer,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 100%",
+        p: {
+          textAlign: "justify"
+        },
+        img: {
+          width: 80
+        },
+        [`${componentCls}-title`]: {
+          fontSize: 32,
+          fontFamily: "SFProText-Medium"
+        },
+        [`${componentCls}-description`]: {
+          marginTop: 16,
+          marginBottom: 32,
+          fontFamily: "SFProText-Regular",
+          opacity: 0.85
+        }
+      },
+      [`${componentCls}-introduce`]: {
+        margin: "0 32px",
+        marginTop: -48,
+        marginBottom: 40,
+        [`${antCls}-card-body`]: {
+          padding: "48px 68px",
+          boxShadow: "0 1px 40px 2px rgba(28, 116, 230, 0.1)"
+        },
+        [`${componentCls}-item`]: {
+          display: "flex",
+          img: {
+            marginRight: 12
+          },
+          ".title": {
+            color: colorText,
+            fontSize: 16,
+            fontFamily: "PingFangSC-Medium"
+          },
+          ".description": {
+            marginTop: 4,
+            color: colorTextSecondary,
+            fontFamily: "SFProText-Regular"
+          }
+        }
+      },
+      [`${componentCls}-content`]: {
+        padding: "0 32px",
+        paddingBottom: 90,
+        [`${componentCls}-left`]: {
+          padding: "0 36px",
+          borderRight: "1px solid #e8e8e8",
+          [`${componentCls}-item`]: {
+            display: "flex",
+            padding: "24px 24px",
+            [`${componentCls}-order-wrapper`]: {
+              [`${componentCls}-order`]: {
+                width: 24,
+                height: 24,
+                marginRight: 12,
+                color: colorTextQuaternary,
+                textAlign: "center",
+                border: `1px solid ${colorTextQuaternary}`,
+                borderRadius: 24
+              }
+            },
+            [`${componentCls}-title`]: {
+              marginTop: 0,
+              color: colorText,
+              fontSize: 16
+            },
+            [`${componentCls}-description`]: {
+              marginTop: 8,
+              color: colorTextTertiary
+            }
+          },
+          [`${componentCls}-btn-wrapper`]: {
+            marginRight: 24,
+            marginLeft: 60
+          }
+        },
+        [`${componentCls}-right`]: {
+          padding: "24px 64px",
+          [`${componentCls}-title`]: {
+            marginBottom: 16,
+            color: colorText,
+            fontSize: 16,
+            fontFamily: "PingFangSC-Medium"
+          },
+          [`${antCls}-btn`]: {
+            marginRight: 12,
+            marginBottom: 12,
+            background: "rgba(24, 144, 255, 0.06)",
+            border: "none"
+          },
+          [`${componentCls}-more`]: {
+            background: "rgba(0, 0, 0, 0.04)"
+          }
+        }
+      }
+    },
+    [`${componentCls}-step`]: {
+      display: "flex",
+      marginBottom: 30,
+      padding: "20px 30px 20px 0",
+      background: colorBgContainer,
+      border: "1px solid rgba(0, 0, 0, 0.06)",
+      borderRadius: 2,
+      "&:hover": {
+        boxShadow: "0 4px 16px 0",
+        cursor: "pointer"
+      },
+      "&:nth-child(even)": {
+        marginRight: 0
+      },
+      [`${componentCls}-step-left`]: {
+        padding: "0 20px"
+      },
+      [`${componentCls}-step-right`]: {
+        [`${componentCls}-step-title`]: {
+          color: colorText,
+          fontSize: 16,
+          lineHeight: 24
+        },
+        [`${componentCls}-step-description`]: {
+          color: colorTextTertiary
+        }
+      },
+      [`${componentCls}-step-operations`]: {
+        color: colorPrimary,
+        fontSize: 14,
+        lineHeight: 22
+      }
+    },
+    ".borderRight": {
+      borderRight: "1px solid #e8e8e8"
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Welcome", (token) => {
+    return [genWelcomeStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genWelcomeStyle
+});

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import './index.less';
 export * from '@ant-design/pro-components';
 export { version } from '../package.json';
 export * from './constant';

package/lib/index.js

@@ -64,7 +64,6 @@ __export(src_exports, {
   version: () => import_package.version
 });
 module.exports = __toCommonJS(src_exports);
-var import_index = require("./index.less");
 __reExport(src_exports, require("@ant-design/pro-components"), module.exports);
 var import_package = require("../package.json");
 __reExport(src_exports, require("./constant"), module.exports);