@megafon/ui-core 3.12.0 → 4.0.0-beta.10

package/CHANGELOG.md

@@ -3,6 +3,112 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.10](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.9...@megafon/ui-core@4.0.0-beta.10) (2022-07-15)
+
+
+### Bug Fixes
+
+* **accordion:** update mobile styles ([910b1c8](https://github.com/MegafonWebLab/megafon-ui/commit/910b1c8f987f1043e362b089a3ff4cfe9638070d))
+
+
+
+
+
+# [4.0.0-beta.9](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.8...@megafon/ui-core@4.0.0-beta.9) (2022-07-15)
+
+
+### Bug Fixes
+
+* **select:** update styles ([b863c8c](https://github.com/MegafonWebLab/megafon-ui/commit/b863c8c94af251d6b3c9ee39124486d7d5db9a58))
+
+
+
+
+
+# [4.0.0-beta.8](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.7...@megafon/ui-core@4.0.0-beta.8) (2022-07-14)
+
+
+### Bug Fixes
+
+* **accordion:** change focus and dark theme styles ([d3e07ea](https://github.com/MegafonWebLab/megafon-ui/commit/d3e07ea6fee0c131e25db1bb558d8b205d201e0c))
+* **notification:** change title typography ([f91a60e](https://github.com/MegafonWebLab/megafon-ui/commit/f91a60ee1562626494358ef529321f072ba70890))
+* **tabs:** change dark theme and indents styles ([272dfcb](https://github.com/MegafonWebLab/megafon-ui/commit/272dfcbeef750f2f7ae097b46f7d98405cf53a88))
+
+
+### Features
+
+* **header:** add new prop space ([e5bef7c](https://github.com/MegafonWebLab/megafon-ui/commit/e5bef7c8e13c57e477a4c25f07a4a4a6dbb8b6bd))
+
+
+
+
+
+# [4.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.6...@megafon/ui-core@4.0.0-beta.7) (2022-07-13)
+
+
+### Bug Fixes
+
+* **select:** fix styles ([3e79c68](https://github.com/MegafonWebLab/megafon-ui/commit/3e79c68fecde72e515b7ef52d38d9188e51680f6))
+
+
+
+
+
+# [4.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.5...@megafon/ui-core@4.0.0-beta.6) (2022-07-05)
+
+
+### Features
+
+* **inputlabel:** component removed ([1f236ac](https://github.com/MegafonWebLab/megafon-ui/commit/1f236ace90acfd7ea1917422677fa24c1c5abdf4))
+* **search:** component redesign ([d6f11eb](https://github.com/MegafonWebLab/megafon-ui/commit/d6f11eb7ee810b835879c7a31e5e01c426060ea1))
+* **select:** component redesign ([aeeda00](https://github.com/MegafonWebLab/megafon-ui/commit/aeeda00dfc1db70421a495a686954e19eecf815d))
+
+
+### BREAKING CHANGES
+
+* **inputlabel:** inputLabel component removed due to non-use
+
+
+
+
+
+# [4.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.12.0...@megafon/ui-core@4.0.0-beta.5) (2022-06-29)
+
+
+### Bug Fixes
+
+* **textfield:** fix textarea design bugs ([287d426](https://github.com/MegafonWebLab/megafon-ui/commit/287d42644b24ca0e1a3824d5907d8af78293d0e3))
+* **textfield:** update textarea scroll and resize ([9dbce52](https://github.com/MegafonWebLab/megafon-ui/commit/9dbce52d6bc3a71076ffdf2365715204231da774))
+
+
+### Features
+
+* **accordion:** update by new design ([92dab3a](https://github.com/MegafonWebLab/megafon-ui/commit/92dab3a367544d8507526e7a57a0a9a4015e3acf))
+* **caption:** add new Caption component; update .smallFont() less mixin ([b02a3f7](https://github.com/MegafonWebLab/megafon-ui/commit/b02a3f73ed8d5390d8427ab0a6bc62210710ba40))
+* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ffb6bc7](https://github.com/MegafonWebLab/megafon-ui/commit/ffb6bc709a4ef91536e359d5f9edc5501caf0c2c))
+* **tabs:** update by new design ([20ae2cc](https://github.com/MegafonWebLab/megafon-ui/commit/20ae2cc695e1245b9cd06fe37a9e4e3bb0c7eaae))
+* **textfield:** update by new design ([24ec769](https://github.com/MegafonWebLab/megafon-ui/commit/24ec769aeddac9a198941727aaca02ad0fb816f1))
+
+
+### BREAKING CHANGES
+
+* **textfield:** add defaultTransitionTiming in less global variables
+* **tabs:** new prop autoWidth added
+size prop small vallue removed
+new sizes
+* **textfield:** add placeholders text by default
+ label element positon changed
+ if label prop not setted, label element has text from placeholder (default or in props)
+* **accordion:** change next-sibling accordion styles
+* **caption:** .smallFont() less mixin line-height rule now set to 18px instead of 16px
+either accept new rules or manually add line-height: 16px in your components
+* **paragraph:** prop 'size' is no longer exists.
+use component Caption instead of Paragraph size="small"
+
+
+
+
+
 # [3.12.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.11.0...@megafon/ui-core@3.12.0) (2022-06-28)
 
 

package/dist/es/colors/Colors.css

@@ -2,6 +2,8 @@
   margin: 0 -80px;
   padding: 56px 80px 40px;
   background-color: var(--spbSky0);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,6 +92,8 @@
   font-size: 12px;
   line-height: 18px;
   text-align: center;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
 }
 @media screen and (max-width: 1023px) {
   .colors__description {

package/dist/es/components/Accordion/Accordion.css

@@ -1,51 +1,88 @@
 .mfui-accordion {
-  border-top: 1px solid var(--spbSky2);
-  border-bottom: 1px solid var(--spbSky2);
+  border-radius: 12px;
+  background: var(--spbSky0);
 }
 .mfui-accordion + .mfui-accordion {
-  border-top: none;
-}
-.mfui-accordion:not(.mfui-accordion_open) .mfui-accordion__title-wrap:hover {
-  background: var(--spbSky0);
+  margin-top: 8px;
 }
-.mfui-accordion.mfui-accordion_open .mfui-accordion__title-wrap {
-  background: var(--spbSky1);
+@media screen and (min-width: 768px) {
+  .mfui-accordion + .mfui-accordion {
+    margin-top: 12px;
+  }
 }
 .mfui-accordion__title-wrap {
   position: relative;
-  padding: 24px 52px 24px 16px;
+  padding: 20px 44px 20px 16px;
+  border-radius: 12px;
   cursor: pointer;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__title-wrap {
-    padding: 24px 68px 24px 24px;
+    padding: 20px 56px 20px 24px;
   }
 }
-@media screen and (min-width: 1280px) {
-  .mfui-accordion__title-wrap {
-    padding: 24px 72px 24px 24px;
+.mfui-accordion__title-wrap:hover {
+  background-color: var(--spbSky1);
+}
+@media screen and (max-width: 1023px) {
+  .mfui-accordion__title-wrap:focus {
+    background-color: inherit;
   }
 }
 .mfui-accordion__icon-box {
   position: absolute;
   top: 50%;
   right: 20px;
-  width: 32px;
-  height: 32px;
-  outline: none;
+  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;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  opacity: 1;
-  fill: var(--content);
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__icon-box {
+    right: 24px;
+    width: 32px;
+    height: 32px;
+  }
+}
+.mfui-accordion__icon {
+  width: 20px;
+  height: 20px;
+  -webkit-transition: -webkit-transform 0.6s;
+  transition: -webkit-transform 0.6s;
+  transition: transform 0.6s;
+  transition: transform 0.6s, -webkit-transform 0.6s;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__icon {
+    width: 32px;
+    height: 32px;
+  }
 }
 .mfui-accordion__content-inner {
-  padding: 24px 16px;
+  padding: 4px 20px 20px 16px;
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__content-inner {
-    padding: 24px;
+    padding: 4px 24px 20px;
   }
 }
-.mfui-accordion__icon {
-  fill: var(--content);
+.mfui-accordion_opened .mfui-accordion__icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }

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

@@ -11,15 +11,9 @@ var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11.2 12l4.8 4.8 4.8-4.8 1.7 1.6L16 20l-6.5-6.4z"
-  }));
-};
-
-var ArrowUp = function ArrowUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20.8 20L16 15.2 11.2 20l-1.7-1.6L16 12l6.5 6.4z"
+    d: "M11 14h10l-5 6z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
   }));
 };
 
@@ -58,24 +52,25 @@ var Accordion = function Accordion(_ref) {
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
+  var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
-      open: isOpenedState
+      opened: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle,
-    onKeyDown: handleClickTitle
+    onKeyDown: handleClickTitle,
+    tabIndex: 0,
+    role: "button"
   }), /*#__PURE__*/React.createElement(Header, _extends({
     as: "h5"
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    role: "button",
-    className: cn('icon-box', {
-      open: isOpenedState
-    })
-  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp)) : /*#__PURE__*/React.createElement(ArrowDown, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown)))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
+    className: cn('icon-box')
+  }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
+    className: cn('icon')
+  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState

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

@@ -1,6 +1,6 @@
 .mfui-price-badge {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

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

@@ -30,6 +30,6 @@
 .mfui-promo-badge__text {
   font-family: inherit;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   font-weight: 500;
 }

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

@@ -32,7 +32,7 @@
 }
 .mfui-timer-badge__text {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   font-family: inherit;
   margin-left: 2px;
   font-weight: 500;

package/dist/es/components/Button/Button.css

@@ -27,7 +27,7 @@
 }
 .mfui-button_size-all_extra-small .mfui-button__inner {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   min-width: 26px;
   height: 26px;
 }
@@ -65,7 +65,7 @@
   }
   .mfui-button_size-wide_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }
@@ -104,7 +104,7 @@
   }
   .mfui-button_size-desktop_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }
@@ -143,7 +143,7 @@
   }
   .mfui-button_size-tablet_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }
@@ -182,7 +182,7 @@
   }
   .mfui-button_size-mobile_extra-small .mfui-button__inner {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
     min-width: 26px;
     height: 26px;
   }

package/dist/es/components/Calendar/components/Day/Day.css

@@ -21,7 +21,7 @@
           user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-day:last-child {
   padding-right: 0;

package/dist/es/components/Calendar/components/Month/Month.css

@@ -56,7 +56,7 @@
 }
 .mfui-month__weekday {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   width: 20px;
   height: 16px;
   color: var(--content);

package/dist/es/components/Caption/Caption.css

@@ -0,0 +1,48 @@
+.mfui-caption {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  margin: 0;
+}
+.mfui-caption_variant_normal {
+  font-weight: 400;
+}
+.mfui-caption_variant_medium {
+  font-weight: 600;
+}
+.mfui-caption_space_wide {
+  line-height: 18px;
+}
+.mfui-caption_space_tight {
+  line-height: 14px;
+}
+.mfui-caption_align_left {
+  text-align: left;
+}
+.mfui-caption_align_center {
+  text-align: center;
+}
+.mfui-caption_align_right {
+  text-align: right;
+}
+.mfui-caption_has-margin {
+  margin: 0 0 16px;
+}
+.mfui-caption_color_inherit {
+  color: inherit;
+}
+.mfui-caption_color_default {
+  color: var(--content);
+}
+.mfui-caption_color_gray {
+  color: var(--spbSky3);
+}
+.mfui-caption_color_white {
+  color: var(--stcWhite);
+}
+.mfui-caption_color_green {
+  color: var(--brandGreen);
+}
+.mfui-caption_color_purple {
+  color: var(--brandPurple);
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import './Caption.less';
+declare const COLORS: {
+    readonly INHERIT: "inherit";
+    readonly DEFAULT: "default";
+    readonly GRAY: "gray";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
+export interface ICaptionProps {
+    /** Выравнивание по горизонтали */
+    align?: 'left' | 'center' | 'right';
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Начертание шрифта: обычный или полужирный */
+    variant?: 'normal' | 'medium';
+    /** Вертикальный отступ */
+    hasMargin?: boolean;
+    /** Цвет текста */
+    color?: ColorType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Caption: React.FC<ICaptionProps>;
+export default Caption;

package/dist/es/components/Caption/Caption.js

@@ -0,0 +1,51 @@
+import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./Caption.css";
+var COLORS = {
+  INHERIT: 'inherit',
+  DEFAULT: 'default',
+  GRAY: 'gray',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var cn = cnCreate('mfui-caption');
+
+var Caption = function Caption(_ref) {
+  var align = _ref.align,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      className = _ref.className,
+      _ref$hasMargin = _ref.hasMargin,
+      hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      align: align,
+      color: color,
+      space: space,
+      variant: variant,
+      'has-margin': hasMargin
+    }, className)
+  }), children);
+};
+
+Caption.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  space: PropTypes.oneOf(['wide', 'tight']),
+  variant: PropTypes.oneOf(['normal', 'medium']),
+  hasMargin: PropTypes.bool,
+  color: PropTypes.oneOf(Object.values(COLORS))
+};
+export default Caption;

package/dist/es/components/Header/Header.css

@@ -84,6 +84,9 @@
   line-height: 24px;
   font-weight: 500;
 }
+.mfui-header_space_tight.mfui-header_level_h5 {
+  line-height: 18px;
+}
 .mfui-header_margin.mfui-header_level_h5 {
   margin: 24px 0 16px 0;
 }

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

@@ -3,6 +3,8 @@ import './Header.less';
 interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
+    /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */
+    space?: 'wide' | 'tight';
     /** Цвет */
     color?: 'default' | 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
     /** Включить отступ */

package/dist/es/components/Header/Header.js

@@ -9,6 +9,8 @@ var Header = function Header(_ref) {
   var addition = _ref.addition,
       _ref$as = _ref.as,
       level = _ref$as === void 0 ? 'h1' : _ref$as,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
       children = _ref.children,
       className = _ref.className,
       _ref$color = _ref.color,
@@ -19,12 +21,15 @@ var Header = function Header(_ref) {
       margin = _ref.margin,
       onClick = _ref.onClick;
   var ElementType = level;
+  var hasVariousSpaces = level === 'h5';
+  var spaceLevel = hasVariousSpaces && space;
   return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       margin: margin,
       level: level,
-      'h-align': hAlign
+      'h-align': hAlign,
+      space: spaceLevel
     }, className),
     onClick: onClick
   }), children, addition && /*#__PURE__*/React.createElement("div", {
@@ -35,6 +40,7 @@ var Header = function Header(_ref) {
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
   color: PropTypes.oneOf(['default', 'black', 'white', 'green', 'purple', 'blue', 'inherit']),
+  space: PropTypes.oneOf(['wide', 'tight']),
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),

package/dist/es/components/Notification/Notification.css

@@ -22,12 +22,16 @@ h5 {
   display: flex;
 }
 .mfui-notification__title {
-  margin-bottom: 8px;
+  display: block;
+  margin-bottom: 4px;
   color: var(--content);
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 18px;
 }
 @media screen and (min-width: 1280px) {
   .mfui-notification__title {
-    margin-bottom: 4px;
+    line-height: 24px;
   }
 }
 .mfui-notification__title_close-padding {
@@ -35,7 +39,7 @@ h5 {
 }
 .mfui-notification__text {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   position: relative;
   max-width: 100%;
   margin: 0;
@@ -168,7 +172,7 @@ h5 {
 @media screen and (max-width: 767px) {
   .mfui-notification__link {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
   }
 }
 .mfui-notification__link-arrow,
@@ -209,7 +213,7 @@ h5 {
 @media screen and (max-width: 767px) {
   .mfui-notification__collapse-button {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
   }
 }
 .mfui-notification__collapse_hidden {

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

@@ -7,7 +7,6 @@ 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";
 import "./Notification.css";
@@ -298,13 +297,9 @@ var Notification = function Notification(_ref) {
     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",
+  }, title && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }, title), /*#__PURE__*/React.createElement("div", _extends({
+  }), title), /*#__PURE__*/React.createElement("div", _extends({
     ref: wrapTextRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {