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

package/CHANGELOG.md

@@ -3,83 +3,71 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.9.0...@megafon/ui-core@3.10.0) (2022-05-30)
+# [4.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.1...@megafon/ui-core@4.0.0-beta.2) (2022-06-01)
 
 
 ### Features
 
-* **banner:** add new prop 'pauseOnHover' ([ac654c3](https://github.com/MegafonWebLab/megafon-ui/commit/ac654c3c23821a5d29ffd5cd91ff7337b3d087c1))
+* **textfield:** update by new design ([8d11972](https://github.com/MegafonWebLab/megafon-ui/commit/8d11972c73374df0d0a66d4607eb87bb4190e92e))
 
 
+### BREAKING CHANGES
 
+* **textfield:** add placeholders text by default
+ label element positon changed
+ if label prop not setted, label element has text from placeholder (default or in props)
 
 
-# [3.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.8.0...@megafon/ui-core@3.9.0) (2022-05-27)
 
 
-### Bug Fixes
 
-* **select:** fix selected item color when value is zero ([9847095](https://github.com/MegafonWebLab/megafon-ui/commit/98470955ef813504d4bfa4cd4d3aba77b5458446))
+# [4.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.0...@megafon/ui-core@4.0.0-beta.1) (2022-05-27)
 
 
 ### Features
 
-* **switcher:** add data-attribute for inner element ([793a022](https://github.com/MegafonWebLab/megafon-ui/commit/793a0224ab957b938e67dd1b4d16c2389a9fb6f8))
-* **tooltip:** add portal selector props ([6188832](https://github.com/MegafonWebLab/megafon-ui/commit/6188832e9ba212e7a8182333aba06d77c3e979d6))
-
-
-
-
+* **accordion:** update by new design ([331f8dc](https://github.com/MegafonWebLab/megafon-ui/commit/331f8dcb55d3577c086eb0e6beb00fd82f064943))
 
-# [3.8.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.7.0...@megafon/ui-core@3.8.0) (2022-05-17)
-
-
-### Features
-
-* **notification:** add props classes to notification component ([608a424](https://github.com/MegafonWebLab/megafon-ui/commit/608a4246eb99af354fb7cf8ab98c2ed513d87b66))
 
+### BREAKING CHANGES
 
+* **accordion:** change next-sibling accordion styles
 
 
 
-# [3.7.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.6.0...@megafon/ui-core@3.7.0) (2022-05-05)
 
 
-### Bug Fixes
-
-* **logo:** fix horizontal logo svg ([76655eb](https://github.com/MegafonWebLab/megafon-ui/commit/76655ebb82650cc2617750af0b2b2726d3ebcbf3))
+# [4.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3-beta.1...@megafon/ui-core@4.0.0-beta.0) (2022-05-24)
 
 
 ### Features
 
-* **button:** added extra small size ([a26da46](https://github.com/MegafonWebLab/megafon-ui/commit/a26da4601de7e7c81c40eabf9a87ccdbf18cb790))
-
-
+* **caption:** add new Caption component; update .smallFont() less mixin ([603bed3](https://github.com/MegafonWebLab/megafon-ui/commit/603bed3ce782676b22381e3d4df5dae141fb015c))
+* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ef15841](https://github.com/MegafonWebLab/megafon-ui/commit/ef15841474473739d3ac88da7a8737e183ff288a))
 
 
+### BREAKING CHANGES
 
-# [3.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3...@megafon/ui-core@3.6.0) (2022-04-25)
+* **caption:** .smallFont() less mixin line-height rule now set to 18px instead of 16px
+either accept new rules or manually add line-height: 16px in your components
+* **paragraph:** prop 'size' is no longer exists.
+use component Caption instead of Paragraph size="small"
 
 
-### Bug Fixes
 
-* **calendar:** fix go to start day after user choice ([8bbce10](https://github.com/MegafonWebLab/megafon-ui/commit/8bbce102d204f7ea7706158f3e6540c86ed3aada))
 
 
-### Features
-
-* **tooltip:** added prop isPortal for tooltip ([e6f6d17](https://github.com/MegafonWebLab/megafon-ui/commit/e6f6d1749cd99f065c50bac4eb6a9b3592653f8d))
+## [3.5.3-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3-beta.0...@megafon/ui-core@3.5.3-beta.1) (2022-05-06)
 
+**Note:** Version bump only for package @megafon/ui-core
 
 
 
 
-## [3.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3) (2022-04-18)
 
+## [3.5.3-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3-beta.0) (2022-04-13)
 
-### Bug Fixes
-
-* **switcher:** fix safari bugs ([65274bc](https://github.com/MegafonWebLab/megafon-ui/commit/65274bc3c5e7385109afff94a8ff3f712c9af097))
+**Note:** Version bump only for package @megafon/ui-core
 
 
 

package/dist/es/colors/Colors.css

@@ -2,6 +2,8 @@
   margin: 0 -80px;
   padding: 56px 80px 40px;
   background-color: var(--spbSky0);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,6 +92,8 @@
   font-size: 12px;
   line-height: 18px;
   text-align: center;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
 }
 @media screen and (max-width: 1023px) {
   .colors__description {

package/dist/es/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/es/components/Accordion/Accordion.js

@@ -11,15 +11,9 @@ var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     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", _extends({
-    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"
   }));
 };
 
@@ -58,24 +52,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", _extends({}, 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", _extends({}, 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, _extends({
     as: "h5"
   }, 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, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp)) : /*#__PURE__*/React.createElement(ArrowDown, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown)))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
+    className: cn('icon-box')
+  }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
+    className: cn('icon')
+  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState

package/dist/es/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/es/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/es/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/es/components/Banner/Banner.d.ts

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

package/dist/es/components/Banner/Banner.js

@@ -49,9 +49,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 = _slicedToArray(_React$useState, 2),
@@ -71,42 +69,29 @@ var Banner = function Banner(_ref) {
   var _React$useState7 = React.useState(autoPlay),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       isAutoPlaying = _React$useState8[0],
-      setAutoPlaying = _React$useState8[1];
+      setAutoPlayning = _React$useState8[1];
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       activeIndex = _React$useState10[0],
       setActiveIndex = _React$useState10[1];
 
-  var _React$useState11 = React.useState(autoPlayDelay),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      delay = _React$useState12[0],
-      setDelay = _React$useState12[1];
-
-  var _React$useState13 = React.useState(false),
-      _React$useState14 = _slicedToArray(_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 ? ArrowTheme.DARK : ArrowTheme.PURPLE;
-  var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
+    if (_typeof(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;
@@ -114,8 +99,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;
@@ -123,8 +108,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;
@@ -137,8 +122,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);
   }, []);
@@ -161,42 +149,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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
-    }, className),
-    ref: rootRef
+    }, className)
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, 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(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
@@ -263,7 +232,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/es/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/es/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/es/components/Button/Button.js

@@ -29,7 +29,6 @@ export var ButtonThemes = {
   BLACK: 'black'
 };
 export var ButtonSizes = {
-  EXTRA_SMALL: 'extra-small',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
@@ -43,7 +42,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 = cnCreate('mfui-button');

package/dist/es/components/Calendar/Calendar.js

@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
@@ -53,17 +53,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 = cnCreate('mfui-calendar');
 
@@ -102,7 +91,6 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
-  var isUserChoice = useRef(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -123,13 +111,10 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
-  useEffect(function () {
-    isUserChoice.current = false;
-  }, [startDate]);
   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) {
@@ -194,7 +179,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/es/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;