@megafon/ui-shared 6.4.0 → 7.0.0

package/dist/es/components/BenefitsPictures/BenefitsPictures.js

@@ -2,53 +2,46 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
-import { useCallback } from 'react';
 import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
 import { breakpoints, cnCreate } from '@megafon/ui-helpers';
 import convert from 'htmr';
 import throttle from 'lodash.throttle';
-import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import getCenterConfig, { getLeftConfig } from "./helpers";
 import "./BenfitsPictures.css";
 export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 var testIdPrefix = 'BenefitsPictures';
 var cn = cnCreate('mfui-benefits-pictures');
-
 var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'left' : _ref$align,
-      _ref$textAlign = _ref.textAlign,
-      textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
-      _ref$imgAlign = _ref.imgAlign,
-      imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
-      _ref$gridGap = _ref.gridGap,
-      gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
-      rootRef = _ref.rootRef,
-      className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes;
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
+    _ref$imgAlign = _ref.imgAlign,
+    imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
+    _ref$gridGap = _ref.gridGap,
+    gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
+    rootRef = _ref.rootRef,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes;
   var isLargeGutter = gridGap === 'large';
   var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
-
   var _React$useState = React.useState(gridGap),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      currentGutter = _React$useState2[0],
-      setCurrentGutter = _React$useState2[1];
-
-  var resizeHandler = useCallback(function () {
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentGutter = _React$useState2[0],
+    setCurrentGutter = _React$useState2[1];
+  var resizeHandler = React.useCallback(function () {
     if (!isLargeGutter) {
       return;
     }
-
     if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
       setCurrentGutter('medium');
     } else {
       setCurrentGutter('large');
     }
   }, [isLargeGutter]);
-
   var renderText = function renderText(text) {
     if (typeof text === 'string') {
       return /*#__PURE__*/React.createElement(Paragraph, {
@@ -59,10 +52,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
         }
       }, convert(text));
     }
-
     return text;
   };
-
   React.useEffect(function () {
     var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
     resizeHandler();
@@ -86,9 +77,9 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     }
   }, items.map(function (_ref2, index) {
     var img = _ref2.img,
-        title = _ref2.title,
-        text = _ref2.text,
-        alt = _ref2.alt;
+      title = _ref2.title,
+      text = _ref2.text,
+      alt = _ref2.alt;
     return /*#__PURE__*/React.createElement(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
       key: index
     }), /*#__PURE__*/React.createElement("div", {
@@ -117,25 +108,4 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     }, convert(title)), !!text && renderText(text))));
   }))));
 };
-
-BenefitsPictures.propTypes = {
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  items: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-    img: PropTypes.string.isRequired,
-    alt: PropTypes.string
-  }).isRequired).isRequired,
-  align: PropTypes.oneOf(['left', 'center']),
-  textAlign: PropTypes.oneOf(['left', 'center', 'auto']),
-  imgAlign: PropTypes.oneOf(['left', 'center', 'auto']),
-  gridGap: PropTypes.oneOf(['medium', 'large']),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    item: PropTypes.string
-  })
-};
 export default BenefitsPictures;

package/dist/es/components/BenefitsPictures/BenfitsPictures.css

@@ -1,43 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-benefits-pictures {
-  overflow: hidden;
-}
-.mfui-benefits-pictures__inner {
-  margin-bottom: -40px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-benefits-pictures__inner {
-    margin-bottom: -48px;
-  }
-}
-.mfui-benefits-pictures__item {
-  margin-bottom: 40px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-benefits-pictures__item {
-    margin-bottom: 48px;
-  }
-}
-.mfui-benefits-pictures__content_h-align_center {
-  text-align: center;
-}
-.mfui-benefits-pictures__img {
-  max-width: 100%;
-  margin-bottom: 32px;
-  border-radius: 12px;
-  vertical-align: top;
-}
-.mfui-benefits-pictures__img_h-align_center {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-}
-.mfui-benefits-pictures__title {
-  margin-bottom: 12px;
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-benefits-pictures{overflow:hidden}.mfui-benefits-pictures__inner{margin-bottom:-40px}@media screen and (min-width:768px){.mfui-benefits-pictures__inner{margin-bottom:-48px}}.mfui-benefits-pictures__item{margin-bottom:40px}@media screen and (min-width:768px){.mfui-benefits-pictures__item{margin-bottom:48px}}.mfui-benefits-pictures__content_h-align_center{text-align:center}.mfui-benefits-pictures__img{border-radius:12px;margin-bottom:32px;max-width:100%;vertical-align:top}.mfui-benefits-pictures__img_h-align_center{display:block;margin-left:auto;margin-right:auto}.mfui-benefits-pictures__title{margin-bottom:12px}

package/dist/es/components/BenefitsPictures/helpers.js

@@ -4,19 +4,15 @@ var columnSize = {
   desktop: '4',
   tablet: '5'
 };
-
 var isOddIndex = function isOddIndex(index) {
   return !((index + 1) % 2);
 };
-
 var getEvenOffset = function getEvenOffset(index) {
   return isOddIndex(index) ? '1' : undefined;
 };
-
 var getOddOffset = function getOddOffset(index) {
   return isOddIndex(index) ? undefined : '1';
 };
-
 var getLeftConfig = function getLeftConfig(count, index) {
   switch (count) {
     case 2:
@@ -26,21 +22,18 @@ var getLeftConfig = function getLeftConfig(count, index) {
         leftOffsetDesktop: getEvenOffset(index),
         leftOffsetTablet: getEvenOffset(index)
       });
-
     default:
       return _extends(_extends({}, columnSize), {
         leftOffsetTablet: getEvenOffset(index)
       });
   }
 };
-
 var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
   switch (count) {
     case 3:
       return _extends(_extends({}, columnSize), {
         leftOffsetTablet: getOddOffset(index)
       });
-
     case 4:
       return _extends(_extends({}, columnSize), {
         rightOffsetWide: getOddOffset(index),
@@ -50,7 +43,6 @@ var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
         rightOffsetTablet: getEvenOffset(index),
         leftOffsetTablet: getOddOffset(index)
       });
-
     default:
       return _extends(_extends({}, columnSize), {
         rightOffsetWide: getOddOffset(index),
@@ -58,7 +50,6 @@ var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
       });
   }
 };
-
 var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
   switch (count) {
     case 4:
@@ -70,30 +61,25 @@ var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
         leftOffsetTablet: getOddOffset(index),
         rightOffsetTablet: getEvenOffset(index)
       });
-
     case 3:
       return _extends(_extends({}, columnSize), {
         leftOffsetTablet: getOddOffset(index)
       });
-
     default:
       return _extends({}, columnSize);
   }
 };
-
 var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
   switch (gutterSize) {
     case 'medium':
       {
         return getCenterMediumConfig(count, index);
       }
-
     default:
       {
         return getCenterLargeConfig(count, index);
       }
   }
 };
-
 export default getCenterConfig;
 export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig };

package/dist/es/components/BenefitsPictures/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IBenefit {
     /** Заголовок бенефита */
     title?: string;
@@ -9,8 +8,8 @@ export interface IBenefit {
     /** Значение тега alt для изображения */
     alt?: string;
 }
-declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-export declare type GridConfig = {
+type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export type GridConfig = {
     wide?: TGridSizeValues;
     desktop?: TGridSizeValues;
     tablet?: TGridSizeValues;
@@ -21,5 +20,5 @@ export declare type GridConfig = {
     rightOffsetTablet?: TGridSizeValues;
     rightOffsetWide?: TGridSizeValues;
 };
-export declare type GridGutterSize = 'large' | 'medium';
+export type GridGutterSize = 'large' | 'medium';
 export {};

package/dist/es/components/BenefitsPictures/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/components/BlogBox/BlogBox.css

@@ -1,92 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-blog-box {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-blog-box__list {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    -webkit-column-gap: 20px;
-       -moz-column-gap: 20px;
-            column-gap: 20px;
-    row-gap: 24px;
-  }
-}
-.mfui-blog-box__list_row {
-  grid-template-columns: repeat(6, 1fr);
-}
-.mfui-blog-box__list_row .mfui-blog-box__item {
-  grid-column-end: span 2;
-}
-.mfui-blog-box__list_row-size_1 .mfui-blog-box__item {
-  grid-column-start: 3;
-}
-.mfui-blog-box__list_row-size_2 .mfui-blog-box__item:first-child {
-  grid-column-start: 2;
-}
-.mfui-blog-box__item_view_thumbnail {
-  margin-top: 16px;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-blog-box__item_view_thumbnail {
-    grid-column-start: 1;
-    grid-column-end: 2;
-    margin-top: 0;
-  }
-}
-.mfui-blog-box__item_view_full {
-  margin-bottom: 24px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box__item_view_full {
-    margin-bottom: 32px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-blog-box__item_view_full {
-    grid-row-start: 1;
-    grid-row-end: 4;
-    grid-column-start: 2;
-    grid-column-end: 3;
-    margin-bottom: 0;
-  }
-}
-.mfui-blog-box__button-wrapper {
-  margin-top: 32px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box__button-wrapper {
-    margin-top: 40px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-blog-box__button-wrapper {
-    margin-top: 56px;
-  }
-}
-.mfui-blog-box__button {
-  min-width: 208px;
-}
-.mfui-blog-box_align-left {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-}
-.mfui-blog-box_align-left .mfui-blog-box__item:first-child {
-  grid-column-start: 1;
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-blog-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (min-width:1024px){.mfui-blog-box__list{-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:grid;grid-template-columns:1fr 1fr;row-gap:24px}}.mfui-blog-box__list_row{grid-template-columns:repeat(6,1fr)}.mfui-blog-box__list_row .mfui-blog-box__item{grid-column-end:span 2}.mfui-blog-box__list_row-size_1 .mfui-blog-box__item{grid-column-start:3}.mfui-blog-box__list_row-size_2 .mfui-blog-box__item:first-child{grid-column-start:2}.mfui-blog-box__item_view_thumbnail{margin-top:16px}@media screen and (min-width:1024px){.mfui-blog-box__item_view_thumbnail{grid-column-end:2;grid-column-start:1;margin-top:0}}.mfui-blog-box__item_view_full{margin-bottom:24px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box__item_view_full{margin-bottom:32px}}@media screen and (min-width:1024px){.mfui-blog-box__item_view_full{grid-column-end:3;grid-column-start:2;grid-row-end:4;grid-row-start:1;margin-bottom:0}}.mfui-blog-box__button-wrapper{margin-top:32px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box__button-wrapper{margin-top:40px}}@media screen and (min-width:1024px){.mfui-blog-box__button-wrapper{margin-top:56px}}.mfui-blog-box__button{min-width:208px}.mfui-blog-box_align-left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-blog-box_align-left .mfui-blog-box__item:first-child{grid-column-start:1}

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { ButtonType, TileDataType } from './types';
-import './BlogBox.less';
+import './BlogBox.scss';
 export interface IBlogBox {
     /** Статьи (не более 4, остальные будут проигнорированы) */
     items: TileDataType[];

package/dist/es/components/BlogBox/BlogBox.js

@@ -1,46 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.concat.js";
-import React from 'react';
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import * as React from 'react';
 import { Button } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import PropTypes from 'prop-types';
 import useResolutions from "../../hooks/useResolutions";
 import BlogBoxTile from "./components/BlogBoxTile";
 import "./BlogBox.css";
 var maxItemsCount = 4;
 var cn = cnCreate('mfui-blog-box');
-
 var BlogBox = function BlogBox(_ref) {
   var items = _ref.items,
-      button = _ref.button,
-      _ref$hasAlignLeft = _ref.hasAlignLeft,
-      hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
-      className = _ref.className,
-      classes = _ref.classes,
-      dataAttrs = _ref.dataAttrs;
-
+    button = _ref.button,
+    _ref$hasAlignLeft = _ref.hasAlignLeft,
+    hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
+    className = _ref.className,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs;
   var _useResolutions = useResolutions(),
-      isDesktop = _useResolutions.isDesktop;
-
+    isDesktop = _useResolutions.isDesktop;
   var visibleItems = items.slice(0, maxItemsCount);
   var itemsCount = visibleItems.length;
   var isRow = isDesktop && itemsCount < maxItemsCount;
   var isAlignLeft = isRow && hasAlignLeft;
-
   var getView = function getView(isCompact, i) {
     if (isCompact) {
       return 'compact';
     }
-
     if (i === 0) {
       return 'full';
     }
-
     return 'thumbnail';
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'align-left': isAlignLeft
@@ -72,30 +64,4 @@ var BlogBox = function BlogBox(_ref) {
     rel: button.rel
   }, button.title)));
 };
-
-BlogBox.propTypes = {
-  className: PropTypes.string,
-  classes: PropTypes.objectOf(PropTypes.string),
-  dataAttrs: PropTypes.objectOf(PropTypes.object),
-  items: PropTypes.arrayOf(PropTypes.shape({
-    date: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    image: PropTypes.shape({
-      srcMobile: PropTypes.string.isRequired,
-      srcDesktop: PropTypes.string.isRequired,
-      srcThumbnail: PropTypes.string.isRequired,
-      alt: PropTypes.string
-    }).isRequired,
-    href: PropTypes.string.isRequired,
-    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-    rel: PropTypes.string
-  }).isRequired).isRequired,
-  button: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    href: PropTypes.string.isRequired,
-    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-    rel: PropTypes.string
-  }),
-  hasAlignLeft: PropTypes.bool
-};
 export default BlogBox;

package/dist/es/components/BlogBox/components/BlogBoxTile.css

@@ -1,197 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-blog-box-tile {
-  position: relative;
-  display: block;
-  color: var(--content);
-  text-decoration: none;
-}
-.mfui-blog-box-tile:hover {
-  text-decoration: none;
-}
-.mfui-blog-box-tile:hover .mfui-blog-box-tile__title {
-  color: var(--brandGreen);
-}
-.mfui-blog-box-tile__image {
-  width: 100%;
-  height: 100%;
-  border-radius: 24px;
-  -o-object-fit: cover;
-     object-fit: cover;
-  vertical-align: top;
-}
-.mfui-blog-box-tile__picture {
-  display: block;
-}
-.mfui-blog-box-tile__date {
-  margin-bottom: 4px;
-  color: var(--spbSky3);
-}
-.mfui-blog-box-tile__title {
-  /* stylelint-disable-next-line value-no-vendor-prefix */
-  display: -webkit-box;
-  overflow: hidden;
-  white-space: normal;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
-}
-.mfui-blog-box-tile_view_thumbnail {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 20px;
-}
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  width: 133px;
-  height: 102px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
-    width: 170px;
-    height: 130px;
-  }
-}
-@media screen and (min-width: 1440px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
-    width: 233px;
-    height: 170px;
-  }
-}
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content {
-  -ms-flex-item-align: center;
-      align-self: center;
-}
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
-  font-size: 12px;
-  line-height: 18px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
-    font-size: 15px;
-    line-height: 24px;
-  }
-}
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 24px;
-  letter-spacing: 0.5px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-}
-.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
-  height: 358px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
-    height: 438px;
-  }
-}
-@media screen and (min-width: 1440px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
-    height: 558px;
-  }
-}
-.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  left: 8px;
-  padding: 16px;
-  border-radius: 24px;
-  background-color: var(--base);
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
-    padding: 24px;
-  }
-}
-@media screen and (min-width: 768px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
-    right: 12px;
-    bottom: 12px;
-    left: 12px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
-    padding: 16px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
-    padding: 24px;
-  }
-}
-.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
-  font-weight: 600;
-  font-size: 22px;
-  line-height: 28px;
-  letter-spacing: 0.5px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
-    font-size: 26px;
-    line-height: 32px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
-    font-size: 28px;
-    line-height: 36px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
-    font-size: 32px;
-    line-height: 40px;
-  }
-}
-.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
-  height: 233px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
-    height: 288px;
-  }
-}
-@media screen and (min-width: 1440px) {
-  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
-    height: 367px;
-  }
-}
-.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content {
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
-  left: 12px;
-  padding: 16px;
-  border-radius: 24px;
-  background-color: var(--base);
-}
-.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 24px;
-  letter-spacing: 0.5px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-blog-box-tile{color:var(--content);display:block;position:relative}.mfui-blog-box-tile,.mfui-blog-box-tile:hover{text-decoration:none}.mfui-blog-box-tile:hover .mfui-blog-box-tile__title{color:var(--brandGreen)}.mfui-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-blog-box-tile__picture{display:block}.mfui-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-blog-box-tile_view_thumbnail b__picture{-ms-flex-negative:0;flex-shrink:0;height:102px;width:133px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail b__picture{height:130px;width:170px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_thumbnail b__picture{height:170px;width:233px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content{-ms-flex-item-align:center;align-self:center}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date{font-size:12px;line-height:18px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date{font-size:15px;line-height:24px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:358px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:438px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:558px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:8px;left:8px;padding:16px;position:absolute;right:8px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}@media screen and (min-width:768px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{bottom:12px;left:12px;right:12px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:16px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:32px;line-height:40px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:233px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:288px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:367px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:12px;left:12px;padding:16px;position:absolute;right:12px}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}

package/dist/es/components/BlogBox/components/BlogBoxTile.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import { TileDataType, TileViewType } from '../types';
-import './BlogBoxTile.less';
-declare type TileSettingsType = {
+import './BlogBoxTile.scss';
+type TileSettingsType = {
     view: TileViewType;
 };
-export declare type BlogBoxTileType = TileDataType & TileSettingsType;
+export type BlogBoxTileType = TileDataType & TileSettingsType;
 declare const BlogBoxTile: React.FC<BlogBoxTileType>;
 export default BlogBoxTile;