@oceanbase/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

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/PageContainer/ItemRender.js

@@ -32,21 +32,21 @@ __export(ItemRender_exports, {
   default: () => ItemRender_default
 });
 module.exports = __toCommonJS(ItemRender_exports);
-var import_react = __toESM(require("react"));
 var import_useNavigate = __toESM(require("../_util/useNavigate"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var ItemRender_default = ({ route, params, routes, paths }) => {
   const routeIndex = routes.indexOf(route);
   const last = routeIndex === routes.length - 1;
   const title = route.title || route.breadcrumbName;
   const path = route.href || routes.slice(0, routeIndex + 1).map((item) => item.path).join("/");
   const navigate = (0, import_useNavigate.default)();
-  return last ? /* @__PURE__ */ import_react.default.createElement("span", null, title) : /* @__PURE__ */ import_react.default.createElement(
+  return last ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "a",
     {
       onClick: () => {
         navigate == null ? void 0 : navigate(path);
-      }
-    },
-    title
+      },
+      children: title
+    }
   );
 };

package/lib/PageContainer/index.d.ts

@@ -4,9 +4,11 @@ import React from 'react';
 export type ReloadType = boolean | IconComponentProps | React.ReactNode;
 export interface PageContainerLocale {
     reload?: string;
+    viewDocument?: string;
 }
 export type PageHeaderProps = AntPageHeaderProps & {
     reload?: ReloadType;
+    document?: string | React.MouseEventHandler<HTMLAnchorElement> | React.ReactNode;
 };
 export interface PageContainerProps extends AntPageContainerProps {
     header?: PageHeaderProps;

package/lib/PageContainer/index.js

@@ -43,11 +43,43 @@ var import_ItemRender = __toESM(require("./ItemRender"));
 var import_PageLoading = __toESM(require("../PageLoading"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DocumentIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: "url(#clip0_61186_2038)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M7.99992 4.66667C7.99992 3.95942 7.71897 3.28115 7.21887 2.78105C6.71877 2.28095 6.0405 2 5.33325 2H1.33325V12H5.99992C6.53035 12 7.03906 12.2107 7.41413 12.5858C7.78921 12.9609 7.99992 13.4696 7.99992 14M7.99992 4.66667V14M7.99992 4.66667C7.99992 3.95942 8.28087 3.28115 8.78097 2.78105C9.28106 2.28095 9.95934 2 10.6666 2H14.6666V12H9.99992C9.46949 12 8.96078 12.2107 8.5857 12.5858C8.21063 12.9609 7.99992 13.4696 7.99992 14",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "clip0_61186_2038", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+      ]
+    }
+  );
+};
 var PageContainer = ({
   prefixCls: customizePrefixCls,
   className,
-  /* compatible with title prop */
-  title,
+  /* compatible with title, title, subTitle, onBack, backIcon, extra prop */
+  title: titleProp,
+  subTitle: subTitleProp,
+  onBack: onBackProp,
+  backIcon: backIconProp,
+  breadcrumb: breadcrumbProp,
+  extra: extraProp,
+  // this is divider for above //
   header,
   content,
   extraContent,
@@ -62,22 +94,66 @@ var PageContainer = ({
   const rootPrefixCls = getPrefixCls();
   const prefixCls = getPrefixCls("pro-page-container", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const { reload, subTitle, breadcrumb } = header || {};
+  const { token } = import_design.theme.useToken();
+  const {
+    reload,
+    title = titleProp,
+    subTitle = subTitleProp,
+    onBack = onBackProp,
+    backIcon = backIconProp || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { style: { fontSize: token.fontSizeLG }, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, {}) }),
+    document,
+    breadcrumb = breadcrumbProp,
+    extra = extraProp
+  } = header || {};
   const reloadProps = (0, import_lodash.isObject)(reload) && !import_react.default.isValidElement(reload) ? reload : {};
   const reloadCls = (0, import_classnames.default)(
     `${rootPrefixCls}-page-header-heading-reload`,
     reloadProps.className
   );
-  const newSubTitle = (reload || subTitle) && /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, reload && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
-  const newHeader = header && {
+  const documentLink = typeof document === "string" ? document : void 0;
+  const documentClick = typeof document === "function" ? document : void 0;
+  const newSubTitle = (reload || subTitle || document) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { children: [
+    reload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.reload, children: (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls }) }),
+    subTitle,
+    document && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Divider,
+        {
+          type: "vertical",
+          className: `${rootPrefixCls}-page-header-heading-document-divider`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.viewDocument, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: documentLink,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: documentClick,
+          className: `${rootPrefixCls}-page-header-heading-document-icon`,
+          children: documentLink || documentClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DocumentIcon,
+            {
+              className: `${rootPrefixCls}-page-header-heading-document-default-icon`
+            }
+          ) : document
+        }
+      ) })
+    ] })
+  ] });
+  const newHeader = (header || title || newSubTitle || onBack || breadcrumb || extra) && {
     ...header,
+    title,
     subTitle: newSubTitle,
+    onBack,
+    backIcon,
     breadcrumb: breadcrumb && {
-      itemRender: (route, params, routes, paths) => /* @__PURE__ */ import_react.default.createElement(import_ItemRender.default, { route, params, routes, paths }),
+      itemRender: (route, params, routes, paths) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemRender.default, { route, params, routes, paths }),
       ...breadcrumb
-    }
+    },
+    extra
   };
-  const noHasHeader = !title && ["title", "subTitle", "extra", "tags", "avatar", "backIcon", "breadcrumb"].every(
+  const noHasHeader = ["title", "subTitle", "onBack", "breadcrumb", "extra", "tags", "avatar"].every(
     (item) => !(newHeader == null ? void 0 : newHeader[item])
   ) && !content && !extraContent && !tabList && !tabBarExtraContent;
   const pageContainerCls = (0, import_classnames.default)(
@@ -87,7 +163,7 @@ var PageContainer = ({
     className
   );
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_pro_components.PageContainer,
       {
         prefixCls: customizePrefixCls,
@@ -98,7 +174,7 @@ var PageContainer = ({
         extraContent,
         tabList,
         tabBarExtraContent,
-        loading: loading === true ? /* @__PURE__ */ import_react.default.createElement(import_PageLoading.default, { matchWrapperHeight: false }) : loading,
+        loading: loading === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PageLoading.default, { matchWrapperHeight: false }) : loading,
         footerToolBarProps: {
           // render footer under parent instead of body by default
           portalDom: false,

package/lib/PageContainer/locale/en-US.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -23,5 +23,6 @@ __export(en_US_exports, {
 });
 module.exports = __toCommonJS(en_US_exports);
 var en_US_default = {
-  reload: "Reload"
+  reload: "Reload",
+  viewDocument: "View Document"
 };

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

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

package/lib/{GraphToolbar/locale/zh-TW.js → PageContainer/locale/ja-JP.js}

@@ -16,17 +16,13 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/GraphToolbar/locale/zh-TW.ts
-var zh_TW_exports = {};
-__export(zh_TW_exports, {
-  default: () => zh_TW_default
+// src/PageContainer/locale/ja-JP.ts
+var ja_JP_exports = {};
+__export(ja_JP_exports, {
+  default: () => ja_JP_default
 });
-module.exports = __toCommonJS(zh_TW_exports);
-var zh_TW_default = {
-  fullscreen: "進入全屏",
-  shrink: "縮小",
-  enlarge: "放大",
-  reset: "顯示原始比例",
-  fitView: "自我調整畫布",
-  refresh: "刷新"
+module.exports = __toCommonJS(ja_JP_exports);
+var ja_JP_default = {
+  reload: "再読み込み",
+  viewDocument: "ドキュメントを見る"
 };

package/lib/PageContainer/locale/zh-CN.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -23,5 +23,6 @@ __export(zh_CN_exports, {
 });
 module.exports = __toCommonJS(zh_CN_exports);
 var zh_CN_default = {
-  reload: "刷新"
+  reload: "刷新",
+  viewDocument: "查看文档"
 };

package/lib/PageContainer/locale/zh-TW.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -23,5 +23,6 @@ __export(zh_TW_exports, {
 });
 module.exports = __toCommonJS(zh_TW_exports);
 var zh_TW_default = {
-  reload: "重新加載"
+  reload: "重新加載",
+  viewDocument: "查看文檔"
 };

package/lib/PageContainer/style/index.js

@@ -31,13 +31,10 @@ var genPageContainerStyle = (token) => {
     proComponentsCls,
     componentCls,
     colorBgLayout,
-    fontSizeHeading3,
-    controlHeightLG,
+    fontSizeHeading2,
     padding,
     paddingLG
   } = token;
-  const height = controlHeightLG;
-  const lineHeight = `${controlHeightLG}px`;
   return {
     [`${componentCls}`]: {
       minHeight: "100vh",
@@ -47,9 +44,9 @@ var genPageContainerStyle = (token) => {
       },
       [`${componentCls}-warp-page-header,${componentCls}-wrap-page-header`]: {
         // 减小内容区左右两侧间距
-        paddingInlineStart: `${paddingLG}px !important`,
-        paddingInlineEnd: `${paddingLG}px !important`,
-        paddingBlockStart: `${padding}px !important`,
+        paddingInlineStart: `${token.paddingXL}px !important`,
+        paddingInlineEnd: `${token.paddingXL}px !important`,
+        paddingBlockStart: `${paddingLG}px !important`,
         paddingBlockEnd: `${padding}px !important`,
         [`${antCls}-page-header-breadcrumb`]: {
           // overwritten pro-components style
@@ -60,31 +57,65 @@ var genPageContainerStyle = (token) => {
           paddingBlockStart: 0
         },
         [`${antCls}-page-header-heading-title`]: {
-          fontSize: fontSizeHeading3,
+          fontSize: fontSizeHeading2,
+          fontWeight: token.fontWeightStrong,
           marginInlineEnd: token.marginXS
         },
+        [`${antCls}-page-header-heading-sub-title`]: {
+          fontSize: token.fontSize
+        },
         [`${antCls}-page-header-heading-reload`]: {
           cursor: "pointer",
           fontSize: token.fontSizeLG,
           marginTop: token.marginXXS
         },
+        [`${antCls}-page-header-heading-document-divider`]: {
+          marginInline: 0,
+          height: token.size
+        },
+        [`${antCls}-page-header-heading-document-icon`]: {
+          display: "inline-block",
+          color: token.colorIcon,
+          fontSize: token.fontSizeLG,
+          cursor: "pointer",
+          "&:hover": {
+            color: token.colorLinkHover
+          },
+          "&:active": {
+            color: token.colorLinkActive
+          }
+        },
+        [`${antCls}-page-header-heading-document-default-icon`]: {
+          marginBottom: -3
+        },
+        [`${antCls}-page-header-heading-left`]: {
+          marginBlock: 0
+        },
         [`${antCls}-page-header-heading-extra`]: {
-          height,
-          lineHeight,
           marginBlock: 0
         },
         [`${antCls}-page-header-footer`]: {
-          marginBlockStart: 0
+          marginBlockStart: 0,
+          [`${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
+            borderBottom: `1px solid ${token.colorBorderSecondary}`,
+            left: -token.paddingXL,
+            right: -token.paddingXL
+          }
         }
       },
       [`${componentCls}-children-container`]: {
-        paddingInline: paddingLG,
+        paddingInline: token.paddingXL,
         paddingBlockStart: 0,
-        paddingBlockEnd: paddingLG,
+        paddingBlockEnd: padding,
         // set top tabs style when it is PageContainer's first child
         [`& > ${antCls}-tabs-top:not(${antCls}-tabs-card):first-child`]: {
           // equal to page header paddingBlockEnd
           marginTop: -padding
+        },
+        [`& > ${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
+          borderBottom: `1px solid ${token.colorBorderSecondary}`,
+          left: -token.paddingXL,
+          right: -token.paddingXL
         }
       }
     },

package/lib/PageLoading/index.js

@@ -1,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/PageLoading/index.tsx
@@ -32,15 +22,15 @@ __export(PageLoading_exports, {
   default: () => PageLoading_default
 });
 module.exports = __toCommonJS(PageLoading_exports);
-var import_react = __toESM(require("react"));
 var import_design = require("@oceanbase/design");
+var import_jsx_runtime = require("react/jsx-runtime");
 var PageLoading = ({
   prefixCls: customizePrefixCls,
   style,
   matchWrapperHeight = false,
   ...restProps
 }) => {
-  const spinElement = /* @__PURE__ */ import_react.default.createElement(
+  const spinElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_design.Spin,
     {
       size: "large",
@@ -58,15 +48,15 @@ var PageLoading = ({
       ...restProps
     }
   );
-  return matchWrapperHeight ? /* @__PURE__ */ import_react.default.createElement(
+  return matchWrapperHeight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       style: {
         height: "100%",
         position: "relative"
-      }
-    },
-    spinElement
+      },
+      children: spinElement
+    }
   ) : spinElement;
 };
 var PageLoading_default = PageLoading;

package/lib/Password/Content.js

@@ -1,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/Password/Content.tsx
@@ -34,14 +24,14 @@ __export(Content_exports, {
 module.exports = __toCommonJS(Content_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
 var import_design2 = require("@oceanbase/design");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
   const { token } = import_design2.theme.useToken();
   const statusIconMap = {
-    error: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseCircleFilled, { style: { color: token.colorError } }),
-    success: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckCircleFilled, { style: { color: token.colorSuccess } }),
-    wait: /* @__PURE__ */ import_react.default.createElement(
+    error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleFilled, { style: { color: token.colorError } }),
+    success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, { style: { color: token.colorSuccess } }),
+    wait: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         style: {
@@ -49,19 +39,19 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
           alignItems: "center",
           justifyContent: "center",
           height: token.fontSize * token.lineHeight
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            width: 8,
-            height: 8,
-            backgroundColor: token.colorFillSecondary,
-            borderRadius: "50%"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              backgroundColor: token.colorFillSecondary,
+              borderRadius: "50%"
+            }
           }
-        }
-      )
+        )
+      }
     )
   };
   const isRequireFail = rules.filter((rule) => !rule.optional).filter((rule) => fieldError.includes(rule.message)).length > 0;
@@ -78,21 +68,27 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
   } else {
     strokeColor = token.colorSuccess;
   }
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_design.Progress, { percent: value ? percent : 0, strokeColor, showInfo: false }), /* @__PURE__ */ import_react.default.createElement("ul", { style: { margin: 0, marginTop: "10px", listStyle: "none", padding: "0" } }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 4, direction: "vertical" }, rules == null ? void 0 : rules.map((rule) => {
-    const isError = fieldError.includes(rule.message);
-    let status = "wait";
-    if (isError) {
-      status = rule.optional ? "wait" : "error";
-    } else {
-      status = "success";
-    }
-    if (!value) {
-      status = "error";
-    }
-    if (!isTouched) {
-      status = "wait";
-    }
-    return /* @__PURE__ */ import_react.default.createElement("li", { key: `${rule.message}` }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: status === "wait" ? 14 : 8, align: "start" }, isValidating ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null) : statusIconMap[status], /* @__PURE__ */ import_react.default.createElement("span", null, rule.message)));
-  }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Progress, { percent: value ? percent : 0, strokeColor, showInfo: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { margin: 0, marginTop: "10px", listStyle: "none", padding: "0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Space, { size: 4, direction: "vertical", children: rules == null ? void 0 : rules.map((rule) => {
+      const isError = fieldError.includes(rule.message);
+      let status = "wait";
+      if (isError) {
+        status = rule.optional ? "wait" : "error";
+      } else {
+        status = "success";
+      }
+      if (!value) {
+        status = "error";
+      }
+      if (!isTouched) {
+        status = "wait";
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: status === "wait" ? 14 : 8, align: "start", children: [
+        isValidating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}) : statusIconMap[status],
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: rule.message })
+      ] }) }, `${rule.message}`);
+    }) }) })
+  ] });
 };
 var Content_default = Content;