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

package/dist/es/packages/searchbar/searchbar.d.ts

@@ -3,100 +3,24 @@ import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
 import { ITouchEvent } from '@tarojs/components';
 import { BasicComponent } from "../../utils/typings";
 export interface SearchBarProps extends BasicComponent {
-    /**
-    * 当前输入的值
-    * @default -
-    */
-    value?: number | string
-    /**
-    * 输入框默认暗纹
-    * @default 请输入
-    */
-    placeholder?: string
-    /**
-    * 搜索框形状，可选值为 round
-    * @default square
-    */
-    shape?: 'square' | 'round'
-    /**
-    * 是否禁用输入框
-    * @default false
-    */
-    disabled?: boolean
-    /**
-    * 最大输入长度
-    * @default 9999
-    */
-    maxLength?: number
-    /**
-    * 是否展示清除按钮
-    * @default true
-    */
-    clearable?: boolean
-    /**
-    * 输入框只读
-    * @default false
-    */
-    readOnly?: boolean
-    /**
-    * 是否自动聚焦
-    * @default false
-    */
-    autoFocus?: boolean
-    /**
-    * 是否展示返回按钮
-    * @default false
-    */
-    backable: boolean
-    /**
-    * 搜索框左侧区域
-    * @default -
-    */
-    left: React.ReactNode
-    /**
-    * 搜搜框右侧区域
-    * @default -
-    */
-    right: React.ReactNode
-    /**
-    * 输入框内左侧区域
-    * @default <Search size="12" />
-    */
-    leftIn: React.ReactNode
-    /**
-    * 输入框内右侧区域
-    * @default -
-    */
-    rightIn: React.ReactNode
-    /**
-    * 确定搜索时触发
-    * @default -
-    */
-    onSearch?: (val: string) => void
-    /**
-    * 输入内容时触发
-    * @default -
-    */
-    onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void
-    /**
-    * 聚焦时触发
-    * @default -
-    */
-    onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void
-    /**
-    * 失焦时触发
-    * @default -
-    */
-    onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void
-    /**
-    * 点击清空时触发
-    * @default -
-    */
-    onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
-    /**
-    * 点击输入区域时触发
-    * @default -
-    */
-    onInputClick?: (event: MouseEvent<HTMLInputElement>) => void
+    value?: string;
+    placeholder?: string;
+    shape?: 'square' | 'round';
+    disabled?: boolean;
+    maxLength?: number;
+    clearable?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    backable: boolean;
+    left: React.ReactNode;
+    right: React.ReactNode;
+    leftIn: React.ReactNode;
+    rightIn: React.ReactNode;
+    onSearch?: (val: string) => void;
+    onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
+    onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
+    onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
 }
 export declare const SearchBar: FunctionComponent<Partial<SearchBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'>>;

package/dist/es/packages/searchbar/searchbar.js

@@ -2,9 +2,9 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useEffect, useRef, useState } from "react";
-import { View } from "@tarojs/components";
+import { View, Input as TaroInput } from "@tarojs/components";
 import { MaskClose, Search, ArrowLeft } from "@nutui/icons-react-taro";
-import { useConfig } from "../configprovider/configprovider";
+import { useConfig } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     placeholder: '',
@@ -34,21 +34,23 @@ export var SearchBar = function(props) {
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.focus();
     };
-    var change = function(event) {
-        if (value === event.target.value) return;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value, event));
-        setValue(event.target.value);
-        event.target.value === '' && forceFocus();
+    var onInput = function(event) {
+        var _event_detail;
+        var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+        if (value === eventValue) return;
+        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+        setValue(eventValue);
+        eventValue === '' && forceFocus();
     };
     var focus = function(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
+        var _event_detail;
+        onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     var blur = function(event) {
+        var _event_detail;
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.blur();
-        var value = event.target.value;
-        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
+        onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     useEffect(function() {
         setValue(outerValue || '');
@@ -61,28 +63,21 @@ export var SearchBar = function(props) {
         autoFocus
     ]);
     var renderField = function() {
-        return /*#__PURE__*/ React.createElement("input", {
+        return /*#__PURE__*/ React.createElement(TaroInput, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
             style: style,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
-            disabled: disabled,
-            readOnly: readOnly,
-            maxLength: maxLength,
-            onKeyPress: onKeypress,
-            onChange: function(e) {
-                return change(e);
-            },
-            onFocus: function(e) {
-                return focus(e);
-            },
-            onBlur: function(e) {
-                return blur(e);
-            },
-            onClick: function(e) {
-                return clickInput(e);
-            }
+            disabled: disabled || readOnly,
+            maxlength: maxLength,
+            // @ts-ignore
+            // onKeyDown={onKeypress}
+            onInput: onInput,
+            onFocus: focus,
+            onBlur: blur,
+            onClick: clickInput,
+            onConfirm: onConfirm
         });
     };
     var clickInput = function(e) {
@@ -133,13 +128,16 @@ export var SearchBar = function(props) {
         onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
         onClear && onClear(event);
     };
-    var onKeypress = function(e) {
-        if (e.key === 'Enter' || e.keyCode === 13) {
-            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-                e.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
+    //   const onKeypress = (event: any) => {
+    //     if (event?.detail?.keyCode === 13) {
+    //       if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    //         event.preventDefault()
+    //       }
+    //       onSearch && onSearch(value as string)
+    //     }
+    //   }
+    var onConfirm = function() {
+        onSearch && onSearch(value);
     };
     return /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),

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

@@ -35,7 +35,8 @@
 
   &-left,
   &-right {
-    display: flex;
+    display: inline-flex;
+    align-items: center;
 
     &.nut-icon {
       width: 20px;
@@ -48,7 +49,9 @@
 
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -59,10 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {
@@ -89,7 +93,8 @@
     }
   }
 
-  &-input-box {
+  &-input-box,
+  &-input {
     display: flex;
     align-items: center;
     flex: 1;
@@ -100,8 +105,6 @@
     outline: 0;
     box-sizing: border-box;
     width: 100%;
-    height: $searchbar-input-height;
-    line-height: $searchbar-input-height;
     padding: $searchbar-input-padding;
     font-size: $searchbar-font-size;
     color: $searchbar-input-text-color;

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

@@ -1,10 +1,14 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f5f6fa));
-  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
+  background: var(--nutui-searchbar-background, var(--nutui-gray-3));
+  color: var(--nutui-searchbar-color, var(--nutui-gray-7));
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
@@ -16,7 +20,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -30,7 +34,8 @@
   color: var(--nutui-black-5);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -39,19 +44,23 @@
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > svg {
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
+.nut-searchbar-left .nut-icon {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > svg {
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
+.nut-searchbar-right .nut-icon {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
@@ -66,7 +75,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -76,12 +85,10 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: var(--nutui-searchbar-input-height, 32px);
-  line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

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

@@ -1,10 +1,14 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 6px 16px;
-  background: #F7F8FC;
-  color: #1A1A1A;
+  background: #f2f3f5;
+  color: #1a1a1a;
   font-size: 14px;
   box-sizing: border-box;
   justify-content: center;
@@ -27,15 +31,16 @@
 .nut-searchbar-clear {
   width: 16px;
   height: 16px;
-  color: undefined;
+  color: rgba(0, 0, 0, 0.2);
 }
 .nut-searchbar-rightin {
   width: 16px;
   height: 16px;
-  color: undefined;
+  color: rgba(0, 0, 0, 0.2);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -50,10 +55,17 @@
 .nut-searchbar-left > span {
   margin-right: 16px;
 }
+.nut-searchbar-left > i {
+  margin-right: 16px;
+}
 .nut-searchbar-left > svg {
   margin-right: 16px;
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left .nut-icon {
+  margin-right: 16px;
+}
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
@@ -65,10 +77,17 @@
 .nut-searchbar-right > span {
   margin-left: 16px;
 }
+.nut-searchbar-right > i {
+  margin-left: 16px;
+}
 .nut-searchbar-right > svg {
   margin-left: 16px;
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right .nut-icon {
+  margin-left: 16px;
+}
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text {
@@ -89,7 +108,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -99,12 +118,10 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: 32px;
-  line-height: 32px;
   padding: 0 4px;
   font-size: 14px;
-  color: #1A1A1A;
-  caret-color: #1A1A1A;
+  color: #1a1a1a;
+  caret-color: #1a1a1a;
   background: transparent;
   text-align: left;
 }

package/dist/es/packages/segmented/index.d.ts

@@ -0,0 +1,3 @@
+import { Segmented } from "./segmented";
+export type { SegmentedProps, SegmentedItem } from './types';
+export default Segmented;

package/dist/es/packages/segmented/index.js

@@ -0,0 +1,2 @@
+import { Segmented } from "./segmented";
+export default Segmented;

package/dist/es/packages/segmented/segmented.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SegmentedProps } from './types';
+export declare const Segmented: (props: Partial<SegmentedProps>) => React.JSX.Element;

package/dist/es/packages/segmented/segmented.js

@@ -0,0 +1,64 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { usePropsValue } from "../../utils/use-props-value";
+import { mergeProps } from "../../utils/merge-props";
+var defaultProps = {
+    options: [],
+    onChange: function(value) {}
+};
+export var Segmented = function(props) {
+    var classPrefix = 'nut-segmented';
+    var itemClassPrefix = 'nut-segmented-item';
+    var mergedProps = mergeProps(defaultProps, props);
+    var options = mergedProps.options, onChange = mergedProps.onChange;
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: mergedProps.value,
+        defaultValue: mergedProps.defaultValue,
+        finalValue: 0,
+        onChange: mergedProps.onChange
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var renderItems = useCallback(function(options, value) {
+        return options.map(function(option, index) {
+            var optionType = typeof option === "undefined" ? "undefined" : _type_of(option);
+            switch(optionType){
+                case 'object':
+                    // eslint-disable-next-line no-case-declarations
+                    var opt = option;
+                    var _obj;
+                    return /*#__PURE__*/ React.createElement(View, {
+                        className: classNames(itemClassPrefix, (_obj = {}, _define_property(_obj, "".concat(itemClassPrefix, "-active"), opt.value === value), _define_property(_obj, "".concat(opt.className), !!opt.className), _obj)),
+                        key: opt.value,
+                        onClick: function() {
+                            if (opt.disabled) return;
+                            setValue(option.value);
+                        }
+                    }, opt.icon ? /*#__PURE__*/ React.createElement(View, {
+                        className: "nut-segmented-icon"
+                    }, opt.icon) : null, opt.label);
+                default:
+                    {
+                        if (typeof option !== 'string' && typeof option !== 'number') {
+                            console.warn('Unsupported option type:', optionType);
+                        }
+                        return /*#__PURE__*/ React.createElement(View, {
+                            className: classNames(itemClassPrefix, _define_property({}, "".concat(itemClassPrefix, "-active"), index === value)),
+                            key: option.toString(),
+                            onClick: function() {
+                                setValue(index);
+                            }
+                        }, option);
+                    }
+            }
+        });
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ React.createElement(View, {
+        className: classNames(classPrefix),
+        style: mergedProps.style
+    }, renderItems(options, value));
+};

package/dist/es/packages/segmented/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/segmented/style/index.js

@@ -0,0 +1 @@
+import './segmented.scss';

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

@@ -0,0 +1,38 @@
+.nut-segmented {
+  display: inline-flex;
+  height: $segmented-height;
+  min-width: 24px;
+  padding: $segmented-padding;
+  align-items: center;
+  border-radius: $segmented-border-radius;
+  background: $color-mask-part;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: $segmented-item-height;
+  align-items: center;
+  justify-content: center;
+  padding: $segmented-item-padding;
+  border-radius: $segmented-item-radius;
+  color: $segmented-item-color;
+  font-size: $segmented-item-fontsize;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: $segmented-active-background;
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: $segmented-icon-margin-right;
+  .nut-icon {
+    height: 10px;
+    width: 10px;
+    font-size: 10px;
+  }
+}

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

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: var(--nutui-segmented-height, 24px);
+  min-width: 24px;
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
+  align-items: center;
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  background: var(--nutui-black-7);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: var(--nutui-segmented-height, 20px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  color: var(--nutui-segmented-item-color, #ffffff);
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: var(--nutui-segmented-active-background, var(--nutui-black-7));
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}

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

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: 24px;
+  min-width: 24px;
+  padding: 2px;
+  align-items: center;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: 2px;
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}