@nutui/nutui-react-taro 3.0.19-cpp.8 → 3.0.19

package/dist/es/packages/button/button.js

@@ -4,9 +4,9 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import React, { useCallback, useMemo } from "react";
 import classNames from "classnames";
-import { // ButtonProps as MiniProgramButtonProps,
-View } from "@tarojs/components";
+import { View, Button as TaroButton } from "@tarojs/components";
 import { Loading } from "@nutui/icons-react-taro";
+import { getEnv } from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { harmony } from "../../utils/taro/platform";
 var prefixCls = 'nut-button';
@@ -24,8 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onClick: function(e) {}
 });
 export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var _ref = _object_spread({}, defaultProps, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, // formType,
-    nativeType = _ref.nativeType, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, formType = _ref.formType, nativeType = _ref.nativeType, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
         "color",
         "shape",
         "fill",
@@ -39,6 +38,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "children",
         "className",
         "style",
+        "formType",
         "nativeType",
         "onClick"
     ]);
@@ -92,17 +92,17 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     ]);
     var _obj;
     var buttonClassNames = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(size), size), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-").concat(shape, "-").concat(size), shape && size), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _define_property(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
-    // if (getEnv() === 'WEB') {
-    //   ;(rest as any).type = formType
-    // }
+    if (getEnv() === 'WEB') {
+        ;
+        rest.type = formType;
+    }
     return (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         // eslint-disable-next-line react/button-has-type
-        // <TaroButton
-        /*#__PURE__*/ (React.createElement(View, _object_spread_props(_object_spread({}, rest), {
+        /*#__PURE__*/ (React.createElement(TaroButton, _object_spread_props(_object_spread({}, rest), {
             ref: ref,
-            // formType={formType || nativeType}
+            formType: formType || nativeType,
             className: buttonClassNames,
             style: _object_spread({}, getStyle, style),
             onClick: function(e) {

package/dist/es/packages/button/style/button.scss

@@ -58,6 +58,9 @@
     /* #ifdef dynamic*/
     pointer-events: none;
     /* #endif */
+    /* #ifndef dynamic*/
+    pointer-events: auto;
+    /* #endif */
   }
 
   &::after {

package/dist/es/packages/button/style/style.css

@@ -60,6 +60,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;

package/dist/es/packages/button/style/style.harmony.css

@@ -60,6 +60,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;

package/dist/es/packages/button/style-jmapp/button.scss

@@ -58,6 +58,9 @@
     /* #ifdef dynamic*/
     pointer-events: none;
     /* #endif */
+    /* #ifndef dynamic*/
+    pointer-events: auto;
+    /* #endif */
   }
 
   &::after {

package/dist/es/packages/button/style-jmapp/style.css

@@ -60,6 +60,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;

package/dist/es/packages/button/style-jrkf/button.scss

@@ -58,6 +58,9 @@
     /* #ifdef dynamic*/
     pointer-events: none;
     /* #endif */
+    /* #ifndef dynamic*/
+    pointer-events: auto;
+    /* #endif */
   }
 
   &::after {

package/dist/es/packages/button/style-jrkf/style.css

@@ -60,6 +60,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;

package/dist/es/packages/card/style/style.harmony.css

@@ -106,7 +106,7 @@
   background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tag-primary {
-  background: #fa2c19;
+  background: var(--nutui-tag-primary-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-tag-info {
   background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff));
@@ -130,7 +130,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

package/dist/es/packages/cascader/cascader.js

@@ -174,8 +174,8 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
         outerOptions
     ]);
     useEffect(function() {
-        var load = function() {
-            return _async_to_generator(function() {
+        var load = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator(function() {
                 var parent, error;
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
@@ -193,8 +193,8 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
                             ]);
                             return [
                                 4,
-                                innerValue.reduce(function(promise, val, key) {
-                                    return _async_to_generator(function() {
+                                innerValue.reduce(/*#__PURE__*/ function() {
+                                    var _ref = _async_to_generator(function(promise, val, key) {
                                         var pane, parent, node;
                                         return _ts_generator(this, function(_state) {
                                             switch(_state.label){
@@ -234,8 +234,11 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
                                                     ];
                                             }
                                         });
-                                    })();
-                                }, Promise.resolve(parent))
+                                    });
+                                    return function(promise, val, key) {
+                                        return _ref.apply(this, arguments);
+                                    };
+                                }(), Promise.resolve(parent))
                             ];
                         case 2:
                             _state.sent();
@@ -258,14 +261,17 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
                             ];
                     }
                 });
-            })();
-        };
+            });
+            return function load() {
+                return _ref.apply(this, arguments);
+            };
+        }();
         if (lazy) load();
     }, [
         lazy
     ]);
-    var chooseItem = function(pane, levelIndex) {
-        return _async_to_generator(function() {
+    var chooseItem = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(pane, levelIndex) {
             var nextValue, nextPathNodes, _props_onPathChange, asyncOptions;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -319,8 +325,11 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
                         ];
                 }
             });
-        })();
-    };
+        });
+        return function chooseItem(pane, levelIndex) {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var renderCascaderItem = function(item, levelIndex) {
         var _item_pane;
         return (_item_pane = item.pane) === null || _item_pane === void 0 ? void 0 : _item_pane.map(function(pane, index) {

package/dist/es/packages/cascader/style/cascader.scss

@@ -8,8 +8,10 @@
   }
 
   .nut-tabs-titles-item {
+    /* #ifndef dynamic*/
     flex: initial;
     min-width: auto;
+    /* #endif */
     width: auto;
     padding: $cascader-tabs-item-padding;
     white-space: nowrap;

package/dist/es/packages/cascader/style/style.css

@@ -11,8 +11,10 @@
   background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-cascader .nut-tabs-titles-item {
+  /* #ifndef dynamic*/
   flex: initial;
   min-width: auto;
+  /* #endif */
   width: auto;
   padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
   white-space: nowrap;

package/dist/es/packages/cascader/style/style.harmony.css

@@ -390,7 +390,9 @@
   color: var(--nutui-color-title, #1a1a1a);
   padding: var(--nutui-tabs-tabpane-padding, 24px 20px);
   box-sizing: border-box;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-tabpane.inactive {
   overflow: visible;
@@ -491,14 +493,18 @@
   font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
+  /* #ifndef dynamic*/
   overflow: unset;
+  /* #endif */
   content: " ";
   width: var(--nutui-tabs-tab-line-width, 12px);
   height: var(--nutui-tabs-tab-line-height, 2px);
   background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
+  /* #ifndef dynamic*/
   overflow: unset;
+  /* #endif */
   width: 40px;
   height: 20px;
 }
@@ -712,8 +718,10 @@
   background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-cascader .nut-tabs-titles-item {
+  /* #ifndef dynamic*/
   flex: initial;
   min-width: auto;
+  /* #endif */
   width: auto;
   padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
   white-space: nowrap;

package/dist/es/packages/cascader/style-jmapp/cascader.scss

@@ -8,8 +8,10 @@
   }
 
   .nut-tabs-titles-item {
+    /* #ifndef dynamic*/
     flex: initial;
     min-width: auto;
+    /* #endif */
     width: auto;
     padding: $cascader-tabs-item-padding;
     white-space: nowrap;

package/dist/es/packages/cascader/style-jmapp/style.css

@@ -11,8 +11,10 @@
   background: var(--nutui-color-surface-2);
 }
 .nut-cascader .nut-tabs-titles-item {
+  /* #ifndef dynamic*/
   flex: initial;
   min-width: auto;
+  /* #endif */
   width: auto;
   padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
   white-space: nowrap;

package/dist/es/packages/cascader/style-jrkf/cascader.scss

@@ -8,8 +8,10 @@
   }
 
   .nut-tabs-titles-item {
+    /* #ifndef dynamic*/
     flex: initial;
     min-width: auto;
+    /* #endif */
     width: auto;
     padding: $cascader-tabs-item-padding;
     white-space: nowrap;

package/dist/es/packages/cascader/style-jrkf/style.css

@@ -11,8 +11,10 @@
   background: var(--nutui-color-surface-2);
 }
 .nut-cascader .nut-tabs-titles-item {
+  /* #ifndef dynamic*/
   flex: initial;
   min-width: auto;
+  /* #endif */
   width: auto;
   padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
   white-space: nowrap;

package/dist/es/packages/cell/style/style.harmony.css

@@ -6,7 +6,9 @@
   display: block;
 }
 .nut-cell-group-title {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-title-padding, 0 10px);
   color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14px));
@@ -15,7 +17,9 @@
   margin-bottom: 10px;
 }
 .nut-cell-group-description {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-description-padding, 0 10px);
   color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12px));

package/dist/es/packages/cellgroup/style/cellgroup.scss

@@ -2,7 +2,9 @@
   display: block;
 
   &-title {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-title-padding;
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
@@ -12,7 +14,9 @@
   }
 
   &-description {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-description-padding;
     color: $cell-group-description-color;
     font-size: $cell-group-description-font-size;

package/dist/es/packages/cellgroup/style/style.css

@@ -6,7 +6,9 @@
   display: block;
 }
 .nut-cell-group-title {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-title-padding, 0 10px);
   color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14px));
@@ -15,7 +17,9 @@
   margin-bottom: 10px;
 }
 .nut-cell-group-description {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-description-padding, 0 10px);
   color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12px));

package/dist/es/packages/cellgroup/style/style.harmony.css

@@ -6,7 +6,9 @@
   display: block;
 }
 .nut-cell-group-title {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-title-padding, 0 10px);
   color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14px));
@@ -15,7 +17,9 @@
   margin-bottom: 10px;
 }
 .nut-cell-group-description {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-description-padding, 0 10px);
   color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12px));

package/dist/es/packages/cellgroup/style-jmapp/cellgroup.scss

@@ -2,7 +2,9 @@
   display: block;
 
   &-title {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-title-padding;
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
@@ -12,7 +14,9 @@
   }
 
   &-description {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-description-padding;
     color: $cell-group-description-color;
     font-size: $cell-group-description-font-size;

package/dist/es/packages/cellgroup/style-jmapp/style.css

@@ -6,7 +6,9 @@
   display: block;
 }
 .nut-cell-group-title {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-title-padding, 0 10px);
   color: var(--nutui-cell-group-title-color, var(--nutui-color-title));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-text));
@@ -15,7 +17,9 @@
   margin-bottom: 10px;
 }
 .nut-cell-group-description {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-description-padding, 0 10px);
   color: var(--nutui-cell-group-description-color, var(--nutui-color-text));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-text-small));

package/dist/es/packages/cellgroup/style-jrkf/cellgroup.scss

@@ -2,7 +2,9 @@
   display: block;
 
   &-title {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-title-padding;
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
@@ -12,7 +14,9 @@
   }
 
   &-description {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-description-padding;
     color: $cell-group-description-color;
     font-size: $cell-group-description-font-size;

package/dist/es/packages/cellgroup/style-jrkf/style.css

@@ -6,7 +6,9 @@
   display: block;
 }
 .nut-cell-group-title {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-title-padding, 0 10px);
   color: var(--nutui-cell-group-title-color, var(--nutui-color-title));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-text));
@@ -15,7 +17,9 @@
   margin-bottom: 10px;
 }
 .nut-cell-group-description {
+  /* #ifndef dynamic*/
   display: inherit;
+  /* #endif */
   padding: var(--nutui-cell-group-description-padding, 0 10px);
   color: var(--nutui-cell-group-description-color, var(--nutui-color-text));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-text-small));

package/dist/es/packages/checkbox/checkbox.js

@@ -75,33 +75,44 @@ export var Checkbox = function(props) {
     var renderIcon = function() {
         if (innerDisabled) {
             if (innerIndeterminate) {
+                // @ts-ignore
                 return /*#__PURE__*/ React.createElement(CheckDisabled, {
-                    className: color()
+                    className: color(),
+                    ariaHidden: true
                 });
             }
             if (innerChecked) {
+                // @ts-ignore
                 return /*#__PURE__*/ React.createElement(Checked, {
-                    className: color()
+                    className: color(),
+                    ariaHidden: true
                 });
             }
+            // @ts-ignore
             return /*#__PURE__*/ React.createElement(CheckDisabled, {
-                className: color()
+                className: color(),
+                ariaHidden: true
             });
         }
         if (!innerChecked) {
-            return /*#__PURE__*/ React.isValidElement(icon) ? icon : /*#__PURE__*/ React.createElement(CheckNormal, {
-                className: color()
+            return /*#__PURE__*/ React.isValidElement(icon) ? icon : // @ts-ignore
+            /*#__PURE__*/ React.createElement(CheckNormal, {
+                className: color(),
+                ariaHidden: true
             });
         }
         if (innerIndeterminate) {
-            return /*#__PURE__*/ React.isValidElement(indeterminateIcon) ? indeterminateIcon : /*#__PURE__*/ React.createElement(CheckDisabled, {
-                className: color()
+            return /*#__PURE__*/ React.isValidElement(indeterminateIcon) ? indeterminateIcon : // @ts-ignore
+            /*#__PURE__*/ React.createElement(CheckDisabled, {
+                className: color(),
+                ariaHidden: true
             });
         }
         return /*#__PURE__*/ React.isValidElement(activeIcon) ? activeIcon : /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-icon-wrap")
         }, /*#__PURE__*/ React.createElement(Checked, {
-            className: color()
+            className: color(),
+            ariaHidden: true
         }));
     };
     var color = function() {
@@ -159,7 +170,10 @@ export var Checkbox = function(props) {
     return /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({
         className: classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), _define_property(_obj, 'nut-checkbox-list-item', ctx === null || ctx === void 0 ? void 0 : ctx.list), _define_property(_obj, "".concat(classPrefix, "-active"), innerChecked), _obj), className)
     }, rest), {
-        onClick: handleClick
+        onClick: handleClick,
+        ariaRole: "checkbox",
+        tabIndex: innerDisabled ? -1 : 0,
+        ariaChecked: innerIndeterminate ? 'mixed' : innerChecked
     }), renderCheckboxItem());
 };
 Checkbox.displayName = 'NutCheckBox';

package/dist/es/packages/checkbox/style/checkbox.scss

@@ -17,6 +17,7 @@
 
   &-icon-checked {
     color: $color-primary;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     border-radius: 50%;
@@ -39,6 +40,7 @@
 
   &-icon-indeterminate {
     color: $color-primary;
+    background-color: $white;
     box-shadow: 0px 2px 4px 0px #ff0f2333;
     border-radius: 50%;
 
@@ -49,6 +51,8 @@
 
   &-icon-disabled {
     color: $color-text-disabled;
+    background-color: $white;
+    border-radius: 50%;
     box-shadow: none;
   }
 
@@ -63,7 +67,12 @@
 
   &-button {
     position: relative;
+    /* #ifdef dynamic */
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic */
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 32px;
     padding: $checkbox-button-padding;

package/dist/es/packages/checkbox/style/style.css

@@ -19,6 +19,7 @@
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   border-radius: 50%;
@@ -37,6 +38,7 @@
 }
 .nut-checkbox-icon-indeterminate {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
@@ -45,6 +47,8 @@
 }
 .nut-checkbox-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
+  background-color: #ffffff;
+  border-radius: 50%;
   box-shadow: none;
 }
 .nut-checkbox-reverse {
@@ -56,7 +60,12 @@
 }
 .nut-checkbox-button {
   position: relative;
+  /* #ifdef dynamic */
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic */
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 32px;
   padding: var(--nutui-checkbox-button-padding, 5px 18px);