@megafon/ui-core 6.0.0-beta.4 → 6.0.1

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

@@ -2,9 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs, checkEventIsClickOrEnterPress } from '@megafon/ui-helpers';
-import Collapse from "../_Collapse/Collapse";
+import * as PropTypes from 'prop-types';
+import Collapse from "../Collapse/Collapse";
 import Header from "../Header/Header";
 import "./Accordion.css";
+
 var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -14,42 +16,49 @@ var ArrowDown = function ArrowDown(props) {
     clipRule: "evenodd"
   }));
 };
+
 var cn = cnCreate('mfui-accordion');
+
 var Accordion = function Accordion(_ref) {
   var rootRef = _ref.rootRef,
-    title = _ref.title,
-    _ref$titleTag = _ref.titleTag,
-    titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
-    _ref$isOpened = _ref.isOpened,
-    isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-    _ref$hasMicrodata = _ref.hasMicrodata,
-    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
-    openedClass = _ref$classes2.openedClass,
-    rootPropsClasses = _ref$classes2.root,
-    collapsePropsClasses = _ref$classes2.collapse,
-    titleWrapPropsClasses = _ref$classes2.titleWrap,
-    titlePropsClasses = _ref$classes2.title,
-    dataAttrs = _ref.dataAttrs,
-    onClickAccordion = _ref.onClickAccordion,
-    children = _ref.children;
+      title = _ref.title,
+      _ref$titleTag = _ref.titleTag,
+      titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+      _ref$isOpened = _ref.isOpened,
+      isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var openedClass = _ref$classes.openedClass,
+      rootPropsClasses = _ref$classes.root,
+      collapsePropsClasses = _ref$classes.collapse,
+      titleWrapPropsClasses = _ref$classes.titleWrap,
+      titlePropsClasses = _ref$classes.title,
+      dataAttrs = _ref.dataAttrs,
+      onClickAccordion = _ref.onClickAccordion,
+      children = _ref.children;
+
   var _React$useState = React.useState(isOpened),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isOpenedState = _React$useState2[0],
-    setIsOpenedState = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpenedState = _React$useState2[0],
+      setIsOpenedState = _React$useState2[1];
+
   React.useEffect(function () {
     setIsOpenedState(isOpened);
   }, [isOpened]);
+
   var handleClickTitle = function handleClickTitle(e) {
     if (checkEventIsClickOrEnterPress(e)) {
       onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState);
       setIsOpenedState(!isOpenedState);
     }
   };
+
   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;
+
   var renderContent = function renderContent() {
     if (hasMicrodata) {
       return /*#__PURE__*/React.createElement("div", {
@@ -60,8 +69,10 @@ var Accordion = function Accordion(_ref) {
         itemProp: "text"
       }, children));
     }
+
     return children;
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
@@ -94,4 +105,36 @@ var Accordion = function Accordion(_ref) {
     isOpened: isOpenedState
   }, renderContent()));
 };
+
+Accordion.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
+  isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    openedClass: PropTypes.string,
+    root: PropTypes.string,
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string,
+    title: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onClickAccordion: PropTypes.func
+};
 export default Accordion;

package/dist/es/components/Avatar/Avatar.css

@@ -1 +1,52 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:15px;font-weight:500;height:40px;justify-content:center;overflow:hidden;width:40px}.mfui-avatar__text{display:block}.mfui-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-avatar__placeholder{opacity:.3}.mfui-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-avatar_color_green .mfui-avatar__placeholder{fill:var(--brandGreen)}.mfui-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-avatar_color_gray .mfui-avatar__placeholder{fill:var(--spbSky3)}.mfui-avatar_size_auto{font-size:inherit;height:100%;width:100%}
+.mfui-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 15px;
+}
+.mfui-avatar__text {
+  display: block;
+}
+.mfui-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: var(--base);
+}
+.mfui-avatar__placeholder {
+  opacity: 0.3;
+}
+.mfui-avatar_color_green {
+  color: var(--brandGreen);
+  background-color: var(--brandGreen20);
+}
+.mfui-avatar_color_green .mfui-avatar__placeholder {
+  fill: var(--brandGreen);
+}
+.mfui-avatar_color_gray {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+}
+.mfui-avatar_color_gray .mfui-avatar__placeholder {
+  fill: var(--spbSky3);
+}
+.mfui-avatar_size_auto {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './Avatar.scss';
+import './Avatar.less';
 export interface IAvatarProps {
     /** Ссылка на изображение. Имеет приоритет над текстом */
     src?: string;

package/dist/es/components/Avatar/Avatar.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.slice.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./Avatar.css";
+
 var PlaceholderIcon = function PlaceholderIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 40 40"
@@ -10,18 +12,21 @@ var PlaceholderIcon = function PlaceholderIcon(props) {
     d: "M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"
   }));
 };
+
 var cn = cnCreate('mfui-avatar');
+
 var Avatar = function Avatar(_ref) {
   var src = _ref.src,
-    _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
-    letters = _ref.letters,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'green' : _ref$color,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size,
-    className = _ref.className,
-    dataAttrs = _ref.dataAttrs;
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
+      letters = _ref.letters,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+
   var renderContent = function renderContent() {
     if (src) {
       return /*#__PURE__*/React.createElement("img", {
@@ -30,16 +35,19 @@ var Avatar = function Avatar(_ref) {
         alt: alt
       });
     }
+
     if (letters) {
       var text = letters.slice(0, 2).toUpperCase();
       return /*#__PURE__*/React.createElement("span", {
         className: cn('text')
       }, text);
     }
+
     return /*#__PURE__*/React.createElement(PlaceholderIcon, {
       className: cn('placeholder')
     });
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       color: color,
@@ -47,4 +55,14 @@ var Avatar = function Avatar(_ref) {
     }, [className])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderContent());
 };
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  letters: PropTypes.string,
+  color: PropTypes.oneOf(['green', 'gray']),
+  size: PropTypes.oneOf(['default', 'auto']),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
 export default Avatar;

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

@@ -0,0 +1,54 @@
+.mfui-counter-badge {
+  padding: 5px 6px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 24px;
+  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;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+  border-radius: 12px;
+}
+.mfui-counter-badge_limited {
+  padding: 5px 12px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-counter-badge_adaptive {
+    min-width: 28px;
+    font-size: 15px;
+    line-height: 18px;
+  }
+}
+.mfui-counter-badge_icon {
+  padding: 2px 4px 2px 12px;
+}
+.mfui-counter-badge_adaptive.mfui-counter-badge_icon {
+  padding: 4px 4px 4px 12px;
+}
+.mfui-counter-badge__icon {
+  margin-left: 4px;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+.mfui-counter-badge_theme_light-blue {
+  background-color: var(--311C20);
+}
+.mfui-counter-badge_theme_light-blue .mfui-counter-badge__icon {
+  fill: var(--311C);
+}
+.mfui-counter-badge_theme_purple {
+  background-color: var(--brandPurple20);
+}
+.mfui-counter-badge_theme_purple .mfui-counter-badge__icon {
+  fill: var(--brandPurple);
+}

package/dist/es/components/Badges/{CounterBadge → components/CounterBadge}/CounterBadge.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import './CounterBadge.scss';
+import './CounterBadge.less';
 export declare const CounterBadgeColorTheme: {
     readonly LIGHT_BLUE: "light-blue";
     readonly PURPLE: "purple";
 };
-type CounterBadgeColorThemeType = (typeof CounterBadgeColorTheme)[keyof typeof CounterBadgeColorTheme];
+declare type CounterBadgeColorThemeType = typeof CounterBadgeColorTheme[keyof typeof CounterBadgeColorTheme];
 export interface ICounterBadgeProps {
     /** Текущее значение */
     currentValue: number;

package/dist/es/components/Badges/{CounterBadge → components/CounterBadge}/CounterBadge.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./CounterBadge.css";
+
 var DefaultIcon = function DefaultIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -10,23 +13,25 @@ var DefaultIcon = function DefaultIcon(props) {
     fillRule: "evenodd"
   }));
 };
+
 export var CounterBadgeColorTheme = {
   LIGHT_BLUE: 'light-blue',
   PURPLE: 'purple'
 };
 var cn = cnCreate('mfui-counter-badge');
+
 var CounterBadge = function CounterBadge(_ref) {
   var totalCount = _ref.totalCount,
-    currentValue = _ref.currentValue,
-    _ref$hasIcon = _ref.hasIcon,
-    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
-    customIcon = _ref.customIcon,
-    _ref$colorTheme = _ref.colorTheme,
-    colorTheme = _ref$colorTheme === void 0 ? 'light-blue' : _ref$colorTheme,
-    _ref$isAdaptive = _ref.isAdaptive,
-    isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
-    className = _ref.className,
-    dataAttrs = _ref.dataAttrs;
+      currentValue = _ref.currentValue,
+      _ref$hasIcon = _ref.hasIcon,
+      hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+      customIcon = _ref.customIcon,
+      _ref$colorTheme = _ref.colorTheme,
+      colorTheme = _ref$colorTheme === void 0 ? 'light-blue' : _ref$colorTheme,
+      _ref$isAdaptive = _ref.isAdaptive,
+      isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       limited: !!totalCount,
@@ -40,4 +45,17 @@ var CounterBadge = function CounterBadge(_ref) {
     className: cn('icon')
   }, customIcon || /*#__PURE__*/React.createElement(DefaultIcon, null)));
 };
+
+CounterBadge.propTypes = {
+  totalCount: PropTypes.number,
+  currentValue: PropTypes.number.isRequired,
+  customIcon: PropTypes.element,
+  colorTheme: PropTypes.oneOf(Object.values(CounterBadgeColorTheme)),
+  hasIcon: PropTypes.bool,
+  isAdaptive: PropTypes.bool,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired
+  })
+};
 export default CounterBadge;

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

@@ -0,0 +1,58 @@
+.mfui-notification-badge {
+  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%;
+  overflow: hidden;
+  color: var(--stcWhite);
+}
+.mfui-notification-badge_theme_green {
+  background-color: var(--brandGreen);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 185, 86, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(0, 185, 86, 0.5);
+}
+.mfui-notification-badge_theme_red {
+  background-color: var(--warmRedC);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(235, 90, 64, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(235, 90, 64, 0.5);
+}
+.mfui-notification-badge_auto-width {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 24px;
+  padding: 5px 8px;
+  border-radius: 12px;
+}
+.mfui-notification-badge_size_small {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+.mfui-notification-badge_size_small .mfui-notification-badge__text {
+  display: none;
+}
+.mfui-notification-badge_size_medium {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+.mfui-notification-badge_size_medium .mfui-notification-badge__text {
+  font-size: 10px;
+  line-height: 12px;
+}
+.mfui-notification-badge__text {
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+}

package/dist/es/components/Badges/{NotificationBadge → components/NotificationBadge}/NotificationBadge.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import './NotificationBadge.scss';
+import './NotificationBadge.less';
 export declare const NotificationBadgeTheme: {
     readonly GREEN: "green";
     readonly RED: "red";
 };
-type NotificationBadgeThemeType = (typeof NotificationBadgeTheme)[keyof typeof NotificationBadgeTheme];
+declare type NotificationBadgeThemeType = typeof NotificationBadgeTheme[keyof typeof NotificationBadgeTheme];
 export declare const NotificationBadgeSize: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
+    readonly BIG: "big";
 };
-type NotificationBadgeSizeType = (typeof NotificationBadgeSize)[keyof typeof NotificationBadgeSize];
+declare type NotificationBadgeSizeType = typeof NotificationBadgeSize[keyof typeof NotificationBadgeSize];
 export interface INotificationBadgeProps {
     /** Цветовая тема */
     theme?: NotificationBadgeThemeType;

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

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./NotificationBadge.css";
+export var NotificationBadgeTheme = {
+  GREEN: 'green',
+  RED: 'red'
+};
+export var NotificationBadgeSize = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  BIG: 'big'
+};
+var cn = cnCreate('mfui-notification-badge');
+
+var NotificationBadge = function NotificationBadge(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'green' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'big' : _ref$size,
+      _ref$autoWidth = _ref.autoWidth,
+      autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      size: size,
+      'auto-width': autoWidth
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+NotificationBadge.propTypes = {
+  theme: PropTypes.oneOf(Object.values(NotificationBadgeTheme)),
+  size: PropTypes.oneOf(Object.values(NotificationBadgeSize)),
+  autoWidth: PropTypes.bool,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.node
+};
+export default NotificationBadge;

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

@@ -0,0 +1,119 @@
+.mfui-price-badge {
+  font-size: 12px;
+  line-height: 18px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 2px;
+  padding-right: 8px;
+  border-radius: 8px;
+  font-weight: 500;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-price-badge_adaptive {
+    font-size: 15px;
+    line-height: 24px;
+    min-height: 32px;
+    padding: 4px;
+    padding-right: 8px;
+    border-radius: 12px;
+  }
+}
+.mfui-price-badge_theme_grey {
+  background-color: var(--spbSky0);
+}
+.mfui-price-badge_theme_grey .mfui-price-badge__text {
+  color: var(--spbSky3);
+}
+.mfui-price-badge_theme_grey .mfui-price-badge__icon {
+  fill: var(--spbSky3);
+}
+.mfui-price-badge_theme_orange {
+  background-color: var(--137C20);
+}
+.mfui-price-badge_theme_orange .mfui-price-badge__text {
+  color: var(--137C);
+}
+.mfui-price-badge_theme_orange .mfui-price-badge__icon {
+  fill: var(--137C);
+}
+.mfui-price-badge_theme_green {
+  background-color: var(--brandGreen20);
+}
+.mfui-price-badge_theme_green .mfui-price-badge__text {
+  color: var(--brandGreen);
+}
+.mfui-price-badge_theme_green .mfui-price-badge__icon {
+  fill: var(--brandGreen);
+}
+.mfui-price-badge_theme_purple {
+  background-color: var(--brandPurple80);
+}
+.mfui-price-badge_theme_purple .mfui-price-badge__text {
+  color: var(--stcWhite);
+}
+.mfui-price-badge_theme_purple .mfui-price-badge__icon {
+  fill: var(--stcWhite);
+}
+.mfui-price-badge_theme_red {
+  background-color: var(--fury20);
+}
+.mfui-price-badge_theme_red .mfui-price-badge__text {
+  color: var(--fury);
+}
+.mfui-price-badge_theme_red .mfui-price-badge__icon {
+  fill: var(--fury);
+}
+.mfui-price-badge_theme_light {
+  background-color: var(--stcWhite20);
+}
+.mfui-price-badge_theme_dark {
+  background-color: var(--stcBlack20);
+}
+.mfui-price-badge_theme_light .mfui-price-badge__text,
+.mfui-price-badge_theme_dark .mfui-price-badge__text {
+  font-weight: 400;
+  color: var(--stcWhite);
+}
+.mfui-price-badge_theme_light .mfui-price-badge__icon,
+.mfui-price-badge_theme_dark .mfui-price-badge__icon {
+  fill: var(--stcWhite);
+}
+.mfui-price-badge_size_big {
+  padding: 12px 12px 12px 4px;
+  font-size: 15px;
+  line-height: 18px;
+}
+.mfui-price-badge__text {
+  font-family: inherit;
+  margin-left: 2px;
+}
+.mfui-price-badge__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-price-badge__icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+.mfui-price-badge_size_big .mfui-price-badge__icon {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+.mfui-price-badge_size_big .mfui-price-badge__sub-title {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 18px;
+}

package/dist/es/components/Badges/{PriceBadge → components/PriceBadge}/PriceBadge.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './PriceBadge.scss';
+import './PriceBadge.less';
 export declare const PriceBadgeTheme: {
     readonly RED: "red";
     readonly GREY: "grey";
@@ -21,9 +21,9 @@ export declare const PriseBadgeSize: {
     readonly SMALL: "small";
     readonly BIG: "big";
 };
-type PriceBadgeThemeType = (typeof PriceBadgeTheme)[keyof typeof PriceBadgeTheme];
-type PriceBadgeIconType = (typeof PriceBadgeIcon)[keyof typeof PriceBadgeIcon];
-type PriseBadgeSizeType = (typeof PriseBadgeSize)[keyof typeof PriseBadgeSize];
+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;