@nutui/nutui-react 3.0.5 → 3.0.6

package/dist/nutui.react.umd.js

@@ -9967,7 +9967,8 @@ Please add \`${key2}Action\` when creating your handler.`);
     top: 0,
     right: 0,
     fill: "solid",
-    size: "large"
+    size: "large",
+    disabled: false
   });
   var Badge = function(props) {
     var isIcon = function isIcon2() {
@@ -9981,7 +9982,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var _this;
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$1l, props), className = _$_object_spread.className, style = _$_object_spread.style, value2 = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
+    var _$_object_spread = _object_spread({}, defaultProps$1l, props), className = _$_object_spread.className, style = _$_object_spread.style, value2 = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size, disabled = _$_object_spread.disabled;
     var classPrefix2 = "nut-badge";
     var classes = classNames(classPrefix2, className);
     var getContent = function() {
@@ -9992,7 +9993,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       return value2;
     };
     var _obj;
-    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof getContent() === "string" && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _define_property(_obj, "".concat(classPrefix2, "-content"), children), _obj));
+    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof getContent() === "string" && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _define_property(_obj, "".concat(classPrefix2, "-content"), children), _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _obj));
     var getPositionStyle = function() {
       return _define_property({
         top: "".concat(Number(top) || 0, "px")
@@ -10371,11 +10372,12 @@ Please add \`${key2}Action\` when creating your handler.`);
     dot: false,
     max: 99,
     top: "0",
-    right: "0"
+    right: "0",
+    direction: "vertical"
   });
   var TabbarItem = function(props) {
     var ctx2 = React.useContext(TabbarContext);
-    var _ref = _object_spread({}, defaultProps$1g, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value2 = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index2 = _ref.index, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$1g, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value2 = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index2 = _ref.index, direction = _ref.direction, onActiveClick = _ref.onActiveClick, rest = _object_without_properties(_ref, [
       "className",
       "style",
       "title",
@@ -10385,15 +10387,19 @@ Please add \`${key2}Action\` when creating your handler.`);
       "max",
       "top",
       "right",
-      "index"
+      "index",
+      "direction",
+      "onActiveClick"
     ]);
     var active2 = index2 === (ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.selectIndex);
     var classPrefix2 = "nut-tabbar-item";
-    var tabbarItemClass = classNames(classPrefix2, _define_property({}, "".concat(classPrefix2, "-active"), active2), className);
-    var boxPrefix = "".concat(classPrefix2, "-icon-box");
-    var titleClass = classNames(boxPrefix, "".concat(boxPrefix, "-nav"), _define_property({}, "".concat(boxPrefix, "-large"), !icon));
+    var _obj;
+    var tabbarItemClass = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-active"), active2), _define_property(_obj, "".concat(classPrefix2, "-large"), !icon || !title), _obj), className);
+    var renderNodeWithActive = function(node) {
+      return node && typeof node === "function" ? node(active2) : node;
+    };
     var badgeProps = {
-      value: value2,
+      value: renderNodeWithActive(value2),
       dot,
       max,
       top,
@@ -10402,8 +10408,26 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var renderTitleText = function() {
       return title && /* @__PURE__ */ React.createElement("div", {
-        className: titleClass
-      }, title);
+        className: "".concat(classPrefix2, "-text")
+      }, renderNodeWithActive(title));
+    };
+    var renderTitle = function() {
+      return /* @__PURE__ */ React.createElement(Badge, _object_spread({
+        size: "normal"
+      }, badgeProps), renderTitleText());
+    };
+    var renderIcon = function() {
+      return renderNodeWithActive(icon);
+    };
+    var renderIconAndTitle = function() {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, _object_spread_props(_object_spread({
+        size: "normal"
+      }, badgeProps), {
+        top: 3
+      }), renderIcon()), renderTitleText());
+    };
+    var renderDualItem = function() {
+      return dot ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderTitleText(), /* @__PURE__ */ React.createElement(Badge, badgeProps));
     };
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: tabbarItemClass,
@@ -10411,23 +10435,22 @@ Please add \`${key2}Action\` when creating your handler.`);
         color: active2 ? ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.activeColor : ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.inactiveColor
       }, style),
       onClick: function() {
-        return ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.handleClick(index2);
+        return active2 ? onActiveClick === null || onActiveClick === void 0 ? void 0 : onActiveClick() : ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.handleClick(index2);
       }
-    }, rest), icon ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, badgeProps, /* @__PURE__ */ React.createElement("div", {
-      className: boxPrefix
-    }, icon)), renderTitleText()) : /* @__PURE__ */ React.createElement(Badge, badgeProps, renderTitleText()));
+    }, rest), direction === "horizontal" && !dot ? renderDualItem() : /* @__PURE__ */ React.createElement(React.Fragment, null, icon && renderIconAndTitle(), !icon && renderTitle()));
   };
   var defaultProps$1f = _object_spread_props(_object_spread({}, ComponentDefaults), {
     defaultValue: 0,
     fixed: false,
     inactiveColor: "",
     activeColor: "",
+    direction: "vertical",
     safeArea: false,
-    onSwitch: function(value2) {
+    onSwitch: function() {
     }
   });
   var Tabbar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1f, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value2 = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
+    var _$_object_spread = _object_spread({}, defaultProps$1f, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value2 = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, direction = _$_object_spread.direction, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
     var classPrefix2 = "nut-tabbar";
     var _usePropsValue = _sliced_to_array(usePropsValue({
       value: value2,
@@ -10435,11 +10458,26 @@ Please add \`${key2}Action\` when creating your handler.`);
       finalValue: 0,
       onChange: onSwitch
     }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
+    var sizeCls = React.useMemo(function() {
+      var size = React.Children.count(children);
+      var _obj;
+      return size > 3 ? "" : classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-wrap-3"), size === 3), _define_property(_obj, "".concat(classPrefix2, "-wrap-2"), size === 2), _define_property(_obj, "".concat(classPrefix2, "-wrap-").concat(direction), size === 2 && direction !== "vertical"), _obj));
+    }, [
+      children,
+      direction
+    ]);
+    var itemDirection = React.useMemo(function() {
+      var size = React.Children.count(children);
+      return size === 2 && direction !== "vertical" && direction;
+    }, [
+      direction,
+      children
+    ]);
     return /* @__PURE__ */ React.createElement("div", {
       className: classNames(classPrefix2, _define_property({}, "".concat(classPrefix2, "-fixed"), fixed), className),
       style
     }, /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-wrap")
+      className: "".concat(classPrefix2, "-wrap ").concat(sizeCls)
     }, /* @__PURE__ */ React.createElement(TabbarContext.Provider, {
       value: {
         selectIndex,
@@ -10448,12 +10486,12 @@ Please add \`${key2}Action\` when creating your handler.`);
         handleClick: setSelectIndex
       }
     }, React.Children.map(children, function(child, index2) {
-      if (!/* @__PURE__ */ React.isValidElement(child)) return null;
-      return /* @__PURE__ */ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
-        index: index2
-      }));
-    }))), (fixed || safeArea) && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-safe-area")
+      return /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
+        index: index2,
+        direction: itemDirection
+      })) : null;
+    }))), (fixed || safeArea) && /* @__PURE__ */ React.createElement(SafeArea, {
+      position: "bottom"
     }));
   };
   Tabbar.displayName = "NutTabbar";
@@ -18434,15 +18472,19 @@ Please add \`${key2}Action\` when creating your handler.`);
   var defaultProps$M = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     activeText: "",
-    inactiveText: ""
+    inactiveText: "",
+    loadingIcon: /* @__PURE__ */ React.createElement(d$3, null)
   });
   var Switch = function(props) {
-    var _ref = _object_spread({}, defaultProps$M, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$M, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, loadingIcon = _ref.loadingIcon, className = _ref.className, style = _ref.style;
+    _ref.onChange;
+    var rest = _object_without_properties(_ref, [
       "checked",
       "defaultChecked",
       "disabled",
       "activeText",
       "inactiveText",
+      "loadingIcon",
       "className",
       "style",
       "onChange"
@@ -18453,6 +18495,12 @@ Please add \`${key2}Action\` when creating your handler.`);
       value: checked,
       defaultValue: defaultChecked
     }), 2), value2 = _usePropsValue[0], setValue = _usePropsValue[1];
+    React.useEffect(function() {
+      changing && setChanging(false);
+    }, [
+      value2
+    ]);
+    var _useState = _sliced_to_array(React.useState(false), 2), changing = _useState[0], setChanging = _useState[1];
     var classes = function() {
       var _obj2;
       return classNames([
@@ -18461,17 +18509,18 @@ Please add \`${key2}Action\` when creating your handler.`);
         (_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-close"), !value2), _define_property(_obj2, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj2, "".concat(classPrefix2, "-disabled-close"), disabled && !value2), _obj2)
       ]);
     };
-    var onClick = function(event) {
-      if (disabled) return;
-      onChange && onChange(!value2, event);
+    var onClick = function() {
+      if (disabled || changing) return;
+      if (props.onChange) {
+        setChanging(true);
+        props.onChange(!value2);
+      }
       setValue(!value2);
     };
     var _obj, _obj1;
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classes(),
-      onClick: function(e2) {
-        return onClick(e2);
-      },
+      onClick,
       style
     }, rest), /* @__PURE__ */ React.createElement("div", {
       className: classNames([
@@ -18483,9 +18532,9 @@ Please add \`${key2}Action\` when creating your handler.`);
         ],
         (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-button-open-rtl"), rtl && value2), _define_property(_obj, "".concat(classPrefix2, "-button-close-rtl"), rtl && !value2), _obj)
       ])
-    }, !value2 && !activeText && /* @__PURE__ */ React.createElement("div", {
+    }, changing && loadingIcon ? /* @__PURE__ */ React.createElement(React.Fragment, null, loadingIcon) : /* @__PURE__ */ React.createElement(React.Fragment, null, !value2 && !activeText && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-close-line")
-    })), activeText && /* @__PURE__ */ React.createElement("div", {
+    }))), activeText && /* @__PURE__ */ React.createElement("div", {
       className: classNames("".concat(classPrefix2, "-label"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-label-open"), value2), _define_property(_obj1, "".concat(classPrefix2, "-label-close"), !value2), _define_property(_obj1, "".concat(classPrefix2, "-label-open-rtl"), rtl && value2), _define_property(_obj1, "".concat(classPrefix2, "-label-close-rtl"), rtl && !value2), _define_property(_obj1, "".concat(classPrefix2, "-label-close-disabled"), disabled && !value2), _obj1))
     }, value2 ? activeText : inactiveText));
   };
@@ -37366,6 +37415,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       {
         key: "close",
         value: function close() {
+          var _this_props;
           this.setState({
             show: false
           });
@@ -37374,7 +37424,7 @@ Please add \`${key2}Action\` when creating your handler.`);
             var element = document.getElementById(this.props.id);
             element && element.parentNode && element.parentNode.removeChild(element);
           }
-          this.props.onClose();
+          (_this_props = this.props) === null || _this_props === void 0 ? void 0 : _this_props.onClose();
         }
       },
       {
@@ -37419,22 +37469,40 @@ Please add \`${key2}Action\` when creating your handler.`);
       {
         key: "render",
         value: function render2() {
-          var _this_props = this.props, style = _this_props.style, message = _this_props.message, type2 = _this_props.type, className = _this_props.className, position2 = _this_props.position;
+          var _this_props = this.props, id = _this_props.id, style = _this_props.style, message = _this_props.message, leftIcon = _this_props.leftIcon, rightIcon = _this_props.rightIcon, closeable = _this_props.closeable, className = _this_props.className, position2 = _this_props.position, distance = _this_props.distance, navHeight = _this_props.navHeight;
           var show2 = this.state.show;
+          var classes = classNames(classPrefix$c, className);
+          var getDistance = function() {
+            if (position2 === "top") {
+              return {
+                top: "".concat(distance + navHeight, "px")
+              };
+            }
+            return {
+              bottom: "".concat(distance, "px")
+            };
+          };
           var _obj;
-          var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$c, "-popup-top"), position2 === "top"), _define_property(_obj, "".concat(classPrefix$c, "-popup-bottom"), position2 === "bottom"), _define_property(_obj, "".concat(classPrefix$c), true), _define_property(_obj, "".concat(classPrefix$c, "-").concat(type2), true), _obj));
           return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(CSSTransition, {
             in: show2,
             timeout: 300,
             classNames: "fade",
             unmountOnExit: true,
             appear: true,
-            position: position2
+            position: position2,
+            id
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: "".concat(classes, " ").concat(className),
-            style,
+            className: classes,
+            style: _object_spread({}, style, getDistance()),
             onClick: this.clickCover
-          }, message)));
+          }, leftIcon ? /* @__PURE__ */ React__namespace.createElement("div", {
+            className: "".concat(classPrefix$c, "-left-icon")
+          }, leftIcon) : null, /* @__PURE__ */ React__namespace.createElement("div", {
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$c, "-content"), true), _define_property(_obj, "".concat(classPrefix$c, "-ellipsis"), closeable || rightIcon), _define_property(_obj, "".concat(classPrefix$c, "-layout-left"), leftIcon || rightIcon), _obj))
+          }, message), rightIcon || closeable ? /* @__PURE__ */ React__namespace.createElement("div", {
+            className: "".concat(classPrefix$c, "-right-icon"),
+            onClick: this.close
+          }, rightIcon || (closeable ? /* @__PURE__ */ React__namespace.createElement(n$6, null) : null)) : null)));
         }
       }
     ]);
@@ -37470,9 +37538,13 @@ Please add \`${key2}Action\` when creating your handler.`);
   var messageInstance$1 = null;
   var options = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: "",
-    duration: 3e3,
-    type: "danger",
     position: "top",
+    distance: 8,
+    navHeight: 57,
+    closeable: false,
+    leftIcon: null,
+    rightIcon: null,
+    duration: 3e3,
     onClose: function() {
     },
     onClick: function() {
@@ -37507,38 +37579,6 @@ Please add \`${key2}Action\` when creating your handler.`);
         type: "base"
       }, option));
     },
-    success: function success(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "success"
-      }, option));
-    },
-    primary: function primary(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "primary"
-      }, option));
-    },
-    danger: function danger(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "danger"
-      }, option));
-    },
-    warn: function warn(message) {
-      var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      errorMsg$1(message);
-      return notice$1(_object_spread({
-        message,
-        type: "warning"
-      }, option));
-    },
     hide: function hide() {
       if (messageInstance$1) {
         messageInstance$1.destroy();
@@ -38141,212 +38181,83 @@ Please add \`${key2}Action\` when creating your handler.`);
     })) : null, children);
   };
   ResultPage.displayName = "NutResultPage";
-  var AvatarContext = React.createContext({});
   var defaultProps$y = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    maxContent: "",
-    max: "",
-    maxBackground: "#eee",
-    maxColor: "#666",
-    gap: "-8",
-    level: "left"
-  });
-  var classPrefix$a = "nut-avatar-group";
-  var AvatarGroup = function(props) {
-    var propAvatarGroup = _object_spread({}, defaultProps$y, props);
-    var className = propAvatarGroup.className, style = propAvatarGroup.style, children = propAvatarGroup.children;
-    var avatarGroupRef = React.useRef(null);
-    var cls = classNames(classPrefix$a, className);
-    var parentAvatar = {
-      propAvatarGroup,
-      avatarGroupRef
-    };
-    return /* @__PURE__ */ React.createElement(AvatarContext.Provider, {
-      value: parentAvatar
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: cls,
-      style,
-      ref: avatarGroupRef
-    }, children));
-  };
-  AvatarGroup.displayName = "NutAvatarGroup";
-  var defaultProps$x = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    size: "",
-    shape: "round",
-    icon: "",
-    background: "#eee",
-    color: "#666",
-    fit: "cover",
-    src: "",
-    alt: ""
-  });
-  var classPrefix$9 = "nut-avatar";
-  var Avatar = function(props) {
-    var _ref = _object_spread({}, defaultProps$x, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, fit = _ref.fit, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = _object_without_properties(_ref, [
-      "children",
-      "size",
-      "shape",
-      "background",
-      "color",
-      "src",
-      "alt",
-      "icon",
-      "fit",
-      "className",
-      "style",
-      "onClick",
-      "onError"
-    ]);
-    var _useState = _sliced_to_array(React.useState(0), 2), maxSum = _useState[0], setMaxSum = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState(false), 2), showMax = _useState1[0], setShowMax = _useState1[1];
-    var _useState2 = _sliced_to_array(React.useState(1), 2), avatarIndex = _useState2[0], setAvatarIndex = _useState2[1];
-    var avatarRef = React.useRef(null);
-    var parent2 = React.useContext(AvatarContext);
-    var sizeValue = [
-      "large",
-      "normal",
-      "small"
-    ];
-    var propAvatarGroup = parent2.propAvatarGroup, avatarGroupRef = parent2.avatarGroupRef;
-    var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal", "-round"), shape === "round" && true), _obj));
-    var cls = classNames(classPrefix$9, classes, className);
-    var styles = _object_spread({
-      width: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
-      height: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
-      backgroundColor: "".concat(background),
-      color,
-      marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : "",
-      zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
-    }, style);
-    var maxStyles = {
-      backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
-      color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
-    };
-    var avatarLength = React.useCallback(function(children2) {
-      var _avatarRef_current_dataset, _avatarRef_current;
-      for (var i2 = 0; i2 < children2.length; i2++) {
-        if (children2[i2] && children2[i2].classList && children2[i2].classList[0] === "nut-avatar") {
-          children2[i2].setAttribute("data-index", i2 + 1);
-        }
-      }
-      var index2 = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef_current = avatarRef.current) === null || _avatarRef_current === void 0 ? void 0 : (_avatarRef_current_dataset = _avatarRef_current.dataset) === null || _avatarRef_current_dataset === void 0 ? void 0 : _avatarRef_current_dataset.index);
-      var maxCount = (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || children2.length;
-      setMaxSum(children2.length);
-      setAvatarIndex(index2);
-      if (index2 === children2.length && index2 !== maxCount && children2.length > maxCount) {
-        setShowMax(true);
-      }
-    }, [
-      propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max
-    ]);
-    React.useEffect(function() {
-      var avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
-      if (avatarChildren) {
-        avatarLength(avatarChildren);
-      }
-    }, [
-      avatarLength,
-      avatarGroupRef
-    ]);
-    var errorEvent = function() {
-      onError && onError();
-    };
-    var clickAvatar = function(e2) {
-      onClick && onClick(e2);
-    };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
-      className: cls
-    }, rest), {
-      style: !showMax ? styles : maxStyles,
-      onClick: clickAvatar,
-      ref: avatarRef
-    }), (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement(React.Fragment, null, src && /* @__PURE__ */ React.createElement(Image$1, {
-      className: "nut-avatar-img",
-      src,
-      alt,
-      style: {
-        objectFit: fit
-      },
-      onError: errorEvent
-    }), /* @__PURE__ */ React.isValidElement(icon) ? /* @__PURE__ */ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
-      className: "".concat(icon.props.className || "", " nut-avatar-icon")
-    })) : null, children && /* @__PURE__ */ React.createElement("span", {
-      className: "nut-avatar-text"
-    }, children), !src && !icon && !children && /* @__PURE__ */ React.createElement(m, {
-      className: "nut-avatar-icon"
-    })), showMax && /* @__PURE__ */ React.createElement("div", {
-      className: "nut-avatar-text"
-    }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)))));
-  };
-  Avatar.displayName = "NutAvatar";
-  Avatar.Group = AvatarGroup;
-  var defaultProps$w = _object_spread_props(_object_spread({}, ComponentDefaults), {
     rows: 1,
-    animated: false,
-    title: false,
-    avatar: false,
-    avatarSize: "50px",
+    animated: true,
     visible: false,
-    avatarShape: "round"
+    size: "normal",
+    shape: "round",
+    duration: 0.6,
+    inline: false
   });
   var Skeleton = function(props) {
-    var _ref = _object_spread({}, defaultProps$w, props), className = _ref.className, animated2 = _ref.animated, rows = _ref.rows, title = _ref.title, avatar = _ref.avatar, avatarSize = _ref.avatarSize, visible = _ref.visible, children = _ref.children, avatarShape = _ref.avatarShape, rest = _object_without_properties(_ref, [
+    var shapeStyle = function shapeStyle2() {
+      if (shape === "circle") return {
+        borderRadius: "50%"
+      };
+      if (shape === "square") return {
+        borderRadius: "0"
+      };
+      return {};
+    };
+    var durationStyle = function durationStyle2() {
+      if (typeof duration !== "undefined") return {
+        animationDuration: "".concat(duration, "s")
+      };
+      return {};
+    };
+    var _ref = _object_spread({}, defaultProps$y, props), className = _ref.className, width2 = _ref.width, height2 = _ref.height, shape = _ref.shape, animated2 = _ref.animated, rows = _ref.rows, visible = _ref.visible, size = _ref.size, duration = _ref.duration, children = _ref.children, rest = _object_without_properties(_ref, [
       "className",
+      "width",
+      "height",
+      "shape",
       "animated",
       "rows",
-      "title",
-      "avatar",
-      "avatarSize",
       "visible",
-      "children",
-      "avatarShape"
+      "size",
+      "duration",
+      "children"
     ]);
     var classPrefix2 = "nut-skeleton";
     var classes = classNames(classPrefix2, className);
-    var _obj;
-    var avatarClass = classNames((_obj = {}, _define_property(_obj, "nut-avatar", true), _define_property(_obj, "nut-skeleton-content-avatar", true), _define_property(_obj, "avatar-".concat(avatarShape), avatarShape), _obj));
-    var repeatLines = function(num) {
+    var repeatCount = function(num) {
       return Array.from({
         length: num
       }, function(v, i2) {
         return i2;
       });
     };
-    var getStyle = function() {
-      if (avatarSize) {
-        return {
-          width: avatarSize,
-          height: avatarSize
-        };
-      }
-      return {
-        width: "50px",
-        height: "50px"
-      };
+    var _useState = _sliced_to_array(React.useState(false), 2), animate = _useState[0], setAnimate = _useState[1];
+    var playAnimation = function() {
+      setAnimate(false);
+      setTimeout(function() {
+        setAnimate(true);
+      }, 10);
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement("div", _object_spread({
+    React.useEffect(function() {
+      if (!animated2) return;
+      playAnimation();
+      var intervalId = setInterval(playAnimation, 1e3 + duration * 1e3);
+      return function() {
+        return clearInterval(intervalId);
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? children : /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classes
-    }, rest), animated2 && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-animation")
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content")
-    }, avatar && /* @__PURE__ */ React.createElement(Avatar, {
-      className: avatarClass,
-      shape: avatarShape,
-      style: getStyle(),
-      icon: "null"
-    }), rows === 1 ? /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content-block")
-    }) : /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content-line")
-    }, title && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content-title")
-    }), repeatLines(rows).map(function(item, index2) {
+    }, rest), repeatCount(rows).map(function(item, index2) {
+      var contentClass = "".concat(classPrefix2, "-content ").concat(classPrefix2, "-content-").concat(size, " ").concat(classPrefix2, "-content-").concat(size, "-").concat(index2);
       return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, "-content-block"),
-        key: index2
-      });
-    })))));
+        className: "".concat(contentClass),
+        key: index2,
+        style: _object_spread({
+          width: width2,
+          height: height2
+        }, shapeStyle())
+      }, animated2 && /* @__PURE__ */ React.createElement("div", {
+        className: "".concat(classPrefix2, "-animated ").concat(animate ? "".concat(classPrefix2, "-animation") : ""),
+        style: durationStyle()
+      }));
+    })));
   };
   Skeleton.displayName = "NutSkeleton";
   function preventDefault(event, isStopPropagation) {
@@ -38357,13 +38268,13 @@ Please add \`${key2}Action\` when creating your handler.`);
       event.stopPropagation();
     }
   }
-  var defaultProps$v = {
+  var defaultProps$x = {
     name: ""
   };
   var Swipe = /* @__PURE__ */ React.forwardRef(function(props, instanceRef) {
     var classPrefix2 = "nut-swipe";
     var touch = useTouch();
-    var _$_object_spread = _object_spread({}, defaultProps$v, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
+    var _$_object_spread = _object_spread({}, defaultProps$x, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
     var root2 = React.useRef();
     var opened = React.useRef(false);
     var lockClick = React.useRef(false);
@@ -38563,7 +38474,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef)));
   });
   Swipe.displayName = "NutSwipe";
-  var classPrefix$8 = "nut-toast";
+  var classPrefix$a = "nut-toast";
   var Notification = /* @__PURE__ */ function(_superClass) {
     _inherits(Notification2, _superClass);
     function Notification2(props) {
@@ -38640,7 +38551,7 @@ Please add \`${key2}Action\` when creating your handler.`);
               })
             }[icon];
             return /* @__PURE__ */ React__namespace.createElement("p", {
-              className: "".concat(classPrefix$8, "-icon-wrapper")
+              className: "".concat(classPrefix$a, "-icon-wrapper")
             }, iconNode);
           }
           return icon;
@@ -38671,22 +38582,22 @@ Please add \`${key2}Action\` when creating your handler.`);
             visible: show2,
             style,
             zIndex,
-            className: "".concat(classPrefix$8, "-overlay-default ").concat(className),
+            className: "".concat(classPrefix$a, "-overlay-default ").concat(className),
             onClick: function() {
               return _this.clickCover();
             },
             closeOnOverlayClick,
             lockScroll
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: "".concat(classPrefix$8, " ").concat(classes),
+            className: "".concat(classPrefix$a, " ").concat(classes),
             id: "toast-".concat(id)
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: classNames("".concat(classPrefix$8, "-inner"), "".concat(classPrefix$8, "-").concat(position2), contentClassName, "".concat(classPrefix$8, "-inner-").concat(size), "".concat(classPrefix$8, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix$8, "-inner-descrption"), content2)),
+            className: classNames("".concat(classPrefix$a, "-inner"), "".concat(classPrefix$a, "-").concat(position2), contentClassName, "".concat(classPrefix$a, "-inner-").concat(size), "".concat(classPrefix$a, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix$a, "-inner-descrption"), content2)),
             style: _object_spread({}, contentStyle)
           }, this.renderIcon(), title && /* @__PURE__ */ React__namespace.createElement("div", {
-            className: "".concat(classPrefix$8, "-title")
+            className: "".concat(classPrefix$a, "-title")
           }, title), content2 && /* @__PURE__ */ React__namespace.createElement("span", {
-            className: "".concat(classPrefix$8, "-text")
+            className: "".concat(classPrefix$a, "-text")
           }, content2))));
         }
       }
@@ -38719,7 +38630,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     })), element);
   };
   var messageInstance = null;
-  var defaultProps$u = _object_spread_props(_object_spread({}, defaultOverlayProps), {
+  var defaultProps$w = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     id: "",
     position: "middle",
     title: "",
@@ -38753,7 +38664,7 @@ Please add \`${key2}Action\` when creating your handler.`);
         opts2.onClose && opts2.onClose();
       }
     }
-    var opts22 = _object_spread_props(_object_spread({}, defaultProps$u, opts2), {
+    var opts22 = _object_spread_props(_object_spread({}, defaultProps$w, opts2), {
       onClose: close
     });
     getInstance(opts22, function(notification) {
@@ -38776,7 +38687,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     return notice(_object_spread({}, option));
   }
   function config(config2) {
-    defaultProps$u = _object_spread({}, defaultProps$u, config2);
+    defaultProps$w = _object_spread({}, defaultProps$w, config2);
   }
   const Toast = {
     show,
@@ -38788,16 +38699,16 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     }
   };
-  var defaultProps$t = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$v = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: "shake",
     action: "initial",
     loop: false,
     onClick: function(event) {
     }
   });
-  var classPrefix$7 = "nut-animate";
+  var classPrefix$9 = "nut-animate";
   var Animate = function(props) {
-    var _ref = _object_spread({}, defaultProps$t, props), className = _ref.className, type2 = _ref.type, action = _ref.action, loop2 = _ref.loop, onClick = _ref.onClick, children = _ref.children, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$v, props), className = _ref.className, type2 = _ref.type, action = _ref.action, loop2 = _ref.loop, onClick = _ref.onClick, children = _ref.children, rest = _object_without_properties(_ref, [
       "className",
       "type",
       "action",
@@ -38809,7 +38720,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _obj;
     var classes = classNames((_obj = {
       "nut-ani-container": true
-    }, _define_property(_obj, "".concat(classPrefix$7, "-").concat(type2), action === "initial" || clicked), _define_property(_obj, "loop", loop2), _obj), className);
+    }, _define_property(_obj, "".concat(classPrefix$9, "-").concat(type2), action === "initial" || clicked), _define_property(_obj, "loop", loop2), _obj), className);
     var handleClick = function(event) {
       setClicked(true);
       if (!loop2) {
@@ -38827,7 +38738,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, rest), children));
   };
   Animate.displayName = "NutAnimate";
-  var defaultProps$s = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$u = _object_spread_props(_object_spread({}, ComponentDefaults), {
     length: 0,
     value: "",
     delay: 300,
@@ -38835,7 +38746,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     thousands: false
   });
   var CountUp = function(props) {
-    var _mergeProps = mergeProps(defaultProps$s, props), length2 = _mergeProps.length, value2 = _mergeProps.value, delay = _mergeProps.delay, duration = _mergeProps.duration, className = _mergeProps.className, thousands = _mergeProps.thousands;
+    var _mergeProps = mergeProps(defaultProps$u, props), length2 = _mergeProps.length, value2 = _mergeProps.value, delay = _mergeProps.delay, duration = _mergeProps.duration, className = _mergeProps.className, thousands = _mergeProps.thousands;
     _mergeProps.style;
     _object_without_properties(_mergeProps, [
       "length",
@@ -38922,7 +38833,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     })));
   };
   CountUp.displayName = "NutCountUp";
-  var defaultProps$r = {};
+  var defaultProps$t = {};
   var AnimatingNumbers = /* @__PURE__ */ function(Component) {
     _inherits(AnimatingNumbers2, Component);
     function AnimatingNumbers2(props) {
@@ -38946,11 +38857,11 @@ Please add \`${key2}Action\` when creating your handler.`);
     ]);
     return AnimatingNumbers2;
   }(React.Component);
-  _define_property(AnimatingNumbers, "defaultProps", defaultProps$r);
+  _define_property(AnimatingNumbers, "defaultProps", defaultProps$t);
   _define_property(AnimatingNumbers, "displayName", "NutAnimatingNumbers");
   _define_property(AnimatingNumbers, "CountUp", CountUp);
   AnimatingNumbers.CountUp = CountUp;
-  var defaultProps$q = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$s = _object_spread_props(_object_spread({}, ComponentDefaults), {
     src: "",
     muted: false,
     autoPlay: false,
@@ -38980,7 +38891,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     };
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$q, props), className = _ref.className, src = _ref.src, style = _ref.style, muted = _ref.muted, autoPlay = _ref.autoPlay, loop2 = _ref.loop, preload = _ref.preload, type2 = _ref.type, onBack = _ref.onBack, onForward = _ref.onForward, onPause = _ref.onPause, onEnd = _ref.onEnd, onMute = _ref.onMute, onCanPlay = _ref.onCanPlay, children = _ref.children, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$s, props), className = _ref.className, src = _ref.src, style = _ref.style, muted = _ref.muted, autoPlay = _ref.autoPlay, loop2 = _ref.loop, preload = _ref.preload, type2 = _ref.type, onBack = _ref.onBack, onForward = _ref.onForward, onPause = _ref.onPause, onEnd = _ref.onEnd, onMute = _ref.onMute, onCanPlay = _ref.onCanPlay, children = _ref.children, rest = _object_without_properties(_ref, [
       "className",
       "src",
       "style",
@@ -39188,6 +39099,145 @@ Please add \`${key2}Action\` when creating your handler.`);
     })));
   };
   Audio.displayName = "NutAudio";
+  var AvatarContext = React.createContext({});
+  var defaultProps$r = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    maxContent: "",
+    max: "",
+    maxBackground: "#eee",
+    maxColor: "#666",
+    gap: "-8",
+    level: "left"
+  });
+  var classPrefix$8 = "nut-avatar-group";
+  var AvatarGroup = function(props) {
+    var propAvatarGroup = _object_spread({}, defaultProps$r, props);
+    var className = propAvatarGroup.className, style = propAvatarGroup.style, children = propAvatarGroup.children;
+    var avatarGroupRef = React.useRef(null);
+    var cls = classNames(classPrefix$8, className);
+    var parentAvatar = {
+      propAvatarGroup,
+      avatarGroupRef
+    };
+    return /* @__PURE__ */ React.createElement(AvatarContext.Provider, {
+      value: parentAvatar
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: cls,
+      style,
+      ref: avatarGroupRef
+    }, children));
+  };
+  AvatarGroup.displayName = "NutAvatarGroup";
+  var defaultProps$q = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    size: "",
+    shape: "round",
+    icon: "",
+    background: "#eee",
+    color: "#666",
+    fit: "cover",
+    src: "",
+    alt: ""
+  });
+  var classPrefix$7 = "nut-avatar";
+  var Avatar = function(props) {
+    var _ref = _object_spread({}, defaultProps$q, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, fit = _ref.fit, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = _object_without_properties(_ref, [
+      "children",
+      "size",
+      "shape",
+      "background",
+      "color",
+      "src",
+      "alt",
+      "icon",
+      "fit",
+      "className",
+      "style",
+      "onClick",
+      "onError"
+    ]);
+    var _useState = _sliced_to_array(React.useState(0), 2), maxSum = _useState[0], setMaxSum = _useState[1];
+    var _useState1 = _sliced_to_array(React.useState(false), 2), showMax = _useState1[0], setShowMax = _useState1[1];
+    var _useState2 = _sliced_to_array(React.useState(1), 2), avatarIndex = _useState2[0], setAvatarIndex = _useState2[1];
+    var avatarRef = React.useRef(null);
+    var parent2 = React.useContext(AvatarContext);
+    var sizeValue = [
+      "large",
+      "normal",
+      "small"
+    ];
+    var propAvatarGroup = parent2.propAvatarGroup, avatarGroupRef = parent2.avatarGroupRef;
+    var _obj;
+    var classes = classNames((_obj = {}, _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal", "-round"), shape === "round" && true), _obj));
+    var cls = classNames(classPrefix$7, classes, className);
+    var styles = _object_spread({
+      width: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
+      height: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
+      backgroundColor: "".concat(background),
+      color,
+      marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : "",
+      zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
+    }, style);
+    var maxStyles = {
+      backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
+      color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
+    };
+    var avatarLength = React.useCallback(function(children2) {
+      var _avatarRef_current_dataset, _avatarRef_current;
+      for (var i2 = 0; i2 < children2.length; i2++) {
+        if (children2[i2] && children2[i2].classList && children2[i2].classList[0] === "nut-avatar") {
+          children2[i2].setAttribute("data-index", i2 + 1);
+        }
+      }
+      var index2 = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef_current = avatarRef.current) === null || _avatarRef_current === void 0 ? void 0 : (_avatarRef_current_dataset = _avatarRef_current.dataset) === null || _avatarRef_current_dataset === void 0 ? void 0 : _avatarRef_current_dataset.index);
+      var maxCount = (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || children2.length;
+      setMaxSum(children2.length);
+      setAvatarIndex(index2);
+      if (index2 === children2.length && index2 !== maxCount && children2.length > maxCount) {
+        setShowMax(true);
+      }
+    }, [
+      propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max
+    ]);
+    React.useEffect(function() {
+      var avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
+      if (avatarChildren) {
+        avatarLength(avatarChildren);
+      }
+    }, [
+      avatarLength,
+      avatarGroupRef
+    ]);
+    var errorEvent = function() {
+      onError && onError();
+    };
+    var clickAvatar = function(e2) {
+      onClick && onClick(e2);
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
+      className: cls
+    }, rest), {
+      style: !showMax ? styles : maxStyles,
+      onClick: clickAvatar,
+      ref: avatarRef
+    }), (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement(React.Fragment, null, src && /* @__PURE__ */ React.createElement(Image$1, {
+      className: "nut-avatar-img",
+      src,
+      alt,
+      style: {
+        objectFit: fit
+      },
+      onError: errorEvent
+    }), /* @__PURE__ */ React.isValidElement(icon) ? /* @__PURE__ */ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
+      className: "".concat(icon.props.className || "", " nut-avatar-icon")
+    })) : null, children && /* @__PURE__ */ React.createElement("span", {
+      className: "nut-avatar-text"
+    }, children), !src && !icon && !children && /* @__PURE__ */ React.createElement(m, {
+      className: "nut-avatar-icon"
+    })), showMax && /* @__PURE__ */ React.createElement("div", {
+      className: "nut-avatar-text"
+    }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)))));
+  };
+  Avatar.displayName = "NutAvatar";
+  Avatar.Group = AvatarGroup;
   var defaultProps$p = _object_spread_props(_object_spread({}, ComponentDefaults), {
     strokeWidth: 5,
     radius: 50,
@@ -39992,7 +40042,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   var classPrefix$3 = "nut-indicator";
   var Indicator = function(props) {
     var maybeFixedWidth = function maybeFixedWidth2() {
-      if (total === 2 || type2 === "slide") {
+      if (type2 === "dualScreen" || type2 === "slide") {
         return "".concat(classPrefix$3, "-fixed-width");
       }
       return "";