@nutui/nutui-react-taro 3.0.19-cpp.22 → 3.0.19-cpp.24

package/dist/cjs/locales/ja-JP.d.ts

@@ -0,0 +1,3 @@
+import { BaseLang } from './base';
+declare const jaJP: BaseLang;
+export default jaJP;

package/dist/cjs/locales/ja-JP.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var jaJP = {
+    save: '保存',
+    confirm: '確認',
+    cancel: 'キャンセル',
+    done: '完了',
+    noData: 'データなし',
+    placeholder: '内容を入力してください',
+    select: '選択してください',
+    edit: '編集',
+    reset: 'リセット',
+    video: {
+        errorTip: '動画の読み込みに失敗しました',
+        clickRetry: 'クリックして再試行'
+    },
+    fixednav: {
+        activeText: 'ナビを折りたたむ',
+        inactiveText: 'クイックナビゲーション'
+    },
+    infiniteloading: {
+        pullRefreshText: '指を離して更新',
+        loadText: '読み込み中',
+        loadMoreText: 'これ以上データはありません'
+    },
+    pagination: {
+        prev: '前へ',
+        next: '次へ'
+    },
+    range: {
+        rangeText: 'この範囲外です'
+    },
+    calendaritem: {
+        weekdays: [
+            '日',
+            '月',
+            '火',
+            '水',
+            '木',
+            '金',
+            '土'
+        ],
+        end: '終了',
+        start: '開始',
+        confirm: '確認',
+        title: 'カレンダー選択',
+        monthTitle: function monthTitle(year, month) {
+            return "".concat(year, "年").concat(Number(month) < 10 ? "0".concat(Number(month)) : month, "月");
+        },
+        today: '今日',
+        loadPreviousMonth: '前の月を読み込む',
+        noEarlierMonth: 'これより前の月はありません'
+    },
+    shortpassword: {
+        title: 'パスワードを入力してください',
+        description: '仮想資産を使用しました。認証を行ってください',
+        tips: 'パスワードを忘れた場合'
+    },
+    uploader: {
+        list: 'ファイルをアップロード',
+        ready: '準備完了',
+        readyUpload: 'アップロード準備完了',
+        waitingUpload: 'アップロード待ち',
+        uploading: 'アップロード中...',
+        success: 'アップロード成功',
+        error: 'アップロード失敗',
+        deleteWord: 'ユーザーによって削除がブロックされました！'
+    },
+    countdown: {
+        day: '日',
+        hour: '時間',
+        minute: '分',
+        second: '秒'
+    },
+    address: {
+        selectRegion: '住所を選択してください',
+        deliveryTo: '配送先',
+        chooseAnotherAddress: '別の住所を選択',
+        hotCity: '人気都市',
+        selectProvince: '都道府県/地域を選択'
+    },
+    signature: {
+        reSign: '再署名',
+        unsupported: '申し訳ありませんが、現在のブラウザはCanvasをサポートしていません。このコントロールは使用できません！'
+    },
+    ecard: {
+        chooseText: '電子カードの額面を選択してください',
+        otherValueText: 'その他の額面',
+        placeholder: '1から5000までの整数を入力してください'
+    },
+    timeselect: {
+        pickupTime: '受け取り時間'
+    },
+    sku: {
+        buyNow: '今すぐ購入',
+        buyNumber: '購入数量',
+        addToCard: 'カートに入れる'
+    },
+    skuheader: {
+        skuId: '商品コード'
+    },
+    addresslist: {
+        addAddress: '新しい住所を追加'
+    },
+    comment: {
+        complaintsText: 'クレームを報告する',
+        additionalReview: function additionalReview(day) {
+            return "購入".concat(day, "日後の追加レビュー");
+        },
+        additionalImages: function additionalImages(length) {
+            return "".concat(length, "枚の追加レビュー画像");
+        }
+    },
+    searchbar: {
+        basePlaceholder: 'JD（京東）で良い商品を購入',
+        text: 'テキスト',
+        test: 'テスト',
+        title1: '基本使用',
+        title2: '検索ボックスの形状と最大長',
+        title3: '検索ボックスの内外背景設定',
+        title4: '検索ボックスのテキスト設定',
+        title5: 'カスタムアイコン設定',
+        title6: 'データ変更の監視'
+    },
+    audio: {
+        back: '早戻し',
+        forward: '早送り',
+        pause: '一時停止',
+        start: '開始',
+        mute: 'ミュート',
+        tips: 'onPlayEndイベントはloop=falseの場合にのみトリガーされます'
+    },
+    avatarCropper: {
+        rotate: '回転',
+        selectImage: '画像を選択'
+    },
+    datepicker: {
+        year: '年',
+        month: '月',
+        day: '日',
+        hour: '時',
+        min: '分',
+        seconds: '秒'
+    },
+    pullToRefresh: {
+        pullingText: '下に引いて更新',
+        canReleaseText: '指を離して更新',
+        refreshingText: '更新中',
+        completeText: '更新成功'
+    },
+    tour: {
+        prevStepText: '前へ',
+        completeText: '完了',
+        nextStepText: '次へ'
+    },
+    watermark: {
+        errorCanvasTips: '現在の環境はCanvasをサポートしていません'
+    },
+    mask: 'マスク',
+    close: '閉じる'
+};
+var _default = jaJP;

package/dist/cjs/packages/animatingnumbers/countup.js

@@ -72,6 +72,8 @@ var CountUp = function CountUp(props) {
                             transitionDuration: "".concat(duration, "s"),
                             transform: transform
                         });
+                    } else {
+                        transformArrCache.push({});
                     }
                 });
                 setTransformArr((0, _to_consumable_array._)(transformArrCache));

package/dist/cjs/packages/avatar/avatar.js

@@ -30,13 +30,14 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     background: '#eee',
     color: '#666',
     fit: 'cover',
+    mode: 'scaleToFill',
     src: '',
     alt: '',
     avatarIndex: 0
 });
 var classPrefix = "nut-avatar";
 var Avatar = function Avatar(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, mode = _$_object_spread.mode, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
     var _useState // 是否显示的最大头像个数
      = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showMax = _useState[0], setShowMax = _useState[1];
     var avatarRef = (0, _react.useRef)(null);
@@ -92,6 +93,7 @@ var Avatar = function Avatar(props) {
         style: {
             objectFit: fit
         },
+        mode: mode,
         onError: errorEvent
     }), /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-avatar-text"

package/dist/cjs/packages/checkbox/checkbox.js

@@ -87,33 +87,42 @@ var Checkbox = function Checkbox(props) {
     var renderIcon = function renderIcon() {
         if (innerDisabled) {
             if (innerIndeterminate) {
+                // @ts-ignore
                 return /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckDisabled, {
-                    className: color()
+                    className: color(),
+                    ariaHidden: true
                 });
             }
             if (innerChecked) {
+                // @ts-ignore
                 return /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Checked, {
-                    className: color()
+                    className: color(),
+                    ariaHidden: true
                 });
             }
+            // @ts-ignore
             return /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckDisabled, {
-                className: color()
+                className: color(),
+                ariaHidden: true
             });
         }
         if (!innerChecked) {
             return /*#__PURE__*/ _react.default.isValidElement(icon) ? icon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckNormal, {
-                className: color()
+                className: color(),
+                ariaHidden: true
             });
         }
         if (innerIndeterminate) {
             return /*#__PURE__*/ _react.default.isValidElement(indeterminateIcon) ? indeterminateIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckDisabled, {
-                className: color()
+                className: color(),
+                ariaHidden: true
             });
         }
         return /*#__PURE__*/ _react.default.isValidElement(activeIcon) ? activeIcon : /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-icon-wrap")
         }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Checked, {
-            className: color()
+            className: color(),
+            ariaHidden: true
         }));
     };
     var color = function color() {

package/dist/cjs/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,10 +67,10 @@
 
   &-button {
     position: relative;
-    /* #ifdef dynamic*/
+    /* #ifdef dynamic */
     display: flex;
     /* #endif */
-    /* #ifndef dynamic*/
+    /* #ifndef dynamic */
     display: inline-flex;
     /* #endif */
     align-items: center;

package/dist/cjs/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,10 +60,10 @@
 }
 .nut-checkbox-button {
   position: relative;
-  /* #ifdef dynamic*/
+  /* #ifdef dynamic */
   display: flex;
   /* #endif */
-  /* #ifndef dynamic*/
+  /* #ifndef dynamic */
   display: inline-flex;
   /* #endif */
   align-items: center;

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

@@ -90,6 +90,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%;
@@ -108,6 +109,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%;
 }
@@ -116,6 +118,8 @@
 }
 .nut-checkbox-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
+  background-color: #ffffff;
+  border-radius: 50%;
   box-shadow: none;
 }
 .nut-checkbox-reverse {
@@ -127,10 +131,10 @@
 }
 .nut-checkbox-button {
   position: relative;
-  /* #ifdef dynamic*/
+  /* #ifdef dynamic */
   display: flex;
   /* #endif */
-  /* #ifndef dynamic*/
+  /* #ifndef dynamic */
   display: inline-flex;
   /* #endif */
   align-items: center;

package/dist/cjs/packages/checkbox/style-jmapp/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,10 +67,10 @@
 
   &-button {
     position: relative;
-    /* #ifdef dynamic*/
+    /* #ifdef dynamic */
     display: flex;
     /* #endif */
-    /* #ifndef dynamic*/
+    /* #ifndef dynamic */
     display: inline-flex;
     /* #endif */
     align-items: center;

package/dist/cjs/packages/checkbox/style-jmapp/style.css

@@ -19,6 +19,7 @@
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary);
+  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);
+  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);
+  background-color: #ffffff;
+  border-radius: 50%;
   box-shadow: none;
 }
 .nut-checkbox-reverse {
@@ -56,10 +60,10 @@
 }
 .nut-checkbox-button {
   position: relative;
-  /* #ifdef dynamic*/
+  /* #ifdef dynamic */
   display: flex;
   /* #endif */
-  /* #ifndef dynamic*/
+  /* #ifndef dynamic */
   display: inline-flex;
   /* #endif */
   align-items: center;

package/dist/cjs/packages/checkbox/style-jrkf/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,10 +67,10 @@
 
   &-button {
     position: relative;
-    /* #ifdef dynamic*/
+    /* #ifdef dynamic */
     display: flex;
     /* #endif */
-    /* #ifndef dynamic*/
+    /* #ifndef dynamic */
     display: inline-flex;
     /* #endif */
     align-items: center;

package/dist/cjs/packages/checkbox/style-jrkf/style.css

@@ -19,6 +19,7 @@
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary, #ff6666);
+  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, #ff6666);
+  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);
+  background-color: #ffffff;
+  border-radius: 50%;
   box-shadow: none;
 }
 .nut-checkbox-reverse {
@@ -56,10 +60,10 @@
 }
 .nut-checkbox-button {
   position: relative;
-  /* #ifdef dynamic*/
+  /* #ifdef dynamic */
   display: flex;
   /* #endif */
-  /* #ifndef dynamic*/
+  /* #ifndef dynamic */
   display: inline-flex;
   /* #endif */
   align-items: center;

package/dist/cjs/packages/input/input.js

@@ -53,7 +53,7 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
     var classPrefix = 'nut-input';
     var rtl = (0, _index.useRtl)();
     var locale = (0, _index.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), focus = _ref.focus, type = _ref.type, name = _ref.name, placeholder = _ref.placeholder, align = _ref.align, disabled = _ref.disabled, readOnly = _ref.readOnly, maxLength = _ref.maxLength, clearable = _ref.clearable, clearIcon = _ref.clearIcon, formatTrigger = _ref.formatTrigger, autoFocus = _ref.autoFocus, style = _ref.style, className = _ref.className, plain = _ref.plain, onChange = _ref.onChange, onFocus = _ref.onFocus, onBlur = _ref.onBlur, onClear = _ref.onClear, formatter = _ref.formatter, onClick = _ref.onClick, confirmType = _ref.confirmType, defaultValue = _ref.defaultValue, _value = _ref.value, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), focus = _ref.focus, type = _ref.type, name = _ref.name, placeholder = _ref.placeholder, align = _ref.align, disabled = _ref.disabled, readOnly = _ref.readOnly, maxLength = _ref.maxLength, clearable = _ref.clearable, clearIcon = _ref.clearIcon, formatTrigger = _ref.formatTrigger, autoFocus = _ref.autoFocus, style = _ref.style, className = _ref.className, plain = _ref.plain, inputStyle = _ref.inputStyle, onChange = _ref.onChange, onFocus = _ref.onFocus, onBlur = _ref.onBlur, onClear = _ref.onClear, formatter = _ref.formatter, onClick = _ref.onClick, confirmType = _ref.confirmType, defaultValue = _ref.defaultValue, _value = _ref.value, rest = (0, _object_without_properties._)(_ref, [
         "focus",
         "type",
         "name",
@@ -69,6 +69,7 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         "style",
         "className",
         "plain",
+        "inputStyle",
         "onChange",
         "onFocus",
         "onBlur",
@@ -187,9 +188,9 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         name: name,
         className: "nut-input-native",
         ref: inputRef,
-        style: {
+        style: (0, _object_spread._)({}, {
             textAlign: getTextAlign()
-        },
+        }, inputStyle),
         type: inputType(type),
         password: type === 'password',
         maxlength: maxLength,

package/dist/cjs/packages/input/style/input.scss

@@ -31,7 +31,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: $color-title;
+  color: $input-color;
   font-size: $input-font-size;
   padding: 0;
   border: 0;

package/dist/cjs/packages/input/style/style.css

@@ -32,7 +32,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   padding: 0;
   border: 0;

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

@@ -32,7 +32,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   padding: 0;
   border: 0;

package/dist/cjs/packages/input/style-jmapp/input.scss

@@ -31,7 +31,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: $color-title;
+  color: $input-color;
   font-size: $input-font-size;
   padding: 0;
   border: 0;

package/dist/cjs/packages/input/style-jmapp/style.css

@@ -32,7 +32,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-color-title);
+  color: var(--nutui-input-color, var(--nutui-color-text));
   font-size: var(--nutui-input-font-size, var(--nutui-font-text));
   padding: 0;
   border: 0;

package/dist/cjs/packages/input/style-jrkf/input.scss

@@ -31,7 +31,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: $color-title;
+  color: $input-color;
   font-size: $input-font-size;
   padding: 0;
   border: 0;

package/dist/cjs/packages/input/style-jrkf/style.css

@@ -32,7 +32,7 @@
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-color-title);
+  color: var(--nutui-input-color, var(--nutui-color-text));
   font-size: var(--nutui-input-font-size, var(--nutui-font-text));
   padding: 0;
   border: 0;

package/dist/cjs/packages/radio/radio.js

@@ -79,21 +79,25 @@ var Radio = function Radio(props) {
     var renderIcon = function renderIcon() {
         var icon = props.icon, activeIcon = props.activeIcon;
         if (disabled && !checkedStatement) {
+            // @ts-ignore
             return /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckDisabled, {
-                className: (0, _classnames.default)(color())
+                className: (0, _classnames.default)(color()),
+                ariaHidden: true
             });
         }
         if (checkedStatement) {
             return /*#__PURE__*/ _react.default.isValidElement(activeIcon) ? /*#__PURE__*/ _react.default.cloneElement(activeIcon, (0, _object_spread_props._)((0, _object_spread._)({}, activeIcon.props), {
                 className: (0, _classnames.default)(activeIcon.props.className, color())
             })) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckChecked, {
-                className: (0, _classnames.default)(color())
+                className: (0, _classnames.default)(color()),
+                ariaHidden: true
             });
         }
         return /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
             className: (0, _classnames.default)(icon.props.className, color())
         })) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.CheckNormal, {
-            className: (0, _classnames.default)(color())
+            className: (0, _classnames.default)(color()),
+            ariaHidden: true
         });
     };
     var renderLabel = function renderLabel() {

package/dist/cjs/packages/radio/style/radio.scss

@@ -24,20 +24,25 @@
 
   &-icon {
     color: $color-text-disabled;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
+    border-radius: 50%;
   }
 
   &-icon {
     &-checked {
       color: $color-primary;
+      background-color: $white;
       box-shadow: 0px 2px 4px 0px #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        background-color: $white;
         box-shadow: none;
+        border-radius: 50%;
       }
     }