@nutui/nutui-react 3.0.4 → 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")
@@ -10048,7 +10049,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var classPrefix2 = "nut-fixednav";
     var classes = classNames(classPrefix2, {
       active: visible
-    }, type2, className);
+    }, "".concat(classPrefix2, "-").concat(type2), className);
     var renderListItem = function(item, index2) {
       return /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-list-item"),
@@ -10058,7 +10059,8 @@ Please add \`${key2}Action\` when creating your handler.`);
         key: item.id || index2
       }, /* @__PURE__ */ React.isValidElement(item.icon) ? item.icon : /* @__PURE__ */ React.createElement("img", {
         src: item.icon,
-        alt: ""
+        alt: "",
+        className: "".concat(classPrefix2, "-list-image")
       }), /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-list-text")
       }, item.text));
@@ -10370,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",
@@ -10384,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,
@@ -10401,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,
@@ -10410,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,
@@ -10434,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,
@@ -10447,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";
@@ -13381,12 +13420,13 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, _props_options = props.options, options2 = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1e3 : _props_duration, onSelect = props.onSelect, _props_renderLabel = props.renderLabel, renderLabel = _props_renderLabel === void 0 ? function(item) {
       return item.label;
     } : _props_renderLabel;
+    var classPrefix2 = "nut-pickerview-roller";
     var DEFAULT_DURATION = 200;
     var INERTIA_TIME = 300;
     var INERTIA_DISTANCE = 15;
     var ROTATION = 20;
     var touch = useTouch();
-    var _useState = _sliced_to_array(React.useState(1), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
+    var _useState = _sliced_to_array(React.useState(0), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
     var lineSpacing = React.useRef(36);
     var _useState1 = _sliced_to_array(React.useState(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
     var _useState2 = _sliced_to_array(React.useState("0deg"), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
@@ -13420,7 +13460,7 @@ Please add \`${key2}Action\` when creating your handler.`);
         var deg1 = Math.min(Math.max(currentDeg, 0), (options2.length + 1) * ROTATION);
         if (deg1 >= 0 && deg1 < (options2.length + 1) * ROTATION) {
           applyTransform("", "".concat(deg1, "deg"), void 0, updatedMove);
-          setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
+          deg1 > 0 && setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
         }
       }
     };
@@ -13461,7 +13501,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       var index2 = options2.findIndex(function(item) {
         return item.value === selectedValue;
       });
-      setCurrentIndex(index2 === -1 ? 1 : index2 + 1);
+      setCurrentIndex(index2 === -1 ? 0 : index2 + 1);
       var move = index2 * lineSpacing.current;
       handleMove(-move);
     };
@@ -13519,21 +13559,22 @@ Please add \`${key2}Action\` when creating your handler.`);
       className: "nut-pickerview-list",
       ref: pickerRollerRef
     }, /* @__PURE__ */ React.createElement("div", {
-      className: "nut-pickerview-roller",
+      className: classPrefix2,
       ref: rollerRef,
       style: threeDimensional ? touchRollerStyle() : touchTiledStyle(),
       onTransitionEnd: stopMomentumScroll
     }, threeDimensional && options2.map(function(item, index2) {
       var _item_value;
+      var _obj;
       return /* @__PURE__ */ React.createElement("div", {
-        className: "nut-pickerview-roller-item ".concat(isItemHidden(index2 + 1) && "nut-pickerview-roller-item-hidden"),
+        className: classNames("".concat(classPrefix2, "-item"), (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-item-hidden"), isItemHidden(index2 + 1)), _define_property(_obj, "".concat(classPrefix2, "-item-active"), index2 + 1 === currentIndex), _obj)),
         style: rollerStyle(index2),
         key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index2
       }, renderLabel(item));
     }), !threeDimensional && options2.map(function(item, index2) {
       var _item_value;
       return /* @__PURE__ */ React.createElement("div", {
-        className: "nut-pickerview-roller-item-tiled",
+        className: classNames("".concat(classPrefix2, "-item-tiled"), _define_property({}, "".concat(classPrefix2, "-item-active"), index2 + 1 === currentIndex)),
         key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index2
       }, renderLabel(item));
     })));
@@ -16577,7 +16618,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       className: "".concat(classPrefix$h, "-minus"),
       onClick: handleReduce
     }, /* @__PURE__ */ React.createElement(i, {
-      className: classNames("".concat(classPrefix$h, "-icon ").concat(classPrefix$h, "-icon-minus"), _define_property({}, "".concat(classPrefix$h, "-icon-disabled"), shadowValue === min || disabled))
+      className: classNames("".concat(classPrefix$h, "-icon ").concat(classPrefix$h, "-icon-minus"), _define_property({}, "".concat(classPrefix$h, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
     })), /* @__PURE__ */ React.createElement("input", {
       className: classNames("".concat(classPrefix$h, "-input"), _define_property({}, "".concat(classPrefix$h, "-input-disabled"), disabled)),
       ref: inputRef,
@@ -16592,7 +16633,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       className: "".concat(classPrefix$h, "-add"),
       onClick: handlePlus
     }, /* @__PURE__ */ React.createElement(d$2, {
-      className: classNames("".concat(classPrefix$h, "-icon ").concat(classPrefix$h, "-icon-plus"), _define_property({}, "".concat(classPrefix$h, "-icon-disabled"), shadowValue === max || disabled))
+      className: classNames("".concat(classPrefix$h, "-icon ").concat(classPrefix$h, "-icon-plus"), _define_property({}, "".concat(classPrefix$h, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
     })));
   };
   InputNumber.displayName = "NutInputNumber";
@@ -18431,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"
@@ -18450,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([
@@ -18458,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([
@@ -18480,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));
   };
@@ -37363,6 +37415,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       {
         key: "close",
         value: function close() {
+          var _this_props;
           this.setState({
             show: false
           });
@@ -37371,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();
         }
       },
       {
@@ -37416,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)));
         }
       }
     ]);
@@ -37455,7 +37526,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       });
     };
     var element = document.createElement("div");
-    var id = properties.id ? properties.id : "".concat((/* @__PURE__ */ new Date()).getTime());
+    var id = properties.id ? properties.id : "".concat(Date.now());
     element.id = id;
     properties.id = id;
     document.body.appendChild(element);
@@ -37467,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() {
@@ -37504,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();
@@ -38138,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) {
@@ -38354,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);
@@ -38560,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) {
@@ -38637,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;
@@ -38668,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))));
         }
       }
@@ -38706,7 +38620,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       });
     };
     var element = document.createElement("div");
-    var id = properties.id ? properties.id : "".concat((/* @__PURE__ */ new Date()).getTime());
+    var id = properties.id ? properties.id : "".concat(Date.now());
     element.id = id;
     properties.id = id;
     document.body.appendChild(element);
@@ -38716,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: "",
@@ -38750,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) {
@@ -38773,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,
@@ -38785,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",
@@ -38806,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) {
@@ -38824,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,
@@ -38832,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",
@@ -38919,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) {
@@ -38943,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,
@@ -38977,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",
@@ -39185,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,
@@ -39989,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 "";
@@ -40405,7 +40458,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     indicatorColor: "#fff",
     closeIcon: false,
     closeIconPosition: "top-right",
-    onChange: function(value2) {
+    onChange: function() {
     },
     onClose: function() {
     }
@@ -40418,71 +40471,50 @@ Please add \`${key2}Action\` when creating your handler.`);
       value: value2,
       defaultValue,
       finalValue: defaultValue,
-      onChange: function(val2) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(val2);
-      }
+      onChange
     }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
     var _useState = _sliced_to_array(React.useState(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
     var _useState1 = _sliced_to_array(React.useState(0), 2), active2 = _useState1[0], setActive = _useState1[1];
-    var _useState2 = _sliced_to_array(React.useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
+    var _useState2 = _sliced_to_array(React.useState(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
     var _useState3 = _sliced_to_array(React.useState({
       scale: 1,
-      moveable: false
+      moveable: false,
+      oriDistance: 0,
+      originScale: 1
     }), 2), store = _useState3[0], setStore = _useState3[1];
-    var _useState4 = _sliced_to_array(React.useState(0), 2), lastTouchEndTime = _useState4[0], setLastTouchEndTime = _useState4[1];
+    var lastTouchEndTime = React.useRef(0);
     var onTouchStart = function(event) {
       var touches = event.touches;
       var events = touches[0];
       var events2 = touches[1];
-      var curTouchTime = (/* @__PURE__ */ new Date()).getTime();
-      if (curTouchTime - lastTouchEndTime < 300) {
+      var curTouchTime = Date.now();
+      if (curTouchTime - lastTouchEndTime.current < 100) {
         var store1 = store;
-        if (store1.scale > 1) {
-          store1.scale = 1;
-        } else if (store1.scale === 1) {
-          store1.scale = 2;
-        }
+        store1.scale = store1.scale === 1 ? 2 : 1;
         scaleNow();
       }
       var store11 = store;
       store11.moveable = true;
       if (events2) {
-        store11.oriDistance = getDistance({
-          x: events.pageX,
-          y: events.pageY
-        }, {
-          x: events2.pageX,
-          y: events2.pageY
-        });
+        store11.oriDistance = getDistance(events, events2);
       }
-      store11.originScale = store11.scale || 1;
+      store11.originScale = store11.scale;
     };
     var onTouchMove = function(event) {
+      if (!store.moveable) return;
       var touches = event.touches;
       var events = touches[0];
       var events2 = touches[1];
-      if (!store.moveable) {
-        return;
-      }
       var store1 = store;
       if (events2) {
-        var curDistance = getDistance({
-          x: events.pageX,
-          y: events.pageY
-        }, {
-          x: events2.pageX,
-          y: events2.pageY
-        });
+        var curDistance = getDistance(events, events2);
         var curScale = curDistance / store1.oriDistance;
-        store1.scale = store1.originScale * curScale;
-        if (store1.scale > 3) {
-          store1.scale = 3;
-        }
+        store1.scale = Math.min(store1.originScale * curScale, 3);
         scaleNow();
       }
     };
     var onTouchEnd = function() {
-      setLastTouchEndTime((/* @__PURE__ */ new Date()).getTime());
+      lastTouchEndTime.current = Date.now();
       var store1 = store;
       store1.moveable = false;
       if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
@@ -40497,6 +40529,11 @@ Please add \`${key2}Action\` when creating your handler.`);
       document.addEventListener("touchmove", onTouchMove);
       document.addEventListener("touchend", onTouchEnd);
       document.addEventListener("touchcancel", onTouchEnd);
+      return function() {
+        document.removeEventListener("touchcancel", onTouchEnd);
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("touchend", onTouchEnd);
+      };
     };
     React.useEffect(function() {
       setShowPop(visible);
@@ -40514,7 +40551,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       innerNo
     ]);
     React.useEffect(function() {
-      setMaxNo((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0));
+      setMaxNo(images.length + videos.length);
     }, [
       images,
       videos
@@ -40525,7 +40562,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     };
     var getDistance = function(first, second) {
-      return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+      return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
     };
     var slideChangeEnd = function(page) {
       setActive(page + 1);
@@ -40536,31 +40573,26 @@ Please add \`${key2}Action\` when creating your handler.`);
       setShowPop(false);
       setActive(innerNo);
       scaleNow();
-      onClose && onClose();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
       setStore(_object_spread_props(_object_spread({}, store), {
         scale: 1
       }));
     };
     var closeOnImg = function(e2) {
       e2.stopPropagation();
-      if (closeOnContentClick) {
-        onCloseInner(e2);
-      }
+      if (closeOnContentClick) onCloseInner(e2);
     };
     var duration = typeof autoPlay === "string" ? parseInt(autoPlay) : autoPlay;
     return /* @__PURE__ */ React.createElement(Popup, {
       visible: showPop,
       className: "".concat(classPrefix2, "-pop"),
-      style: {
-        width: "100%"
-      },
       onClick: onCloseInner
     }, /* @__PURE__ */ React.createElement("div", {
       className: classNames(classPrefix2, className),
       style,
       ref,
       onTouchStart
-    }, showPop ? /* @__PURE__ */ React.createElement(InnerSwiper, {
+    }, showPop && /* @__PURE__ */ React.createElement(InnerSwiper, {
       autoPlay: !!duration,
       duration,
       className: "".concat(classPrefix2, "-swiper"),
@@ -40572,50 +40604,39 @@ Please add \`${key2}Action\` when creating your handler.`);
       onChange: function(page) {
         return slideChangeEnd(page);
       },
-      defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+      defaultValue: innerNo > maxNo ? maxNo - 1 : innerNo - 1,
       indicator
-    }, (videos !== null && videos !== void 0 ? videos : []).map(function(item) {
+    }, _to_consumable_array(videos.map(function(item) {
       return {
         type: "video",
         data: item
       };
-    }).concat((images !== null && images !== void 0 ? images : []).map(function(item) {
+    })).concat(_to_consumable_array(images.map(function(item) {
       return {
         type: "image",
         data: item
       };
-    })).sort(function(a, b) {
-      var _a_data, _b_data;
+    }))).sort(function(a, b) {
       var _a_data_index, _b_data_index;
-      return ((_a_data_index = (_a_data = a.data) === null || _a_data === void 0 ? void 0 : _a_data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = (_b_data = b.data) === null || _b_data === void 0 ? void 0 : _b_data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
+      return ((_a_data_index = a.data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = b.data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
     }).map(function(item, index2) {
-      if (item.type === "video") {
-        var _item_data = item.data, source = _item_data.source, options2 = _item_data.options;
-        return /* @__PURE__ */ React.createElement(SwiperItem, {
-          key: index2
-        }, /* @__PURE__ */ React.createElement(Video, {
-          source,
-          options: options2,
-          onClick: closeOnImg
-        }));
-      }
-      if (item.type === "image") {
-        var src = item.data.src;
-        return /* @__PURE__ */ React.createElement(SwiperItem, {
-          key: index2
-        }, /* @__PURE__ */ React.createElement(Image$1, {
-          src,
-          draggable: false,
-          onClick: closeOnImg
-        }));
-      }
-      return null;
-    })) : null), pagination ? /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React.createElement(SwiperItem, {
+        key: index2
+      }, item.type === "video" ? /* @__PURE__ */ React.createElement(Video, {
+        source: item.data.source,
+        options: item.data.options,
+        onClick: closeOnImg
+      }) : /* @__PURE__ */ React.createElement(Image$1, {
+        src: item.data.src,
+        draggable: false,
+        onClick: closeOnImg
+      }));
+    }))), pagination && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-index")
-    }, active2, "/", (images ? images.length : 0) + (videos ? videos.length : 0)) : null, closeIcon !== false ? /* @__PURE__ */ React.createElement("div", {
+    }, active2, "/", maxNo), closeIcon !== false && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-close ").concat(closeIconPosition),
       onClick: onCloseInner
-    }, closeIcon === true ? /* @__PURE__ */ React.createElement(n$6, null) : closeIcon) : null);
+    }, closeIcon === true ? /* @__PURE__ */ React.createElement(n$6, null) : closeIcon));
   };
   ImagePreview.displayName = "NutImagePreview";
   var defaultPaginationOptions = {