@megafon/ui-core 2.0.0 → 2.1.3

package/dist/es/components/Button/Button.css

@@ -231,9 +231,9 @@ h5 {
   fill: #FFFFFF;
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: #A500BF;
-  -webkit-box-shadow: inset 0 0 0 1px #A500BF;
-          box-shadow: inset 0 0 0 1px #A500BF;
+  background-color: #534455;
+  -webkit-box-shadow: inset 0 0 0 1px #534455;
+          box-shadow: inset 0 0 0 1px #534455;
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active {
   background-color: #404D46;
@@ -332,7 +332,7 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active {
-  color: rgba(51, 51, 51, 0.5);
+  color: #33333380;
   background-color: #EDEDED;
   -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
           box-shadow: inset 0 0 0 1px #D8D8D8;
@@ -341,28 +341,28 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active svg {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active {
-  color: rgba(255, 255, 255, 0.5);
+  color: #FFFFFF80;
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  -webkit-box-shadow: inset 0 0 0 1px #FFFFFF80;
+          box-shadow: inset 0 0 0 1px #FFFFFF80;
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active svg {
-  fill: rgba(255, 255, 255, 0.5);
+  fill: #FFFFFF80;
 }
 .mfui-button.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active {
-  color: rgba(51, 51, 51, 0.5);
+  color: #33333380;
   background-color: transparent;
   -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
           box-shadow: inset 0 0 0 1px #D8D8D8;
@@ -371,5 +371,5 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }

package/dist/es/components/Button/Button.js

@@ -2,6 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.object.values";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
@@ -82,9 +83,12 @@ var Button = function Button(_ref) {
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
-  var isTouch = React.useMemo(function () {
-    return detectTouch();
-  }, []);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
+
   var ElementType = href ? 'a' : 'button';
   var handleClick = React.useCallback(function (e) {
     if (disabled) {
@@ -167,6 +171,9 @@ var Button = function Button(_ref) {
   };
 
   var classNameValue = Array.isArray(className) ? [].concat(_toConsumableArray(className), [rootClassName]) : [className, rootClassName];
+  React.useEffect(function () {
+    setTouch(detectTouch());
+  }, []);
   return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
     className: cn({
       type: type,
@@ -183,7 +190,7 @@ var Button = function Button(_ref) {
       'content-type': contentType
     }, classNameValue),
     href: href,
-    download: href && download,
+    download: !!href && download,
     target: href ? target : undefined,
     rel: setRelAttribute(),
     type: href ? undefined : actionType,

package/dist/es/components/Carousel/Carousel.css

@@ -158,7 +158,7 @@ h5 {
   margin-right: 8px;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: #FFFFFF80;
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
   background-color: rgba(51, 51, 51, 0.25);

package/dist/es/components/Carousel/Carousel.js

@@ -211,6 +211,10 @@ var Carousel = function Carousel(_ref) {
     };
   };
 
+  var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
+    e.nativeEvent.preventDefault();
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
     ref: rootRef,
     className: cn({
@@ -252,7 +256,8 @@ var Carousel = function Carousel(_ref) {
     return /*#__PURE__*/React.createElement(SwiperSlide, {
       key: i,
       className: cn('slide', slideClass),
-      onFocus: handleSlideFocus(i)
+      onFocus: handleSlideFocus(i),
+      onMouseDown: disableFocusOnSlideClick
     }, child);
   })), /*#__PURE__*/React.createElement(NavArrow, {
     className: cn('arrow', {

package/dist/es/components/ContentArea/ContentArea.css

@@ -5,6 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-content-area_color_base,
 .mfui-content-area_color_white {
   background-color: #FFFFFF;
 }
@@ -26,6 +27,7 @@ h5 {
 .mfui-content-area_color_spbSky2 {
   background-color: #D8D8D8;
 }
+.mfui-content-area_color_content,
 .mfui-content-area_color_freshAsphalt {
   background-color: #333333;
 }
@@ -80,6 +82,7 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
+.mfui-content-area__inner_color_base,
 .mfui-content-area__inner_color_white {
   background-color: #FFFFFF;
 }
@@ -101,6 +104,7 @@ h5 {
 .mfui-content-area__inner_color_spbSky2 {
   background-color: #D8D8D8;
 }
+.mfui-content-area__inner_color_content,
 .mfui-content-area__inner_color_freshAsphalt {
   background-color: #333333;
 }

package/dist/es/components/ContentArea/ContentArea.d.ts

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    WHITE: string;
-    TRANSPARENT: string;
-    GREEN: string;
-    PURPLE: string;
-    SPB_SKY_0: string;
-    SPB_SKY_1: string;
-    SPB_SKY_2: string;
-    FRESH_ASPHALT: string;
-    FULL_BLACK: string;
+    readonly BASE: "base";
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+    readonly CONTENT: "content";
+    readonly FULL_BLACK: "fullBlack";
+    /** @deprecated */
+    readonly WHITE: "white";
+    /** @deprecated */
+    readonly FRESH_ASPHALT: "freshAsphalt";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {

package/dist/es/components/ContentArea/ContentArea.js

@@ -1,18 +1,27 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.array.includes";
 import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.includes";
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
-  WHITE: 'white',
+  BASE: 'base',
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
   SPB_SKY_0: 'spbSky0',
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
-  FRESH_ASPHALT: 'freshAsphalt',
-  FULL_BLACK: 'fullBlack'
+  CONTENT: 'content',
+  FULL_BLACK: 'fullBlack',
+
+  /** @deprecated */
+  WHITE: 'white',
+
+  /** @deprecated */
+  FRESH_ASPHALT: 'freshAsphalt'
 };
 var DisableIndents = {
   MOBILE: 'mobile',
@@ -41,15 +50,39 @@ var ContentArea = function ContentArea(_ref) {
   }, children));
 };
 
+var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
+  var deprecatedBlackValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedWhiteValue = BACKGROUND_COLORS.WHITE;
+  var propValue = props[propName];
+
+  if (propValue && !Object.values(BACKGROUND_COLORS).includes(propValue)) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        expected one of [").concat(Object.values(BACKGROUND_COLORS), "]"));
+  }
+
+  if (propValue && propValue === deprecatedBlackValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
+  }
+
+  if (propValue && propValue === deprecatedWhiteValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.BASE, "'"));
+  }
+
+  return null;
+};
+
 ContentArea.propTypes = {
-  outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
-  innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   disableIndents: PropTypes.oneOf(Object.values(DisableIndents)),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
     inner: PropTypes.string
-  })
+  }),
+  outerBackgroundColor: function outerBackgroundColor(props, propName, componentName) {
+    return colorsCustomPropTypes(props, propName, componentName);
+  },
+  innerBackgroundColor: function innerBackgroundColor(props, propName, componentName) {
+    return colorsCustomPropTypes(props, propName, componentName);
+  }
 };
 ContentArea.defaultProps = {
   outerBackgroundColor: 'transparent',

package/dist/es/components/Counter/Counter.css

@@ -59,7 +59,7 @@ h5 {
   cursor: default;
 }
 .mfui-counter__btn:disabled .mfui-counter__icon {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }
 .mfui-counter__btn_left {
   border-top-left-radius: 50px;
@@ -113,8 +113,8 @@ h5 {
 .mfui-counter_disabled .mfui-counter__input {
   background-color: #EDEDED;
   cursor: default;
-  color: rgba(51, 51, 51, 0.5);
+  color: #33333380;
 }
 .mfui-counter_disabled .mfui-counter__icon {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }

package/dist/es/components/NavArrow/NavArrow.css

@@ -35,7 +35,7 @@ h5 {
   background-color: #731982;
 }
 .mfui-nav-arrow_theme_purple:hover:not(:disabled) {
-  background-color: #A500BF;
+  background-color: #534455;
 }
 .mfui-nav-arrow_theme_dark {
   background-color: rgba(0, 0, 0, 0.25);

package/dist/es/components/Notification/Notification.css

@@ -149,28 +149,28 @@ h5 {
   }
 }
 .mfui-notification_type_error .mfui-notification__icon-container {
-  background-color: rgba(235, 90, 64, 0.2);
+  background-color: #FFC4C9;
 }
 .mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #EB5A40;
+  fill: #F62434;
 }
 .mfui-notification_type_success .mfui-notification__icon-container {
-  background-color: rgba(0, 185, 86, 0.2);
+  background-color: #DDFFEC;
 }
 .mfui-notification_type_success .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: #00B956;
 }
 .mfui-notification_type_warning .mfui-notification__icon-container {
-  background-color: rgba(255, 167, 23, 0.2);
+  background-color: #FFEDD1;
 }
 .mfui-notification_type_warning .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: #FFA717;
 }
 .mfui-notification_type_info .mfui-notification__icon-container {
-  background-color: rgba(91, 217, 229, 0.2);
+  background-color: #E1FAFF;
 }
 .mfui-notification_type_info .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
@@ -180,10 +180,10 @@ h5 {
   background-color: #FFFFFF;
 }
 .mfui-notification_colored .mfui-notification__close:hover {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 .mfui-notification_colored.mfui-notification_type_error {
-  background-color: #F1515D;
+  background-color: #F8505D;
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,
@@ -194,27 +194,18 @@ h5 {
   fill: #FFFFFF;
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: #FFFFFF33;
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: #FFFFFF;
 }
 .mfui-notification_colored.mfui-notification_type_success {
-  background-color: rgba(0, 185, 86, 0.1);
-}
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container svg {
-  fill: #00B956;
+  background-color: #DDFFEC;
 }
 .mfui-notification_colored.mfui-notification_type_warning {
   background-color: #FFEDD1;
 }
-.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__icon-container svg {
-  fill: #FFA717;
-}
 .mfui-notification_colored.mfui-notification_type_info {
-  background-color: #DEF7FA;
-}
-.mfui-notification_colored.mfui-notification_type_info .mfui-notification__icon-container svg {
-  fill: #5BD9E5;
+  background-color: #E1FAFF;
 }

package/dist/es/components/Paragraph/Paragraph.css

@@ -36,6 +36,7 @@ h5 {
 .mfui-paragraph_color_purple {
   color: #731982;
 }
+.mfui-paragraph_color_base,
 .mfui-paragraph_color_clearWhite {
   color: #FFFFFF;
 }
@@ -48,6 +49,7 @@ h5 {
 .mfui-paragraph_color_spbSky2 {
   color: #D8D8D8;
 }
+.mfui-paragraph_color_content,
 .mfui-paragraph_color_freshAsphalt {
   color: #333333;
 }

package/dist/es/components/Paragraph/Paragraph.d.ts

@@ -1,5 +1,21 @@
 import * as React from 'react';
 import './Paragraph.less';
+declare const COLORS: {
+    GREEN: string;
+    PURPLE: string;
+    BASE: string;
+    SPB_SKY_0: string;
+    SPB_SKY_1: string;
+    SPB_SKY_2: string;
+    CONTENT: string;
+    FULL_BLACK: string;
+    INHERIT: string;
+    /** @deprecated */
+    CLEAR_WHITE: string;
+    /** @deprecated */
+    FRESH_ASPHALT: string;
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
     /** Выравнивание по горизонтали */
     align?: 'left' | 'center' | 'right';
@@ -8,7 +24,7 @@ export interface IParagraphProps {
     /** Вертикальный отступ (включен по умолчанию) */
     hasMargin?: boolean;
     /** Цвет текста */
-    color?: 'green' | 'purple' | 'clearWhite' | 'spbSky0' | 'spbSky1' | 'spbSky2' | 'freshAsphalt' | 'fullBlack' | 'inherit';
+    color?: ColorType;
     /** Дополнительный класс корневого элемента */
     className?: string;
 }

package/dist/es/components/Paragraph/Paragraph.js

@@ -1,7 +1,28 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.array.includes";
+import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.includes";
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Paragraph.css";
+var COLORS = {
+  GREEN: 'green',
+  PURPLE: 'purple',
+  BASE: 'base',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2',
+  CONTENT: 'content',
+  FULL_BLACK: 'fullBlack',
+  INHERIT: 'inherit',
+
+  /** @deprecated */
+  CLEAR_WHITE: 'clearWhite',
+
+  /** @deprecated */
+  FRESH_ASPHALT: 'freshAsphalt'
+};
 var cn = cnCreate('mfui-paragraph');
 
 var Paragraph = function Paragraph(_ref) {
@@ -28,6 +49,24 @@ Paragraph.propTypes = {
   align: PropTypes.oneOf(['left', 'center', 'right']),
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
-  color: PropTypes.oneOf(['green', 'purple', 'clearWhite', 'spbSky0', 'spbSky1', 'spbSky2', 'freshAsphalt', 'fullBlack', 'inherit'])
+  color: function color(props, propName, componentName) {
+    var deprecatedBlackValue = COLORS.FRESH_ASPHALT;
+    var deprecatedWhiteValue = COLORS.CLEAR_WHITE;
+    var propValue = props[propName];
+
+    if (propValue && !Object.values(COLORS).includes(propValue)) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n            expected one of [").concat(Object.values(COLORS), "]"));
+    }
+
+    if (propValue && props[propName] === deprecatedBlackValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
+    }
+
+    if (propValue && props[propName] === deprecatedWhiteValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(COLORS.BASE, "'"));
+    }
+
+    return null;
+  }
 };
 export default Paragraph;

package/dist/es/components/Tabs/Tab.d.ts

@@ -7,6 +7,8 @@ export interface ITabProps extends IFilterDataAttrs {
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */
     renderTabWrapper?: (tab: React.ReactNode) => React.ReactNode;
 }

package/dist/es/components/Tabs/Tabs.css

@@ -254,8 +254,8 @@ h5 {
   border-color: rgba(237, 237, 237, 0.5);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
-  color: rgba(255, 255, 255, 0.5);
-  fill: rgba(255, 255, 255, 0.5);
+  color: #FFFFFF80;
+  fill: #FFFFFF80;
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
   color: #FFFFFF;

package/dist/es/components/Tabs/Tabs.d.ts

@@ -39,6 +39,8 @@ export interface ITabsProps {
     currentIndex?: number;
     /** Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи) */
     defaultIndex?: number;
+    /** Рендер содержимого только для текущего таба */
+    renderOnlyCurrentPanel?: boolean;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/es/components/Tabs/Tabs.js

@@ -64,6 +64,8 @@ var Tabs = function Tabs(_ref) {
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
+      _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+      renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
       onTabClick = _ref.onTabClick;
   var tabsRef = React.useRef([]);
@@ -219,11 +221,18 @@ var Tabs = function Tabs(_ref) {
   }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
+      var panel = child.props.children;
+      var isCurrentPanel = currentIndex === i;
+
+      if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: cn('panel', {
-          current: currentIndex === i
+          current: isCurrentPanel
         })
-      }, child);
+      }, panel);
     });
   }, [children, currentIndex]);
   var handleReachBeginning = React.useCallback(function (swiper) {
@@ -371,6 +380,7 @@ Tabs.propTypes = {
   sticky: PropTypes.bool,
   currentIndex: PropTypes.number,
   defaultIndex: PropTypes.number,
+  renderOnlyCurrentPanel: PropTypes.bool,
   onTabClick: PropTypes.func
 };
 export default Tabs;

package/dist/es/components/TextField/TextField.js

@@ -125,6 +125,11 @@ var TextField = function TextField(_ref) {
       isMaxLimitExceeded = _useState10[0],
       setIsMaxLimitExceeded = _useState10[1];
 
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isTouch = _useState12[0],
+      setTouch = _useState12[1];
+
   var fieldNode = useRef();
   var isPasswordType = useMemo(function () {
     return type === 'password';
@@ -132,9 +137,6 @@ var TextField = function TextField(_ref) {
   var isVisiblePassword = useMemo(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
-  var isTouch = useMemo(function () {
-    return detectTouch();
-  }, []);
   var checkSymbolMaxLimit = useCallback(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
@@ -148,6 +150,9 @@ var TextField = function TextField(_ref) {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit]);
+  useEffect(function () {
+    setTouch(detectTouch());
+  }, []);
   var togglePasswordHiding = useCallback(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;

package/dist/lib/colors/ColorItem/ColorItem.css

@@ -0,0 +1,52 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.color-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 120px;
+  text-align: center;
+}
+.color-item__container {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 8px;
+}
+.color-item__color {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.color-item__parent-color {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+.color-item__name {
+  font-size: 14px;
+  line-height: 20px;
+}
+.color-item__code {
+  color: #33333380;
+  font-size: 12px;
+  line-height: 18px;
+}

package/dist/lib/colors/ColorItem/ColorItem.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './ColorItem.less';
+declare type Props = {
+    colorCode: string;
+    colorName: string;
+    parentColorCode?: string;
+    gradient?: string;
+    border?: string;
+    className?: string;
+};
+declare const ColorItem: React.FC<Props>;
+export default ColorItem;