@megafon/ui-core 9.0.0-alpha.1 → 9.0.0-alpha.3

package/dist/es/components/Avatar/Avatar.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-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;font-size:15px;font-weight:500;height:40px;justify-content:center;overflow:hidden;width:40px}.mfui-9-avatar__text{display:block}.mfui-9-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-9-avatar__placeholder{opacity:.3}.mfui-9-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-9-avatar_color_green .mfui-9-avatar__placeholder{fill:var(--brandGreen)}.mfui-9-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-avatar_color_gray .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_color_white{background-color:var(--stcWhite);color:var(--spbSky3)}.mfui-9-avatar_color_white .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_size_auto{font-size:inherit;height:100%;width:100%}.mfui-9-avatar_default{display:block}.mfui-9-avatar_default svg{margin:auto}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:15px;font-weight:500;height:40px;justify-content:center;overflow:hidden;width:40px}.mfui-9-avatar__text{display:block}.mfui-9-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-9-avatar__placeholder{opacity:.3}.mfui-9-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-9-avatar_color_green .mfui-9-avatar__placeholder{fill:var(--brandGreen)}.mfui-9-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-avatar_color_gray .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_color_white{background-color:var(--stcWhite);color:var(--spbSky3)}.mfui-9-avatar_color_white .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_size_auto{font-size:inherit;height:100%;width:100%}.mfui-9-avatar_size_small{font-size:12px;height:32px;width:32px}.mfui-9-avatar_default{display:block}.mfui-9-avatar_default svg{margin:auto}

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

@@ -10,7 +10,7 @@ export interface IAvatarProps {
     /** Цвет заливки */
     color?: 'green' | 'gray' | 'white';
     /** Размер (по умолчанию 40х40 пикселей). */
-    size?: 'default' | 'auto';
+    size?: 'default' | 'auto' | 'small';
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/es/components/Banner/Banner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-banner{position:relative}.mfui-9-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-banner .mfui-9-banner__swiper-container{position:relative}.mfui-9-banner__swiper{overflow:hidden}.mfui-9-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-9-banner__slide{height:400px}}.mfui-9-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-9-banner__slide-content{height:100%}}.mfui-9-banner_auto-height .mfui-9-banner__slide{height:auto}.mfui-9-banner .mfui-9-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-9-banner .mfui-9-banner__arrow{display:none}}@media screen and (max-width:1023px){.mfui-9-banner .mfui-9-banner__arrow_theme_white{display:none}}.mfui-9-banner .mfui-9-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-9-banner .mfui-9-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-banner .mfui-9-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-9-banner .mfui-9-banner__arrow_prev{left:20px}}.mfui-9-banner .mfui-9-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-9-banner .mfui-9-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-banner .mfui-9-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-9-banner .mfui-9-banner__arrow_next{right:20px}}.mfui-9-banner .mfui-9-banner__arrow_prev.mfui-9-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-9-banner .mfui-9-banner__arrow_next.mfui-9-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-9-banner_no-touch .mfui-9-banner__arrow_theme_white:hover{scale:1.25}.mfui-9-banner_no-touch .mfui-9-banner__arrow_theme_white:active{scale:1.125}.mfui-9-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;margin-top:32px}.mfui-9-banner__pagination_position_top-in{left:0;margin-top:0;padding:0 24px;position:absolute;top:16px;width:100%}@media screen and (min-width:1280px){.mfui-9-banner__pagination_position_top-in{padding:0 80px}}.mfui-9-banner__pagination_type_flat{gap:4px}@media screen and (min-width:1280px){.mfui-9-banner__pagination_type_flat{gap:10px}}.mfui-9-banner__pagination_align_left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-9-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-9-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-9-banner__pagination_bottom-offset{bottom:72px}}.mfui-9-banner_margin-top{margin-top:24px}.mfui-9-banner_radius_rounded .mfui-9-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-9-banner_show-next-slide .mfui-9-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-9-banner_show-next-slide .mfui-9-banner__slide-content{border-right:none;margin-right:0}.mfui-9-banner_show-next-slide.mfui-9-banner_radius_rounded .mfui-9-banner__slide-content{border-radius:24px}}.mfui-9-banner_background-color_green .mfui-9-banner__swiper{background-color:var(--brandGreen)}.mfui-9-banner_background-color_purple .mfui-9-banner__swiper{background-color:var(--brandPurple)}.mfui-9-banner_background-color_gradient .mfui-9-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-9-banner_background-color_light .mfui-9-banner__swiper{background-color:#f6f2f9}.mfui-9-banner_background-color_spbSky0 .mfui-9-banner__swiper{background-color:var(--spbSky0)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-banner{position:relative}.mfui-9-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-banner .mfui-9-banner__swiper-container{position:relative}.mfui-9-banner__swiper{overflow:hidden}.mfui-9-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-9-banner__slide{height:400px}}.mfui-9-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-9-banner__slide-content{height:100%}}.mfui-9-banner_auto-height .mfui-9-banner__slide{height:auto}.mfui-9-banner .mfui-9-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-9-banner .mfui-9-banner__arrow{display:none}}@media screen and (max-width:1023px){.mfui-9-banner .mfui-9-banner__arrow_theme_white{display:none}}.mfui-9-banner .mfui-9-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-9-banner .mfui-9-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-banner .mfui-9-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-9-banner .mfui-9-banner__arrow_prev{left:20px}}.mfui-9-banner .mfui-9-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-9-banner .mfui-9-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-banner .mfui-9-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-9-banner .mfui-9-banner__arrow_next{right:20px}}.mfui-9-banner .mfui-9-banner__arrow_prev.mfui-9-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-9-banner .mfui-9-banner__arrow_next.mfui-9-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-9-banner_no-touch .mfui-9-banner__arrow_theme_white:hover{scale:1.25}.mfui-9-banner_no-touch .mfui-9-banner__arrow_theme_white:active{scale:1.125}.mfui-9-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;margin-top:32px}.mfui-9-banner__pagination_position_top-in{left:0;margin-top:0;padding:0 24px;position:absolute;top:16px;width:100%}@media screen and (min-width:1280px){.mfui-9-banner__pagination_position_top-in{padding:0 80px}}.mfui-9-banner__pagination_type_flat{gap:4px}@media screen and (min-width:1280px){.mfui-9-banner__pagination_type_flat{gap:10px}}.mfui-9-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-9-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-9-banner__pagination_bottom-offset{bottom:72px}}.mfui-9-banner_margin-top{margin-top:24px}.mfui-9-banner_radius_rounded .mfui-9-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-9-banner_show-next-slide .mfui-9-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-9-banner_show-next-slide .mfui-9-banner__slide-content{border-right:none;margin-right:0}.mfui-9-banner_show-next-slide.mfui-9-banner_radius_rounded .mfui-9-banner__slide-content{border-radius:24px}}.mfui-9-banner_background-color_green .mfui-9-banner__swiper{background-color:var(--brandGreen)}.mfui-9-banner_background-color_purple .mfui-9-banner__swiper{background-color:var(--brandPurple)}.mfui-9-banner_background-color_gradient .mfui-9-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-9-banner_background-color_light .mfui-9-banner__swiper{background-color:#f6f2f9}.mfui-9-banner_background-color_spbSky0 .mfui-9-banner__swiper{background-color:var(--spbSky0)}

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

@@ -36,7 +36,6 @@ export declare const PaginationPositionType: {
     readonly BOTTOM_OUT: "bottom-out";
     readonly TOP_IN: "top-in";
 };
-type PaginationPositionType = (typeof PaginationPositionType)[keyof typeof PaginationPositionType];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -63,14 +62,8 @@ export interface IBannerProps {
         dotSvg?: Record<string, string>;
         dotInner?: Record<string, string>;
     };
-    /** Выравнивание блока пагинации */
-    paginationAlign?: 'center' | 'left';
-    /** Цветовая тема пагинации */
-    paginationTheme?: PaginationThemeType;
     /** Тип кнопок пагинации */
     paginationType?: PaginationType;
-    /** Расположение пагинации */
-    paginationPosition?: PaginationPositionType;
     /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
     withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */

package/dist/es/components/Banner/Banner.js

@@ -22,7 +22,7 @@ try {
   Autoplay = Modules.Autoplay;
 } catch (e) {
   // eslint-disable-next-line no-console
-  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.       \n        For more information about server-side rendering\n        please check the Banner component documentation at:\n        https://ui.megafon.ru/components/banner\n    ");
+  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.\n        For more information about server-side rendering\n        please check the Banner component documentation at:\n        https://ui.megafon.ru/components/banner\n    ");
 }
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
@@ -59,10 +59,7 @@ var Banner = function Banner(_ref) {
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
-    paginationAlign = _ref.paginationAlign,
-    paginationTheme = _ref.paginationTheme,
     paginationType = _ref.paginationType,
-    paginationPosition = _ref.paginationPosition,
     _ref$withPaginationBo = _ref.withPaginationBottomOffset,
     withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
     _ref$autoPlay = _ref.autoPlay,
@@ -73,8 +70,7 @@ var Banner = function Banner(_ref) {
     loop = _ref$loop === void 0 ? false : _ref$loop,
     _ref$pauseOnHover = _ref.pauseOnHover,
     pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
+    backgroundColor = _ref.backgroundColor,
     _ref$radius = _ref.radius,
     radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
     _ref$arrowTheme = _ref.arrowTheme,
@@ -130,6 +126,19 @@ var Banner = function Banner(_ref) {
   var dotTimerDelay = delay / 1000;
   var arrowSize = arrowTheme === ArrowTheme.WHITE ? ArrowSize.LARGE : ArrowSize.MIDDLE;
   var rootRef = React.useRef(null);
+  var paginationPosition = paginationType === PaginationButtonType.FLAT ? PaginationPositionType.TOP_IN : PaginationPositionType.BOTTOM_OUT;
+  var getPaginationTheme = function getPaginationTheme() {
+    switch (backgroundColor) {
+      case BackgroundColor.GREEN:
+      case BackgroundColor.PURPLE:
+        return PaginationTheme.LIGHT;
+      case BackgroundColor.LIGHT:
+      case BackgroundColor.GRADIENT:
+        return PaginationTheme.DARK;
+      default:
+        return PaginationTheme.DEFAULT;
+    }
+  };
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
       autoplay = _ref2.autoplay;
@@ -249,7 +258,6 @@ var Banner = function Banner(_ref) {
   var renderPagination = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
       type: paginationType,
-      align: paginationAlign,
       position: paginationPosition,
       'bottom-offset': withPaginationBottomOffset
     }, [classes.pagination])
@@ -267,7 +275,7 @@ var Banner = function Banner(_ref) {
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
       type: paginationType,
-      theme: paginationTheme,
+      theme: getPaginationTheme(),
       onClick: handleDotClick
     });
   }));

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:none;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 32px;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 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 16px}.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 24px}.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 8px}.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 24px}.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_type_text{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 16px}.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 24px}.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 8px}.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 24px}.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_type_text{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 16px}.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 24px}.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 8px}.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 24px}.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_type_text{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 16px}.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 24px}.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 8px}.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 24px}.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_type_text{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 16px}.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 24px}.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 8px}.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 24px}.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_type_text{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__text_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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_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_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_type_primary.mfui-9-button_theme_gray .mfui-9-button__content,.mfui-9-button_type_primary.mfui-9-button_theme_gray svg{opacity:.8}.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{opacity:.8;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{opacity:.8;fill:var(--content)}.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/{lib/components → es/components/Buttons}/Button/Button.d.ts

@@ -14,6 +14,7 @@ export declare const ButtonThemes: {
     readonly WHITE: "white";
     readonly BLACK: "black";
     readonly DANGER: "danger";
+    readonly GRAY: "gray";
 };
 type ButtonThemesType = (typeof ButtonThemes)[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {

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

@@ -15,7 +15,7 @@ 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({
@@ -36,7 +36,8 @@ export var ButtonThemes = {
   PURPLE_SOFT: 'purple-soft',
   WHITE: 'white',
   BLACK: 'black',
-  DANGER: 'danger'
+  DANGER: 'danger',
+  GRAY: 'gray'
 };
 export var ButtonSizes = {
   EXTRA_SMALL: 'extra-small',

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:30px;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__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,70 @@
+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", {
+    className: "CancelIcon__st0",
+    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
+  }));
+};
+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/Chips/Chips/Chip.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip.mfui-9-chip_theme_gray{background-color:var(--spbSky1)}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_disabled.mfui-9-chip_theme_gray,.mfui-9-chip_disabled.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky1)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}

package/dist/es/components/Chips/Chips/Chip.d.ts

@@ -6,6 +6,11 @@ export declare const ChipColors: {
     readonly BLACK: "black";
 };
 export type ChipColorsType = (typeof ChipColors)[keyof typeof ChipColors];
+export declare const ChipThemes: {
+    readonly WHITE: "white";
+    readonly GRAY: "gray";
+};
+export type ChipsThemeType = (typeof ChipThemes)[keyof typeof ChipThemes];
 export declare const ChipArrow: {
     readonly UP: "up";
     readonly DOWN: "down";
@@ -16,8 +21,10 @@ export interface IChipProps {
     id: ChipIdType;
     /** Заголовок */
     title?: string;
-    /** Набор цветов для компонента */
+    /** Цвет активного элемента компонента */
     color?: ChipColorsType;
+    /** Цвета неактивных элементов компонента */
+    theme?: ChipsThemeType;
     /** Отображение в отмеченном (зажатом) состоянии */
     checked?: boolean;
     /** Отключенное состояние */
@@ -41,6 +48,7 @@ export interface IChipProps {
         inner?: string;
         icon?: string;
         counter?: string;
+        arrow?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Chips/Chips/Chip.js

@@ -24,6 +24,10 @@ export var ChipColors = {
   DEFAULT: 'default',
   BLACK: 'black'
 };
+export var ChipThemes = {
+  WHITE: 'white',
+  GRAY: 'gray'
+};
 export var ChipArrow = {
   UP: 'up',
   DOWN: 'down'
@@ -34,6 +38,8 @@ var Chip = function Chip(_ref) {
     title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'white' : _ref$theme,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     _ref$disabled = _ref.disabled,
@@ -56,6 +62,7 @@ var Chip = function Chip(_ref) {
     type: "button",
     className: cn({
       color: color,
+      theme: theme,
       checked: checked,
       disabled: disabled,
       'with-icon': !!icon
@@ -71,7 +78,7 @@ var Chip = function Chip(_ref) {
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children || title), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
     className: cn('counter', [classes.counter])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.counter)), counterValue), !!arrow && /*#__PURE__*/React.createElement("div", _extends({
-    className: cn('icon-arrow')
+    className: cn('icon-arrow', [classes.arrow])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 export default Chip;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from './Chip';
+import { DropdownItemsPaddingType } from '../../Dropdown/Dropdown';
+import { ChipColorsType, ChipIdType, IChipProps, ChipsThemeType } from './Chip';
 import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
@@ -8,6 +9,8 @@ export interface IChipsProps {
     value?: ChipIdType;
     /** Цвет активного элемента */
     color?: ChipColorsType;
+    /** Цвет неактивных элементов */
+    theme?: ChipsThemeType;
     /** Горизонтальное выравнивание */
     align?: 'left' | 'center';
     /** Переводит компонент в контролируемое состояние */
@@ -24,6 +27,10 @@ export interface IChipsProps {
     visibleItemsCountWide?: number;
     /** Название дополнительной кнопки */
     moreTitle?: string;
+    /** Попап выпадающего списка короче в высоту */
+    isDropdownShort?: boolean;
+    /** Отступы элементов списка выпадающего списка */
+    dropdownPaddings?: DropdownItemsPaddingType;
     /** Обработчик изменения значения */
     onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
@@ -32,13 +39,17 @@ export interface IChipsProps {
     classes?: {
         root?: string;
         dropdown?: string;
+        dropdownPopup?: string;
         dropdownList?: string;
+        dropdownItem?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         dropdown?: Record<string, string>;
+        dropdownPopup?: Record<string, string>;
         dropdownList?: Record<string, string>;
+        dropdownItem?: Record<string, string>;
     };
 }
 declare const Chips: React.FC<IChipsProps>;

package/dist/es/components/Chips/Chips/Chips.js

@@ -29,8 +29,13 @@ var Chips = function Chips(_ref) {
     value = _ref.value,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'white' : _ref$theme,
     _ref$moreTitle = _ref.moreTitle,
     moreTitle = _ref$moreTitle === void 0 ? 'Еще' : _ref$moreTitle,
+    _ref$isDropdownShort = _ref.isDropdownShort,
+    isDropdownShort = _ref$isDropdownShort === void 0 ? false : _ref$isDropdownShort,
+    dropdownPaddings = _ref.dropdownPaddings,
     visibleItemsCountAll = _ref.visibleItemsCountAll,
     visibleItemsCountTablet = _ref.visibleItemsCountTablet,
     visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
@@ -79,6 +84,7 @@ var Chips = function Chips(_ref) {
         value: selectedId,
         items: visibleItems,
         color: color,
+        theme: theme,
         onClick: handleClick
       });
     }
@@ -91,6 +97,7 @@ var Chips = function Chips(_ref) {
         id: id,
         checked: id === selectedId,
         color: color,
+        theme: theme,
         onClick: handleClick
       }, rest), !!children && children);
     });
@@ -137,19 +144,26 @@ var Chips = function Chips(_ref) {
       align: align
     }, [className, classes.root])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderItems(), !!hiddenItems && /*#__PURE__*/React.createElement(ChipsDropdown, {
-    value: selectedId,
     items: hiddenItems,
-    moreTitle: moreTitle,
     color: color,
-    onClick: handleClick,
+    theme: theme,
+    moreTitle: moreTitle,
+    "short": isDropdownShort,
+    value: selectedId,
+    paddings: dropdownPaddings,
     classes: {
       root: classes.dropdown,
-      list: classes.dropdownList
+      popup: classes.dropdownPopup,
+      list: classes.dropdownList,
+      item: classes.dropdownItem
     },
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdown,
-      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList
-    }
+      popup: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownPopup,
+      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList,
+      item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownItem
+    },
+    onClick: handleClick
   }));
 };
 export default Chips;

package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.mfui-9-chips-dropdown__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:block;left:0;position:absolute;top:100%;z-index:100}.mfui-9-chips-dropdown__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:320px;max-width:256px;overflow-wrap:normal;overflow-y:auto;padding:16px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar{width:16px}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--spbSky2);border:6px solid transparent;border-radius:16px}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar-thumb:hover{background-color:var(--spbSky3)}.mfui-9-chips-dropdown__list-item{background-color:transparent;border-radius:12px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;padding:12px 32px}.mfui-9-chips-dropdown__list-item:hover{background-color:var(--spbSky0)}.mfui-9-chips-dropdown__list-item_with-icon{padding-left:16px;padding-right:16px}.mfui-9-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-9-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.mfui-9-chips-dropdown__arrow{-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s}.mfui-9-chips-dropdown__arrow_open{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-chips-dropdown__dropdown{max-width:256px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mfui-9-chips-dropdown__list-item{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-9-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}

package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.d.ts

@@ -1,20 +1,28 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import { DropdownItemsPaddingType } from '../../../../Dropdown/Dropdown';
+import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
-    moreTitle: string;
-    value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
-    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    theme: ChipsThemeType;
+    moreTitle: string;
+    short: boolean;
+    value?: ChipIdType;
+    paddings?: DropdownItemsPaddingType;
     classes?: {
         root?: string;
+        popup?: string;
         list?: string;
+        item?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;
+        popup?: Record<string, string>;
         list?: Record<string, string>;
+        item?: Record<string, string>;
     };
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
 }
 declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
 export default ChipsDropdown;