@bifrostui/react 1.4.8-beta.0 → 2.0.0-beta.1

package/dist/Collapse/Collapse.js

@@ -61,14 +61,12 @@ __export(Collapse_exports, {
 module.exports = __toCommonJS(Collapse_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
-var import_clsx = __toESM(require("clsx"));
 var import_Transition = require("../Transition");
 var import_Collapse2 = require("./Collapse.css");
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
   exit: import_utils.easing.sharp
 };
-const FIT_CONTENT = "fit-content";
 const defaultTimeout = {
   enter: import_utils.duration.enteringScreen,
   exit: import_utils.duration.leavingScreen
@@ -97,6 +95,7 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "className",
     "children"
   ]);
+  const nodeRef = (0, import_utils.useForkRef)(ref);
   const wrapperRef = (0, import_react.useRef)(null);
   const collapseRef = (0, import_utils.useForkRef)(wrapperRef, ref);
   const transitions = (0, import_utils.createTransitions)();
@@ -104,11 +103,11 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const size = isHorizontal ? "width" : "height";
   const getCollapseWrapperSize = (reactNode) => {
-    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : FIT_CONTENT;
+    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : "fit-content";
   };
   (0, import_react.useEffect)(() => {
     var _a2, _b, _c, _d;
-    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === FIT_CONTENT) {
+    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === "fit-content") {
       wrapperRef.current.style[size] = getCollapseWrapperSize(
         (_d = (_c = wrapperRef.current) == null ? void 0 : _c.children) == null ? void 0 : _d[0]
       );
@@ -119,6 +118,7 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   return /* @__PURE__ */ import_react.default.createElement(
     import_Transition.Transition,
     __spreadProps(__spreadValues({}, other), {
+      ref: nodeRef,
       in: inProp,
       timeout,
       delay,
@@ -146,17 +146,14 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
       };
       return import_react.default.createElement(
         "div",
-        __spreadProps(__spreadValues({
-          className: (0, import_clsx.default)("bui-collapse", {
-            className
-          }),
+        {
+          className: `bui-collapse ${className}`,
           style: __spreadValues(__spreadProps(__spreadValues({}, style), {
             transition,
             WebkitTransition: transition
-          }), wrapperSize())
-        }, childProps), {
+          }), wrapperSize()),
           ref: collapseRef
-        }),
+        },
         import_react.default.cloneElement(children, __spreadValues({
           style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
         }, childProps))

package/dist/CollapsePanel/CollapsePanel.css

@@ -2,8 +2,6 @@
   --width: var(--bui-collapse-panel-width, 100%);
   --header-padding: var(--bui-collapse-panel-header-padding, var(--bui-spacing-lg) 0);
   --content-padding: var(--bui-collapse-panel-content-padding, var(--bui-spacing-lg) 0);
-  --title-font-size: var(--bui-collapse-panel-title-font-size, var(--bui-title-size-3));
-  --content-font-size: var(--bui-collapse-panel-content-font-size, var(--bui-text-size-1));
   width: var(--width);
   background-color: var(--bui-color-bg-view);
   color: var(--bui-color-fg-default);
@@ -17,7 +15,7 @@
 }
 .bui-collapse-panel-item-header-label {
   padding: var(--header-padding);
-  font-size: var(--title-font-size);
+  font-size: var(--bui-title-size-2);
 }
 .bui-collapse-panel-item-header-icon-arrow {
   transform: rotate(0deg);
@@ -28,7 +26,7 @@
 }
 .bui-collapse-panel-item-content {
   padding: var(--content-padding);
-  font-size: var(--content-font-size);
+  font-size: var(--bui-text-size-1);
   transition: height 0.5s ease;
   overflow: hidden;
 }

package/dist/CollapsePanel/CollapsePanelItem.js

@@ -60,53 +60,52 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_Collapse = require("../Collapse");
 const prefixCls = "bui-collapse-panel-item";
-const CollapsePanelItem = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    style,
-    label,
-    children,
-    icon,
-    active,
-    onClick
-  } = _a, others = __objRest(_a, [
-    "className",
-    "style",
-    "label",
-    "children",
-    "icon",
-    "active",
-    "onClick"
-  ]);
-  const isControlledIcon = typeof icon === "function";
-  const getIcon = () => {
-    return typeof icon === "function" ? icon(active) : icon;
-  };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadValues({
-      className: (0, import_clsx.default)(prefixCls, active && `${prefixCls}-active`, className),
+const CollapsePanelItem = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
       style,
-      ref
-    }, others),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ import_react.default.createElement(
+      label,
+      children,
+      icon,
+      active = false,
+      onClick
+    } = _b, others = __objRest(_b, [
+      "className",
+      "style",
+      "label",
+      "children",
+      "icon",
+      "active",
+      "onClick"
+    ]);
+    const isControlledIcon = typeof icon === "function";
+    const getIcon = () => {
+      return typeof icon === "function" ? icon(active) : icon;
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
       "div",
-      {
-        className: (0, import_clsx.default)(
-          `${prefixCls}-header-icon`,
-          `${prefixCls}-header-icon-arrow`,
-          {
-            [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
-          }
-        )
-      },
-      getIcon()
-    )),
-    /* @__PURE__ */ import_react.default.createElement(import_Collapse.Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, children))
-  );
-});
+      __spreadValues({
+        className: (0, import_clsx.default)(prefixCls, active && `${prefixCls}-active`, className),
+        style,
+        ref
+      }, others),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-header-icon`,
+            `${prefixCls}-header-icon-arrow`,
+            {
+              [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
+            }
+          )
+        },
+        getIcon()
+      )),
+      /* @__PURE__ */ import_react.default.createElement(import_Collapse.Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, children))
+    );
+  }
+);
 CollapsePanelItem.displayName = "BuiCollapsePanelItem";
-CollapsePanelItem.defaultProps = {
-  active: false
-};
 var CollapsePanelItem_default = CollapsePanelItem;

package/dist/Countdown/Countdown.js

@@ -68,11 +68,11 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
     className,
     serverTimestamp,
     endTimestamp,
-    remainingTime,
-    format,
-    unitStyle,
-    valueStyle,
-    timeSliceStyle,
+    remainingTime = 0,
+    format = "HH:mm:ss",
+    unitStyle = {},
+    valueStyle = [{}, {}],
+    timeSliceStyle = {},
     renderContent,
     onChange,
     onFinish
@@ -152,11 +152,4 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), renderContent ? renderContent(time) : defaultRender(time));
 });
 Countdown.displayName = "BuiCountdown";
-Countdown.defaultProps = {
-  format: "HH:mm:ss",
-  remainingTime: 0,
-  unitStyle: {},
-  valueStyle: [{}, {}],
-  timeSliceStyle: {}
-};
 var Countdown_default = Countdown;

package/dist/Dialog/FunctionalDialog.js

@@ -91,7 +91,7 @@ const formatProps = (props) => {
 };
 const DialogGenerator = (options) => {
   const rootWrapper = document.createElement("div");
-  const rootElement = (0, import_utils.getRootContainer)();
+  const rootElement = (0, import_utils.getRootElement)();
   rootElement.appendChild(rootWrapper);
   const DialogComponent = () => {
     const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);

package/dist/Divider/Divider.js

@@ -49,7 +49,14 @@ var import_react = __toESM(require("react"));
 var import_Divider2 = require("./Divider.css");
 const prefixCls = "bui-divider";
 const Divider = (0, import_react.forwardRef)((props, ref) => {
-  const { className, style, direction, dashed, size, children } = props;
+  const {
+    className,
+    style,
+    direction = "vertical",
+    dashed = false,
+    size,
+    children
+  } = props;
   const isVertical = direction === "vertical";
   const hasChildren = !!import_react.default.Children.toArray(children).length;
   let propsStyle = {};
@@ -76,8 +83,4 @@ const Divider = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Divider.displayName = "BuiDivider";
-Divider.defaultProps = {
-  direction: "vertical",
-  dashed: false
-};
 var Divider_default = Divider;

package/dist/Drawer/Drawer.js

@@ -73,15 +73,15 @@ const oppositeDirection = {
 };
 const Drawer = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
-    anchor: anchorProp,
+    anchor: anchorProp = "bottom",
     container,
     children,
     className,
-    hideBackdrop,
+    hideBackdrop = false,
     onClose,
     SlideProps,
-    open,
-    disablePortal,
+    open = false,
+    disablePortal = false,
     contentProps,
     transitionDuration
   } = _a, others = __objRest(_a, [
@@ -135,10 +135,4 @@ const Drawer = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 Drawer.displayName = "BuiDrawer";
-Drawer.defaultProps = {
-  anchor: "bottom",
-  hideBackdrop: false,
-  open: false,
-  disablePortal: false
-};
 var Drawer_default = Drawer;

package/dist/Fade/Fade.js

@@ -70,62 +70,58 @@ const defaultTimeout = {
   enter: import_utils.duration.enteringScreen,
   exit: import_utils.duration.leavingScreen
 };
-const Fade = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, {
-    appear,
-    children,
-    in: inProp,
-    easing: easingProp,
-    style,
-    timeout,
-    delay
-  } = _a, others = __objRest(_a, [
-    "appear",
-    "children",
-    "in",
-    "easing",
-    "style",
-    "timeout",
-    "delay"
-  ]);
-  const transitions = (0, import_utils.createTransitions)();
-  const nodeRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_Transition.default,
-    __spreadProps(__spreadValues({
-      appear,
+const Fade = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      appear = true,
+      children,
       in: inProp,
-      timeout,
-      delay
-    }, others), {
-      ref: nodeRef
-    }),
-    (state, childProps) => {
-      const transition = transitions.create(
-        "opacity",
-        (0, import_utils.getTransitionProps)(
-          { timeout, style, easing: easingProp, delay },
-          {
-            mode: state
-          }
-        )
-      );
-      return import_react.default.cloneElement(children, __spreadValues({
-        style: __spreadValues(__spreadValues({
-          visibility: state === "exited" ? "hidden" : "visible",
-          transition,
-          WebkitTransition: transition,
-          opacity: state === "entering" || state === "entered" ? "1" : "0"
-        }, style), children.props.style)
-      }, childProps));
-    }
-  );
-});
+      easing: easingProp = defaultEasing,
+      style,
+      timeout = defaultTimeout,
+      delay = 0
+    } = _b, others = __objRest(_b, [
+      "appear",
+      "children",
+      "in",
+      "easing",
+      "style",
+      "timeout",
+      "delay"
+    ]);
+    const transitions = (0, import_utils.createTransitions)();
+    const nodeRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Transition.default,
+      __spreadProps(__spreadValues({
+        appear,
+        in: inProp,
+        timeout,
+        delay
+      }, others), {
+        ref: nodeRef
+      }),
+      (state, childProps) => {
+        const transition = transitions.create(
+          "opacity",
+          (0, import_utils.getTransitionProps)(
+            { timeout, style, easing: easingProp, delay },
+            {
+              mode: state
+            }
+          )
+        );
+        return import_react.default.cloneElement(children, __spreadValues({
+          style: __spreadValues(__spreadValues({
+            visibility: state === "exited" ? "hidden" : "visible",
+            transition,
+            WebkitTransition: transition,
+            opacity: state === "entering" || state === "entered" ? "1" : "0"
+          }, style), children.props.style)
+        }, childProps));
+      }
+    );
+  }
+);
 Fade.displayName = "BuiFade";
-Fade.defaultProps = {
-  easing: defaultEasing,
-  timeout: defaultTimeout,
-  appear: true,
-  delay: 0
-};
 var Fade_default = Fade;

package/dist/IconButton/IconButton.js

@@ -67,11 +67,11 @@ const IconButton = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, {
       className,
       children,
-      color,
-      disabled,
-      size,
-      variant,
-      shape
+      color = "default",
+      disabled = false,
+      size = "medium",
+      variant = "default",
+      shape = "circular"
     } = _a, others = __objRest(_a, [
       "className",
       "children",
@@ -108,11 +108,4 @@ const IconButton = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 IconButton.displayName = "BuiIconButton";
-IconButton.defaultProps = {
-  size: "medium",
-  variant: "default",
-  shape: "circular",
-  color: "default",
-  disabled: false
-};
 var IconButton_default = IconButton;

package/dist/Image/Image.js

@@ -64,125 +64,118 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_index = require("./index.css");
 const prefixCls = "bui-image";
-const Image = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const [loaded, setLoaded] = (0, import_react.useState)(false);
-  const [failed, setFailed] = (0, import_react.useState)(false);
-  const _a = props, {
-    fit,
-    src,
-    lazy,
-    style,
-    webp,
-    alt,
-    showMenu,
-    width,
-    height,
-    fallback,
-    className,
-    placeholder,
-    onClick,
-    onLoad,
-    onError,
-    imgProps
-  } = _a, others = __objRest(_a, [
-    "fit",
-    "src",
-    "lazy",
-    "style",
-    "webp",
-    "alt",
-    "showMenu",
-    "width",
-    "height",
-    "fallback",
-    "className",
-    "placeholder",
-    "onClick",
-    "onLoad",
-    "onError",
-    "imgProps"
-  ]);
-  const modeEnum = {
-    none: "center",
-    // 被替换的内容将保持其原有的尺寸居中裁切展示
-    contain: "aspectFit",
-    // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配
-    cover: "aspectFill",
-    // 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
-    fill: "scaleToFill",
-    // 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
-    "scale-down": "aspectFit",
-    // 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
-    widthFix: "widthFix",
-    // 【微信小程序】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
-    heightFix: "heightFix"
-    // 【微信小程序】缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
-  };
-  (0, import_react.useLayoutEffect)(() => {
-    setLoaded(false);
-    setFailed(false);
-  }, [src]);
-  function defaultIconWrap(icon) {
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-default-icon-wrap` }, icon);
-  }
-  const defaultIcon = defaultIconWrap(
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-default-icon-item` })
-  );
-  const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIcon;
-  const defaultFallback = fallback && defaultIconWrap(fallback) || defaultPlaceholder;
-  const miniAttr = {
-    webp,
-    lazyLoad: lazy,
-    "lazy-load": lazy,
-    mode: fit && modeEnum[fit],
-    showMenuByLongpress: showMenu
-  };
-  const imgEle = /* @__PURE__ */ import_react.default.createElement(
-    "img",
-    __spreadValues(__spreadProps(__spreadValues({
-      src,
-      loading: lazy ? "lazy" : "eager",
-      onLoad: (e) => {
-        setLoaded(true);
-        onLoad == null ? void 0 : onLoad(e);
-      },
-      onError: (e) => {
-        setFailed(true);
-        onError == null ? void 0 : onError(e);
-      },
-      alt
-    }, imgProps), {
-      style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
-      className: (0, import_clsx.default)(
-        `${prefixCls}-img`,
-        // 无占位且不onFail时直接展示img本体
-        (loaded || placeholder === false && !failed) && `${prefixCls}-loaded`,
-        imgProps == null ? void 0 : imgProps.className
-      )
-    }), import_utils.isMini ? miniAttr : {})
-  );
-  function renderImgEle() {
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, failed && defaultFallback || !loaded && defaultPlaceholder || null, imgEle);
-  }
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadValues({
-      ref,
+const Image = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      fit = "fill",
+      src = "",
+      lazy = false,
+      style,
+      webp,
+      alt,
+      showMenu,
+      width,
+      height,
+      fallback = null,
+      className,
+      placeholder = false,
       onClick,
-      style: __spreadValues({ width, height }, style),
-      className: (0, import_clsx.default)(prefixCls, className)
-    }, others),
-    renderImgEle()
-  );
-});
+      onLoad,
+      onError,
+      imgProps
+    } = _b, others = __objRest(_b, [
+      "fit",
+      "src",
+      "lazy",
+      "style",
+      "webp",
+      "alt",
+      "showMenu",
+      "width",
+      "height",
+      "fallback",
+      "className",
+      "placeholder",
+      "onClick",
+      "onLoad",
+      "onError",
+      "imgProps"
+    ]);
+    const [loaded, setLoaded] = (0, import_react.useState)(false);
+    const [failed, setFailed] = (0, import_react.useState)(false);
+    const modeEnum = {
+      none: "center",
+      // 被替换的内容将保持其原有的尺寸居中裁切展示
+      contain: "aspectFit",
+      // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配
+      cover: "aspectFill",
+      // 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
+      fill: "scaleToFill",
+      // 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不匹配，那么该对象将被拉伸以适应内容框
+      "scale-down": "aspectFit",
+      // 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
+      widthFix: "widthFix",
+      // 【微信小程序】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
+      heightFix: "heightFix"
+      // 【微信小程序】缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
+    };
+    (0, import_react.useLayoutEffect)(() => {
+      setLoaded(false);
+      setFailed(false);
+    }, [src]);
+    function defaultIconWrap(icon) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-default-icon-wrap` }, icon);
+    }
+    const defaultIcon = defaultIconWrap(
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-default-icon-item` })
+    );
+    const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIcon;
+    const defaultFallback = fallback && defaultIconWrap(fallback) || defaultPlaceholder;
+    const miniAttr = {
+      webp,
+      lazyLoad: lazy,
+      "lazy-load": lazy,
+      mode: fit && modeEnum[fit],
+      showMenuByLongpress: showMenu
+    };
+    const imgEle = /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      __spreadValues(__spreadProps(__spreadValues({
+        src,
+        loading: lazy ? "lazy" : "eager",
+        onLoad: (e) => {
+          setLoaded(true);
+          onLoad == null ? void 0 : onLoad(e);
+        },
+        onError: (e) => {
+          setFailed(true);
+          onError == null ? void 0 : onError(e);
+        },
+        alt
+      }, imgProps), {
+        style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
+        className: (0, import_clsx.default)(
+          `${prefixCls}-img`,
+          // 无占位且不onFail时直接展示img本体
+          (loaded || placeholder === false && !failed) && `${prefixCls}-loaded`,
+          imgProps == null ? void 0 : imgProps.className
+        )
+      }), import_utils.isMini ? miniAttr : {})
+    );
+    function renderImgEle() {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, failed && defaultFallback || !loaded && defaultPlaceholder || null, imgEle);
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        ref,
+        onClick,
+        style: __spreadValues({ width, height }, style),
+        className: (0, import_clsx.default)(prefixCls, className)
+      }, others),
+      renderImgEle()
+    );
+  }
+);
 Image.displayName = "BuiImage";
-Image.defaultProps = {
-  src: "",
-  lazy: false,
-  fallback: null,
-  placeholder: false,
-  width: void 0,
-  height: void 0,
-  fit: "fill"
-};
 var Image_default = Image;