@oceanbase/design 1.0.0-alpha.2 → 1.0.0-alpha.21

package/lib/alert/style/index.js

@@ -1,151 +1,245 @@
-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/alert/style/index.ts
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default,
-  genAlertStyle: () => genAlertStyle
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(style_exports);
-var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genTypeStyle = (color, token) => {
-  const borderWidth = 8;
-  return {
-    content: '""',
-    width: borderWidth,
-    // 绕 Y 轴旋转 60deg 是为了让圆角有一定的视觉拉伸，以与原先的边框贴合更加紧密
-    transform: "rotateY(60deg)",
-    backgroundColor: color,
-    position: "absolute",
-    height: `calc(100% - ${token.lineWidth}px)`,
-    left: -token.lineWidth - borderWidth / 2 / 2,
-    top: token.lineWidth / 2,
-    borderTopLeftRadius: token.borderRadiusLG,
-    borderBottomLeftRadius: token.borderRadiusLG
+exports.genAlertStyle = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var _lodash = require("lodash");
+const genAlertTypeStyle = (type, token) => {
+  const {
+    componentCls
+  } = token;
+  const textColor = token[`color${(0, _lodash.upperFirst)(type)}Text`];
+  const hoverColor = token[`color${(0, _lodash.upperFirst)(type)}TextHover`];
+  const activeColor = token[`color${(0, _lodash.upperFirst)(type)}TextActive`];
+  const linkStyle = {
+    color: textColor,
+    textDecoration: 'underline',
+    '&:hover': {
+      color: hoverColor
+    },
+    '&:active': {
+      color: activeColor
+    }
   };
-};
-var genColoredStyle = (color, colorHover, token) => {
-  const { componentCls, iconCls } = token;
   return {
     [`${componentCls}-message`]: {
-      color
+      color: textColor,
+      a: linkStyle
     },
     [`${componentCls}-description`]: {
-      color
+      a: linkStyle
     },
-    [`${componentCls}-close-icon`]: {
-      [`${iconCls}`]: {
-        color,
-        "&:hover": {
-          color: colorHover
-        }
-      },
-      [`${componentCls}-close-text`]: {
-        color,
-        "&:hover": {
-          color: colorHover
-        }
-      }
+    [`${componentCls}-icon`]: {
+      color: textColor
     }
   };
 };
-var genAlertStyle = (token) => {
+const genAlertStyle = token => {
   const {
     componentCls,
-    colorSuccess,
-    colorSuccessHover,
-    colorInfo,
-    colorInfoHover,
-    colorWarning,
-    colorWarningHover,
-    colorError,
-    colorErrorHover,
     colorIcon,
     colorIconHover,
-    motionDurationMid
+    motionDurationMid,
+    calc
   } = token;
-  const height = token.fontSize * token.lineHeight;
+  // height = fontSize * lineHeight
+  const height = calc(token.fontSize).mul(token.lineHeight).equal();
+  // icon width = fontSize + 1px (icon size)
+  const iconWidth = calc(token.fontSize).add(1).equal();
+  // content and action start position = icon width + icon margin
+  const contentStartOffset = calc(iconWidth).add(token.marginXS).equal();
+  // close icon width (approximate)
+  const closeIconWidth = height;
+  // Common calculated values
+  const contentWidth = (0, _cssinjs.unit)(calc(contentStartOffset).equal());
+  const closableContentWidth = (0, _cssinjs.unit)(calc(contentStartOffset).add(closeIconWidth).equal());
   return {
     [`${componentCls}`]: {
       // vertical align to flex-start
-      alignItems: "flex-start !important",
-      paddingRight: token.padding,
+      alignItems: 'flex-start !important',
+      paddingInline: token.padding,
+      position: 'relative',
+      [`${componentCls}-content`]: {
+        flex: `1 1 calc(100% - ${contentWidth})`,
+        minWidth: 0,
+        maxWidth: `calc(100% - ${contentWidth})`,
+        wordBreak: 'break-word'
+      },
+      [`${componentCls}-action`]: {
+        width: `calc(100% - ${contentWidth})`,
+        marginInlineStart: contentStartOffset
+      },
       [`${componentCls}-icon`]: {
-        height
+        height,
+        fontSize: iconWidth,
+        marginInlineEnd: token.marginXS,
+        flexShrink: 0
       },
       [`${componentCls}-close-icon`]: {
+        position: 'absolute',
+        top: token.paddingXS,
+        insetInlineEnd: token.padding,
         height,
         color: colorIcon,
         transition: `color ${motionDurationMid}`,
-        "&:hover": {
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        '&:hover': {
           color: colorIconHover
         }
+      },
+      // Default link styles (will be overridden by type-specific styles)
+      [`${componentCls}-message`]: {
+        a: {
+          textDecoration: 'underline'
+        }
+      },
+      [`${componentCls}-description`]: {
+        a: {
+          textDecoration: 'underline'
+        }
+      },
+      [`&${componentCls}-success`]: genAlertTypeStyle('success', token),
+      [`&${componentCls}-info`]: genAlertTypeStyle('info', token),
+      [`&${componentCls}-warning`]: genAlertTypeStyle('warning', token),
+      [`&${componentCls}-error`]: genAlertTypeStyle('error', token)
+    },
+    [`${componentCls}${componentCls}-closable`]: {
+      [`${componentCls}-content`]: {
+        flex: `1 1 calc(100% - ${closableContentWidth})`,
+        maxWidth: `calc(100% - ${closableContentWidth})`
+      },
+      [`${componentCls}-action`]: {
+        width: `calc(100% - ${closableContentWidth})`
       }
     },
     [`${componentCls}:not(${componentCls}-with-description)`]: {
-      paddingLeft: token.padding
+      flexWrap: 'wrap',
+      [`${componentCls}-action`]: {
+        marginTop: token.marginXS
+      }
     },
     [`${componentCls}${componentCls}-with-description`]: {
-      paddingBlock: token.padding,
+      paddingBlock: token.paddingSM,
+      flexWrap: 'wrap',
       [`${componentCls}-message`]: {
-        fontWeight: 500,
-        marginBottom: token.marginXXS
+        fontSize: token.fontSize,
+        fontWeight: token.fontWeightStrong,
+        marginBottom: token.marginXXS,
+        wordBreak: 'break-word'
       },
       [`${componentCls}-description`]: {
-        color: token.colorTextSecondary
-      },
-      [`${componentCls}-icon`]: {
-        fontSize: token.fontSizeHeading4,
-        height: token.fontSizeHeading3,
-        marginInlineEnd: token.margin
+        wordBreak: 'break-word'
       },
       [`${componentCls}-action`]: {
-        marginInlineStart: token.marginXS
+        marginTop: token.marginSM
+      },
+      [`${componentCls}-close-icon`]: {
+        top: token.paddingSM
       }
     },
-    [`${componentCls}:not(${componentCls}-banner):not(${componentCls}-ghost)`]: {
-      [`&${componentCls}-success::before`]: genTypeStyle(colorSuccess, token),
-      [`&${componentCls}-info::before`]: genTypeStyle(colorInfo, token),
-      [`&${componentCls}-warning::before`]: genTypeStyle(colorWarning, token),
-      [`&${componentCls}-error::before`]: genTypeStyle(colorError, token)
+    [`${componentCls}${componentCls}-with-action`]: {
+      paddingBlock: token.paddingSM
     },
     [`${componentCls}${componentCls}-ghost`]: {
-      backgroundColor: "transparent",
-      border: "none",
-      padding: 0,
+      backgroundColor: 'transparent',
+      border: 'none',
+      padding: '0px !important',
       borderRadius: 0
     },
-    [`${componentCls}-colored`]: {
-      [`&${componentCls}-success`]: genColoredStyle(colorSuccess, colorSuccessHover, token),
-      [`&${componentCls}-info`]: genColoredStyle(colorInfo, colorInfoHover, token),
-      [`&${componentCls}-warning`]: genColoredStyle(colorWarning, colorWarningHover, token),
-      [`&${componentCls}-error`]: genColoredStyle(colorError, colorErrorHover, token)
+    [`${componentCls}${componentCls}-mini`]: {
+      paddingBlock: token.paddingXXS,
+      paddingInline: token.paddingXS,
+      width: 'fit-content',
+      display: 'inline-flex',
+      alignItems: 'center',
+      flexWrap: 'nowrap',
+      [`${componentCls}-icon`]: {
+        marginInlineEnd: token.paddingXS,
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      [`${componentCls}-message`]: {
+        whiteSpace: 'nowrap',
+        wordBreak: 'normal',
+        overflow: 'visible',
+        lineHeight: token.lineHeight,
+        display: 'flex',
+        alignItems: 'center'
+      },
+      [`${componentCls}-content`]: {
+        display: 'flex',
+        alignItems: 'center',
+        flex: '0 1 auto',
+        whiteSpace: 'nowrap',
+        minWidth: 0,
+        lineHeight: token.lineHeight
+      },
+      [`${componentCls}-close-icon`]: {
+        position: 'relative',
+        top: token.paddingXXS,
+        insetInlineEnd: 'auto',
+        height: 'auto',
+        flexShrink: 0,
+        marginInlineStart: 0
+      },
+      [`&${componentCls}-closable`]: {
+        [`${componentCls}-content`]: {
+          paddingInlineEnd: token.paddingXS
+        }
+      },
+      [`&:not(${componentCls}-with-description)`]: {
+        flexWrap: 'nowrap',
+        [`${componentCls}-content`]: {
+          flex: '0 1 auto',
+          minWidth: 0,
+          maxWidth: 'none',
+          wordBreak: 'normal'
+        }
+      },
+      [`&${componentCls}-with-description`]: {
+        paddingBlock: token.paddingXXS,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        position: 'relative',
+        flexWrap: 'nowrap',
+        [`${componentCls}-icon`]: {
+          alignSelf: 'flex-start',
+          marginTop: 0
+        },
+        [`${componentCls}-content`]: {
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          flex: '0 1 auto',
+          minWidth: 0,
+          maxWidth: 'none',
+          wordBreak: 'normal'
+        },
+        [`${componentCls}-message`]: {
+          marginBottom: token.marginXXS,
+          whiteSpace: 'nowrap',
+          wordBreak: 'normal'
+        },
+        [`${componentCls}-description`]: {
+          whiteSpace: 'nowrap',
+          wordBreak: 'normal'
+        },
+        [`${componentCls}-close-icon`]: {
+          position: 'absolute',
+          top: token.paddingXXS,
+          insetInlineEnd: token.paddingXS
+        }
+      }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Alert", (token) => {
-    return [genAlertStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  genAlertStyle
-});
+exports.genAlertStyle = genAlertStyle;
+var _default = exports.default = (0, _genComponentStyleHook.genStyleHooks)('Alert', token => {
+  return [genAlertStyle(token)];
+});

package/lib/anchor/index.js

@@ -1,25 +1,27 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/anchor/index.ts
-var anchor_exports = {};
-module.exports = __toCommonJS(anchor_exports);
-__reExport(anchor_exports, require("antd/es/anchor/Anchor"), module.exports);
-__reExport(anchor_exports, require("antd/es/anchor"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/anchor/Anchor"),
-  ...require("antd/es/anchor")
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _Anchor = require("antd/es/anchor/Anchor");
+Object.keys(_Anchor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Anchor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Anchor[key];
+    }
+  });
+});
+var _anchor = require("antd/es/anchor");
+Object.keys(_anchor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _anchor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _anchor[key];
+    }
+  });
+});

package/lib/app/index.d.ts

@@ -1 +1,9 @@
+import React from 'react';
+import { App as AntApp } from 'antd';
+import type { AppProps } from 'antd/es/app';
 export * from 'antd/es/app';
+export type AppType = React.FC<AppProps> & {
+    useApp: typeof AntApp.useApp;
+};
+declare const App: AppType;
+export default App;

package/lib/app/index.js

@@ -1,23 +1,50 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/app/index.ts
-var app_exports = {};
-module.exports = __toCommonJS(app_exports);
-__reExport(app_exports, require("antd/es/app"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/app")
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _configProvider = _interopRequireDefault(require("../config-provider"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _app = require("antd/es/app");
+Object.keys(_app).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _app[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _app[key];
+    }
+  });
 });
+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; }
+const App = ({
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const prefixCls = getPrefixCls('app', customizePrefixCls);
+  const [wrapCSSVar] = (0, _style.default)(prefixCls);
+  const appCls = (0, _classnames.default)(className);
+  return wrapCSSVar( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.App, {
+    prefixCls: customizePrefixCls,
+    className: appCls,
+    ...restProps
+  }));
+};
+App.useApp = _antd.App.useApp;
+if (process.env.NODE_ENV !== 'production') {
+  App.displayName = _antd.App.displayName;
+}
+var _default = exports.default = App;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from '../../theme/interface';
+export type AppToken = FullToken<'App'>;
+export declare const genAppStyle: GenerateStyle<AppToken>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
+export default _default;

package/lib/app/style/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genAppStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genAppStyle = token => {
+  const {
+    antCls,
+    componentCls
+  } = token;
+  return {};
+};
+exports.genAppStyle = genAppStyle;
+var _default = exports.default = (0, _genComponentStyleHook.genStyleHooks)('App', token => {
+  return [genAppStyle(token)];
+});

package/lib/auto-complete/index.js

@@ -1,23 +1,16 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/auto-complete/index.ts
-var auto_complete_exports = {};
-module.exports = __toCommonJS(auto_complete_exports);
-__reExport(auto_complete_exports, require("antd/es/auto-complete"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/auto-complete")
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _autoComplete = require("antd/es/auto-complete");
+Object.keys(_autoComplete).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _autoComplete[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _autoComplete[key];
+    }
+  });
+});

package/lib/avatar/index.js

@@ -1,25 +1,27 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/avatar/index.ts
-var avatar_exports = {};
-module.exports = __toCommonJS(avatar_exports);
-__reExport(avatar_exports, require("antd/es/avatar/AvatarContext"), module.exports);
-__reExport(avatar_exports, require("antd/es/avatar"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/avatar/AvatarContext"),
-  ...require("antd/es/avatar")
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _AvatarContext = require("antd/es/avatar/AvatarContext");
+Object.keys(_AvatarContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AvatarContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AvatarContext[key];
+    }
+  });
+});
+var _avatar = require("antd/es/avatar");
+Object.keys(_avatar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _avatar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _avatar[key];
+    }
+  });
+});

package/lib/badge/index.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { BadgeProps as AntBadgeProps } from 'antd/es/badge';
+import type { ProgressProps as AntProgressProps } from 'antd/es/progress';
 export * from 'antd/es/badge';
 export interface BadgeProps extends AntBadgeProps {
     icon?: boolean | React.ReactNode;
+    progressProps?: AntProgressProps;
 }
 declare const _default: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>> & {
     Ribbon: React.FC<import("antd/es/badge/Ribbon").RibbonProps>;