@megafon/ui-core 3.10.1 → 3.12.1

package/dist/es/components/Notification/Notification.js

@@ -1,9 +1,12 @@
 import "core-js/modules/es.object.values";
 import "core-js/modules/es.string.link";
+import "core-js/modules/web.timers";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
+import Button from "../Button/Button";
 import Header from "../Header/Header";
 import TextLink from "../TextLink/TextLink";
 import Tile from "../Tile/Tile";
@@ -19,6 +22,26 @@ var ErrorIcon = function ErrorIcon(props) {
   }));
 };
 
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
+var ArrowUp = function ArrowUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M14 12H6l4-5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
 var RightArrow = function RightArrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -61,6 +84,7 @@ var CancelIcon = function CancelIcon(props) {
   }));
 };
 
+var TIMEOUT_DELAY = 400;
 export var NotificationTypes = {
   SUCCESS: 'success',
   WARNING: 'warning',
@@ -91,6 +115,18 @@ var Notification = function Notification(_ref) {
       isColored = _ref$isColored === void 0 ? true : _ref$isColored,
       hasCloseButton = _ref.hasCloseButton,
       title = _ref.title,
+      shortText = _ref.shortText,
+      _ref$closeCollapseTit = _ref.closeCollapseTitle,
+      closeCollapseTitle = _ref$closeCollapseTit === void 0 ? 'Подробнее' : _ref$closeCollapseTit,
+      _ref$openCollapseTitl = _ref.openCollapseTitle,
+      openCollapseTitle = _ref$openCollapseTitl === void 0 ? 'Свернуть' : _ref$openCollapseTitl,
+      _ref$isCollapseOpened = _ref.isCollapseOpened,
+      isCollapseOpened = _ref$isCollapseOpened === void 0 ? false : _ref$isCollapseOpened,
+      buttonText = _ref.buttonText,
+      _ref$buttonLoader = _ref.buttonLoader,
+      buttonLoader = _ref$buttonLoader === void 0 ? false : _ref$buttonLoader,
+      _ref$buttonDisable = _ref.buttonDisable,
+      buttonDisable = _ref$buttonDisable === void 0 ? false : _ref$buttonDisable,
       link = _ref.link,
       rel = _ref.rel,
       href = _ref.href,
@@ -98,7 +134,84 @@ var Notification = function Notification(_ref) {
       icon = _ref.icon,
       dataAttrs = _ref.dataAttrs,
       onClose = _ref.onClose,
-      onLinkClick = _ref.onLinkClick;
+      onLinkClick = _ref.onLinkClick,
+      onButtonClick = _ref.onButtonClick,
+      onCollapseButtonClick = _ref.onCollapseButtonClick;
+  var shortTextRef = useRef(null);
+  var fullTextRef = useRef(null);
+  var wrapTextRef = useRef(null);
+
+  var _useState = useState(isCollapseOpened),
+      _useState2 = _slicedToArray(_useState, 2),
+      showFullText = _useState2[0],
+      setShowFullText = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      updateTextHeight = _useState4[0],
+      setUpdateTextHeight = _useState4[1];
+
+  var initialTextClasses = {
+    "short": {
+      hidden: shortText && showFullText
+    },
+    full: {
+      visible: showFullText
+    }
+  };
+
+  var _useState5 = useState(initialTextClasses),
+      _useState6 = _slicedToArray(_useState5, 2),
+      textClasses = _useState6[0],
+      setTextClass = _useState6[1];
+
+  var hasBottom = shortText || buttonText || link;
+  var isErrorType = type === NotificationTypes.ERROR;
+  useEffect(function () {
+    setShowFullText(isCollapseOpened);
+  }, [isCollapseOpened]);
+  useEffect(function () {
+    if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
+      return undefined;
+    }
+
+    var visibleElement = showFullText ? shortTextRef.current : fullTextRef.current;
+
+    var _visibleElement$getBo = visibleElement.getBoundingClientRect(),
+        height = _visibleElement$getBo.height;
+
+    wrapTextRef.current.style.height = "".concat(height, "px");
+    return setUpdateTextHeight(!updateTextHeight); // не должен запускаться при изменении флага updateTextHeight;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showFullText]);
+  useEffect(function () {
+    if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
+      return undefined;
+    }
+
+    var hiddenElement = showFullText ? fullTextRef.current : shortTextRef.current;
+
+    var _hiddenElement$getBou = hiddenElement.getBoundingClientRect(),
+        height = _hiddenElement$getBou.height;
+
+    wrapTextRef.current.style.height = "".concat(height, "px");
+    setTextClass(initialTextClasses);
+    var timeoutId = setTimeout(function () {
+      if (wrapTextRef.current) {
+        wrapTextRef.current.style.height = 'auto';
+      }
+    }, TIMEOUT_DELAY);
+    return function () {
+      clearTimeout(timeoutId);
+    }; // не должен запускаться при изменении флага showFullText;
+    // запускается по флагу updateTextHeight, который изменяется в предыдущем эффекте.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateTextHeight]);
+
+  var handleCollapseButtonClick = function handleCollapseButtonClick() {
+    setShowFullText(!showFullText);
+    onCollapseButtonClick === null || onCollapseButtonClick === void 0 ? void 0 : onCollapseButtonClick(!showFullText);
+  };
 
   var renderLink = function renderLink() {
     return /*#__PURE__*/React.createElement(TextLink, {
@@ -111,10 +224,38 @@ var Notification = function Notification(_ref) {
       href: href,
       target: target
     }, link, /*#__PURE__*/React.createElement(RightArrow, {
-      className: cn('right-arrow')
+      className: cn('link-arrow')
     }));
   };
 
+  var renderButton = function renderButton() {
+    return /*#__PURE__*/React.createElement(Button, {
+      className: cn('button'),
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      sizeAll: "small",
+      sizeMobile: "extra-small",
+      theme: isErrorType && isColored ? 'white' : 'green',
+      showLoader: buttonLoader,
+      disabled: buttonDisable,
+      ellipsis: !buttonLoader,
+      onClick: onButtonClick
+    }, buttonText);
+  };
+
+  var renderCollapseButton = function renderCollapseButton() {
+    return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapseButton), {
+      type: "button",
+      className: cn('collapse-button'),
+      onClick: handleCollapseButtonClick
+    }), showFullText ? openCollapseTitle : closeCollapseTitle, /*#__PURE__*/React.createElement("div", {
+      className: cn('collapse-arrow', {
+        close: showFullText
+      })
+    }, showFullText ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
+  };
+
   var renderIcon = function renderIcon() {
     if (icon) {
       return icon;
@@ -155,19 +296,33 @@ var Notification = function Notification(_ref) {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
     className: cn('content', [contentClass])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('text-container')
   }, title && /*#__PURE__*/React.createElement(Header, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
     },
     as: "h5",
-    className: cn('title', {
-      'close-padding': hasCloseButton
-    })
-  }, title), /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('title')
+  }, title), /*#__PURE__*/React.createElement("div", _extends({
+    ref: wrapTextRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       'close-padding': hasCloseButton && !title
     })
-  }), children), link && renderLink())), hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: shortTextRef,
+    className: cn('short-text', textClasses["short"])
+  }, shortText || children), shortText && /*#__PURE__*/React.createElement("div", {
+    ref: fullTextRef,
+    className: cn('full-text', textClasses.full)
+  }, children))), hasBottom && /*#__PURE__*/React.createElement("div", {
+    className: cn('bottom', {
+      'has-button': !!buttonText
+    })
+  }, (buttonText || link) && /*#__PURE__*/React.createElement("div", {
+    className: cn('bottom-block')
+  }, buttonText && renderButton(), link && !shortText && renderLink()), shortText && renderCollapseButton()))), hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close'),
     type: "button",
     onClick: onClose
@@ -188,6 +343,13 @@ Notification.propTypes = {
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,
   title: PropTypes.string,
+  shortText: PropTypes.string,
+  closeCollapseTitle: PropTypes.string,
+  openCollapseTitle: PropTypes.string,
+  isCollapseOpened: PropTypes.bool,
+  buttonText: PropTypes.string,
+  buttonLoader: PropTypes.bool,
+  buttonDisable: PropTypes.bool,
   link: PropTypes.string,
   rel: PropTypes.string,
   href: PropTypes.string,
@@ -198,9 +360,13 @@ Notification.propTypes = {
     title: PropTypes.objectOf(PropTypes.string.isRequired),
     text: PropTypes.objectOf(PropTypes.string.isRequired),
     link: PropTypes.objectOf(PropTypes.string.isRequired),
-    close: PropTypes.objectOf(PropTypes.string.isRequired)
+    close: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    collapseButton: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   onClose: PropTypes.func,
-  onLinkClick: PropTypes.func
+  onLinkClick: PropTypes.func,
+  onButtonClick: PropTypes.func,
+  onCollapseButtonClick: PropTypes.func
 };
 export default Notification;

package/dist/es/components/Tabs/Tab.d.ts

@@ -9,6 +9,7 @@ export interface ITabProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        inner?: Record<string, string>;
     };
     /** Дочерние элементы */
     children?: React.ReactNode;

package/dist/es/components/Tabs/Tab.js

@@ -9,7 +9,8 @@ var Tab = function Tab(_ref) {
 
 Tab.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   title: PropTypes.string,
   icon: PropTypes.node,

package/dist/es/components/Tabs/Tabs.js

@@ -270,15 +270,15 @@ var Tabs = function Tabs(_ref) {
     var rootRefNode = rootRef.current;
     rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
   }, [outerObserveContainer]);
-  var renderTab = React.useCallback(function (index, title, icon, href) {
+  var renderTab = React.useCallback(function (index, title, icon, href, attr) {
     var ElementType = href ? 'a' : 'div';
-    return /*#__PURE__*/React.createElement(ElementType, {
+    return /*#__PURE__*/React.createElement(ElementType, _extends({
       href: href,
       className: cn('tab-inner', {
         current: currentIndex === index
       }),
       onClick: handleTabInnerClick(index)
-    }, !!icon && /*#__PURE__*/React.createElement("div", {
+    }, filterDataAttrs(attr, index + 1)), !!icon && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-icon')
     }, icon), !!title && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-title')
@@ -292,7 +292,7 @@ var Tabs = function Tabs(_ref) {
           href = _child$props.href,
           renderTabWrapper = _child$props.renderTabWrapper,
           data = _child$props.dataAttrs;
-      var tab = renderTab(i, title, icon, href);
+      var tab = renderTab(i, title, icon, href, data === null || data === void 0 ? void 0 : data.inner);
       var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: cn('slide')

package/dist/lib/components/Button/Button.css

@@ -8,6 +8,7 @@
   padding: 0 32px;
   border: none;
   border-radius: 30px;
+  overflow: hidden;
   color: var(--stcWhite);
   font-weight: 500;
   text-align: center;
@@ -21,7 +22,12 @@
           appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+.mfui-button_size-all_extra-small {
+  padding: 0 16px;
+}
 .mfui-button_size-all_extra-small .mfui-button__inner {
+  font-size: 12px;
+  line-height: 16px;
   min-width: 26px;
   height: 26px;
 }
@@ -54,7 +60,12 @@
   height: 40px;
 }
 @media screen and (min-width: 1280px) {
+  .mfui-button_size-wide_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-wide_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -88,7 +99,12 @@
   }
 }
 @media screen and (min-width: 1024px) {
+  .mfui-button_size-desktop_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-desktop_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -122,7 +138,12 @@
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-button_size-tablet_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-tablet_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -156,7 +177,12 @@
   }
 }
 @media screen and (max-width: 767px) {
+  .mfui-button_size-mobile_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-mobile_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -213,6 +239,11 @@
 .mfui-button__text {
   margin-bottom: 2px;
 }
+.mfui-button__text_ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .mfui-button__content {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -221,6 +252,12 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.mfui-button__content_ellipsis {
+  width: inherit;
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
 .mfui-button__icon-arrow {
   width: 32px;
   height: 32px;

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

@@ -74,6 +74,8 @@ export interface IButtonProps {
     disabled?: boolean;
     /** Ссылка на элемент */
     buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+    /** Обрезать текст при недостаточной ширине и добавлять многоточие */
+    ellipsis?: boolean;
     /** Обработчик клика по кнопке */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }

package/dist/lib/components/Button/Button.js

@@ -107,6 +107,8 @@ var Button = function Button(_ref) {
       icon = _ref.icon,
       disabled = _ref.disabled,
       children = _ref.children,
+      _ref$ellipsis = _ref.ellipsis,
+      ellipsis = _ref$ellipsis === void 0 ? false : _ref$ellipsis,
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
@@ -154,15 +156,19 @@ var Button = function Button(_ref) {
     }
 
     return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
-      className: cn('content', contentClassName)
+      className: cn('content', {
+        ellipsis: ellipsis
+      }, contentClassName)
     }), icon && /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('icon')
     }, icon), children && /*#__PURE__*/_react["default"].createElement("span", {
-      className: cn('text')
+      className: cn('text', {
+        ellipsis: ellipsis
+      })
     }, children), !icon && showArrow && /*#__PURE__*/_react["default"].createElement(Arrow, {
       className: cn('icon-arrow')
     }));
-  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow]);
+  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow, ellipsis]);
 
   var contentType = _react["default"].useMemo(function () {
     switch (true) {
@@ -273,6 +279,7 @@ Button.propTypes = {
   buttonRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),
+  ellipsis: _propTypes["default"].bool,
   onClick: _propTypes["default"].func
 };
 var _default = Button;

package/dist/lib/components/Carousel/Carousel.js

@@ -249,7 +249,9 @@ var Carousel = function Carousel(_ref) {
   };
 
   var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
-    e.nativeEvent.preventDefault();
+    if (e.nativeEvent.target.closest(".".concat(cn()))) {
+      e.nativeEvent.preventDefault();
+    }
   };
 
   React.useEffect(function () {

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

@@ -7,17 +7,13 @@ h5 {
 }
 .mfui-notification {
   position: relative;
-  padding: 16px 12px;
+  padding: 20px 12px 20px 32px;
+  border-radius: 12px;
   background-color: var(--base);
 }
-@media screen and (min-width: 768px) {
+@media screen and (max-width: 767px) {
   .mfui-notification {
-    padding: 20px 28px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-notification {
-    padding: 20px 32px;
+    padding: 16px 12px;
   }
 }
 .mfui-notification__container {
@@ -38,14 +34,43 @@ h5 {
   padding-right: 20px;
 }
 .mfui-notification__text {
-  font-size: 15px;
-  line-height: 24px;
+  font-size: 12px;
+  line-height: 16px;
+  position: relative;
   max-width: 100%;
   margin: 0;
   color: var(--content);
+  -webkit-transition: height 300ms;
+  transition: height 300ms;
 }
-.mfui-notification__text_close-padding {
-  padding-right: 20px;
+@media screen and (min-width: 768px) {
+  .mfui-notification__text {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+.mfui-notification__short-text {
+  position: static;
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
+}
+.mfui-notification__short-text_hidden,
+.mfui-notification__full-text {
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity 300ms, visibility 300ms;
+  transition: opacity 300ms, visibility 300ms;
+}
+.mfui-notification__full-text_visible {
+  position: static;
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
 }
 .mfui-notification__content {
   display: -webkit-box;
@@ -61,23 +86,8 @@ h5 {
   -ms-flex-item-align: center;
       align-self: center;
   width: 100%;
-  max-width: 212px;
   margin-left: 12px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-notification__content {
-    max-width: 540px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-notification__content {
-    max-width: 640px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-notification__content {
-    max-width: 840px;
-  }
+  overflow: hidden;
 }
 .mfui-notification__icon-container {
   display: -webkit-box;
@@ -104,6 +114,45 @@ h5 {
   min-width: 32px;
   height: 32px;
 }
+.mfui-notification__text-container {
+  width: 85%;
+  margin-right: 56px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__text-container {
+    margin-right: 72px;
+  }
+}
+.mfui-notification__bottom {
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  margin-top: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__bottom {
+    gap: 20px;
+  }
+}
+.mfui-notification__bottom-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  overflow: hidden;
+}
+.mfui-notification__bottom_has-button {
+  margin-top: 12px;
+}
 .mfui-notification__link {
   font-size: 15px;
   line-height: 24px;
@@ -114,16 +163,58 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-top: 8px;
   cursor: pointer;
 }
-.mfui-notification__right-arrow {
+@media screen and (max-width: 767px) {
+  .mfui-notification__link {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.mfui-notification__link-arrow,
+.mfui-notification__collapse-arrow {
   width: 20px;
   min-width: 20px;
   height: 20px;
-  margin-top: 4px;
   fill: var(--systemBlue);
 }
+.mfui-notification__link-arrow {
+  margin-bottom: -2px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__link-arrow {
+    margin-bottom: -4px;
+  }
+}
+.mfui-notification__collapse-button {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 0;
+  border: none;
+  color: var(--systemBlue);
+  text-align: right;
+  background-color: transparent;
+  cursor: pointer;
+}
+@media screen and (max-width: 767px) {
+  .mfui-notification__collapse-button {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.mfui-notification__collapse_hidden {
+  visibility: hidden;
+}
 .mfui-notification__close {
   position: absolute;
   top: 8px;
@@ -153,10 +244,17 @@ h5 {
     height: 32px;
   }
 }
+.mfui-notification__close:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-notification__close:active {
+  background-color: var(--spbSky2);
+}
 .mfui-notification__close-icon {
   width: 10px;
   height: 10px;
-  fill: var(--stcBlack50);
+  opacity: 0.5;
+  fill: var(--content);
 }
 .mfui-notification_type_error .mfui-notification__icon-container {
   background-color: var(--fury20);
@@ -219,7 +317,7 @@ h5 {
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__link {
   color: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_error .mfui-notification__right-arrow {
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link-arrow {
   fill: var(--stcWhite);
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {