@megafon/ui-core 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts

@@ -2,9 +2,11 @@ import * as React from 'react';
 import './UploadFieldDropArea.scss';
 export interface IUploadFieldDropArea {
     /** Дополнительная информация */
-    description?: string;
+    description?: string | string[];
     /** Обязательность поля */
     required: boolean;
+    /** Ошибка обязательности заполнения поля */
+    isRequiredError: boolean;
     /** Заблокированное состояние */
     disabled: boolean;
     /** Обработчик события 'drop' */

package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import useDragAndDrop from "../useDragAndDrop";
@@ -9,7 +11,11 @@ var CloudUpload = function CloudUpload(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19 36V22l-2.38 3.9-1.71-1L19 18h1.88l4.14 6.85-1.71 1L21 22v14zM8.21 32H14v-2H8.21A4.27 4.27 0 014 25.6a4.27 4.27 0 014.21-4.4h2.07V18a9.94 9.94 0 019.66-10 9.94 9.94 0 019.66 10v1h1a5.49 5.49 0 010 11H26v2h4.6a7.49 7.49 0 001-14.91A11.94 11.94 0 0019.94 6 11.94 11.94 0 008.27 18v1.16h-.06A6.27 6.27 0 002 25.6 6.27 6.27 0 008.21 32z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.28 24.394a.93.93 0 011.424 0l2.822 3.337c.526.622.094 1.59-.712 1.59h-.947v2.44c0 1.06-.84 1.92-1.876 1.92-1.037 0-1.88-.86-1.88-1.92v-2.44h-.942a.933.933 0 01-.89-.655c-.003-.01-.01-.02-.013-.03a1.01 1.01 0 01-.038-.235.955.955 0 01.228-.67l2.823-3.337z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19.011 8.68c3.733 0 6.898 2.484 8.013 5.926.47-.094.956-.144 1.454-.144 4.154 0 7.522 3.436 7.522 7.677 0 4.24-3.368 7.678-7.522 7.678-.86 0-1.719.004-2.578.01-.293 0-.483-.322-.396-.601a2.876 2.876 0 00-.554-2.752l-2.821-3.336a2.784 2.784 0 00-4.052-.235l-.22.233-2.824 3.337a2.873 2.873 0 00-.552 2.756c.088.279-.1.6-.393.6H9.344v-.018C6.367 29.653 4 27.141 4 24.061c0-3.18 2.526-5.758 5.642-5.758.337 0 .667.03.989.088a8.959 8.959 0 01-.063-1.058c0-4.779 3.78-8.652 8.443-8.652z"
   }));
 };
 var cn = cnCreate('mfui-9-upload-field-drop-area');
@@ -17,6 +23,8 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
   var description = _ref.description,
     required = _ref.required,
     disabled = _ref.disabled,
+    _ref$isRequiredError = _ref.isRequiredError,
+    isRequiredError = _ref$isRequiredError === void 0 ? false : _ref$isRequiredError,
     onDrop = _ref.onDrop,
     onSelectButtonClick = _ref.onSelectButtonClick,
     dataAttrs = _ref.dataAttrs;
@@ -25,10 +33,29 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
     current: null
   };
   var isDragging = useDragAndDrop(currentDropAreaRef, onDrop);
+  var renderDescription = function renderDescription() {
+    if (!description) {
+      return null;
+    }
+    if (Array.isArray(description)) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('description')
+      }, description.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("li", {
+          key: index,
+          className: cn('description-item')
+        }, item);
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description);
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       disabled: disabled,
-      dragging: isDragging
+      dragging: isDragging,
+      error: isRequiredError
     }),
     ref: dropAreaRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(CloudUpload, {
@@ -43,8 +70,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
     onClick: !disabled ? onSelectButtonClick : undefined
   }), "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"), /*#__PURE__*/React.createElement("span", null, "\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u0435 \u0438\u0445 \u0441\u044E\u0434\u0430", required && /*#__PURE__*/React.createElement("span", {
     className: cn('mark')
-  }, "*"))), !!description && /*#__PURE__*/React.createElement("div", {
-    className: cn('description')
-  }, description));
+  }, "*"))), renderDescription());
 };
 export default UploadFieldDropArea;

package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-9-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-9-upload-file-item__cancel-icon-box svg,.mfui-9-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-9-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-9-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-9-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-9-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-9-upload-file-item__icon{height:100%;width:100%}.mfui-9-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-9-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-9-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-9-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-9-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-9-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-9-upload-file-item__service-message{color:var(--content)}.mfui-9-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-9-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-9-upload-file-item_error{border-color:var(--fury20)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:24px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-9-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:12px;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-9-upload-file-item__cancel-icon-box svg,.mfui-9-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-9-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-9-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-9-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-9-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-9-upload-file-item__icon{height:100%;width:100%}.mfui-9-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-9-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-9-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-9-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-9-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-9-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-9-upload-file-item__service-message{color:var(--content)}.mfui-9-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-9-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-9-upload-file-item_error{border-color:var(--fury20)}.mfui-9-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__error-message,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__service-message{color:var(--spbSky3)}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__download-icon-box,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__file-icon-box{opacity:.4}

package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.d.ts

@@ -14,13 +14,15 @@ export interface IUploadFileItem {
     /** Сообщение об ошибке */
     errorText?: string;
     /** Проверка файла */
-    isChecking?: string;
+    isChecking?: boolean;
     /** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
     downloadLink?: string;
     /** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
     download?: boolean | string;
     /** Указывает, где открыть скачиваемый документ */
     target?: React.HTMLAttributeAnchorTarget;
+    /** Заблокированное состояние */
+    disabled?: boolean;
     /** Обработчик скачивания файла */
     onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Обработчик удаления файла */

package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js

@@ -10,17 +10,16 @@ var DownloadIcon = function DownloadIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15.04 5.99L14.97 17l-1.26-1.49-1.42 1.41L15.37 20h1.26l3.08-3.08-1.42-1.41-1.32 1.55.07-11.05-2-.02z"
+    d: "M26.4 14.507a1.6 1.6 0 011.601 1.6c0 1.5-.318 2.984-.93 4.363a11.295 11.295 0 01-2.625 3.67 12.08 12.08 0 01-3.888 2.427 12.67 12.67 0 01-9.115 0 12.083 12.083 0 01-3.888-2.427 11.295 11.295 0 01-2.625-3.67A10.75 10.75 0 014 16.107a1.6 1.6 0 113.2 0c0 1.048.22 2.09.653 3.065a8.097 8.097 0 001.884 2.63 8.881 8.881 0 002.86 1.78 9.453 9.453 0 003.403.631 9.45 9.45 0 003.402-.63 8.883 8.883 0 002.86-1.782 8.096 8.096 0 001.883-2.629 7.55 7.55 0 00.655-3.065 1.6 1.6 0 011.6-1.6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M8 17H6a10 10 0 0020 0h-2a8 8 0 01-16 0z"
+    d: "M16 6.418a1.6 1.6 0 011.6 1.6v5.813l2.062-2.085a1.6 1.6 0 012.275 2.25l-4.231 4.278-.183.167a2.4 2.4 0 01-3.047 0l-.183-.167-4.23-4.278a1.6 1.6 0 112.275-2.25L14.4 13.83V8.018a1.6 1.6 0 011.6-1.6z"
   }));
 };
 var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "CancelIcon__st0",
-    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
+    d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
   }));
 };
 var MAX_PROGRESS = 100;
@@ -40,6 +39,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
     downloadLink = _ref.downloadLink,
     download = _ref.download,
     target = _ref.target,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onDownload = _ref.onDownload,
     onDelete = _ref.onDelete,
     dataAttrs = _ref.dataAttrs;
@@ -80,7 +81,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      error: isError
+      error: isError,
+      disabled: disabled
     }, [className])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('file-icon-box')
@@ -113,7 +115,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
     type: "button",
     className: cn('cancel-icon-box')
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
-    onClick: onDelete
+    onClick: onDelete,
+    disabled: disabled
   }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('icon')
   })));

package/dist/es/components/UploadForm/UploadFileItem/components/_UploadFileItemIcon/UploadFileItemIcon.js

@@ -5,6 +5,7 @@ var AttachIcon = function AttachIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M25.538 8.297c-.944-.997-2.2-1.547-3.535-1.547-1.336 0-2.591.55-3.536 1.547l-7.881 8.325c-1.17 1.236-1.17 3.246 0 4.482a2.891 2.891 0 004.242 0l5.19-5.482c.39-.413.39-1.082 0-1.494a.963.963 0 00-1.414 0l-5.19 5.482a.964.964 0 01-1.414 0 1.1 1.1 0 010-1.494l7.881-8.325a2.902 2.902 0 012.122-.928c.8 0 1.554.33 2.12.928 1.17 1.236 1.17 3.246 0 4.481l-8.588 9.072c-1.95 2.06-5.121 2.06-7.07 0A5.4 5.4 0 017 19.61a5.4 5.4 0 011.464-3.735l8.589-9.072c.39-.412.39-1.081 0-1.494a.963.963 0 00-1.414 0L7.05 14.382C5.728 15.778 5 17.635 5 19.61c0 1.975.728 3.832 2.05 5.228C8.415 26.28 10.207 27 12 27c1.792 0 3.585-.72 4.95-2.162l8.588-9.072c1.95-2.06 1.95-5.41 0-7.469z",
@@ -15,6 +16,7 @@ var ExcelIcon = function ExcelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M8 3a1 1 0 011-1h10v7H8V3z",
@@ -84,6 +86,7 @@ var ImageIcon = function ImageIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M5.21 2.058h21.578c1.74 0 3.154 1.508 3.154 3.366V26.58c0 1.855-1.414 3.362-3.154 3.362H5.21c-1.74 0-3.152-1.507-3.152-3.362V5.424c0-1.858 1.413-3.366 3.152-3.366zm6.7 5.181c-1.681 0-3.045 1.28-3.045 3.074 0 1.795 1.364 2.946 3.046 2.946 1.682 0 3.046-1.151 3.046-2.946 0-1.794-1.364-3.074-3.046-3.074zM6.2 26.832h19.165c.841 0 1.216-.65.836-1.45L21.758 15.13c-.378-.801-1.527-.713-2.038 0l-5.615 6.374c-.511.713-1.21.634-2.03.223l-2.811-1.493c-.408-.28-1.171-.544-1.654.191L5.55 25.5c-.481.736-.191 1.332.65 1.332z",
@@ -94,6 +97,7 @@ var PdfIcon = function PdfIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("circle", {
     cx: 16,
@@ -111,6 +115,7 @@ var PowerIcon = function PowerIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("circle", {
     cx: 17,
@@ -173,6 +178,7 @@ var WordIcon = function WordIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M8 3a1 1 0 011-1h20a1 1 0 011 1v6H8V3z",

package/dist/es/hooks/useResolution.js

@@ -1,21 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
+import throttle from 'lodash.throttle';
 var RESOLUTIONS;
 (function (RESOLUTIONS) {
-  RESOLUTIONS[RESOLUTIONS["MOBILE_XS_END"] = 359] = "MOBILE_XS_END";
-  RESOLUTIONS[RESOLUTIONS["MOBILE_END"] = 767] = "MOBILE_END";
+  RESOLUTIONS[RESOLUTIONS["MOBILE_XS_END"] = 360] = "MOBILE_XS_END";
+  RESOLUTIONS[RESOLUTIONS["MOBILE_END"] = 768] = "MOBILE_END";
 })(RESOLUTIONS || (RESOLUTIONS = {}));
 var _RESOLUTIONS = RESOLUTIONS,
   MOBILE_END = _RESOLUTIONS.MOBILE_END,
   MOBILE_XS_END = _RESOLUTIONS.MOBILE_XS_END;
-var MEDIA_QUERIES = {
-  MAX_WIDTH_MOBILE_XS_END: "(max-width: ".concat(MOBILE_XS_END, "px)"),
-  MAX_WIDTH_MOBILE_END: "(max-width: ".concat(MOBILE_END, "px)")
-};
-var MAX_WIDTH_MOBILE_XS_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_XS_END,
-  MAX_WIDTH_MOBILE_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_END;
 var isScreenWidthAtMost = function isScreenWidthAtMost(maxWidth) {
-  return typeof window !== 'undefined' ? window.innerWidth <= maxWidth : false;
+  return typeof window !== 'undefined' ? window.innerWidth < maxWidth : false;
 };
 function useResolution() {
   var _React$useState = React.useState(isScreenWidthAtMost(MOBILE_END)),
@@ -26,23 +21,20 @@ function useResolution() {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     isMobileExtraSmall = _React$useState4[0],
     setIsMobileExtraSmall = _React$useState4[1];
-  var handleMediaChange = function handleMediaChange(updateStateFn) {
-    return function (e) {
-      return updateStateFn(e.matches);
-    };
-  };
-  var handleMaxWidthMobileEnd = handleMediaChange(setIsMobile);
-  var handleMaxWidthMobileExtraSmall = handleMediaChange(setIsMobileExtraSmall);
+  var handleResize = React.useMemo(function () {
+    return throttle(function () {
+      var width = window.innerWidth;
+      setIsMobile(width < MOBILE_END);
+      setIsMobileExtraSmall(width < MOBILE_XS_END);
+    }, 100);
+  }, []);
   React.useEffect(function () {
-    var mobileExtraSmallQuery = window.matchMedia(MAX_WIDTH_MOBILE_XS_END);
-    var mobileQuery = window.matchMedia(MAX_WIDTH_MOBILE_END);
-    mobileExtraSmallQuery.addEventListener('change', handleMaxWidthMobileExtraSmall);
-    mobileQuery.addEventListener('change', handleMaxWidthMobileEnd);
+    window.addEventListener('resize', handleResize);
     return function () {
-      mobileExtraSmallQuery.removeEventListener('change', handleMaxWidthMobileExtraSmall);
-      mobileQuery.removeEventListener('change', handleMaxWidthMobileEnd);
+      window.removeEventListener('resize', handleResize);
+      handleResize.cancel();
     };
-  }, [handleMaxWidthMobileEnd, handleMaxWidthMobileExtraSmall]);
+  }, [handleResize]);
   return {
     isMobile: isMobile,
     isMobileExtraSmall: isMobileExtraSmall

package/dist/es/index.d.ts

@@ -2,7 +2,8 @@ export { default as Accordion } from './components/Accordion/Accordion';
 export { default as Avatar } from './components/Avatar/Avatar';
 export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
-export { default as Button } from './components/Button/Button';
+export { default as Button } from './components/Buttons/Button/Button';
+export { default as ButtonClose } from './components/Buttons/ButtonClose/ButtonClose';
 export { default as Calendar } from './components/Calendar/Calendar';
 export { default as Caption } from './components/Caption/Caption';
 export { default as Carousel } from './components/Carousel/Carousel';
@@ -26,6 +27,7 @@ export { default as ErrorLoad } from './components/ErrorLoad/ErrorLoad';
 export { default as Grid } from './components/Grid/Grid';
 export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
+export { default as InfoBadge } from './components/Badges/InfoBadge/InfoBadge';
 export { default as Link } from './components/Link/Link';
 export { default as List } from './components/List/List';
 export { default as ListData } from './components/ListData/ListData';
@@ -36,8 +38,7 @@ export { default as Logo } from './components/Logo/Logo';
 export { default as Modal } from './components/Modal/Modal';
 export { default as ModalContent } from './components/Modal/_ModalContent/ModalContent';
 export { default as ModalDesktop } from './components/Modal/_ModalDesktop/ModalDesktop';
-export { default as ModalMobileBottom } from './components/Modal/_ModalMobileBottom/ModalMobileBottom';
-export { default as ModalMobileFullScreen } from './components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen';
+export { default as ModalMobile } from './components/Modal/_ModalMobile/ModalMobile';
 export { default as Month } from './components/Calendar/components/_Month/Month';
 export { default as NavArrow } from './components/NavArrow/NavArrow';
 export { default as Notification } from './components/Notification/Notification';
@@ -67,6 +68,8 @@ export { default as slidesSettings } from './components/Banner/slidesSettings';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
 export { default as StatusBadge } from './components/Badges/StatusBadge/StatusBadge';
+export { default as Stepper } from './components/Stepper/Stepper';
+export { default as StepperItem } from './components/Stepper/StepperItem';
 export { default as Switcher } from './components/Switcher/Switcher';
 export { default as Tab } from './components/Tabs/Tab';
 export { default as Tabs } from './components/Tabs/Tabs';

package/dist/es/index.js

@@ -2,7 +2,8 @@ export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Banner } from "./components/Banner/Banner";
 export { default as BannerDot } from "./components/Banner/BannerDot";
-export { default as Button } from "./components/Button/Button";
+export { default as Button } from "./components/Buttons/Button/Button";
+export { default as ButtonClose } from "./components/Buttons/ButtonClose/ButtonClose";
 export { default as Calendar } from "./components/Calendar/Calendar";
 export { default as Caption } from "./components/Caption/Caption";
 export { default as Carousel } from "./components/Carousel/Carousel";
@@ -26,6 +27,7 @@ export { default as ErrorLoad } from "./components/ErrorLoad/ErrorLoad";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as GridColumn } from "./components/Grid/GridColumn";
 export { default as Header } from "./components/Header/Header";
+export { default as InfoBadge } from "./components/Badges/InfoBadge/InfoBadge";
 export { default as Link } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
 export { default as ListData } from "./components/ListData/ListData";
@@ -36,8 +38,7 @@ export { default as Logo } from "./components/Logo/Logo";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as ModalContent } from "./components/Modal/_ModalContent/ModalContent";
 export { default as ModalDesktop } from "./components/Modal/_ModalDesktop/ModalDesktop";
-export { default as ModalMobileBottom } from "./components/Modal/_ModalMobileBottom/ModalMobileBottom";
-export { default as ModalMobileFullScreen } from "./components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen";
+export { default as ModalMobile } from "./components/Modal/_ModalMobile/ModalMobile";
 export { default as Month } from "./components/Calendar/components/_Month/Month";
 export { default as NavArrow } from "./components/NavArrow/NavArrow";
 export { default as Notification } from "./components/Notification/Notification";
@@ -67,6 +68,8 @@ export { default as slidesSettings } from "./components/Banner/slidesSettings";
 export { default as Snackbar } from "./components/Snackbar/Snackbar";
 export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";
 export { default as StatusBadge } from "./components/Badges/StatusBadge/StatusBadge";
+export { default as Stepper } from "./components/Stepper/Stepper";
+export { default as StepperItem } from "./components/Stepper/StepperItem";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Tab } from "./components/Tabs/Tab";
 export { default as Tabs } from "./components/Tabs/Tabs";

package/dist/lib/components/Accordion/Accordion.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-accordion{background:var(--spbSky0);border-radius:16px}.mfui-9-accordion+.mfui-9-accordion{margin-top:8px}@media screen and (min-width:768px){.mfui-9-accordion+.mfui-9-accordion{margin-top:12px}}.mfui-9-accordion__title-wrap{border-radius:inherit;cursor:pointer;outline:none;padding:16px 44px 16px 16px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s}@media screen and (min-width:768px){.mfui-9-accordion__title-wrap{padding:24px 56px 24px 24px}}.mfui-9-accordion__title-wrap:hover{background-color:var(--spbSky1)}@media screen and (max-width:1023px){.mfui-9-accordion__title-wrap:focus{background-color:inherit}}.mfui-9-accordion__icon-box{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:20px;top:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--stcWhite);border-radius:50%;height:24px;justify-content:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}@media screen and (min-width:768px){.mfui-9-accordion__icon-box{height:32px;right:24px;width:32px}}.mfui-9-accordion__icon{height:20px;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;width:20px}@media screen and (min-width:768px){.mfui-9-accordion__icon{height:32px;width:32px}}.mfui-9-accordion__content-inner{padding:4px 20px 20px 16px}@media screen and (min-width:768px){.mfui-9-accordion__content-inner{padding:4px 24px 20px}}.mfui-9-accordion_opened .mfui-9-accordion__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-accordion{background:var(--spbSky0);border-radius:16px}.mfui-9-accordion+.mfui-9-accordion{margin-top:8px}@media screen and (min-width:768px){.mfui-9-accordion+.mfui-9-accordion{margin-top:12px}}.mfui-9-accordion__title-wrap{border-radius:inherit;cursor:pointer;outline:none;padding:16px 44px 16px 16px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s}.mfui-9-accordion__title-wrap:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-accordion__title-wrap:focus{outline:none}@media screen and (min-width:768px){.mfui-9-accordion__title-wrap{padding:24px 56px 24px 24px}}.mfui-9-accordion__title-wrap:hover{background-color:var(--spbSky1)}@media screen and (max-width:1023px){.mfui-9-accordion__title-wrap:focus{background-color:inherit}}.mfui-9-accordion__icon-box{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:20px;top:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--stcWhite);border-radius:50%;height:24px;justify-content:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}@media screen and (min-width:768px){.mfui-9-accordion__icon-box{height:32px;right:24px;width:32px}}.mfui-9-accordion__icon{height:20px;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;width:20px}@media screen and (min-width:768px){.mfui-9-accordion__icon{height:32px;width:32px}}.mfui-9-accordion__content-inner{padding:4px 20px 20px 16px}@media screen and (min-width:768px){.mfui-9-accordion__content-inner{padding:4px 24px 20px}}.mfui-9-accordion_opened .mfui-9-accordion__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

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

@@ -6,8 +6,10 @@ export interface IAccordionProps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
-    /** Заголовок */
+    /** Тег заголовка (определяет базовый тег и стили) */
     titleTag?: IHeaderProps['as'];
+    /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
+    titleTagName?: IHeaderProps['tag'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */

package/dist/lib/components/Accordion/Accordion.js

@@ -18,9 +18,7 @@ var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11 14h10l-5 6z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M16.774 18.697a1.092 1.092 0 01-1.51 0l-3.953-3.82c-.682-.66-.165-1.877.794-1.877h7.798c.96 0 1.465 1.217.783 1.876l-3.912 3.82z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-accordion');
@@ -29,6 +27,7 @@ var Accordion = function Accordion(_ref) {
     title = _ref.title,
     _ref$titleTag = _ref.titleTag,
     titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+    titleTagName = _ref.titleTagName,
     _ref$isOpened = _ref.isOpened,
     isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
     _ref$hasMicrodata = _ref.hasMicrodata,
@@ -90,6 +89,7 @@ var Accordion = function Accordion(_ref) {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(_Header["default"], {
     as: titleTag,
+    tag: titleTagName,
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
     className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {

package/dist/lib/components/Avatar/Avatar.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-avatar__text{display:block}.mfui-9-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-9-avatar__placeholder{opacity:.3}.mfui-9-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-9-avatar_color_green .mfui-9-avatar__placeholder{fill:var(--brandGreen)}.mfui-9-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-avatar_color_gray .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_color_white{background-color:var(--stcWhite);color:var(--spbSky3)}.mfui-9-avatar_color_white .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_size_auto{font-size:inherit;height:100%;width:100%}.mfui-9-avatar_default{display:block}.mfui-9-avatar_default svg{margin:auto}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-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:12px;-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-9-avatar__text{display:block}.mfui-9-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-9-avatar__placeholder{opacity:.3}.mfui-9-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-9-avatar_color_green .mfui-9-avatar__placeholder{fill:var(--brandGreen)}.mfui-9-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-avatar_color_gray .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_color_white{background-color:var(--stcWhite);color:var(--spbSky3)}.mfui-9-avatar_color_white .mfui-9-avatar__placeholder{fill:var(--spbSky3)}.mfui-9-avatar_size_auto{font-size:inherit;height:100%;width:100%}.mfui-9-avatar_size_small{font-size:12px;height:32px;width:32px}.mfui-9-avatar_default{display:block}.mfui-9-avatar_default svg{margin:auto}

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

@@ -10,7 +10,7 @@ export interface IAvatarProps {
     /** Цвет заливки */
     color?: 'green' | 'gray' | 'white';
     /** Размер (по умолчанию 40х40 пикселей). */
-    size?: 'default' | 'auto';
+    size?: 'default' | 'auto' | 'small';
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data атрибуты к внутренним элементам */

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

@@ -15,8 +15,7 @@ var DefaultIcon = function DefaultIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11.39 9H16v1l-7.5 8H7l1.61-7H4v-1l7.5-8H13z",
-    fillRule: "evenodd"
+    d: "M9.478 2.094c.935-1.224 2.885-.413 2.678 1.112l-.587 4.33h2.947l.115.004c1.168.085 1.806 1.45 1.077 2.405l-6.07 7.961c-.93 1.22-2.875.423-2.681-1.098l.543-4.245H4.52c-1.242 0-1.945-1.423-1.192-2.41l6.15-8.06z"
   }));
 };
 var CounterBadgeColorTheme = exports.CounterBadgeColorTheme = {

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

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

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import './InfoBadge.scss';
+export declare const InfoBadgeTheme: {
+    readonly RED: "red";
+    readonly GREY: "grey";
+    readonly GREEN: "green";
+    readonly ORANGE: "orange";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+    readonly PURPLE: "purple";
+    readonly WHITE_GREEN: "white-green";
+    readonly WHITE_ORANGE: "white-orange";
+    readonly WHITE_GRAY: "white-gray";
+    readonly WHITE_RED: "white-red";
+};
+export declare const InfoBadgeIcon: {
+    readonly TIMER: "timer";
+    readonly PRICE: "price";
+    readonly CHECK: "check";
+    readonly ATTENTION: "attention";
+    readonly INFO: "info";
+    readonly PROFILE: "profile";
+    readonly BAN: "ban";
+};
+export declare const InfoBadgeSize: {
+    readonly SMALL: "small";
+    readonly BIG: "big";
+};
+type InfoBadgeThemeType = (typeof InfoBadgeTheme)[keyof typeof InfoBadgeTheme];
+type InfoBadgeIconType = (typeof InfoBadgeIcon)[keyof typeof InfoBadgeIcon];
+type InfoBadgeSizeType = (typeof InfoBadgeSize)[keyof typeof InfoBadgeSize];
+export interface IInfoBadgeProps {
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Тип иконки */
+    iconType?: InfoBadgeIconType;
+    /** Цветовая тема */
+    theme?: InfoBadgeThemeType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Размер бейджа */
+    size?: InfoBadgeSizeType;
+    /** Дополнительный текст (только для size="big") */
+    subTitle?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const InfoBadge: React.FC<IInfoBadgeProps>;
+export default InfoBadge;