@megafon/ui-core 9.0.0-alpha.4 → 9.0.0-alpha.6

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

@@ -6,8 +6,10 @@ export interface IAccordionProps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
-    /** Заголовок */
+    /** Тег заголовка (определяет базовый тег и стили) */
     titleTag?: IHeaderProps['as'];
+    /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
+    titleTagName?: IHeaderProps['tag'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */

package/dist/es/components/Accordion/Accordion.js

@@ -20,6 +20,7 @@ var Accordion = function Accordion(_ref) {
     title = _ref.title,
     _ref$titleTag = _ref.titleTag,
     titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+    titleTagName = _ref.titleTagName,
     _ref$isOpened = _ref.isOpened,
     isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
     _ref$hasMicrodata = _ref.hasMicrodata,
@@ -81,6 +82,7 @@ var Accordion = function Accordion(_ref) {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(Header, {
     as: titleTag,
+    tag: titleTagName,
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
     className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {

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

@@ -15,22 +15,11 @@ export declare const PromoBadgeSize: {
     readonly MEDIUM: "medium";
 };
 type PromoBadgeSizeType = (typeof PromoBadgeSize)[keyof typeof PromoBadgeSize];
-export declare const PromoBadgeTypes: {
-    readonly HIT: "hit";
-    readonly NEW: "new";
-    readonly VIP: "vip";
-    readonly POPULAR: "popular";
-    readonly USER_CHOICE: "user-choice";
-    readonly INTERESTS: "interests";
-};
-type PromoBadgeTypesType = (typeof PromoBadgeTypes)[keyof typeof PromoBadgeTypes];
 export interface IPromoBadgeProps {
     /** Цвет промо-бэйджа */
     color?: PromoBadgeColorsType;
     /** Размер промо-бэйджа */
     size?: PromoBadgeSizeType;
-    /** DEPRECATED Тип промо-бэйджа (Используйте проп `color`) */
-    type?: PromoBadgeTypesType;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data-атрибуты к внутренним элементам */

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

@@ -15,30 +15,19 @@ export var PromoBadgeSize = {
   SMALL: 'small',
   MEDIUM: 'medium'
 };
-// DEPRECATED
-export var PromoBadgeTypes = {
-  HIT: 'hit',
-  NEW: 'new',
-  VIP: 'vip',
-  POPULAR: 'popular',
-  USER_CHOICE: 'user-choice',
-  INTERESTS: 'interests'
-};
 var cn = cnCreate('mfui-9-promo-badge');
 var PromoBadge = function PromoBadge(_ref) {
-  var color = _ref.color,
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? PromoBadgeColors.SKY : _ref$color,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
+    size = _ref$size === void 0 ? PromoBadgeSize.MEDIUM : _ref$size,
     className = _ref.className,
     children = _ref.children,
     dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
-      size: size,
-      type: color ? undefined : type
+      size: size
     }, className)
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('text')

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

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

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:11px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip-suggest{padding:7px 12px}}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;margin-right:6px;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_with-icon{padding-left:12px}@media screen and (max-width:767px){.mfui-9-chip-suggest_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:11px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip-suggest{font-size:12px;line-height:18px;padding:7px 12px}}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;margin-right:6px;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_with-icon{padding-left:12px}@media screen and (max-width:767px){.mfui-9-chip-suggest_with-icon{padding-left:8px}}

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_full-view .mfui-9-modal__overlay{display:block;padding:0}.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-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_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.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import type { IScrollBarProps } from '../ScrollBar/ScrollBar';
 import './Modal.scss';
-export declare enum MODAL_MOBILE_VIEWS_ENUM {
-    FULL_SCREEN = "fullScreen",// use camelCase for simple using in props from backend
-    BOTTOM = "bottom"
-}
+declare const ModalMobileViews: {
+    readonly FULL_SCREEN: "fullScreen";
+    readonly BOTTOM: "bottom";
+};
+type ModalMobileViewsType = (typeof ModalMobileViews)[keyof typeof ModalMobileViews];
 export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
     INITIAL_STEP = "initial-step",
     MOVE_STEP = "move-step",
@@ -47,12 +48,12 @@ export type ModalHeaderPropsType = {
     headerAdditionalContent?: JSX.Element | JSX.Element[] | string | null;
     /** Отобразить тень у шапки */
     hasHeaderShadow?: boolean;
-    /** Отобразить кнопки с подложкой */
-    hasHeaderButtonsShadow?: boolean;
     /** Закрепленная шапка */
     isStickyHeader?: boolean;
     /** Кнопки находятся вне основной шапке */
     isOutSideHeaderButtons?: boolean;
+    /** Использовать серый фон в шапке */
+    isGrayColorHeader?: boolean;
     /** Обработчик для стрелки назад */
     onBackButtonClick?: () => void;
 };
@@ -63,6 +64,8 @@ export type ModalFooterPropsType = {
     isStickyFooter?: boolean;
     /** Отобразить тень у футера */
     hasFooterShadow?: boolean;
+    /** Использовать серый фон в футере */
+    isGrayColorFooter?: boolean;
 };
 export interface IModalProps {
     /** Дополнительные классы для корневого элемента */
@@ -80,11 +83,13 @@ export interface IModalProps {
     /** Настройки для футера модального окна */
     footerProps?: ModalFooterPropsType;
     /** Вид модального окна на разрешении 767- */
-    mobileView?: MODAL_MOBILE_VIEWS_ENUM;
+    mobileView?: ModalMobileViewsType;
     /** Включить дефолтный скролл (отключает кастомный компонент скролла) */
     isEnabledNativeScroll?: boolean;
     /** Отключить закрытие шторки свайпом */
     isSwipeDisabled?: boolean;
+    /** Использовать серый фон для основного контента модального окна */
+    isGrayColorModal?: boolean;
     /** Отключить закрытие модального окна при клике на фон */
     isDisabledBackgroundClick?: boolean;
     /** Восстанавливает фокус на элементе, который был сфокусирован до открытия модального окна */

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

@@ -8,17 +8,16 @@ import THROTTLE_TIME from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
 import useResolution from "../../hooks/useResolution";
 import ModalDesktop from "./_ModalDesktop/ModalDesktop";
-import ModalMobileBottom from "./_ModalMobileBottom/ModalMobileBottom";
-import ModalMobileFullScreen from "./_ModalMobileFullScreen/ModalMobileFullScreen";
+import ModalMobile from "./_ModalMobile/ModalMobile";
 import { changeBodyPadding, getCorrectMaxHeight } from "./utils/utils";
 import "./Modal.css";
 var MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
 var HEIGHT_TRANSITION_PROPERTY = 'height';
-export var MODAL_MOBILE_VIEWS_ENUM;
-(function (MODAL_MOBILE_VIEWS_ENUM) {
-  MODAL_MOBILE_VIEWS_ENUM["FULL_SCREEN"] = "fullScreen";
-  MODAL_MOBILE_VIEWS_ENUM["BOTTOM"] = "bottom";
-})(MODAL_MOBILE_VIEWS_ENUM || (MODAL_MOBILE_VIEWS_ENUM = {}));
+var ModalMobileViews = {
+  FULL_SCREEN: 'fullScreen',
+  // use camelCase for simple using in props from backend
+  BOTTOM: 'bottom'
+};
 export var MODAL_TRANSITIONS_STEPS_ENUM;
 (function (MODAL_TRANSITIONS_STEPS_ENUM) {
   MODAL_TRANSITIONS_STEPS_ENUM["INITIAL_STEP"] = "initial-step";
@@ -37,9 +36,11 @@ var Modal = function Modal(_ref) {
     headerProps = _ref.headerProps,
     footerProps = _ref.footerProps,
     _ref$mobileView = _ref.mobileView,
-    mobileView = _ref$mobileView === void 0 ? MODAL_MOBILE_VIEWS_ENUM.FULL_SCREEN : _ref$mobileView,
+    mobileView = _ref$mobileView === void 0 ? ModalMobileViews.FULL_SCREEN : _ref$mobileView,
     isEnabledNativeScroll = _ref.isEnabledNativeScroll,
     isSwipeDisabled = _ref.isSwipeDisabled,
+    _ref$isGrayColorModal = _ref.isGrayColorModal,
+    isGrayColorModal = _ref$isGrayColorModal === void 0 ? false : _ref$isGrayColorModal,
     isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
     isRecalculateHeight = _ref.isRecalculateHeight,
     _ref$hideAriaApp = _ref.hideAriaApp,
@@ -91,8 +92,8 @@ var Modal = function Modal(_ref) {
   var resizeObserver = React.useRef(null);
   var _useResolution = useResolution(),
     isMobile = _useResolution.isMobile;
-  var isFullScreenView = mobileView === MODAL_MOBILE_VIEWS_ENUM.FULL_SCREEN && isMobile;
-  var isBottomView = mobileView === MODAL_MOBILE_VIEWS_ENUM.BOTTOM && isMobile;
+  var isFullScreenView = mobileView === 'fullScreen' && isMobile;
+  var isBottomView = mobileView === 'bottom' && isMobile;
   var isBottomTransitionIn = transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.END_STEP && transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP;
   var isTransitionMoveStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP;
   var isTransitionEndStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.END_STEP;
@@ -165,7 +166,7 @@ var Modal = function Modal(_ref) {
   };
   var handleTransitionExited = function handleTransitionExited() {
     setTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
-    isBottomView && setContainerWrapTransform('none');
+    (isBottomView || isFullScreenView) && setContainerWrapTransform('none');
     onClose === null || onClose === void 0 ? void 0 : onClose();
   };
   var handleTransitionEnd = function handleTransitionEnd(e) {
@@ -254,8 +255,8 @@ var Modal = function Modal(_ref) {
       scrollBarScrollableRef: scrollBarScrollableRef
     },
     isEnabledNativeScroll: isEnabledNativeScroll,
+    isGrayColorModal: isGrayColorModal,
     isDisabledBackgroundClick: isDisabledBackgroundClick,
-    isMobile: isMobile,
     isTransitionMoveStep: isTransitionMoveStep,
     isTransitionEndStep: isTransitionEndStep,
     containerWrapTransform: containerWrapTransform,
@@ -268,18 +269,15 @@ var Modal = function Modal(_ref) {
     onTransitionEnd: handleTransitionEnd
   };
   var renderContent = function renderContent() {
-    switch (true) {
-      case isFullScreenView:
-        return /*#__PURE__*/React.createElement(ModalMobileFullScreen, contextProps, children);
-      case isBottomView:
-        return /*#__PURE__*/React.createElement(ModalMobileBottom, _extends({}, contextProps, {
-          isSwipeDisabled: isSwipeDisabled,
-          onChangeTransitionStep: handleChangeTransitionStep,
-          onChangeContainerWrapTransform: handleChangeContainerWrapTransform
-        }), children);
-      default:
-        return /*#__PURE__*/React.createElement(ModalDesktop, contextProps, children);
+    if (!isMobile) {
+      return /*#__PURE__*/React.createElement(ModalDesktop, contextProps, children);
     }
+    return /*#__PURE__*/React.createElement(ModalMobile, _extends({}, contextProps, {
+      isSwipeDisabled: isSwipeDisabled,
+      isFullView: isFullScreenView,
+      onChangeTransitionStep: handleChangeTransitionStep,
+      onChangeContainerWrapTransform: handleChangeContainerWrapTransform
+    }), children);
   };
   return /*#__PURE__*/React.createElement(ReactModal, {
     className: cn('modal-content', classes === null || classes === void 0 ? void 0 : classes.modalContent),

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-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-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-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-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-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-9-modal-content__header-main{min-height:64px}}.mfui-9-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-9-modal-content__header-button{height:40px;width:40px}}.mfui-9-modal-content__header-button_back{left:16px}.mfui-9-modal-content__header-button_close{right:16px}.mfui-9-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-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-9-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-9-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-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-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-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-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-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-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-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-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-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-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-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-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-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-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-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-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-9-modal-content__header_gray{background-color:var(--backgroundGray);border-top-left-radius:32px;border-top-right-radius:32px}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-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:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-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:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}.mfui-9-modal-content__header-button_close{right:18px}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;position:relative;width:32px}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}.mfui-9-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-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-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-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-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-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-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-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-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-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-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-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import { CSSTransition } from 'react-transition-group';
+import ButtonClose from "../../Buttons/ButtonClose/ButtonClose";
 import ScrollBar from "../../ScrollBar/ScrollBar";
 import "./ModalContent.css";
 var ArrowLeft24 = function ArrowLeft24(props) {
@@ -12,28 +13,6 @@ var ArrowLeft24 = function ArrowLeft24(props) {
     d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
   }));
 };
-var Cancel24 = function Cancel24(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    className: "Cancel24__st0",
-    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
-  }));
-};
-var ArrowLeft32 = function ArrowLeft32(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
-  }));
-};
-var Cancel32 = function Cancel32(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
-  }));
-};
 var cn = cnCreate('mfui-9-modal-content');
 var ModalContent = function ModalContent(_ref) {
   var classes = _ref.classes,
@@ -46,24 +25,25 @@ var ModalContent = function ModalContent(_ref) {
     hideCloseButton = _ref$headerProps2.hideCloseButton,
     headerAdditionalContent = _ref$headerProps2.headerAdditionalContent,
     hasHeaderShadow = _ref$headerProps2.hasHeaderShadow,
-    hasHeaderButtonsShadow = _ref$headerProps2.hasHeaderButtonsShadow,
     _ref$headerProps2$isS = _ref$headerProps2.isStickyHeader,
     isStickyHeaderProps = _ref$headerProps2$isS === void 0 ? true : _ref$headerProps2$isS,
     isOutSideHeaderButtons = _ref$headerProps2.isOutSideHeaderButtons,
+    isGrayColorHeader = _ref$headerProps2.isGrayColorHeader,
     onBackButtonClick = _ref$headerProps2.onBackButtonClick,
     _ref$footerProps = _ref.footerProps,
     _ref$footerProps2 = _ref$footerProps === void 0 ? {} : _ref$footerProps,
     footer = _ref$footerProps2.footer,
     isStickyFooterProps = _ref$footerProps2.isStickyFooter,
     hasFooterShadow = _ref$footerProps2.hasFooterShadow,
+    isGrayColorFooter = _ref$footerProps2.isGrayColorFooter,
     _ref$refs = _ref.refs,
     headerRef = _ref$refs.headerRef,
     footerRef = _ref$refs.footerRef,
     containerInnerRef = _ref$refs.containerInnerRef,
     containerBodyRef = _ref$refs.containerBodyRef,
     isEnabledNativeScroll = _ref.isEnabledNativeScroll,
+    isGrayColorModal = _ref.isGrayColorModal,
     isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
-    isMobile = _ref.isMobile,
     isTransitionMoveStep = _ref.isTransitionMoveStep,
     isTransitionEndStep = _ref.isTransitionEndStep,
     containerWrapTransform = _ref.containerWrapTransform,
@@ -85,38 +65,32 @@ var ModalContent = function ModalContent(_ref) {
   var isStaticHeader = showHeader && !isStickyHeaderProps;
   var isStickyFooter = !!footer && !!isStickyFooterProps;
   var isStaticFooter = !!footer && !isStickyFooterProps;
-  var isSmallIcon = isMobile || !!hasHeaderButtonsShadow;
   var handleChangeShadowState = React.useCallback(function (e) {
     var scrollTop = e.nativeEvent.target.scrollTop;
     setShowHeaderShadow(scrollTop > 0);
   }, []);
   var renderBackButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerBackButton), {
     className: cn('header-button', {
-      back: true,
-      shadow: hasHeaderButtonsShadow
+      back: true
     }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
     type: "button",
     onClick: onBackButtonClick
-  }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, {
-    className: cn('header-icon')
-  }) : /*#__PURE__*/React.createElement(ArrowLeft32, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header-inner')
+  }, /*#__PURE__*/React.createElement(ArrowLeft24, {
     className: cn('header-icon')
-  }));
-  var renderCloseButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
+  })));
+  var renderCloseButton = /*#__PURE__*/React.createElement(ButtonClose, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
     className: cn('header-button', {
-      close: true,
-      shadow: hasHeaderButtonsShadow
+      close: true
     }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
-    type: "button",
+    size: "medium",
     onClick: onPopupClose
-  }), 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,
+      gray: isGrayColorHeader,
       'native-scroll': isEnabledNativeScroll && isStickyHeader
     }, classes === null || classes === void 0 ? void 0 : classes.header),
     ref: headerRef
@@ -132,6 +106,7 @@ var ModalContent = function ModalContent(_ref) {
   var renderFooter = /*#__PURE__*/React.createElement("div", {
     className: cn('footer', {
       shadow: hasFooterShadow,
+      gray: isGrayColorFooter,
       'native-scroll': isEnabledNativeScroll && isStickyFooter
     }, classes === null || classes === void 0 ? void 0 : classes.footer),
     ref: footerRef
@@ -164,6 +139,8 @@ var ModalContent = function ModalContent(_ref) {
     ref: containerInnerRef
   }), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
     className: cn('container-body', {
+      gray: isGrayColorModal,
+      'gray-with-footer': isGrayColorModal && !isStickyFooter,
       'native-scroll': isEnabledNativeScroll
     }, classes === null || classes === void 0 ? void 0 : classes.containerBody),
     ref: containerBodyRef,

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:12px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px}

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh) - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}

package/dist/es/components/Modal/{_ModalMobileBottom/ModalMobileBottom.d.ts → _ModalMobile/ModalMobile.d.ts}

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { MODAL_TRANSITIONS_STEPS_ENUM } from '../Modal';
 import type ModalContextPropsType from '../types';
-import './ModalMobileBottom.scss';
-export interface IModalMobileBottomProps extends ModalContextPropsType {
+import './ModalMobile.scss';
+export interface IModalMobileProps extends ModalContextPropsType {
     isSwipeDisabled?: boolean;
+    isFullView?: boolean;
+    children?: React.ReactNode;
     onChangeTransitionStep: (value: MODAL_TRANSITIONS_STEPS_ENUM) => void;
     onChangeContainerWrapTransform: (value: string) => void;
-    children?: React.ReactNode;
 }
-declare const ModalMobileBottom: React.FC<IModalMobileBottomProps>;
-export default ModalMobileBottom;
+declare const ModalMobile: React.FC<IModalMobileProps>;
+export default ModalMobile;

package/dist/es/components/Modal/{_ModalMobileBottom/ModalMobileBottom.js → _ModalMobile/ModalMobile.js}

@@ -14,20 +14,33 @@ import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
 import ModalContent from "../_ModalContent/ModalContent";
 import { MODAL_TRANSITIONS_STEPS_ENUM } from "../Modal";
-import "./ModalMobileBottom.css";
+import "./ModalMobile.css";
 var HALF_DIVIDER = 2;
-var cn = cnCreate('mfui-9-modal-mobile-bottom');
-var ModalMobileBottom = function ModalMobileBottom(_a) {
+var cn = cnCreate('mfui-9-modal-mobile');
+var ModalMobile = function ModalMobile(_a) {
   var _b = _a.classes,
     _c = _b === void 0 ? {} : _b,
     containerWrap = _c.containerWrap,
     containerInner = _c.containerInner,
-    restClasses = __rest(_c, ["containerWrap", "containerInner"]),
+    containerBody = _c.containerBody,
+    childrenClass = _c.children,
+    childrenContent = _c.childrenContent,
+    restClasses = __rest(_c, ["containerWrap", "containerInner", "containerBody", "children", "childrenContent"]),
+    _d = _a.scrollBarParams,
+    _e = _d.classes,
+    _f = _e === void 0 ? {} : _e,
+    root = _f.root,
+    init = _f.init,
+    scrollContent = _f.scrollContent,
+    restClassesScrollBar = __rest(_f, ["root", "init", "scrollContent"]),
+    restScrollBarParams = __rest(_d, ["classes"]),
     isSwipeDisabled = _a.isSwipeDisabled,
+    _a$isFullView = _a.isFullView,
+    isFullView = _a$isFullView === void 0 ? true : _a$isFullView,
     children = _a.children,
     onChangeTransitionStep = _a.onChangeTransitionStep,
     onChangeContainerWrapTransform = _a.onChangeContainerWrapTransform,
-    restProps = __rest(_a, ["classes", "isSwipeDisabled", "children", "onChangeTransitionStep", "onChangeContainerWrapTransform"]);
+    restProps = __rest(_a, ["classes", "scrollBarParams", "isSwipeDisabled", "isFullView", "children", "onChangeTransitionStep", "onChangeContainerWrapTransform"]);
   var _restProps$refs = restProps.refs,
     containerWrapRef = _restProps$refs.containerWrapRef,
     containerInnerRef = _restProps$refs.containerInnerRef,
@@ -105,15 +118,27 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
     };
   }, [handleWindowTouchEnd, handleWindowTouchMove, isSwipeDisabled]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn()
+    className: cn({
+      'full-view': isFullView
+    })
   }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
     classes: _extends(_extends({}, restClasses), {
       containerWrap: cn('container-wrap', {
         move: isTransitionMoveStep,
         'transition-end': isTransitionEndStep
       }, containerWrap),
-      containerInner: cn('container-inner', containerInner)
+      containerInner: cn('container-inner', containerInner),
+      containerBody: cn('container-body', containerBody),
+      children: cn('children', childrenClass),
+      childrenContent: cn('children-content', childrenContent)
+    }),
+    scrollBarParams: _extends(_extends({}, restScrollBarParams), {
+      classes: _extends(_extends({}, restClassesScrollBar), {
+        root: cn('scroll-root', root),
+        init: cn('scroll-init', init),
+        scrollContent: cn('scroll-content', scrollContent)
+      })
     })
   }), children));
 };
-export default ModalMobileBottom;
+export default ModalMobile;

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

@@ -68,7 +68,6 @@ var mockModalContextProps = {
       current: null
     }
   },
-  isMobile: false,
   isTransitionMoveStep: false,
   isTransitionEndStep: false,
   containerWrapTransform: '',

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

@@ -1,6 +1,6 @@
 import type { IScrollBarProps } from '../ScrollBar/ScrollBar';
 import type { IModalProps } from './Modal';
-type ModalComponentPropsType = Pick<IModalProps, 'classes' | 'dataAttrs' | 'headerProps' | 'footerProps' | 'isEnabledNativeScroll' | 'isDisabledBackgroundClick'>;
+type ModalComponentPropsType = Pick<IModalProps, 'classes' | 'dataAttrs' | 'headerProps' | 'footerProps' | 'isEnabledNativeScroll' | 'isDisabledBackgroundClick' | 'isGrayColorModal'>;
 type RefType = React.MutableRefObject<HTMLDivElement | null>;
 type ModalContextPropsType = ModalComponentPropsType & {
     scrollBarParams: IScrollBarProps;
@@ -13,7 +13,6 @@ type ModalContextPropsType = ModalComponentPropsType & {
         containerBodyRef: RefType;
         scrollBarScrollableRef: React.MutableRefObject<HTMLElement | null>;
     };
-    isMobile: boolean;
     isTransitionMoveStep: boolean;
     isTransitionEndStep: boolean;
     containerWrapTransform: string;

package/dist/es/components/Pagination/Pagination.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-9-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-9-pagination__input,.mfui-9-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-9-pagination__input-field{width:90px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-9-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-9-pagination__input,.mfui-9-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-9-pagination__input-field{width:90px}

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

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { PaginationTypesType, ThemeType, ValueType } from './types';
+import { ThemeType, ValueType } from './types';
 import './Pagination.scss';
 interface IPaginationProps {
     /** Общее количество страниц */
     totalPages: number;
     /** Номер текущей страницы */
     activePage: number;
-    /** Тип компонента. DEPRECATED: 'classic' */
-    type?: PaginationTypesType;
     /** Цветовая тема компонента */
     theme?: ThemeType;
     /** Отобразить поле ввода номера страницы */