@oceanbase/design 0.4.8 → 0.4.10

package/es/form/FormItem.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "tooltip"],
+var _excluded = ["children", "label", "tooltip", "action", "layout", "prefixCls", "className"],
   _excluded2 = ["icon", "type", "overlayInnerStyle"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -8,17 +8,36 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useContext } from 'react';
 import { Form as AntForm } from 'antd';
-import React from 'react';
-import { useTooltipTypeList } from "../tooltip/hooks/useTooltipTypeList";
+import { FormContext } from 'antd/es/form/context';
 import { isPlainObject } from 'lodash';
+import classNames from 'classnames';
+import ConfigProvider from "../config-provider";
+import { useTooltipTypeList } from "../tooltip/hooks/useTooltipTypeList";
+import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var AntFormItem = AntForm.Item;
-var Item = function Item(_ref) {
+var FormItem = function FormItem(_ref) {
   var _children$type;
   var children = _ref.children,
+    label = _ref.label,
     tooltip = _ref.tooltip,
+    action = _ref.action,
+    layout = _ref.layout,
+    customizePrefixCls = _ref.prefixCls,
+    className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('form', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  var formItemCls = classNames(className);
+  var _useContext2 = useContext(FormContext),
+    vertical = _useContext2.vertical;
   var typeList = useTooltipTypeList();
   // tooltip config
   if (_typeof(tooltip) === 'object' && ! /*#__PURE__*/React.isValidElement(tooltip)) {
@@ -37,16 +56,23 @@ var Item = function Item(_ref) {
       }, overlayInnerStyle)
     }, restTooltipProps);
   }
-  return /*#__PURE__*/_jsx(AntFormItem, _objectSpread(_objectSpread({
+  return wrapSSR( /*#__PURE__*/_jsx(AntFormItem, _objectSpread(_objectSpread({
+    label: action && (vertical || layout === 'vertical') ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [label, action && /*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-item-action"),
+        children: action
+      })]
+    }) : label,
     tooltip: tooltip
     // auto set required for Switch children to hide optional mark
     // @ts-ignore
     ,
-    required: isPlainObject(children) && (_children$type = children.type) !== null && _children$type !== void 0 && _children$type.__ANT_SWITCH ? true : undefined
+    required: isPlainObject(children) && (_children$type = children.type) !== null && _children$type !== void 0 && _children$type.__ANT_SWITCH ? true : undefined,
+    prefixCls: customizePrefixCls,
+    className: formItemCls
   }, restProps), {}, {
     children: children
-  }));
+  })));
 };
-var FormItem = Item;
 FormItem.useStatus = AntFormItem.useStatus;
 export default FormItem;

package/es/form/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["hideRequiredMark"];
+var _excluded = ["hideRequiredMark", "prefixCls", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -9,26 +9,36 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useContext } from 'react';
 import { Form as AntForm } from 'antd';
+import classNames from 'classnames';
 import ConfigProvider from "../config-provider";
 import Item from "./FormItem";
+import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from 'antd/es/form';
 var Form = function Form(_ref) {
   var hideRequiredMark = _ref.hideRequiredMark,
+    customizePrefixCls = _ref.prefixCls,
+    className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
     contextForm = _useContext.form;
-  return (
-    /*#__PURE__*/
-    // @ts-ignore to ignore children type error
-    _jsx(AntForm, _objectSpread({
-      requiredMark:
-      // could remove hideRequiredMark logic after https://github.com/ant-design/ant-design/pull/46299 is published
-      hideRequiredMark ? false : (contextForm === null || contextForm === void 0 ? void 0 : contextForm.requiredMark) !== undefined ? contextForm === null || contextForm === void 0 ? void 0 : contextForm.requiredMark : 'optional',
-      hideRequiredMark: hideRequiredMark,
-      preserve: false
-    }, restProps))
-  );
+  var prefixCls = getPrefixCls('form', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  var formCls = classNames(className);
+  return wrapSSR(
+  /*#__PURE__*/
+  // @ts-ignore to ignore children type error
+  _jsx(AntForm, _objectSpread({
+    requiredMark:
+    // could remove hideRequiredMark logic after https://github.com/ant-design/ant-design/pull/46299 is published
+    hideRequiredMark ? false : (contextForm === null || contextForm === void 0 ? void 0 : contextForm.requiredMark) !== undefined ? contextForm === null || contextForm === void 0 ? void 0 : contextForm.requiredMark : 'optional',
+    hideRequiredMark: hideRequiredMark,
+    preserve: false,
+    prefixCls: customizePrefixCls,
+    className: formCls
+  }, restProps)));
 };
 Form.Item = Item;
 Form.List = AntForm.List;

package/es/form/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export type FormToken = FullToken<'Form'>;
+export declare const genFormStyle: GenerateStyle<FormToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    hashId: string;
+};
+export default _default;

package/es/form/style/index.js

@@ -0,0 +1,20 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genFormStyle = function genFormStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-vertical"), _defineProperty({}, "".concat(componentCls, "-item:not(").concat(componentCls, "-item-horizontal)"), _defineProperty({}, "".concat(componentCls, "-item-label > label"), _defineProperty({
+    width: '100%'
+  }, "".concat(componentCls, "-item-action"), {
+    position: 'absolute',
+    right: 0
+  }))));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('Form', function (token) {
+    return [genFormStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/index.d.ts

@@ -56,6 +56,8 @@ export { default as Segmented } from './segmented';
 export type { SegmentedProps } from './segmented';
 export { default as Breadcrumb } from './breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';
+export { default as Dropdown } from './dropdown';
+export type { DropdownProps, DropdownButtonProps, DropdownButtonType } from './dropdown';
 export { default as Result } from './result';
 export type { ResultProps, ResultType, ResultStatusType } from './result';
 export { default as Spin } from './spin';

package/es/index.js

@@ -29,6 +29,7 @@ export { default as Slider } from "./slider";
 export { default as Tooltip } from "./tooltip";
 export { default as Segmented } from "./segmented";
 export { default as Breadcrumb } from "./breadcrumb";
+export { default as Dropdown } from "./dropdown";
 export { default as Result } from "./result";
 export { default as Spin } from "./spin";
 export { default as Badge } from "./badge";

package/es/list/index.d.ts

@@ -1,7 +1,7 @@
 import type { ListProps } from 'antd/es/list';
 export * from 'antd/es/list';
 export * from 'antd/es/list/Item';
-declare function List<T>({ pagination, ...restProps }: ListProps<T>): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare function List<T>({ pagination, ...restProps }: ListProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace List {
     var Item: import("antd/es/list/Item").ListItemTypeProps;
     var displayName: string;

package/es/modal/Progress.d.ts

@@ -6,5 +6,5 @@ export interface ModalProgressProps extends ModalProps {
     progress?: ProgressProps;
     description?: React.ReactNode;
 }
-declare const Progress: ({ prefixCls: customizePrefixCls, className, width, maskClosable, loading, progress, description, footer, ...restProps }: ModalProgressProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const Progress: ({ prefixCls: customizePrefixCls, className, width, maskClosable, loading, progress, description, footer, ...restProps }: ModalProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Progress;

package/es/result/404.js

@@ -4,11 +4,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import React from 'react';
 import Icon from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Svg404 = function Svg404() {
+  var _id5 = useUniqueInlineId();
+  var _id4 = useUniqueInlineId();
+  var _id3 = useUniqueInlineId();
+  var _id2 = useUniqueInlineId();
+  var _id = useUniqueInlineId();
   return /*#__PURE__*/_jsxs("svg", {
     width: "160px",
     height: "160px",
@@ -17,13 +23,13 @@ var Svg404 = function Svg404() {
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("ellipse", {
-        id: "path-1",
+        id: _id,
         cx: "34.818724",
         cy: "24.1269436",
         rx: "11.9125",
         ry: "32.8"
       }), /*#__PURE__*/_jsx("ellipse", {
-        id: "path-3",
+        id: _id2,
         cx: "15.452048",
         cy: "9.8598182",
         rx: "4.1375",
@@ -87,9 +93,9 @@ var Svg404 = function Svg404() {
                   rx: "11.9125",
                   ry: "32.8"
                 }), /*#__PURE__*/_jsxs("g", {
-                  id: "Clipped",
+                  id: _id3,
                   children: [/*#__PURE__*/_jsx("mask", {
-                    id: "oceanbase-design-result-404-mask-2",
+                    id: _id4,
                     fill: "white",
                     children: /*#__PURE__*/_jsx("use", {
                       transform: "translate(34.8187, 24.1269) rotate(-66.22) translate(-34.8187, -24.1269)"
@@ -100,7 +106,7 @@ var Svg404 = function Svg404() {
                     d: "M64.4080716,38.11257 C61.1330716,43.25007 46.5955716,42.33757 30.0205716,35.03757 C13.4455716,27.73757 2.79557161,17.55007 4.54557161,11.72507 C6.29557161,5.90007003 22.3330716,7.56257003 38.9080716,14.86257 C55.4830716,22.16257 68.1330716,32.28757 64.4080716,38.11257 L64.4080716,38.11257 Z",
                     fill: "#132039",
                     fillRule: "nonzero",
-                    mask: "url(#oceanbase-design-result-404-mask-2)"
+                    mask: "url(#".concat(_id4, ")")
                   })]
                 }), /*#__PURE__*/_jsx("ellipse", {
                   fill: "#F2F2F2",
@@ -111,10 +117,10 @@ var Svg404 = function Svg404() {
                   rx: "4.1375",
                   ry: "15.0625"
                 }), /*#__PURE__*/_jsxs("g", {
-                  id: "Clipped",
+                  id: _id3,
                   transform: "translate(17.0449, 18.1949)",
                   children: [/*#__PURE__*/_jsx("mask", {
-                    id: "oceanbase-design-result-success-404-4",
+                    id: _id5,
                     fill: "white",
                     children: /*#__PURE__*/_jsx("use", {
                       transform: "translate(15.452, 9.8598) rotate(-66.22) translate(-15.452, -9.8598)"
@@ -124,7 +130,7 @@ var Svg404 = function Svg404() {
                   }), /*#__PURE__*/_jsx("ellipse", {
                     fill: "#132039",
                     fillRule: "nonzero",
-                    mask: "url(#oceanbase-design-result-success-404-4)",
+                    mask: "url(#".concat(_id5, ")"),
                     transform: "translate(15.0168, 10.8584) rotate(-66.22) translate(-15.0168, -10.8584)",
                     cx: "15.0167984",
                     cy: "10.8583602",

package/es/result/500.js

@@ -4,11 +4,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import React from 'react';
 import Icon from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Svg500 = function Svg500() {
+  var _id2 = useUniqueInlineId();
+  var _id = useUniqueInlineId();
   return /*#__PURE__*/_jsxs("svg", {
     width: "160px",
     height: "160px",
@@ -17,7 +20,7 @@ var Svg500 = function Svg500() {
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("rect", {
-        id: "oceanbase-design-result-500-path-1",
+        id: _id,
         x: "23.4314575",
         y: "23.4314575",
         width: "113.137085",
@@ -55,16 +58,16 @@ var Svg500 = function Svg500() {
         }), /*#__PURE__*/_jsxs("g", {
           transform: "translate(0, 0)",
           children: [/*#__PURE__*/_jsx("mask", {
-            id: "oceanbase-design-result-500-mask-2",
+            id: _id2,
             fill: "white",
             children: /*#__PURE__*/_jsx("use", {
-              xlinkHref: "#oceanbase-design-result-500-path-1",
+              xlinkHref: "#".concat(_id),
               transform: "translate(80, 80) rotate(-45) translate(-80, -80)"
             })
           }), /*#__PURE__*/_jsx("g", {
             transform: "translate(80, 80) rotate(-45) translate(-80, -80)"
           }), /*#__PURE__*/_jsx("g", {
-            mask: "url(#oceanbase-design-result-500-mask-2)",
+            mask: "url(#".concat(_id2, ")"),
             children: /*#__PURE__*/_jsxs("g", {
               transform: "translate(18.166, 42.1381)",
               children: [/*#__PURE__*/_jsx("path", {

package/es/result/Error.js

@@ -4,11 +4,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import React from 'react';
 import Icon from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ErrorSvg = function ErrorSvg() {
+  var _id3 = useUniqueInlineId();
+  var _id2 = useUniqueInlineId();
+  var _id = useUniqueInlineId();
   return /*#__PURE__*/_jsxs("svg", {
     width: "160px",
     height: "160px",
@@ -17,7 +21,7 @@ var ErrorSvg = function ErrorSvg() {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("path", {
         d: "M33.1125,0.0125 L100.6125,0.0125 C118.8875,0.0125 133.725,14.85 133.725,33.125 L133.725,118.1 L33.1125,118.1 C14.8375,118.1 0,103.2625 0,84.9875 L0,33.1125 C0,14.8375 14.8375,0 33.1125,0 L33.1125,0.0125 Z",
-        id: "oceanbase-design-result-error-path-1"
+        id: _id
       })
     }), /*#__PURE__*/_jsx("g", {
       stroke: "none",
@@ -51,16 +55,16 @@ var ErrorSvg = function ErrorSvg() {
             rx: "0.9375"
           })]
         }), /*#__PURE__*/_jsxs("g", {
-          id: "Clipped",
+          id: _id2,
           transform: "translate(14.9125, 13.75)",
           children: [/*#__PURE__*/_jsx("mask", {
-            id: "oceanbase-design-result-error-mask-2",
+            id: _id3,
             fill: "white",
             children: /*#__PURE__*/_jsx("use", {
-              href: "#oceanbase-design-result-error-path-1"
+              href: "#".concat(_id)
             })
           }), /*#__PURE__*/_jsx("g", {}), /*#__PURE__*/_jsx("g", {
-            mask: "url(#oceanbase-design-result-error-mask-2)",
+            mask: "url(#".concat(_id3, ")"),
             children: /*#__PURE__*/_jsxs("g", {
               transform: "translate(10.4625, 25.15)",
               children: [/*#__PURE__*/_jsx("path", {

package/es/result/Processing.js

@@ -4,11 +4,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import React from 'react';
 import Icon from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ProcessingSvg = function ProcessingSvg() {
+  var _id3 = useUniqueInlineId();
+  var _id2 = useUniqueInlineId();
+  var _id = useUniqueInlineId();
   return /*#__PURE__*/_jsxs("svg", {
     width: "160px",
     height: "160px",
@@ -18,7 +22,7 @@ var ProcessingSvg = function ProcessingSvg() {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("path", {
         d: "M33.1125,0.0125 L100.6125,0.0125 C118.8875,0.0125 133.725,14.85 133.725,33.125 L133.725,118.1 L33.1125,118.1 C14.8375,118.1 4.4408921e-15,103.2625 4.4408921e-15,84.9875 L4.4408921e-15,33.1125 C4.4408921e-15,14.8375 14.8375,0 33.1125,0 L33.1125,0.0125 Z",
-        id: "oceanbase-design-result-processing-path-1"
+        id: _id
       })
     }), /*#__PURE__*/_jsx("g", {
       stroke: "none",
@@ -132,16 +136,16 @@ var ProcessingSvg = function ProcessingSvg() {
             points: "4.225 32.1125 5.9875 51.8875 37.8375 51.8875 39.5875 32.1125"
           })]
         }), /*#__PURE__*/_jsxs("g", {
-          id: "Clipped",
+          id: _id2,
           transform: "translate(14.9125, 13.75)",
           children: [/*#__PURE__*/_jsx("mask", {
-            id: "oceanbase-design-result-processing-mask-2",
+            id: _id3,
             fill: "white",
             children: /*#__PURE__*/_jsx("use", {
-              href: "#oceanbase-design-result-processing-path-1"
+              href: "#".concat(_id)
             })
           }), /*#__PURE__*/_jsx("g", {}), /*#__PURE__*/_jsx("g", {
-            mask: "url(#oceanbase-design-result-processing-mask-2)",
+            mask: "url(#".concat(_id3, ")"),
             children: /*#__PURE__*/_jsxs("g", {
               transform: "translate(31.5625, 35.9375)",
               children: [/*#__PURE__*/_jsx("rect", {

package/es/result/Success.js

@@ -4,11 +4,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import React from 'react';
 import Icon from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SuccessSvg = function SuccessSvg() {
+  var _id14 = useUniqueInlineId();
+  var _id13 = useUniqueInlineId();
+  var _id12 = useUniqueInlineId();
+  var _id11 = useUniqueInlineId();
+  var _id10 = useUniqueInlineId();
+  var _id9 = useUniqueInlineId();
+  var _id8 = useUniqueInlineId();
+  var _id7 = useUniqueInlineId();
+  var _id6 = useUniqueInlineId();
+  var _id5 = useUniqueInlineId();
+  var _id4 = useUniqueInlineId();
+  var _id3 = useUniqueInlineId();
+  var _id2 = useUniqueInlineId();
+  var _id = useUniqueInlineId();
   return /*#__PURE__*/_jsxs("svg", {
     width: "160px",
     height: "160px",
@@ -17,19 +32,19 @@ var SuccessSvg = function SuccessSvg() {
     children: [/*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("path", {
         d: "M33.125,0 L100.625,0 C118.875,0 133.75,14.875 133.75,33.125 L133.75,118.125 L33.125,118.125 C14.875,118.125 0,103.25 0,85 L0,33.125 C0,14.875 14.875,0 33.125,0 Z",
-        id: "oceanbase-design-result-success-path-1"
+        id: _id
       }), /*#__PURE__*/_jsx("path", {
         d: "M1.43012646,5.5292612 L17.6801265,0.154261199 C19.1801265,-0.345738801 20.8051265,0.404261199 21.1801265,1.9042612 L21.9301265,4.1542612 C22.3051265,5.2792612 21.6801265,6.5292612 20.5551265,6.9042612 L3.80512646,12.5292612 C2.68012646,12.9042612 1.43012646,12.2792612 1.05512646,11.1542612 L0.0551264646,8.2792612 C-0.194873535,7.1542612 0.430126465,5.9042612 1.43012646,5.5292612 L1.43012646,5.5292612 Z",
-        id: "oceanbase-design-result-success-path-3"
+        id: _id2
       }), /*#__PURE__*/_jsx("path", {
         d: "M1.89214041,4.7792612 L15.8921404,0.154261199 C17.3921404,-0.345738801 18.8921404,0.404261199 19.3921404,1.9042612 L20.2671404,4.4042612 C20.7671404,5.9042612 20.0171404,7.4042612 18.5171404,7.9042612 L4.51714041,12.5292612 C3.01714041,13.0292612 1.51714041,12.2792612 1.01714041,10.7792612 L0.142140412,8.2792612 C-0.357859588,6.9042612 0.517140412,5.2792612 1.89214041,4.7792612 Z",
-        id: "oceanbase-design-result-success-path-5"
+        id: _id3
       }), /*#__PURE__*/_jsx("path", {
         d: "M2.02814371,4.73308102 L15.9031437,0.108081022 C17.1531437,-0.266918978 18.5281437,0.358081022 19.0281437,1.60808102 L20.0281437,4.60808102 C20.4031437,5.85808102 19.7781437,7.23308102 18.5281437,7.73308102 L4.65314371,12.358081 C3.02814371,12.858081 1.27814371,11.983081 0.778143715,10.483081 L0.153143715,8.60808102 C-0.346856285,6.98308102 0.403143715,5.23308102 2.02814371,4.73308102 Z",
-        id: "oceanbase-design-result-success-path-7"
+        id: _id4
       }), /*#__PURE__*/_jsx("path", {
         d: "M2.08661279,3.86102208 L13.2116128,0.111022078 C14.0866128,-0.263977922 15.0866128,0.361022078 15.4616128,1.23602208 L16.4616128,4.36102208 C16.9616128,5.73602208 16.2116128,7.36102208 14.7116128,7.73602208 L4.46161279,11.1110221 C2.96161279,11.6110221 1.21161279,10.7360221 0.711612789,9.23602208 L0.0866127887,7.48602208 C-0.288387211,5.98602208 0.586612789,4.36102208 2.08661279,3.86102208 Z",
-        id: "oceanbase-design-result-success-path-9"
+        id: _id5
       })]
     }), /*#__PURE__*/_jsx("g", {
       stroke: "none",
@@ -41,13 +56,13 @@ var SuccessSvg = function SuccessSvg() {
           fill: "#0181FD"
         }), /*#__PURE__*/_jsxs("g", {
           children: [/*#__PURE__*/_jsx("mask", {
-            id: "oceanbase-design-result-success-mask-2",
+            id: _id6,
             fill: "white",
             children: /*#__PURE__*/_jsx("use", {
-              href: "#oceanbase-design-result-success-path-1"
+              href: "#".concat(_id)
             })
           }), /*#__PURE__*/_jsx("g", {}), /*#__PURE__*/_jsx("g", {
-            mask: "url(#oceanbase-design-result-success-mask-2)",
+            mask: "url(#".concat(_id6, ")"),
             children: /*#__PURE__*/_jsxs("g", {
               transform: "translate(-8.125, 9.25)",
               children: [/*#__PURE__*/_jsx("path", {
@@ -96,17 +111,17 @@ var SuccessSvg = function SuccessSvg() {
                   }), /*#__PURE__*/_jsxs("g", {
                     transform: "translate(39.5699, 47.5344)",
                     children: [/*#__PURE__*/_jsx("mask", {
-                      id: "oceanbase-design-result-success-mask-4",
+                      id: _id7,
                       fill: "white",
                       children: /*#__PURE__*/_jsx("use", {
-                        href: "#oceanbase-design-result-success-path-3"
+                        href: "#".concat(_id2)
                       })
                     }), /*#__PURE__*/_jsx("g", {
-                      id: "SVGID_00000136373575218028105800000015833068694952139445_"
+                      id: _id8
                     }), /*#__PURE__*/_jsx("path", {
                       d: "M0.555126465,5.7792612 L11.8051265,2.0292612 C12.8051265,1.6542612 13.9301265,2.2792612 14.3051265,3.2792612 L15.5551265,7.0292612 C15.8051265,7.7792612 15.4301265,8.6542612 14.6801265,8.9042612 L2.93012646,12.7792612 C2.18012646,13.0292612 1.30512646,12.6542612 1.05512646,11.9042612 L-0.319873535,7.6542612 C-0.569873535,6.9042612 -0.194873535,6.0292612 0.555126465,5.7792612 Z",
                       fill: "#D8D8D8",
-                      mask: "url(#oceanbase-design-result-success-mask-4)"
+                      mask: "url(#".concat(_id7, ")")
                     })]
                   }), /*#__PURE__*/_jsx("path", {
                     d: "M47.25,58.6887085 L61.25,54.0637085 C62.75,53.5637085 64.25,54.3137085 64.75,55.8137085 L65.625,58.3137085 C66.125,59.8137085 65.375,61.3137085 63.875,61.8137085 L49.875,66.4387085 C48.375,66.9387085 46.875,66.1887085 46.375,64.6887085 L45.5,62.1887085 C45,60.8137085 45.875,59.1887085 47.25,58.6887085 Z",
@@ -114,17 +129,17 @@ var SuccessSvg = function SuccessSvg() {
                   }), /*#__PURE__*/_jsxs("g", {
                     transform: "translate(45.3579, 53.9094)",
                     children: [/*#__PURE__*/_jsx("mask", {
-                      id: "oceanbase-design-result-success-mask-6",
+                      id: _id9,
                       fill: "white",
                       children: /*#__PURE__*/_jsx("use", {
-                        href: "#oceanbase-design-result-success-path-5"
+                        href: "#".concat(_id3)
                       })
                     }), /*#__PURE__*/_jsx("g", {
-                      id: "SVGID_00000072260953934706606590000017879755367803290522_"
+                      id: _id10
                     }), /*#__PURE__*/_jsx("path", {
                       d: "M-6.73285959,7.5292612 L8.76714041,2.4042612 C9.76714041,2.0292612 10.8921404,2.6542612 11.2671404,3.6542612 L12.6421404,7.7792612 C13.0171404,8.7792612 12.3921404,9.9042612 11.3921404,10.2792612 L-4.23285959,15.5292612 C-5.23285959,15.9042612 -6.35785959,15.2792612 -6.73285959,14.2792612 L-8.10785959,10.1542612 C-8.35785959,9.0292612 -7.73285959,7.9042612 -6.73285959,7.5292612 Z",
                       fill: "#D8D8D8",
-                      mask: "url(#oceanbase-design-result-success-mask-6)"
+                      mask: "url(#".concat(_id9, ")")
                     })]
                   }), /*#__PURE__*/_jsx("path", {
                     d: "M49.25,66.5637085 L63.125,61.9387085 C64.375,61.5637085 65.75,62.1887085 66.25,63.4387085 L67.25,66.4387085 C67.625,67.6887085 67,69.0637085 65.75,69.5637085 L51.875,74.1887085 C50.25,74.6887085 48.5,73.8137085 48,72.3137085 L47.375,70.4387085 C46.875,68.8137085 47.625,67.0637085 49.25,66.5637085 Z",
@@ -132,17 +147,17 @@ var SuccessSvg = function SuccessSvg() {
                   }), /*#__PURE__*/_jsxs("g", {
                     transform: "translate(47.2219, 61.8306)",
                     children: [/*#__PURE__*/_jsx("mask", {
-                      id: "oceanbase-design-result-success-mask-8",
+                      id: _id11,
                       fill: "white",
                       children: /*#__PURE__*/_jsx("use", {
-                        href: "#oceanbase-design-result-success-path-7"
+                        href: "#".concat(_id4)
                       })
                     }), /*#__PURE__*/_jsx("g", {
-                      id: "SVGID_00000019653314099838397220000000586077130363906990_"
+                      id: _id12
                     }), /*#__PURE__*/_jsx("path", {
                       d: "M-5.09685629,7.10808102 L8.77814371,2.48308102 C10.0281437,2.10808102 11.4031437,2.73308102 11.9031437,3.98308102 L12.9031437,6.98308102 C13.2781437,8.23308102 12.6531437,9.60808102 11.4031437,10.108081 L-2.47185629,14.733081 C-4.09685629,15.233081 -5.84685629,14.358081 -6.34685629,12.858081 L-6.97185629,10.983081 C-7.59685629,9.35808102 -6.72185629,7.73308102 -5.09685629,7.10808102 Z",
                       fill: "#D8D8D8",
-                      mask: "url(#oceanbase-design-result-success-mask-8)"
+                      mask: "url(#".concat(_id11, ")")
                     })]
                   }), /*#__PURE__*/_jsx("polygon", {
                     fill: "#132039",
@@ -153,17 +168,17 @@ var SuccessSvg = function SuccessSvg() {
                   }), /*#__PURE__*/_jsxs("g", {
                     transform: "translate(50.7884, 69.8277)",
                     children: [/*#__PURE__*/_jsx("mask", {
-                      id: "oceanbase-design-result-success-mask-10",
+                      id: _id13,
                       fill: "white",
                       children: /*#__PURE__*/_jsx("use", {
-                        href: "#oceanbase-design-result-success-path-9"
+                        href: "#".concat(_id5)
                       })
                     }), /*#__PURE__*/_jsx("g", {
-                      id: "SVGID_00000091695442429382600100000003029485216806722220_"
+                      id: _id14
                     }), /*#__PURE__*/_jsx("path", {
                       d: "M-3.66338721,5.73602208 L7.46161279,1.98602208 C8.33661279,1.61102208 9.33661279,2.23602208 9.71161279,3.11102208 L10.7116128,6.23602208 C11.2116128,7.61102208 10.4616128,9.23602208 8.96161279,9.61102208 L-1.28838721,12.9860221 C-2.78838721,13.4860221 -4.53838721,12.6110221 -5.03838721,11.1110221 L-5.53838721,9.48602208 C-6.16338721,7.86102208 -5.28838721,6.23602208 -3.66338721,5.73602208 Z",
                       fill: "#D8D8D8",
-                      mask: "url(#oceanbase-design-result-success-mask-10)"
+                      mask: "url(#".concat(_id13, ")")
                     })]
                   }), /*#__PURE__*/_jsx("path", {
                     d: "M0,84.0637085 L29.25,69.5637085 C31.875,67.6887085 36.25,53.6887085 36.25,53.6887085 C36.625,52.0637085 37.875,50.6887085 39.5,50.3137085 L47.875,47.8137085 L46.625,58.3137085 L46.625,58.3137085 C47.25,63.5637085 47.75,71.3137085 40.875,75.8137085 C37.5,79.6887085 26.25,94.1887085 26.25,94.1887085 L11.375,98.1887085 L0,84.0637085 L0,84.0637085 Z",

package/es/result/Warning.js

@@ -4,11 +4,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import React from 'react';
 import Icon from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var WarningSvg = function WarningSvg() {
+  var _id3 = useUniqueInlineId();
+  var _id2 = useUniqueInlineId();
+  var _id = useUniqueInlineId();
   return /*#__PURE__*/_jsxs("svg", {
     width: "160px",
     height: "160px",
@@ -18,7 +22,7 @@ var WarningSvg = function WarningSvg() {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("path", {
         d: "M33.1125,0 L100.6125,0 C118.8875,0 133.725,14.8375 133.725,33.1125 L133.725,118.0875 L33.1125,118.0875 C14.8375,118.0875 -4.4408921e-15,103.25 -4.4408921e-15,84.975 L-4.4408921e-15,33.1125 C-4.4408921e-15,14.8375 14.8375,0 33.1125,0 Z",
-        id: "oceanbase-design-result-warning-path-1"
+        id: _id
       })
     }), /*#__PURE__*/_jsx("g", {
       stroke: "none",
@@ -32,16 +36,16 @@ var WarningSvg = function WarningSvg() {
           fill: "#0181FD",
           fillRule: "nonzero"
         }), /*#__PURE__*/_jsxs("g", {
-          id: "Clipped",
+          id: _id2,
           transform: "translate(14.9125, 13.75)",
           children: [/*#__PURE__*/_jsx("mask", {
-            id: "oceanbase-design-result-warning-mask-2",
+            id: _id3,
             fill: "white",
             children: /*#__PURE__*/_jsx("use", {
-              href: "#oceanbase-design-result-warning-path-1"
+              href: "#".concat(_id)
             })
           }), /*#__PURE__*/_jsx("g", {}), /*#__PURE__*/_jsx("g", {
-            mask: "url(#oceanbase-design-result-warning-mask-2)",
+            mask: "url(#".concat(_id3, ")"),
             children: /*#__PURE__*/_jsxs("g", {
               transform: "translate(-13.25, 47.0625)",
               children: [/*#__PURE__*/_jsx("path", {