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

package/dist/lib/components/Switcher/Switcher.css

@@ -1 +1,160 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-switcher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-tap-highlight-color:transparent}.mfui-switcher__content{font-size:15px;font-weight:400;line-height:24px;-ms-flex-item-align:center;align-self:center;margin-left:12px}.mfui-switcher__content_size_small{font-size:12px;line-height:18px}.mfui-switcher__content_left{margin-left:0;margin-right:12px}.mfui-switcher__content_left+.mfui-switcher__input{margin-left:auto}.mfui-switcher__pointer{background-color:var(--stcWhite);border-radius:50%;height:24px;left:2px;position:relative;top:2px;-webkit-transition:all .3s;transition:all .3s;width:24px}.mfui-switcher__loader{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.mfui-switcher__loader:before{-webkit-animation:shining .8s linear infinite;animation:shining .8s linear infinite;background:-webkit-gradient(linear,left top,right top,from(var(--spbSky1)),color-stop(16%,var(--spbSky2)),color-stop(33%,var(--spbSky1)),color-stop(50%,var(--spbSky2)),color-stop(66%,var(--spbSky1)),color-stop(82%,var(--spbSky2)),to(var(--spbSky1)));background:linear-gradient(90deg,var(--spbSky1) 0,var(--spbSky2) 16%,var(--spbSky1) 33%,var(--spbSky2) 50%,var(--spbSky1) 66%,var(--spbSky2) 82%,var(--spbSky1) 100%);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:300%}@-webkit-keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.mfui-switcher__timer{background:var(--base);border-radius:50%}.mfui-switcher__timer,.mfui-switcher__timer-icon{height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-switcher__timer-icon{fill:var(--spbSky2)}.mfui-switcher__input{position:relative;-ms-flex-item-align:start;align-self:flex-start;border-radius:15.5px;cursor:pointer;height:28px;min-width:48px;outline:none;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .3s;transition:background-color .3s;width:48px}.mfui-switcher__input,.mfui-switcher__input_disabled{background-color:var(--spbSky1)}.mfui-switcher__input_disabled,.mfui-switcher__input_loaded,.mfui-switcher__input_waiting{cursor:default}.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled){background-color:var(--spbSky2)}.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled){background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled){background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-switcher__input_disabled .mfui-switcher__pointer{background-color:var(--spbSky2)}.mfui-switcher__input_checked .mfui-switcher__pointer{left:22px}.mfui-switcher__input_checked .mfui-switcher__loader:before{background:-webkit-gradient(linear,left top,right top,from(var(--brandGreen)),color-stop(16%,var(--buttonHoverGreen)),color-stop(33%,var(--brandGreen)),color-stop(50%,var(--buttonHoverGreen)),color-stop(66%,var(--brandGreen)),color-stop(82%,var(--buttonHoverGreen)),to(var(--brandGreen)));background:linear-gradient(90deg,var(--brandGreen) 0,var(--buttonHoverGreen) 16%,var(--brandGreen) 33%,var(--buttonHoverGreen) 50%,var(--brandGreen) 66%,var(--buttonHoverGreen) 82%,var(--brandGreen) 100%)}.mfui-switcher_disabled .mfui-switcher__content{color:var(--spbSky3)}.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked),.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled{background-color:var(--spbSky2)}.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked):not(.mfui-switcher__input_disabled):hover,.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled .mfui-switcher__pointer{background-color:var(--spbSky3)}.mfui-switcher_theme_on-gray .mfui-switcher__timer-icon{fill:var(--spbSky3)}
+.mfui-switcher {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-tap-highlight-color: transparent;
+}
+.mfui-switcher__content {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin-left: 12px;
+}
+.mfui-switcher__content_size_small {
+  font-size: 12px;
+  line-height: 18px;
+}
+.mfui-switcher__content_left {
+  margin-right: 12px;
+  margin-left: 0;
+}
+.mfui-switcher__content_left + .mfui-switcher__input {
+  margin-left: auto;
+}
+.mfui-switcher__pointer {
+  position: relative;
+  top: 2px;
+  left: 2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.mfui-switcher__loader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+}
+.mfui-switcher__loader:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300%;
+  height: 100%;
+  background: -webkit-gradient(linear, left top, right top, from(var(--spbSky1)), color-stop(16%, var(--spbSky2)), color-stop(33%, var(--spbSky1)), color-stop(50%, var(--spbSky2)), color-stop(66%, var(--spbSky1)), color-stop(82%, var(--spbSky2)), to(var(--spbSky1)));
+  background: linear-gradient(90deg, var(--spbSky1) 0%, var(--spbSky2) 16%, var(--spbSky1) 33%, var(--spbSky2) 50%, var(--spbSky1) 66%, var(--spbSky2) 82%, var(--spbSky1) 100%);
+  -webkit-animation: shining 0.8s linear infinite;
+          animation: shining 0.8s linear infinite;
+}
+@-webkit-keyframes shining {
+  0% {
+    -webkit-transform: translateX(-33%);
+            transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+@keyframes shining {
+  0% {
+    -webkit-transform: translateX(-33%);
+            transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+.mfui-switcher__timer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--base);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.mfui-switcher__timer-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  fill: var(--spbSky2);
+}
+.mfui-switcher__input {
+  position: relative;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  width: 48px;
+  min-width: 48px;
+  height: 28px;
+  border-radius: 15.5px;
+  overflow: hidden;
+  background-color: var(--spbSky1);
+  outline: none;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.mfui-switcher__input_disabled {
+  background-color: var(--spbSky1);
+}
+.mfui-switcher__input_disabled,
+.mfui-switcher__input_loaded,
+.mfui-switcher__input_waiting {
+  cursor: default;
+}
+.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {
+  background-color: var(--spbSky2);
+}
+.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled) {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled) {
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-switcher__input_disabled .mfui-switcher__pointer {
+  background-color: var(--spbSky2);
+}
+.mfui-switcher__input_checked .mfui-switcher__pointer {
+  left: 22px;
+}
+.mfui-switcher__input_checked .mfui-switcher__loader:before {
+  background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), color-stop(16%, var(--buttonHoverGreen)), color-stop(33%, var(--brandGreen)), color-stop(50%, var(--buttonHoverGreen)), color-stop(66%, var(--brandGreen)), color-stop(82%, var(--buttonHoverGreen)), to(var(--brandGreen)));
+  background: linear-gradient(90deg, var(--brandGreen) 0%, var(--buttonHoverGreen) 16%, var(--brandGreen) 33%, var(--buttonHoverGreen) 50%, var(--brandGreen) 66%, var(--buttonHoverGreen) 82%, var(--brandGreen) 100%);
+}
+.mfui-switcher_disabled .mfui-switcher__content {
+  color: var(--spbSky3);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked),
+.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled {
+  background-color: var(--spbSky2);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked):not(.mfui-switcher__input_disabled):hover {
+  background-color: var(--spbSky3);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled .mfui-switcher__pointer {
+  background-color: var(--spbSky3);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__timer-icon {
+  fill: var(--spbSky3);
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessibilityEventType } from '@megafon/ui-helpers';
-import './Switcher.scss';
+import './Switcher.less';
 export interface ISwitcherProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -28,7 +28,6 @@ export interface ISwitcherProps {
     textPosition?: 'left' | 'right';
     /** Обработчик изменения элемента */
     onChange?: (e: AccessibilityEventType) => void;
-    children?: React.ReactNode;
 }
 declare const Switcher: React.FC<ISwitcherProps>;
 export default Switcher;

package/dist/lib/components/Switcher/Switcher.js

@@ -1,16 +1,26 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var WaitingIcon = function WaitingIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
@@ -20,26 +30,28 @@ var WaitingIcon = function WaitingIcon(props) {
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
   }));
 };
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-switcher');
+
 var Switcher = function Switcher(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    className = _ref.className,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'on-white' : _ref$theme,
-    _ref$checked = _ref.checked,
-    checked = _ref$checked === void 0 ? false : _ref$checked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$showLoader = _ref.showLoader,
-    showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
-    _ref$waiting = _ref.waiting,
-    waiting = _ref$waiting === void 0 ? false : _ref$waiting,
-    children = _ref.children,
-    _ref$textSize = _ref.textSize,
-    textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
-    _ref$textPosition = _ref.textPosition,
-    textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
-    onChange = _ref.onChange;
+      className = _ref.className,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'on-white' : _ref$theme,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$showLoader = _ref.showLoader,
+      showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      _ref$waiting = _ref.waiting,
+      waiting = _ref$waiting === void 0 ? false : _ref$waiting,
+      children = _ref.children,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+      _ref$textPosition = _ref.textPosition,
+      textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
+      onChange = _ref.onChange;
   var isTouch = (0, _uiHelpers.detectTouch)();
   var isLeftContent = !!children && textPosition === 'left';
   var isRightContent = !!children && textPosition === 'right';
@@ -50,6 +62,7 @@ var Switcher = function Switcher(_ref) {
     if (isInteractiveDisabled || !(0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
       return;
     }
+
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   }, [isInteractiveDisabled, onChange]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
@@ -86,4 +99,22 @@ var Switcher = function Switcher(_ref) {
     })
   }, children));
 };
-var _default = exports["default"] = Switcher;
+
+Switcher.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    loader: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  textSize: PropTypes.oneOf(['small', 'medium']),
+  textPosition: PropTypes.oneOf(['left', 'right']),
+  theme: PropTypes.oneOf(['on-white', 'on-gray']),
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  waiting: PropTypes.bool,
+  showLoader: PropTypes.bool,
+  onChange: PropTypes.func
+};
+var _default = Switcher;
+exports["default"] = _default;

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

@@ -4,6 +4,12 @@ export interface ITabProps {
     title?: string;
     /** Иконка таба */
     icon?: React.ReactNode;
+    /** Текст бабла */
+    bubbleTitle?: string | number;
+    /** Наличие бабла нотификации */
+    hasBubble?: boolean;
+    /** Цвет бабла */
+    bubbleColor?: 'green' | 'red';
     /** Ссылка */
     href?: string;
     /** Rel - атрибут тега <a> */

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

@@ -1,17 +1,38 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-/* eslint-disable react/no-unused-prop-types */
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable react/no-unused-prop-types */
 var Tab = function Tab(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-var _default = exports["default"] = Tab;
+
+Tab.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    inner: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
+  title: _propTypes["default"].string,
+  icon: _propTypes["default"].node,
+  href: _propTypes["default"].string,
+  rel: _propTypes["default"].string,
+  renderTabWrapper: _propTypes["default"].func
+};
+var _default = Tab;
+exports["default"] = _default;

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

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