@megafon/ui-core 4.6.0 → 4.8.0

package/dist/es/components/Tooltip/Tooltip.js

@@ -1,23 +1,61 @@
 import "core-js/modules/es.array.concat";
 import "core-js/modules/es.object.values";
 import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
+import Header from "../Header/Header";
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
+
+var RightArrow = function RightArrow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
+  }));
+};
+
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    className: "CancelIcon__st0",
+    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+  }));
+};
+
+var Arrow = function Arrow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 42,
+    height: 12
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.212 1.081c.91-1.06 2.666-1.06 3.576 0C25.986 4.804 33.183 11.822 42 11.822H0c8.817 0 16.014-7.018 19.212-10.74z"
+  }));
+};
+
 var TOOLTIP_PADDING_FOR_FLIP = 14;
 var MOUSE_KEY = 'mousedown';
 var TOUCH_KEY = 'touchstart';
 export var Placement = {
   LEFT: 'left',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end',
   TOP: 'top',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
   RIGHT: 'right',
-  BOTTOM: 'bottom'
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  BOTTOM: 'bottom',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end'
 };
 export var Paddings = {
   NONE: 'none',
@@ -29,16 +67,33 @@ export var TriggerEvent = {
   CLICK: 'click',
   CONTROLLED: 'controlled'
 };
+export var ColorTheme = {
+  WHITE: 'white',
+  BLUE: 'blue',
+  RED: 'red'
+};
+export var Size = {
+  SMALL: 'small',
+  BIG: 'big'
+};
 var cn = cnCreate('mfui-tooltip');
 
 var Tooltip = function Tooltip(_ref) {
   var className = _ref.className,
+      title = _ref.title,
+      text = _ref.text,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'big' : _ref$size,
+      buttonText = _ref.buttonText,
+      hasCloseButton = _ref.hasCloseButton,
+      _ref$colorTheme = _ref.colorTheme,
+      theme = _ref$colorTheme === void 0 ? 'white' : _ref$colorTheme,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'top' : _ref$placement,
       _ref$fallbackPlacemen = _ref.fallbackPlacements,
       fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['left', 'right', 'top', 'bottom'] : _ref$fallbackPlacemen,
       _ref$paddings = _ref.paddings,
-      paddings = _ref$paddings === void 0 ? 'medium' : _ref$paddings,
+      paddings = _ref$paddings === void 0 ? 'small' : _ref$paddings,
       _ref$triggerEvent = _ref.triggerEvent,
       triggerEvent = _ref$triggerEvent === void 0 ? 'hover' : _ref$triggerEvent,
       boundaryElement = _ref.boundaryElement,
@@ -58,11 +113,9 @@ var Tooltip = function Tooltip(_ref) {
       contentShadowClassName = _ref$classes.contentShadow,
       dataAttrs = _ref.dataAttrs,
       onOpen = _ref.onOpen,
-      onClose = _ref.onClose;
-  var currentTrigger = triggerElement.current;
-  var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
-  var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
-  var portalElem = React.useRef(null);
+      onClose = _ref.onClose,
+      onClick = _ref.onClick,
+      onCloseButtonClick = _ref.onCloseButtonClick;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -79,16 +132,39 @@ var Tooltip = function Tooltip(_ref) {
       isOpen = _useState6[0],
       setIsOpen = _useState6[1];
 
-  useEffect(function () {
-    return setIsOpen(isOpened);
-  }, [isOpened]);
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isTouchDevice = _useState8[0],
+      setIsTouchDevice = _useState8[1];
+
+  var currentTrigger = triggerElement.current;
+  var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
+  var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
+  var portalElem = React.useRef(null);
+  var isBigSize = size === Size.BIG;
+  var clickEvent = useMemo(function () {
+    return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
+  }, [isTouchDevice]);
+  var triggerEventName = useMemo(function () {
+    if (triggerEvent === TriggerEvent.CONTROLLED || !isTouchDevice) {
+      return triggerEvent;
+    }
+
+    return TriggerEvent.CLICK;
+  }, [isTouchDevice, triggerEvent]);
   var options = useMemo(function () {
     return {
       placement: placement,
       modifiers: [{
         name: 'arrow',
         options: {
-          element: arrowElement
+          element: arrowElement,
+          padding: {
+            top: 17,
+            right: 1,
+            bottom: 17,
+            left: 1
+          }
         }
       }, {
         name: 'flip',
@@ -107,6 +183,11 @@ var Tooltip = function Tooltip(_ref) {
         options: {
           boundary: currentBoundary
         }
+      }, {
+        name: 'offset',
+        options: {
+          offset: [0, 12]
+        }
       }]
     };
   }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
@@ -116,28 +197,23 @@ var Tooltip = function Tooltip(_ref) {
       attributes = _usePopper.attributes,
       update = _usePopper.update;
 
+  useEffect(function () {
+    return setIsOpen(isOpened);
+  }, [isOpened]);
   useEffect(function () {
     update === null || update === void 0 ? void 0 : update();
   }, [children, update]);
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isTouchDevice = _useState8[0],
-      setIsTouchDevice = _useState8[1];
-
   useEffect(function () {
     return setIsTouchDevice(detectTouch());
   }, []);
-  var clickEvent = useMemo(function () {
-    return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
-  }, [isTouchDevice]);
-  var triggerEventName = useMemo(function () {
-    if (triggerEvent === TriggerEvent.CONTROLLED || !isTouchDevice) {
-      return triggerEvent;
-    }
-
-    return TriggerEvent.CLICK;
-  }, [isTouchDevice, triggerEvent]);
+  var closeTooltip = useCallback(function (e) {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+  }, [onClose]);
+  var handleCloseButtonClick = useCallback(function (e) {
+    setIsOpen(false);
+    onCloseButtonClick === null || onCloseButtonClick === void 0 ? void 0 : onCloseButtonClick(e);
+  }, [onCloseButtonClick]);
   var handleMouseEnter = useCallback(function (e) {
     if (!isOpen) {
       setIsOpen(true);
@@ -162,16 +238,8 @@ var Tooltip = function Tooltip(_ref) {
   var handleOutsideEvent = useCallback(function (e) {
     var isTargetInPopper = e.target instanceof Element && popperElement && popperElement.contains(e.target);
     var isTargetInTrigger = e.target instanceof Element && currentTrigger && currentTrigger.contains(e.target);
-
-    if (!isTargetInPopper && !isTargetInTrigger) {
-      setIsOpen(false);
-      onClose === null || onClose === void 0 ? void 0 : onClose(e);
-    }
-  }, [onClose, currentTrigger, popperElement]);
-  var handleBlurEvent = useCallback(function (e) {
-    setIsOpen(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose(e);
-  }, [onClose]);
+    !isTargetInPopper && !isTargetInTrigger && closeTooltip(e);
+  }, [closeTooltip, currentTrigger, popperElement]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.HOVER) {
       if (currentTrigger) {
@@ -181,10 +249,10 @@ var Tooltip = function Tooltip(_ref) {
 
       if (isOpen) {
         document.addEventListener('mouseover', handleOutsideEvent);
-        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.addEventListener('blur', handleBlurEvent);
+        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.addEventListener('blur', closeTooltip);
       } else {
         document.removeEventListener('mouseover', handleOutsideEvent);
-        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.removeEventListener('blur', handleBlurEvent);
+        currentTrigger === null || currentTrigger === void 0 ? void 0 : currentTrigger.removeEventListener('blur', closeTooltip);
       }
 
       return function () {
@@ -198,7 +266,7 @@ var Tooltip = function Tooltip(_ref) {
     }
 
     return undefined;
-  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter, handleBlurEvent]);
+  }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter, closeTooltip]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.CLICK) {
       if (currentTrigger) {
@@ -235,26 +303,61 @@ var Tooltip = function Tooltip(_ref) {
     };
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
+  var renderedText = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('text')
+    }, text);
+  }, [text]);
+  var renderedFullContent = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(Header, {
+      className: cn('title'),
+      as: "h5",
+      space: "tight"
+    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
+      type: "button",
+      className: cn('button')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
+      onClick: onClick
+    }), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
+      className: cn('button-arrow')
+    })), !!children && /*#__PURE__*/React.createElement("div", {
+      className: cn('addititonal-content')
+    }, children));
+  }, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
   var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
+      theme: theme,
       paddings: paddings,
-      open: isOpen
+      open: isOpen,
+      small: !isBigSize,
+      'has-escape': !targetElement
     }, [className, rootClassName]),
     ref: setPopperElement,
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/React.createElement("div", {
+    className: cn('arrow-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('arrow-wrap'),
     ref: setArrowElement,
-    className: cn('arrow', [arrowClassName]),
-    style: styles.arrow
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn('arrow-shadow'),
     style: styles.arrow
-  }), /*#__PURE__*/React.createElement(Tile, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('arrow', [arrowClassName])
+  }, /*#__PURE__*/React.createElement(Arrow, {
+    className: cn('arrow-inner')
+  })))), /*#__PURE__*/React.createElement(Tile, {
+    radius: "rounded",
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content
     },
     className: cn('content', [contentClassName])
-  }, children), /*#__PURE__*/React.createElement(Tile, {
+  }, isBigSize && renderedFullContent, !isBigSize && !!text && renderedText, hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
+    className: cn('close-button'),
+    type: "button",
+    onClick: handleCloseButtonClick
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('close-icon')
+  }))), /*#__PURE__*/React.createElement(Tile, {
+    radius: "rounded",
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
@@ -274,6 +377,12 @@ var Tooltip = function Tooltip(_ref) {
 };
 
 Tooltip.propTypes = {
+  colorTheme: PropTypes.oneOf(Object.values(ColorTheme)),
+  size: PropTypes.oneOf(Object.values(Size)),
+  title: PropTypes.string,
+  buttonText: PropTypes.string,
+  text: PropTypes.string,
+  hasCloseButton: PropTypes.bool,
   placement: PropTypes.oneOf(Object.values(Placement)),
   fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(Object.values(Placement)).isRequired),
   paddings: PropTypes.oneOf(Object.values(Paddings)),
@@ -312,9 +421,13 @@ Tooltip.propTypes = {
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
+    close: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
     content: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   onOpen: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onClick: PropTypes.func,
+  onCloseButtonClick: PropTypes.func
 };
 export default Tooltip;

package/dist/lib/components/Accordion/Accordion.css

@@ -14,6 +14,7 @@
   position: relative;
   padding: 24px 44px 24px 16px;
   border-radius: 12px;
+  outline: none;
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;

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/Button/Button.d.ts

@@ -37,6 +37,8 @@ export interface IButtonProps {
         content?: Record<string, string>;
         inner?: Record<string, string>;
         loader?: Record<string, string>;
+        text?: Record<string, string>;
+        arrow?: Record<string, string>;
     };
     /** Тема компонента */
     theme?: ButtonThemesType;

package/dist/lib/components/Button/Button.js

@@ -161,14 +161,14 @@ var Button = function Button(_ref) {
       }, contentClassName)
     }), icon && /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('icon')
-    }, icon), children && /*#__PURE__*/_react["default"].createElement("span", {
+    }, icon), children && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
       className: cn('text', {
         ellipsis: ellipsis
       })
-    }, children), !icon && showArrow && /*#__PURE__*/_react["default"].createElement(Arrow, {
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), !icon && showArrow && /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
       className: cn('icon-arrow')
-    }));
-  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow, ellipsis]);
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
+  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, contentClassName, showArrow]);
 
   var contentType = _react["default"].useMemo(function () {
     switch (true) {
@@ -257,7 +257,9 @@ Button.propTypes = {
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     content: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     inner: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    loader: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+    loader: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    text: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrow: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   }),
   theme: _propTypes["default"].oneOf(Object.values(ButtonThemes)),
   type: _propTypes["default"].oneOf(Object.values(ButtonTypes)),

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

@@ -9,9 +9,13 @@ export declare const NotificationTypes: {
 declare type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
 export declare const ShadowTypes: {
     readonly ZERO: "zero";
+    /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
     readonly LOW: "low";
+    /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
     readonly HIGH: "high";
     readonly HOVER: "hover";
+    readonly PRESSED: "pressed";
+    readonly DEFAULT: "default";
 };
 declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {

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

@@ -117,9 +117,15 @@ var NotificationTypes = {
 exports.NotificationTypes = NotificationTypes;
 var ShadowTypes = {
   ZERO: 'zero',
+
+  /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
   LOW: 'low',
+
+  /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
   HIGH: 'high',
-  HOVER: 'hover'
+  HOVER: 'hover',
+  PRESSED: 'pressed',
+  DEFAULT: 'default'
 };
 exports.ShadowTypes = ShadowTypes;
 var cn = (0, _uiHelpers.cnCreate)('mfui-notification');

package/dist/lib/components/Search/Search.css

@@ -231,6 +231,20 @@
   max-height: 368px;
   padding: 16px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
+.mfui-search__list-inner::-webkit-scrollbar {
+  width: 16px;
+}
+.mfui-search__list-inner::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  border-radius: 16px;
+  background-color: #D8D8D8;
+  background-clip: padding-box;
+}
+.mfui-search__list-inner::-webkit-scrollbar-thumb:hover {
+  background-color: #999999;
 }
 .mfui-search__list-item {
   font-family: inherit;

package/dist/lib/components/Select/Select.css

@@ -177,6 +177,8 @@
   max-height: 368px;
   padding: 16px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
 }
 .mfui-select__list-inner_short {
   max-height: 235px;

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');
@@ -424,7 +425,8 @@ var Tabs = function Tabs(_ref) {
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge
+    onFromEdge: handleFromEdge,
+    observer: true
   }), renderTabs(), /*#__PURE__*/React.createElement("div", {
     className: cn('underline'),
     slot: "wrapper-start",

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;
@@ -158,6 +161,10 @@
   font-size: 15px;
   line-height: 24px;
 }
+.mfui-text-field__field_textarea {
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
 .mfui-text-field__field_textarea ~ .mfui-text-field__label {
   top: 16px;
 }

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/dist/lib/components/Tile/Tile.css

@@ -3,7 +3,7 @@
   background-color: var(--base);
 }
 .mfui-tile_radius_rounded {
-  border-radius: 8px;
+  border-radius: 12px;
 }
 .mfui-tile_pointer {
   cursor: pointer;
@@ -16,11 +16,6 @@
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
 }
-.mfui-tile_theme_light.mfui-tile_shadow_hover,
-.mfui-tile_theme_light.mfui-tile_interactive:hover {
-  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-}
 .mfui-tile_theme_dark.mfui-tile_shadow_low {
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
@@ -29,6 +24,27 @@
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
 }
+.mfui-tile_theme_light.mfui-tile_shadow_default {
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.mfui-tile_theme_light.mfui-tile_shadow_pressed {
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+}
+.mfui-tile_theme_light.mfui-tile_shadow_hover,
+.mfui-tile_theme_light.mfui-tile_interactive:hover {
+  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+}
+.mfui-tile_theme_dark.mfui-tile_shadow_default {
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+}
+.mfui-tile_theme_dark.mfui-tile_shadow_pressed {
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
 .mfui-tile_theme_dark.mfui-tile_shadow_hover,
 .mfui-tile_theme_dark.mfui-tile_interactive:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);