@megafon/ui-core 6.2.1 → 6.4.0

package/dist/es/components/Select/Select.css

@@ -22,7 +22,7 @@
     opacity: 1;
   }
 }
-.mfui-select {
+.mfui-v6-select {
   position: relative;
   z-index: 1;
   -webkit-box-sizing: border-box;
@@ -34,10 +34,10 @@
   line-height: 24px;
   font-weight: 400;
 }
-.mfui-select__inner {
+.mfui-v6-select__inner {
   position: relative;
 }
-.mfui-select__control {
+.mfui-v6-select__control {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 100%;
@@ -51,7 +51,7 @@
   -webkit-transition: border-color 0.3s;
   transition: border-color 0.3s;
 }
-.mfui-select__combobox {
+.mfui-v6-select__combobox {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
@@ -76,11 +76,11 @@
      -moz-appearance: none;
           appearance: none;
 }
-.mfui-select_no-touch .mfui-select__control:hover,
-.mfui-select_no-touch .mfui-select__control:focus-within {
+.mfui-v6-select_no-touch .mfui-v6-select__control:hover,
+.mfui-v6-select_no-touch .mfui-v6-select__control:focus-within {
   border-color: var(--content);
 }
-.mfui-select__title {
+.mfui-v6-select__title {
   position: relative;
   z-index: 1;
   display: -webkit-box;
@@ -93,7 +93,7 @@
   height: 100%;
   outline: none;
 }
-.mfui-select__title:after {
+.mfui-v6-select__title:after {
   content: '';
   position: absolute;
   top: 50%;
@@ -111,7 +111,7 @@
   transition: transform 0.6s;
   transition: transform 0.6s, -webkit-transform 0.6s;
 }
-.mfui-select__title-value {
+.mfui-v6-select__title-value {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -120,10 +120,10 @@
           align-items: center;
   overflow: hidden;
 }
-.mfui-select__title-inner_hide-value .mfui-select__title-value {
+.mfui-v6-select__title-inner_hide-value .mfui-v6-select__title-value {
   color: var(--spbSky3);
 }
-.mfui-select__title-inner {
+.mfui-v6-select__title-inner {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -141,7 +141,7 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.mfui-select__title-inner:after {
+.mfui-v6-select__title-inner:after {
   content: '';
   position: absolute;
   top: 0;
@@ -151,13 +151,13 @@
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
-.mfui-select__require-mark {
+.mfui-v6-select__require-mark {
   margin-left: 1px;
   color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
-.mfui-select__list {
+.mfui-v6-select__list {
   position: absolute;
   top: 100%;
   right: 0;
@@ -169,7 +169,7 @@
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
-.mfui-select__list-inner {
+.mfui-v6-select__list-inner {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   max-height: 368px;
@@ -178,22 +178,22 @@
   scrollbar-width: thin;
   scrollbar-color: var(--spbSky2) transparent;
 }
-.mfui-select__list-inner_short {
+.mfui-v6-select__list-inner_short {
   max-height: 235px;
 }
-.mfui-select__list-inner::-webkit-scrollbar {
+.mfui-v6-select__list-inner::-webkit-scrollbar {
   width: 16px;
 }
-.mfui-select__list-inner::-webkit-scrollbar-thumb {
+.mfui-v6-select__list-inner::-webkit-scrollbar-thumb {
   border: 6px solid transparent;
   border-radius: 16px;
   background-color: #D8D8D8;
   background-clip: padding-box;
 }
-.mfui-select__list-inner::-webkit-scrollbar-thumb:hover {
+.mfui-v6-select__list-inner::-webkit-scrollbar-thumb:hover {
   background-color: #999999;
 }
-.mfui-select__list-item {
+.mfui-v6-select__list-item {
   font-family: inherit;
   padding-top: 12px;
   padding-bottom: 12px;
@@ -201,18 +201,18 @@
   background-color: var(--base);
   cursor: pointer;
 }
-.mfui-select__list-item_hovered {
+.mfui-v6-select__list-item_hovered {
   background-color: var(--spbSky0);
 }
-.mfui-select__list-item_paddings_large {
+.mfui-v6-select__list-item_paddings_large {
   padding-right: 32px;
   padding-left: 32px;
 }
-.mfui-select__list-item_paddings_small {
+.mfui-v6-select__list-item_paddings_small {
   padding-right: 12px;
   padding-left: 12px;
 }
-.mfui-select__item-title {
+.mfui-v6-select__item-title {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -224,27 +224,27 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.mfui-select__item-title_active {
+.mfui-v6-select__item-title_active {
   font-weight: 600;
 }
-.mfui-select__list-item_hovered .mfui-select__item-title:after {
+.mfui-v6-select__list-item_hovered .mfui-v6-select__item-title:after {
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
-.mfui-select__not-found {
+.mfui-v6-select__not-found {
   padding: 8px 32px;
   opacity: 0.5;
 }
-.mfui-select__text {
+.mfui-v6-select__text {
   margin-top: 8px;
   color: var(--spbSky3);
   font-size: 12px;
   line-height: 18px;
 }
-.mfui-select__highlighted-fragment {
+.mfui-v6-select__highlighted-fragment {
   font-weight: bold;
 }
-.mfui-select__label {
+.mfui-v6-select__label {
   position: absolute;
   top: 17px;
   z-index: 1;
@@ -260,94 +260,94 @@
   font-size: 15px;
   line-height: 24px;
 }
-.mfui-select__combobox + .mfui-select__label {
+.mfui-v6-select__combobox + .mfui-v6-select__label {
   left: 16px;
 }
-.mfui-select__combobox::-webkit-input-placeholder {
+.mfui-v6-select__combobox::-webkit-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-select__combobox:-moz-placeholder {
+.mfui-v6-select__combobox:-moz-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-select__combobox:-ms-input-placeholder {
+.mfui-v6-select__combobox:-ms-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-select__combobox::-moz-placeholder {
+.mfui-v6-select__combobox::-moz-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-select__combobox::-ms-input-placeholder {
+.mfui-v6-select__combobox::-ms-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-select__combobox::placeholder {
+.mfui-v6-select__combobox::placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-select_open .mfui-select__label,
-.mfui-select__title-inner:not(.mfui-select__title-inner_hide-value) .mfui-select__label {
+.mfui-v6-select_open .mfui-v6-select__label,
+.mfui-v6-select__title-inner:not(.mfui-v6-select__title-inner_hide-value) .mfui-v6-select__label {
   -webkit-transform: scale(0.8) translate(-12%, -75%);
           transform: scale(0.8) translate(-12%, -75%);
   -webkit-transition-duration: 0.2s, 0.01s;
           transition-duration: 0.2s, 0.01s;
 }
-.mfui-select__combobox:not(.mfui-select__combobox_hide-value) + .mfui-select__label {
+.mfui-v6-select__combobox:not(.mfui-v6-select__combobox_hide-value) + .mfui-v6-select__label {
   -webkit-transform: scale(0.8) translate(-12.5%, -75%);
           transform: scale(0.8) translate(-12.5%, -75%);
   -webkit-transition-duration: 0.2s, 0.01s;
           transition-duration: 0.2s, 0.01s;
 }
-.mfui-select__control_labeled .mfui-select__title-inner_hide-value .mfui-select__title-value {
+.mfui-v6-select__control_labeled .mfui-v6-select__title-inner_hide-value .mfui-v6-select__title-value {
   color: var(--spbSky3);
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
   opacity: 0;
 }
-.mfui-select__control_labeled .mfui-select__title-inner,
-.mfui-select__control_labeled .mfui-select__combobox {
+.mfui-v6-select__control_labeled .mfui-v6-select__title-inner,
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox {
   padding-top: 22px;
 }
-.mfui-select__control_labeled .mfui-select__combobox:focus::-webkit-input-placeholder {
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox:focus::-webkit-input-placeholder {
   opacity: 1;
 }
-.mfui-select__control_labeled .mfui-select__combobox:focus:-moz-placeholder {
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox:focus:-moz-placeholder {
   opacity: 1;
 }
-.mfui-select__control_labeled .mfui-select__combobox:focus:-ms-input-placeholder {
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox:focus:-ms-input-placeholder {
   opacity: 1;
 }
-.mfui-select__control_labeled .mfui-select__combobox:focus::-moz-placeholder {
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox:focus::-moz-placeholder {
   opacity: 1;
 }
-.mfui-select__control_labeled .mfui-select__combobox:focus::-ms-input-placeholder {
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox:focus::-ms-input-placeholder {
   opacity: 1;
 }
-.mfui-select__control_labeled .mfui-select__combobox:focus::placeholder {
+.mfui-v6-select__control_labeled .mfui-v6-select__combobox:focus::placeholder {
   opacity: 1;
 }
-.mfui-select_open {
+.mfui-v6-select_open {
   z-index: 12;
 }
-.mfui-select_open .mfui-select__title:after {
+.mfui-v6-select_open .mfui-v6-select__title:after {
   -webkit-transform: rotate(-180deg);
           transform: rotate(-180deg);
 }
-.mfui-select_open .mfui-select__list {
+.mfui-v6-select_open .mfui-v6-select__list {
   display: block;
   -webkit-animation-name: listAppear;
           animation-name: listAppear;
@@ -356,22 +356,22 @@
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
 }
-.mfui-select_open .mfui-select__control {
+.mfui-v6-select_open .mfui-v6-select__control {
   border-color: var(--content);
 }
-.mfui-select_open .mfui-select__title-inner_hide-value .mfui-select__title-value {
+.mfui-v6-select_open .mfui-v6-select__title-inner_hide-value .mfui-v6-select__title-value {
   opacity: 1;
 }
-.mfui-select_valid .mfui-select__control {
+.mfui-v6-select_valid .mfui-v6-select__control {
   border-color: var(--brandGreen) !important;
 }
-.mfui-select_error .mfui-select__control {
+.mfui-v6-select_error .mfui-v6-select__control {
   border-color: var(--fury) !important;
 }
-.mfui-select_error .mfui-select__text {
+.mfui-v6-select_error .mfui-v6-select__text {
   color: var(--fury);
 }
-.mfui-select_disabled .mfui-select__control {
+.mfui-v6-select_disabled .mfui-v6-select__control {
   border-color: var(--spbSky1);
   background-color: var(--spbSky1);
   -webkit-user-select: none;
@@ -380,10 +380,10 @@
           user-select: none;
   pointer-events: none;
 }
-.mfui-select_disabled .mfui-select__title-inner:after {
+.mfui-v6-select_disabled .mfui-v6-select__title-inner:after {
   display: none;
 }
-.mfui-select_disabled .mfui-select__title:after {
+.mfui-v6-select_disabled .mfui-v6-select__title:after {
   color: var(--content);
   opacity: 0.5;
 }

package/dist/es/components/Select/Select.js

@@ -50,7 +50,7 @@ export var SelectTypes = {
 // - onClose callback shouldn't fire multiple times on outside click if dropdown was opened multiple times.
 // - If item with currentValue is not found in items, input value will not be displayed
 
-var cn = cnCreate('mfui-select');
+var cn = cnCreate('mfui-v6-select');
 
 var Select = function Select(_ref) {
   var _ref$type = _ref.type,

package/dist/es/components/Selector/Selector.css

@@ -1,4 +1,4 @@
-.mfui-selector__input {
+.mfui-v6-selector__input {
   position: absolute;
   top: 0;
   left: 0;
@@ -7,7 +7,7 @@
   height: 0;
   opacity: 0;
 }
-.mfui-selector__label {
+.mfui-v6-selector__label {
   position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -19,7 +19,7 @@
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.mfui-selector__custom-input {
+.mfui-v6-selector__custom-input {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -40,7 +40,7 @@
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
-.mfui-selector__icon {
+.mfui-v6-selector__icon {
   display: block;
   width: 14px;
   height: 12px;
@@ -50,83 +50,83 @@
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
-.mfui-selector__label_dark .mfui-selector__custom-input {
+.mfui-v6-selector__label_dark .mfui-v6-selector__custom-input {
   border-color: var(--spbSky2);
   background-color: var(--base);
 }
-.mfui-selector__label_dark .mfui-selector__icon {
+.mfui-v6-selector__label_dark .mfui-v6-selector__icon {
   fill: var(--stcWhite);
 }
-.mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+.mfui-v6-selector__label_dark:not(.mfui-v6-selector__label_disabled):hover .mfui-v6-selector__custom-input {
   border-color: var(--buttonHoverGreen);
 }
-.mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+.mfui-v6-selector__label_dark:not(.mfui-v6-selector__label_disabled):active .mfui-v6-selector__custom-input {
   border-color: var(--buttonDown);
 }
-.mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_dark:not(.mfui-v6-selector__label_disabled):hover .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   border-color: var(--buttonHoverGreen);
   background-color: var(--buttonHoverGreen);
 }
-.mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_dark:not(.mfui-v6-selector__label_disabled):active .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   border-color: var(--buttonDown);
   background-color: var(--buttonDown);
 }
-.mfui-selector__label_dark:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_dark:not(.mfui-v6-selector__label_disabled) .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   border-color: var(--brandGreen);
   background-color: var(--brandGreen);
 }
-.mfui-selector__label_light .mfui-selector__custom-input {
+.mfui-v6-selector__label_light .mfui-v6-selector__custom-input {
   border-color: var(--stcWhite);
   background-color: var(--stcWhite);
 }
-.mfui-selector__label_light .mfui-selector__icon {
+.mfui-v6-selector__label_light .mfui-v6-selector__icon {
   fill: var(--stcWhite);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled):hover .mfui-v6-selector__custom-input {
   border-color: var(--buttonHoverGrey);
   background-color: var(--buttonHoverGrey);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled):active .mfui-v6-selector__custom-input {
   border-color: var(--buttonDown);
   background-color: var(--buttonDown);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled):hover .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   border-color: var(--buttonHoverGrey);
   background-color: var(--buttonHoverGrey);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled):active .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   border-color: var(--buttonDown);
   background-color: var(--buttonDown);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled):active .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon {
   fill: var(--stcWhite);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled) .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   border-color: var(--stcWhite);
   background-color: var(--stcWhite);
 }
-.mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+.mfui-v6-selector__label_light:not(.mfui-v6-selector__label_disabled) .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon {
   fill: var(--stcBlack);
 }
-.mfui-selector__label_lightk.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+.mfui-v6-selector__label_lightk.mfui-v6-selector__label_disabled .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon {
   fill: var(--stcWhite);
 }
-.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
-.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
-.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
-.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+.mfui-v6-selector__label:not(.mfui-v6-selector__label_disabled):hover .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon,
+.mfui-v6-selector__label:not(.mfui-v6-selector__label_disabled):active .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon,
+.mfui-v6-selector__label:not(.mfui-v6-selector__label_disabled) .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon,
+.mfui-v6-selector__label_disabled .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input .mfui-v6-selector__icon {
   opacity: 1;
 }
-.mfui-selector__label_disabled {
+.mfui-v6-selector__label_disabled {
   cursor: default;
 }
-.mfui-selector__label_disabled .mfui-selector__custom-input {
+.mfui-v6-selector__label_disabled .mfui-v6-selector__custom-input {
   border-color: var(--spbSky2);
   background-color: var(--spbSky1);
 }
-.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
+.mfui-v6-selector__label_disabled .mfui-v6-selector__input:checked + .mfui-v6-selector__custom-input {
   background-color: var(--spbSky2);
 }
-.mfui-selector__label_error .mfui-selector__custom-input {
+.mfui-v6-selector__label_error .mfui-v6-selector__custom-input {
   border-color: var(--fury);
 }

package/dist/es/components/Selector/Selector.js

@@ -19,7 +19,7 @@ var CheckedIcon = function CheckedIcon(props) {
   }));
 };
 
-var cn = cnCreate('mfui-selector');
+var cn = cnCreate('mfui-v6-selector');
 
 var Selector = function Selector(_ref) {
   var _cn;

package/dist/es/components/Sliders/Slider/Slider.css

@@ -1,4 +1,4 @@
-.mfui-slider {
+.mfui-v6-slider {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7,7 +7,7 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.mfui-slider__head {
+.mfui-v6-slider__head {
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
@@ -15,10 +15,10 @@
   grid-template-columns: auto 55%;
   margin-bottom: 8px;
 }
-.mfui-slider__display-value {
+.mfui-v6-slider__display-value {
   margin-left: auto;
 }
-.mfui-slider__range-input {
+.mfui-v6-slider__range-input {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   height: 12px;
   margin: 6px 0;
@@ -33,10 +33,10 @@
      -moz-appearance: none;
           appearance: none;
 }
-.mfui-slider__range-input:focus {
+.mfui-v6-slider__range-input:focus {
   outline: none;
 }
-.mfui-slider__range-input::-webkit-slider-thumb {
+.mfui-v6-slider__range-input::-webkit-slider-thumb {
   width: 24px;
   height: 24px;
   border: none;
@@ -46,7 +46,7 @@
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -webkit-appearance: none;
 }
-.mfui-slider__range-input::-moz-range-thumb {
+.mfui-v6-slider__range-input::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border: none;
@@ -55,7 +55,7 @@
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -webkit-appearance: none;
 }
-.mfui-slider__range-input::-ms-thumb {
+.mfui-v6-slider__range-input::-ms-thumb {
   width: 24px;
   height: 24px;
   border: none;
@@ -64,34 +64,34 @@
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -webkit-appearance: none;
 }
-.mfui-slider__range-input::-webkit-slider-runnable-track {
+.mfui-v6-slider__range-input::-webkit-slider-runnable-track {
   border: none;
   background: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
   -webkit-appearance: none;
 }
-.mfui-slider__range-input::-moz-range-track {
+.mfui-v6-slider__range-input::-moz-range-track {
   border: none;
   background: transparent;
   box-shadow: none;
   -webkit-appearance: none;
 }
-.mfui-slider__range-input::-ms-track {
+.mfui-v6-slider__range-input::-ms-track {
   border: none;
   background: transparent;
   box-shadow: none;
   -webkit-appearance: none;
 }
-.mfui-slider_disabled .mfui-slider__head {
+.mfui-v6-slider_disabled .mfui-v6-slider__head {
   color: var(--spbSky3);
 }
-.mfui-slider_disabled .mfui-slider__range-input {
+.mfui-v6-slider_disabled .mfui-v6-slider__range-input {
   background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky1)), to(var(--spbSky1)));
   background-image: linear-gradient(var(--spbSky1), var(--spbSky1));
   cursor: default;
 }
-.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb {
+.mfui-v6-slider_disabled .mfui-v6-slider__range-input::-webkit-slider-thumb {
   width: 24px;
   height: 24px;
   border: none;
@@ -104,7 +104,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb {
+.mfui-v6-slider_disabled .mfui-v6-slider__range-input::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border: none;
@@ -115,7 +115,7 @@
   background-color: var(--spbSky2);
   box-shadow: none;
 }
-.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb {
+.mfui-v6-slider_disabled .mfui-v6-slider__range-input::-ms-thumb {
   width: 24px;
   height: 24px;
   border: none;

package/dist/es/components/Sliders/Slider/Slider.js

@@ -8,7 +8,7 @@ import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayVal
 import SliderScale, { Scale } from "../components/SliderScale/SliderScale";
 import { getRangeValue, getTrackSize, removeFirstZeros } from "../helpers";
 import "./Slider.css";
-var cn = cnCreate('mfui-slider');
+var cn = cnCreate('mfui-v6-slider');
 
 var Slider = function Slider(_ref) {
   var className = _ref.className,