@megafon/ui-core 4.15.0 → 4.15.2

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.15.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.15.1...@megafon/ui-core@4.15.2) (2023-04-11)
+
+
+### Bug Fixes
+
+* **carousel:** fix gradientColor type and gradient height ([2d7eea0](https://github.com/MegafonWebLab/megafon-ui/commit/2d7eea0f215433912542a5a6eb99f48c7331a6d2))
+
+
+
+
+
+## [4.15.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.15.0...@megafon/ui-core@4.15.1) (2023-04-04)
+
+
+### Bug Fixes
+
+* **color:** new danger color for text type button ([7f53fd8](https://github.com/MegafonWebLab/megafon-ui/commit/7f53fd8d369f664e678c8cb2a437ef4fa5c801fc))
+* **pricebadge:** new props size and subtitle ([5f40360](https://github.com/MegafonWebLab/megafon-ui/commit/5f40360509e703a8fab2f4936aa109a9b63bafcd))
+
+
+
+
+
 # [4.15.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.14.2...@megafon/ui-core@4.15.0) (2023-03-27)
 
 

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

@@ -63,6 +63,11 @@
 .mfui-price-badge_theme_red .mfui-price-badge__icon {
   fill: var(--fury);
 }
+.mfui-price-badge_size_big {
+  font-size: 15px;
+  line-height: 18px;
+  padding: 12px 12px 12px 4px;
+}
 .mfui-price-badge__text {
   font-family: inherit;
   margin-left: 2px;
@@ -75,4 +80,15 @@
 .mfui-price-badge__icon {
   height: 20px;
   width: 20px;
+  min-width: 20px;
+}
+.mfui-price-badge_size_big .mfui-price-badge__icon {
+  height: 32px;
+  width: 32px;
+  min-width: 32px;
+}
+.mfui-price-badge_size_big .mfui-price-badge__sub-title {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 2px;
 }

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

@@ -12,8 +12,13 @@ export declare const PriceBadgeIcon: {
     readonly CHECK: "check";
     readonly ATTENTION: "attention";
 };
+export declare const PriseBadgeSize: {
+    readonly SMALL: "small";
+    readonly BIG: "big";
+};
 declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
 declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
+declare type PriseBadgeSizeType = typeof PriseBadgeSize[keyof typeof PriseBadgeSize];
 export interface IPriceBadgeProps {
     /** Адаптивный режим */
     isAdaptive?: boolean;
@@ -23,6 +28,10 @@ export interface IPriceBadgeProps {
     theme?: PriceBadgeThemeType;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Размер бейджа */
+    size?: PriseBadgeSizeType;
+    /** Дополнительный текст (только для size="big") */
+    subTitle?: string;
     /** Дополнительные data-атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

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

@@ -43,6 +43,44 @@ var TimerIcon = function TimerIcon(props) {
   }));
 };
 
+var AttentionIconBig = function AttentionIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
+  }));
+};
+
+var CheckIconBig = function CheckIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-1.306-10.016l6.32-7.672 1.486 1.37s-7.538 9.186-7.7 9.193c-.136 0-4.488-4.484-4.488-4.484l1.438-1.425 2.944 3.018z"
+  }));
+};
+
+var PriceIconBig = function PriceIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-5-7v-2h2v-2h-2v-2h2V9h4a4 4 0 110 8h-2v2h4v2h-4v2h-2v-2h-2zm7.414-9.414A2 2 0 0017 11h-2v4h2a2 2 0 001.414-3.414z"
+  }));
+};
+
+var TimerIconBig = function TimerIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm1-12.414V9h-2v7.414l4 4L20.414 19 17 15.586z"
+  }));
+};
+
 export var PriceBadgeTheme = {
   RED: 'red',
   GREY: 'grey',
@@ -55,19 +93,34 @@ export var PriceBadgeIcon = {
   CHECK: 'check',
   ATTENTION: 'attention'
 };
+export var PriseBadgeSize = {
+  SMALL: 'small',
+  BIG: 'big'
+};
 
-var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
-  switch (iconType) {
-    case PriceBadgeIcon.TIMER:
-      return TimerIcon;
+var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
+  var isBigIcon = size === PriseBadgeSize.BIG;
+
+  switch (true) {
+    case iconType === PriceBadgeIcon.TIMER && isBigIcon:
+      return TimerIconBig;
+
+    case iconType === PriceBadgeIcon.PRICE && isBigIcon:
+      return PriceIconBig;
+
+    case iconType === PriceBadgeIcon.CHECK && isBigIcon:
+      return CheckIconBig;
+
+    case iconType === PriceBadgeIcon.ATTENTION && isBigIcon:
+      return AttentionIconBig;
 
-    case PriceBadgeIcon.PRICE:
+    case iconType === PriceBadgeIcon.PRICE:
       return PriceIcon;
 
-    case PriceBadgeIcon.CHECK:
+    case iconType === PriceBadgeIcon.CHECK:
       return CheckIcon;
 
-    case PriceBadgeIcon.ATTENTION:
+    case iconType === PriceBadgeIcon.ATTENTION:
       return AttentionIcon;
 
     default:
@@ -84,28 +137,37 @@ var PriceBadge = function PriceBadge(_ref) {
       isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'grey' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      subTitle = _ref.subTitle,
       className = _ref.className,
       dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  var Icon = getPriceBadgeIcon(iconType);
+  var Icon = getPriceBadgeIcon(iconType, size);
+  var showSubTitle = size === 'big' && !!subTitle;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       theme: theme,
-      adaptive: isAdaptive
+      adaptive: isAdaptive,
+      size: size
     }, className)
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-container')
   }, /*#__PURE__*/React.createElement(Icon, {
     className: cn('icon')
-  })), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: cn('text')
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", null, children), showSubTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title')
+  }, subTitle)));
 };
 
 PriceBadge.propTypes = {
   isAdaptive: PropTypes.bool,
   iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
   theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
+  size: PropTypes.oneOf(Object.values(PriseBadgeSize)),
+  subTitle: PropTypes.string,
   className: PropTypes.string,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired

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

@@ -494,6 +494,28 @@
 .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg {
   fill: var(--buttonDown);
 }
+.mfui-button_type_text.mfui-button_theme_danger {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  color: var(--fury);
+  background-color: transparent;
+}
+.mfui-button_type_text.mfui-button_theme_danger svg {
+  fill: var(--fury);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover {
+  color: var(--warmRedC);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover svg {
+  fill: var(--warmRedC);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active {
+  color: var(--buttonDown);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active svg {
+  fill: var(--buttonDown);
+}
 .mfui-button_type_primary.mfui-button_theme_green {
   color: var(--stcWhite);
   background-color: var(--brandGreen);

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

@@ -13,6 +13,7 @@ export declare const ButtonThemes: {
     readonly PURPLE_SOFT: "purple-soft";
     readonly WHITE: "white";
     readonly BLACK: "black";
+    readonly DANGER: "danger";
 };
 declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {

package/dist/es/components/Button/Button.js

@@ -29,7 +29,8 @@ export var ButtonThemes = {
   PURPLE: 'purple',
   PURPLE_SOFT: 'purple-soft',
   WHITE: 'white',
-  BLACK: 'black'
+  BLACK: 'black',
+  DANGER: 'danger'
 };
 export var ButtonSizes = {
   EXTRA_SMALL: 'extra-small',

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

@@ -49,9 +49,9 @@
   content: '';
   position: absolute;
   top: 0;
+  bottom: 0;
   z-index: 5;
   width: var(--gap);
-  height: 85%;
 }
 @media screen and (max-width: 1023px) {
   .mfui-carousel__swiper_gradient:before,

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import SwiperCore from 'swiper';
 import { PaginationOptions } from 'swiper/types/components/pagination';
-import { GradientTheme } from './useGradient';
 import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
@@ -14,9 +13,18 @@ export declare const EffectTheme: {
 declare const SlidesPerView: {
     readonly AUTO: "auto";
 };
+declare const GradientTheme: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+    readonly BLACK: "black";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+};
 declare type SlidesPerViewType = typeof SlidesPerView[keyof typeof SlidesPerView];
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
 declare type EffectThemeType = typeof EffectTheme[keyof typeof EffectTheme];
+declare type GradientThemeType = typeof GradientTheme[keyof typeof GradientTheme];
 export declare type SlidesSettingsType = {
     [key: number]: {
         slidesPerView: number | SlidesPerViewType;
@@ -86,7 +94,7 @@ export interface ICarouselProps {
     /** Наличие градиента по краям контейнера */
     gradient?: boolean;
     /** Цвет градиента */
-    gradientColor?: GradientTheme;
+    gradientColor?: GradientThemeType;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;

package/dist/es/components/Carousel/Carousel.js

@@ -19,7 +19,7 @@ import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
 import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
-import useGradient, { GradientTheme } from "./useGradient";
+import useGradient from "./useGradient";
 import "./Carousel.css";
 SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
@@ -33,6 +33,14 @@ export var EffectTheme = {
 var SlidesPerView = {
   AUTO: 'auto'
 };
+var GradientTheme = {
+  DEFAULT: 'default',
+  GREEN: 'green',
+  BLACK: 'black',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2'
+};
 
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
@@ -101,7 +109,7 @@ var Carousel = function Carousel(_ref) {
       _ref$gradient = _ref.gradient,
       gradient = _ref$gradient === void 0 ? false : _ref$gradient,
       _ref$gradientColor = _ref.gradientColor,
-      gradientColor = _ref$gradientColor === void 0 ? GradientTheme.DEFAULT : _ref$gradientColor;
+      gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),

package/dist/es/components/Carousel/useGradient.d.ts

@@ -6,13 +6,5 @@ declare type SwiperConfig = {
     slidesSettings: SlidesSettingsType;
     isLocked: boolean;
 };
-export declare enum GradientTheme {
-    DEFAULT = "default",
-    GREEN = "green",
-    BLACK = "black",
-    SPB_SKY_0 = "spbSky0",
-    SPB_SKY_1 = "spbSky1",
-    SPB_SKY_2 = "spbSky2"
-}
 declare const _default: (gradient: boolean, swiper: SwiperConfig) => CSSProperties;
 export default _default;

package/dist/es/components/Carousel/useGradient.js

@@ -3,17 +3,6 @@ import { useState, useEffect } from 'react';
 import { breakpoints } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import throttleTime from "../../constants/throttleTime";
-export var GradientTheme;
-
-(function (GradientTheme) {
-  GradientTheme["DEFAULT"] = "default";
-  GradientTheme["GREEN"] = "green";
-  GradientTheme["BLACK"] = "black";
-  GradientTheme["SPB_SKY_0"] = "spbSky0";
-  GradientTheme["SPB_SKY_1"] = "spbSky1";
-  GradientTheme["SPB_SKY_2"] = "spbSky2";
-})(GradientTheme || (GradientTheme = {}));
-
 export default (function (gradient, swiper) {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),

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

@@ -63,6 +63,11 @@
 .mfui-price-badge_theme_red .mfui-price-badge__icon {
   fill: var(--fury);
 }
+.mfui-price-badge_size_big {
+  font-size: 15px;
+  line-height: 18px;
+  padding: 12px 12px 12px 4px;
+}
 .mfui-price-badge__text {
   font-family: inherit;
   margin-left: 2px;
@@ -75,4 +80,15 @@
 .mfui-price-badge__icon {
   height: 20px;
   width: 20px;
+  min-width: 20px;
+}
+.mfui-price-badge_size_big .mfui-price-badge__icon {
+  height: 32px;
+  width: 32px;
+  min-width: 32px;
+}
+.mfui-price-badge_size_big .mfui-price-badge__sub-title {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 2px;
 }

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -12,8 +12,13 @@ export declare const PriceBadgeIcon: {
     readonly CHECK: "check";
     readonly ATTENTION: "attention";
 };
+export declare const PriseBadgeSize: {
+    readonly SMALL: "small";
+    readonly BIG: "big";
+};
 declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
 declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
+declare type PriseBadgeSizeType = typeof PriseBadgeSize[keyof typeof PriseBadgeSize];
 export interface IPriceBadgeProps {
     /** Адаптивный режим */
     isAdaptive?: boolean;
@@ -23,6 +28,10 @@ export interface IPriceBadgeProps {
     theme?: PriceBadgeThemeType;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Размер бейджа */
+    size?: PriseBadgeSizeType;
+    /** Дополнительный текст (только для size="big") */
+    subTitle?: string;
     /** Дополнительные data-атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.PriceBadgeIcon = exports.PriceBadgeTheme = void 0;
+exports["default"] = exports.PriseBadgeSize = exports.PriceBadgeIcon = exports.PriceBadgeTheme = void 0;
 
 require("core-js/modules/es.object.values");
 
@@ -61,6 +61,44 @@ var TimerIcon = function TimerIcon(props) {
   }));
 };
 
+var AttentionIconBig = function AttentionIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
+  }));
+};
+
+var CheckIconBig = function CheckIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-1.306-10.016l6.32-7.672 1.486 1.37s-7.538 9.186-7.7 9.193c-.136 0-4.488-4.484-4.488-4.484l1.438-1.425 2.944 3.018z"
+  }));
+};
+
+var PriceIconBig = function PriceIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-5-7v-2h2v-2h-2v-2h2V9h4a4 4 0 110 8h-2v2h4v2h-4v2h-2v-2h-2zm7.414-9.414A2 2 0 0017 11h-2v4h2a2 2 0 001.414-3.414z"
+  }));
+};
+
+var TimerIconBig = function TimerIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm1-12.414V9h-2v7.414l4 4L20.414 19 17 15.586z"
+  }));
+};
+
 var PriceBadgeTheme = {
   RED: 'red',
   GREY: 'grey',
@@ -75,19 +113,35 @@ var PriceBadgeIcon = {
   ATTENTION: 'attention'
 };
 exports.PriceBadgeIcon = PriceBadgeIcon;
+var PriseBadgeSize = {
+  SMALL: 'small',
+  BIG: 'big'
+};
+exports.PriseBadgeSize = PriseBadgeSize;
 
-var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
-  switch (iconType) {
-    case PriceBadgeIcon.TIMER:
-      return TimerIcon;
+var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
+  var isBigIcon = size === PriseBadgeSize.BIG;
+
+  switch (true) {
+    case iconType === PriceBadgeIcon.TIMER && isBigIcon:
+      return TimerIconBig;
+
+    case iconType === PriceBadgeIcon.PRICE && isBigIcon:
+      return PriceIconBig;
+
+    case iconType === PriceBadgeIcon.CHECK && isBigIcon:
+      return CheckIconBig;
+
+    case iconType === PriceBadgeIcon.ATTENTION && isBigIcon:
+      return AttentionIconBig;
 
-    case PriceBadgeIcon.PRICE:
+    case iconType === PriceBadgeIcon.PRICE:
       return PriceIcon;
 
-    case PriceBadgeIcon.CHECK:
+    case iconType === PriceBadgeIcon.CHECK:
       return CheckIcon;
 
-    case PriceBadgeIcon.ATTENTION:
+    case iconType === PriceBadgeIcon.ATTENTION:
       return AttentionIcon;
 
     default:
@@ -104,28 +158,37 @@ var PriceBadge = function PriceBadge(_ref) {
       isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'grey' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      subTitle = _ref.subTitle,
       className = _ref.className,
       dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  var Icon = getPriceBadgeIcon(iconType);
+  var Icon = getPriceBadgeIcon(iconType, size);
+  var showSubTitle = size === 'big' && !!subTitle;
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       theme: theme,
-      adaptive: isAdaptive
+      adaptive: isAdaptive,
+      size: size
     }, className)
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-container')
   }, /*#__PURE__*/React.createElement(Icon, {
     className: cn('icon')
-  })), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: cn('text')
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", null, children), showSubTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title')
+  }, subTitle)));
 };
 
 PriceBadge.propTypes = {
   isAdaptive: PropTypes.bool,
   iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
   theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
+  size: PropTypes.oneOf(Object.values(PriseBadgeSize)),
+  subTitle: PropTypes.string,
   className: PropTypes.string,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired

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

@@ -494,6 +494,28 @@
 .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg {
   fill: var(--buttonDown);
 }
+.mfui-button_type_text.mfui-button_theme_danger {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  color: var(--fury);
+  background-color: transparent;
+}
+.mfui-button_type_text.mfui-button_theme_danger svg {
+  fill: var(--fury);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover {
+  color: var(--warmRedC);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover svg {
+  fill: var(--warmRedC);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active {
+  color: var(--buttonDown);
+}
+.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active svg {
+  fill: var(--buttonDown);
+}
 .mfui-button_type_primary.mfui-button_theme_green {
   color: var(--stcWhite);
   background-color: var(--brandGreen);

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

@@ -13,6 +13,7 @@ export declare const ButtonThemes: {
     readonly PURPLE_SOFT: "purple-soft";
     readonly WHITE: "white";
     readonly BLACK: "black";
+    readonly DANGER: "danger";
 };
 declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {

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

@@ -53,7 +53,8 @@ var ButtonThemes = {
   PURPLE: 'purple',
   PURPLE_SOFT: 'purple-soft',
   WHITE: 'white',
-  BLACK: 'black'
+  BLACK: 'black',
+  DANGER: 'danger'
 };
 exports.ButtonThemes = ButtonThemes;
 var ButtonSizes = {

package/dist/lib/components/Carousel/Carousel.css

@@ -49,9 +49,9 @@
   content: '';
   position: absolute;
   top: 0;
+  bottom: 0;
   z-index: 5;
   width: var(--gap);
-  height: 85%;
 }
 @media screen and (max-width: 1023px) {
   .mfui-carousel__swiper_gradient:before,

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import SwiperCore from 'swiper';
 import { PaginationOptions } from 'swiper/types/components/pagination';
-import { GradientTheme } from './useGradient';
 import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
@@ -14,9 +13,18 @@ export declare const EffectTheme: {
 declare const SlidesPerView: {
     readonly AUTO: "auto";
 };
+declare const GradientTheme: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+    readonly BLACK: "black";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+};
 declare type SlidesPerViewType = typeof SlidesPerView[keyof typeof SlidesPerView];
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
 declare type EffectThemeType = typeof EffectTheme[keyof typeof EffectTheme];
+declare type GradientThemeType = typeof GradientTheme[keyof typeof GradientTheme];
 export declare type SlidesSettingsType = {
     [key: number]: {
         slidesPerView: number | SlidesPerViewType;
@@ -86,7 +94,7 @@ export interface ICarouselProps {
     /** Наличие градиента по краям контейнера */
     gradient?: boolean;
     /** Цвет градиента */
-    gradientColor?: GradientTheme;
+    gradientColor?: GradientThemeType;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;

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

@@ -43,7 +43,7 @@ var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 
 var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
 
-var _useGradient = _interopRequireWildcard(require("./useGradient"));
+var _useGradient = _interopRequireDefault(require("./useGradient"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -68,6 +68,14 @@ exports.EffectTheme = EffectTheme;
 var SlidesPerView = {
   AUTO: 'auto'
 };
+var GradientTheme = {
+  DEFAULT: 'default',
+  GREEN: 'green',
+  BLACK: 'black',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2'
+};
 
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
@@ -136,7 +144,7 @@ var Carousel = function Carousel(_ref) {
       _ref$gradient = _ref.gradient,
       gradient = _ref$gradient === void 0 ? false : _ref$gradient,
       _ref$gradientColor = _ref.gradientColor,
-      gradientColor = _ref$gradientColor === void 0 ? _useGradient.GradientTheme.DEFAULT : _ref$gradientColor;
+      gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
 
   var _React$useState = _react["default"].useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -429,7 +437,7 @@ Carousel.propTypes = {
   onPrevClick: PropTypes.func,
   onChange: PropTypes.func,
   gradient: PropTypes.oneOfType([PropTypes.bool]),
-  gradientColor: PropTypes.oneOf(Object.values(_useGradient.GradientTheme))
+  gradientColor: PropTypes.oneOf(Object.values(GradientTheme))
 };
 var _default = Carousel;
 exports["default"] = _default;

package/dist/lib/components/Carousel/useGradient.d.ts

@@ -6,13 +6,5 @@ declare type SwiperConfig = {
     slidesSettings: SlidesSettingsType;
     isLocked: boolean;
 };
-export declare enum GradientTheme {
-    DEFAULT = "default",
-    GREEN = "green",
-    BLACK = "black",
-    SPB_SKY_0 = "spbSky0",
-    SPB_SKY_1 = "spbSky1",
-    SPB_SKY_2 = "spbSky2"
-}
 declare const _default: (gradient: boolean, swiper: SwiperConfig) => CSSProperties;
 export default _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.GradientTheme = void 0;
+exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -17,18 +17,6 @@ var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var GradientTheme;
-exports.GradientTheme = GradientTheme;
-
-(function (GradientTheme) {
-  GradientTheme["DEFAULT"] = "default";
-  GradientTheme["GREEN"] = "green";
-  GradientTheme["BLACK"] = "black";
-  GradientTheme["SPB_SKY_0"] = "spbSky0";
-  GradientTheme["SPB_SKY_1"] = "spbSky1";
-  GradientTheme["SPB_SKY_2"] = "spbSky2";
-})(GradientTheme || (exports.GradientTheme = GradientTheme = {}));
-
 var _default = function _default(gradient, swiper) {
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.15.0",
+  "version": "4.15.2",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.8.1",
+    "@megafon/ui-icons": "^2.9.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "2b3c9ee6628b04ef8cf0105476716cac5558db02"
+  "gitHead": "c2d54353eccef1c32cac6aa03b91d48e98dcdb84"
 }