@megafon/ui-core 8.3.0 → 8.5.0

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

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

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

@@ -21,6 +21,22 @@ export declare const NavTheme: {
     readonly DARK: "dark";
 };
 type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
+export declare const PaginationTheme: {
+    readonly DEFAULT: "default";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+export type PaginationThemeType = (typeof PaginationTheme)[keyof typeof PaginationTheme];
+export declare const PaginationButtonType: {
+    readonly DOT: "dot";
+    readonly FLAT: "flat";
+};
+export type PaginationType = (typeof PaginationButtonType)[keyof typeof PaginationButtonType];
+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;
@@ -44,7 +60,17 @@ export interface IBannerProps {
         arrowNext?: Record<string, string>;
         pagination?: Record<string, string>;
         dot?: Record<string, string>;
+        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

@@ -40,6 +40,19 @@ export var NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
+export var PaginationTheme = {
+  DEFAULT: 'default',
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+export var PaginationButtonType = {
+  DOT: 'dot',
+  FLAT: 'flat'
+};
+export var PaginationPositionType = {
+  BOTTOM_OUT: 'bottom-out',
+  TOP_IN: 'top-in'
+};
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -54,6 +67,10 @@ 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,
@@ -236,19 +253,26 @@ 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])
   }), children && React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(BannerDot, {
       className: cn('dot', [classes.dot]),
       dataAttrs: {
-        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1)),
+        svg: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotSvg, i + 1)),
+        inner: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotInner, i + 1))
       },
       key: i,
       index: i,
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
+      type: paginationType,
+      theme: paginationTheme,
       onClick: handleDotClick
     });
   }));

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;justify-content:center;margin:-2px;padding:2px}.mfui-banner-dot:before{background-color:var(--spbSky2);border-radius:4px;content:"";display:block;height:8px;width:8px}.mfui-banner-dot_active{cursor:default}.mfui-banner-dot_active:before{background-color:var(--brandGreen);width:24px}.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active.mfui-banner-dot_timer:before{background-color:var(--spbSky2)}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;position:absolute;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{background-color:var(--spbSky2);border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;position:relative;width:8px}.mfui-banner-dot_active{background-color:var(--brandGreen);cursor:default;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;width:24px}.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active.mfui-banner-dot_has-timer{background-color:var(--spbSky2)}.mfui-banner-dot_type_flat{-webkit-box-flex:1;border-radius:24px;-ms-flex:1 1 auto;flex:1 1 auto;height:2px;width:auto}.mfui-banner-dot_type_flat .mfui-banner-dot__timer{height:100%;width:100%}.mfui-banner-dot_type_flat .mfui-banner-dot__timer-inner{-webkit-animation:timer-reversed linear;animation:timer-reversed linear;height:100%;-webkit-transform:scale(1);transform:scale(1);width:100%}.mfui-banner-dot_theme_light,.mfui-banner-dot_theme_light .mfui-banner-dot__timer{background-color:var(--stcWhite50)}.mfui-banner-dot_theme_light .mfui-banner-dot__timer-inner{fill:var(--stcWhite)}.mfui-banner-dot_theme_light.mfui-banner-dot_active{background-color:var(--stcWhite)}.mfui-banner-dot_theme_light.mfui-banner-dot_has-timer{background-color:transparent}.mfui-banner-dot_theme_dark,.mfui-banner-dot_theme_dark .mfui-banner-dot__timer{background-color:var(--stcBlack10)}.mfui-banner-dot_theme_dark .mfui-banner-dot__timer-inner{fill:var(--stcBlack)}.mfui-banner-dot_theme_dark.mfui-banner-dot_active{background-color:var(--stcBlack)}.mfui-banner-dot_theme_dark.mfui-banner-dot_has-timer{background-color:transparent}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;left:0;position:absolute;top:0;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}@-webkit-keyframes timer-reversed{0%{width:0}to{width:100%}}@keyframes timer-reversed{0%{width:0}to{width:100%}}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type PaginationThemeType, type PaginationType } from './Banner';
 import './BannerDot.scss';
 export interface IBannerDotProps {
     className?: string;
@@ -11,6 +12,8 @@ export interface IBannerDotProps {
         svg?: Record<string, string>;
         inner?: Record<string, string>;
     };
+    type?: PaginationType;
+    theme?: PaginationThemeType;
     onClick: (index: number) => void;
 }
 declare const BannerDot: React.FC<IBannerDotProps>;

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

@@ -1,7 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { PaginationButtonType } from "./Banner";
 import "./BannerDot.css";
+var DOT_VIEW_BOX = '0 0 250 100';
+var DOT_RECT_PROPS = {
+  x: '0',
+  y: '0',
+  width: '250',
+  height: '100',
+  rx: '50',
+  ry: '50'
+};
 var cn = cnCreate('mfui-banner-dot');
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
@@ -10,30 +20,32 @@ var BannerDot = function BannerDot(_ref) {
     isActive = _ref.isActive,
     showTimer = _ref.showTimer,
     timerDelay = _ref.timerDelay,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? PaginationButtonType.DOT : _ref$type,
+    theme = _ref.theme,
     onClick = _ref.onClick;
+  var viewBox = type === PaginationButtonType.DOT ? DOT_VIEW_BOX : undefined;
+  var rectProps = type === PaginationButtonType.DOT ? DOT_RECT_PROPS : {};
+  var hasTimer = showTimer && isActive;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
   }, [onClick, index]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      timer: showTimer
+      type: type,
+      theme: theme,
+      'has-timer': hasTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
+  }), hasTimer && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
     className: cn('timer'),
-    viewBox: "0 0 250 100"
-  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    viewBox: viewBox
+  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), rectProps, {
     className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
-    },
-    x: "0",
-    y: "0",
-    width: "250",
-    height: "100",
-    rx: "50",
-    ry: "50"
+    }
   }))));
 };
 export default BannerDot;

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-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;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-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-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-chip__icon{margin-right:4px}}.mfui-chip_disabled,.mfui-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.mfui-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-chip_disabled .mfui-chip__counter,.mfui-chip_disabled:hover .mfui-chip__counter{color:var(--spbSky2)}.mfui-chip_checked,.mfui-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.mfui-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-chip_checked .mfui-chip__counter,.mfui-chip_checked:hover .mfui-chip__counter{color:var(--stcWhite)}.mfui-chip_checked.mfui-chip_color_black,.mfui-chip_checked.mfui-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.mfui-chip_checked.mfui-chip_color_black:hover svg{fill:var(--base)}.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter{color:var(--base)}.mfui-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-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-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-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-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-chip__icon{margin-right:4px}}.mfui-chip_disabled,.mfui-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.mfui-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-chip_disabled .mfui-chip__counter,.mfui-chip_disabled:hover .mfui-chip__counter{color:var(--spbSky2)}.mfui-chip_checked,.mfui-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.mfui-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-chip_checked .mfui-chip__counter,.mfui-chip_checked:hover .mfui-chip__counter{color:var(--stcWhite)}.mfui-chip_checked.mfui-chip_color_black,.mfui-chip_checked.mfui-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.mfui-chip_checked.mfui-chip_color_black:hover svg{fill:var(--base)}.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter{color:var(--base)}.mfui-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}

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

@@ -14,6 +14,8 @@ export type ChipArrowType = (typeof ChipArrow)[keyof typeof ChipArrow];
 export interface IChipProps {
     /** Идентификатор */
     id: ChipIdType;
+    /** Заголовок */
+    title?: string;
     /** Набор цветов для компонента */
     color?: ChipColorsType;
     /** Отображение в отмеченном (зажатом) состоянии */
@@ -35,6 +37,7 @@ export interface IChipProps {
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         root?: string;
+        checked?: string;
         inner?: string;
         icon?: string;
         counter?: string;

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

@@ -31,6 +31,7 @@ export var ChipArrow = {
 var cn = cnCreate('mfui-chip');
 var Chip = function Chip(_ref) {
   var id = _ref.id,
+    title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$checked = _ref.checked,
@@ -47,6 +48,7 @@ var Chip = function Chip(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
+  var checkedClass = checked ? classes.checked : undefined;
   var handleClick = React.useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
   }, [onClick, id]);
@@ -57,7 +59,7 @@ var Chip = function Chip(_ref) {
       checked: checked,
       disabled: disabled,
       'with-icon': !!icon
-    }, [className, classes.root])
+    }, [className, classes.root, checkedClass])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     disabled: disabled,
     onClick: handleClick,
@@ -66,7 +68,7 @@ var Chip = function Chip(_ref) {
     className: cn('icon', [classes.icon])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
     className: cn('inner', [classes.inner])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
+  }, 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')

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;width:100%}@media screen and (max-width:767px){.mfui-chips{gap:8px}}.mfui-chips_hidden{display:grid;grid-template-columns:repeat(auto-fit,minMax(0,-webkit-min-content));grid-template-columns:repeat(auto-fit,minMax(0,min-content))}
+h1,h2,h3,h4,h5{margin:0}.mfui-chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;width:100%}@media screen and (max-width:767px){.mfui-chips{gap:8px}}.mfui-chips_hidden{display:grid;grid-template-columns:repeat(auto-fit,minMax(0,-webkit-min-content));grid-template-columns:repeat(auto-fit,minMax(0,min-content))}.mfui-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -4,10 +4,16 @@ import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
     items: IChipProps[];
-    /** Значение */
-    value: ChipIdType;
+    /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
+    value?: ChipIdType;
     /** Цвет активного элемента */
     color?: ChipColorsType;
+    /** Горизонтальное выравнивание */
+    align?: 'left' | 'center';
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
+    isScrollable?: boolean;
     /** Количество отображаемых элементов на всех разрешениях экрана */
     visibleItemsCountAll?: number;
     /** Количество отображаемых элементов на разрешении 768 - 1023 */
@@ -22,6 +28,14 @@ export interface IChipsProps {
     onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Chips: React.FC<IChipsProps>;
 export default Chips;

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

@@ -1,13 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.slice.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 { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import throttleTime from "../../constants/throttleTime";
 import Chip from "./Chip";
-import ChipsDropdown from "./components/ChipsDropdown";
+import ChipsDropdown from "./components/ChipsDropdown/ChipsDropdown";
+import ChipsScrollPanel from "./components/ChipsScrollPanel/ChipsScrollPanel";
 import "./Chips.css";
 var DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START,
   DESKTOP_MIDDLE_START = breakpoints.DESKTOP_MIDDLE_START,
@@ -24,12 +35,20 @@ var Chips = function Chips(_ref) {
     visibleItemsCountTablet = _ref.visibleItemsCountTablet,
     visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
     visibleItemsCountWide = _ref.visibleItemsCountWide,
+    _ref$isScrollable = _ref.isScrollable,
+    isScrollable = _ref$isScrollable === void 0 ? false : _ref$isScrollable,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    align = _ref.align,
     onChange = _ref.onChange,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
   var _React$useState = React.useState(value),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedId = _React$useState2[0],
-    setSelectedId = _React$useState2[1];
+    innerSelectedId = _React$useState2[0],
+    setInnerSelectedId = _React$useState2[1];
   var _React$useState3 = React.useState(visibleItemsCountAll),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     visibleItemsCount = _React$useState4[0],
@@ -42,13 +61,40 @@ var Chips = function Chips(_ref) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     hiddenItems = _React$useState8[0],
     setHiddenItems = _React$useState8[1];
+  var _React$useState9 = React.useState(isScrollable && !visibleItemsCount),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    isScrollableMode = _React$useState10[0],
+    setIsScrollableMode = _React$useState10[1];
+  var selectedId = isControlled ? value : innerSelectedId;
   var handleClick = React.useCallback(function (e, id) {
     e.persist();
-    if (id) {
-      setSelectedId(id);
+    if (id && id !== selectedId) {
+      !isControlled && setInnerSelectedId(id);
       onChange === null || onChange === void 0 ? void 0 : onChange(id, e);
     }
-  }, [onChange]);
+  }, [isControlled, onChange, selectedId]);
+  var renderItems = function renderItems() {
+    if (isScrollableMode) {
+      return /*#__PURE__*/React.createElement(ChipsScrollPanel, {
+        value: selectedId,
+        items: visibleItems,
+        color: color,
+        onClick: handleClick
+      });
+    }
+    return visibleItems.map(function (_a) {
+      var id = _a.id,
+        children = _a.children,
+        rest = __rest(_a, ["id", "children"]);
+      return /*#__PURE__*/React.createElement(Chip, _extends({
+        key: id,
+        id: id,
+        checked: id === selectedId,
+        color: color,
+        onClick: handleClick
+      }, rest), !!children && children);
+    });
+  };
   React.useEffect(function () {
     var resizeHandler = function resizeHandler() {
       var windowWidth = window.innerWidth;
@@ -82,19 +128,15 @@ var Chips = function Chips(_ref) {
       setHiddenItems(null);
     }
   }, [items, visibleItemsCount]);
-  return /*#__PURE__*/React.createElement("div", {
+  React.useEffect(function () {
+    setIsScrollableMode(isScrollable && !visibleItemsCount);
+  }, [isScrollable, visibleItemsCount]);
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      hidden: !!hiddenItems
-    }, [className])
-  }, visibleItems.map(function (item) {
-    return /*#__PURE__*/React.createElement(Chip, _extends({
-      key: item.id
-    }, item, {
-      checked: item.id === selectedId,
-      color: color,
-      onClick: handleClick
-    }), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
-  }), !!hiddenItems && /*#__PURE__*/React.createElement(ChipsDropdown, {
+      hidden: !!hiddenItems,
+      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,

package/dist/{lib/components/Chips/components → es/components/Chips/components/ChipsDropdown}/ChipsDropdown.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../Chip';
+import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
     moreTitle: string;
-    value: ChipIdType;
+    value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
     onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;

package/dist/es/components/Chips/components/{ChipsDropdown.js → ChipsDropdown/ChipsDropdown.js}

@@ -5,7 +5,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.to-string.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import Chip from "../Chip";
+import Chip from "../../Chip";
 import "./ChipsDropdown.css";
 var cn = cnCreate('mfui-chips-dropdown');
 var ChipsDropdown = function ChipsDropdown(_ref) {
@@ -71,16 +71,19 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list)), /*#__PURE__*/React.createElement("div", {
     className: cn('list-inner')
   }, items.map(function (item, key) {
+    var children = item.children,
+      title = item.title,
+      icon = item.icon;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: cn('list-item', {
-        'with-icon': !!item.icon
+        'with-icon': !!icon
       }),
       onClick: handleItemClick(item),
       onKeyDown: handleItemClick(item)
-    }, !!(item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement("span", {
+    }, !!icon && /*#__PURE__*/React.createElement("span", {
       className: cn('icon')
-    }, item.icon), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+    }, icon), children || title);
   }))));
 };
 export default ChipsDropdown;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chips-scroll-panel{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.mfui-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;height:100%}@media screen and (max-width:767px){.mfui-chips-scroll-panel__inner{gap:8px}}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import './ChipsScrollPanel.scss';
+export interface IChipsScrollPanelProps {
+    value?: ChipIdType;
+    items: IChipProps[];
+    color: ChipColorsType;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
+}
+declare const ChipsScrollPanel: React.FC<IChipsScrollPanelProps>;
+export default ChipsScrollPanel;

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

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.map.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 } from '@megafon/ui-helpers';
+import Chip from "../../Chip";
+import "./ChipsScrollPanel.css";
+var HALF_DIVIDER = 2;
+var cn = cnCreate('mfui-chips-scroll-panel');
+var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
+  var value = _ref.value,
+    items = _ref.items,
+    color = _ref.color,
+    onClick = _ref.onClick;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentValue = _React$useState2[0],
+    setCurrentValue = _React$useState2[1];
+  var containerRef = React.useRef(null);
+  var checkedItemRef = React.useRef(null);
+  var scrollToActiveItem = React.useCallback(function () {
+    var _a, _b;
+    if (!containerRef.current || !checkedItemRef.current) {
+      return;
+    }
+    var activeItemElement = checkedItemRef.current;
+    var _activeItemElement$ge = activeItemElement.getBoundingClientRect(),
+      itemWidth = _activeItemElement$ge.width;
+    var itemOffsetLeft = activeItemElement.offsetLeft;
+    var panelCenter = containerRef.current.getBoundingClientRect().width / HALF_DIVIDER;
+    var itemCenter = itemWidth / HALF_DIVIDER;
+    var activeItemPosition = itemOffsetLeft - panelCenter + itemCenter;
+    (_b = (_a = containerRef.current).scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, {
+      left: activeItemPosition,
+      behavior: 'smooth'
+    });
+  }, []);
+  var handleClick = React.useCallback(function (e, id) {
+    onClick(e, id);
+    scrollToActiveItem();
+  }, [onClick, scrollToActiveItem]);
+  React.useEffect(function () {
+    var isCurrentValueActual = currentValue === value;
+    if (isCurrentValueActual) {
+      scrollToActiveItem();
+    } else {
+      setCurrentValue(value);
+    }
+  }, [value, currentValue, scrollToActiveItem]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner'),
+    tabIndex: -1
+  }, items.map(function (_a) {
+    var id = _a.id,
+      children = _a.children,
+      rest = __rest(_a, ["id", "children"]);
+    var checked = id === value;
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: cn('slide')
+    }, /*#__PURE__*/React.createElement(Chip, _extends({}, rest, {
+      id: id,
+      checked: checked,
+      color: color,
+      onClick: handleClick,
+      rootRef: checked ? checkedItemRef : null
+    }), children));
+  })));
+};
+export default ChipsScrollPanel;

package/dist/es/components/Modal/_ModalContent/ModalContent.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/es/components/Modal/_ModalContent/ModalContent.js

@@ -97,7 +97,11 @@ var ModalContent = function ModalContent(_ref) {
     }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
     type: "button",
     onClick: onBackButtonClick
-  }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, null) : /*#__PURE__*/React.createElement(ArrowLeft32, null));
+  }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, {
+    className: cn('header-icon')
+  }) : /*#__PURE__*/React.createElement(ArrowLeft32, {
+    className: cn('header-icon')
+  }));
   var renderCloseButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
     className: cn('header-button', {
       close: true,
@@ -105,7 +109,11 @@ var ModalContent = function ModalContent(_ref) {
     }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
     type: "button",
     onClick: onPopupClose
-  }), isSmallIcon ? /*#__PURE__*/React.createElement(Cancel24, null) : /*#__PURE__*/React.createElement(Cancel32, null));
+  }), isSmallIcon ? /*#__PURE__*/React.createElement(Cancel24, {
+    className: cn('header-icon')
+  }) : /*#__PURE__*/React.createElement(Cancel32, {
+    className: cn('header-icon')
+  }));
   var renderHeader = /*#__PURE__*/React.createElement("div", {
     className: cn('header', {
       shadow: showHeaderShadow