@megafon/ui-core 3.10.0 → 4.0.0-beta.2

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

@@ -1,51 +1,83 @@
 .mfui-accordion {
-  border-top: 1px solid var(--spbSky2);
-  border-bottom: 1px solid var(--spbSky2);
+  border-radius: 12px;
+  background: var(--spbSky0);
 }
 .mfui-accordion + .mfui-accordion {
-  border-top: none;
-}
-.mfui-accordion:not(.mfui-accordion_open) .mfui-accordion__title-wrap:hover {
-  background: var(--spbSky0);
+  margin-top: 8px;
 }
-.mfui-accordion.mfui-accordion_open .mfui-accordion__title-wrap {
-  background: var(--spbSky1);
+@media screen and (min-width: 768px) {
+  .mfui-accordion + .mfui-accordion {
+    margin-top: 12px;
+  }
 }
 .mfui-accordion__title-wrap {
   position: relative;
-  padding: 24px 52px 24px 16px;
+  padding: 20px 20px 20px 16px;
+  border-radius: 12px;
   cursor: pointer;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__title-wrap {
-    padding: 24px 68px 24px 24px;
+    padding: 20px 24px;
   }
 }
-@media screen and (min-width: 1280px) {
-  .mfui-accordion__title-wrap {
-    padding: 24px 72px 24px 24px;
-  }
+.mfui-accordion__title-wrap:hover {
+  background: var(--spbSky1);
 }
 .mfui-accordion__icon-box {
   position: absolute;
   top: 50%;
   right: 20px;
-  width: 32px;
-  height: 32px;
-  outline: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--base);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  opacity: 1;
-  fill: var(--content);
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__icon-box {
+    right: 24px;
+    width: 32px;
+    height: 32px;
+  }
+}
+.mfui-accordion__icon {
+  width: 20px;
+  height: 20px;
+  -webkit-transition: -webkit-transform 0.6s;
+  transition: -webkit-transform 0.6s;
+  transition: transform 0.6s;
+  transition: transform 0.6s, -webkit-transform 0.6s;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__icon {
+    width: 32px;
+    height: 32px;
+  }
 }
 .mfui-accordion__content-inner {
-  padding: 24px 16px;
+  padding: 4px 20px 20px 16px;
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__content-inner {
-    padding: 24px;
+    padding: 4px 24px 20px;
   }
 }
-.mfui-accordion__icon {
-  fill: var(--content);
+.mfui-accordion_opened .mfui-accordion__icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }

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

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

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

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

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

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

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

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

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

@@ -32,8 +32,6 @@ export interface IBannerProps {
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */
     autoPlayDelay?: number;
-    /** Пауза автоматической прокрутки при наведении курсора на компонент */
-    pauseOnHover?: boolean;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/lib/components/Banner/Banner.js

@@ -77,9 +77,7 @@ var Banner = function Banner(_ref) {
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
       onChange = _ref.onChange,
-      dataAttrs = _ref.dataAttrs,
-      _ref$pauseOnHover = _ref.pauseOnHover,
-      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
+      dataAttrs = _ref.dataAttrs;
 
   var _React$useState = React.useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -99,42 +97,29 @@ var Banner = function Banner(_ref) {
   var _React$useState7 = React.useState(autoPlay),
       _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
       isAutoPlaying = _React$useState8[0],
-      setAutoPlaying = _React$useState8[1];
+      setAutoPlayning = _React$useState8[1];
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
       activeIndex = _React$useState10[0],
       setActiveIndex = _React$useState10[1];
 
-  var _React$useState11 = React.useState(autoPlayDelay),
-      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
-      delay = _React$useState12[0],
-      setDelay = _React$useState12[1];
-
-  var _React$useState13 = React.useState(false),
-      _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
-      isIncreasedDelay = _React$useState14[0],
-      setIsIncreasedDelay = _React$useState14[1];
-
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
-  var dotTimerDelay = delay / 1000;
+  var dotTimerDelay = autoPlayDelay / 1000;
   var navArrowTheme = navTheme === NavTheme.DARK ? _NavArrow.Theme.DARK : _NavArrow.Theme.PURPLE;
-  var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoPlay) {
+    if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoplay.running) {
       return;
     }
 
     autoplay.stop(); // eslint-disable-next-line no-param-reassign
 
     params.autoplay.delay = autoPlayDelay * 3;
-    setDelay(autoPlayDelay * 3);
-    setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlay, autoPlayDelay]);
+  }, [autoPlayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -142,8 +127,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
-    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onPrevClick, isIncreasedDelay, increaseAutoplayDelay]);
+    increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -151,8 +136,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
-    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onNextClick, isIncreasedDelay, increaseAutoplayDelay]);
+    increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
   var handleDotClick = React.useCallback(function (index) {
     if (!swiperInstance) {
       return;
@@ -165,8 +150,11 @@ var Banner = function Banner(_ref) {
     }
 
     onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
-    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
+    increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
+  var handleSwiper = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+  }, []);
   var handleReachBeginning = React.useCallback(function () {
     setBeginning(true);
   }, []);
@@ -189,42 +177,23 @@ var Banner = function Banner(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
   var handleAutoplayStop = React.useCallback(function () {
-    setAutoPlaying(false);
+    setAutoPlayning(false);
   }, []);
-  var handleAutoPlayStart = React.useCallback(function () {
-    setAutoPlaying(true);
-  }, []);
-  React.useEffect(function () {
-    var rootElement = rootRef.current;
-
-    if (!pauseOnHover || !autoPlay) {
-      return;
-    }
-
-    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
-      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
-    });
-    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
-      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
-    });
-  }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
-    }, className),
-    ref: rootRef
+    }, className)
   }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
     watchSlidesVisibility: true,
-    onSwiper: setSwiperInstance,
+    onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
     onAutoplayStop: handleAutoplayStop,
-    onAutoplayStart: handleAutoPlayStart,
     onTouchEnd: increaseAutoplayDelay
   }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
@@ -291,7 +260,6 @@ Banner.propTypes = {
   }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
-  pauseOnHover: PropTypes.bool,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,

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

@@ -21,10 +21,6 @@
           appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.mfui-button_size-all_extra-small .mfui-button__inner {
-  min-width: 26px;
-  height: 26px;
-}
 .mfui-button_size-all_small .mfui-button__inner {
   min-width: 32px;
   height: 32px;
@@ -37,10 +33,6 @@
   min-width: 60px;
   height: 60px;
 }
-.mfui-button_size-all_extra-small .mfui-button__icon {
-  width: 18px;
-  height: 18px;
-}
 .mfui-button_size-all_small .mfui-button__icon {
   width: 24px;
   height: 24px;
@@ -54,10 +46,6 @@
   height: 40px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-button_size-wide_extra-small .mfui-button__inner {
-    min-width: 26px;
-    height: 26px;
-  }
   .mfui-button_size-wide_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -70,10 +58,6 @@
     min-width: 60px;
     height: 60px;
   }
-  .mfui-button_size-wide_extra-small .mfui-button__icon {
-    width: 18px;
-    height: 18px;
-  }
   .mfui-button_size-wide_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -88,10 +72,6 @@
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-button_size-desktop_extra-small .mfui-button__inner {
-    min-width: 26px;
-    height: 26px;
-  }
   .mfui-button_size-desktop_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -104,10 +84,6 @@
     min-width: 60px;
     height: 60px;
   }
-  .mfui-button_size-desktop_extra-small .mfui-button__icon {
-    width: 18px;
-    height: 18px;
-  }
   .mfui-button_size-desktop_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -122,10 +98,6 @@
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-button_size-tablet_extra-small .mfui-button__inner {
-    min-width: 26px;
-    height: 26px;
-  }
   .mfui-button_size-tablet_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -138,10 +110,6 @@
     min-width: 60px;
     height: 60px;
   }
-  .mfui-button_size-tablet_extra-small .mfui-button__icon {
-    width: 18px;
-    height: 18px;
-  }
   .mfui-button_size-tablet_small .mfui-button__icon {
     width: 24px;
     height: 24px;
@@ -156,10 +124,6 @@
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-button_size-mobile_extra-small .mfui-button__inner {
-    min-width: 26px;
-    height: 26px;
-  }
   .mfui-button_size-mobile_small .mfui-button__inner {
     min-width: 32px;
     height: 32px;
@@ -172,10 +136,6 @@
     min-width: 60px;
     height: 60px;
   }
-  .mfui-button_size-mobile_extra-small .mfui-button__icon {
-    width: 18px;
-    height: 18px;
-  }
   .mfui-button_size-mobile_small .mfui-button__icon {
     width: 24px;
     height: 24px;

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

@@ -13,7 +13,6 @@ export declare const ButtonThemes: {
 };
 declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {
-    readonly EXTRA_SMALL: "extra-small";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";

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

@@ -54,7 +54,6 @@ var ButtonThemes = {
 };
 exports.ButtonThemes = ButtonThemes;
 var ButtonSizes = {
-  EXTRA_SMALL: 'extra-small',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
@@ -69,7 +68,7 @@ var Content;
 })(Content || (Content = {}));
 
 var getLoaderSize = function getLoaderSize(size) {
-  return size === ButtonSizes.SMALL || size === ButtonSizes.EXTRA_SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
+  return size === ButtonSizes.SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
 };
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-button');

package/dist/lib/components/Calendar/Calendar.js

@@ -86,17 +86,6 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
-/* List of cases to check on component change:
-
-- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
-- Should set 1 day period if start and end date is equal
-- Should correctly increase period if choose earlier start date
-- Should correctly change start date of selected period if chosen date in period closer to current start date
-- Should correctly change end date of selected period if chosen date in period closer to current end date
-- Should correctly highlights period if start date chosen and hover on possible end date
-
-*/
-
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-calendar');
 
@@ -135,7 +124,6 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
-  var isUserChoice = (0, _react.useRef)(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -156,13 +144,10 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
-  (0, _react.useEffect)(function () {
-    isUserChoice.current = false;
-  }, [startDate]);
   (0, _react.useEffect)(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -227,7 +212,6 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
-    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

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

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

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

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

package/dist/lib/components/Calendar/components/Month/Month.js

@@ -23,9 +23,9 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 6v8l-5-4z",
     fillRule: "evenodd",
-    clipRule: "evenodd"
+    clipRule: "evenodd",
+    d: "M12 6v8l-5-4z"
   }));
 };
 
@@ -33,9 +33,9 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M8 14V6l5 4z",
     fillRule: "evenodd",
-    clipRule: "evenodd"
+    clipRule: "evenodd",
+    d: "M8 14V6l5 4z"
   }));
 };
 

package/dist/lib/components/Caption/Caption.css

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

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

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