@megafon/ui-core 4.5.1 → 4.7.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.7.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.6.0...@megafon/ui-core@4.7.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* **textfield:** fix right padding with hideIcon prop ([c2aeffd](https://github.com/MegafonWebLab/megafon-ui/commit/c2aeffd1e4c94c97aac23128b9f1ccff4ead9a81))
+
+
+### Features
+
+* **tabs:** add gray color to tabColorTheme prop ([9d01119](https://github.com/MegafonWebLab/megafon-ui/commit/9d01119aef6ee6ef26e02c7b22efd17cb8a1147a))
+
+
+
+
+
+# [4.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.5.1...@megafon/ui-core@4.6.0) (2022-10-31)
+
+
+### Bug Fixes
+
+* **accordion:** fix dataAttrs props ([bb6e71c](https://github.com/MegafonWebLab/megafon-ui/commit/bb6e71cf36687fdcfb41a9ee40a27e0fdb21940b))
+
+
+### Features
+
+* **notification:** allow using html: br, &nbsp, font color, a href in title plus b in text ([1661b7b](https://github.com/MegafonWebLab/megafon-ui/commit/1661b7b602532594ed4d1398d9f70870b1e4d852))
+* **timerbadge:** add iconContainer to dataAttrs prop ([fa9b094](https://github.com/MegafonWebLab/megafon-ui/commit/fa9b094b209705c448de63fe0cfbfe52764e6709))
+
+
+
+
+
 ## [4.5.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.5.0...@megafon/ui-core@4.5.1) (2022-10-24)
 
 
@@ -171,6 +204,10 @@ new sizes
 either accept new rules or manually add line-height: 16px in your components
 * **paragraph:** prop 'size' is no longer exists.
 use component Caption instead of Paragraph size="small"
+* **header:** rename prop 'hAlign' to 'align'
+* **list:** rename prop 'hAlign' to 'align'
+* **contentarea:** remove value 'DEFAULT' from 'innerBackgroundColor' and 'outerBackgroundColor' props
+* **tabs:** rename prop 'hAlign' to 'align'
 
 
 

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

@@ -19,8 +19,13 @@ export interface IAccordionProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
-        header?: Record<string, string>;
-        collapse?: Record<string, string>;
+        header?: {
+            root: Record<string, string>;
+        };
+        collapse?: {
+            root?: Record<string, string>;
+            inner?: Record<string, string>;
+        };
         titleWrap?: Record<string, string>;
         arrowUp?: Record<string, string>;
         arrowDown?: Record<string, string>;

package/dist/es/components/Accordion/Accordion.js

@@ -64,17 +64,19 @@ var Accordion = function Accordion(_ref) {
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
-  }), /*#__PURE__*/React.createElement(Header, _extends({
-    as: "h5"
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(Header, {
+    as: "h5",
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
     className: cn('icon')
-  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
+  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, {
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }), children));
+  }, children));
 };
 
 Accordion.propTypes = {
@@ -92,8 +94,13 @@ Accordion.propTypes = {
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    header: PropTypes.objectOf(PropTypes.string.isRequired),
-    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
     titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)

package/dist/es/components/Badges/components/TimerBadge/TimerBadge.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './TimerBadge.less';
+export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */
     expirationDate: Date;
@@ -18,6 +19,7 @@ export interface ITimerBadgeProps {
         root?: Record<string, string>;
         text?: Record<string, string>;
         timer?: Record<string, string>;
+        iconContainer?: Record<string, string>;
     };
 }
 declare const TimerBadge: React.FC<ITimerBadgeProps>;

package/dist/es/components/Badges/components/TimerBadge/TimerBadge.js

@@ -21,7 +21,7 @@ var TimerIcon = function TimerIcon(props) {
 
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
-var TIMEOUT = 1000;
+export var TIMEOUT = 1000;
 var TimerBadgeTheme = {
   RED: 'red',
   GREY: 'grey'
@@ -75,11 +75,11 @@ var TimerBadge = function TimerBadge(_ref) {
     className: cn({
       theme: theme
     }, className)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
     className: cn('icon-container', {
       shadow: isLastHour && showCountdown
     })
-  }, /*#__PURE__*/React.createElement(TimerIcon, {
+  }), /*#__PURE__*/React.createElement(TimerIcon, {
     className: cn('icon')
   })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text')
@@ -104,7 +104,8 @@ TimerBadge.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     text: PropTypes.objectOf(PropTypes.string.isRequired),
-    timer: PropTypes.objectOf(PropTypes.string.isRequired)
+    timer: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default TimerBadge;

package/dist/es/components/Banner/BannerDot.d.ts

@@ -8,6 +8,8 @@ export interface IBannerDotProps {
     timerDelay: number;
     dataAttrs?: {
         root?: Record<string, string>;
+        svg?: Record<string, string>;
+        circle?: Record<string, string>;
     };
     onClick: (index: number) => void;
 }

package/dist/es/components/Banner/BannerDot.js

@@ -22,10 +22,10 @@ var BannerDot = function BannerDot(_ref) {
       timer: showTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", {
+  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({
     className: cn('timer'),
     viewBox: "0 0 100 100"
-  }, /*#__PURE__*/React.createElement("circle", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("circle", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.circle), {
     className: cn('timer-circle'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
@@ -33,13 +33,15 @@ var BannerDot = function BannerDot(_ref) {
     cx: "50",
     cy: "50",
     r: "50"
-  })));
+  }))));
 };
 
 BannerDot.propTypes = {
   className: PropTypes.string,
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    svg: PropTypes.objectOf(PropTypes.string.isRequired),
+    circle: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   index: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,

package/dist/es/components/Caption/Caption.css

@@ -8,7 +8,7 @@
   font-weight: 400;
 }
 .mfui-caption_variant_medium {
-  font-weight: 600;
+  font-weight: 500;
 }
 .mfui-caption_space_wide {
   line-height: 18px;

package/dist/es/components/Notification/Notification.js

@@ -4,7 +4,7 @@ import "core-js/modules/web.timers";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useRef, useState } from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
 import TextLink from "../TextLink/TextLink";
@@ -299,7 +299,7 @@ var Notification = function Notification(_ref) {
     className: cn('text-container')
   }, title && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }), title), /*#__PURE__*/React.createElement("div", _extends({
+  }), convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", _extends({
     ref: wrapTextRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
@@ -308,7 +308,7 @@ var Notification = function Notification(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: shortTextRef,
     className: cn('short-text', textClasses["short"])
-  }, shortText || children), shortText && /*#__PURE__*/React.createElement("div", {
+  }, shortText && convert(shortText, textConvertConfig) || children), shortText && /*#__PURE__*/React.createElement("div", {
     ref: fullTextRef,
     className: cn('full-text', textClasses.full)
   }, children))), hasBottom && /*#__PURE__*/React.createElement("div", {

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

@@ -149,8 +149,8 @@
   text-align: center;
   text-decoration: none;
   cursor: pointer;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color 0.3s, fill 0.3s;
+  transition: color 0.3s, fill 0.3s;
   fill: var(--spbSky3);
 }
 .mfui-tabs__tab-inner:focus {
@@ -245,12 +245,15 @@
   z-index: 100;
   background-color: var(--base);
 }
+.mfui-tabs_tab-color_gray .mfui-tabs__swiper {
+  background-color: var(--spbSky1);
+}
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper {
-  background-color: var(--stcBlack50);
+  background-color: var(--stcBlack20);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
-  color: var(--stcWhite50);
-  fill: var(--stcWhite50);
+  color: #ffffffb2;
+  fill: #ffffffb2;
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);

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

@@ -12,6 +12,7 @@ export declare const TabSize: {
 export declare const TabColorTheme: {
     readonly WHITE: "white";
     readonly GREEN: "green";
+    readonly GRAY: "gray";
 };
 declare type TabSizeType = typeof TabSize[keyof typeof TabSize];
 declare type TabColorThemeType = typeof TabColorTheme[keyof typeof TabColorTheme];

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

@@ -32,7 +32,8 @@ export var TabSize = {
 };
 export var TabColorTheme = {
   WHITE: 'white',
-  GREEN: 'green'
+  GREEN: 'green',
+  GRAY: 'gray'
 };
 var cn = cnCreate('mfui-tabs');
 

package/dist/es/components/TextField/TextField.css

@@ -46,6 +46,9 @@
   transition: height 0.1s;
   will-change: height;
 }
+.mfui-text-field__field_no-icon {
+  padding-right: 16px;
+}
 .mfui-text-field__resizer {
   position: absolute;
   right: 0;

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

@@ -319,7 +319,9 @@ var TextField = function TextField(_ref) {
   });
 
   var inputParams = _extends(_extends({}, commonParams), {
-    className: cn('field', classes === null || classes === void 0 ? void 0 : classes.input),
+    className: cn('field', {
+      'no-icon': hideIcon
+    }, classes === null || classes === void 0 ? void 0 : classes.input),
     type: isVisiblePassword ? 'text' : type,
     autoComplete: autoComplete
   });

package/dist/lib/components/Accordion/Accordion.d.ts

@@ -19,8 +19,13 @@ export interface IAccordionProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
-        header?: Record<string, string>;
-        collapse?: Record<string, string>;
+        header?: {
+            root: Record<string, string>;
+        };
+        collapse?: {
+            root?: Record<string, string>;
+            inner?: Record<string, string>;
+        };
         titleWrap?: Record<string, string>;
         arrowUp?: Record<string, string>;
         arrowDown?: Record<string, string>;

package/dist/lib/components/Accordion/Accordion.js

@@ -84,17 +84,19 @@ var Accordion = function Accordion(_ref) {
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
-  }), /*#__PURE__*/React.createElement(_Header["default"], (0, _extends2["default"])({
-    as: "h5"
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(_Header["default"], {
+    as: "h5",
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, (0, _extends2["default"])({
     className: cn('icon')
-  }, (0, _uiHelpers.filterDataAttrs)(arrowDataAttrs))))), /*#__PURE__*/React.createElement(_Collapse["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
+  }, (0, _uiHelpers.filterDataAttrs)(arrowDataAttrs))))), /*#__PURE__*/React.createElement(_Collapse["default"], {
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }), children));
+  }, children));
 };
 
 Accordion.propTypes = {
@@ -112,8 +114,13 @@ Accordion.propTypes = {
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    header: PropTypes.objectOf(PropTypes.string.isRequired),
-    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
     titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './TimerBadge.less';
+export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */
     expirationDate: Date;
@@ -18,6 +19,7 @@ export interface ITimerBadgeProps {
         root?: Record<string, string>;
         text?: Record<string, string>;
         timer?: Record<string, string>;
+        iconContainer?: Record<string, string>;
     };
 }
 declare const TimerBadge: React.FC<ITimerBadgeProps>;

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.TIMEOUT = void 0;
 
 require("core-js/modules/es.date.now");
 
@@ -44,6 +44,7 @@ var TimerIcon = function TimerIcon(props) {
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
 var TIMEOUT = 1000;
+exports.TIMEOUT = TIMEOUT;
 var TimerBadgeTheme = {
   RED: 'red',
   GREY: 'grey'
@@ -97,11 +98,11 @@ var TimerBadge = function TimerBadge(_ref) {
     className: cn({
       theme: theme
     }, className)
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
     className: cn('icon-container', {
       shadow: isLastHour && showCountdown
     })
-  }, /*#__PURE__*/_react["default"].createElement(TimerIcon, {
+  }), /*#__PURE__*/_react["default"].createElement(TimerIcon, {
     className: cn('icon')
   })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text')
@@ -126,7 +127,8 @@ TimerBadge.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     text: PropTypes.objectOf(PropTypes.string.isRequired),
-    timer: PropTypes.objectOf(PropTypes.string.isRequired)
+    timer: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 var _default = TimerBadge;

package/dist/lib/components/Banner/BannerDot.d.ts

@@ -8,6 +8,8 @@ export interface IBannerDotProps {
     timerDelay: number;
     dataAttrs?: {
         root?: Record<string, string>;
+        svg?: Record<string, string>;
+        circle?: Record<string, string>;
     };
     onClick: (index: number) => void;
 }

package/dist/lib/components/Banner/BannerDot.js

@@ -40,10 +40,10 @@ var BannerDot = function BannerDot(_ref) {
       timer: showTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", {
+  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     className: cn('timer'),
     viewBox: "0 0 100 100"
-  }, /*#__PURE__*/React.createElement("circle", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("circle", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.circle), {
     className: cn('timer-circle'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
@@ -51,13 +51,15 @@ var BannerDot = function BannerDot(_ref) {
     cx: "50",
     cy: "50",
     r: "50"
-  })));
+  }))));
 };
 
 BannerDot.propTypes = {
   className: PropTypes.string,
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    svg: PropTypes.objectOf(PropTypes.string.isRequired),
+    circle: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   index: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,

package/dist/lib/components/Caption/Caption.css

@@ -8,7 +8,7 @@
   font-weight: 400;
 }
 .mfui-caption_variant_medium {
-  font-weight: 600;
+  font-weight: 500;
 }
 .mfui-caption_space_wide {
   line-height: 18px;

package/dist/lib/components/Notification/Notification.js

@@ -325,7 +325,7 @@ var Notification = function Notification(_ref) {
     className: cn('text-container')
   }, title && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }), title), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+  }), (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     ref: wrapTextRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
@@ -334,7 +334,7 @@ var Notification = function Notification(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     ref: shortTextRef,
     className: cn('short-text', textClasses["short"])
-  }, shortText || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
+  }, shortText && (0, _uiHelpers.convert)(shortText, _uiHelpers.textConvertConfig) || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
     ref: fullTextRef,
     className: cn('full-text', textClasses.full)
   }, children))), hasBottom && /*#__PURE__*/_react["default"].createElement("div", {

package/dist/lib/components/Tabs/Tabs.css

@@ -149,8 +149,8 @@
   text-align: center;
   text-decoration: none;
   cursor: pointer;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color 0.3s, fill 0.3s;
+  transition: color 0.3s, fill 0.3s;
   fill: var(--spbSky3);
 }
 .mfui-tabs__tab-inner:focus {
@@ -245,12 +245,15 @@
   z-index: 100;
   background-color: var(--base);
 }
+.mfui-tabs_tab-color_gray .mfui-tabs__swiper {
+  background-color: var(--spbSky1);
+}
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper {
-  background-color: var(--stcBlack50);
+  background-color: var(--stcBlack20);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
-  color: var(--stcWhite50);
-  fill: var(--stcWhite50);
+  color: #ffffffb2;
+  fill: #ffffffb2;
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);

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

@@ -12,6 +12,7 @@ export declare const TabSize: {
 export declare const TabColorTheme: {
     readonly WHITE: "white";
     readonly GREEN: "green";
+    readonly GRAY: "gray";
 };
 declare type TabSizeType = typeof TabSize[keyof typeof TabSize];
 declare type TabColorThemeType = typeof TabColorTheme[keyof typeof TabColorTheme];

package/dist/lib/components/Tabs/Tabs.js

@@ -61,7 +61,8 @@ var TabSize = {
 exports.TabSize = TabSize;
 var TabColorTheme = {
   WHITE: 'white',
-  GREEN: 'green'
+  GREEN: 'green',
+  GRAY: 'gray'
 };
 exports.TabColorTheme = TabColorTheme;
 var cn = (0, _uiHelpers.cnCreate)('mfui-tabs');

package/dist/lib/components/TextField/TextField.css

@@ -46,6 +46,9 @@
   transition: height 0.1s;
   will-change: height;
 }
+.mfui-text-field__field_no-icon {
+  padding-right: 16px;
+}
 .mfui-text-field__resizer {
   position: absolute;
   right: 0;

package/dist/lib/components/TextField/TextField.js

@@ -346,7 +346,9 @@ var TextField = function TextField(_ref) {
     inputMode: inputMode
   });
   var inputParams = (0, _extends2["default"])((0, _extends2["default"])({}, commonParams), {
-    className: cn('field', classes === null || classes === void 0 ? void 0 : classes.input),
+    className: cn('field', {
+      'no-icon': hideIcon
+    }, classes === null || classes === void 0 ? void 0 : classes.input),
     type: isVisiblePassword ? 'text' : type,
     autoComplete: autoComplete
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.5.1",
+  "version": "4.7.0",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.2.0",
+    "@megafon/ui-icons": "^2.3.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -89,7 +89,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.2.0",
+    "@megafon/ui-helpers": "^2.3.0",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "08dd535c268cf6cd4f7c30d66845e5f16aa7b14d"
+  "gitHead": "d22bcb18842bee0a570b666fb4007c81ac3aced0"
 }