@megafon/ui-core 7.2.1 → 7.3.0

package/dist/es/components/Banner/Banner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_margin-top{margin-top:24px}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}

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

@@ -69,6 +69,8 @@ export interface IBannerProps {
     noIncreaseAutoplayDelay?: boolean;
     /** Показать часть следующего слайда */
     showNextSlide?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     children?: React.ReactNode;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;

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

@@ -74,6 +74,8 @@ var Banner = function Banner(_ref) {
     autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
     noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
     showNextSlide = _ref.showNextSlide,
+    _ref$hasMarginTop = _ref.hasMarginTop,
+    hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop,
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? [] : _ref$children,
     getSwiper = _ref.getSwiper,
@@ -259,7 +261,8 @@ var Banner = function Banner(_ref) {
       'background-color': backgroundColor,
       'no-touch': !isTouch,
       radius: radius,
-      'show-next-slide': showNextSlide
+      'show-next-slide': showNextSlide,
+      'margin-top': hasMarginTop
     }, className),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {

package/dist/es/components/Calendar/Calendar.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-calendar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mfui-calendar_modern{display:block;height:304px;overflow-x:hidden;overflow-y:scroll;width:364px}.mfui-calendar_modern::-webkit-scrollbar{width:16px}.mfui-calendar_modern::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-calendar_modern::-webkit-scrollbar-thumb:hover{background-color:#999}
+h1,h2,h3,h4,h5{margin:0}.mfui-calendar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mfui-calendar_modern{display:block;height:304px;overflow-x:hidden;overflow-y:scroll;width:100%}.mfui-calendar_modern::-webkit-scrollbar{width:4px}.mfui-calendar_modern::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border-radius:16px}.mfui-calendar_modern::-webkit-scrollbar-thumb:hover{background-color:#999}

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

@@ -319,14 +319,14 @@ var Calendar = function Calendar(_ref) {
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
       var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
       return /*#__PURE__*/React.createElement("div", {
-        ref: isCurrentMonth ? currentMonthRef : null
+        ref: isCurrentMonth ? currentMonthRef : null,
+        key: "".concat(year, "-").concat(month)
       }, /*#__PURE__*/React.createElement(Month, {
         dataAttrs: {
           root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
           arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
           arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
         },
-        key: "".concat(year, "-").concat(month),
         year: year,
         weekdayLabels: weekdayLabels,
         monthLabel: monthLabel,

package/dist/es/components/Calendar/components/_Day/Day.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--content);cursor:pointer;height:32px;line-height:24px;outline:none;padding:0 10px 8px 0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;line-height:18px}.mfui-day:last-child{padding-right:0}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:32px;left:0;position:absolute;top:0;width:32px;z-index:1}.mfui-day_active-modern:after{height:38px;width:38px}.mfui-day_active-modern:hover:after{background-color:var(--brandGreen)!important}.mfui-day:not(:disabled):not(.mfui-day_active):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--brandGreen)}.mfui-day_disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-day:not(:disabled):not(.mfui-day_active):focus,.mfui-day_active,.mfui-day_active-modern:after{color:var(--stcWhite)}.mfui-day_active+.mfui-day_active:before,.mfui-day_between:hover+.mfui-day:not(.mfui-day_monday).mfui-day_active:before{background-color:var(--spbSky1);content:"";display:block;height:32px;left:-22px;position:absolute;top:0;width:32px;z-index:-1}.mfui-day_between{border-radius:0;position:relative}.mfui-day_between:before{left:-22px;padding:0 20px}.mfui-day_between:after,.mfui-day_between:before{background-color:var(--spbSky1);content:"";display:block;height:32px;position:absolute;top:0;z-index:-1}.mfui-day_between:after{right:-16px;width:40px}.mfui-day_last,.mfui-day_sunday{border-radius:50%}.mfui-day_last:after,.mfui-day_sunday:after{border-radius:50%;right:10px;width:32px}.mfui-day_last:after{right:0}.mfui-day_first,.mfui-day_monday{border-radius:50%}.mfui-day_first:before,.mfui-day_monday:before{border-radius:50%;left:0;padding:0;width:32px}.mfui-day_sunday.mfui-day_first{border-radius:50%}.mfui-day__label{position:relative;z-index:99}.mfui-day_modern{height:38px;width:38.29px}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after,.mfui-day_modern_active-modern:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:38px;left:0;position:absolute;top:0;width:38px;z-index:1}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern_active-modern:after{background-color:var(--brandGreen)}.mfui-day:not(:disabled):focus,.mfui-day_active-modern{color:var(--stcWhite)}.mfui-day_active-modern+.mfui-day_active-modern:before,.mfui-day_between-modern:hover+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;left:-22px;position:absolute;top:0;width:40px;z-index:-1}.mfui-day_between-modern{border-radius:0;position:relative}.mfui-day_between-modern:before{left:-28px;padding:0 29px}.mfui-day_between-modern:after,.mfui-day_between-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;position:absolute;top:0;z-index:-1}.mfui-day_between-modern:after{right:-18px;width:45px}.mfui-day_last-modern,.mfui-day_sunday-modern{border-radius:50%}.mfui-day_last-modern:before,.mfui-day_sunday-modern:before{padding-left:20px}.mfui-day_last-modern:after,.mfui-day_sunday-modern:after{border-radius:50%;right:10px;width:38.29px}.mfui-day_last-modern:after{right:0}.mfui-day_first-modern,.mfui-day_monday-modern{border-radius:50%}.mfui-day_first-modern:before,.mfui-day_monday-modern:before{border-radius:50%;left:0;padding:0;width:38px}.mfui-day_sunday-modern.mfui-day_first-modern{border-radius:50%}.mfui-day__label_modern{font-size:15px;font-weight:400;line-height:24px;text-align:center}
+h1,h2,h3,h4,h5{margin:0}.mfui-day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--content);cursor:pointer;height:32px;line-height:24px;outline:none;padding:0 10px 8px 0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;line-height:18px}.mfui-day:last-child{padding-right:0}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:32px;left:0;position:absolute;top:0;width:32px;z-index:1}.mfui-day_active-modern:after{height:38px;width:38px}.mfui-day_active-modern:focus:after,.mfui-day_active-modern:hover:after{background-color:var(--brandGreen)!important;height:38px!important;width:38px!important}.mfui-day:not(:disabled):not(.mfui-day_active):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--brandGreen)}.mfui-day_disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-day:not(:disabled):not(.mfui-day_active):focus,.mfui-day_active,.mfui-day_active-modern:after{color:var(--stcWhite)}.mfui-day_active+.mfui-day:not(.mfui-day_monday).mfui-day_active:before,.mfui-day_between:hover+.mfui-day:not(.mfui-day_monday).mfui-day_active:before{background-color:var(--spbSky1);content:"";display:block;height:32px;left:-22px;position:absolute;top:0;width:32px;z-index:-1}.mfui-day_between{border-radius:0;position:relative}.mfui-day_between:before{left:-22px;padding:0 20px}.mfui-day_between:after,.mfui-day_between:before{background-color:var(--spbSky1);content:"";display:block;height:32px;position:absolute;top:0;z-index:-1}.mfui-day_between:after{right:-16px;width:40px}.mfui-day_last,.mfui-day_sunday{border-radius:50%}.mfui-day_last:after,.mfui-day_sunday:after{border-radius:50%;right:10px;width:32px}.mfui-day_last:after{right:0}.mfui-day_first,.mfui-day_monday{border-radius:50%}.mfui-day_first:before,.mfui-day_monday:before{border-radius:50%;left:0;padding:0;width:32px}.mfui-day_sunday.mfui-day_first{border-radius:50%}.mfui-day__label{position:relative;z-index:99}.mfui-day_modern{height:38px;width:100%}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after,.mfui-day_modern_active-modern:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:38px;left:0;position:absolute;top:0;width:38px;z-index:1}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern_active-modern:after{background-color:var(--brandGreen)}.mfui-day:not(:disabled):focus,.mfui-day_active-modern{color:var(--stcWhite)}.mfui-day_active-modern+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before,.mfui-day_between-modern:hover+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;left:-22px;position:absolute;top:0;width:40px;z-index:-1}.mfui-day_between-modern{border-radius:0;position:relative}.mfui-day_between-modern:before{left:-20px;padding:0 29px}.mfui-day_between-modern:after,.mfui-day_between-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;position:absolute;top:0;z-index:-1}.mfui-day_between-modern:after{right:-12px;width:45px}.mfui-day_last-modern,.mfui-day_sunday-modern{border-radius:50%}.mfui-day_last-modern:before,.mfui-day_sunday-modern:before{padding-left:8px}.mfui-day_last-modern:after,.mfui-day_sunday-modern:after{border-radius:50%;right:10px;width:38.29px}.mfui-day_last-modern:after{right:0}.mfui-day_first-modern,.mfui-day_monday-modern{border-radius:50%}.mfui-day_first-modern:before,.mfui-day_monday-modern:before{border-radius:50%;left:0;padding:0;width:38px}.mfui-day_sunday-modern.mfui-day_first-modern{border-radius:50%}.mfui-day__label_modern{font-size:15px;font-weight:400;line-height:24px;text-align:center}

package/dist/es/components/Calendar/components/_Month/Month.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-month{position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:28px 0;width:284px}.mfui-month,.mfui-month__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-month__header{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:20px;text-transform:capitalize;width:282px}.mfui-month__header svg{cursor:pointer;height:24.5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:var(--content)}.mfui-month__title{font-size:15px;font-weight:500;line-height:24px;text-align:center;width:224px}.mfui-month__weekday-labels{border-bottom:1px solid var(--spbSky1);-webkit-column-gap:22px;-moz-column-gap:22px;column-gap:22px;display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:13px;width:272px}.mfui-month__weekday{color:var(--content);font-size:12px;font-weight:600;height:16px;line-height:18px;line-height:24px;text-align:center;text-transform:capitalize;width:20px}.mfui-month__days{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:grid;grid-template-columns:repeat(7,1fr);margin-top:8px;row-gap:0;width:284px}.mfui-month svg.mfui-month__arrow_disabled{cursor:default;opacity:.5}.mfui-month_modern{padding:0 0 24px;width:344px}.mfui-month_modern .mfui-month__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px;text-transform:capitalize;width:328px}.mfui-month_modern .mfui-month__title{font-size:15px;font-weight:500;line-height:24px;margin:0 auto;text-align:center;width:224px}.mfui-month_modern .mfui-month__weekday-labels{border-bottom:none;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:0;width:328px}.mfui-month_modern .mfui-month__weekday{color:var(--spbSky3);font-size:15px;font-weight:400;height:24px;line-height:24px;margin:0 auto;text-align:center;text-transform:capitalize;width:20px}.mfui-month_modern .mfui-month__days{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px;row-gap:0;width:328px}
+h1,h2,h3,h4,h5{margin:0}.mfui-month{position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:28px 0;width:284px}.mfui-month,.mfui-month__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-month__header{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:20px;text-transform:capitalize;width:282px}.mfui-month__header svg{cursor:pointer;height:24.5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:var(--content)}.mfui-month__title{font-size:15px;font-weight:500;line-height:24px;text-align:center;width:224px}.mfui-month__weekday-labels{border-bottom:1px solid var(--spbSky1);-webkit-column-gap:22px;-moz-column-gap:22px;column-gap:22px;display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:13px;width:272px}.mfui-month__weekday{color:var(--content);font-size:12px;font-weight:600;height:16px;line-height:18px;line-height:24px;text-align:center;text-transform:capitalize;width:20px}.mfui-month__days{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:grid;grid-template-columns:repeat(7,1fr);margin-top:8px;row-gap:0;width:284px}.mfui-month svg.mfui-month__arrow_disabled{cursor:default;opacity:.5}.mfui-month_modern{padding:0 16px 24px 0;width:100%}.mfui-month_modern .mfui-month__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px;text-transform:capitalize;width:100%}.mfui-month_modern .mfui-month__title{font-size:15px;font-weight:500;line-height:24px;margin:0 auto;text-align:center;width:224px}.mfui-month_modern .mfui-month__weekday-labels{border-bottom:none;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:0;width:100%}.mfui-month_modern .mfui-month__weekday{color:var(--spbSky3);font-size:15px;font-weight:400;height:24px;line-height:24px;margin:0 auto;text-align:center;text-transform:capitalize;width:20px}.mfui-month_modern .mfui-month__days{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px;row-gap:0;width:100%}

package/dist/es/components/Tooltip/Tooltip.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-tooltip{opacity:0;pointer-events:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;visibility:hidden;z-index:100}.mfui-tooltip_open{opacity:1;pointer-events:all;visibility:visible}.mfui-tooltip_paddings_small .mfui-tooltip__content{padding:16px}.mfui-tooltip_paddings_medium .mfui-tooltip__content{padding:24px}.mfui-tooltip__content{overflow:hidden;position:relative;z-index:1}.mfui-tooltip__content-shadow{bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.mfui-tooltip__arrow-container{position:absolute}.mfui-tooltip__arrow,.mfui-tooltip__arrow-wrap{height:13px;width:33px}.mfui-tooltip__arrow{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tooltip__arrow svg{position:absolute}.mfui-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));fill:var(--base)}.mfui-tooltip__text{font-size:15px;line-height:24px}@media screen and (max-width:767px){.mfui-tooltip__text{font-size:12px;line-height:18px}}.mfui-tooltip__text_margin{margin-top:8px}.mfui-tooltip__button,.mfui-tooltip__close-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding:0}.mfui-tooltip__button{background-color:transparent;color:var(--brandGreen);font-family:inherit;font-size:15px;font-weight:500;line-height:18px;-webkit-transition:.3s;transition:.3s}@media screen and (max-width:767px){.mfui-tooltip__button{font-size:12px;line-height:14px}}.mfui-tooltip__button_margin{margin-top:8px}.mfui-tooltip__button:hover{color:var(--buttonHoverGreen)}.mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGreen)}.mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip__close-button{position:relative;right:-6px;top:-6px;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:12px;float:right;height:24px;justify-content:center;-webkit-transition:.3s;transition:.3s;width:24px}.mfui-tooltip__close-button:hover{background-color:var(--spbSky1)}.mfui-tooltip__close-button:active{background-color:var(--spbSky2)}.mfui-tooltip__close-icon{display:block;height:20px;opacity:.5;width:20px;fill:var(--content)}.mfui-tooltip__button-arrow{height:20px;margin-bottom:-2px;min-width:20px;-webkit-transition:.3s;transition:.3s;width:20px;fill:var(--brandGreen)}.mfui-tooltip__addititonal-content_margin{margin-top:16px}@media screen and (max-width:767px){.mfui-tooltip__addititonal-content_margin{margin-top:12px}}.mfui-tooltip_small .mfui-tooltip__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-tooltip_small .mfui-tooltip__text{font-weight:500}.mfui-tooltip_small .mfui-tooltip__close-button{top:auto}.mfui-tooltip_theme_white .mfui-tooltip__content{border:1px solid var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__button,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__title,.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__button,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__title{color:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button-arrow{fill:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover,.mfui-tooltip_theme_red .mfui-tooltip__button:hover{color:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active,.mfui-tooltip_theme_red .mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button,.mfui-tooltip_theme_red .mfui-tooltip__close-button{background-color:var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:hover,.mfui-tooltip_theme_red .mfui-tooltip__close-button:hover{background-color:var(--stcWhite20)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:active,.mfui-tooltip_theme_red .mfui-tooltip__close-button:active{background-color:var(--stcWhite50)}.mfui-tooltip_theme_blue .mfui-tooltip__close-icon,.mfui-tooltip_theme_red .mfui-tooltip__close-icon{opacity:1;fill:var(--stcWhite)}.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__content-shadow{background-color:var(--fury80)}.mfui-tooltip_theme_red .mfui-tooltip__arrow-inner{fill:var(--fury80)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__content-shadow{background-color:var(--reflexBlue80)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner{fill:var(--reflexBlue80)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(24px);transform:translateX(24px)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:3px}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:3px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:13px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(24px);transform:translateY(24px)}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:13px}.mfui-tooltip[data-popper-escaped=true].mfui-tooltip_has-escape{pointer-events:none;visibility:hidden}
+h1,h2,h3,h4,h5{margin:0}.mfui-tooltip{opacity:0;pointer-events:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;visibility:hidden;z-index:100}.mfui-tooltip_open{opacity:1;pointer-events:all;visibility:visible}.mfui-tooltip_paddings_small .mfui-tooltip__content{padding:16px}.mfui-tooltip_paddings_medium .mfui-tooltip__content{padding:24px}.mfui-tooltip__content{overflow:hidden;position:relative;z-index:1}.mfui-tooltip__content-shadow{bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.mfui-tooltip__arrow-container{position:absolute}.mfui-tooltip__arrow,.mfui-tooltip__arrow-wrap{height:13px;width:33px}.mfui-tooltip__arrow{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tooltip__arrow svg{position:absolute}.mfui-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));fill:var(--base)}.mfui-tooltip__text{font-size:15px;line-height:24px}@media screen and (max-width:767px){.mfui-tooltip__text{font-size:12px;line-height:18px}}.mfui-tooltip__text_margin{margin-top:8px}.mfui-tooltip__button,.mfui-tooltip__close-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding:0}.mfui-tooltip__button{background-color:transparent;color:var(--brandGreen);font-family:inherit;font-size:15px;font-weight:500;line-height:18px;-webkit-transition:.3s;transition:.3s}@media screen and (max-width:767px){.mfui-tooltip__button{font-size:12px;line-height:14px}}.mfui-tooltip__button_margin{margin-top:8px}.mfui-tooltip__button:hover{color:var(--buttonHoverGreen)}.mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGreen)}.mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip__close-button{position:relative;right:-6px;top:-6px;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:12px;float:right;height:24px;justify-content:center;-webkit-transition:.3s;transition:.3s;width:24px}.mfui-tooltip__close-button:hover{background-color:var(--spbSky1)}.mfui-tooltip__close-button:active{background-color:var(--spbSky2)}.mfui-tooltip__close-icon{display:block;height:20px;opacity:.5;width:20px;fill:var(--content)}.mfui-tooltip__button-arrow{height:20px;margin-bottom:-2px;min-width:20px;-webkit-transition:.3s;transition:.3s;width:20px;fill:var(--brandGreen)}.mfui-tooltip__addititonal-content_margin{margin-top:16px}@media screen and (max-width:767px){.mfui-tooltip__addititonal-content_margin{margin-top:12px}}.mfui-tooltip_small .mfui-tooltip__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-tooltip_small .mfui-tooltip__text{font-weight:500}.mfui-tooltip_small .mfui-tooltip__close-button{top:auto}.mfui-tooltip_theme_white .mfui-tooltip__content{border:1px solid var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__button,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__title,.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__button,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__title{color:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button-arrow{fill:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover,.mfui-tooltip_theme_red .mfui-tooltip__button:hover{color:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active,.mfui-tooltip_theme_red .mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button,.mfui-tooltip_theme_red .mfui-tooltip__close-button{background-color:var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:hover,.mfui-tooltip_theme_red .mfui-tooltip__close-button:hover{background-color:var(--stcWhite20)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:active,.mfui-tooltip_theme_red .mfui-tooltip__close-button:active{background-color:var(--stcWhite50)}.mfui-tooltip_theme_blue .mfui-tooltip__close-icon,.mfui-tooltip_theme_red .mfui-tooltip__close-icon{opacity:1;fill:var(--stcWhite)}.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__content-shadow{background-color:var(--fury80)}.mfui-tooltip_theme_red .mfui-tooltip__arrow-inner{fill:var(--fury80)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__content-shadow{background-color:var(--reflexBlue80)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner{fill:var(--reflexBlue80)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(24px);transform:translateX(24px)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:3px}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(15px);transform:translateX(15px)}.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:-6px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:3px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-15px);transform:translateX(-15px)}.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:-6px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:13px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:4px}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(24px);transform:translateY(24px)}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:13px}.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(15px);transform:translateY(15px)}.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:4px}.mfui-tooltip[data-popper-escaped=true].mfui-tooltip_has-escape{pointer-events:none;visibility:hidden}

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

@@ -23,6 +23,10 @@ export declare const Paddings: {
     readonly MEDIUM: "medium";
 };
 type PaddingsType = (typeof Paddings)[keyof typeof Paddings];
+export declare const Offset: {
+    readonly SMALL: "small";
+};
+type OffsetType = (typeof Offset)[keyof typeof Offset];
 export declare const TriggerEvent: {
     readonly HOVER: "hover";
     readonly CLICK: "click";
@@ -59,6 +63,8 @@ export interface ITooltipProps {
     fallbackPlacements?: PlacementType[];
     /** Размер отступов от контента */
     paddings?: PaddingsType;
+    /** Смещение тултипа относительно триггер-элемента */
+    offset?: OffsetType;
     /** Тип взаимодействия с триггер-элементом для показа тултипа */
     triggerEvent?: TriggerEventType;
     /** Реф на элемент, за границы которого тултип не сможет выйти. По умолчанию viewport  */
@@ -69,6 +75,8 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
+    /** Пересчет позиции тултипа в скрытом состоянии при изменении размера окна */
+    isHiddenResize?: boolean;
     /** Отрендерить компонент в корневой элементе страницы body */
     isPortal?: boolean;
     /** Рендеринг компонента в указанном селекторе */

package/dist/es/components/Tooltip/Tooltip.js

@@ -54,6 +54,9 @@ export var Paddings = {
   SMALL: 'small',
   MEDIUM: 'medium'
 };
+export var Offset = {
+  SMALL: 'small'
+};
 export var TriggerEvent = {
   HOVER: 'hover',
   CLICK: 'click',
@@ -90,6 +93,7 @@ var Tooltip = function Tooltip(_ref) {
     fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['left', 'right', 'top', 'bottom'] : _ref$fallbackPlacemen,
     _ref$paddings = _ref.paddings,
     paddings = _ref$paddings === void 0 ? 'small' : _ref$paddings,
+    offset = _ref.offset,
     _ref$triggerEvent = _ref.triggerEvent,
     triggerEvent = _ref$triggerEvent === void 0 ? 'hover' : _ref$triggerEvent,
     boundaryElement = _ref.boundaryElement,
@@ -97,6 +101,8 @@ var Tooltip = function Tooltip(_ref) {
     targetElement = _ref.targetElement,
     _ref$isOpened = _ref.isOpened,
     isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+    _ref$isHiddenResize = _ref.isHiddenResize,
+    isHiddenResize = _ref$isHiddenResize === void 0 ? false : _ref$isHiddenResize,
     _ref$isPortal = _ref.isPortal,
     isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
     portalSelector = _ref.portalSelector,
@@ -169,7 +175,7 @@ var Tooltip = function Tooltip(_ref) {
         name: 'eventListeners',
         options: {
           scroll: isOpen,
-          resize: isOpen
+          resize: isHiddenResize || isOpen
         }
       }, {
         name: 'preventOverflow',
@@ -178,7 +184,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }]
     };
-  }, [placement, arrowElement, currentBoundary, isOpen, fallbackPlacements]);
+  }, [placement, arrowElement, fallbackPlacements, isOpen, isHiddenResize, currentBoundary]);
   var _usePopper = usePopper(currentTarget, popperElement, options),
     styles = _usePopper.styles,
     attributes = _usePopper.attributes,
@@ -312,6 +318,7 @@ var Tooltip = function Tooltip(_ref) {
     className: cn({
       theme: theme,
       paddings: paddings,
+      offset: offset,
       open: isOpen,
       small: !isBigSize,
       'has-escape': !targetElement

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-field{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;position:relative;width:100%}.mfui-upload-field__input{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0);clip-path:inset(100%)}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './UploadField.scss';
+export interface IUploadDropField {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Обязательность поля */
+    required?: boolean;
+    /** Заблокированное состояние */
+    disabled?: boolean;
+    /** Действие при выборе файла */
+    onChange: (files: File[]) => void;
+    /** Дополнительная информация */
+    description?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        dropArea?: Record<string, string>;
+    };
+}
+declare const UploadField: React.FC<IUploadDropField>;
+export default UploadField;

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

@@ -0,0 +1,56 @@
+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.from.js";
+import "core-js/modules/es.string.iterator.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import UploadFieldDropArea from "./components/_UploadFieldDropArea/UploadFieldDropArea";
+import "./UploadField.css";
+var cn = cnCreate('mfui-upload-field');
+var UploadField = function UploadField(_ref) {
+  var className = _ref.className,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    description = _ref.description,
+    dataAttrs = _ref.dataAttrs;
+  var inputRef = React.useRef(null);
+  var handleInputChange = React.useCallback(function (e) {
+    var uploadFiles = Array.from(e.target.files || []);
+    onChange(uploadFiles);
+    e.target.value = '';
+  }, [onChange]);
+  var handleFileDrop = React.useCallback(function (uploadFiles) {
+    onChange(uploadFiles);
+  }, [onChange]);
+  var handleSelectButtonClick = React.useCallback(function () {
+    if (!inputRef || !inputRef.current) {
+      return;
+    }
+    inputRef.current.click();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('input')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    multiple: true,
+    type: "file",
+    ref: inputRef,
+    onChange: handleInputChange,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(UploadFieldDropArea, {
+    description: description,
+    required: required,
+    disabled: disabled,
+    onDrop: handleFileDrop,
+    onSelectButtonClick: handleSelectButtonClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropArea
+    }
+  }));
+};
+export default UploadField;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import './UploadFieldDropArea.scss';
+export interface IUploadFieldDropArea {
+    /** Дополнительная информация */
+    description?: string;
+    /** Обязательность поля */
+    required: boolean;
+    /** Заблокированное состояние */
+    disabled: boolean;
+    /** Обработчик события 'drop' */
+    onDrop: (files: File[]) => void;
+    /** Обработчик нажатия на кнопку выбора файлов */
+    onSelectButtonClick: () => void;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const UploadFieldDropArea: React.FC<IUploadFieldDropArea>;
+export default UploadFieldDropArea;

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

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useDragAndDrop from "../useDragAndDrop";
+import "./UploadFieldDropArea.css";
+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"
+  }));
+};
+var cn = cnCreate('mfui-upload-field-drop-area');
+var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
+  var description = _ref.description,
+    required = _ref.required,
+    disabled = _ref.disabled,
+    onDrop = _ref.onDrop,
+    onSelectButtonClick = _ref.onSelectButtonClick,
+    dataAttrs = _ref.dataAttrs;
+  var dropAreaRef = React.useRef(null);
+  var currentDropAreaRef = !disabled ? dropAreaRef : {
+    current: null
+  };
+  var isDragging = useDragAndDrop(currentDropAreaRef, onDrop);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      disabled: disabled,
+      dragging: isDragging
+    }),
+    ref: dropAreaRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(CloudUpload, {
+    className: cn('upload-icon')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    className: cn('select-button')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
+    type: "button",
+    disabled: disabled,
+    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));
+};
+export default UploadFieldDropArea;

package/dist/es/components/UploadForm/UploadField/components/useDragAndDrop.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useDragAndDrop: (dropAreaRef: React.RefObject<HTMLElement>, onDrop: (files: File[]) => void) => boolean;
+export default useDragAndDrop;

package/dist/es/components/UploadForm/UploadField/components/useDragAndDrop.js

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import React from 'react';
+var useDragAndDrop = function useDragAndDrop(dropAreaRef, onDrop) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isDragging = _React$useState2[0],
+    setIsDragging = _React$useState2[1];
+  var dragEnterHandler = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  var dragLeaveHandler = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  var dragOverHandler = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  var dropHandler = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (e.dataTransfer) {
+      onDrop(Array.from(e.dataTransfer.files));
+    }
+  }, [onDrop]);
+  React.useEffect(function () {
+    if (!dropAreaRef.current) {
+      return undefined;
+    }
+    var dropArea = dropAreaRef.current;
+    dropArea.addEventListener('dragenter', dragEnterHandler);
+    dropArea.addEventListener('dragleave', dragLeaveHandler);
+    dropArea.addEventListener('dragover', dragOverHandler);
+    dropArea.addEventListener('drop', dropHandler);
+    return function () {
+      dropArea.removeEventListener('dragenter', dragEnterHandler);
+      dropArea.removeEventListener('dragleave', dragLeaveHandler);
+      dropArea.removeEventListener('dragover', dragOverHandler);
+      dropArea.removeEventListener('drop', dropHandler);
+    };
+  }, [dragEnterHandler, dragLeaveHandler, dragOverHandler, dropHandler, dropAreaRef]);
+  return isDragging;
+};
+export default useDragAndDrop;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-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-upload-file-item__cancel-icon-box,.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0);border:none;border-radius:50%;cursor:pointer;padding:0}.mfui-upload-file-item__cancel-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}.mfui-upload-file-item__name{font-size:15px;font-weight:500;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;height:4px;margin-top:12px;width:100%}.mfui-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-upload-file-item__service-message{color:var(--content)}.mfui-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-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import './UploadFileItem.scss';
+export interface IUploadFileItem {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Имя файла с расширением */
+    fileName: string;
+    /** Размер файла в байтах */
+    fileSize?: string | number;
+    /** Процент загрузки файла */
+    loadingProgress?: number;
+    /** Сообщение об ошибке */
+    errorText?: string;
+    /** Проверка файла */
+    isChecking?: string;
+    /** Обработчик удаления файла */
+    onDelete?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        deleteButton?: Record<string, string>;
+    };
+}
+declare const UploadFileItem: React.FC<IUploadFileItem>;
+export default UploadFileItem;

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

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.function.name.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Tooltip from "../../Tooltip/Tooltip";
+import UploadFileItemIcon from "./components/_UploadFileItemIcon/UploadFileItemIcon";
+import { getReadableFileSize, splitFileName } from "./helpers";
+import "./UploadFileItem.css";
+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"
+  }));
+};
+var MAX_PROGRESS = 100;
+var cn = cnCreate('mfui-upload-file-item');
+var UploadFileItem = function UploadFileItem(_ref) {
+  var className = _ref.className,
+    fileName = _ref.fileName,
+    _ref$fileSize = _ref.fileSize,
+    fileSize = _ref$fileSize === void 0 ? 0 : _ref$fileSize,
+    _ref$loadingProgress = _ref.loadingProgress,
+    loadingProgress = _ref$loadingProgress === void 0 ? 0 : _ref$loadingProgress,
+    errorText = _ref.errorText,
+    _ref$isChecking = _ref.isChecking,
+    isChecking = _ref$isChecking === void 0 ? false : _ref$isChecking,
+    onDelete = _ref.onDelete,
+    dataAttrs = _ref.dataAttrs;
+  var tooltipTriggerElement = React.useRef(null);
+  var _splitFileName = splitFileName(fileName),
+    name = _splitFileName.name,
+    extension = _splitFileName.extension;
+  var readableFileSize = getReadableFileSize(fileSize);
+  var isError = !!errorText;
+  var handleDelete = function handleDelete(e) {
+    onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
+  };
+  var loadingStatusText = function loadingStatusText() {
+    if (isChecking) {
+      return 'проверка файла…';
+    }
+    if (loadingProgress === MAX_PROGRESS) {
+      return 'файл загружен';
+    }
+    return "\u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430 ".concat(loadingProgress, "%");
+  };
+  var renderExtraContent = function renderExtraContent() {
+    if (isError) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: cn('error-message'),
+        ref: tooltipTriggerElement
+      }, "\u041E\u0448\u0438\u0431\u043A\u0430"), /*#__PURE__*/React.createElement(Tooltip, {
+        className: cn('error-tooltip'),
+        triggerElement: tooltipTriggerElement,
+        colorTheme: "blue",
+        placement: "bottom"
+      }, errorText));
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      className: cn('service-message')
+    }, loadingStatusText());
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      error: isError
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('file-icon-box')
+  }, /*#__PURE__*/React.createElement(UploadFileItemIcon, {
+    fileExtension: extension,
+    className: cn('icon')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('name')
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: cn('description')
+  }, !!extension && /*#__PURE__*/React.createElement("span", null, extension.toUpperCase()), /*#__PURE__*/React.createElement("span", null, readableFileSize), renderExtraContent()), /*#__PURE__*/React.createElement("div", {
+    className: cn('progress-bar')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('progress-bar-fill'),
+    style: {
+      width: "".concat(loadingProgress, "%")
+    }
+  }))), /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: cn('cancel-icon-box')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
+    onClick: handleDelete
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('icon')
+  })));
+};
+export default UploadFileItem;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface IUploadFileItemIcon {
+    className?: string;
+    fileExtension: string;
+}
+declare const UploadFileItemIcon: React.FC<IUploadFileItemIcon>;
+export default UploadFileItemIcon;