@megafon/ui-core 9.2.2 → 9.3.0

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-promo-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--stcWhite);padding:4px 12px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-promo-badge_color_berry{background-color:var(--berry)}.mfui-9-promo-badge_color_brand-purple-20{background-color:var(--brandPurple20);color:var(--brandPurple)}.mfui-9-promo-badge_color_brand-purple{background-color:var(--brandPurple)}.mfui-9-promo-badge_color_night{background-color:var(--night)}.mfui-9-promo-badge_color_sky{background-color:var(--sky)}.mfui-9-promo-badge_color_flamingo{background-color:var(--flamingo)}.mfui-9-promo-badge_color_gradient-purple{background:var(--gradientPurple1);color:var(--stcWhite)}.mfui-9-promo-badge_color_gray{background:var(--spbSky1);color:var(--content)}.mfui-9-promo-badge_size_small{border-radius:8px;height:18px;padding:0 8px}.mfui-9-promo-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-promo-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--stcWhite);padding:3px 10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-promo-badge_color_berry{background-color:var(--berry)}.mfui-9-promo-badge_color_brand-purple-20{background-color:var(--brandPurple20);color:var(--brandPurple)}.mfui-9-promo-badge_color_brand-purple{background-color:var(--brandPurple)}.mfui-9-promo-badge_color_night{background-color:var(--night)}.mfui-9-promo-badge_color_sky{background-color:var(--sky)}.mfui-9-promo-badge_color_flamingo{background-color:var(--flamingo)}.mfui-9-promo-badge_color_gradient-purple{background:var(--gradientPurple1);color:var(--stcWhite)}.mfui-9-promo-badge_color_gray{background:var(--spbSky0);color:var(--content)}.mfui-9-promo-badge_color_white{background:var(--base);color:var(--content)}.mfui-9-promo-badge_icon{padding:3px 8px}.mfui-9-promo-badge_size_small{border-radius:8px;height:20px;padding:0 8px}.mfui-9-promo-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px}.mfui-9-promo-badge__text_size_small{font-size:10px;line-height:12px}.mfui-9-promo-badge__icon{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:4px}.mfui-9-promo-badge__icon_size_small{margin-left:-4px;margin-right:2px}

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

@@ -9,6 +9,7 @@ export declare const PromoBadgeColors: {
     readonly FLAMINGO: "flamingo";
     readonly GRADIENT_PURPLE: "gradient-purple";
     readonly GRAY: "gray";
+    readonly WHITE: "white";
 };
 type PromoBadgeColorsType = (typeof PromoBadgeColors)[keyof typeof PromoBadgeColors];
 export declare const PromoBadgeSize: {
@@ -16,11 +17,17 @@ export declare const PromoBadgeSize: {
     readonly MEDIUM: "medium";
 };
 type PromoBadgeSizeType = (typeof PromoBadgeSize)[keyof typeof PromoBadgeSize];
+export declare const PromoBadgeIcon: {
+    readonly PERSONAL: "personal";
+};
+type PromoBadgeIconType = (typeof PromoBadgeIcon)[keyof typeof PromoBadgeIcon];
 export interface IPromoBadgeProps {
     /** Цвет промо-бэйджа */
     color?: PromoBadgeColorsType;
     /** Размер промо-бэйджа */
     size?: PromoBadgeSizeType;
+    /** Иконка промо-бэйджа */
+    icon?: PromoBadgeIconType;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data-атрибуты к внутренним элементам */

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

@@ -1,7 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./PromoBadge.css";
+var PersonalIcon = function PersonalIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 14,
+    height: 14,
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.287 7.7a.2.2 0 01.193.15l.26 1.036c.053.215.071.278.102.326a.4.4 0 00.12.121c.05.03.112.049.327.103l1.035.258a.2.2 0 010 .387l-1.035.259c-.215.054-.278.072-.326.102a.4.4 0 00-.121.121c-.03.049-.049.112-.103.327l-.259 1.035a.2.2 0 01-.385 0l-.26-1.035c-.053-.216-.072-.278-.103-.327a.397.397 0 00-.12-.12c-.048-.031-.11-.05-.326-.103l-1.035-.259a.2.2 0 01-.151-.193.2.2 0 01.151-.194l1.035-.258c.215-.054.278-.072.326-.103a.398.398 0 00.12-.121c.031-.048.05-.11.104-.326l.259-1.035a.199.199 0 01.192-.15zM8.75 2.45c.146 0 .273.1.309.241l.414 1.657c.086.345.115.445.165.522.05.077.115.143.192.192.077.05.178.08.522.166l1.657.414a.318.318 0 010 .617l-1.657.414c-.344.086-.445.115-.522.165a.636.636 0 00-.192.192c-.05.078-.08.178-.165.523l-.414 1.656a.318.318 0 01-.618 0l-.414-1.656c-.086-.345-.115-.445-.165-.523a.636.636 0 00-.192-.192c-.077-.05-.178-.079-.523-.165l-1.656-.414a.318.318 0 010-.617l1.656-.414c.345-.087.446-.116.523-.165a.636.636 0 00.192-.193c.05-.077.08-.177.165-.522l.414-1.657a.318.318 0 01.309-.24zM4.2 1.4c.058 0 .109.04.123.096l.166.663c.035.138.046.178.066.21.02.03.046.057.077.076.03.02.071.031.209.066l.663.166a.128.128 0 010 .247l-.663.165c-.138.034-.178.047-.21.066a.256.256 0 00-.076.077c-.02.031-.031.071-.066.208l-.166.664a.127.127 0 01-.247 0l-.165-.664c-.034-.137-.047-.177-.066-.208a.254.254 0 00-.077-.077c-.031-.02-.071-.032-.21-.066l-.662-.165a.127.127 0 010-.247l.663-.166c.137-.035.178-.046.209-.066a.257.257 0 00.077-.077c.02-.03.032-.071.066-.209l.165-.663A.128.128 0 014.2 1.4z",
+    fill: "url(#PersonalIcon__paint0_linear_30332_1078)"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "PersonalIcon__paint0_linear_30332_1078",
+    x1: 11.873,
+    y1: 2.079,
+    x2: 6.33,
+    y2: 3.363,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#3CB9FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#AA5AFF"
+  }))));
+};
 export var PromoBadgeColors = {
   BERRY: 'berry',
   BRAND_PURPLE_20: 'brand-purple-20',
@@ -10,28 +36,42 @@ export var PromoBadgeColors = {
   SKY: 'sky',
   FLAMINGO: 'flamingo',
   GRADIENT_PURPLE: 'gradient-purple',
-  GRAY: 'gray'
+  GRAY: 'gray',
+  WHITE: 'white'
 };
 export var PromoBadgeSize = {
   SMALL: 'small',
   MEDIUM: 'medium'
 };
+export var PromoBadgeIcon = {
+  PERSONAL: 'personal'
+};
+var iconMap = _defineProperty({}, PromoBadgeIcon.PERSONAL, PersonalIcon);
 var cn = cnCreate('mfui-9-promo-badge');
 var PromoBadge = function PromoBadge(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? PromoBadgeColors.SKY : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? PromoBadgeSize.MEDIUM : _ref$size,
+    icon = _ref.icon,
     className = _ref.className,
     children = _ref.children,
     dataAttrs = _ref.dataAttrs;
+  var IconComponent = icon ? iconMap[icon] : null;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
-      size: size
+      size: size,
+      icon: !!IconComponent
     }, className)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn('text')
+  }), IconComponent && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon', {
+      size: size
+    })
+  }, /*#__PURE__*/React.createElement(IconComponent, null)), /*#__PURE__*/React.createElement("span", {
+    className: cn('text', {
+      size: size
+    })
   }, children));
 };
 export default PromoBadge;

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:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-chip:focus{outline:none}.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_theme_gray{background-color:var(--spbSky1)}.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.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}}
+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;-webkit-box-pack:center;-ms-flex-pack:center;border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);justify-content:center;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:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-chip:focus{outline:none}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.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;margin:2px 0;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;-webkit-transition:fill .3s;transition:fill .3s;width:100%;fill:var(--content)}.mfui-9-chip__icon-arrow{-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s}.mfui-9-chip_with-icon .mfui-9-chip__inner{margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip_with-icon .mfui-9-chip__inner{margin-left:4px}}.mfui-9-chip_with-arrow{padding-right:14px}@media screen and (max-width:767px){.mfui-9-chip_with-arrow{padding-right:6px}}.mfui-9-chip_type_filter .mfui-9-chip__counter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:32px;font-size:12px;height:24px;justify-content:center;line-height:14px;min-width:24px;padding:0 4px 2px}@media screen and (min-width:768px){.mfui-9-chip_type_filter .mfui-9-chip__counter{height:32px;min-width:32px;padding-left:6px;padding-right:6px}}.mfui-9-chip_type_default .mfui-9-chip__icon svg{fill:var(--spbSky3)}.mfui-9-chip_theme_white{background-color:var(--spbSky0)}.mfui-9-chip_theme_gray,.mfui-9-chip_theme_white.mfui-9-chip_opened,.mfui-9-chip_theme_white:hover{background-color:var(--spbSky1)}.mfui-9-chip_theme_gray.mfui-9-chip_opened,.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.mfui-9-chip_opened .mfui-9-chip__icon-arrow{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.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 .mfui-9-chip__icon svg,.mfui-9-chip_disabled:hover .mfui-9-chip__icon svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__icon-arrow svg,.mfui-9-chip_disabled:hover .mfui-9-chip__icon-arrow svg{fill:var(--spbSky2)}.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:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter){background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) svg{fill:var(--stcWhite)}.mfui-9-chip_checked:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter){background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_type_filter.mfui-9-chip_with-counter{padding-bottom:4px;padding-right:4px;padding-top:4px}.mfui-9-chip_checked.mfui-9-chip_type_filter .mfui-9-chip__counter{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_type_filter.mfui-9-chip_color_black .mfui-9-chip__counter{background-color:var(--content);color:var(--base)}

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

@@ -11,6 +11,11 @@ export declare const ChipThemes: {
     readonly GRAY: "gray";
 };
 export type ChipsThemeType = (typeof ChipThemes)[keyof typeof ChipThemes];
+export declare const ChipType: {
+    readonly DEFAULT: "default";
+    readonly FILTER: "filter";
+};
+export type ChipTypeType = (typeof ChipType)[keyof typeof ChipType];
 export declare const ChipArrow: {
     readonly UP: "up";
     readonly DOWN: "down";
@@ -21,20 +26,26 @@ export interface IChipProps {
     id: ChipIdType;
     /** Заголовок */
     title?: string;
+    /** Тип */
+    type?: ChipTypeType;
     /** Цвет активного элемента компонента */
     color?: ChipColorsType;
-    /** Цвета неактивных элементов компонента */
+    /** Цветовая тема */
     theme?: ChipsThemeType;
-    /** Отображение в отмеченном (зажатом) состоянии */
+    /** Активное состояние */
     checked?: boolean;
+    /** Открытое состояние */
+    opened?: boolean;
     /** Отключенное состояние */
     disabled?: boolean;
     /** Иконка */
     icon?: JSX.Element;
     /** Значение счетчика */
     counterValue?: number;
-    /** Стрелка вверх или вниз */
+    /** DEPRECATED Стрелка вверх или вниз (Используйте opened и showArrow) */
     arrow?: ChipArrowType;
+    /** Показать стрелку */
+    showArrow?: boolean;
     /** Обработчик нажатия */
     onClick?: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
     /** Дочерние элементы */

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

@@ -2,6 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./Chip.css";
+var TurnOn = function TurnOn(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.352 12a2 2 0 110 4 2 2 0 010-4zm-2.828 1.25c-.06.24-.094.49-.094.75s.034.51.094.75H2.73A.74.74 0 012 14a.74.74 0 01.729-.75h6.795zm7.747 0A.74.74 0 0118 14a.74.74 0 01-.729.75h-2.108c.06-.24.096-.49.096-.75s-.036-.51-.096-.75h2.108zM7.46 4a2 2 0 110 4 2 2 0 010-4zM4.667 5.25c-.06.24-.095.49-.095.75s.035.51.095.75H2.729A.74.74 0 012 6a.74.74 0 01.729-.75h1.938zm12.604 0A.74.74 0 0118 6a.74.74 0 01-.729.75h-6.965c.06-.24.094-.49.094-.75s-.034-.51-.094-.75h6.966z"
+  }));
+};
 var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -24,6 +31,11 @@ export var ChipThemes = {
   WHITE: 'white',
   GRAY: 'gray'
 };
+export var ChipType = {
+  DEFAULT: 'default',
+  FILTER: 'filter'
+};
+// DEPRECATED -------------------------------------------------------
 export var ChipArrow = {
   UP: 'up',
   DOWN: 'down'
@@ -32,17 +44,22 @@ var cn = cnCreate('mfui-9-chip');
 var Chip = function Chip(_ref) {
   var id = _ref.id,
     title = _ref.title,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
     _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$opened = _ref.opened,
+    opened = _ref$opened === void 0 ? false : _ref$opened,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     icon = _ref.icon,
     counterValue = _ref.counterValue,
     arrow = _ref.arrow,
+    showArrow = _ref.showArrow,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -51,6 +68,9 @@ var Chip = function Chip(_ref) {
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
   var checkedClass = checked ? classes.checked : undefined;
+  var filterIcon = type === 'filter' ? /*#__PURE__*/React.createElement(TurnOn, null) : undefined;
+  var finalIcon = icon || filterIcon;
+  var content = children || title;
   var handleClick = React.useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
   }, [onClick, id]);
@@ -58,10 +78,14 @@ var Chip = function Chip(_ref) {
     type: "button",
     className: cn({
       color: color,
+      type: type,
       theme: theme,
       checked: checked,
+      opened: opened,
       disabled: disabled,
-      'with-icon': !!icon
+      'with-arrow': !!arrow || showArrow,
+      'with-counter': !!counterValue,
+      'with-icon': !!finalIcon
     }, [className, classes.root, checkedClass])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     disabled: disabled,
@@ -69,14 +93,16 @@ var Chip = function Chip(_ref) {
     ref: rootRef
   }, checked && {
     tabIndex: -1
-  }), !!icon && /*#__PURE__*/React.createElement("span", _extends({
+  }), !!finalIcon && /*#__PURE__*/React.createElement("span", _extends({
     className: cn('icon', [classes.icon])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), finalIcon), !!content && /*#__PURE__*/React.createElement("span", _extends({
     className: cn('inner', [classes.inner])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children || title), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), content), !!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', [classes.arrow])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)), showArrow && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('icon-arrow', [classes.arrow])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 export default Chip;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-badge__badge{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-bottom:-4px;margin-left:auto}.mfui-9-chip-badge__chip{width:100%}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IChipProps } from './Chip';
+import './ChipBadge.scss';
+export interface IChipBadgeProps extends IChipProps {
+    badge?: React.ReactNode;
+}
+declare const ChipBadge: React.FC<IChipBadgeProps>;
+export default ChipBadge;

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

@@ -0,0 +1,29 @@
+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 } from '@megafon/ui-helpers';
+import Chip from "./Chip";
+import "./ChipBadge.css";
+var cn = cnCreate('mfui-9-chip-badge');
+var ChipBadge = function ChipBadge(_a) {
+  var badge = _a.badge,
+    className = _a.className,
+    chipProps = __rest(_a, ["badge", "className"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, !!badge && /*#__PURE__*/React.createElement("div", {
+    className: cn('badge')
+  }, badge), /*#__PURE__*/React.createElement(Chip, _extends({
+    className: cn('chip', [className])
+  }, chipProps)));
+};
+export default ChipBadge;

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-chips{gap:8px}}.mfui-9-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-9-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;width:100%}@media screen and (max-width:767px){.mfui-9-chips{gap:8px}}.mfui-9-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-9-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { DropdownItemsPaddingType } from '../../Dropdown/Dropdown';
-import { ChipColorsType, ChipIdType, IChipProps, ChipsThemeType } from './Chip';
+import { IChipBadgeProps } from './ChipBadge';
 import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
-    items: IChipProps[];
+    items: IChipBadgeProps[];
     /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
-    value?: ChipIdType;
+    value?: IChipBadgeProps['id'];
     /** Цвет активного элемента */
-    color?: ChipColorsType;
+    color?: IChipBadgeProps['color'];
     /** Цвет неактивных элементов */
-    theme?: ChipsThemeType;
+    theme?: IChipBadgeProps['theme'];
     /** Горизонтальное выравнивание */
     align?: 'left' | 'center';
     /** Переводит компонент в контролируемое состояние */
@@ -32,7 +32,7 @@ export interface IChipsProps {
     /** Отступы элементов списка выпадающего списка */
     dropdownPaddings?: DropdownItemsPaddingType;
     /** Обработчик изменения значения */
-    onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
+    onChange?: (id: IChipBadgeProps['id'], e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

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

@@ -16,7 +16,7 @@ import * as React from 'react';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import throttleTime from "../../../constants/throttleTime";
-import Chip from "./Chip";
+import ChipBadge from "./ChipBadge";
 import ChipsDropdown from "./components/ChipsDropdown/ChipsDropdown";
 import ChipsScrollPanel from "./components/ChipsScrollPanel/ChipsScrollPanel";
 import "./Chips.css";
@@ -100,7 +100,7 @@ var Chips = function Chips(_ref) {
       var id = _a.id,
         children = _a.children,
         rest = __rest(_a, ["id", "children"]);
-      return /*#__PURE__*/React.createElement(Chip, _extends({
+      return /*#__PURE__*/React.createElement(ChipBadge, _extends({
         key: id,
         id: id,
         checked: id === selectedId,

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

@@ -1 +1 @@
-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)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.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,14 +1,14 @@
 import * as React from 'react';
 import { DropdownItemsPaddingType } from '../../../../Dropdown/Dropdown';
-import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
+import { IChipBadgeProps } from '../../ChipBadge';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
-    items: IChipProps[];
-    color: ChipColorsType;
-    theme: ChipsThemeType;
+    items: IChipBadgeProps[];
+    color: IChipBadgeProps['color'];
+    theme: IChipBadgeProps['theme'];
     moreTitle: string;
     short: boolean;
-    value?: ChipIdType;
+    value?: IChipBadgeProps['id'];
     paddings?: DropdownItemsPaddingType;
     classes?: {
         root?: string;
@@ -22,7 +22,7 @@ export interface IChipsDropdownProps {
         list?: Record<string, string>;
         item?: Record<string, string>;
     };
-    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: IChipBadgeProps['id']) => void;
 }
 declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
 export default ChipsDropdown;

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

@@ -6,7 +6,7 @@ import "core-js/modules/es.object.to-string.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import Dropdown from "../../../../Dropdown/Dropdown";
-import Chip from "../../Chip";
+import ChipBadge from "../../ChipBadge";
 import "./ChipsDropdown.css";
 var cn = cnCreate('mfui-9-chips-dropdown');
 var ChipsDropdown = function ChipsDropdown(_ref) {
@@ -22,7 +22,6 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     onClick = _ref.onClick;
-  var _a;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
@@ -65,17 +64,14 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn([classes.root]),
     ref: dropdownRef
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Chip, _extends({}, currentItem, {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(ChipBadge, _extends({}, currentItem, {
     className: cn('button', [currentItem.className]),
-    classes: _extends(_extends({}, currentItem.classes), {
-      arrow: cn('arrow', {
-        open: isDropdownOpen
-      }, [(_a = currentItem.classes) === null || _a === void 0 ? void 0 : _a.arrow])
-    }),
+    classes: currentItem.classes,
     color: color,
     theme: theme,
+    opened: isDropdownOpen,
     checked: !!currentItem.id,
-    arrow: "down",
+    showArrow: true,
     onClick: handleOpenItemList
   })), /*#__PURE__*/React.createElement(Dropdown, {
     items: dropdownItems,

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-9-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;height:100%}@media screen and (max-width:767px){.mfui-9-chips-scroll-panel__inner{gap:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-9-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;height:100%}@media screen and (max-width:767px){.mfui-9-chips-scroll-panel__inner{gap:8px}}

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

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

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

@@ -13,7 +13,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import Chip from "../../Chip";
+import ChipBadge from "../../ChipBadge";
 import "./ChipsScrollPanel.css";
 var HALF_DIVIDER = 2;
 var cn = cnCreate('mfui-9-chips-scroll-panel');
@@ -75,7 +75,7 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: id,
       className: cn('slide')
-    }, /*#__PURE__*/React.createElement(Chip, _extends({}, rest, {
+    }, /*#__PURE__*/React.createElement(ChipBadge, _extends({}, rest, {
       id: id,
       checked: checked,
       color: color,

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal__modal-content:focus-visible{outline:none}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal__modal-content:focus-visible{outline:none}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}

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

@@ -9,7 +9,7 @@ import usePrevious from "../../hooks/usePrevious";
 import useResolution from "../../hooks/useResolution";
 import ModalDesktop from "./_ModalDesktop/ModalDesktop";
 import ModalMobile from "./_ModalMobile/ModalMobile";
-import { changeBodyPadding, getCorrectMaxHeight } from "./utils/utils";
+import { changeBodyStyles, getCorrectMaxHeight } from "./utils/utils";
 import "./Modal.css";
 var MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
 var HEIGHT_TRANSITION_PROPERTY = 'height';
@@ -29,7 +29,6 @@ export var MODAL_TRANSITIONS_STEPS_ENUM;
   MODAL_TRANSITIONS_STEPS_ENUM["MOVE_END_STEP"] = "move-end-step";
   MODAL_TRANSITIONS_STEPS_ENUM["END_STEP"] = "end-step";
 })(MODAL_TRANSITIONS_STEPS_ENUM || (MODAL_TRANSITIONS_STEPS_ENUM = {}));
-var bodyCn = cnCreate('mfui-9-modal-open-body');
 var cn = cnCreate('mfui-9-modal');
 var Modal = function Modal(_ref) {
   var className = _ref.className,
@@ -164,9 +163,13 @@ var Modal = function Modal(_ref) {
     handleSetScrollContentMaxHeight();
   }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
   var handleAfterOpen = function handleAfterOpen() {
+    changeBodyStyles(true);
     handleSetStyles();
     onAfterModalOpen === null || onAfterModalOpen === void 0 ? void 0 : onAfterModalOpen();
   };
+  var handleAfterClose = function handleAfterClose() {
+    changeBodyStyles(false);
+  };
   var handlePopupClose = function handlePopupClose() {
     setTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.END_STEP);
   };
@@ -183,7 +186,6 @@ var Modal = function Modal(_ref) {
   };
   React.useEffect(function () {
     setIsPopupOpened(isOpened);
-    changeBodyPadding(isOpened);
     if (!isOpened) {
       setContainerWrapHeight(undefined);
     }
@@ -243,14 +245,19 @@ var Modal = function Modal(_ref) {
   }, [isEnabledNativeScroll, isFooterPropsDiff, isRecalculateHeight, isHeaderPropsDiff, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     return function () {
-      setIsPopupOpened(false);
-      document.body.style.paddingRight = '';
       if (!containerInnerRef.current || !resizeObserver.current) {
         return;
       }
       resizeObserver.current.unobserve(containerInnerRef.current);
     };
   }, []);
+  React.useEffect(function () {
+    return function () {
+      if (isOpened) {
+        changeBodyStyles(false);
+      }
+    };
+  }, [isOpened]);
   var contextProps = {
     classes: classes,
     dataAttrs: dataAttrs,
@@ -305,7 +312,7 @@ var Modal = function Modal(_ref) {
       'native-scroll': isEnabledNativeScroll
     }, [className]),
     overlayClassName: cn('overlay', classes === null || classes === void 0 ? void 0 : classes.overlay),
-    bodyOpenClassName: bodyCn('', classes === null || classes === void 0 ? void 0 : classes.bodyOpen),
+    bodyOpenClassName: classes === null || classes === void 0 ? void 0 : classes.bodyOpen,
     isOpen: isPopupOpened,
     ariaHideApp: hideAriaApp,
     contentLabel: contentLabel,
@@ -313,7 +320,8 @@ var Modal = function Modal(_ref) {
     contentRef: getModalContentRef,
     overlayRef: handleGetModalOverlayRef,
     onRequestClose: handlePopupClose,
-    onAfterOpen: handleAfterOpen
+    onAfterOpen: handleAfterOpen,
+    onAfterClose: handleAfterClose
   }, renderContent());
 };
 export default Modal;

package/dist/es/components/Modal/utils/utils.d.ts

@@ -13,6 +13,6 @@ type CorrectMaxHeightArgsType = {
     };
 };
 export declare const getCorrectMaxHeight: ({ refs, props }: CorrectMaxHeightArgsType) => number;
-export declare const changeBodyPadding: (isOpened: boolean) => void;
+export declare const changeBodyStyles: (isOpened: boolean) => void;
 declare const _default: null;
 export default _default;

package/dist/es/components/Modal/utils/utils.js

@@ -48,15 +48,19 @@ export var getCorrectMaxHeight = function getCorrectMaxHeight(_ref) {
   var correctMaxHeight = isStickyFooter ? maxHeightResize - popupFooterHeight : maxHeightResize;
   return correctMaxHeight;
 };
-export var changeBodyPadding = function changeBodyPadding(isOpened) {
+export var changeBodyStyles = function changeBodyStyles(isOpened) {
   var windowWidth = window.innerWidth;
   var documentClientWidth = document.documentElement.clientWidth;
   var scrollBarWidth = windowWidth - documentClientWidth;
   var bodyEl = document.body;
   if (!isOpened) {
     bodyEl.style.paddingRight = '';
+    bodyEl.style.height = '';
+    bodyEl.style.overflow = '';
     return;
   }
+  bodyEl.style.height = '100%';
+  bodyEl.style.overflow = 'hidden';
   if (scrollBarWidth === 0) {
     return;
   }

package/dist/es/components/MultipleSelect/MultipleSelect.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-multiple-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;position:relative;width:100%}.mfui-9-multiple-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;height:auto;min-height:60px;outline:none;padding:13px 15px;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-multiple-select__control:hover{border-color:var(--content)}.mfui-9-multiple-select__input-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;overflow:hidden;width:100%}.mfui-9-multiple-select__arrow-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:none;padding:0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:8px;justify-content:center;width:32px}.mfui-9-multiple-select__arrow-button:disabled{color:inherit;cursor:auto}.mfui-9-multiple-select__arrow-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-multiple-select__arrow-button:focus{outline:none}.mfui-9-multiple-select__arrow-icon{height:auto;width:100%;fill:var(--spbSky2)}.mfui-9-multiple-select__control_active .mfui-9-multiple-select__arrow-icon{-webkit-transition-duration:.6s;transition-duration:.6s;-webkit-transition-property:color,-webkit-transform;transition-property:color,-webkit-transform;transition-property:transform,color;transition-property:transform,color,-webkit-transform;fill:var(--content)}.mfui-9-multiple-select__input{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);flex-shrink:1;font-family:inherit;font-size:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100px}.mfui-9-multiple-select__input::-webkit-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::-moz-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input:-ms-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::-ms-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__tag{display:-webkit-box;display:-ms-flexbox;display:flex;gap:2px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:8px;height:32px;max-width:100%;padding:4px 6px 4px 12px}.mfui-9-multiple-select__tag-title{display:block;font-size:15px;font-weight:400;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-multiple-select__tag-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:none;padding:0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:8px;height:20px;min-width:20px;width:20px}.mfui-9-multiple-select__tag-button:disabled{color:inherit;cursor:auto}.mfui-9-multiple-select__tag-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-multiple-select__tag-button:focus{outline:none}.mfui-9-multiple-select__tag-button-icon{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-multiple-select__tag-button:hover .mfui-9-multiple-select__tag-button-icon{fill:var(--content)}.mfui-9-multiple-select__notice-text{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:8px}.mfui-9-multiple-select_open .mfui-9-multiple-select__control{border-color:var(--content)}.mfui-9-multiple-select_open .mfui-9-multiple-select__arrow-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-multiple-select_disabled{pointer-events:none}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__control{background-color:var(--spbSky0)}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__input:not([placeholder]){width:0}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__tag{background-color:var(--spbSky1)}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__arrow-icon,.mfui-9-multiple-select_disabled .mfui-9-multiple-select__tag-button-icon{fill:var(--spbSky2)}