@megafon/ui-core 6.0.0-beta.4 → 6.0.0

package/dist/es/components/TextLink/TextLink.css

@@ -1 +1,50 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-text-link{cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit}.mfui-text-link_underline-visibility_hover.mfui-text-link_underline-style_solid{text-decoration:none}.mfui-text-link_underline-visibility_always.mfui-text-link_underline-style_solid,.mfui-text-link_underline-visibility_hover.mfui-text-link_underline-style_solid:hover{text-decoration:underline}.mfui-text-link_underline-style_dashed{border-bottom:1px dashed;text-decoration:none}.mfui-text-link_underline-style_border{border-bottom:1px solid;text-decoration:none}.mfui-text-link_underline-style_none,.mfui-text-link_underline-style_none:hover{text-decoration:none}.mfui-text-link_color_default{color:var(--content)}.mfui-text-link_color_black{color:var(--stcBlack)}.mfui-text-link_color_white{color:var(--stcWhite)}.mfui-text-link_color_blue{color:var(--systemBlue)}.mfui-text-link_color_green{color:var(--brandGreen)}.mfui-text-link_color_gray{color:var(--spbSky3)}.mfui-text-link_color_inherit{color:inherit}
+.mfui-text-link {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+.mfui-text-link_underline-visibility_hover.mfui-text-link_underline-style_solid {
+  text-decoration: none;
+}
+.mfui-text-link_underline-visibility_hover:hover.mfui-text-link_underline-style_solid {
+  text-decoration: underline;
+}
+.mfui-text-link_underline-visibility_always.mfui-text-link_underline-style_solid {
+  text-decoration: underline;
+}
+.mfui-text-link_underline-style_dashed {
+  border-bottom: 1px dashed;
+  text-decoration: none;
+}
+.mfui-text-link_underline-style_border {
+  border-bottom: 1px solid;
+  text-decoration: none;
+}
+.mfui-text-link_underline-style_none {
+  text-decoration: none;
+}
+.mfui-text-link_underline-style_none:hover {
+  text-decoration: none;
+}
+.mfui-text-link_color_default {
+  color: var(--content);
+}
+.mfui-text-link_color_black {
+  color: var(--stcBlack);
+}
+.mfui-text-link_color_white {
+  color: var(--stcWhite);
+}
+.mfui-text-link_color_blue {
+  color: var(--systemBlue);
+}
+.mfui-text-link_color_green {
+  color: var(--brandGreen);
+}
+.mfui-text-link_color_gray {
+  color: var(--spbSky3);
+}
+.mfui-text-link_color_inherit {
+  color: inherit;
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TextLink.scss';
+import './TextLink.less';
 import { ILinkProps } from '../Link/Link';
 export interface ITextLinkProps extends ILinkProps {
     /** Цвет */
@@ -10,7 +10,7 @@ export interface ITextLinkProps extends ILinkProps {
     underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
     /** Атрибут itemprop для микроразметки */
     itemProp?: string;
-    children?: React.ReactNode;
+    children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
 }
 declare const TextLink: React.FC<ITextLinkProps>;
 export default TextLink;

package/dist/es/components/TextLink/TextLink.js

@@ -1,24 +1,26 @@
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./TextLink.css";
 import Link from "../Link/Link";
 var cn = cnCreate('mfui-text-link');
+
 var TextLink = function TextLink(_ref) {
   var _ref$underlineVisibil = _ref.underlineVisibility,
-    underlineVisibility = _ref$underlineVisibil === void 0 ? 'hover' : _ref$underlineVisibil,
-    _ref$underlineStyle = _ref.underlineStyle,
-    underlineStyle = _ref$underlineStyle === void 0 ? 'solid' : _ref$underlineStyle,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'blue' : _ref$color,
-    className = _ref.className,
-    target = _ref.target,
-    href = _ref.href,
-    rel = _ref.rel,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    download = _ref.download,
-    dataAttrs = _ref.dataAttrs,
-    itemProp = _ref.itemProp;
+      underlineVisibility = _ref$underlineVisibil === void 0 ? 'hover' : _ref$underlineVisibil,
+      _ref$underlineStyle = _ref.underlineStyle,
+      underlineStyle = _ref$underlineStyle === void 0 ? 'solid' : _ref$underlineStyle,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'blue' : _ref$color,
+      className = _ref.className,
+      target = _ref.target,
+      href = _ref.href,
+      rel = _ref.rel,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      download = _ref.download,
+      dataAttrs = _ref.dataAttrs,
+      itemProp = _ref.itemProp;
   return /*#__PURE__*/React.createElement(Link, {
     dataAttrs: dataAttrs,
     target: target,
@@ -34,4 +36,15 @@ var TextLink = function TextLink(_ref) {
     download: download
   }, children);
 };
+
+TextLink.propTypes = {
+  color: PropTypes.oneOf(['default', 'white', 'black', 'gray', 'green', 'blue', 'inherit']),
+  underlineVisibility: PropTypes.oneOf(['hover', 'always']),
+  underlineStyle: PropTypes.oneOf(['solid', 'dashed', 'border', 'none']),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  itemProp: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
+};
 export default TextLink;

package/dist/es/components/Tile/Tile.css

@@ -1 +1,43 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-tile{background-color:var(--base);color:var(--content)}.mfui-tile_radius_rounded{border-radius:12px}.mfui-tile_pointer{cursor:pointer}.mfui-tile_theme_light.mfui-tile_shadow_default{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-tile_theme_light.mfui-tile_shadow_pressed{-webkit-box-shadow:0 2px 8px rgba(0,0,0,.16);box-shadow:0 2px 8px rgba(0,0,0,.16)}.mfui-tile_theme_light.mfui-tile_interactive:hover,.mfui-tile_theme_light.mfui-tile_shadow_hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-tile_theme_dark.mfui-tile_shadow_default{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.16);box-shadow:0 2px 12px rgba(0,0,0,.16)}.mfui-tile_theme_dark.mfui-tile_shadow_pressed{-webkit-box-shadow:0 2px 8px rgba(0,0,0,.2);box-shadow:0 2px 8px rgba(0,0,0,.2)}.mfui-tile_theme_dark.mfui-tile_interactive:hover,.mfui-tile_theme_dark.mfui-tile_shadow_hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.2);box-shadow:0 8px 28px rgba(0,0,0,.2)}.mfui-tile__link{color:inherit}.mfui-tile__link,.mfui-tile__link:hover{text-decoration:none}
+.mfui-tile {
+  color: var(--content);
+  background-color: var(--base);
+}
+.mfui-tile_radius_rounded {
+  border-radius: 12px;
+}
+.mfui-tile_pointer {
+  cursor: pointer;
+}
+.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);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
+}
+.mfui-tile__link {
+  color: inherit;
+}
+.mfui-tile__link,
+.mfui-tile__link:hover {
+  text-decoration: none;
+}

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

@@ -1,22 +1,22 @@
-import * as React from 'react';
-import './Tile.scss';
+import React from 'react';
+import './Tile.less';
 export declare const Theme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-type ThemeType = (typeof Theme)[keyof typeof Theme];
+declare type ThemeType = typeof Theme[keyof typeof Theme];
 export declare const Radius: {
     readonly DEFAULT: "default";
     readonly ROUNDED: "rounded";
 };
-type RadiusType = (typeof Radius)[keyof typeof Radius];
+declare type RadiusType = typeof Radius[keyof typeof Radius];
 export declare const ShadowLevel: {
     readonly ZERO: "zero";
     readonly DEFAULT: "default";
     readonly HOVER: "hover";
     readonly PRESSED: "pressed";
 };
-type ShadowLevelType = (typeof ShadowLevel)[keyof typeof ShadowLevel];
+declare type ShadowLevelType = typeof ShadowLevel[keyof typeof ShadowLevel];
 export interface ITileProps {
     /** Ссылка */
     href?: string;
@@ -38,8 +38,6 @@ export interface ITileProps {
     dataAttrs?: {
         root?: Record<string, string>;
     };
-    /** Дочерний элемент компонента */
-    children?: React.ReactNode;
     /** Обработчик клика */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }

package/dist/es/components/Tile/Tile.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from 'react';
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
 import "./Tile.css";
 export var Theme = {
   LIGHT: 'light',
@@ -17,26 +19,29 @@ export var ShadowLevel = {
   PRESSED: 'pressed'
 };
 var cn = cnCreate('mfui-tile');
+
 var Tile = function Tile(_ref) {
   var href = _ref.href,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'light' : _ref$theme,
-    _ref$shadowLevel = _ref.shadowLevel,
-    shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
-    _ref$radius = _ref.radius,
-    radius = _ref$radius === void 0 ? 'default' : _ref$radius,
-    _ref$isInteractive = _ref.isInteractive,
-    isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
-    onClick = _ref.onClick,
-    dataAttrs = _ref.dataAttrs,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? '_self' : _ref$target,
-    rel = _ref.rel;
+      children = _ref.children,
+      className = _ref.className,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'light' : _ref$theme,
+      _ref$shadowLevel = _ref.shadowLevel,
+      shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 'default' : _ref$radius,
+      _ref$isInteractive = _ref.isInteractive,
+      isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
+      onClick = _ref.onClick,
+      dataAttrs = _ref.dataAttrs,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel;
+
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
+
   var isPointer = !!href || isInteractive;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
@@ -55,4 +60,19 @@ var Tile = function Tile(_ref) {
     rel: rel
   }, children), !href && children);
 };
+
+Tile.propTypes = {
+  href: PropTypes.string,
+  theme: PropTypes.oneOf(Object.values(Theme)),
+  radius: PropTypes.oneOf(Object.values(Radius)),
+  shadowLevel: PropTypes.oneOf(Object.values(ShadowLevel)),
+  className: PropTypes.string,
+  isInteractive: PropTypes.bool,
+  onClick: PropTypes.func,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  target: PropTypes.oneOf(['_self', '_blank']),
+  rel: PropTypes.string
+};
 export default Tile;

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

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