@megafon/ui-core 3.3.1 → 3.4.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.3.1...@megafon/ui-core@3.4.0) (2022-03-21)
+
+
+### Bug Fixes
+
+* **notification:** fix link styles ([9d7e67e](https://github.com/MegafonWebLab/megafon-ui/commit/9d7e67e1f21c9ddb1dc911502a114924c8896a6a))
+* **pricebadge:** fix icon styles ([f5502a0](https://github.com/MegafonWebLab/megafon-ui/commit/f5502a0e28d067694cee4165fe224a38ecf3a15f))
+* **storebutton:** fixed test for Select and update type for StoreButton ([8996754](https://github.com/MegafonWebLab/megafon-ui/commit/8996754482e9cf899fdcb0f488c8a9fa1afddd11))
+
+
+### Features
+
+* **badges:** add new component TimerBadge ([82a900b](https://github.com/MegafonWebLab/megafon-ui/commit/82a900b362ca15db30dfdbffbfe299b637cae5b3))
+* **promobadge:** add vip type (purple background color) ([51ea858](https://github.com/MegafonWebLab/megafon-ui/commit/51ea8582ff750199166c64681fecae636d30ca18))
+* **search:** add onFocus callback ([b6dfdad](https://github.com/MegafonWebLab/megafon-ui/commit/b6dfdadd8dc695d7622bb95443ef6556b4e5d1c6))
+
+
+
+
+
 ## [3.3.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.3.0...@megafon/ui-core@3.3.1) (2022-03-15)
 
 

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

@@ -7,20 +7,23 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 4px;
+  padding: 2px;
   padding-right: 8px;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
-  height: 24px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
   border-radius: 8px;
 }
 @media screen and (min-width: 1024px) {
   .mfui-price-badge_adaptive {
     font-size: 15px;
     line-height: 24px;
-    padding: 4px 8px;
-    height: 32px;
+    padding: 4px;
+    padding-right: 8px;
+    min-height: 32px;
     border-radius: 12px;
   }
 }
@@ -62,7 +65,12 @@
 }
 .mfui-price-badge__text {
   font-family: inherit;
-  margin-left: 4px;
+  margin-left: 2px;
+}
+.mfui-price-badge__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .mfui-price-badge__icon {
   height: 20px;

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

@@ -93,9 +93,11 @@ var PriceBadge = function PriceBadge(_ref) {
       theme: theme,
       adaptive: isAdaptive
     }, className)
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container')
+  }, /*#__PURE__*/React.createElement(Icon, {
     className: cn('icon')
-  }), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: cn('text')
   }, children));
 };

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

@@ -18,6 +18,9 @@
 .mfui-promo-badge_type_new {
   background-color: var(--systemBlue);
 }
+.mfui-promo-badge_type_vip {
+  background-color: var(--brandPurple);
+}
 .mfui-promo-badge_type_popular {
   background-color: var(--137C);
 }

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

@@ -3,6 +3,7 @@ import './PromoBadge.less';
 export declare const PromoBadgeTypes: {
     readonly HIT: "hit";
     readonly NEW: "new";
+    readonly VIP: "vip";
     readonly POPULAR: "popular";
     readonly USER_CHOICE: "user-choice";
 };

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

@@ -7,6 +7,7 @@ import "./PromoBadge.css";
 export var PromoBadgeTypes = {
   HIT: 'hit',
   NEW: 'new',
+  VIP: 'vip',
   POPULAR: 'popular',
   USER_CHOICE: 'user-choice'
 };

package/dist/es/components/Badges/components/TimerBadge/Timer/Timer.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare const getCountdownText: (remainingTime?: number) => string;
+interface ITimerProps {
+    actualRemainingTime: number;
+    expirationDate: Date;
+    showCountdown: boolean;
+    additionalText?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Timer: React.FC<ITimerProps>;
+export default Timer;

package/dist/es/components/Badges/components/TimerBadge/Timer/Timer.js

@@ -0,0 +1,96 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.date.to-string";
+import "core-js/modules/es.math.trunc";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import format from 'date-fns/format';
+import ruLocale from 'date-fns/locale/ru';
+import * as PropTypes from 'prop-types';
+var SECONDS_IN_DAY = 86400;
+var SECONDS_IN_HOUR = 3600;
+var SECONDS_IN_MINUTE = 60;
+
+var formatDate = function formatDate(date, pattern) {
+  return format(date, pattern, {
+    locale: ruLocale
+  });
+};
+
+export var getCountdownText = function getCountdownText() {
+  var remainingTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var isMoreHourAndLessDay = remainingTime >= SECONDS_IN_HOUR && remainingTime < SECONDS_IN_DAY;
+
+  var truncTime = function truncTime() {
+    var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return Math.trunc(remainingTime / divider);
+  };
+
+  switch (true) {
+    case remainingTime <= 0:
+      {
+        return '';
+      }
+
+    case remainingTime < SECONDS_IN_MINUTE:
+      {
+        var seconds = truncTime();
+        return "".concat(seconds, " \u0441\u0435\u043A");
+      }
+
+    case remainingTime < SECONDS_IN_HOUR:
+      {
+        var minutes = truncTime(SECONDS_IN_MINUTE);
+        return "".concat(minutes, " \u043C\u0438\u043D");
+      }
+
+    case isMoreHourAndLessDay:
+      {
+        var hours = truncTime(SECONDS_IN_HOUR);
+        var secondsLeft = remainingTime - hours * SECONDS_IN_HOUR;
+
+        var _minutes = Math.trunc(secondsLeft / SECONDS_IN_MINUTE);
+
+        return _minutes ? "".concat(hours, " \u0447 ").concat(_minutes, " \u043C\u0438\u043D") : "".concat(hours, " \u0447");
+      }
+
+    case remainingTime >= SECONDS_IN_DAY:
+      {
+        var days = truncTime(SECONDS_IN_DAY);
+
+        var _secondsLeft = remainingTime - days * SECONDS_IN_DAY;
+
+        var _hours = Math.trunc(_secondsLeft / SECONDS_IN_HOUR);
+
+        return _hours ? "".concat(days, " \u0434\u043D ").concat(_hours, " \u0447") : "".concat(days, " \u0434\u043D");
+      }
+
+    default:
+      {
+        return '';
+      }
+  }
+};
+var cn = cnCreate('mfui-timer');
+
+var Timer = function Timer(_ref) {
+  var actualRemainingTime = _ref.actualRemainingTime,
+      expirationDate = _ref.expirationDate,
+      showCountdown = _ref.showCountdown,
+      additionalText = _ref.additionalText,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn()
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), additionalText && /*#__PURE__*/React.createElement("span", null, additionalText, " "), /*#__PURE__*/React.createElement("span", null, showCountdown ? getCountdownText(actualRemainingTime) : formatDate(expirationDate, 'dd MMMM yyyy')));
+};
+
+Timer.propTypes = {
+  expirationDate: PropTypes.instanceOf(Date).isRequired,
+  actualRemainingTime: PropTypes.number.isRequired,
+  showCountdown: PropTypes.bool.isRequired,
+  additionalText: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default Timer;

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

@@ -0,0 +1,60 @@
+.mfui-timer-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 1px 2px;
+  padding-right: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid var(--spbSky1);
+  border-radius: 12px;
+  background: var(--base);
+  overflow: hidden;
+}
+.mfui-timer-badge_theme_grey .mfui-timer-badge__text {
+  color: var(--spbSky3);
+}
+.mfui-timer-badge_theme_grey .mfui-timer-badge__icon {
+  fill: var(--spbSky3);
+}
+.mfui-timer-badge_theme_red .mfui-timer-badge__text {
+  color: var(--fury);
+}
+.mfui-timer-badge_theme_red .mfui-timer-badge__icon {
+  fill: var(--fury);
+}
+.mfui-timer-badge__text {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: inherit;
+  margin-left: 2px;
+  font-weight: 500;
+}
+.mfui-timer-badge__icon {
+  height: 20px;
+  width: 20px;
+}
+.mfui-timer-badge__icon-container {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-timer-badge__icon-container_shadow:before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  -webkit-box-shadow: 0px 0px 6px var(--fury);
+          box-shadow: 0px 0px 6px var(--fury);
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import './TimerBadge.less';
+export interface ITimerBadgeProps {
+    /** Дата окончания таймера */
+    expirationDate: Date;
+    /** Граница переключения в режим обратного отсчёта, в секундах */
+    countdownStart?: number;
+    /** Отображение дополнительного текста */
+    hasPrefix?: boolean;
+    /** Текст перед таймером в режиме обратного отсчета. Появляется при hasPrefix=true. */
+    countdownText?: string;
+    /** Текст перед таймером в режиме даты. Появляется при hasPrefix=true. */
+    expirationDateText?: string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        timer?: Record<string, string>;
+    };
+}
+declare const TimerBadge: React.FC<ITimerBadgeProps>;
+export default TimerBadge;

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

@@ -0,0 +1,110 @@
+import "core-js/modules/es.date.now";
+import "core-js/modules/es.date.to-string";
+import "core-js/modules/web.timers";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import Timer from "./Timer/Timer";
+import "./TimerBadge.css";
+
+var TimerIcon = function TimerIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+
+var SECONDS_IN_HOUR = 3600;
+var MS_IN_SECOND = 1000;
+var TIMEOUT = 1000;
+var TimerBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey'
+};
+var cn = cnCreate('mfui-timer-badge');
+
+var TimerBadge = function TimerBadge(_ref) {
+  var expirationDate = _ref.expirationDate,
+      _ref$countdownStart = _ref.countdownStart,
+      countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
+      _ref$hasPrefix = _ref.hasPrefix,
+      hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
+      _ref$countdownText = _ref.countdownText,
+      countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
+      _ref$expirationDateTe = _ref.expirationDateText,
+      expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+  var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
+
+  var _useState = useState(remainingTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      actualRemainingTime = _useState2[0],
+      setActualRemainingTime = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showCountdown = _useState4[0],
+      setShowCountdown = _useState4[1];
+
+  var isLastHour = actualRemainingTime < SECONDS_IN_HOUR;
+  var isTimeExpired = actualRemainingTime < 1;
+  var theme = showCountdown ? TimerBadgeTheme.RED : TimerBadgeTheme.GREY;
+  var additionalText = showCountdown ? countdownText : expirationDateText;
+  useEffect(function () {
+    setShowCountdown(actualRemainingTime < countdownStart);
+  }, [actualRemainingTime, countdownStart]);
+  useEffect(function () {
+    if (isTimeExpired) {
+      return undefined;
+    }
+
+    var timeoutId = window.setTimeout(function () {
+      return setActualRemainingTime(actualRemainingTime - 1);
+    }, TIMEOUT);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [isTimeExpired, showCountdown, actualRemainingTime]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme
+    }, className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container', {
+      shadow: isLastHour && showCountdown
+    })
+  }, /*#__PURE__*/React.createElement(TimerIcon, {
+    className: cn('icon')
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text')
+  }), isTimeExpired ? 'Время действия истекло' : /*#__PURE__*/React.createElement(Timer, {
+    additionalText: hasPrefix ? additionalText : undefined,
+    showCountdown: showCountdown,
+    expirationDate: expirationDate,
+    actualRemainingTime: actualRemainingTime,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.timer
+    }
+  })));
+};
+
+TimerBadge.propTypes = {
+  expirationDate: PropTypes.instanceOf(Date).isRequired,
+  countdownStart: PropTypes.number,
+  hasPrefix: PropTypes.bool,
+  countdownText: PropTypes.string,
+  expirationDateText: PropTypes.string,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    timer: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default TimerBadge;

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

@@ -69,7 +69,7 @@ export interface IButtonProps {
     showArrow?: boolean;
     /** Иконка */
     icon?: JSX.Element;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение кнопки */
     disabled?: boolean;
     /** Ссылка на элемент */
     buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;

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

@@ -25,7 +25,7 @@ export interface ICheckboxProps {
     value?: string;
     /** Управление состоянием вкл/выкл компонента */
     checked?: boolean;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение чекбокса */
     disabled?: boolean;
     /** Отобразить компонент в состоянии ошибки */
     error?: boolean;

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

@@ -18,7 +18,7 @@ export interface ICounterProps {
     min?: number;
     /** Максимальное доступное значение */
     max?: number;
-    /** Запретить взаимодействие с компонентом */
+    /** Отключение счетчика */
     disabled?: boolean;
     /** Обработчик изменения значения 'value' */
     onChange?: (value: number) => void;

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

@@ -189,19 +189,27 @@ h5 {
 .mfui-notification_colored .mfui-notification__icon-container {
   background-color: var(--stcWhite);
 }
+.mfui-notification_colored.mfui-notification_type_info {
+  background-color: var(--311C20);
+}
+.mfui-notification_colored.mfui-notification_type_warning {
+  background-color: var(--137C20);
+}
 .mfui-notification_colored.mfui-notification_type_success {
   background-color: var(--brandGreen20);
 }
+.mfui-notification_colored.mfui-notification_type_info .mfui-notification__title,
+.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_success .mfui-notification__title,
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__text,
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__link {
+.mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__text {
   color: var(--stcBlack);
 }
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__right-arrow {
-  fill: var(--stcBlack);
-}
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container {
-  background-color: var(--stcWhite);
+.mfui-notification_colored.mfui-notification_type_info .mfui-notification__link,
+.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__link,
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__link {
+  color: var(--systemBlue);
 }
 .mfui-notification_colored.mfui-notification_type_error {
   background-color: var(--fury80);
@@ -221,17 +229,3 @@ h5 {
   /* stylelint-disable-line max-nesting-depth */
   fill: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_info .mfui-notification__title,
-.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__title,
-.mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,
-.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,
-.mfui-notification_colored.mfui-notification_type_info .mfui-notification__link,
-.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__link {
-  color: var(--stcBlack);
-}
-.mfui-notification_colored.mfui-notification_type_info {
-  background-color: var(--311C20);
-}
-.mfui-notification_colored.mfui-notification_type_warning {
-  background-color: var(--137C20);
-}

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

@@ -7,7 +7,7 @@ export interface IRadioButtonProps {
     name?: string;
     /** Размер текста лейбла */
     textSize?: 'small' | 'medium';
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение радио-кнопки */
     disabled?: boolean;
     /** Управление состоянием вкл/выкл компонента */
     isChecked?: boolean;

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

@@ -36,7 +36,7 @@ export interface ISearchProps {
     verification?: VerificationType;
     /** Дополнительный текст под полем. Свойство verification влияет на цвет текста. */
     noticeText?: string;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение поля ввода */
     disabled?: boolean;
     /** Делает поле обязательным */
     required?: boolean;
@@ -54,6 +54,8 @@ export interface ISearchProps {
     onSubmit?: (value: string) => void;
     /** Обработчик выхода из фокуса */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик входа в фокус */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
 declare const Search: React.FC<ISearchProps>;
 export default Search;

package/dist/es/components/Search/Search.js

@@ -46,7 +46,8 @@ var Search = function Search(_ref) {
       classes = _ref.classes,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
-      onBlur = _ref.onBlur;
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus;
 
   var _React$useState = React.useState(value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -101,9 +102,10 @@ var Search = function Search(_ref) {
       handleItemSubmit(activeIndex);
     };
   }, [handleItemSubmit, activeIndex]);
-  var handleFocus = React.useCallback(function () {
+  var handleFocus = React.useCallback(function (e) {
     setFocus(true);
-  }, []);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }, [onFocus]);
   var handleBlur = React.useCallback(function (e) {
     setFocus(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
@@ -242,6 +244,7 @@ Search.propTypes = {
   }),
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
-  onBlur: PropTypes.func
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func
 };
 export default Search;

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

@@ -40,7 +40,7 @@ export interface ISelectProps<T extends SelectItemValueType> {
     verification?: VerificationType;
     /** Дополнительный текст под полем. Свойство verification влияет на цвет текста. */
     noticeText?: string;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение селекта */
     disabled?: boolean;
     /** Делает поле обязательным */
     required?: boolean;

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

@@ -9,7 +9,7 @@ export interface ISwitcherProps {
     className?: string;
     /** Управление состоянием вкл/выкл компонента */
     checked?: boolean;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение переключателя */
     disabled?: boolean;
     /** Обработчик изменения элемента */
     onChange?: (e: React.MouseEvent<HTMLDivElement>) => void;

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

@@ -31,7 +31,7 @@ export declare type TextFieldProps = {
     verification?: 'valid' | 'error';
     /** Подпись снизу, меняет цвет в зависимости от аргумента verification */
     noticeText?: string;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение поля ввода */
     disabled?: boolean;
     /** Показывает обязательность поля  */
     required?: boolean;

package/dist/es/index.d.ts

@@ -40,5 +40,7 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as TextField } from './components/TextField/TextField';
 export { default as TextLink } from './components/TextLink/TextLink';
 export { default as Tile } from './components/Tile/Tile';
+export { default as Timer } from './components/Badges/components/TimerBadge/Timer/Timer';
+export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
 export { default as usePagination } from './components/Pagination/usePagination';

package/dist/es/index.js

@@ -40,5 +40,7 @@ export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as TextField } from "./components/TextField/TextField";
 export { default as TextLink } from "./components/TextLink/TextLink";
 export { default as Tile } from "./components/Tile/Tile";
+export { default as Timer } from "./components/Badges/components/TimerBadge/Timer/Timer";
+export { default as TimerBadge } from "./components/Badges/components/TimerBadge/TimerBadge";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export { default as usePagination } from "./components/Pagination/usePagination";

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

@@ -7,20 +7,23 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 4px;
+  padding: 2px;
   padding-right: 8px;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
-  height: 24px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
   border-radius: 8px;
 }
 @media screen and (min-width: 1024px) {
   .mfui-price-badge_adaptive {
     font-size: 15px;
     line-height: 24px;
-    padding: 4px 8px;
-    height: 32px;
+    padding: 4px;
+    padding-right: 8px;
+    min-height: 32px;
     border-radius: 12px;
   }
 }
@@ -62,7 +65,12 @@
 }
 .mfui-price-badge__text {
   font-family: inherit;
-  margin-left: 4px;
+  margin-left: 2px;
+}
+.mfui-price-badge__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .mfui-price-badge__icon {
   height: 20px;