@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/cjs/packages/badge/badge.d.ts

@@ -1,13 +1,3 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type BadgeFill = 'solid' | 'outline';
-export interface BadgeProps extends BasicComponent {
-    value: ReactNode;
-    dot: boolean;
-    max: number;
-    top: string | number;
-    right: string | number;
-    color: string;
-    fill: BadgeFill;
-}
+import { FunctionComponent } from 'react';
+import { BadgeProps } from './types';
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

package/dist/cjs/packages/badge/badge.js

@@ -9,23 +9,29 @@ Object.defineProperty(exports, "Badge", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _type_of = require("@swc/helpers/_/_type_of");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     value: '',
     dot: false,
     max: 99,
-    top: '4',
-    right: '8',
-    color: '',
-    fill: 'solid'
+    top: 0,
+    right: 0,
+    fill: 'solid',
+    size: 'large'
 });
 var Badge = function Badge(props) {
     var content = function content() {
@@ -46,37 +52,48 @@ var Badge = function Badge(props) {
     };
     var _this;
     var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
     var classPrefix = 'nut-badge';
-    var classes = (0, _classnames.default)(classPrefix, className, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
-    var contentClasses = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-dot"), dot), "".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)({}, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
-    var getStyle = function getStyle() {
-        var style = {};
-        style.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
-        var dir = rtl ? 'left' : 'right';
-        style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-        if (color) {
-            if (fill === 'outline') {
-                style.color = color;
-                style.background = '#fff';
-                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.border = "1px solid ".concat(color);
-                }
-            } else {
-                style.color = '#fff';
-                style.background = color;
-            }
+    var isHarmony = (0, _platformtaro.harmony)();
+    var classes = (0, _classnames.default)(classPrefix, className);
+    var badgeRef = (0, _react.useRef)(null);
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
+    var _obj;
+    var contentClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-number"), isNumber()), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), children), _obj));
+    (0, _react.useEffect)(function() {
+        if (badgeRef.current) {
+            getPositionStyle();
         }
-        return style;
-    };
+    }, []);
+    var getPositionStyle = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function() {
+            var style, dir;
+            return (0, _ts_generator._)(this, function(_state) {
+                style = {};
+                style.top = (0, _pxtransform.default)(Number(top) || 0);
+                dir = rtl ? 'left' : 'right';
+                style[dir] = isHarmony ? (0, _pxtransform.default)(Number(right)) : "".concat(Number(right) || 0, "px");
+                setContentStyle(style);
+                return [
+                    2
+                ];
+            });
+        });
+        return function getPositionStyle() {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var _obj1;
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
-        style: style
+        style: style,
+        ref: badgeRef
     }, isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-icon")
+        className: (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-icon"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-icon-rtl"), rtl), _obj1)),
+        style: contentStyle
     }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: contentClasses,
-        style: getStyle()
+        style: contentStyle
     }, content()));
 };
 Badge.displayName = 'NutBadge';

package/dist/cjs/packages/badge/index.d.ts

@@ -1,3 +1,3 @@
 import { Badge } from "./badge";
-export type { BadgeFill, BadgeProps } from "./badge";
+export type { BadgeFill, BadgeDotSize, BadgeProps } from './types';
 export default Badge;

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

@@ -1,19 +1,15 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 
   &-icon {
-    position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
-    top: -10%;
-    right: -15%;
     padding: $badge-icon-padding;
     text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
     z-index: $badge-z-index;
 
     .nut-icon {
@@ -23,63 +19,88 @@
     }
   }
 
+  &-sup,
+  &-icon {
+    border-radius: $badge-border-radius;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      bottom: -50%;
+      left: -50%;
+      right: -50%;
+      transform: scale(0.5);
+      border: $badge-border;
+      border-radius: $badge-border-radius;
+    }
+  }
+
   &-sup {
-    height: $badge-height;
-    position: absolute;
-    display: flex;
+    display: inline-flex;
     justify-content: center;
-    align-items: center;
-    background: $badge-background-color;
-    color: $badge-color;
+    height: $badge-height;
+    min-width: $badge-min-width;
     padding: $badge-padding;
+    box-sizing: border-box;
+    color: $badge-color;
     font-size: $badge-font-size;
-    font-weight: normal;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    min-width: $badge-min-width;
+    line-height: 12px;
     white-space: nowrap;
+    font-weight: normal;
+    vertical-align: middle;
+    background: $badge-background-color;
     z-index: 1;
   }
 
+  &-number {
+    font-family: 'JD';
+    /* #ifdef harmony */
+    line-height: 12px;
+    /* #endif */
+    /* #ifndef harmony */
+    line-height: 13px;
+    /* #endif */
+  }
+
   &-one {
     height: $badge-height;
     width: $badge-height;
-    padding: 0;
   }
 
   &-content {
+    position: absolute;
     transform: $badge-content-transform;
   }
 
   &-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-width;
-    border: $badge-dot-border;
-    border-radius: $badge-dot-width;
     padding: 0;
+    border-radius: 50%;
+    &::after {
+      border: $badge-dot-border;
+      border-radius: 50%;
+    }
+    &-normal {
+      min-width: $badge-dot-width;
+      width: $badge-dot-width;
+      height: $badge-dot-width;
+    }
+    &-small {
+      min-width: $badge-dot-small-width;
+      width: $badge-dot-small-width;
+      height: $badge-dot-small-width;
+    }
+    &-large {
+      min-width: $badge-dot-large-width;
+      width: $badge-dot-large-width;
+      height: $badge-dot-large-width;
+    }
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
+    background: $color-primary-text;
+    color: $badge-outline-color;
+    &::after {
+      border: $badge-outline-border;
     }
   }
 }
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
-  }
-}

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

@@ -1,71 +1,100 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
-  padding: var(--nutui-badge-icon-padding, 3px);
+  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 12px);
-  height: var(--nutui-badge-icon-size, 12px);
-  font-size: var(--nutui-badge-icon-size, 12px);
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-sup {
-  height: var(--nutui-badge-height, 14px);
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
   position: absolute;
-  display: flex;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid #ffffff);
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  color: var(--nutui-badge-color, #fff);
-  padding: var(--nutui-badge-padding, 0 4px);
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, #ffffff);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
-  font-weight: normal;
-  text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
-  min-width: var(--nutui-badge-min-width, 5px);
+  line-height: 12px;
   white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
   z-index: 1;
 }
+.nut-badge-number {
+  font-family: "JD";
+  /* #ifdef harmony */
+  line-height: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  line-height: 13px;
+  /* #endif */
+}
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
   width: var(--nutui-badge-height, 14px);
-  padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
-  width: var(--nutui-badge-dot-width, 7px);
-  height: var(--nutui-badge-dot-width, 7px);
-  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-width, 4px);
+  width: var(--nutui-badge-dot-width, 4px);
+  height: var(--nutui-badge-dot-width, 4px);
 }
-.nut-badge-outline .nut-badge-content {
-  background: var(--nutui-color-primary-text, #ffffff);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-primary, #ff0f23);
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-width, 8px);
+  width: var(--nutui-badge-dot-width, 8px);
+  height: var(--nutui-badge-dot-width, 8px);
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
+.nut-badge-outline {
+  background: #ffffff;
+  color: var(--nutui-badge-outline-color, var(--nutui-brand-6));
 }
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
+.nut-badge-outline::after {
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-brand-6));
 }

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

@@ -1,68 +1,114 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
-  top: -10%;
-  right: -15%;
-  padding: 3px;
+  background: #ff0f23;
+  padding: 2px;
   text-align: center;
-  border: 0px solid #ffffff;
-  border-radius: 14px;
   z-index: 1;
 }
 .nut-badge-icon .nut-icon {
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
+  width: 10px;
+  height: 10px;
+  font-size: 10px;
 }
 .nut-badge-sup {
-  height: 14px;
+  border-radius: 14px;
+}
+.nut-badge-icon {
+  border-radius: 14px;
+}
+.nut-badge-sup::after {
+  content: "";
   position: absolute;
-  display: flex;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: 1px solid #ffffff;
+  border-radius: 14px;
+}
+.nut-badge-icon::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: 1px solid #ffffff;
+  border-radius: 14px;
+}
+.nut-badge-sup {
+  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
-  color: #fff;
-  padding: 0 4px;
+  height: 14px;
+  min-width: 6px;
+  padding: 1px 4px;
+  box-sizing: border-box;
+  color: #ffffff;
   font-size: 10px;
-  font-weight: normal;
-  text-align: center;
-  border: 0px solid #ffffff;
-  border-radius: 14px;
-  min-width: 5px;
+  line-height: 12px;
   white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: #ff0f23;
   z-index: 1;
 }
+.nut-badge-number {
+  font-family: "JD";
+  /* #ifdef harmony */
+  line-height: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  line-height: 13px;
+  /* #endif */
+}
 .nut-badge-one {
   height: 14px;
   width: 14px;
-  padding: 0;
 }
 .nut-badge-content {
-  transform: translateY(-50%) translateX(100%);
+  position: absolute;
+  transform: translate(50%, -50%);
 }
 .nut-badge-dot {
-  width: 7px;
-  height: 7px;
-  border: 0px solid #ffffff;
-  border-radius: 7px;
   padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: 1px solid #ffffff;
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: 6px;
+  width: 6px;
+  height: 6px;
+}
+.nut-badge-dot-small {
+  min-width: 4px;
+  width: 4px;
+  height: 4px;
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
+.nut-badge-dot-large {
+  min-width: 8px;
+  width: 8px;
+  height: 8px;
 }
-[dir=rtl] .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
+.nut-badge-outline {
+  background: #ffffff;
+  color: #ff0f23;
 }
-.nut-rtl .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
+.nut-badge-outline::after {
+  border: 1px solid #ff0f23;
 }

package/dist/cjs/packages/badge/types.d.ts

@@ -0,0 +1,12 @@
+import { BasicComponent } from "../../utils/typings";
+export type BadgeFill = 'solid' | 'outline';
+export type BadgeDotSize = 'small' | 'normal' | 'large';
+export interface BadgeProps extends BasicComponent {
+    value: React.ReactNode;
+    dot: boolean;
+    max: number;
+    top: string | number;
+    right: string | number;
+    fill: BadgeFill;
+    size: BadgeDotSize;
+}

package/dist/cjs/packages/badge/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-barrage {
   position: absolute;
   left: 0;
@@ -6,8 +10,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: var(--nutui-color-background, #f5f6fa);
-  color: var(--nutui-color-title, #1a1a1a);
+  background-color: var(--nutui-gray-3);
+  color: var(--nutui-gray-7);
 }
 .nut-barrage .barrage-item {
   display: block;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-barrage {
   position: absolute;
   left: 0;
@@ -6,8 +10,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: #F7F8FC;
-  color: #1A1A1A;
+  background-color: #f2f3f5;
+  color: #1a1a1a;
 }
 .nut-barrage .barrage-item {
   display: block;
@@ -19,7 +23,7 @@
   text-align: center;
   white-space: pre;
   transform: translateX(100%);
-  background: undefined;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
   box-sizing: border-box;
 }
 .nut-barrage .barrage-item.move {
@@ -52,11 +56,11 @@
 }
 [dir=rtl] .nut-barrage .barrage-item {
   transform: translateX(-100%);
-  background: undefined;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
 }
 .nut-rtl .nut-barrage .barrage-item {
   transform: translateX(-100%);
-  background: undefined;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
 }
 [dir=rtl] .nut-barrage .barrage-item.move,
 .nut-rtl .nut-barrage .barrage-item.move {

package/dist/cjs/packages/button/button.js

@@ -113,7 +113,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
     }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-button-wrap"
-    }, loading && !(0, _platformtaro.harmonyAndRn)() && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
+    }, loading && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
         className: "nut-icon-loading"
     }), !loading && icon ? icon : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '')).concat(icon || loading ? " nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),