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

package/dist/es/components/Badges/StatusBadge/StatusBadge.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-status-badge__container{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--content);font-weight:400;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-status-badge__text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-status-badge__arrow,.mfui-9-status-badge__icon{height:20px;width:20px}.mfui-9-status-badge__icon{margin-right:2px}@media screen and (min-width:1024px){.mfui-9-status-badge_adaptive .mfui-9-status-badge__container{font-size:15px;line-height:24px}}.mfui-9-status-badge_tooltip .mfui-9-status-badge__container{cursor:pointer}.mfui-9-status-badge__tooltip{width:288px}.mfui-9-status-badge_view_dot .mfui-9-status-badge__container{gap:8px}.mfui-9-status-badge_view_dot .mfui-9-status-badge__container:before{border-radius:50%;content:"";height:8px;width:8px}.mfui-9-status-badge_view_dot.mfui-9-status-badge_tooltip .mfui-9-status-badge__text{-webkit-text-decoration:underline dashed var(--spbSky3);text-decoration:underline dashed var(--spbSky3);text-decoration-thickness:1px;text-underline-offset:3px;-webkit-transition:-webkit-text-decoration .3s ease-out;transition:-webkit-text-decoration .3s ease-out;transition:text-decoration .3s ease-out;transition:text-decoration .3s ease-out,-webkit-text-decoration .3s ease-out}@media (pointer:fine){.mfui-9-status-badge_view_dot.mfui-9-status-badge_tooltip .mfui-9-status-badge__container:hover .mfui-9-status-badge__text{-webkit-text-decoration:underline dashed var(--content);text-decoration:underline dashed var(--content);text-decoration-thickness:1px}.mfui-9-status-badge_view_dot.mfui-9-status-badge_tooltip .mfui-9-status-badge__container:hover:before{-webkit-animation:pulse .8s ease-out;animation:pulse .8s ease-out}}@media screen and (min-width:1024px){.mfui-9-status-badge_view_dot.mfui-9-status-badge_adaptive.mfui-9-status-badge_tooltip .mfui-9-status-badge__text{text-underline-offset:5px}}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_green .mfui-9-status-badge__container:before{background-color:var(--brandGreen)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_blue .mfui-9-status-badge__container:before{background-color:var(--sky)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_gray .mfui-9-status-badge__container:before{background-color:var(--spbSky3)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_orange .mfui-9-status-badge__container:before{background-color:var(--137C)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_red .mfui-9-status-badge__container:before{background-color:var(--fury)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_background_dark .mfui-9-status-badge__container,.mfui-9-status-badge_view_dot.mfui-9-status-badge_background_light .mfui-9-status-badge__container{background-color:var(--base);border:none}.mfui-9-status-badge_view_icon .mfui-9-status-badge__container{border:1px solid var(--spbSky1);border-radius:8px;padding:1px 7px 1px 1px}.mfui-9-status-badge_view_icon .mfui-9-status-badge__arrow{rotate:180deg;-webkit-transition:rotate .3s ease-out,fill .3s ease-out;transition:rotate .3s ease-out,fill .3s ease-out;fill:var(--spbSky3)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_opened .mfui-9-status-badge__arrow{rotate:1turn}@media (pointer:fine){.mfui-9-status-badge_view_icon .mfui-9-status-badge__container:hover .mfui-9-status-badge__arrow{fill:var(--content)}}.mfui-9-status-badge_view_icon.mfui-9-status-badge_tooltip .mfui-9-status-badge__container{padding-right:1px}@media screen and (min-width:1024px){.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive .mfui-9-status-badge__container{border-radius:12px;padding:3px 10px 3px 5px}.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive .mfui-9-status-badge__icon{margin-right:4px}.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive .mfui-9-status-badge__text{margin-top:-1px}.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive.mfui-9-status-badge_tooltip .mfui-9-status-badge__container{padding-right:5px}}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_green .mfui-9-status-badge__icon{fill:var(--brandGreen)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_blue .mfui-9-status-badge__icon{fill:var(--sky)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_gray .mfui-9-status-badge__icon{fill:var(--spbSky3)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_orange .mfui-9-status-badge__icon{fill:var(--137C)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_red .mfui-9-status-badge__icon{fill:var(--fury)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_background_dark .mfui-9-status-badge__container,.mfui-9-status-badge_view_icon.mfui-9-status-badge_background_light .mfui-9-status-badge__container{background-color:var(--base);border:none}@-webkit-keyframes pulse{0%{opacity:1;scale:1}30%{opacity:.7}50%{opacity:1;scale:1.3}70%{opacity:.7}to{opacity:1;scale:1}}@keyframes pulse{0%{opacity:1;scale:1}30%{opacity:.7}50%{opacity:1;scale:1.3}70%{opacity:.7}to{opacity:1;scale:1}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-status-badge__container{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--content);font-weight:400;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-status-badge__container:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-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-status-badge__container:focus{outline:none}.mfui-9-status-badge__text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-status-badge__arrow,.mfui-9-status-badge__icon{height:20px;width:20px}.mfui-9-status-badge__icon{margin-right:2px}@media screen and (min-width:1024px){.mfui-9-status-badge_adaptive .mfui-9-status-badge__container{font-size:15px;line-height:24px}}.mfui-9-status-badge_tooltip .mfui-9-status-badge__container{border-radius:8px;cursor:pointer}.mfui-9-status-badge__tooltip{width:288px}.mfui-9-status-badge_view_dot .mfui-9-status-badge__container{gap:8px}.mfui-9-status-badge_view_dot .mfui-9-status-badge__container:before{border-radius:50%;content:"";height:8px;width:8px}.mfui-9-status-badge_view_dot.mfui-9-status-badge_tooltip .mfui-9-status-badge__text{-webkit-text-decoration:underline dashed var(--spbSky3);text-decoration:underline dashed var(--spbSky3);text-decoration-thickness:1px;text-underline-offset:3px;-webkit-transition:-webkit-text-decoration .3s ease-out;transition:-webkit-text-decoration .3s ease-out;transition:text-decoration .3s ease-out;transition:text-decoration .3s ease-out,-webkit-text-decoration .3s ease-out}@media (pointer:fine){.mfui-9-status-badge_view_dot.mfui-9-status-badge_tooltip .mfui-9-status-badge__container:hover .mfui-9-status-badge__text{-webkit-text-decoration:underline dashed var(--content);text-decoration:underline dashed var(--content);text-decoration-thickness:1px}.mfui-9-status-badge_view_dot.mfui-9-status-badge_tooltip .mfui-9-status-badge__container:hover:before{-webkit-animation:pulse .8s ease-out;animation:pulse .8s ease-out}}@media screen and (min-width:1024px){.mfui-9-status-badge_view_dot.mfui-9-status-badge_adaptive.mfui-9-status-badge_tooltip .mfui-9-status-badge__text{text-underline-offset:5px}}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_green .mfui-9-status-badge__container:before{background-color:var(--brandGreen)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_blue .mfui-9-status-badge__container:before{background-color:var(--sky)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_gray .mfui-9-status-badge__container:before{background-color:var(--spbSky3)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_orange .mfui-9-status-badge__container:before{background-color:var(--137C)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_theme_red .mfui-9-status-badge__container:before{background-color:var(--fury)}.mfui-9-status-badge_view_dot.mfui-9-status-badge_background_dark .mfui-9-status-badge__container,.mfui-9-status-badge_view_dot.mfui-9-status-badge_background_light .mfui-9-status-badge__container{background-color:var(--base);border:none}.mfui-9-status-badge_view_icon .mfui-9-status-badge__container{border:1px solid var(--spbSky1);border-radius:8px;padding:1px 7px 1px 1px}.mfui-9-status-badge_view_icon .mfui-9-status-badge__arrow{rotate:180deg;-webkit-transition:rotate .3s ease-out,fill .3s ease-out;transition:rotate .3s ease-out,fill .3s ease-out;fill:var(--spbSky3)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_opened .mfui-9-status-badge__arrow{rotate:1turn}@media (pointer:fine){.mfui-9-status-badge_view_icon .mfui-9-status-badge__container:hover .mfui-9-status-badge__arrow{fill:var(--content)}}.mfui-9-status-badge_view_icon.mfui-9-status-badge_tooltip .mfui-9-status-badge__container{padding-right:1px}@media screen and (min-width:1024px){.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive .mfui-9-status-badge__container{border-radius:12px;padding:3px 10px 3px 5px}.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive .mfui-9-status-badge__icon{margin-right:4px}.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive .mfui-9-status-badge__text{margin-top:-1px}.mfui-9-status-badge_view_icon.mfui-9-status-badge_adaptive.mfui-9-status-badge_tooltip .mfui-9-status-badge__container{padding-right:5px}}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_green .mfui-9-status-badge__icon{fill:var(--brandGreen)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_blue .mfui-9-status-badge__icon{fill:var(--sky)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_gray .mfui-9-status-badge__icon{fill:var(--spbSky3)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_orange .mfui-9-status-badge__icon{fill:var(--137C)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_theme_red .mfui-9-status-badge__icon{fill:var(--fury)}.mfui-9-status-badge_view_icon.mfui-9-status-badge_background_dark .mfui-9-status-badge__container,.mfui-9-status-badge_view_icon.mfui-9-status-badge_background_light .mfui-9-status-badge__container{background-color:var(--base);border:none}@-webkit-keyframes pulse{0%{opacity:1;scale:1}30%{opacity:.7}50%{opacity:1;scale:1.3}70%{opacity:.7}to{opacity:1;scale:1}}@keyframes pulse{0%{opacity:1;scale:1}30%{opacity:.7}50%{opacity:1;scale:1.3}70%{opacity:.7}to{opacity:1;scale:1}}

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

@@ -8,21 +8,23 @@ var ProfileFullIcon = function ProfileFullIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+    d: "M15.034 9c.552 0 1.004.45.963 1-.334 4.5-2.892 8-5.997 8-3.106 0-5.664-3.5-5.997-8-.041-.55.41-1 .962-1h10.069zM10 2a3.008 3.008 0 013.017 3c0 1.657-1.35 3-3.017 3a3.008 3.008 0 01-3.017-3c0-1.657 1.35-3 3.017-3z"
   }));
 };
 var ArrowIcon = function ArrowIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M13 12l-3-3-3 3-1-1 4-4 4 4z"
+    d: "M9.03 4.892a1.396 1.396 0 011.94 0l3.726 3.61a1 1 0 01-1.392 1.436l-2.297-2.225V14.5a1 1 0 01-2 0V7.7l-2.31 2.238a1 1 0 01-1.393-1.436l3.726-3.61z"
   }));
 };
 var AttentionIcon = function AttentionIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.249 3.014a1.96 1.96 0 013.45-.006l6.045 10.973c.739 1.342-.213 2.999-1.724 2.999H3.979c-1.508 0-2.46-1.651-1.727-2.993L8.25 3.014zM9.999 13a1 1 0 100 2 1 1 0 000-2zm0-7a1 1 0 00-1 1v4a1 1 0 002 0V7a1 1 0 00-1-1z"
   }));
 };
 var CheckInvertIcon = function CheckInvertIcon(props) {
@@ -31,14 +33,16 @@ var CheckInvertIcon = function CheckInvertIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.295 9.467l1.77 1.77 3.66-5.22 1.31.918-4.745 6.79-3.126-3.127 1.131-1.13z"
+    d: "M10 1.5a8.5 8.5 0 110 17 8.5 8.5 0 010-17zm4.312 5.688a.625.625 0 00-.9.005l-4.079 4.23-2.247-2.304a.626.626 0 00-.9 0 .664.664 0 000 .922l2.7 2.769a.628.628 0 00.902-.003l4.528-4.696a.665.665 0 00-.005-.923z"
   }));
 };
 var InfoIcon = function InfoIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm1 8V9H9v6h2z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 1.5a8.5 8.5 0 110 17 8.5 8.5 0 010-17zm0 6.553a1 1 0 00-1 1v5a1 1 0 002 0v-5a1 1 0 00-1-1zM9.898 4.88a1 1 0 100 2 1 1 0 000-2z"
   }));
 };
 var PriceIcon = function PriceIcon(props) {
@@ -47,7 +51,7 @@ var PriceIcon = function PriceIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.75 5.75H11a2.75 2.75 0 010 5.5H9.25V12h3v1.5h-3v1.75h-1.5V13.5h-1V12h1v-.75h-1v-1.5h1v-4zM11 7.25H9.25v2.5H11a1.25 1.25 0 000-2.5z"
+    d: "M9.873 1.498l5.685.58a1.97 1.97 0 011.759 1.76l.582 5.686a1.97 1.97 0 01-.567 1.593l-6.793 6.793a1.97 1.97 0 01-2.786 0l-6.267-6.267a1.97 1.97 0 010-2.786l6.793-6.793a1.971 1.971 0 011.594-.566zm-4 9.61a.5.5 0 00-.706.707l2.828 2.828a.5.5 0 00.707-.707l-2.828-2.828zm8.734-6.058a1 1 0 10-1.414 1.415 1 1 0 001.414-1.415z"
   }));
 };
 var TimerIcon = function TimerIcon(props) {
@@ -56,7 +60,9 @@ var TimerIcon = function TimerIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+    d: "M10.006 3.998c3.857 0 7 3.127 7 6.985 0 3.857-3.143 6.984-7 6.984s-7-3.127-7.001-6.984c0-3.858 3.143-6.985 7-6.985zM10 7.004a.5.5 0 00-.5.5v3.501H7a.5.5 0 000 1h3a.5.5 0 00.5-.5v-4a.5.5 0 00-.5-.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.594 3.124a.514.514 0 01.715 0l2.15 2.105a.487.487 0 010 .7.515.515 0 01-.714 0l-2.15-2.105a.487.487 0 010-.7zM4.92 3.109a.515.515 0 01.716.005.487.487 0 01-.005.698l-2.165 2.09a.514.514 0 01-.715-.004.487.487 0 01.005-.7l2.164-2.09z"
   }));
 };
 var statusIconsMap = {
@@ -118,6 +124,9 @@ var StatusBadge = function StatusBadge(_ref) {
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.container), {
     className: cn('container', [classes === null || classes === void 0 ? void 0 : classes.container]),
     ref: triggerRef
+  }, !!tooltip && {
+    tabIndex: 0,
+    role: 'button'
   }), showIcon && /*#__PURE__*/React.createElement(StatusIconElement, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon), {
     className: cn('icon')
   })), /*#__PURE__*/React.createElement("div", {

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

@@ -12,6 +12,8 @@ export interface ITimerBadgeProps {
     countdownText?: string;
     /** Текст перед таймером в режиме даты. Появляется при hasPrefix=true. */
     expirationDateText?: string;
+    /** Кастомный текст после окончания обратного отсчета */
+    countdownEndText?: string;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data-атрибуты к внутренним элементам */

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

@@ -12,7 +12,9 @@ var TimerIcon = function TimerIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+    d: "M10.006 3.998c3.857 0 7 3.127 7 6.985 0 3.857-3.143 6.984-7 6.984s-7-3.127-7.001-6.984c0-3.858 3.143-6.985 7-6.985zM10 7.004a.5.5 0 00-.5.5v3.501H7a.5.5 0 000 1h3a.5.5 0 00.5-.5v-4a.5.5 0 00-.5-.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.594 3.124a.514.514 0 01.715 0l2.15 2.105a.487.487 0 010 .7.515.515 0 01-.714 0l-2.15-2.105a.487.487 0 010-.7zM4.92 3.109a.515.515 0 01.716.005.487.487 0 01-.005.698l-2.165 2.09a.514.514 0 01-.715-.004.487.487 0 01.005-.7l2.164-2.09z"
   }));
 };
 var SECONDS_IN_HOUR = 3600;
@@ -33,6 +35,8 @@ var TimerBadge = function TimerBadge(_ref) {
     countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
     _ref$expirationDateTe = _ref.expirationDateText,
     expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+    _ref$countdownEndText = _ref.countdownEndText,
+    countdownEndText = _ref$countdownEndText === void 0 ? 'Время действия истекло' : _ref$countdownEndText,
     className = _ref.className,
     dataAttrs = _ref.dataAttrs;
   var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
@@ -74,7 +78,7 @@ var TimerBadge = function TimerBadge(_ref) {
     className: cn('icon')
   })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text')
-  }), isTimeExpired ? 'Время действия истекло' : /*#__PURE__*/React.createElement(Timer, {
+  }), isTimeExpired ? countdownEndText : /*#__PURE__*/React.createElement(Timer, {
     additionalText: hasPrefix ? additionalText : undefined,
     showCountdown: showCountdown,
     expirationDate: expirationDate,

package/dist/es/components/Buttons/Button/Button.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid transparent;border-radius:30px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stcWhite);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;outline:none;overflow:hidden;padding:0 31px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-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-button:focus{outline:none}.mfui-9-button svg{display:block;-webkit-transition:fill .3s;transition:fill .3s}.mfui-9-button_size-all_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-all_extra-small .mfui-9-button__icon,.mfui-9-button_size-all_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-all_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-all_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-all_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-all_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-all_small .mfui-9-button__icon,.mfui-9-button_size-all_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-all_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-all_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-all_medium .mfui-9-button__icon,.mfui-9-button_size-all_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-all_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-all_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-all_large .mfui-9-button__icon,.mfui-9-button_size-all_large .mfui-9-button__icon-arrow,.mfui-9-button_size-all_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-all_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-all_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-all_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-all_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-all_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-all_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-all_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-all_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}@media screen and (min-width:1024px){.mfui-9-button_size-desktop_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-desktop_extra-small .mfui-9-button__icon,.mfui-9-button_size-desktop_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-desktop_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-desktop_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-desktop_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-desktop_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-desktop_small .mfui-9-button__icon,.mfui-9-button_size-desktop_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-desktop_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-desktop_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-desktop_medium .mfui-9-button__icon,.mfui-9-button_size-desktop_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-desktop_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-desktop_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-desktop_large .mfui-9-button__icon,.mfui-9-button_size-desktop_large .mfui-9-button__icon-arrow,.mfui-9-button_size-desktop_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-desktop_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-desktop_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-desktop_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-desktop_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-desktop_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-desktop_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-desktop_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-desktop_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}@media screen and (min-width:1280px){.mfui-9-button_size-wide_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-wide_extra-small .mfui-9-button__icon,.mfui-9-button_size-wide_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-wide_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-wide_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-wide_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-wide_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-wide_small .mfui-9-button__icon,.mfui-9-button_size-wide_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-wide_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-wide_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-wide_medium .mfui-9-button__icon,.mfui-9-button_size-wide_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-wide_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-wide_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-wide_large .mfui-9-button__icon,.mfui-9-button_size-wide_large .mfui-9-button__icon-arrow,.mfui-9-button_size-wide_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-wide_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-wide_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-wide_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-wide_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-wide_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-wide_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-wide_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-wide_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-button_size-tablet_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-tablet_extra-small .mfui-9-button__icon,.mfui-9-button_size-tablet_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-tablet_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-tablet_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-tablet_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-tablet_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-tablet_small .mfui-9-button__icon,.mfui-9-button_size-tablet_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-tablet_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-tablet_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-tablet_medium .mfui-9-button__icon,.mfui-9-button_size-tablet_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-tablet_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-tablet_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-tablet_large .mfui-9-button__icon,.mfui-9-button_size-tablet_large .mfui-9-button__icon-arrow,.mfui-9-button_size-tablet_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-tablet_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-tablet_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-tablet_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-tablet_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-tablet_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-tablet_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-tablet_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-tablet_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}@media screen and (max-width:767px){.mfui-9-button_size-mobile_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-mobile_extra-small .mfui-9-button__icon,.mfui-9-button_size-mobile_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-mobile_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-mobile_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-mobile_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-mobile_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-mobile_small .mfui-9-button__icon,.mfui-9-button_size-mobile_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-mobile_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-mobile_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-mobile_medium .mfui-9-button__icon,.mfui-9-button_size-mobile_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-mobile_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-mobile_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-mobile_large .mfui-9-button__icon,.mfui-9-button_size-mobile_large .mfui-9-button__icon-arrow,.mfui-9-button_size-mobile_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-mobile_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-mobile_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-mobile_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-mobile_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-mobile_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-mobile_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-mobile_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-mobile_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}.mfui-9-button:hover{text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-button:hover svg{-webkit-transition:fill .3s;transition:fill .3s}.mfui-9-button_disabled{cursor:default}.mfui-9-button__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-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;height:inherit;justify-content:center;vertical-align:top;width:100%}.mfui-9-button__text{margin-bottom:2px}.mfui-9-button__subtext{font-size:12px;line-height:14px}.mfui-9-button__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-button__content_ellipsis{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;width:inherit}.mfui-9-button__content_ellipsis .mfui-9-button__subtext,.mfui-9-button__content_ellipsis .mfui-9-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-button__content_show-loader{visibility:hidden}.mfui-9-button__preloader{position:absolute}.mfui-9-button__icon-arrow{height:32px;margin-left:4px;width:32px}.mfui-9-button__text-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.mfui-9-button__text-content .mfui-9-button__text{margin-bottom:0}.mfui-9-button_content-type_icon{padding:0}.mfui-9-button_content-type_icon-text .mfui-9-button__icon,.mfui-9-button_content-type_icon-text:not(.mfui-9-button_type_text) .mfui-9-button__text{margin-right:4px}.mfui-9-button_type_text.mfui-9-button_theme_green{background-color:transparent;color:var(--brandGreen);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_green svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover{color:var(--buttonHoverGreen)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover svg{fill:var(--buttonHoverGreen)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_purple{background-color:transparent;color:var(--brandPurple);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_purple svg{fill:var(--brandPurple)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover{color:var(--buttonHoverPurple)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover svg{fill:var(--buttonHoverPurple)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_white{background-color:transparent;color:var(--stcWhite);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_white svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover{color:var(--buttonHoverGrey)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover svg{fill:var(--buttonHoverGrey)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_black{background-color:transparent;color:var(--stcBlack);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_black svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black{--stcBlack7:#818181}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):hover{color:var(--stcBlack7)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):hover svg{fill:var(--stcBlack7)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_danger{background-color:transparent;color:var(--fury);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_danger svg{fill:var(--fury)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):hover{color:var(--fury80)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):hover svg{fill:var(--fury80)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_primary.mfui-9-button_theme_green{background-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_green svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverGreen)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green:not(.mfui-9-button_loading):active{background-color:var(--buttonDown)}.mfui-9-button_type_primary.mfui-9-button_theme_green-soft{background-color:var(--brandGreen20);border:1px solid rgba(0,185,86,.2);color:var(--brandGreen)}.mfui-9-button_type_primary.mfui-9-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverGreenSoft)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_purple{background-color:var(--brandPurple);color:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_purple svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverPurple)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active{background-color:var(--buttonDown)}.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft{background-color:var(--brandPurple20);border:1px solid rgba(115,25,130,.2);color:var(--brandPurple)}.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft svg{fill:var(--brandPurple)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverPurpleSoft)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_white{background-color:var(--stcWhite);color:var(--stcBlack)}.mfui-9-button_type_primary.mfui-9-button_theme_white svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverGrey);color:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_gray{background-color:var(--spbSky0);color:var(--content)}.mfui-9-button_type_primary.mfui-9-button_theme_gray svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):hover{background-color:var(--spbSky1)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):hover svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):active{background-color:var(--spbSky2)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):active svg{fill:var(--content)}.mfui-9-button_type_primary.mfui-9-button_theme_base{background-color:var(--base);color:var(--content)}.mfui-9-button_type_primary.mfui-9-button_theme_base svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):hover{background-color:var(--spbSky1)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):hover svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_outline.mfui-9-button_theme_green{background-color:transparent;border:1px solid var(--brandGreen);color:var(--brandGreen)}.mfui-9-button_type_outline.mfui-9-button_theme_green svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover{background-color:var(--brandGreen7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green:not(.mfui-9-button_loading):active{background-color:var(--brandGreen14)}.mfui-9-button_type_outline.mfui-9-button_theme_green-soft{background-color:transparent;color:var(--brandGreen)}.mfui-9-button_type_outline.mfui-9-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green-soft{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):hover{background-color:var(--brandGreen7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):active{background-color:var(--brandGreen14)}.mfui-9-button_type_outline.mfui-9-button_theme_purple{background-color:transparent;border:1px solid var(--brandPurple);color:var(--brandPurple)}.mfui-9-button_type_outline.mfui-9-button_theme_purple svg{fill:var(--brandPurple)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_purple{--brandPurple7:rgba(115,25,130,.07);--brandPurple14:rgba(115,25,130,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover{background-color:var(--brandPurple7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active{background-color:var(--brandPurple14)}.mfui-9-button_type_outline.mfui-9-button_theme_white{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite)}.mfui-9-button_type_outline.mfui-9-button_theme_white svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white{--stcWhite7:hsla(0,0%,100%,.07);--stcWhite14:hsla(0,0%,100%,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover{background-color:var(--stcWhite7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white:not(.mfui-9-button_loading):active{background-color:var(--stcWhite14)}.mfui-9-button_type_outline.mfui-9-button_theme_black{background-color:transparent;border:1px solid var(--stcBlack);color:var(--stcBlack)}.mfui-9-button_type_outline.mfui-9-button_theme_black svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_black{--stcBlack7:rgba(51,51,51,.07);--stcBlack14:rgba(51,51,51,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_black:not(.mfui-9-button_loading):hover{background-color:var(--stcBlack7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_black:not(.mfui-9-button_loading):active{background-color:var(--stcBlack14)}.mfui-9-button_full-width{display:block;width:100%}@media screen and (max-width:767px){.mfui-9-button_full-width-mobile{display:block;width:100%}}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_primary.mfui-9-button_disabled{background-color:var(--spbSky1);border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_primary.mfui-9-button_disabled svg{fill:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite50)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled svg{fill:var(--stcWhite50)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_disabled{background-color:transparent;border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_disabled svg{fill:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_disabled{color:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_disabled svg{fill:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled{background-color:transparent;color:var(--stcWhite)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled svg{fill:var(--stcWhite)}

package/dist/es/components/{Button → Buttons/Button}/Button.d.ts

@@ -14,6 +14,8 @@ export declare const ButtonThemes: {
     readonly WHITE: "white";
     readonly BLACK: "black";
     readonly DANGER: "danger";
+    readonly GRAY: "gray";
+    readonly BASE: "base";
 };
 type ButtonThemesType = (typeof ButtonThemes)[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {
@@ -43,6 +45,7 @@ export interface IButtonProps extends Omit<ButtonLinkCommonAttributes, 'classNam
         inner?: Record<string, string>;
         loader?: Record<string, string>;
         text?: Record<string, string>;
+        subtext?: Record<string, string>;
         arrow?: Record<string, string>;
     };
     /** Тема компонента */
@@ -85,6 +88,8 @@ export interface IButtonProps extends Omit<ButtonLinkCommonAttributes, 'classNam
     buttonRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
     /** Обрезать текст при недостаточной ширине и добавлять многоточие */
     ellipsis?: boolean;
+    /** Дополнительный текст */
+    subtext?: string;
     children?: React.ReactNode;
     /** Обработчик клика по кнопке */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;

package/dist/es/components/{Button → Buttons/Button}/Button.js

@@ -5,6 +5,8 @@ import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.object.to-string.js";
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -15,13 +17,13 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import * as React from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
-import Preloader, { PreloaderColors } from "../Preloader/Preloader";
+import Preloader, { PreloaderColors } from "../../Preloader/Preloader";
 import "./Button.css";
 var Arrow = function Arrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
+    d: "M19.996 10.594a1.972 1.972 0 012.79-.032l7.633 7.465a2.759 2.759 0 010 3.946l-7.634 7.465a1.972 1.972 0 11-2.756-2.822l4.732-4.628H10.223a1.973 1.973 0 010-3.947H24.79l-4.761-4.657a1.974 1.974 0 01-.033-2.79z"
   }));
 };
 export var ButtonTypes = {
@@ -36,7 +38,9 @@ export var ButtonThemes = {
   PURPLE_SOFT: 'purple-soft',
   WHITE: 'white',
   BLACK: 'black',
-  DANGER: 'danger'
+  DANGER: 'danger',
+  GRAY: 'gray',
+  BASE: 'base'
 };
 export var ButtonSizes = {
   EXTRA_SMALL: 'extra-small',
@@ -88,19 +92,25 @@ var Button = function Button(_a) {
     showArrow = _a$showArrow === void 0 ? false : _a$showArrow,
     icon = _a.icon,
     disabled = _a.disabled,
+    subtext = _a.subtext,
     children = _a.children,
     _a$ellipsis = _a.ellipsis,
     ellipsis = _a$ellipsis === void 0 ? false : _a$ellipsis,
     onClick = _a.onClick,
     dataAttrs = _a.dataAttrs,
     buttonRef = _a.buttonRef,
-    rest = __rest(_a, ["classes", "className", "theme", "type", "href", "download", "target", "rel", "actionType", "sizeAll", "sizeWide", "sizeDesktop", "sizeTablet", "sizeMobile", "fullWidth", "fullWidthMobile", "showLoader", "showArrow", "icon", "disabled", "children", "ellipsis", "onClick", "dataAttrs", "buttonRef"]);
+    rest = __rest(_a, ["classes", "className", "theme", "type", "href", "download", "target", "rel", "actionType", "sizeAll", "sizeWide", "sizeDesktop", "sizeTablet", "sizeMobile", "fullWidth", "fullWidthMobile", "showLoader", "showArrow", "icon", "disabled", "subtext", "children", "ellipsis", "onClick", "dataAttrs", "buttonRef"]);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTouch = _React$useState2[0],
     setTouch = _React$useState2[1];
   var ElementType = href ? 'a' : 'button';
   var displayArrow = showArrow && !icon;
+  var sizesArray = [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile];
+  var onlyLargeSize = !sizesArray.some(function (size) {
+    return size === ButtonSizes.SMALL || size === ButtonSizes.EXTRA_SMALL || size === ButtonSizes.MEDIUM;
+  });
+  var displaySubtext = onlyLargeSize && !!subtext && !!children && !showArrow && !icon && type !== ButtonTypes.TEXT;
   var handleClick = React.useCallback(function (e) {
     if (disabled) {
       e.preventDefault();
@@ -109,7 +119,10 @@ var Button = function Button(_a) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }, [disabled, onClick]);
   var currentTheme = React.useMemo(function () {
-    return type === ButtonTypes.PRIMARY && theme === ButtonThemes.BLACK ? ButtonThemes.GREEN : theme;
+    if (type === ButtonTypes.PRIMARY && theme === ButtonThemes.BLACK || type !== ButtonTypes.PRIMARY && theme === ButtonThemes.BASE) {
+      return ButtonThemes.GREEN;
+    }
+    return theme;
   }, [type, theme]);
   var loaderWhite = React.useMemo(function () {
     return type === ButtonTypes.PRIMARY && theme === ButtonThemes.GREEN || type === ButtonTypes.PRIMARY && theme === ButtonThemes.PURPLE || type === ButtonTypes.OUTLINE && theme === ButtonThemes.WHITE || type === ButtonTypes.TEXT && theme === ButtonThemes.WHITE;
@@ -124,6 +137,22 @@ var Button = function Button(_a) {
         return PreloaderColors.DEFAULT;
     }
   }, [type, theme, loaderWhite]);
+  var renderedTextContent = React.useMemo(function () {
+    if (!children) {
+      return null;
+    }
+    var renderedText = /*#__PURE__*/React.createElement("span", _extends({
+      className: cn('text')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children);
+    if (displaySubtext) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('text-content')
+      }, renderedText, /*#__PURE__*/React.createElement("span", _extends({
+        className: cn('subtext')
+      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtext)), subtext));
+    }
+    return renderedText;
+  }, [children, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, displaySubtext, subtext]);
   var renderedContent = React.useMemo(function () {
     if (!children && !icon) {
       return null;
@@ -135,14 +164,10 @@ var Button = function Button(_a) {
       }, contentClassName)
     }), icon && /*#__PURE__*/React.createElement("div", {
       className: cn('icon')
-    }, icon), children && /*#__PURE__*/React.createElement("span", _extends({
-      className: cn('text', {
-        ellipsis: ellipsis
-      })
-    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), displayArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
+    }, icon), renderedTextContent, displayArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
       className: cn('icon-arrow')
     }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
-  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, displayArrow]);
+  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, renderedTextContent, displayArrow]);
   var contentType = React.useMemo(function () {
     switch (true) {
       case icon && !children:
@@ -199,7 +224,8 @@ var Button = function Button(_a) {
       loading: showLoader,
       'no-touch': !isTouch,
       'content-type': contentType,
-      'has-arrow': displayArrow
+      'has-arrow': displayArrow,
+      'has-subtext': displaySubtext
     }, classNameValue),
     href: href,
     download: !!href && download,

package/dist/es/components/Buttons/ButtonClose/ButtonClose.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-button-close{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;background-color:transparent;border:none;border-radius:8px;cursor:pointer;height:44px;justify-content:center;outline:none;overflow:hidden;text-decoration:none;width:44px;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mfui-9-button-close:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-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-button-close:focus{outline:none}.mfui-9-button-close__inner{position:relative;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-button-close__inner:before{border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,color,opacity;transition-property:background-color,color,opacity;width:100%}.mfui-9-button-close_size_small .mfui-9-button-close__inner{border-radius:8px}.mfui-9-button-close_size_small .mfui-9-button-close__icon{height:24px;min-width:24px}.mfui-9-button-close_size_medium .mfui-9-button-close__inner{border-radius:12px}.mfui-9-button-close_size_medium .mfui-9-button-close__icon{height:32px;min-width:32px}.mfui-9-button-close_theme_white .mfui-9-button-close__inner{background-color:var(--spbSky0)}.mfui-9-button-close_theme_white .mfui-9-button-close__inner svg{fill:var(--spbSky3)}.mfui-9-button-close_theme_white:hover .mfui-9-button-close__inner{background-color:var(--spbSky1)}.mfui-9-button-close_theme_white:active .mfui-9-button-close__inner{background-color:var(--spbSky2)}.mfui-9-button-close_theme_gray .mfui-9-button-close__inner{background-color:var(--base)}.mfui-9-button-close_theme_gray .mfui-9-button-close__inner svg{fill:var(--spbSky3)}.mfui-9-button-close_theme_gray:hover .mfui-9-button-close__inner{background-color:var(--spbSky1)}.mfui-9-button-close_theme_gray:active .mfui-9-button-close__inner{background-color:var(--spbSky2)}.mfui-9-button-close_theme_soft .mfui-9-button-close__inner svg{opacity:.5;fill:var(--content)}.mfui-9-button-close_theme_soft .mfui-9-button-close__inner:before{background-color:var(--content);opacity:.05}.mfui-9-button-close_theme_soft:hover .mfui-9-button-close__inner:before{background-color:var(--content);opacity:.1}.mfui-9-button-close_theme_soft:active .mfui-9-button-close__inner:before{background-color:var(--content);opacity:.2}.mfui-9-button-close_theme_color .mfui-9-button-close__inner{background-color:var(--stcWhite20)}.mfui-9-button-close_theme_color .mfui-9-button-close__inner svg{fill:var(--stcWhite)}.mfui-9-button-close_theme_color:hover .mfui-9-button-close__inner{background-color:var(--stcWhite50)}.mfui-9-button-close_theme_color:active .mfui-9-button-close__inner{background:hsla(0,0%,100%,.8)}.mfui-9-button-close_theme_black .mfui-9-button-close__inner:before{background-color:var(--base);opacity:.1}.mfui-9-button-close_theme_black .mfui-9-button-close__inner svg{fill:var(--spbSky3)}.mfui-9-button-close_theme_black:hover .mfui-9-button-close__inner:before{background-color:var(--base);opacity:.2}.mfui-9-button-close_theme_black:active .mfui-9-button-close__inner:before{background-color:var(--base);opacity:.5}.mfui-9-button-close_theme_black:active .mfui-9-button-close__inner svg{fill:var(--base)}

package/dist/es/components/Buttons/ButtonClose/ButtonClose.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import './ButtonClose.scss';
+export declare const ButtonCloseThemes: {
+    readonly WHITE: "white";
+    readonly GRAY: "gray";
+    readonly SOFT: "soft";
+    readonly COLOR: "color";
+    readonly BLACK: "black";
+};
+type ButtonCloseThemesType = (typeof ButtonCloseThemes)[keyof typeof ButtonCloseThemes];
+export declare const ButtonCloseSizes: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+};
+type ButtonCloseSizesType = (typeof ButtonCloseSizes)[keyof typeof ButtonCloseSizes];
+type ButtonCloseAttributes = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof React.ButtonHTMLAttributes<HTMLButtonElement>>;
+export interface IButtonCloseProps extends Omit<ButtonCloseAttributes, 'className'> {
+    /** Дополнительный класс корневого элемента */
+    className?: string | string[];
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: Record<string, string>;
+    /** Тема компонента */
+    theme?: ButtonCloseThemesType;
+    /** Размер компонента */
+    size?: ButtonCloseSizesType;
+    /** Отключение кнопки */
+    disabled?: boolean;
+    /** Ссылка на элемент */
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const ButtonClose: React.FC<IButtonCloseProps>;
+export default ButtonClose;

package/dist/es/components/Buttons/ButtonClose/ButtonClose.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./ButtonClose.css";
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+export var ButtonCloseThemes = {
+  WHITE: 'white',
+  GRAY: 'gray',
+  SOFT: 'soft',
+  COLOR: 'color',
+  BLACK: 'black'
+};
+export var ButtonCloseSizes = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+var cn = cnCreate('mfui-9-button-close');
+var ButtonClose = function ButtonClose(_a) {
+  var _a$className = _a.className,
+    className = _a$className === void 0 ? '' : _a$className,
+    _a$theme = _a.theme,
+    theme = _a$theme === void 0 ? 'white' : _a$theme,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? 'small' : _a$size,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    dataAttrs = _a.dataAttrs,
+    buttonRef = _a.buttonRef,
+    rest = __rest(_a, ["className", "theme", "size", "disabled", "onClick", "dataAttrs", "buttonRef"]);
+  var handleClick = React.useCallback(function (e) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }, [disabled, onClick]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: cn({
+      size: size,
+      theme: theme,
+      disabled: disabled
+    }, className),
+    onClick: handleClick,
+    disabled: disabled,
+    ref: buttonRef
+  }, filterDataAttrs(dataAttrs), rest), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('icon')
+  }, /*#__PURE__*/React.createElement(CancelIcon, null))));
+};
+export default ButtonClose;

package/dist/es/components/Calendar/components/_Month/Month.js

@@ -11,18 +11,14 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12 6v8l-5-4z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M8.202 10.465a.609.609 0 010-.907l2.547-2.371c.44-.41 1.251-.1 1.251.476v4.679c0 .575-.811.879-1.25.47l-2.548-2.347z"
   }));
 };
 var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8 14V6l5 4z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M11.798 9.535a.61.61 0 010 .907L9.25 12.813c-.44.41-1.251.1-1.251-.476V7.658c0-.576.811-.879 1.25-.47l2.548 2.347z"
   }));
 };
 var formatDate = function formatDate(date, pattern) {

package/dist/es/components/Carousel/Carousel.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-carousel,.mfui-9-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-9-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-9-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-9-carousel__swiper_gradient:after,.mfui-9-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-9-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(transparent),to(var(--gradientColor)));background:linear-gradient(270deg,transparent 0,var(--gradientColor) 100%);left:0}.mfui-9-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(transparent));background:linear-gradient(270deg,var(--gradientColor) 0,transparent 100%);right:0}.mfui-9-carousel__swiper_gradient-color_default{--gradientColor:var(--background)}.mfui-9-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen)}.mfui-9-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack)}.mfui-9-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0)}.mfui-9-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1)}.mfui-9-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2)}.mfui-9-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-9-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-9-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-9-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-9-carousel__arrow{display:none}}.mfui-9-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-9-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-9-carousel__arrow_locked{display:none}.mfui-9-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-9-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-9-carousel .swiper-pagination-bullet{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;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:width .5s,background-color .3s;transition:width .5s,background-color .3s;width:8px}.mfui-9-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-9-carousel .swiper-pagination-bullet-active{cursor:default;width:20px}.mfui-9-carousel .swiper-pagination-bullet-active:before{border-radius:4px}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-carousel,.mfui-9-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-9-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-9-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-9-carousel__swiper_gradient:after,.mfui-9-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-9-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(rgba(var(--gradientColorRGB),0)),to(var(--gradientColor)));background:linear-gradient(270deg,rgba(var(--gradientColorRGB),0) 0,var(--gradientColor) 100%);left:0}.mfui-9-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(rgba(var(--gradientColorRGB),0)));background:linear-gradient(270deg,var(--gradientColor) 0,rgba(var(--gradientColorRGB),0) 100%);right:0}.mfui-9-carousel__swiper_gradient-color_default{--gradientColor:var(--background);--gradientColorRGB:var(--background-rgb)}.mfui-9-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen);--gradientColorRGB:var(--brandGreen-rgb)}.mfui-9-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack);--gradientColorRGB:var(--stcBlack-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0);--gradientColorRGB:var(--spbSky0-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1);--gradientColorRGB:var(--spbSky1-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2);--gradientColorRGB:var(--spbSky2-rgb)}.mfui-9-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-9-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-9-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}}.mfui-9-carousel__slide:focus{outline:none}@media screen and (min-width:1024px){.mfui-9-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-9-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-9-carousel__arrow{display:none}}.mfui-9-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-9-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-9-carousel__arrow_locked{display:none}.mfui-9-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-9-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-9-carousel .swiper-pagination-bullet{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;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:all .5s,background-color .3s;transition:all .5s,background-color .3s;width:8px}.mfui-9-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-9-carousel .swiper-pagination-bullet-active{cursor:default;-webkit-transform:scaleX(2.3);transform:scaleX(2.3)}.mfui-9-carousel .swiper-pagination-bullet-active:before{border-radius:40%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_prev{right:calc(100% - 20px)}@media screen and (min-width:1280px){.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_prev{right:calc(100% - 20px)}}.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_next{left:calc(100% - 20px)}@media screen and (min-width:1280px){.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_next{left:calc(100% - 20px)}}

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

@@ -22,10 +22,15 @@ declare const GradientTheme: {
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
 };
+export declare const ArrowPosition: {
+    readonly OUTSIDE: "outside";
+    readonly INSIDE: "inside";
+};
 type SlidesPerViewType = (typeof SlidesPerView)[keyof typeof SlidesPerView];
 type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 type EffectThemeType = (typeof EffectTheme)[keyof typeof EffectTheme];
 type GradientThemeType = (typeof GradientTheme)[keyof typeof GradientTheme];
+type ArrowPositionType = (typeof ArrowPosition)[keyof typeof ArrowPosition];
 export type SlidesSettingsType = {
     [key: number]: {
         slidesPerView: number | SlidesPerViewType;
@@ -84,6 +89,8 @@ export interface ICarouselProps {
     disableArrows?: boolean;
     /** Тема стрелок */
     arrowTheme?: ArrowThemeType;
+    /** Позиционирование стрелок */
+    arrowPosition?: ArrowPositionType;
     /** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
     noSwipingSelector?: string;
     /** Свайп к слайду, по которому произведен клик */
@@ -100,6 +107,8 @@ export interface ICarouselProps {
     gradient?: boolean;
     /** Цвет градиента */
     gradientColor?: GradientThemeType;
+    /** Отключить переключение слайдов при фокусе на дочерних элементах */
+    disableChildFocusPropagation?: boolean;
     children?: React.ReactNode;
 }
 declare const Carousel: React.FC<ICarouselProps>;

package/dist/es/components/Carousel/Carousel.js

@@ -70,6 +70,10 @@ var GradientTheme = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2'
 };
+export var ArrowPosition = {
+  OUTSIDE: 'outside',
+  INSIDE: 'inside'
+};
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -127,6 +131,7 @@ var Carousel = function Carousel(_ref) {
     disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
     _ref$arrowTheme = _ref.arrowTheme,
     arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.PURPLE : _ref$arrowTheme,
+    arrowPosition = _ref.arrowPosition,
     noSwipingSelector = _ref.noSwipingSelector,
     children = _ref.children,
     pagination = _ref.pagination,
@@ -139,7 +144,9 @@ var Carousel = function Carousel(_ref) {
     _ref$gradient = _ref.gradient,
     gradient = _ref$gradient === void 0 ? false : _ref$gradient,
     _ref$gradientColor = _ref.gradientColor,
-    gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
+    gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor,
+    _ref$disableChildFocu = _ref.disableChildFocusPropagation,
+    disableChildFocusPropagation = _ref$disableChildFocu === void 0 ? false : _ref$disableChildFocu;
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     swiperInstance = _React$useState2[0],
@@ -252,6 +259,9 @@ var Carousel = function Carousel(_ref) {
   var handleSlideFocus = function handleSlideFocus(index) {
     return function (e) {
       var _a;
+      if (disableChildFocusPropagation && e.target !== e.currentTarget) {
+        return;
+      }
       if (loop) {
         // for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
         // because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
@@ -308,7 +318,8 @@ var Carousel = function Carousel(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
-      'nav-theme': navTheme
+      'nav-theme': navTheme,
+      'arrow-position': arrowPosition
     }, [className, rootClass]),
     onClick: handleRootClick,
     style: gradientStyles
@@ -352,6 +363,7 @@ var Carousel = function Carousel(_ref) {
     return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       key: i,
       className: cn('slide', slideClass),
+      tabIndex: disableChildFocusPropagation ? 0 : undefined,
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
     }), child);