@megafon/ui-core 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-9-tabs .swiper-wrapper,.mfui-9-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-9-tabs__swiper-wrapper:after,.mfui-9-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-9-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-9-tabs__swiper-wrapper:after{right:0}.mfui-9-tabs__swiper-wrapper_beginning:before,.mfui-9-tabs__swiper-wrapper_end:after{display:none}.mfui-9-tabs__swiper{background-color:var(--spbSky0);border-radius:16px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-9-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-9-tabs__panel{display:none}.mfui-9-tabs__panel_current{display:block}.mfui-9-tabs__underline{background-color:var(--base);border-radius:12px;bottom:0;left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-9-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-9-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-9-tabs__arrow{display:none}}.mfui-9-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-9-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-9-tabs__arrow_prev{left:14px}.mfui-9-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-9-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-9-tabs__tab-inner{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:color,fill,opacity;transition-property:color,fill,opacity;white-space:nowrap;fill:var(--content)}.mfui-9-tabs__tab-inner:hover{text-decoration:none}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{opacity:1}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-9-tabs__tab-inner_with-icon{padding-left:8px}.mfui-9-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-9-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-9-tabs__tab-icon svg{height:100%;width:100%}.mfui-9-tabs__tab-counter{color:var(--spbSky3);margin-left:4px}.mfui-9-tabs__tab-bubble{margin-left:4px}.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:8px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:16px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:24px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-icon{margin-right:4px}.mfui-9-tabs_size_large .mfui-9-tabs__tab-bubble,.mfui-9-tabs_size_large .mfui-9-tabs__tab-counter{margin-left:8px}.mfui-9-tabs_auto-width .mfui-9-tabs__swiper{max-width:100%;width:auto}.mfui-9-tabs_auto-width .mfui-9-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-9-tabs_auto-width.mfui-9-tabs_h-align_center .mfui-9-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-9-tabs_sticky .mfui-9-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-9-tabs_tab-color_gray .mfui-9-tabs__swiper{background-color:var(--spbSky1)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__swiper{background-color:var(--stcBlack20)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__underline{background-color:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:active{background-color:var(--stcBlack0)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-9-tabs .swiper-wrapper,.mfui-9-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-9-tabs__swiper-wrapper:after,.mfui-9-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-9-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-9-tabs__swiper-wrapper:after{right:0}.mfui-9-tabs__swiper-wrapper_beginning:before,.mfui-9-tabs__swiper-wrapper_end:after{display:none}.mfui-9-tabs__swiper{background-color:var(--spbSky0);border-radius:16px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-9-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-9-tabs__panel{display:none}.mfui-9-tabs__panel_current{display:block}.mfui-9-tabs__underline{background-color:var(--base);border-radius:12px;bottom:0;left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-9-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-9-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-9-tabs__arrow{display:none}}.mfui-9-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-9-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-9-tabs__arrow_prev{left:14px}.mfui-9-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-9-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-9-tabs__tab-inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;color:inherit;font-family:inherit;font-size:15px;font-size:inherit;font-weight:500;line-height:24px;line-height:inherit;margin:0;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;box-sizing:border-box;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:color,fill,opacity;transition-property:color,fill,opacity;white-space:nowrap;width:100%;fill:var(--content)}.mfui-9-tabs__tab-inner:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-tabs__tab-inner:focus{outline:none}.mfui-9-tabs__tab-inner:disabled{color:inherit;cursor:auto}.mfui-9-tabs__tab-inner:hover{text-decoration:none}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{opacity:1}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-9-tabs__tab-inner_with-icon{padding-left:8px}.mfui-9-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-9-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-9-tabs__tab-icon svg{height:100%;width:100%}.mfui-9-tabs__tab-counter{color:var(--spbSky3);margin-left:4px}.mfui-9-tabs__tab-bubble{margin-left:4px}.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:8px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:16px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:24px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-icon{margin-right:4px}.mfui-9-tabs_size_large .mfui-9-tabs__tab-bubble,.mfui-9-tabs_size_large .mfui-9-tabs__tab-counter{margin-left:8px}.mfui-9-tabs__wrapper_auto-width .mfui-9-tabs__swiper{max-width:100%;width:auto}.mfui-9-tabs__wrapper_auto-width .mfui-9-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-9-tabs__wrapper_auto-width.mfui-9-tabs__wrapper_h-align_center .mfui-9-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-9-tabs_sticky .mfui-9-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-9-tabs_tab-color_gray .mfui-9-tabs__swiper{background-color:var(--spbSky1)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__swiper{background-color:var(--stcBlack20)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__underline{background-color:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:active{background-color:var(--stcBlack0)}

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

@@ -59,6 +59,8 @@ export interface ITabsProps {
     renderOnlyCurrentPanel?: boolean;
     /** Внешний контейнер для режима фиксация табов */
     outerObserveContainer?: HTMLDivElement | null;
+    /** Функция рендера компонента-обертки для всех табов */
+    renderTabsWrapper?: (tabs: React.ReactNode) => React.ReactNode;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: TabsChildrenType;

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

@@ -21,7 +21,7 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12 13l-3-3 3-3-1-1-4 4 4 4z"
+    d: "M8.502 5.304a1 1 0 011.436 1.392L7.713 8.993H14.5a1 1 0 110 2H7.7l2.238 2.31a1 1 0 01-1.436 1.393l-3.61-3.726a1.396 1.396 0 010-1.94l3.61-3.726z"
   }));
 };
 var Swiper = null;
@@ -71,6 +71,7 @@ var Tabs = function Tabs(_ref) {
     children = _ref.children,
     dataAttrs = _ref.dataAttrs,
     onTabClick = _ref.onTabClick,
+    renderTabsWrapper = _ref.renderTabsWrapper,
     outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef({});
   var rootRef = React.useRef(null);
@@ -265,7 +266,7 @@ var Tabs = function Tabs(_ref) {
       href = _ref3.href,
       rel = _ref3.rel,
       attr = _ref3.attr;
-    var ElementType = href ? 'a' : 'div';
+    var ElementType = href ? 'a' : 'button';
     var bubbleSizeWithTitle = size === 'medium' ? 'medium' : 'big';
     return /*#__PURE__*/React.createElement(ElementType, _extends({
       href: href,
@@ -275,7 +276,10 @@ var Tabs = function Tabs(_ref) {
         'with-icon': !!icon
       }),
       onClick: handleTabInnerClick(index)
-    }, filterDataAttrs(attr, index + 1)), !!icon && /*#__PURE__*/React.createElement("div", {
+    }, filterDataAttrs(attr, index + 1), {
+      role: "tab",
+      tabIndex: currentIndex === index ? -1 : 0
+    }), !!icon && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-icon')
     }, icon), !!title && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-title')
@@ -335,7 +339,8 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
-        }, [classes === null || classes === void 0 ? void 0 : classes.panel])
+        }, [classes === null || classes === void 0 ? void 0 : classes.panel]),
+        role: "tabpanel"
       }), panel);
     });
   }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel, classes === null || classes === void 0 ? void 0 : classes.panel]);
@@ -393,63 +398,67 @@ var Tabs = function Tabs(_ref) {
   if (!Swiper) {
     return null;
   }
+  var renderSwiper = function renderSwiper() {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: tabListRef,
+      style: {
+        height: tabListHeight
+      }
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
+      className: cn('wrapper', {
+        'auto-width': autoWidth,
+        'h-align': align
+      }, [classes === null || classes === void 0 ? void 0 : classes.wrapper])
+    }), /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('swiper-wrapper', {
+        beginning: isBeginning,
+        end: isEnd
+      }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
+      style: {
+        paddingLeft: stickyOffset.left,
+        paddingRight: stickyOffset.right
+      }
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
+      simulateTouch: false,
+      className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
+      watchOverflow: true,
+      slidesPerView: "auto",
+      initialSlide: currentIndex,
+      onSwiper: handleSwiper,
+      onReachBeginning: handleReachBeginning,
+      onReachEnd: handleReachEnd,
+      onFromEdge: handleFromEdge,
+      observer: true
+    }), renderTabs(), /*#__PURE__*/React.createElement("div", {
+      className: cn('underline'),
+      slot: "wrapper-start",
+      style: {
+        width: "".concat(underlineWidth, "px"),
+        transform: "translateX(".concat(underlineTranslate, "px)"),
+        transitionProperty: underlineTransition
+      }
+    }), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+      className: cn('arrow', {
+        prev: true,
+        hide: isBeginning
+      }),
+      onClick: handlePrevArrowClick
+    })), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+      className: cn('arrow', {
+        next: true,
+        hide: isEnd
+      }),
+      onClick: handleNextArrowClick
+    })))));
+  };
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       'tab-color': tabColorTheme,
-      'h-align': align,
       indents: !(classes === null || classes === void 0 ? void 0 : classes.innerIndents),
-      sticky: isSticky,
-      'auto-width': autoWidth
+      sticky: isSticky
     }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement("div", _extends({
-    ref: tabListRef,
-    style: {
-      height: tabListHeight
-    }
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
-    className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
-  }), /*#__PURE__*/React.createElement("div", _extends({
-    className: cn('swiper-wrapper', {
-      beginning: isBeginning,
-      end: isEnd
-    }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
-    style: {
-      paddingLeft: stickyOffset.left,
-      paddingRight: stickyOffset.right
-    }
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
-    simulateTouch: false,
-    className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
-    watchOverflow: true,
-    slidesPerView: "auto",
-    initialSlide: currentIndex,
-    onSwiper: handleSwiper,
-    onReachBeginning: handleReachBeginning,
-    onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge,
-    observer: true
-  }), renderTabs(), /*#__PURE__*/React.createElement("div", {
-    className: cn('underline'),
-    slot: "wrapper-start",
-    style: {
-      width: "".concat(underlineWidth, "px"),
-      transform: "translateX(".concat(underlineTranslate, "px)"),
-      transitionProperty: underlineTransition
-    }
-  }), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
-    className: cn('arrow', {
-      prev: true,
-      hide: isBeginning
-    }),
-    onClick: handlePrevArrowClick
-  })), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
-    className: cn('arrow', {
-      next: true,
-      hide: isEnd
-    }),
-    onClick: handleNextArrowClick
-  }))))), renderPanels());
+  }), renderTabsWrapper ? renderTabsWrapper(renderSwiper()) : renderSwiper(), renderPanels());
 };
 export default Tabs;

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-text-field{color:var(--content);font-family:inherit;font-size:15px;line-height:24px}.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:focus,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:hover,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field_resized{border-color:var(--content)}.mfui-9-text-field__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:var(--content);display:block;font-family:inherit;font-size:15px;line-height:24px;margin:0;opacity:1;outline:none;padding:25px 56px 9px 16px;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-9-text-field__field_textarea,.mfui-9-text-field__field_type_flexible{-webkit-box-sizing:content-box;box-sizing:content-box;overflow-x:hidden;overflow-y:auto;padding-top:28px;resize:none}.mfui-9-text-field__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-9-text-field__field_no-icon{padding-right:16px}.mfui-9-text-field__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-9-text-field__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-9-text-field__resizer:active svg,.mfui-9-text-field__resizer:hover svg{stroke:var(--spbSky3)}.mfui-9-text-field__field::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:focus::-webkit-input-placeholder{opacity:1}.mfui-9-text-field__field:focus:-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::-moz-placeholder{opacity:1}.mfui-9-text-field__field:focus::-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::placeholder{opacity:1}.mfui-9-text-field__field::-webkit-scrollbar{width:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-9-text-field__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;left:16px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:18px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-text-field__field_textarea{scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-text-field__field_textarea~.mfui-9-text-field__label{top:16px}.mfui-9-text-field__field:-webkit-autofill~.mfui-9-text-field__label,.mfui-9-text-field__field:focus~.mfui-9-text-field__label,.mfui-9-text-field__field:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-75%);transform:scale(.8) translate(-11%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-text-field__field_textarea:not(:-moz-placeholder-shown)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:not(:-ms-input-placeholder)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:focus~.mfui-9-text-field__label,.mfui-9-text-field__field_textarea:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-50%);transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.mfui-9-text-field__field-bottom-wrapper{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;margin-top:0;overflow:hidden}.mfui-9-text-field__field-bottom-wrapper_filled{margin-top:8px}.mfui-9-text-field__notice-text{height:0;opacity:0;-webkit-transition:height,opacity;transition:height,opacity;-webkit-transition-duration:.3s;transition-duration:.3s}.mfui-9-text-field__notice-text_active{height:100%;opacity:1}.mfui-9-text-field__icon-box{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;top:0;z-index:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;padding-right:16px;text-align:center;fill:var(--content)}.mfui-9-text-field__icon-box_custom-handler,.mfui-9-text-field__icon-box_error,.mfui-9-text-field__icon-box_password,.mfui-9-text-field__icon_clear{cursor:pointer}.mfui-9-text-field__icon,.mfui-9-text-field__icon-box svg{display:block;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-9-text-field__icon_clear{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-text-field__icon_clear:hover{fill:var(--content)}.mfui-9-text-field__require-mark{color:var(--fury)}.mfui-9-text-field__counter{margin-left:auto}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--brandGreen)}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--brandGreen)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon_clear:hover{fill:var(--fury80)}.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--content);cursor:default}.mfui-9-text-field_disabled .mfui-9-text-field__icon-box{cursor:default!important}.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__counter_error,.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__field-bottom-wrapper{color:var(--fury)}.mfui-9-text-field_theme_white .mfui-9-text-field__icon{fill:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__counter,.mfui-9-text-field_theme_white .mfui-9-text-field__field-bottom-wrapper{color:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb{background-color:rgba(51,51,51,.2)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:rgba(51,51,51,.5)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer svg{stroke:var(--stcWhite20)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:active svg,.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:hover svg{stroke:var(--stcWhite50)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field{border-color:var(--base)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-moz-placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-ms-input-placeholder){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):hover{border-color:var(--stcBlack)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--stcWhite20);border-color:var(--stcWhite20);color:var(--stcWhite)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__label{color:var(--stcWhite50)}.mfui-9-text-field_icon .mfui-9-text-field__field{padding-right:55px}.mfui-9-text-field_password .mfui-9-text-field__field{font:small-caption;font-size:19px;line-height:24px}.mfui-9-text-field input::-ms-clear,.mfui-9-text-field input::-ms-reveal{display:none}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-text-field{color:var(--content);font-family:inherit;font-size:15px;line-height:24px}.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:focus,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:hover,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field_resized{border-color:var(--content)}.mfui-9-text-field__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:var(--content);display:block;font-family:inherit;font-size:15px;line-height:24px;margin:0;opacity:1;outline:none;padding:25px 56px 9px 16px;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-9-text-field__field_textarea,.mfui-9-text-field__field_type_flexible{-webkit-box-sizing:content-box;box-sizing:content-box;overflow-x:hidden;overflow-y:auto;padding-top:28px;resize:none}.mfui-9-text-field__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-9-text-field__field_no-icon{padding-right:16px}.mfui-9-text-field__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:8px;width:12px}.mfui-9-text-field__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-9-text-field__resizer:active svg,.mfui-9-text-field__resizer:hover svg{stroke:var(--spbSky3)}.mfui-9-text-field__field::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:focus::-webkit-input-placeholder{opacity:1}.mfui-9-text-field__field:focus:-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::-moz-placeholder{opacity:1}.mfui-9-text-field__field:focus::-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::placeholder{opacity:1}.mfui-9-text-field__field::-webkit-scrollbar{width:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-9-text-field__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;left:16px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:18px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-text-field__field_textarea{scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-text-field__field_textarea~.mfui-9-text-field__label{top:16px}.mfui-9-text-field__field:-webkit-autofill~.mfui-9-text-field__label,.mfui-9-text-field__field:focus~.mfui-9-text-field__label,.mfui-9-text-field__field:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-75%);transform:scale(.8) translate(-11%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-text-field__field_textarea:not(:-moz-placeholder-shown)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:not(:-ms-input-placeholder)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:focus~.mfui-9-text-field__label,.mfui-9-text-field__field_textarea:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-50%);transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.mfui-9-text-field__field-bottom-wrapper{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;margin-top:0;overflow:hidden}.mfui-9-text-field__field-bottom-wrapper_filled{margin-top:4px}.mfui-9-text-field__notice-text{height:0;opacity:0;-webkit-transition:height,opacity;transition:height,opacity;-webkit-transition-duration:.3s;transition-duration:.3s}.mfui-9-text-field__notice-text_active{height:100%;opacity:1}.mfui-9-text-field__icon-box{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;top:0;z-index:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;padding-right:16px;text-align:center;fill:var(--content)}.mfui-9-text-field__icon-box_custom-handler,.mfui-9-text-field__icon-box_error,.mfui-9-text-field__icon-box_password,.mfui-9-text-field__icon_clear{cursor:pointer}.mfui-9-text-field__icon,.mfui-9-text-field__icon-box svg{display:block;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-9-text-field__icon_clear{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-text-field__icon_clear:hover{fill:var(--content)}.mfui-9-text-field__require-mark{color:var(--fury)}.mfui-9-text-field__counter{margin-left:auto}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--brandGreen)}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--brandGreen)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon_clear:hover{fill:var(--fury80)}.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--spbSky0);border-color:var(--spbSky2);color:var(--content);cursor:default}.mfui-9-text-field_disabled .mfui-9-text-field__icon-box{cursor:default!important;fill:var(--spbSky3)}.mfui-9-text-field_disabled .mfui-9-text-field__icon{fill:var(--spbSky3)}.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__counter_error,.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__field-bottom-wrapper{color:var(--fury)}.mfui-9-text-field_theme_white .mfui-9-text-field__icon{fill:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__counter,.mfui-9-text-field_theme_white .mfui-9-text-field__field-bottom-wrapper{color:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb{background-color:rgba(51,51,51,.2)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:rgba(51,51,51,.5)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer svg{stroke:var(--stcWhite20)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:active svg,.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:hover svg{stroke:var(--stcWhite50)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field{border-color:var(--base)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-moz-placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-ms-input-placeholder){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):hover{border-color:var(--stcBlack)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--stcWhite20);border-color:transparent;color:var(--stcWhite)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__label{color:var(--stcWhite50)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__icon{fill:var(--stcWhite50)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__icon-box{cursor:default!important;fill:var(--stcWhite50)}.mfui-9-text-field_icon .mfui-9-text-field__field{padding-right:55px}.mfui-9-text-field_password .mfui-9-text-field__field{font:small-caption;font-size:19px;line-height:24px}.mfui-9-text-field input::-ms-clear,.mfui-9-text-field input::-ms-reveal{display:none}

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

@@ -68,7 +68,7 @@ export type TextFieldProps = {
     customIcon?: JSX.Element;
     /** Маска для поля. Не работает с textarea=true. */
     /** Дополнительную информацию можно найти на https://github.com/sanniassin/react-input-mask */
-    mask?: string;
+    mask?: string | Array<string | RegExp>;
     /** Разделение символов для маски. Не работает textarea=true */
     maskChar?: string;
     /** Дополнительный класс корневого элемента */
@@ -104,7 +104,7 @@ export type TextFieldProps = {
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */
-    onBeforeMaskChange?: (value: string, newState: IMaskState, oldState: IMaskState) => void;
+    onBeforeMaskChange?: (value: string, newState: IMaskState, oldState: IMaskState, currentState: IMaskState) => void;
     /** Обработчик выхода из фокуса */
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик входа в фокус */

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

@@ -20,37 +20,43 @@ var Hide = function Hide(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M5.82 17.45l-1.65 2.31L5.8 21l1.65-2.3a15.9 15.9 0 002.67 1.3l-.87 2.71 1.92.63.86-2.7a15.64 15.64 0 003 .48V24h2v-2.84a15.64 15.64 0 003-.48l.86 2.7 1.92-.63-.93-2.75a15.9 15.9 0 002.67-1.38L26.2 21l1.63-1.2-1.65-2.31a16.16 16.16 0 001.82-1.8l-1.51-1.35a13.8 13.8 0 01-21 0L4 15.69a16.15 16.15 0 001.82 1.76zM23 11.92l1-1.77a16 16 0 00-16 0l1 1.77a14 14 0 0114 0z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.036 7.588c.553-.55 1.45-.55 2.004 0a1.4 1.4 0 01-.001 1.99l-1.221 1.21c.464.367.907.771 1.324 1.213l2.306 2.441c.74.784.736 1.995-.01 2.774l-2.335 2.437c-3.536 3.69-8.827 4.73-13.353 3.123l-1.646 1.636c-.553.55-1.45.55-2.003 0a1.401 1.401 0 010-1.99L23.036 7.588zm-7.865 11.79c.268.054.545.084.83.084 2.339 0 4.235-1.884 4.235-4.208 0-.282-.03-.558-.083-.824l-4.982 4.949z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.832 12c3.113-3.295 7.619-4.511 11.76-3.65l-2.719 2.699c-2.238.065-4.04 1.855-4.105 4.079L7.06 19.806a12.697 12.697 0 01-.168-.172l-2.334-2.448a2.005 2.005 0 01-.007-2.771l2.28-2.414z"
   }));
 };
 var Show = function Show(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M26 11.69l1.73-2-1.49-1.34-1.82 2.15a15.67 15.67 0 00-2.59-1.34l1.1-2.8-1.86-.73-1.14 2.9A15.53 15.53 0 0017 8.07V5h-2v3.07a15.53 15.53 0 00-2.93.47l-1.14-2.9-1.86.73 1.1 2.8a15.67 15.67 0 00-2.59 1.33L5.76 8.35l-1.52 1.3 1.73 2A19.78 19.78 0 004 13.5L5.46 15A13.72 13.72 0 0116 10a13.55 13.55 0 0110.52 5L28 13.5a19.78 19.78 0 00-2-1.81z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.833 12.31c4.936-5.08 13.373-5.08 18.31 0l2.305 2.373a1.91 1.91 0 01-.01 2.698l-2.335 2.369c-4.933 5.007-13.287 4.999-18.209-.019l-2.335-2.38a1.91 1.91 0 01-.007-2.693l2.28-2.348zM16 10.45a5.55 5.55 0 100 11.101 5.55 5.55 0 000-11.101z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M20 16a4 4 0 10-4 4 4 4 0 004-4zm-6 0a2 2 0 112 2 2 2 0 01-2-2z"
+    d: "M18.824 13.273c0 .753-.633 1.364-1.412 1.364-.78 0-1.412-.611-1.412-1.364 0-.753.632-1.364 1.412-1.364.78 0 1.412.61 1.412 1.364z"
   }));
 };
 var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ClearIcon__st0",
-    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
+    d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
   }));
 };
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+    d: "M11.033 15.1l3.39 3.39 6.817-6.742c.578-.572 1.483-.595 2.02-.051.538.544.504 1.449-.075 2.021l-7.858 7.773c-.576.57-1.476.595-2.015.056L8.95 17.185c-.54-.541-.512-1.446.063-2.021.576-.576 1.48-.604 2.021-.063z"
   }));
 };
 var ResizeIcon = function ResizeIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 12,
-    height: 12
+    height: 12,
+    viewBox: "0 0 12 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M1 11L11 1M7 11l4-4"
   }));
@@ -307,8 +313,9 @@ var TextField = function TextField(_ref) {
   }, [onBlur, clickedElement]);
   var handleBeforeMaskChange = useCallback(function (_ref2) {
     var previousState = _ref2.previousState,
-      nextState = _ref2.nextState;
-    return onBeforeMaskChange === null || onBeforeMaskChange === void 0 ? void 0 : onBeforeMaskChange(nextState.enteredString, nextState, previousState);
+      nextState = _ref2.nextState,
+      currentState = _ref2.currentState;
+    return onBeforeMaskChange === null || onBeforeMaskChange === void 0 ? void 0 : onBeforeMaskChange(nextState.enteredString, nextState, previousState, currentState);
   }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
   var commonParams = _extends(_extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)), {

package/dist/es/components/Tooltip/Tooltip.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-tooltip{opacity:0;pointer-events:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;visibility:hidden;z-index:100}.mfui-9-tooltip_open{opacity:1;pointer-events:all;visibility:visible}.mfui-9-tooltip_paddings_small .mfui-9-tooltip__content{padding:16px}.mfui-9-tooltip_paddings_medium .mfui-9-tooltip__content{padding:24px}.mfui-9-tooltip__content{overflow:hidden;position:relative;z-index:1}.mfui-9-tooltip__content-shadow{bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.mfui-9-tooltip__arrow-container{position:absolute}.mfui-9-tooltip__arrow-wrap{height:13px;width:33px}.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-wrap{z-index:2}.mfui-9-tooltip__arrow{display:-webkit-box;display:-ms-flexbox;display:flex;height:13px;position:absolute;width:33px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-tooltip__arrow svg{position:absolute}.mfui-9-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));fill:var(--base)}.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05));filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05));top:1px}@-moz-document url-prefix(""){.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-inner_top{filter:drop-shadow(0 2px 1px rgba(0,0,0,.05))}}.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-inner path:nth-child(2){fill:var(--stcWhite10)}.mfui-9-tooltip__text{font-size:15px;line-height:24px}@media screen and (max-width:767px){.mfui-9-tooltip__text{font-size:12px;line-height:18px}}.mfui-9-tooltip__text_margin{margin-top:8px}.mfui-9-tooltip__button,.mfui-9-tooltip__close-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding:0}.mfui-9-tooltip__button{background-color:transparent;color:var(--brandGreen);font-family:inherit;font-size:15px;font-weight:500;line-height:18px;-webkit-transition:.3s;transition:.3s}@media screen and (max-width:767px){.mfui-9-tooltip__button{font-size:12px;line-height:14px}}.mfui-9-tooltip__button_margin{margin-top:8px}.mfui-9-tooltip__button:hover{color:var(--buttonHoverGreen)}.mfui-9-tooltip__button:hover .mfui-9-tooltip__button-arrow{fill:var(--buttonHoverGreen)}.mfui-9-tooltip__button:active{color:var(--buttonDown)}.mfui-9-tooltip__button:active .mfui-9-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-9-tooltip__close-button{position:relative;right:-6px;top:-6px;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:12px;float:right;height:24px;justify-content:center;-webkit-transition:.3s;transition:.3s;width:24px}.mfui-9-tooltip__close-button:hover{background-color:var(--spbSky1)}.mfui-9-tooltip__close-button:active{background-color:var(--spbSky2)}.mfui-9-tooltip__close-icon{display:block;height:20px;opacity:.5;width:20px;fill:var(--content)}.mfui-9-tooltip__button-arrow{height:20px;margin-bottom:-2px;min-width:20px;-webkit-transition:.3s;transition:.3s;width:20px;fill:var(--brandGreen)}.mfui-9-tooltip__addititonal-content_margin{margin-top:16px}@media screen and (max-width:767px){.mfui-9-tooltip__addititonal-content_margin{margin-top:12px}}.mfui-9-tooltip_small .mfui-9-tooltip__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-tooltip_small .mfui-9-tooltip__text{font-weight:500}.mfui-9-tooltip_small .mfui-9-tooltip__close-button{top:auto}.mfui-9-tooltip_theme_white .mfui-9-tooltip__content{border:1px solid var(--stcWhite10)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__content,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__title,.mfui-9-tooltip_theme_red .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button,.mfui-9-tooltip_theme_red .mfui-9-tooltip__content,.mfui-9-tooltip_theme_red .mfui-9-tooltip__title{color:var(--stcWhite)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button-arrow,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button-arrow{fill:var(--stcWhite)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:hover,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:hover{color:var(--buttonHoverGrey)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:hover .mfui-9-tooltip__button-arrow,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:hover .mfui-9-tooltip__button-arrow{fill:var(--buttonHoverGrey)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:active,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:active{color:var(--buttonDown)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:active .mfui-9-tooltip__button-arrow,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:active .mfui-9-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__close-button,.mfui-9-tooltip_theme_red .mfui-9-tooltip__close-button{background-color:var(--stcWhite10)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__close-button:hover,.mfui-9-tooltip_theme_red .mfui-9-tooltip__close-button:hover{background-color:var(--stcWhite20)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__close-button:active,.mfui-9-tooltip_theme_red .mfui-9-tooltip__close-button:active{background-color:var(--stcWhite50)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__close-icon,.mfui-9-tooltip_theme_red .mfui-9-tooltip__close-icon{opacity:1;fill:var(--stcWhite)}.mfui-9-tooltip_theme_red .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_red .mfui-9-tooltip__content,.mfui-9-tooltip_theme_red .mfui-9-tooltip__content-shadow{background-color:var(--fury80)}.mfui-9-tooltip_theme_red .mfui-9-tooltip__arrow-inner{fill:var(--fury80)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__content,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__content-shadow{background-color:var(--night)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__arrow-inner{fill:var(--night)}.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(24px);transform:translateX(24px)}.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__arrow-wrap{left:3px}.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__arrow-shadow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mfui-9-tooltip_offset_small[data-popper-placement=right-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=right-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=right-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=right-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=right] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=right] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(15px);transform:translateX(15px)}.mfui-9-tooltip_offset_small[data-popper-placement=right-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=right-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=right] .mfui-9-tooltip__arrow-wrap{left:-6px}.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__arrow-wrap{right:3px}.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__arrow-shadow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.mfui-9-tooltip_offset_small[data-popper-placement=left-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=left-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=left-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=left-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=left] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=left] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(-15px);transform:translateX(-15px)}.mfui-9-tooltip_offset_small[data-popper-placement=left-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=left-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=left] .mfui-9-tooltip__arrow-wrap{right:-6px}.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__arrow-wrap{bottom:13px}.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__arrow-shadow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-tooltip_offset_small[data-popper-placement=top-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=top-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=top-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=top-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=top] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=top] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.mfui-9-tooltip_offset_small[data-popper-placement=top-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=top-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=top] .mfui-9-tooltip__arrow-wrap{bottom:4px}.mfui-9-tooltip[data-popper-placement=bottom-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=bottom-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=bottom-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=bottom-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=bottom] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=bottom] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(24px);transform:translateY(24px)}.mfui-9-tooltip[data-popper-placement=bottom-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=bottom-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=bottom] .mfui-9-tooltip__arrow-wrap{top:13px}.mfui-9-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=bottom] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=bottom] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(15px);transform:translateY(15px)}.mfui-9-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=bottom] .mfui-9-tooltip__arrow-wrap{top:4px}.mfui-9-tooltip[data-popper-escaped=true].mfui-9-tooltip_has-escape{pointer-events:none;visibility:hidden}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-tooltip-container{height:100vh;left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;width:100vw;z-index:100}.mfui-9-tooltip{opacity:0;pointer-events:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;visibility:hidden;z-index:100}.mfui-9-tooltip_open{opacity:1;pointer-events:all;visibility:visible}.mfui-9-tooltip_paddings_small .mfui-9-tooltip__content{padding:16px}.mfui-9-tooltip_paddings_medium .mfui-9-tooltip__content{padding:24px}.mfui-9-tooltip__content{overflow:hidden;position:relative;z-index:1}.mfui-9-tooltip__content-shadow{bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.mfui-9-tooltip__arrow-container{position:absolute}.mfui-9-tooltip__arrow-wrap{height:13px;width:33px}.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-wrap{z-index:2}.mfui-9-tooltip__arrow{display:-webkit-box;display:-ms-flexbox;display:flex;height:13px;position:absolute;width:33px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-tooltip__arrow svg{position:absolute}.mfui-9-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));fill:var(--base)}.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05));filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05));top:1px}@-moz-document url-prefix(""){.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-inner_top{filter:drop-shadow(0 2px 1px rgba(0,0,0,.05))}}.mfui-9-tooltip_theme_white .mfui-9-tooltip__arrow-inner path:nth-child(2){fill:var(--stcWhite10)}.mfui-9-tooltip__text{font-size:15px;line-height:24px}@media screen and (max-width:767px){.mfui-9-tooltip__text{font-size:12px;line-height:18px}}.mfui-9-tooltip__text_margin{margin-top:8px}.mfui-9-tooltip__button{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;font-size:15px;font-weight:500;line-height:18px;padding:0;-webkit-transition:.3s;transition:.3s}@media screen and (max-width:767px){.mfui-9-tooltip__button{font-size:12px;line-height:14px}}.mfui-9-tooltip__button_margin{margin-top:8px}.mfui-9-tooltip__button:hover{color:var(--buttonHoverGreen)}.mfui-9-tooltip__button:hover .mfui-9-tooltip__button-arrow{fill:var(--buttonHoverGreen)}.mfui-9-tooltip__button:active{color:var(--buttonDown)}.mfui-9-tooltip__button:active .mfui-9-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-9-tooltip__close-button{float:right;position:relative;right:-12px;top:-12px}.mfui-9-tooltip__button-arrow{height:20px;margin-bottom:-2px;min-width:20px;-webkit-transition:.3s;transition:.3s;width:20px;fill:var(--brandGreen)}.mfui-9-tooltip__addititonal-content_margin{margin-top:16px}@media screen and (max-width:767px){.mfui-9-tooltip__addititonal-content_margin{margin-top:12px}}.mfui-9-tooltip_small .mfui-9-tooltip__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-tooltip_small .mfui-9-tooltip__text{font-weight:500}.mfui-9-tooltip_small .mfui-9-tooltip__close-button{top:auto}.mfui-9-tooltip_theme_white .mfui-9-tooltip__content{border:1px solid var(--stcWhite10)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__content,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__title,.mfui-9-tooltip_theme_red .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button,.mfui-9-tooltip_theme_red .mfui-9-tooltip__content,.mfui-9-tooltip_theme_red .mfui-9-tooltip__title{color:var(--stcWhite)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button-arrow,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button-arrow{fill:var(--stcWhite)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:hover,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:hover{color:var(--buttonHoverGrey)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:hover .mfui-9-tooltip__button-arrow,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:hover .mfui-9-tooltip__button-arrow{fill:var(--buttonHoverGrey)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:active,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:active{color:var(--buttonDown)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__button:active .mfui-9-tooltip__button-arrow,.mfui-9-tooltip_theme_red .mfui-9-tooltip__button:active .mfui-9-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__close-icon,.mfui-9-tooltip_theme_red .mfui-9-tooltip__close-icon{opacity:1;fill:var(--stcWhite)}.mfui-9-tooltip_theme_red .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_red .mfui-9-tooltip__content,.mfui-9-tooltip_theme_red .mfui-9-tooltip__content-shadow{background-color:var(--fury80)}.mfui-9-tooltip_theme_red .mfui-9-tooltip__arrow-inner{fill:var(--fury80)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__arrow:before,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__content,.mfui-9-tooltip_theme_blue .mfui-9-tooltip__content-shadow{background-color:var(--night)}.mfui-9-tooltip_theme_blue .mfui-9-tooltip__arrow-inner{fill:var(--night)}.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(24px);transform:translateX(24px)}.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__arrow-wrap{left:3px}.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=right-end] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=right-start] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=right] .mfui-9-tooltip__arrow-shadow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mfui-9-tooltip_offset_small[data-popper-placement=right-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=right-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=right-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=right-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=right] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=right] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(15px);transform:translateX(15px)}.mfui-9-tooltip_offset_small[data-popper-placement=right-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=right-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=right] .mfui-9-tooltip__arrow-wrap{left:-6px}.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__arrow-wrap{right:3px}.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=left-end] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=left-start] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=left] .mfui-9-tooltip__arrow-shadow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.mfui-9-tooltip_offset_small[data-popper-placement=left-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=left-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=left-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=left-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=left] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=left] .mfui-9-tooltip__content-shadow{-webkit-transform:translateX(-15px);transform:translateX(-15px)}.mfui-9-tooltip_offset_small[data-popper-placement=left-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=left-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=left] .mfui-9-tooltip__arrow-wrap{right:-6px}.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__arrow-wrap{bottom:13px}.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=top-end] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=top-start] .mfui-9-tooltip__arrow-shadow,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__arrow,.mfui-9-tooltip[data-popper-placement=top] .mfui-9-tooltip__arrow-shadow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-tooltip_offset_small[data-popper-placement=top-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=top-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=top-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=top-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=top] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=top] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.mfui-9-tooltip_offset_small[data-popper-placement=top-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=top-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=top] .mfui-9-tooltip__arrow-wrap{bottom:4px}.mfui-9-tooltip[data-popper-placement=bottom-end] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=bottom-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=bottom-start] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=bottom-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip[data-popper-placement=bottom] .mfui-9-tooltip__content,.mfui-9-tooltip[data-popper-placement=bottom] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(24px);transform:translateY(24px)}.mfui-9-tooltip[data-popper-placement=bottom-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=bottom-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip[data-popper-placement=bottom] .mfui-9-tooltip__arrow-wrap{top:13px}.mfui-9-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-9-tooltip__content-shadow,.mfui-9-tooltip_offset_small[data-popper-placement=bottom] .mfui-9-tooltip__content,.mfui-9-tooltip_offset_small[data-popper-placement=bottom] .mfui-9-tooltip__content-shadow{-webkit-transform:translateY(15px);transform:translateY(15px)}.mfui-9-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-9-tooltip__arrow-wrap,.mfui-9-tooltip_offset_small[data-popper-placement=bottom] .mfui-9-tooltip__arrow-wrap{top:4px}.mfui-9-tooltip[data-popper-escaped=true].mfui-9-tooltip_has-escape{pointer-events:none;visibility:hidden}

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

@@ -44,6 +44,11 @@ export declare const Size: {
     readonly BIG: "big";
 };
 type SizeType = (typeof Size)[keyof typeof Size];
+export declare const Strategy: {
+    readonly ABSOLUTE: "absolute";
+    readonly FIXED: "fixed";
+};
+type StrategyType = (typeof Strategy)[keyof typeof Strategy];
 export interface ITooltipProps {
     /** Цветовая тема */
     colorTheme?: ColorThemeType;
@@ -81,6 +86,10 @@ export interface ITooltipProps {
     isPortal?: boolean;
     /** Рендеринг компонента в указанном селекторе */
     portalSelector?: string;
+    /** Предотвратить появление скролла при рендере тултипа в body */
+    portalPreventScroll?: boolean;
+    /** Определяет позиционирование тултипа  */
+    strategy?: StrategyType;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
+import ButtonClose, { ButtonCloseThemes } from "../Buttons/ButtonClose/ButtonClose";
 import Header from "../Header/Header";
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
@@ -11,21 +12,14 @@ 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"
+    d: "M10.084 5.282a1 1 0 011.414.022l3.61 3.726c.522.54.523 1.4 0 1.94l-3.61 3.726a1 1 0 01-1.436-1.392l2.225-2.297H5.5a1 1 0 010-2h6.8l-2.239-2.31a1 1 0 01.023-1.415z"
   }));
 };
 var ArrowWithContour = function ArrowWithContour(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
-    height: 12
+    height: 12,
+    viewBox: "0 0 32 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -39,7 +33,8 @@ var ArrowWithContour = function ArrowWithContour(props) {
 var Arrow = function Arrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 42,
-    height: 12
+    height: 12,
+    viewBox: "0 0 42 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -85,8 +80,13 @@ export var Size = {
   SMALL: 'small',
   BIG: 'big'
 };
+export var Strategy = {
+  ABSOLUTE: 'absolute',
+  FIXED: 'fixed'
+};
 export var testIdPrefix = 'Tooltip';
 var cn = cnCreate('mfui-9-tooltip');
+var cnContainer = cnCreate('mfui-9-tooltip-container');
 var useState = React.useState,
   useCallback = React.useCallback,
   useEffect = React.useEffect,
@@ -120,6 +120,10 @@ var Tooltip = function Tooltip(_ref) {
     _ref$isPortal = _ref.isPortal,
     isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
     portalSelector = _ref.portalSelector,
+    _ref$portalPreventScr = _ref.portalPreventScroll,
+    portalPreventScroll = _ref$portalPreventScr === void 0 ? false : _ref$portalPreventScr,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
     children = _ref.children,
     _ref$classes = _ref.classes,
     _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
@@ -156,6 +160,7 @@ var Tooltip = function Tooltip(_ref) {
   var portalElem = React.useRef(null);
   var isBigSize = size === Size.BIG;
   var hasTextMargin = !!title && isBigSize;
+  var colorThemeButtonClose = theme === 'white' ? ButtonCloseThemes.WHITE : ButtonCloseThemes.COLOR;
   var clickEvent = useMemo(function () {
     return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
@@ -168,6 +173,7 @@ var Tooltip = function Tooltip(_ref) {
   var options = useMemo(function () {
     return {
       placement: placement,
+      strategy: strategy,
       modifiers: [{
         name: 'arrow',
         options: {
@@ -198,7 +204,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
+  }, [placement, strategy, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
   var _usePopper = usePopper(currentTarget, popperElement, options),
     styles = _usePopper.styles,
     attributes = _usePopper.attributes,
@@ -361,13 +367,11 @@ var Tooltip = function Tooltip(_ref) {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content
     },
     className: cn('content', [contentClassName])
-  }, hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
+  }, hasCloseButton && /*#__PURE__*/React.createElement(ButtonClose, _extends({
     className: cn('close-button', [closeButtonClassName]),
-    type: "button",
+    theme: colorThemeButtonClose,
     onClick: handleCloseButtonClick
-  }), /*#__PURE__*/React.createElement(CancelIcon, {
-    className: cn('close-icon')
-  })), isBigSize && renderedFullContent, !isBigSize && !!text && renderedText), /*#__PURE__*/React.createElement(Tile, {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close))), isBigSize && renderedFullContent, !isBigSize && !!text && renderedText), /*#__PURE__*/React.createElement(Tile, {
     radius: "rounded",
     shadowLevel: "pressed",
     className: cn('content-shadow', [contentShadowClassName]),
@@ -380,6 +384,7 @@ var Tooltip = function Tooltip(_ref) {
   /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
   if (isPortal && !portalElem.current && typeof window !== 'undefined') {
     portalElem.current = document.createElement('div');
+    portalPreventScroll && portalElem.current.setAttribute('class', cnContainer());
     var parent = portalSelector ? document.querySelector(portalSelector) : document.body;
     parent === null || parent === void 0 ? void 0 : parent.appendChild(portalElem.current);
   }

package/dist/es/components/UploadForm/UploadField/UploadField.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;position:relative;width:100%}.mfui-9-upload-field__input{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0);clip-path:inset(100%)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;position:relative;width:100%}.mfui-9-upload-field__input{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0);clip-path:inset(100%)}.mfui-9-upload-field__error-text{color:var(--fury);font-size:12px;line-height:18px;margin-top:4px}

package/dist/es/components/UploadForm/UploadField/UploadField.d.ts

@@ -5,12 +5,14 @@ export interface IUploadDropField {
     className?: string;
     /** Обязательность поля */
     required?: boolean;
+    /** Ошибка обязательности заполнения поля */
+    requiredError?: string | null;
     /** Заблокированное состояние */
     disabled?: boolean;
     /** Действие при выборе файла */
     onChange: (files: File[]) => void;
     /** Дополнительная информация */
-    description?: string;
+    description?: string | string[];
     /** Список допустимых типов файлов для внутреннего input */
     accept?: string;
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -18,6 +20,7 @@ export interface IUploadDropField {
         root?: Record<string, string>;
         input?: Record<string, string>;
         dropArea?: Record<string, string>;
+        errorText?: Record<string, string>;
     };
 }
 declare const UploadField: React.FC<IUploadDropField>;

package/dist/es/components/UploadForm/UploadField/UploadField.js

@@ -15,6 +15,7 @@ var UploadField = function UploadField(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     accept = _ref.accept,
+    requiredError = _ref.requiredError,
     onChange = _ref.onChange,
     description = _ref.description,
     dataAttrs = _ref.dataAttrs;
@@ -34,7 +35,9 @@ var UploadField = function UploadField(_ref) {
     inputRef.current.click();
   }, []);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn([className])
+    className: cn({
+      error: !!requiredError
+    }, [className])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("input", _extends({
     className: cn('input')
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
@@ -45,6 +48,7 @@ var UploadField = function UploadField(_ref) {
     onChange: handleInputChange,
     disabled: disabled
   })), /*#__PURE__*/React.createElement(UploadFieldDropArea, {
+    isRequiredError: !!requiredError,
     description: description,
     required: required,
     disabled: disabled,
@@ -53,6 +57,8 @@ var UploadField = function UploadField(_ref) {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropArea
     }
-  }));
+  }), !!requiredError && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('error-text')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.errorText)), requiredError));
 };
 export default UploadField;

package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-9-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-9-upload-field-drop-area__content{text-align:center}.mfui-9-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-9-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-9-upload-field-drop-area__select-button:focus,.mfui-9-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-9-upload-field-drop-area__mark{color:var(--fury)}.mfui-9-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-9-upload-field-drop-area_dragging *{pointer-events:none}.mfui-9-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__mark{color:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:24px;padding:12px 32px 20px;width:100%}.mfui-9-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-9-upload-field-drop-area__content{text-align:center}.mfui-9-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-9-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-9-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-9-upload-field-drop-area__select-button:focus,.mfui-9-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-9-upload-field-drop-area__mark{color:var(--fury)}.mfui-9-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-9-upload-field-drop-area_dragging *{pointer-events:none}.mfui-9-upload-field-drop-area_error:not(.mfui-9-upload-field-drop-area_dragging){border-color:var(--fury)}.mfui-9-upload-field-drop-area_error:not(.mfui-9-upload-field-drop-area_dragging) .mfui-9-upload-field-drop-area__upload-icon{fill:var(--fury)}.mfui-9-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__mark{color:var(--spbSky3)}