@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/Welcome/index.js

@@ -1,48 +1,24 @@
-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);
+"use strict";
 
-// src/Welcome/index.tsx
-var Welcome_exports = {};
-__export(Welcome_exports, {
-  default: () => Welcome_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-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 = __toESM(require("react"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_step = __toESM(require("./step"));
-var prefix = (0, import_util.getPrefix)("welcome");
-var Welcome = ({
+exports.default = void 0;
+var _icons = require("@oceanbase/icons");
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _util = require("../_util");
+var _style = _interopRequireDefault(require("./style"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _step = _interopRequireDefault(require("./step"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
+const Welcome = ({
   title,
   description,
   bgImage,
@@ -50,15 +26,41 @@ var Welcome = ({
   buttonText,
   buttonProps,
   steps = [],
-  stepType = "default",
+  stepType = 'default',
   helps = [],
   locale,
   className,
   ...restProps
 }) => {
-  const isDefault = stepType === "default";
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('welcome');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+  const isDefault = stepType === 'default';
   const renderStep = (item, index) => {
-    const DefaultStep = () => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 12, "data-testid": "steps", key: item.title, className: `${prefix}-item` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-order-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-order` }, index + 1)), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)));
+    const DefaultStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Col, {
+      span: 12,
+      "data-testid": "steps",
+      className: `${prefixCls}-item`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-order-wrapper`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${prefixCls}-order`,
+          children: index + 1
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          className: `${prefixCls}-title`,
+          children: item.title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: `${prefixCls}-description`,
+          children: item.description
+        })]
+      })]
+    }, item.title);
     const StepProps = {
       title: item.title,
       description: item.description,
@@ -67,46 +69,101 @@ var Welcome = ({
       operations: item.operations,
       locale
     };
-    const StepItem = isDefault ? /* @__PURE__ */ import_react.default.createElement(DefaultStep, { key: item.title }) : /* @__PURE__ */ import_react.default.createElement(import_step.default, { "data-testid": "steps", key: item.title, ...StepProps });
+    const StepItem = isDefault ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultStep, {}, item.title) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_step.default, {
+      "data-testid": "steps",
+      ...StepProps
+    }, item.title);
     return StepItem;
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${`${prefix}-container`} ${className}`, ...restProps }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Row,
-    {
-      className: `${prefix}-page-header`,
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: `${prefixCls}-container ${className || ''}`,
+    ...restProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Row, {
+      className: `${prefixCls}-page-header`,
       style: {
         backgroundImage: `url("${bgImage}")`
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24, className: `${prefix}-title` }, /* @__PURE__ */ import_react.default.createElement("div", null, title)),
-    /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 16, className: `${prefix}-description` }, /* @__PURE__ */ import_react.default.createElement("p", null, description))
-  ), /* @__PURE__ */ import_react.default.createElement(import_design.Card, { bordered: false, className: `${prefix}-introduce` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 78 }, introduces.map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 8, key: item.image, className: `${prefix}-item`, "data-testid": "introduces" }, /* @__PURE__ */ import_react.default.createElement("img", { src: item.image, alt: "", height: 80 }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)))))), /* @__PURE__ */ import_react.default.createElement(import_design.Row, { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { justify: "space-around" }, steps.map((item, index) => renderStep(item, index)), isDefault && /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      size: "large",
-      type: "primary",
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
-      block: true,
-      ...buttonProps
-    },
-    buttonText
-  ))))), /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 10, className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, locale.helpTitle), helps.map((item) => /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      key: item.title,
-      shape: "round",
-      onClick: () => {
-        (0, import_util.directTo)(item.link);
       },
-      className: (0, import_classnames.default)({
-        [`${prefix}-more`]: !!item.isMore
-      }),
-      "data-testid": "helps"
-    },
-    item.title
-  )))));
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+        span: 24,
+        className: `${prefixCls}-title`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+        span: 16,
+        className: `${prefixCls}-description`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: description
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Card, {
+      bordered: false,
+      className: `${prefixCls}-introduce`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Row, {
+        gutter: 78,
+        children: introduces.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Col, {
+          span: 8,
+          className: `${prefixCls}-item`,
+          "data-testid": "introduces",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: item.image,
+            alt: "",
+            height: 80
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+              className: `${prefixCls}-title`,
+              children: item.title
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: `${prefixCls}-description`,
+              children: item.description
+            })]
+          })]
+        }, item.image))
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Row, {
+      className: `${prefixCls}-content`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+        span: 14,
+        className: isDefault ? `${prefixCls}-left` : 'borderRight',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Row, {
+          justify: "space-around",
+          children: [steps.map((item, index) => renderStep(item, index)), isDefault && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+            span: 24,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${prefixCls}-btn-wrapper`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+                size: "large",
+                type: "primary",
+                icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}),
+                block: true,
+                ...buttonProps,
+                children: buttonText
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Col, {
+        span: 10,
+        className: `${prefixCls}-right`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          className: `${prefixCls}-title`,
+          children: locale.helpTitle
+        }), helps.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+          shape: "round",
+          onClick: () => {
+            (0, _util.directTo)(item.link);
+          },
+          className: (0, _classnames.default)({
+            [`${prefixCls}-more`]: !!item.isMore
+          }),
+          "data-testid": "helps",
+          children: item.title
+        }, item.title))]
+      })]
+    })]
+  }));
 };
-var Welcome_default = (0, import_LocaleWrapper.default)({
-  componentName: "Welcome",
-  defaultLocale: import_zh_CN.default
-})(Welcome);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'Welcome',
+  defaultLocale: _zhCN.default
+})(Welcome);

package/lib/Welcome/locale/en-US.js

@@ -1,28 +1,10 @@
-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);
+"use strict";
 
-// src/Welcome/locale/en-US.ts
-var en_US_exports = {};
-__export(en_US_exports, {
-  default: () => en_US_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(en_US_exports);
-var en_US_default = {
-  helpTitle: "Quick Start",
-  defaultOperation: "Default Operation"
-};
+exports.default = void 0;
+var _default = exports.default = {
+  helpTitle: 'Quick Start',
+  defaultOperation: 'Default Operation'
+};

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    helpTitle: string;
+    defaultOperation: string;
+};
+export default _default;

package/lib/Welcome/locale/ja-JP.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  helpTitle: 'クイックスタート',
+  defaultOperation: 'デフォルト操作'
+};

package/lib/Welcome/locale/zh-CN.js

@@ -1,28 +1,10 @@
-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);
+"use strict";
 
-// src/Welcome/locale/zh-CN.ts
-var zh_CN_exports = {};
-__export(zh_CN_exports, {
-  default: () => zh_CN_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_CN_exports);
-var zh_CN_default = {
-  helpTitle: "快速上手",
-  defaultOperation: "默认操作"
-};
+exports.default = void 0;
+var _default = exports.default = {
+  helpTitle: '快速上手',
+  defaultOperation: '默认操作'
+};

package/lib/Welcome/locale/zh-TW.js

@@ -1,28 +1,10 @@
-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);
+"use strict";
 
-// src/Welcome/locale/zh-TW.ts
-var zh_TW_exports = {};
-__export(zh_TW_exports, {
-  default: () => zh_TW_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_TW_exports);
-var zh_TW_default = {
-  helpTitle: "快速上手",
-  defaultOperation: "默認操作"
-};
+exports.default = void 0;
+var _default = exports.default = {
+  helpTitle: '快速上手',
+  defaultOperation: '默認操作'
+};

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,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genWelcomeStepStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../../_util/genComponentStyleHook");
+const 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
+      }
+    }
+  };
+};
+exports.genWelcomeStepStyle = genWelcomeStepStyle;
+var _default = prefixCls => {
+  const useStyle = (0, _genComponentStyleHook.genComponentStyleHook)('WelcomeStep', token => {
+    return [genWelcomeStepStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+exports.default = _default;

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

@@ -1,51 +1,66 @@
-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);
+"use strict";
 
-// src/Welcome/step.tsx
-var step_exports = {};
-__export(step_exports, {
-  default: () => step_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(step_exports);
-var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var prefix = (0, import_util.getPrefix)("welcome-step");
-var WelcomeStep = (props) => {
-  const { title, description, operations, imgUrl, locale } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 11, key: title, className: prefix }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-left` }, /* @__PURE__ */ import_react.default.createElement("img", { src: imgUrl, alt: "", width: "60" })), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, description), operations && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-operations` }, operations == null ? void 0 : operations.map((operation, index) => {
-    return /* @__PURE__ */ import_react.default.createElement("span", { key: index, onClick: operation.onClick, className: `${prefix}-operation` }, operation.text || locale.defaultOperation);
-  }))));
+exports.default = void 0;
+var _design = require("@oceanbase/design");
+var _react = _interopRequireWildcard(require("react"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _style = _interopRequireDefault(require("./step/style"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+"use client";
+const WelcomeStep = props => {
+  const {
+    title,
+    description,
+    operations,
+    imgUrl,
+    locale
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('welcome-step');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Col, {
+    span: 11,
+    className: prefixCls,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-left`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: imgUrl,
+        alt: "",
+        width: "60"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${prefixCls}-right`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        className: `${prefixCls}-title`,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: `${prefixCls}-description`,
+        children: description
+      }), operations && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-operations`,
+        children: operations?.map((operation, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            onClick: operation.onClick,
+            className: `${prefixCls}-operation`,
+            children: operation.text || locale.defaultOperation
+          }, index);
+        })
+      })]
+    })]
+  }, title));
 };
-var step_default = (0, import_LocaleWrapper.default)({
-  componentName: "WelcomeStep",
-  defaultLocale: import_zh_CN.default
-})(WelcomeStep);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'WelcomeStep',
+  defaultLocale: _zhCN.default
+})(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;