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

package/dist/lib/components/Modal/Modal.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = exports.MODAL_MOBILE_VIEWS_ENUM = void 0;
+exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = exports.HeaderButtonsTheme = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
@@ -15,19 +15,22 @@ var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime
 var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
 var _ModalDesktop = _interopRequireDefault(require("./_ModalDesktop/ModalDesktop"));
-var _ModalMobileBottom = _interopRequireDefault(require("./_ModalMobileBottom/ModalMobileBottom"));
-var _ModalMobileFullScreen = _interopRequireDefault(require("./_ModalMobileFullScreen/ModalMobileFullScreen"));
+var _ModalMobile = _interopRequireDefault(require("./_ModalMobile/ModalMobile"));
 var _utils = require("./utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START;
 var HEIGHT_TRANSITION_PROPERTY = 'height';
-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 || (exports.MODAL_MOBILE_VIEWS_ENUM = MODAL_MOBILE_VIEWS_ENUM = {}));
+var ModalMobileViews = {
+  FULL_SCREEN: 'fullScreen',
+  // use camelCase for simple using in props from backend
+  BOTTOM: 'bottom'
+};
+var HeaderButtonsTheme = exports.HeaderButtonsTheme = {
+  DEFAULT: 'default',
+  WHITE: 'white'
+};
 var MODAL_TRANSITIONS_STEPS_ENUM;
 (function (MODAL_TRANSITIONS_STEPS_ENUM) {
   MODAL_TRANSITIONS_STEPS_ENUM["INITIAL_STEP"] = "initial-step";
@@ -46,9 +49,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,
@@ -100,8 +105,8 @@ var Modal = function Modal(_ref) {
   var resizeObserver = React.useRef(null);
   var _useResolution = (0, _useResolution2["default"])(),
     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;
@@ -174,7 +179,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) {
@@ -189,6 +194,15 @@ var Modal = function Modal(_ref) {
     if (!isOpened) {
       setContainerWrapHeight(undefined);
     }
+    var setViewportHeightVar = function setViewportHeightVar() {
+      var vhUnit = "".concat(window.innerHeight * 0.01, "px");
+      document.documentElement.style.setProperty('--vh', vhUnit);
+    };
+    setViewportHeightVar();
+    window.addEventListener('resize', setViewportHeightVar);
+    return function () {
+      window.removeEventListener('resize', setViewportHeightVar);
+    };
   }, [isOpened]);
   React.useEffect(function () {
     if (isMobile || window.innerWidth < MOBILE_BIG_START || !window.ResizeObserver) {
@@ -263,8 +277,8 @@ var Modal = function Modal(_ref) {
       scrollBarScrollableRef: scrollBarScrollableRef
     },
     isEnabledNativeScroll: isEnabledNativeScroll,
+    isGrayColorModal: isGrayColorModal,
     isDisabledBackgroundClick: isDisabledBackgroundClick,
-    isMobile: isMobile,
     isTransitionMoveStep: isTransitionMoveStep,
     isTransitionEndStep: isTransitionEndStep,
     containerWrapTransform: containerWrapTransform,
@@ -277,18 +291,15 @@ var Modal = function Modal(_ref) {
     onTransitionEnd: handleTransitionEnd
   };
   var renderContent = function renderContent() {
-    switch (true) {
-      case isFullScreenView:
-        return /*#__PURE__*/React.createElement(_ModalMobileFullScreen["default"], contextProps, children);
-      case isBottomView:
-        return /*#__PURE__*/React.createElement(_ModalMobileBottom["default"], (0, _extends2["default"])({}, contextProps, {
-          isSwipeDisabled: isSwipeDisabled,
-          onChangeTransitionStep: handleChangeTransitionStep,
-          onChangeContainerWrapTransform: handleChangeContainerWrapTransform
-        }), children);
-      default:
-        return /*#__PURE__*/React.createElement(_ModalDesktop["default"], contextProps, children);
+    if (!isMobile) {
+      return /*#__PURE__*/React.createElement(_ModalDesktop["default"], contextProps, children);
     }
+    return /*#__PURE__*/React.createElement(_ModalMobile["default"], (0, _extends2["default"])({}, contextProps, {
+      isSwipeDisabled: isSwipeDisabled,
+      isFullView: isFullScreenView,
+      onChangeTransitionStep: handleChangeTransitionStep,
+      onChangeContainerWrapTransform: handleChangeContainerWrapTransform
+    }), children);
   };
   return /*#__PURE__*/React.createElement(_reactModal["default"], {
     className: cn('modal-content', classes === null || classes === void 0 ? void 0 : classes.modalContent),

package/dist/lib/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)}.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-custom-content{width:100%}.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}@media screen and (max-width:767px){.mfui-9-modal-content__header-button_back{left:10px;top:10px}}.mfui-9-modal-content__header-button_close{right:18px}@media screen and (max-width:767px){.mfui-9-modal-content__header-button_close{right:10px;top:10px}}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;width:32px}.mfui-9-modal-content__header-inner:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-modal-content__header-inner:focus{outline:none}.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(--content)}.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:24px;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:24px;padding-right:6px}}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner{background-color:var(--stcWhite);position:relative}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:after{background-color:var(--stcBlack);border-radius:12px;bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:hover:after{opacity:.1}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:active:after{opacity:.2}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-icon{fill:var(--stcBlack)}.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/lib/components/Modal/_ModalContent/ModalContent.js

@@ -18,29 +18,14 @@ var ArrowLeft24 = function ArrowLeft24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
+    d: "M13.906 9.114a1.25 1.25 0 111.764 1.772l-3.871 3.853H23a1.25 1.25 0 110 2.5H11.777l3.893 3.875a1.25 1.25 0 01-1.764 1.772l-5.618-5.592a1.825 1.825 0 010-2.588l5.618-5.592z"
   }));
 };
 var Cancel24 = function Cancel24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     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", (0, _extends2["default"])({
-    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", (0, _extends2["default"])({
-    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"
+    d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-modal-content');
@@ -54,25 +39,29 @@ var ModalContent = function ModalContent(_ref) {
     showBackButton = _ref$headerProps2.showBackButton,
     hideCloseButton = _ref$headerProps2.hideCloseButton,
     headerAdditionalContent = _ref$headerProps2.headerAdditionalContent,
+    headerCustomContent = _ref$headerProps2.headerCustomContent,
+    buttonsTheme = _ref$headerProps2.buttonsTheme,
     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,
+    containerWrapRef = _ref$refs.containerWrapRef,
     isEnabledNativeScroll = _ref.isEnabledNativeScroll,
+    isGrayColorModal = _ref.isGrayColorModal,
     isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
-    isMobile = _ref.isMobile,
     isTransitionMoveStep = _ref.isTransitionMoveStep,
     isTransitionEndStep = _ref.isTransitionEndStep,
     containerWrapTransform = _ref.containerWrapTransform,
@@ -89,12 +78,11 @@ var ModalContent = function ModalContent(_ref) {
     showHeaderShadow = _React$useState2[0],
     setShowHeaderShadow = _React$useState2[1];
   var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
-  var showHeader = showHeaderMain || !!headerAdditionalContent;
+  var showHeader = showHeaderMain || !!headerAdditionalContent || !!headerCustomContent;
   var isStickyHeader = showHeader && isStickyHeaderProps;
   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);
@@ -102,45 +90,55 @@ var ModalContent = function ModalContent(_ref) {
   var renderBackButton = /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerBackButton), {
     className: cn('header-button', {
       back: true,
-      shadow: hasHeaderButtonsShadow
+      theme: buttonsTheme
     }, 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, {
+    onClick: onBackButtonClick,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header-inner'),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(ArrowLeft24, {
     className: cn('header-icon')
-  }));
+  })));
   var renderCloseButton = /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
     className: cn('header-button', {
       close: true,
-      shadow: hasHeaderButtonsShadow
+      theme: buttonsTheme
     }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
     type: "button",
-    onClick: onPopupClose
-  }), isSmallIcon ? /*#__PURE__*/React.createElement(Cancel24, {
-    className: cn('header-icon')
-  }) : /*#__PURE__*/React.createElement(Cancel32, {
+    onClick: onPopupClose,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header-inner'),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Cancel24, {
     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
   }, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
     className: cn('header-main')
-  }, showBackButton && renderBackButton, !!headerTitle && /*#__PURE__*/React.createElement("div", {
+  }, showBackButton && renderBackButton, !!headerCustomContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('header-custom-content')
+  }, headerCustomContent), !!headerTitle && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
     className: cn('title-area', classes === null || classes === void 0 ? void 0 : classes.titleArea)
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('title', classes === null || classes === void 0 ? void 0 : classes.title)
-  }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && /*#__PURE__*/React.createElement("div", {
+  }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
     className: cn('header-additional')
   }, headerAdditionalContent));
   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
@@ -170,12 +168,11 @@ var ModalContent = function ModalContent(_ref) {
     className: cn('container-inner', {
       'native-scroll': isEnabledNativeScroll
     }, classes === null || classes === void 0 ? void 0 : classes.containerInner),
-    ref: containerInnerRef,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    ref: containerInnerRef
   }), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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,
@@ -185,6 +182,7 @@ var ModalContent = function ModalContent(_ref) {
     className: cn('background', classes === null || classes === void 0 ? void 0 : classes.background),
     onClick: isDisabledBackgroundClick ? undefined : onPopupClose
   })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: containerWrapRef,
     "in": isBottomTransitionIn,
     timeout: 190,
     onExited: onTransitionExited

package/dist/lib/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;overflow:hidden}

package/dist/lib/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)*100 - 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;overflow:hidden}@-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/lib/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/lib/components/Modal/{_ModalMobileBottom/ModalMobileBottom.js → _ModalMobile/ModalMobile.js}

@@ -25,18 +25,31 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 var HALF_DIVIDER = 2;
-var cn = (0, _uiHelpers.cnCreate)('mfui-9-modal-mobile-bottom');
-var ModalMobileBottom = function ModalMobileBottom(_a) {
+var cn = (0, _uiHelpers.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,
@@ -88,6 +101,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
     });
   }, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
+    var _a;
     var containerWrapNode = containerWrapRef.current;
     var scrollableNode = scrollBarScrollableRef.current;
     var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
@@ -95,28 +109,12 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
       return;
     }
     window.cancelAnimationFrame(animationFrameId.current);
-    if (!e.changedTouches.length) {
-      setInitialTouchPosition(null);
-      return;
-    }
-    var touchStartY = initialTouchPosition;
-    var touchEndY = e.changedTouches[0].clientY;
-    if (touchStartY === null) {
-      setInitialTouchPosition(null);
-      return;
-    }
-    var deltaY = touchStartY - touchEndY;
-    var absDeltaY = Math.abs(deltaY);
-    if (absDeltaY < 5 || touchStartY > touchEndY) {
-      setInitialTouchPosition(null);
-      return;
-    }
     var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
-    var isMoreHalfClosed = touchEndY > containerCenterPosition;
+    var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
     setInitialTouchPosition(null);
     onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
     onChangeTransitionStep(isMoreHalfClosed ? _Modal.MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : _Modal.MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
-  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, initialTouchPosition, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
   React.useEffect(function () {
     if (isSwipeDisabled) {
       return undefined;
@@ -129,15 +127,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["default"], (0, _extends2["default"])({}, restProps, {
     classes: (0, _extends2["default"])((0, _extends2["default"])({}, 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: (0, _extends2["default"])((0, _extends2["default"])({}, restScrollBarParams), {
+      classes: (0, _extends2["default"])((0, _extends2["default"])({}, restClassesScrollBar), {
+        root: cn('scroll-root', root),
+        init: cn('scroll-init', init),
+        scrollContent: cn('scroll-content', scrollContent)
+      })
     })
   }), children));
 };
-var _default = exports["default"] = ModalMobileBottom;
+var _default = exports["default"] = ModalMobile;

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

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

package/dist/lib/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/lib/components/NavArrow/NavArrow.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-9-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-9-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-9-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-9-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-9-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-9-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-9-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-9-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-9-nav-arrow_theme_white .mfui-9-nav-arrow__icon{fill:var(--stcBlack)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-nav-arrow:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-nav-arrow:focus{outline:none}.mfui-9-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-9-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-9-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-9-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-9-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-9-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-9-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-9-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-9-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-9-nav-arrow_theme_white .mfui-9-nav-arrow__icon{fill:var(--stcBlack)}

package/dist/lib/components/NavArrow/NavArrow.js

@@ -15,28 +15,28 @@ var ArrowLeft24 = function ArrowLeft24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
+    d: "M13.906 9.114a1.25 1.25 0 111.764 1.772l-3.871 3.853H23a1.25 1.25 0 110 2.5H11.777l3.893 3.875a1.25 1.25 0 01-1.764 1.772l-5.618-5.592a1.825 1.825 0 010-2.588l5.618-5.592z"
   }));
 };
 var ArrowRight24 = function ArrowRight24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+    d: "M16.326 9.118a1.25 1.25 0 011.768-.004l5.618 5.592a1.825 1.825 0 010 2.588l-5.618 5.592a1.25 1.25 0 01-1.764-1.772l3.871-3.853H9a1.25 1.25 0 010-2.5h11.223l-3.893-3.875a1.25 1.25 0 01-.004-1.768z"
   }));
 };
 var ArrowLeft32 = function ArrowLeft32(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
+    d: "M16.964 10.562a1.972 1.972 0 112.757 2.822l-4.732 4.628h14.538a1.973 1.973 0 010 3.947H14.96l4.762 4.657a1.973 1.973 0 11-2.757 2.822l-7.633-7.465a2.76 2.76 0 010-3.946l7.633-7.465z"
   }));
 };
 var ArrowRight32 = function ArrowRight32(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
+    d: "M19.996 10.594a1.972 1.972 0 012.79-.032l7.633 7.465a2.759 2.759 0 010 3.946l-7.634 7.465a1.972 1.972 0 11-2.756-2.822l4.732-4.628H10.223a1.973 1.973 0 010-3.947H24.79l-4.761-4.657a1.974 1.974 0 01-.033-2.79z"
   }));
 };
 var Theme = exports.Theme = {

package/dist/lib/components/Notification/Notification.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-notification{background-color:var(--base);border-radius:12px;padding:20px 12px 20px 32px;position:relative}@media screen and (max-width:767px){.mfui-9-notification{padding:16px 12px}}.mfui-9-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-9-notification__title{line-height:24px}}.mfui-9-notification__title_close-padding{padding-right:20px}.mfui-9-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-9-notification__text{font-size:15px;line-height:24px}}.mfui-9-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__full-text,.mfui-9-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-9-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-9-notification__icon-container{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;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-9-notification__attention-icon,.mfui-9-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-9-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-9-notification__text-container{margin-right:72px}}.mfui-9-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-9-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-9-notification__bottom_has-button{margin-top:12px}.mfui-9-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-9-notification__button+.mfui-9-notification__link{margin-left:16px}.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-size:12px;line-height:14px}}.mfui-9-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-9-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-9-notification__collapse-arrow,.mfui-9-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-9-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-9-notification__link-arrow{margin-bottom:-4px}}.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:16px}}.mfui-9-notification__collapse_hidden{visibility:hidden}.mfui-9-notification__close{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:8px;top:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:none;border-radius:50%;cursor:pointer;height:24px;justify-content:center;padding:0;width:24px}@media screen and (min-width:768px){.mfui-9-notification__close{height:32px;right:12px;top:12px;width:32px}}.mfui-9-notification__close:hover{background-color:var(--spbSky1)}.mfui-9-notification__close:active{background-color:var(--spbSky2)}.mfui-9-notification__close:after{background-color:var(--content);border-radius:50%;content:"";height:100%;opacity:.05;position:absolute;width:100%}.mfui-9-notification__close-icon{height:10px;opacity:.5;width:10px;fill:var(--content)}.mfui-9-notification_type_error .mfui-9-notification__icon-container{background-color:var(--fury20)}.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--fury)}.mfui-9-notification_type_success .mfui-9-notification__icon-container{background-color:var(--brandGreen20)}.mfui-9-notification_type_success .mfui-9-notification__icon-container svg{fill:var(--brandGreen)}.mfui-9-notification_type_warning .mfui-9-notification__icon-container{background-color:var(--137C20)}.mfui-9-notification_type_warning .mfui-9-notification__icon-container svg{fill:var(--137C)}.mfui-9-notification_type_info .mfui-9-notification__icon-container{background-color:var(--sky20)}.mfui-9-notification_type_info .mfui-9-notification__icon-container svg{fill:var(--sky)}.mfui-9-notification_colored .mfui-9-notification__icon-container{background-color:var(--base)}.mfui-9-notification_colored.mfui-9-notification_type_info{background-color:var(--sky20)}.mfui-9-notification_colored.mfui-9-notification_type_warning{background-color:var(--137C20)}.mfui-9-notification_colored.mfui-9-notification_type_success{background-color:var(--brandGreen20)}.mfui-9-notification_colored.mfui-9-notification_type_info .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_info .mfui-9-notification__title,.mfui-9-notification_colored.mfui-9-notification_type_success .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_success .mfui-9-notification__title,.mfui-9-notification_colored.mfui-9-notification_type_warning .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_warning .mfui-9-notification__title{color:var(--content)}.mfui-9-notification_colored.mfui-9-notification_type_error{background-color:var(--fury80)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__collapse-button,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__link,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__title{color:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__collapse-arrow,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__link-arrow{fill:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__icon-container{background-color:var(--stcWhite20)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__close:not(:hover){background-color:var(--stcWhite20)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__close:not(:hover) .mfui-9-notification__close-icon{opacity:1;fill:var(--stcWhite)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-notification{border:1px solid transparent;border-radius:24px;overflow:hidden;padding:20px 12px 20px 20px;position:relative}@media screen and (max-width:767px){.mfui-9-notification{padding:16px 12px}}.mfui-9-notification:before{border-radius:50%;content:"";-webkit-filter:blur(30px);filter:blur(30px);height:80px;left:-14px;position:absolute;top:-6px;width:80px;z-index:0}@media screen and (max-width:767px){.mfui-9-notification:after{border-radius:50%;content:"";-webkit-filter:blur(45px);filter:blur(45px);height:128px;position:absolute;right:-32px;top:45px;width:128px;z-index:0}}.mfui-9-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-9-notification__title{line-height:24px}}.mfui-9-notification__title_close-padding{padding-right:20px}.mfui-9-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-9-notification__text{font-size:15px;line-height:24px}}.mfui-9-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__full-text,.mfui-9-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-9-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-9-notification__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:2;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border:.3px solid transparent;border-radius:12px;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-9-notification__attention-icon,.mfui-9-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-9-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-9-notification__text-container{margin-right:72px}}.mfui-9-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-9-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-9-notification__bottom_has-button{margin-top:12px}.mfui-9-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-9-notification__button+.mfui-9-notification__link{margin-left:16px}.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-size:12px;line-height:14px}}.mfui-9-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-9-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-9-notification__collapse-arrow,.mfui-9-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-9-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-9-notification__link-arrow{margin-bottom:-4px}}.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:16px}}.mfui-9-notification__collapse_hidden{visibility:hidden}.mfui-9-notification__close{position:absolute;right:1px;top:1px;z-index:100}.mfui-9-notification_type_error{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#ffacb2 98.41%) border-box}.mfui-9-notification_type_error:before{background:linear-gradient(46.7deg,#f62434 16.91%,rgba(246,36,52,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_error:after{background:linear-gradient(46.7deg,rgba(246,36,52,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_error .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(246,36,52,0) 5.8%,#f62434 48.19%) border-box}.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--fury)}.mfui-9-notification_type_success{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,rgba(62,255,110,.7) 98.41%) border-box}.mfui-9-notification_type_success:before{background:linear-gradient(46.7deg,#00b956 16.91%,rgba(0,185,86,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_success:after{background:linear-gradient(46.7deg,rgba(0,185,86,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_success .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(0,185,86,0) 5.8%,#00b956 48.19%) border-box}.mfui-9-notification_type_success .mfui-9-notification__icon-container svg{fill:var(--brandGreen)}.mfui-9-notification_type_warning{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#ffdea7 98.41%) border-box}.mfui-9-notification_type_warning:before{background:linear-gradient(46.7deg,#ffab23 16.91%,rgba(255,171,35,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_warning:after{background:linear-gradient(46.7deg,rgba(255,171,35,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_warning .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(255,171,35,0) 5.8%,#ffab23 48.19%) border-box}.mfui-9-notification_type_warning .mfui-9-notification__icon-container svg{fill:var(--137C)}.mfui-9-notification_type_info{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#a5dfff 98.41%) border-box}.mfui-9-notification_type_info:before{background:linear-gradient(46.7deg,#3cb9ff 16.91%,rgba(60,185,255,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_info:after{background:linear-gradient(46.7deg,rgba(60,185,255,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_info .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(60,185,255,0) 5.8%,#3cb9ff 48.19%) border-box}.mfui-9-notification_type_info .mfui-9-notification__icon-container svg{fill:var(--sky)}

package/dist/lib/components/Notification/Notification.d.ts

@@ -7,13 +7,6 @@ declare const NotificationTypes: {
     readonly INFO: "info";
 };
 type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
-declare const ShadowTypes: {
-    readonly ZERO: "zero";
-    readonly HOVER: "hover";
-    readonly PRESSED: "pressed";
-    readonly DEFAULT: "default";
-};
-type ShadowType = (typeof ShadowTypes)[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -26,10 +19,6 @@ export interface INotificationProps {
     };
     /** Тип отображения */
     type?: NotificationType;
-    /** Уровень тени */
-    shadowLevel?: ShadowType;
-    /** Наличие фоновой заливки у уведомления */
-    isColored?: boolean;
     /** Наличие кнопки-крестика "Закрыть" */
     hasCloseButton?: boolean;
     /** Заголовок */