@nutui/nutui-react-taro 4.0.0-beta.6 → 4.0.0-beta.7

package/dist/cjs/packages/resultpage/style/style.harmony.css

@@ -162,7 +162,6 @@ page {
   padding: var(--nutui-button-xlarge-padding, 0px calc(20px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -178,12 +177,14 @@ page {
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, calc(44px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-44-padding, 0px calc(16px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -199,12 +200,14 @@ page {
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, calc(40px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-large-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(84px * var(--nut-scale-f, 1));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -220,12 +223,14 @@ page {
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-large {
+  min-width: calc(84px * var(--nut-scale-f, 1));
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, calc(36px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-36-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(66px * var(--nut-scale-f, 1));
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -241,13 +246,14 @@ page {
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: calc(66px * var(--nut-scale-f, 1));
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, calc(28px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-small-padding, 0px calc(8px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
-  min-width: calc(52px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -257,13 +263,15 @@ page {
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-small {
+  min-width: calc(52px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, calc(24px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-mini-padding, 0px calc(6px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
-  min-width: calc(48px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -273,6 +281,10 @@ page {
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-mini {
+  min-width: calc(48px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));

package/dist/cjs/packages/shortpassword/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/cjs/packages/skeleton/skeleton.js

@@ -27,21 +27,6 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     duration: 0.6
 });
 var Skeleton = function Skeleton(props) {
-    var shapeStyle = function shapeStyle() {
-        if (shape === 'circle') return {
-            borderRadius: '50%'
-        };
-        if (shape === 'square') return {
-            borderRadius: '0'
-        };
-        return {};
-    };
-    var durationStyle = function durationStyle() {
-        if (typeof duration !== 'undefined') return {
-            animationDuration: "".concat(duration, "s")
-        };
-        return {};
-    };
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, width = _$_object_spread.width, height = _$_object_spread.height, shape = _$_object_spread.shape, animated = _$_object_spread.animated, rows = _$_object_spread.rows, visible = _$_object_spread.visible, size = _$_object_spread.size, duration = _$_object_spread.duration, children = _$_object_spread.children, rest = (0, _object_without_properties._)(_$_object_spread, [
         "className",
         "width",
@@ -63,6 +48,21 @@ var Skeleton = function Skeleton(props) {
             return i;
         });
     };
+    function shapeStyle() {
+        if (shape === 'circle') return {
+            borderRadius: '50%'
+        };
+        if (shape === 'square') return {
+            borderRadius: '0'
+        };
+        return {};
+    }
+    function durationStyle() {
+        if (typeof duration !== 'undefined') return {
+            animationDuration: "".concat(duration, "s")
+        };
+        return {};
+    }
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), animate = _useState[0], setAnimate = _useState[1];
     var playAnimation = function playAnimation() {
         setAnimate(false);

package/dist/cjs/packages/timeselect/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/cjs/packages/tour/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);
@@ -420,22 +426,22 @@ page {
 .nut-popover-arrow {
   position: absolute;
   width: 8px;
-  height: 4px;
+  height: 8px;
 }
 .nut-popover-arrow .nut-icon-ArrowRadius {
   position: absolute;
-  color: var(--nutui-popover-content-background-color, #ffffff);
+  color: var(--nutui-popover-content-background-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   width: 8px;
-  height: 4px;
+  height: 8px;
 }
 .nut-popover-arrow-top {
-  bottom: -4px;
+  bottom: -8px;
 }
 .nut-popover-arrow-bottom {
-  top: -4px;
+  top: -8px;
 }
 .nut-popover-arrow-left {
-  right: -6px;
+  right: -8px;
   transform-origin: center top;
 }
 .nut-popover-arrow-left.nut-popover-arrow-left {
@@ -443,14 +449,11 @@ page {
   transform: rotate(90deg) translateY(-50%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-top {
-  top: 16px;
-  right: -8px;
+  right: -12px;
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-bottom {
-  top: auto;
-  bottom: 16px;
-  right: -8px;
+  right: -12px;
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-right {
@@ -458,70 +461,83 @@ page {
 }
 .nut-popover-arrow-right.nut-popover-arrow-right {
   top: 50%;
-  left: -6px;
+  left: -8px;
   transform: rotate(-90deg) translateY(-50%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-top {
-  top: 16px;
-  left: -8px;
+  left: -12px;
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-bottom {
-  bottom: 16px;
-  left: -8px;
+  left: -12px;
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover .nut-popover-content {
   position: absolute;
-  background: var(--nutui-popover-content-background-color, #ffffff);
-  border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
+  background: var(--nutui-popover-content-background-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
-  color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  line-height: 28px;
+  color: var(--nutui-popover-text-color, var(--nutui-color-primary-text, #ffffff));
   /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
   /* #endif */
 }
 .nut-popover .nut-popover-content-group {
-  padding: 0 var(--nutui-popover-padding, calc(8px * var(--nut-scale-f, 1)));
+  padding: 0 var(--nutui-popover-padding-horizontal, calc(8px * var(--nut-scale-f, 1)));
+  overflow: visible;
 }
 .nut-popover .nut-popover-content .nut-popover-item {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  max-width: var(--nutui-popover-item-width, calc(160px * var(--nut-scale-f, 1)));
+  min-height: var(--nutui-popover-height, calc(28px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-popover-padding-vertical, calc(6px * var(--nut-scale-f, 1))) 0;
+  border-bottom: 1px solid var(--nutui-popover-divider-color, rgba(255, 255, 255, 0.12));
   word-wrap: break-word;
 }
 .nut-popover .nut-popover-content .nut-popover-item:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   border-bottom: none;
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  height: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--nutui-popover-icon-size, calc(12px * var(--nut-scale-f, 1)));
+  color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8));
+}
+.nut-popover .nut-popover-content .nut-popover-item-icon::before, .nut-popover .nut-popover-content .nut-popover-item-action-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--nutui-popover-action-hotspot-size, calc(36px * var(--nut-scale-f, 1)));
+  transform: translateX(-50%);
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon {
-  width: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  height: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  position: relative;
+  z-index: 1;
+  width: var(--nutui-popover-icon-size, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-popover-icon-size, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon {
   margin-right: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item-name {
-  width: calc(100% - 34px);
   word-break: keep-all;
   flex: 1;
+  min-width: 0;
+  text-align: center;
+  line-height: calc(var(--nutui-popover-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-popover-padding-vertical, calc(6px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-popover .nut-popover-content .nut-popover-item-action-icon {
-  color: var(--nutui-color-text, #505259);
-  margin-left: var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1)));
+  margin-left: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
   color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #b4b8bf));
@@ -539,17 +555,15 @@ page {
   right: 0;
 }
 .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
-  right: 16px;
-  bottom: -3.5px;
-  transform: rotate(180deg) translateX(0%);
+  transform-origin: center right;
+  transform: rotate(180deg) translateX(50%);
 }
 .nut-popover .nut-popover-content-top-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
-  left: 16px;
-  bottom: -3.5px;
-  transform: rotate(180deg) translateX(0%);
+  transform-origin: center left;
+  transform: rotate(180deg) translateX(-50%);
 }
 .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
   left: 50%;
@@ -559,15 +573,13 @@ page {
   right: 0;
 }
 .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
-  right: 16px;
-  transform: translateX(0%);
+  transform: translateX(50%);
 }
 .nut-popover .nut-popover-content-bottom-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
-  left: 16px;
-  transform: translateX(0%);
+  transform: translateX(-50%);
 }
 .nut-popover .nut-popover-content-left-bottom {
   bottom: 0;
@@ -581,30 +593,40 @@ page {
 .nut-popover .nut-popover-content-right-top {
   top: 0;
 }
+.nut-popover--status .nut-popover-content .nut-popover-item {
+  max-width: var(--nutui-popover-status-max-width, calc(240px * var(--nut-scale-f, 1)));
+}
+.nut-popover--description .nut-popover-content .nut-popover-item {
+  max-width: var(--nutui-popover-description-max-width, calc(208px * var(--nut-scale-f, 1)));
+}
 
-.nut-popover-dark {
-  background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  color: var(--nutui-popover-content-background-color, #ffffff);
+.nut-popover-light .nut-popover-arrow .nut-icon-ArrowRadius,
+.nut-popover-light .nut-popover-arrow .nut-popover-arrow-svg {
+  color: var(--nutui-popover-light-content-background-color, #ffffff);
 }
-.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius {
-  color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+.nut-popover-light .nut-popover-content {
+  background: var(--nutui-popover-light-content-background-color, #ffffff) !important;
+  color: var(--nutui-popover-light-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important;
 }
-.nut-popover-dark .nut-popover-content {
-  background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important;
-  color: var(--nutui-popover-content-background-color, #ffffff) !important;
+.nut-popover-light .nut-popover-content .nut-popover-item {
+  border-bottom-color: var(--nutui-popover-light-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
-.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon {
-  color: rgba(255, 255, 255, 0.8);
+.nut-popover-light .nut-popover-content .nut-popover-item-icon, .nut-popover-light .nut-popover-content .nut-popover-item-action-icon {
+  color: var(--nutui-popover-light-icon-color, rgba(17, 20, 26, 0.8));
+}
+.nut-popover-light .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover-light .nut-popover-content .nut-popover-item-action-icon .nut-icon {
+  color: var(--nutui-popover-light-icon-color, rgba(17, 20, 26, 0.8));
 }
 
-[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
-.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
-  margin-left: 0;
-  margin-right: 4px;
+[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-icon,
+.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-icon {
+  margin-right: 0;
+  margin-left: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
 .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
-  right: auto;
+  margin-left: 0;
+  margin-right: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popover .nut-popover-content-top .nut-popover-arrow-top,
 .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -620,7 +642,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
 .nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
   right: auto;
-  left: 16px;
 }
 [dir=rtl] .nut-popover .nut-popover-content-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left {
@@ -630,7 +651,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
   left: auto;
-  right: 16px;
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom,
 .nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
@@ -646,7 +666,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
 .nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
   right: auto;
-  left: 16px;
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left {
@@ -656,7 +675,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
   left: auto;
-  right: 16px;
 }
 
 .nut-popover-enter-from,

package/dist/cjs/packages/tour/tour.js

@@ -148,7 +148,7 @@ var Tour = function Tour(props) {
                 0,
                 8
             ],
-            arrowOffset: item.arrowOffset || 0
+            arrowOffset: item.arrowOffset || 20
         }, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, type === 'step' && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-tour-content"
         }, title && /*#__PURE__*/ _react.default.createElement(_components.View, {

package/dist/cjs/types/spec/noticebar/base.d.ts

@@ -14,12 +14,16 @@ export interface BaseNoticeBar extends BaseProps {
     leftIcon: ReactNode;
     rightIcon: ReactNode;
     right: ReactNode;
+    description: ReactNode;
+    tag: ReactNode;
+    action: ReactNode;
+    autoClose: number;
     delay: string | number;
     scrollable: boolean | null;
     speed: number;
     close?: (event: any) => void;
     click?: (event: any) => void;
-    onClose?: (event: any) => void;
+    onClose?: (event?: any) => void;
     onClick?: (event: any) => void;
     onItemClick?: (event: any, value: any) => void;
 }

package/dist/cjs/types/spec/popover/base.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
 import { FullPosition, SimpleValues, UITheme } from '../../base/atoms';
+export type PopoverType = 'status' | 'description';
 export interface PopoverList {
     key?: string;
     name: string;
@@ -20,6 +21,7 @@ export interface WrapperPosition {
     right: number;
 }
 export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
+    type: PopoverType;
     theme: UITheme;
     location: FullPosition;
     list: PopoverList[];
@@ -30,6 +32,8 @@ export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
     showArrow: boolean;
     closeOnOutsideClick: boolean;
     closeOnActionClick: boolean;
+    autoShow: boolean;
+    duration: number;
     children?: ReactNode;
     onClick: () => void;
     onOpen: () => void;

package/dist/cjs/utils/is-forward-ref-component.js

@@ -12,6 +12,6 @@ var _interop_require_default = require("@swc/helpers/_/_interop_require_default"
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 function isForwardRefComponent(component) {
     return component.type && component.type.$$typeof && // eslint-disable-next-line react/display-name
-    /*#__PURE__*/ _react.default.forwardRef(// @ts-ignore
-    function() {}).$$typeof === component.type.$$typeof;
+    /*#__PURE__*/ (_react.default.forwardRef(// @ts-ignore
+    function() {})).$$typeof === component.type.$$typeof;
 }

package/dist/cjs/utils/render.js

@@ -19,8 +19,8 @@ _export(exports, {
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _object_spread = require("@swc/helpers/_/_object_spread");
-var _type_of = require("@swc/helpers/_/_type_of");
 var _ts_generator = require("@swc/helpers/_/_ts_generator");
+var _type_of = require("@swc/helpers/_/_type_of");
 var _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
 // Let compiler not to search module usage
 var fullClone = (0, _object_spread._)({}, _reactdom);