@megafon/ui-shared 6.5.1 → 6.7.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.7.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.6.0...@megafon/ui-shared@6.7.0) (2024-10-15)
+
+
+### Features
+
+* **breadcrumbs:** add optional props disabledOnMobile and hasMarginTop ([898319a](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/898319adb83df6be862c4050b872902f05157be8))
+* **imagebanner:** add optional prop hasMarginTop ([4bb25e6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/4bb25e6bd0ecb9b3b2ebe9ec9582fc53bca485a8))
+
+
+
+
+
+# [6.6.0](/compare/@megafon/ui-shared@6.5.1...@megafon/ui-shared@6.6.0) (2024-10-02)
+
+
+### Features
+
+* **css classes:** add v6 into css classes 11d5ef2
+
+
+
+
+
 ## [6.5.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.5.0...@megafon/ui-shared@6.5.1) (2024-09-24)
 
 **Note:** Version bump only for package @megafon/ui-shared
@@ -1469,13 +1492,13 @@ remove depreacted value 'freshAsphalt'
 
 ### Features
 
-* rename prefix mfui-beta to mfui ([41b2ea4](https://github.com/MegafonWebLab/megafon-ui/commit/41b2ea4880ee6dd0e76b862bfc0d2a86031d734c))
+* rename prefix mfui-v6-beta to mfui ([41b2ea4](https://github.com/MegafonWebLab/megafon-ui/commit/41b2ea4880ee6dd0e76b862bfc0d2a86031d734c))
 
 
 ### BREAKING CHANGES
 
-* 1.x.x version of ui library also has mfui- prefix for components. please, check,
-that you don't have any styles or business logic (e.g. css or js selectors) using mfui- prefix as
+* 1.x.x version of ui library also has mfui-v6- prefix for components. please, check,
+that you don't have any styles or business logic (e.g. css or js selectors) using mfui-v6- prefix as
 match pattern.
 
 

package/dist/es/components/AccordionBox/AccordionBox.css

@@ -5,11 +5,11 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-accordion-box + .mfui-accordion-box {
+.mfui-v6-accordion-box + .mfui-v6-accordion-box {
   margin-top: 8px;
 }
 @media screen and (min-width: 768px) {
-  .mfui-accordion-box + .mfui-accordion-box {
+  .mfui-v6-accordion-box + .mfui-v6-accordion-box {
     margin-top: 12px;
   }
 }

package/dist/es/components/AccordionBox/AccordionBox.js

@@ -22,7 +22,7 @@ import * as PropTypes from 'prop-types';
 import "./AccordionBox.css";
 import { getColumnConfig } from "../../helpers/getColumnConfig";
 var testIdPrefix = 'AccordionBox';
-var cn = cnCreate('mfui-accordion-box');
+var cn = cnCreate('mfui-v6-accordion-box');
 
 var AccordionBox = function AccordionBox(_a) {
   var _a$hCenterAlignWide = _a.hCenterAlignWide,

package/dist/es/components/AudioPlayer/AudioPlayer.js

@@ -23,7 +23,7 @@ var IconPlay = function IconPlay(props) {
   }));
 };
 
-var cn = cnCreate('mfui-audio-player');
+var cn = cnCreate('mfui-v6-audio-player');
 
 var AudioPlayer = function AudioPlayer(_ref) {
   var audioSrc = _ref.audioSrc,

package/dist/es/components/AudioPlayer/AudioProgress.js

@@ -8,7 +8,7 @@ import useTrackDuration from "./hooks/useTrackDuration";
 import timerFormat from "./timerFormatUtil";
 import "./style/AudioProgress.css";
 export var INTERVAL_DELAY = 1000;
-var cn = cnCreate('mfui-audio-progress');
+var cn = cnCreate('mfui-v6-audio-progress');
 
 var AudioProgress = function AudioProgress(_ref) {
   var audioRef = _ref.audioRef,

package/dist/es/components/AudioPlayer/AudioRange.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./style/AudioRange.css";
-var cn = cnCreate('mfui-audio-range');
+var cn = cnCreate('mfui-v6-audio-range');
 
 var AudioRange = function AudioRange(_ref) {
   var className = _ref.className,

package/dist/es/components/AudioPlayer/AudioVolume.js

@@ -27,7 +27,7 @@ var VolumeIcon = function VolumeIcon(props) {
   }));
 };
 
-var cn = cnCreate('mfui-audio-volume');
+var cn = cnCreate('mfui-v6-audio-volume');
 
 var AudioVolume = function AudioVolume(_ref) {
   var onChangeAudioVolume = _ref.onChangeAudioVolume;

package/dist/es/components/AudioPlayer/style/AudioPlayer.css

@@ -5,10 +5,10 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-audio-player {
+.mfui-v6-audio-player {
   margin-top: 24px;
 }
-.mfui-audio-player__player {
+.mfui-v6-audio-player__player {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -25,34 +25,34 @@ h5 {
   background: var(--spbSky0);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-audio-player__player {
+  .mfui-v6-audio-player__player {
     max-width: 530px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-audio-player__player {
+  .mfui-v6-audio-player__player {
     max-width: 550px;
   }
 }
-.mfui-audio-player__playing-controls {
+.mfui-v6-audio-player__playing-controls {
   margin-right: 16px;
 }
-.mfui-audio-player_position_center .mfui-audio-player__player {
+.mfui-v6-audio-player_position_center .mfui-v6-audio-player__player {
   margin: 0 auto;
 }
-.mfui-audio-player_position_left .mfui-audio-player__player {
+.mfui-v6-audio-player_position_left .mfui-v6-audio-player__player {
   margin-right: auto;
 }
-.mfui-audio-player_position_right .mfui-audio-player__player {
+.mfui-v6-audio-player_position_right .mfui-v6-audio-player__player {
   margin-left: auto;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-audio-player_full-width .mfui-audio-player__player {
+  .mfui-v6-audio-player_full-width .mfui-v6-audio-player__player {
     max-width: 100%;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-audio-player_full-width .mfui-audio-player__player {
+  .mfui-v6-audio-player_full-width .mfui-v6-audio-player__player {
     max-width: 100%;
   }
 }

package/dist/es/components/AudioPlayer/style/AudioProgress.css

@@ -5,11 +5,11 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-audio-progress {
+.mfui-v6-audio-progress {
   width: 100%;
   margin-right: 16px;
 }
-.mfui-audio-progress__info {
+.mfui-v6-audio-progress__info {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -20,15 +20,15 @@ h5 {
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-audio-progress__value {
+.mfui-v6-audio-progress__value {
   color: var(-spbSky3);
   font-size: 12px;
   line-height: 18px;
 }
-.mfui-audio-progress__range-wrapper {
+.mfui-v6-audio-progress__range-wrapper {
   margin-top: -2px;
 }
-.mfui-audio-progress__title {
+.mfui-v6-audio-progress__title {
   color: var(--stcBlack);
   font-size: 12px;
   line-height: 18px;

package/dist/es/components/AudioPlayer/style/AudioRange.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-audio-range {
+.mfui-v6-audio-range {
   width: 100%;
   height: 4px;
   border-radius: 2px;
@@ -16,10 +16,10 @@ h5 {
   cursor: pointer;
   -webkit-appearance: none;
 }
-.mfui-audio-range:focus {
+.mfui-v6-audio-range:focus {
   outline: none;
 }
-.mfui-audio-range::-webkit-slider-thumb {
+.mfui-v6-audio-range::-webkit-slider-thumb {
   width: 16px;
   height: 16px;
   border: none;
@@ -29,7 +29,7 @@ h5 {
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
   -webkit-appearance: none;
 }
-.mfui-audio-range::-moz-range-thumb {
+.mfui-v6-audio-range::-moz-range-thumb {
   width: 16px;
   height: 16px;
   border: none;
@@ -38,7 +38,7 @@ h5 {
   box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
   -webkit-appearance: none;
 }
-.mfui-audio-range::-ms-thumb {
+.mfui-v6-audio-range::-ms-thumb {
   width: 16px;
   height: 16px;
   border: none;
@@ -47,20 +47,20 @@ h5 {
   box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
   -webkit-appearance: none;
 }
-.mfui-audio-range::-webkit-slider-runnable-track {
+.mfui-v6-audio-range::-webkit-slider-runnable-track {
   border: none;
   background: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
   -webkit-appearance: none;
 }
-.mfui-audio-range::-moz-range-track {
+.mfui-v6-audio-range::-moz-range-track {
   border: none;
   background: transparent;
   box-shadow: none;
   -webkit-appearance: none;
 }
-.mfui-audio-range::-ms-track {
+.mfui-v6-audio-range::-ms-track {
   border: none;
   background: transparent;
   box-shadow: none;

package/dist/es/components/AudioPlayer/style/AudioVolume.css

@@ -5,17 +5,17 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-audio-volume {
+.mfui-v6-audio-volume {
   width: 24px;
 }
-.mfui-audio-volume__tooltip-content {
+.mfui-v6-audio-volume__tooltip-content {
   padding: 7px 16px 14px;
   border-radius: 12px;
 }
-.mfui-audio-volume__tooltip-content-shadow {
+.mfui-v6-audio-volume__tooltip-content-shadow {
   border-radius: 12px;
 }
-.mfui-audio-volume__icon {
+.mfui-v6-audio-volume__icon {
   display: none;
   width: 24px;
   min-width: 24px;
@@ -23,12 +23,12 @@ h5 {
   cursor: pointer;
   fill: var(--brandGreen);
 }
-.mfui-audio-volume__icon_visible {
+.mfui-v6-audio-volume__icon_visible {
   display: block;
 }
-.mfui-audio-volume__icon:hover {
+.mfui-v6-audio-volume__icon:hover {
   fill: var(--buttonHoverGreen);
 }
-.mfui-audio-volume__range {
+.mfui-v6-audio-volume__range {
   max-width: 128px;
 }

package/dist/es/components/BannerBox/BannerBox.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
 import * as React from 'react';
 import { Banner } from '@megafon/ui-core';
 import { cnCreate } from '@megafon/ui-helpers';
-var cn = cnCreate('mfui-banner-box');
+var cn = cnCreate('mfui-v6-banner-box');
 
 var BannerBox = function BannerBox(_a) {
   var children = _a.children,

package/dist/es/components/BenefitsIcons/BenefitsIcons.js

@@ -13,7 +13,7 @@ import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
 import { IconPositionEnum, ItemsAlignEnum, BackgroundEnum } from "./types";
 import "./style/BenefitsIcons.css";
 var testIdPrefix = 'BenefitsIcons';
-var cn = cnCreate('mfui-benefits-icons');
+var cn = cnCreate('mfui-v6-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
   var dataAttrs = _ref.dataAttrs,

package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { IconPositionEnum, BackgroundEnum } from "./types";
 import "./style/BenefitsIconsTile.css";
 var testIdPrefix = 'BenefitsIconsTile';
-var cn = cnCreate('mfui-benefits-icons-tile');
+var cn = cnCreate('mfui-v6-benefits-icons-tile');
 
 var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   var dataAttrs = _ref.dataAttrs,

package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css

@@ -5,34 +5,34 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-benefits-icons {
+.mfui-v6-benefits-icons {
   overflow: hidden;
 }
-.mfui-benefits-icons__inner {
+.mfui-v6-benefits-icons__inner {
   margin-bottom: -20px;
 }
-.mfui-benefits-icons_background_transparent .mfui-benefits-icons__inner {
+.mfui-v6-benefits-icons_background_transparent .mfui-v6-benefits-icons__inner {
   margin-bottom: -48px;
 }
-.mfui-benefits-icons__column {
+.mfui-v6-benefits-icons__column {
   margin-bottom: 20px;
 }
-.mfui-benefits-icons_background_transparent .mfui-benefits-icons__column {
+.mfui-v6-benefits-icons_background_transparent .mfui-v6-benefits-icons__column {
   margin-bottom: 48px;
 }
-.mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+.mfui-v6-benefits-icons_one-column .mfui-v6-benefits-icons__inner {
   margin-bottom: -24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+  .mfui-v6-benefits-icons_one-column .mfui-v6-benefits-icons__inner {
     margin-bottom: -32px;
   }
 }
-.mfui-benefits-icons_one-column .mfui-benefits-icons__column {
+.mfui-v6-benefits-icons_one-column .mfui-v6-benefits-icons__column {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-benefits-icons_one-column .mfui-benefits-icons__column {
+  .mfui-v6-benefits-icons_one-column .mfui-v6-benefits-icons__column {
     margin-bottom: 32px;
   }
 }

package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -5,86 +5,86 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-benefits-icons-tile {
+.mfui-v6-benefits-icons-tile {
   min-height: 100%;
   padding: 24px;
   border-radius: 12px;
 }
-.mfui-benefits-icons-tile_background_transparent {
+.mfui-v6-benefits-icons-tile_background_transparent {
   padding: 0;
 }
-.mfui-benefits-icons-tile_background_gray {
+.mfui-v6-benefits-icons-tile_background_gray {
   background-color: var(--spbSky0);
 }
-.mfui-benefits-icons-tile_background_green {
+.mfui-v6-benefits-icons-tile_background_green {
   background-color: var(--brandGreen20);
 }
-.mfui-benefits-icons-tile_background_purple {
+.mfui-v6-benefits-icons-tile_background_purple {
   background-color: var(--brandPurple20);
 }
-.mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
+.mfui-v6-benefits-icons-tile .mfui-v6-benefits-icons-tile__svg-icon {
   margin-bottom: 10px;
 }
-.mfui-benefits-icons-tile__content {
+.mfui-v6-benefits-icons-tile__content {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 }
-.mfui-benefits-icons-tile__title + .mfui-benefits-icons-tile__content {
+.mfui-v6-benefits-icons-tile__title + .mfui-v6-benefits-icons-tile__content {
   margin-top: 4px;
 }
-.mfui-benefits-icons-tile__text {
+.mfui-v6-benefits-icons-tile__text {
   margin-bottom: 0;
 }
-.mfui-benefits-icons-tile__img-icon {
+.mfui-v6-benefits-icons-tile__img-icon {
   width: 64px;
   height: 64px;
   border-radius: 8px;
 }
-.mfui-benefits-icons-tile__svg-icon {
+.mfui-v6-benefits-icons-tile__svg-icon {
   width: 40px;
   height: 40px;
   overflow: hidden;
 }
-.mfui-benefits-icons-tile__svg-icon svg {
+.mfui-v6-benefits-icons-tile__svg-icon svg {
   fill: var(--brandGreen) !important;
 }
-.mfui-benefits-icons-tile_background_purple .mfui-benefits-icons-tile__svg-icon svg {
+.mfui-v6-benefits-icons-tile_background_purple .mfui-v6-benefits-icons-tile__svg-icon svg {
   fill: var(--brandPurple) !important;
 }
-.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__inner {
+.mfui-v6-benefits-icons-tile_icon-position_left-side .mfui-v6-benefits-icons-tile__inner {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper {
+.mfui-v6-benefits-icons-tile_icon-position_left-side .mfui-v6-benefits-icons-tile__content-wrapper {
   padding-top: 8px;
 }
-.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon,
-.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__img-icon {
+.mfui-v6-benefits-icons-tile_icon-position_left-side .mfui-v6-benefits-icons-tile__svg-icon,
+.mfui-v6-benefits-icons-tile_icon-position_left-side .mfui-v6-benefits-icons-tile__img-icon {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   margin-right: 14px;
   margin-bottom: 0;
 }
-.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__inner {
+.mfui-v6-benefits-icons-tile_icon-position_left-side.mfui-v6-benefits-icons-tile_image .mfui-v6-benefits-icons-tile__inner {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__content-wrapper {
+.mfui-v6-benefits-icons-tile_icon-position_left-side.mfui-v6-benefits-icons-tile_image .mfui-v6-benefits-icons-tile__content-wrapper {
   padding-top: 0;
 }
-.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__svg-icon,
-.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__img-icon {
+.mfui-v6-benefits-icons-tile_icon-position_left-side.mfui-v6-benefits-icons-tile_image .mfui-v6-benefits-icons-tile__svg-icon,
+.mfui-v6-benefits-icons-tile_icon-position_left-side.mfui-v6-benefits-icons-tile_image .mfui-v6-benefits-icons-tile__img-icon {
   -ms-flex-item-align: start;
       align-self: start;
 }
-.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__inner {
+.mfui-v6-benefits-icons-tile_icon-position_center-top .mfui-v6-benefits-icons-tile__inner {
   text-align: center;
 }
-.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon,
-.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__img-icon {
+.mfui-v6-benefits-icons-tile_icon-position_center-top .mfui-v6-benefits-icons-tile__svg-icon,
+.mfui-v6-benefits-icons-tile_icon-position_center-top .mfui-v6-benefits-icons-tile__img-icon {
   margin-right: auto;
   margin-left: auto;
 }

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

@@ -13,7 +13,7 @@ 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 cn = cnCreate('mfui-v6-benefits-pictures');
 
 var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,

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

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

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

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-blog-box {
+.mfui-v6-blog-box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -18,7 +18,7 @@ h5 {
           align-items: center;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-blog-box__list {
+  .mfui-v6-blog-box__list {
     display: grid;
     grid-template-columns: 1fr 1fr;
     -webkit-column-gap: 20px;
@@ -27,38 +27,38 @@ h5 {
     row-gap: 24px;
   }
 }
-.mfui-blog-box__list_row {
+.mfui-v6-blog-box__list_row {
   grid-template-columns: repeat(6, 1fr);
 }
-.mfui-blog-box__list_row .mfui-blog-box__item {
+.mfui-v6-blog-box__list_row .mfui-v6-blog-box__item {
   grid-column-end: span 2;
 }
-.mfui-blog-box__list_row-size_1 .mfui-blog-box__item {
+.mfui-v6-blog-box__list_row-size_1 .mfui-v6-blog-box__item {
   grid-column-start: 3;
 }
-.mfui-blog-box__list_row-size_2 .mfui-blog-box__item:first-child {
+.mfui-v6-blog-box__list_row-size_2 .mfui-v6-blog-box__item:first-child {
   grid-column-start: 2;
 }
-.mfui-blog-box__item_view_thumbnail {
+.mfui-v6-blog-box__item_view_thumbnail {
   margin-top: 16px;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-blog-box__item_view_thumbnail {
+  .mfui-v6-blog-box__item_view_thumbnail {
     grid-column-start: 1;
     grid-column-end: 2;
     margin-top: 0;
   }
 }
-.mfui-blog-box__item_view_full {
+.mfui-v6-blog-box__item_view_full {
   margin-bottom: 24px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box__item_view_full {
+  .mfui-v6-blog-box__item_view_full {
     margin-bottom: 32px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-blog-box__item_view_full {
+  .mfui-v6-blog-box__item_view_full {
     grid-row-start: 1;
     grid-row-end: 4;
     grid-column-start: 2;
@@ -66,27 +66,27 @@ h5 {
     margin-bottom: 0;
   }
 }
-.mfui-blog-box__button-wrapper {
+.mfui-v6-blog-box__button-wrapper {
   margin-top: 32px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box__button-wrapper {
+  .mfui-v6-blog-box__button-wrapper {
     margin-top: 40px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-blog-box__button-wrapper {
+  .mfui-v6-blog-box__button-wrapper {
     margin-top: 56px;
   }
 }
-.mfui-blog-box__button {
+.mfui-v6-blog-box__button {
   min-width: 208px;
 }
-.mfui-blog-box_align-left {
+.mfui-v6-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 {
+.mfui-v6-blog-box_align-left .mfui-v6-blog-box__item:first-child {
   grid-column-start: 1;
 }

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

@@ -10,7 +10,7 @@ import useResolutions from "../../hooks/useResolutions";
 import BlogBoxTile from "./components/BlogBoxTile";
 import "./BlogBox.css";
 var maxItemsCount = 4;
-var cn = cnCreate('mfui-blog-box');
+var cn = cnCreate('mfui-v6-blog-box');
 
 var BlogBox = function BlogBox(_ref) {
   var items = _ref.items,