@nutui/nutui-react 2.3.10 → 2.3.11

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.10 Tue Feb 06 2024 16:12:46 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.11 Fri Feb 23 2024 19:38:03 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4448,19 +4448,6 @@ Check the top-level render call using <` + t2 + ">.");
     }
     return getAllScrollableParents(element.parentElement, scrollableParents);
   }
-  let passiveSupported = false;
-  if (canUseDom) {
-    try {
-      const opts = Object.defineProperty({}, "passive", {
-        get() {
-          passiveSupported = true;
-        }
-      });
-      window.addEventListener("test-passive-supported", null, opts);
-    } catch (e2) {
-      console.log(e2);
-    }
-  }
   let totalLockCount = 0;
   const BODY_LOCK_CLASS = "nut-overflow-hidden";
   function getScrollableElement(el) {
@@ -4509,7 +4496,7 @@ Check the top-level render call using <` + t2 + ">.");
       document.addEventListener(
         "touchmove",
         onTouchMove,
-        passiveSupported ? { passive: false } : false
+        false
       );
       if (!totalLockCount) {
         document.body.classList.add(BODY_LOCK_CLASS);
@@ -5218,7 +5205,7 @@ Check the top-level render call using <` + t2 + ">.");
       startTime = otime;
       duration > 0 ? scrollAnimation() : scroll();
     };
-    const styles = style ? {
+    const styles = Object.keys(style || {}).length !== 0 ? {
       zIndex,
       ...style
     } : {
@@ -14112,7 +14099,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }));
     React.useEffect(() => {
       var _a2, _b, _c;
-      const options22 = passiveSupported ? { passive: false } : false;
+      const options22 = false;
       (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", touchStart, options22);
       (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", touchMove, options22);
       (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", touchEnd, options22);
@@ -16415,7 +16402,10 @@ Please add \`${key}Action\` when creating your handler.`);
             name,
             className: "nut-input-native",
             ref: inputRef,
-            style: { textAlign: align },
+            style: {
+              textAlign: `${// eslint-disable-next-line no-nested-ternary
+              align === "right" ? "end" : align === "left" ? "start" : "center"}`
+            },
             type: inputType(type2),
             maxLength,
             placeholder: placeholder || locale.placeholder,
@@ -16466,11 +16456,10 @@ Please add \`${key}Action\` when creating your handler.`);
   const defaultProps$U = {
     ...ComponentDefaults,
     disabled: false,
-    min: 1,
-    max: 9999,
     readOnly: false,
     allowEmpty: false,
-    defaultValue: 0,
+    min: 1,
+    max: 9999,
     step: 1,
     digits: 0,
     async: false
@@ -16503,199 +16492,159 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps$U,
       ...props
     };
-    const inputRef = React.useRef("");
-    const [_checked, setChecked] = usePropsValue({
-      value,
-      defaultValue
+    const classes = classNames(classPrefix$g, {
+      [`${classPrefix$g}-disabled`]: disabled
     });
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
     React.useEffect(() => {
-      if (formatter) {
-        if (_checked || _checked === 0) {
-          inputRef.current = formatter(_checked);
-          setChecked(formatter(_checked));
-        }
-      }
-    }, []);
-    const classes = classNames(
-      {
-        [`${classPrefix$g}`]: true,
-        [`${classPrefix$g}-disabled`]: disabled
-      },
-      className
-    );
-    const styles = {
-      ...style
-    };
-    const addAllow = (value2 = _checked) => {
-      if (formatter) {
-        const numValue = String(value2).replace(/[^0-9|.]/gi, "");
-        return Number(numValue) < Number(max) && !disabled;
+      var _a2, _b;
+      if (focused) {
+        (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.select) == null ? void 0 : _b.call(_a2);
       }
-      return Number(value2) < Number(max) && !disabled;
-    };
-    const reduceAllow = (value2 = _checked) => {
-      if (formatter) {
-        const numValue = String(value2).replace(/[^0-9|.]/gi, "");
-        return Number(numValue) > Number(min) && !disabled;
+    }, [focused]);
+    const [shadowValue, setShadowValue] = usePropsValue({
+      value: typeof value === "string" ? parseFloat(value) : value,
+      defaultValue: typeof defaultValue === "string" ? parseFloat(defaultValue) : defaultValue,
+      onChange: (value2) => {
       }
-      return Number(value2) > Number(min) && !disabled;
-    };
-    const iconMinusClasses = classNames("nut-inputnumber-icon icon-minus", {
-      "nut-inputnumber-icon-disabled": !reduceAllow()
-    });
-    const iconAddClasses = classNames("nut-inputnumber-icon icon-plus", {
-      "nut-inputnumber-icon-disabled": !addAllow()
     });
-    const fixedDecimalPlaces = (v) => {
-      return Number(v).toFixed(Number(digits));
-    };
-    const emitChange = (value2, e2) => {
-      const outputValue = fixedDecimalPlaces(value2);
-      onChange && onChange(outputValue, e2);
-      if (!async) {
-        if (Number(outputValue) < Number(min)) {
-          formatter ? setChecked(formatter(Number(min))) : setChecked(Number(min));
-        } else if (Number(outputValue) > Number(max)) {
-          formatter ? setChecked(formatter(Number(max))) : setChecked(Number(max));
-        } else {
-          formatter ? setChecked(formatter(outputValue)) : setChecked(outputValue);
-        }
+    const bound2 = (value2, min2, max2) => {
+      let res = value2;
+      if (min2 !== void 0) {
+        res = Math.max(Number(min2), res);
       }
-    };
-    const reduceNumber = (e2) => {
-      onMinus && onMinus(e2);
-      if (reduceAllow()) {
-        if (formatter) {
-          const numValue = String(_checked).replace(/[^0-9|.]/gi, "");
-          const outputValue = Number(numValue) - Number(step);
-          inputRef.current = formatter(outputValue);
-          emitChange(outputValue, e2);
-        } else {
-          const outputValue = Number(_checked) - Number(step);
-          emitChange(outputValue, e2);
-        }
-      } else {
-        onOverlimit && onOverlimit(e2);
+      if (max2 !== void 0) {
+        res = Math.min(Number(max2), res);
       }
+      return res;
     };
-    const addNumber = (e2) => {
-      onPlus && onPlus(e2);
-      if (addAllow()) {
-        if (formatter) {
-          const numValue = String(_checked).replace(/[^0-9|.]/gi, "");
-          const outputValue = Number(numValue) + Number(step);
-          inputRef.current = formatter(outputValue);
-          emitChange(outputValue, e2);
-        } else {
-          const outputValue = Number(_checked) + Number(step);
-          emitChange(outputValue, e2);
-        }
-      } else {
-        onOverlimit && onOverlimit(e2);
+    const format2 = (value2) => {
+      if (value2 === null)
+        return "";
+      if (typeof value2 === "string")
+        value2 = parseFloat(value2);
+      const fixedValue = bound2(value2, Number(min), Number(max));
+      if (formatter) {
+        return formatter(fixedValue);
       }
-    };
-    const changeValue = (e2) => {
-      const input = e2.target;
-      onChange && onChange(input.valueAsNumber, e2);
-      if (!async) {
-        if (Number.isNaN(input.valueAsNumber)) {
-          setChecked("");
-        } else {
-          setChecked(input.valueAsNumber);
-        }
+      if (digits) {
+        return fixedValue.toFixed(digits).toString();
       }
+      return fixedValue.toString();
     };
-    const changeFormatValue = (e2) => {
-      const input = e2.target.value;
-      const numReg = /^[0-9]*$/;
-      const numValue = input.replace(/[^0-9|.]/gi, "");
-      if (formatter) {
-        if (!numReg.test(input[0]) && numValue) {
-          setChecked(formatter(numValue));
-        } else if (!numReg.test(input[0]) && !numValue) {
-          setChecked(input);
-        } else if (numReg.test(input[0])) {
-          if (formatter(numValue) === inputRef.current) {
-            setChecked(numValue);
-          } else {
-            setChecked(formatter(numValue));
-            inputRef.current = formatter(numValue);
-          }
-        }
+    const [inputValue, setInputValue] = React.useState(format2(shadowValue));
+    React.useEffect(() => {
+      if (!focused && !async) {
+        setShadowValue(bound2(Number(shadowValue), Number(min), Number(max)));
+        setInputValue(format2(shadowValue));
       }
-    };
-    const burFormatValue = (e2) => {
-      const input = e2.target.value;
-      const numReg = /^[0-9]*$/;
-      const numValue = input.replace(/[^0-9|.]/gi, "");
-      if (formatter) {
-        if (formatter(numValue) === input) {
-          emitChange(numValue, e2);
-          return;
-        }
-        if (!numReg.test(input) || !input) {
-          setChecked(formatter(""));
+    }, [focused, shadowValue]);
+    React.useEffect(() => {
+      if (async) {
+        setShadowValue(bound2(Number(value), Number(min), Number(max)));
+        setInputValue(format2(value));
+      }
+    }, [value]);
+    const calcNextValue = (current, step2, symbol) => {
+      const dig = digits + 1;
+      return (parseFloat(current || "0") * dig + parseFloat(step2) * dig * symbol) / dig;
+    };
+    const update2 = (negative, e2) => {
+      if (step !== void 0) {
+        const shouldOverBoundary = calcNextValue(
+          shadowValue,
+          step,
+          negative ? -1 : 1
+        );
+        const nextValue = bound2(shouldOverBoundary, Number(min), Number(max));
+        setShadowValue(nextValue);
+        if (negative ? shouldOverBoundary < min : shouldOverBoundary > max) {
+          onOverlimit == null ? void 0 : onOverlimit(e2);
+        } else {
+          onChange == null ? void 0 : onChange(nextValue, e2);
         }
       }
     };
-    const focusValue = (e2) => {
+    const handleReduce = (e2) => {
       if (disabled)
         return;
-      if (readOnly)
-        return;
-      onFocus && onFocus(e2);
+      onMinus == null ? void 0 : onMinus(e2);
+      update2(true, e2);
     };
-    const burValue = (e2) => {
+    const handlePlus = (e2) => {
       if (disabled)
         return;
-      if (readOnly)
-        return;
-      const input = e2.target;
-      let value2 = input.valueAsNumber;
-      if (Number.isNaN(value2) && !allowEmpty) {
-        value2 = Number(defaultValue);
+      onPlus == null ? void 0 : onPlus(e2);
+      update2(false, e2);
+    };
+    const parseValue = (text) => {
+      if (text === "")
+        return null;
+      if (text === "-")
+        return null;
+      return text;
+    };
+    const handleInputChange = (e2) => {
+      setInputValue(e2.target.value);
+      const valueStr = parseValue(e2.target.value);
+      if (valueStr === null) {
+        if (allowEmpty) {
+          setShadowValue(null);
+        } else {
+          setShadowValue(defaultValue);
+        }
+      } else {
+        setShadowValue(valueStr);
       }
-      if (value2 < Number(min)) {
-        value2 = Number(min);
-      } else if (value2 > Number(max)) {
-        value2 = Number(max);
+      if (!async) {
+        onChange == null ? void 0 : onChange(parseFloat(valueStr || "0").toFixed(digits), e2);
       }
-      emitChange(value2, e2);
+    };
+    const handleFocus = (e2) => {
+      setFocused(true);
+      setInputValue(
+        shadowValue !== void 0 && shadowValue !== null ? bound2(Number(shadowValue), Number(min), Number(max)).toString() : ""
+      );
+      onFocus && onFocus(e2);
+    };
+    const handleBlur = (e2) => {
+      setFocused(false);
       onBlur && onBlur(e2);
+      if (async) {
+        const valueStr = parseValue(e2.target.value);
+        onChange == null ? void 0 : onChange(parseFloat(valueStr || "0").toFixed(digits), e2);
+      }
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, style: styles, ...restProps }, /* @__PURE__ */ React.createElement("div", { className: "nut-input-minus" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, style, ...restProps }, /* @__PURE__ */ React.createElement("div", { className: "nut-input-minus" }, /* @__PURE__ */ React.createElement(
       o,
       {
-        className: iconMinusClasses,
-        onClick: (e2) => reduceNumber(e2)
+        className: classNames("nut-inputnumber-icon icon-minus", {
+          [`${classPrefix$g}-icon-disabled`]: shadowValue === min || disabled
+        }),
+        onClick: handleReduce
       }
-    )), /* @__PURE__ */ React.createElement(React.Fragment, null, formatter ? /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "input",
       {
-        type: "text",
-        min,
-        max,
+        ref: inputRef,
+        inputMode: "decimal",
         disabled,
         readOnly,
-        value: _checked,
-        onInput: changeFormatValue,
-        onBlur: burFormatValue,
-        onFocus: focusValue
+        value: inputValue,
+        onInput: handleInputChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus
       }
-    ) : /* @__PURE__ */ React.createElement(
-      "input",
+    )), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(
+      l$2,
       {
-        type: "number",
-        min,
-        max,
-        disabled,
-        readOnly,
-        value: _checked,
-        onInput: changeValue,
-        onBlur: burValue,
-        onFocus: focusValue
+        className: classNames("nut-inputnumber-icon icon-plus", {
+          [`${classPrefix$g}-icon-disabled`]: shadowValue === max || disabled
+        }),
+        onClick: handlePlus
       }
-    )), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(l$2, { className: iconAddClasses, onClick: (e2) => addNumber(e2) })));
+    )));
   };
   InputNumber.defaultProps = defaultProps$U;
   InputNumber.displayName = "NutInputNumber";
@@ -18247,7 +18196,7 @@ Please add \`${key}Action\` when creating your handler.`);
       },
       /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title` }, title || locale.shortpassword.title), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-description` }, description || locale.shortpassword.description), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input`, onClick: onFocus }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-site` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
         return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake-li`, key: index }, inputValue.length > index && /* @__PURE__ */ React.createElement(React.Fragment, null, plain ? inputValue[index] : /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake-li-icon` })));
-      }))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(s, { width: 11, height: 11, style: { marginRight: "3px" } }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
+      }))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(s, { width: 11, height: 11 }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
     );
   };
   const ShortPassword = React.forwardRef(InternalShortPassword);
@@ -19226,6 +19175,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       Popup,
       {
+        ...rest,
         round: true,
         visible,
         position: "bottom",
@@ -19236,7 +19186,7 @@ Please add \`${key}Action\` when creating your handler.`);
           onCancel && onCancel();
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: `${className}`, style, ...rest }, options2.length ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-list` }, options2.map((item, index) => {
+      /* @__PURE__ */ React.createElement("div", { className: `${className}`, style }, options2.length ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-list` }, options2.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -20969,7 +20919,7 @@ Please add \`${key}Action\` when creating your handler.`);
         axis: "y",
         target: elementRef,
         enabled: !props.disabled,
-        eventOptions: passiveSupported ? { passive: false } : false
+        eventOptions: false
       }
     );
     const renderIcons = (status2) => {
@@ -21186,7 +21136,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const classPrefix2 = "nut-skeleton";
     const classes = classNames(classPrefix2, className);
     const avatarClass = classNames({
-      avatar: true,
+      [`nut-avatar`]: true,
       [`avatar-${avatarShape}`]: avatarShape
     });
     const repeatLines = (num) => {
@@ -21204,7 +21154,7 @@ Please add \`${key}Action\` when creating your handler.`);
         height: "50px"
       };
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement("div", null, children) : /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, animated2 && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, animated2 && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React.createElement(
       Avatar,
       {
         className: avatarClass,

package/dist/packages/animate/animate.scss

@@ -304,30 +304,3 @@
     animation-iteration-count: infinite;
   }
 }
-
-[dir='rtl'] .nut-animate,
-.nut-rtl .nut-animate {
-  .nut-animate-twinkle {
-    &::after,
-    &::before {
-      border-radius: calc(60 / 2) * 1px;
-      right: auto;
-      left: 50%;
-      margin-right: 0;
-      margin-left: calc(-60 / 2) * 1px;
-    }
-  }
-
-  .nut-animate-flicker {
-    &::after {
-      left: auto;
-      right: 0;
-      background-image: linear-gradient(
-        -106deg,
-        rgba(232, 224, 255, 0) 24%,
-        #e8e0ff 91%
-      );
-      transform: skewX(20deg);
-    }
-  }
-}

package/dist/packages/audio/audio.scss

@@ -13,11 +13,6 @@
       background: $white;
       border-radius: 50%;
       box-shadow: 0 0 8px $color-text-disabled;
-
-      .nut-icon-am-rotate {
-        transform: rotate((360));
-        animation-timing-function: ease-in-out;
-      }
     }
 
     .nut-audio-icon-stop {

package/dist/packages/avatarcropper/avatarcropper.scss

@@ -119,7 +119,6 @@
     left: auto;
     right: 0;
   }
-
   &-popup {
     left: auto;
     right: 0;
@@ -138,7 +137,6 @@
     &-highlight {
       left: auto;
       right: 0;
-
       .highlight {
         left: auto;
         right: 50%;

package/dist/packages/badge/badge.scss

@@ -65,4 +65,11 @@
     right: auto;
     left: -15%;
   }
+
+  &-content {
+    transform: var(
+      --nutui-badge-content-transform,
+      translateY(-50%) translateX(-100%)
+    );
+  }
 }

package/dist/packages/barrage/barrage.scss

@@ -59,15 +59,34 @@
 .nut-rtl .nut-barrage {
   left: auto;
   right: 0;
-
   .barrage-item {
-    right: auto;
-    left: 0;
     transform: translateX(-100%);
     background: linear-gradient(
       to left,
       var(--nutui-black-3),
       var(--nutui-black-1)
     );
+
+    &.move {
+      animation-name: moving-rtl;
+    }
+  }
+  @keyframes moving-rtl {
+    from {
+      transform: translateX(var(--move-distance));
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @-webkit-keyframes moving-rtl {
+    from {
+      transform: translateX(var(--move-distance));
+    }
+
+    to {
+      transform: translateX(100%);
+    }
   }
 }

package/dist/packages/button/button.scss

@@ -338,7 +338,6 @@
       margin-left: $button-text-icon-margin;
     }
   }
-
   &::before {
     left: auto;
     right: 50%;

package/dist/packages/calendar/calendar.scss

@@ -223,6 +223,10 @@
   }
 }
 
+.nut-calendar-popup .nut-popup-title-right {
+  top: 7px !important;
+}
+
 [dir='rtl'] .nut-calendar,
 .nut-rtl .nut-calendar {
   &-day {
@@ -245,7 +249,3 @@
     }
   }
 }
-
-.nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
-}

package/dist/packages/calendarcard/calendarcard.scss

@@ -126,7 +126,6 @@
       }
     }
   }
-
   &-day {
     &.start {
       border-top-left-radius: 0;

package/dist/packages/cascader/cascader.scss

@@ -68,7 +68,6 @@
     visibility: hidden;
   }
 }
-
 [dir='rtl'] .nut-cascader,
 .nut-rtl .nut-cascader {
   .nut-icon-checklist {

package/dist/packages/checkbox/checkbox.scss

@@ -140,13 +140,11 @@
       left: 0;
       border-right: 10px solid transparent;
       border-left: 10px solid $color-primary;
-
       &-checked {
         left: auto;
         right: 50%;
         transform: translate(3px, -3px);
       }
-
       .nut-icon {
         &:before {
           margin-left: 0;

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -1,7 +1,5 @@
 .nut-checkboxgroup {
   .nut-checkbox {
-    margin-bottom: 5px;
-
     &-button {
       background-color: $color-background;
     }
@@ -9,6 +7,7 @@
 
   &-vertical {
     .nut-checkbox {
+      margin-bottom: 5px;
       &.nut-checkbox-reverse {
         width: 100%;
         justify-content: space-between;
@@ -33,7 +32,6 @@
     }
   }
 }
-
 [dir='rtl'] .nut-checkboxgroup,
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {

package/dist/packages/col/col.scss

@@ -4,7 +4,7 @@
   word-break: break-all;
   margin-bottom: $col-default-margin-bottom;
 
-  &-gutter {
+  &.nut-col-gutter {
     &:last-child {
       padding-right: 0 !important;
     }
@@ -19,7 +19,7 @@
 .nut-rtl .nut-col {
   float: right;
 
-  &-gutter {
+  &.nut-col-gutter {
     &:last-child {
       padding-right: 0 !important;
       padding-left: 0 !important;