@bifrostui/react 2.0.0-alpha.32 → 2.0.0-alpha.34

package/es/Alert/Alert.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   AlertCircleFilledIcon,
   CloseIcon,
@@ -40,35 +44,35 @@ import { IconButton } from "../IconButton";
 import "./index.css";
 const prefixCls = "bui-alert";
 const iconMap = {
-  danger: /* @__PURE__ */ React.createElement(
+  danger: /* @__PURE__ */ jsx(
     ErrorCircleFilledIcon,
     {
       color: "danger",
       className: `${prefixCls}-default-icon`
     }
   ),
-  success: /* @__PURE__ */ React.createElement(
+  success: /* @__PURE__ */ jsx(
     SuccessCircleFilledIcon,
     {
       color: "success",
       className: `${prefixCls}-default-icon`
     }
   ),
-  warning: /* @__PURE__ */ React.createElement(
+  warning: /* @__PURE__ */ jsx(
     AlertCircleFilledIcon,
     {
       color: "warning",
       className: `${prefixCls}-default-icon`
     }
   ),
-  info: /* @__PURE__ */ React.createElement(
+  info: /* @__PURE__ */ jsx(
     AlertCircleFilledIcon,
     {
       color: "info",
       className: `${prefixCls}-default-icon`
     }
   ),
-  primary: /* @__PURE__ */ React.createElement(
+  primary: /* @__PURE__ */ jsx(
     VolumeUpOutlinedIcon,
     {
       color: "primary",
@@ -81,32 +85,32 @@ const AlertIcon = (props) => {
   const { icon, color } = props;
   if (!icon)
     return null;
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-icon`) }, isMini && React.isValidElement(icon) ? React.cloneElement(icon, __spreadValues({}, { color: ((_a = icon.props) == null ? void 0 : _a.color) || color })) : icon);
+  return /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-icon`), children: isMini && React.isValidElement(icon) ? React.cloneElement(icon, __spreadValues({}, { color: ((_a = icon.props) == null ? void 0 : _a.color) || color })) : icon });
 };
 const AlertAction = (props) => {
   const { color, action, onClose } = props;
   if (!action && !onClose)
     return null;
   if (action) {
-    return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-action`, onClick: onClose }, action);
+    return /* @__PURE__ */ jsx("div", { className: `${prefixCls}-action`, onClick: onClose, children: action });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     IconButton,
     {
       className: `${prefixCls}-action`,
       color,
       onClick: onClose,
-      "aria-label": "\u5173\u95ED\u6309\u94AE"
-    },
-    /* @__PURE__ */ React.createElement(CloseIcon, null)
+      "aria-label": "\u5173\u95ED\u6309\u94AE",
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    }
   );
 };
 const Alert = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
-    color,
+    color = "primary",
+    icon = true,
+    variant = "standard",
     className,
-    icon,
-    variant,
     marquee,
     children,
     action,
@@ -114,43 +118,41 @@ const Alert = /* @__PURE__ */ React.forwardRef((props, ref) => {
     onClick
   } = _a, others = __objRest(_a, [
     "color",
-    "className",
     "icon",
     "variant",
+    "className",
     "marquee",
     "children",
     "action",
     "onClose",
     "onClick"
   ]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: clsx(prefixCls, className, [
         `${prefixCls}-${variant}-${color}`
       ]),
       onClick,
       ref
-    }, others),
-    /* @__PURE__ */ React.createElement(AlertIcon, { icon: icon === true ? iconMap[color] : icon, color }),
-    marquee ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-marquee` }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx(`${prefixCls}-content`, [
-          `${prefixCls}-marquee-content`
-        ])
-      },
-      children
-    )) : /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content` }, children),
-    /* @__PURE__ */ React.createElement(AlertAction, { action, onClose, color })
+    }, others), {
+      children: [
+        /* @__PURE__ */ jsx(AlertIcon, { icon: icon === true ? iconMap[color] : icon, color }),
+        marquee ? /* @__PURE__ */ jsx("div", { className: `${prefixCls}-marquee`, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(`${prefixCls}-content`, [
+              `${prefixCls}-marquee-content`
+            ]),
+            children
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: `${prefixCls}-content`, children }),
+        /* @__PURE__ */ jsx(AlertAction, { action, onClose, color })
+      ]
+    })
   );
 });
 Alert.displayName = "BuiAlert";
-Alert.defaultProps = {
-  icon: true,
-  color: "primary",
-  variant: "standard"
-};
 var Alert_default = Alert;
 export {
   Alert_default as default

package/es/Alert/__tests__/fixtures/A11yDemos.d.ts

@@ -1,17 +1,16 @@
-import * as React from 'react';
 /**
  * 自定义 Alert 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
  * 文件名必须是 customDemoComponent.tsx（固定约定）
  */
-export declare const basicAlertDemo: () => React.JSX.Element;
-export declare const multipleTypeAlertDemo: () => React.JSX.Element;
-export declare const actionAlertDemo: () => React.JSX.Element;
-export declare const complexInteractionAlertDemo: () => React.JSX.Element;
+export declare const basicAlertDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const multipleTypeAlertDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const actionAlertDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const complexInteractionAlertDemo: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
-    basicAlertDemo: () => React.JSX.Element;
-    multipleTypeAlertDemo: () => React.JSX.Element;
-    actionAlertDemo: () => React.JSX.Element;
-    complexInteractionAlertDemo: () => React.JSX.Element;
+    basicAlertDemo: () => import("react/jsx-runtime").JSX.Element;
+    multipleTypeAlertDemo: () => import("react/jsx-runtime").JSX.Element;
+    actionAlertDemo: () => import("react/jsx-runtime").JSX.Element;
+    complexInteractionAlertDemo: () => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/es/Alert/__tests__/fixtures/A11yDemos.js

@@ -1,96 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Alert from "../../Alert";
 const basicAlertDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     Alert,
     {
       color: "info",
       onClose: () => {
         console.log("\u5173\u95ED info alert");
-      }
-    },
-    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Alert \u7EC4\u4EF6\u793A\u4F8B"
-  ));
+      },
+      children: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Alert \u7EC4\u4EF6\u793A\u4F8B"
+    }
+  ) });
 };
 const multipleTypeAlertDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    Alert,
-    {
-      color: "info",
-      onClose: () => {
-        console.log("\u5173\u95ED info alert");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        color: "info",
+        onClose: () => {
+          console.log("\u5173\u95ED info alert");
+        },
+        children: "\u4FE1\u606F\u63D0\u793A"
       }
-    },
-    "\u4FE1\u606F\u63D0\u793A"
-  ), /* @__PURE__ */ React.createElement(
-    Alert,
-    {
-      color: "success",
-      onClose: () => {
-        console.log("\u5173\u95ED success alert");
+    ),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        color: "success",
+        onClose: () => {
+          console.log("\u5173\u95ED success alert");
+        },
+        children: "\u6210\u529F\u63D0\u793A"
       }
-    },
-    "\u6210\u529F\u63D0\u793A"
-  ), /* @__PURE__ */ React.createElement(
-    Alert,
-    {
-      color: "warning",
-      onClose: () => {
-        console.log("\u5173\u95ED warning alert");
+    ),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        color: "warning",
+        onClose: () => {
+          console.log("\u5173\u95ED warning alert");
+        },
+        children: "\u8B66\u544A\u63D0\u793A"
       }
-    },
-    "\u8B66\u544A\u63D0\u793A"
-  ), /* @__PURE__ */ React.createElement(
-    Alert,
-    {
-      color: "danger",
-      onClose: () => {
-        console.log("\u5173\u95ED danger alert");
+    ),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        color: "danger",
+        onClose: () => {
+          console.log("\u5173\u95ED danger alert");
+        },
+        children: "\u9519\u8BEF\u63D0\u793A"
       }
-    },
-    "\u9519\u8BEF\u63D0\u793A"
-  ));
+    )
+  ] });
 };
 const actionAlertDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     Alert,
     {
       color: "info",
-      action: /* @__PURE__ */ React.createElement(
+      action: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: () => {
             console.log("\u6267\u884C\u64CD\u4F5C");
-          }
-        },
-        "\u6267\u884C\u64CD\u4F5C"
+          },
+          children: "\u6267\u884C\u64CD\u4F5C"
+        }
       ),
       onClose: () => {
         console.log("\u5173\u95ED alert");
-      }
-    },
-    "\u8FD9\u662F\u4E00\u4E2A\u5E26\u64CD\u4F5C\u6309\u94AE\u7684 Alert \u7EC4\u4EF6"
-  ));
+      },
+      children: "\u8FD9\u662F\u4E00\u4E2A\u5E26\u64CD\u4F5C\u6309\u94AE\u7684 Alert \u7EC4\u4EF6"
+    }
+  ) });
 };
 const complexInteractionAlertDemo = () => {
   const ComplexInteractionAlertDemo = () => {
     const [showAlert, setShowAlert] = React.useState(true);
     if (!showAlert) {
-      return /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setShowAlert(true) }, "\u91CD\u65B0\u663E\u793A Alert");
+      return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setShowAlert(true), children: "\u91CD\u65B0\u663E\u793A Alert" });
     }
-    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       Alert,
       {
         color: "warning",
         onClose: () => {
           setShowAlert(false);
-        }
-      },
-      "\u8FD9\u662F\u4E00\u4E2A\u53EF\u4EE5\u5173\u95ED\u7684 Alert \u7EC4\u4EF6\uFF0C\u5173\u95ED\u540E\u4F1A\u663E\u793A\u91CD\u65B0\u663E\u793A\u6309\u94AE"
-    ));
+        },
+        children: "\u8FD9\u662F\u4E00\u4E2A\u53EF\u4EE5\u5173\u95ED\u7684 Alert \u7EC4\u4EF6\uFF0C\u5173\u95ED\u540E\u4F1A\u663E\u793A\u91CD\u65B0\u663E\u793A\u6309\u94AE"
+      }
+    ) });
   };
-  return /* @__PURE__ */ React.createElement(ComplexInteractionAlertDemo, null);
+  return /* @__PURE__ */ jsx(ComplexInteractionAlertDemo, {});
 };
 var A11yDemos_default = {
   basicAlertDemo,

package/es/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AvatarProps } from './Avatar.types';
 import './Avatar.less';
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/es/Avatar/Avatar.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as React from "react";
 import Image from "../Image";
@@ -64,7 +65,7 @@ const Avatar = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "placeholder",
     "ImageProps"
   ]);
-  const AvatarImg = src ? /* @__PURE__ */ React.createElement(
+  const AvatarImg = src ? /* @__PURE__ */ jsx(
     Image,
     __spreadProps(__spreadValues({
       src,
@@ -75,14 +76,14 @@ const Avatar = /* @__PURE__ */ React.forwardRef((props, ref) => {
       onError,
       onLoad
     }, ImageProps), {
-      className: clsx(ImageProps == null ? void 0 : ImageProps.className, `${prefixCls}-img`)
-    }),
-    children
+      className: clsx(ImageProps == null ? void 0 : ImageProps.className, `${prefixCls}-img`),
+      children
+    })
   ) : null;
-  const createElement = (element) => element ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-children` }, element) : null;
-  return /* @__PURE__ */ React.createElement(
+  const createElement = (element) => element ? /* @__PURE__ */ jsx("div", { className: `${prefixCls}-children`, children: element }) : null;
+  return /* @__PURE__ */ jsx(
     "div",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: clsx(
         prefixCls,
         className,
@@ -91,8 +92,9 @@ const Avatar = /* @__PURE__ */ React.forwardRef((props, ref) => {
       ),
       onClick,
       ref
-    }, others),
-    createElement(children) || AvatarImg
+    }, others), {
+      children: createElement(children) || AvatarImg
+    })
   );
 });
 Avatar.displayName = "BuiAvatar";

package/es/Avatar/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import './AvatarGroup.less';
 import { AvatarGroupProps } from './AvatarGroup.types';
-declare const AvatarGroup: React.ForwardRefExoticComponent<Omit<AvatarGroupProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AvatarGroup: React.ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default AvatarGroup;

package/es/Avatar/AvatarGroup.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React, { cloneElement } from "react";
 import Avatar from "./Avatar";
@@ -63,20 +64,23 @@ const AvatarGroup = /* @__PURE__ */ React.forwardRef(
         return null;
       const zIndex = orientation === "right" ? -index + avatarChildrenCount : index;
       if (maxCount && index === Number(maxCount)) {
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           Avatar,
           {
             variant,
             size,
             className: `${prefixCls}-extra`,
             style: { marginLeft: `-${spacing}`, zIndex },
-            onClick
-          },
-          `+${extraAvatarNum}`
+            onClick,
+            children: `+${extraAvatarNum}`
+          }
         );
       }
       const childStyle = {
-        className: clsx(`${prefixCls}-avatar`, (_a2 = child == null ? void 0 : child.props) == null ? void 0 : _a2.className),
+        className: clsx(
+          `${prefixCls}-avatar`,
+          (_a2 = child == null ? void 0 : child.props) == null ? void 0 : _a2.className
+        ),
         style: __spreadProps(__spreadValues({}, (_b = child == null ? void 0 : child.props) == null ? void 0 : _b.style), {
           marginLeft: `-${spacing}`,
           zIndex
@@ -86,7 +90,7 @@ const AvatarGroup = /* @__PURE__ */ React.forwardRef(
       };
       return React.isValidElement(child) ? cloneElement(child, __spreadValues({}, childStyle)) : child;
     }) : "";
-    return AvatarGroupItem ? /* @__PURE__ */ React.createElement("div", __spreadValues({ className: clsx(prefixCls, className), ref }, others), AvatarGroupItem) : null;
+    return AvatarGroupItem ? /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: clsx(prefixCls, className), ref }, others), { children: AvatarGroupItem })) : null;
   }
 );
 AvatarGroup.displayName = "BuiAvatarGroup";

package/es/Backdrop/Backdrop.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { BackdropProps } from './Backdrop.types';
 import './index.less';
-declare const Backdrop: React.ForwardRefExoticComponent<Omit<BackdropProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Backdrop: React.ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Backdrop;

package/es/Backdrop/Backdrop.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as React from "react";
 import Fade from "../Fade";
@@ -46,7 +50,7 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(
       "open",
       "transitionDuration"
     ]);
-    return /* @__PURE__ */ React.createElement(Fade, __spreadValues({ in: open, timeout: transitionDuration }, others), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(Fade, __spreadProps(__spreadValues({ in: open, timeout: transitionDuration }, others), { children: /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": "true",
@@ -57,10 +61,10 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(
           },
           className
         ),
-        ref
-      },
-      children
-    ));
+        ref,
+        children
+      }
+    ) }));
   }
 );
 Backdrop.displayName = "Backdrop";

package/es/Backdrop/__tests__/fixtures/A11yDemos.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
-export declare const basicBackdropDemo: () => React.JSX.Element;
-export declare const invisibleBackdropDemo: () => React.JSX.Element;
+export declare const basicBackdropDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const invisibleBackdropDemo: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
-    basicBackdropDemo: () => React.JSX.Element;
-    invisibleBackdropDemo: () => React.JSX.Element;
+    basicBackdropDemo: () => import("react/jsx-runtime").JSX.Element;
+    invisibleBackdropDemo: () => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/es/Backdrop/__tests__/fixtures/A11yDemos.js

@@ -1,10 +1,10 @@
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import Backdrop from "../../Backdrop";
 const basicBackdropDemo = () => {
-  return /* @__PURE__ */ React.createElement(Backdrop, { open: true });
+  return /* @__PURE__ */ jsx(Backdrop, { open: true });
 };
 const invisibleBackdropDemo = () => {
-  return /* @__PURE__ */ React.createElement(Backdrop, { open: true, invisible: true });
+  return /* @__PURE__ */ jsx(Backdrop, { open: true, invisible: true });
 };
 var A11yDemos_default = {
   basicBackdropDemo,

package/es/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { BadgeProps } from './Badge.types';
 import './index.less';
-declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Badge;

package/es/Badge/Badge.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as React from "react";
 import { useBadgeDisplay } from "./hooks/useBadgeDisplay";
@@ -79,26 +83,30 @@ const Badge = /* @__PURE__ */ React.forwardRef((props, ref) => {
   });
   if (invisible)
     return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: clsx(`${prefixCls}`, className, {
         [`${prefixCls}-position`]: children
       }),
       ref
-    }, others),
-    shouldShowBadge && /* @__PURE__ */ React.createElement(
-      "div",
-      __spreadValues({
-        className: clsx(
-          `${prefixCls}-${color}`,
-          `${prefixCls}-${variant}`,
-          `${prefixCls}-${type}`
-        )
-      }, ariaAttributes),
-      displayValue
-    ),
-    children
+    }, others), {
+      children: [
+        shouldShowBadge && /* @__PURE__ */ jsx(
+          "div",
+          __spreadProps(__spreadValues({
+            className: clsx(
+              `${prefixCls}-${color}`,
+              `${prefixCls}-${variant}`,
+              `${prefixCls}-${type}`
+            )
+          }, ariaAttributes), {
+            children: displayValue
+          })
+        ),
+        children
+      ]
+    })
   );
 });
 Badge.displayName = "BuiBadge";