@megafon/ui-core 7.6.0 → 7.7.0

package/dist/es/components/Modal/_ModalContent/ModalContent.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--base);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:15px;font-weight:500;line-height:24px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

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

@@ -79,6 +79,8 @@ export interface ISearchProps {
         label?: string;
         input?: string;
         listItemTitle?: string;
+        list?: string;
+        listInner?: string;
         control?: string;
         icon?: string;
         submitButton?: string;
@@ -103,6 +105,8 @@ export interface ISearchProps {
     minTextareaHeight?: MinTextareaHeightType;
     /** Показать хендлер для ресайза текстового поля */
     showResizer?: boolean;
+    /** Ref обработчик */
+    inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */

package/dist/es/components/Search/Search.js

@@ -100,6 +100,7 @@ var Search = function Search(_ref) {
     _ref$minTextareaHeigh = _ref.minTextareaHeight,
     minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
     showResizer = _ref.showResizer,
+    inputRef = _ref.inputRef,
     onChange = _ref.onChange,
     onSubmit = _ref.onSubmit,
     onBlur = _ref.onBlur,
@@ -155,6 +156,7 @@ var Search = function Search(_ref) {
       return;
     }
     fieldRef.current = node;
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
   };
   var textareaResize = React.useCallback(function () {
     if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
@@ -415,10 +417,10 @@ var Search = function Search(_ref) {
   };
   var renderList = function renderList() {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('list'),
+      className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list]),
       ref: listRef
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner')
+      className: cn('list-inner', [classes === null || classes === void 0 ? void 0 : classes.listInner])
     }, items.map(function (_ref2, i) {
       var itemValue = _ref2.value,
         searchView = _ref2.searchView,

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

@@ -84,6 +84,8 @@ export interface ISelectProps<T extends SelectItemValueType> {
         listItemTitle?: Record<string, string>;
         notFound?: Record<string, string>;
     };
+    /** Ref обработчик */
+    inputRef?: (node: HTMLDivElement) => void;
     /** Обработчик выбора элемента селекта */
     onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
     /** Обработчик при открытом селекте */
@@ -91,5 +93,5 @@ export interface ISelectProps<T extends SelectItemValueType> {
     /** Обработчик при закрытом селекте */
     onClosed?: () => void;
 }
-declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
+declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
 export default Select;

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

@@ -75,6 +75,7 @@ var Select = function Select(_ref) {
     currentValue = _ref.currentValue,
     _ref$shortList = _ref.shortList,
     shortList = _ref$shortList === void 0 ? false : _ref$shortList,
+    inputRef = _ref.inputRef,
     onClosed = _ref.onClosed,
     onOpened = _ref.onOpened,
     onSelect = _ref.onSelect;
@@ -94,6 +95,13 @@ var Select = function Select(_ref) {
   var currentIndex = itemsList.findIndex(function (elem) {
     return elem.value === currentValue;
   });
+  var getFieldNode = function getFieldNode(node) {
+    if (!node) {
+      return;
+    }
+    selectNode.current = node;
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
+  };
   var handleClickOutside = useCallback(function (e) {
     var _a;
     if (e.target instanceof Node && ((_a = selectNode.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) || !isOpened) {
@@ -384,7 +392,7 @@ var Select = function Select(_ref) {
       valid: verification === Verification.VALID,
       error: verification === Verification.ERROR
     }, [className, classes.root]),
-    ref: selectNode
+    ref: getFieldNode
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__display-value{margin-left:auto}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-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{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-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{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}

package/dist/es/components/Sliders/Slider/Slider.d.ts

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
-import { ScaleType } from '../components/SliderScale/SliderScale';
 import './Slider.scss';
 export interface ISlider {
     /** Дополнительный класс корневого элемента */
@@ -14,7 +12,7 @@ export interface ISlider {
     /** Лейбл */
     label?: string;
     /** Тип выводимого значения */
-    displayValueType?: DisplayValueType;
+    displayValueType?: 'input' | 'line';
     /** Единица измерения выводимого значения */
     displayValueUnit?: string;
     /** Переводит компонент в контролируемое состояние */
@@ -22,7 +20,7 @@ export interface ISlider {
     /** Шаг */
     step?: number;
     /** Тип встроенной шкалы */
-    scale?: ScaleType;
+    scale?: 'interval' | 'base';
     /** Кастомная шкала */
     customScale?: string[];
     /** Переводит компонент в выключенное состояние */

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import SliderDisplayValue from "../components/SliderDisplayValue/SliderDisplayValue";
+import ValueField from "../../ValueField/ValueField";
 import SliderScale from "../components/SliderScale/SliderScale";
 import { getRangeValue, getTrackSize, removeFirstZeros } from "../helpers";
 import "./Slider.css";
@@ -58,11 +58,12 @@ var Slider = function Slider(_ref) {
     className: cn('head')
   }, !!label && /*#__PURE__*/React.createElement("div", {
     className: cn('label')
-  }, label), !!displayValueType && /*#__PURE__*/React.createElement(SliderDisplayValue, {
-    className: cn('display-value'),
+  }, label), !!displayValueType && /*#__PURE__*/React.createElement(ValueField, {
+    isControlled: true,
+    position: "right",
     value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
-    displayValueType: displayValueType,
-    displayValueUnit: displayValueUnit,
+    fieldType: displayValueType,
+    valueUnit: displayValueUnit,
     disabled: disabled,
     onChange: handleInputChange(false),
     onBlur: handleInputBlur,

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__display-value_left{margin-right:auto}.mfui-slider-range__display-value_right{margin-left:auto}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__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-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__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-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}

package/dist/es/components/Sliders/SliderRange/SliderRange.d.ts

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
-import { ScaleType } from '../components/SliderScale/SliderScale';
 import './SliderRange.scss';
 export interface ISliderRange {
     /** Дополнительный класс корневого элемента */
@@ -16,7 +14,7 @@ export interface ISliderRange {
     /** Лейбл */
     label?: string;
     /** Тип выводимого значения */
-    displayValueType?: DisplayValueType;
+    displayValueType?: 'input' | 'line';
     /** Префикс для выводимого значения слева */
     displayLeftValuePrefix?: string;
     /** Префикс для выводимого значения справа */
@@ -28,7 +26,7 @@ export interface ISliderRange {
     /** Шаг */
     step?: number;
     /** Тип встроенной шкалы */
-    scale?: ScaleType;
+    scale?: 'interval' | 'base';
     /** Кастомная шкала */
     customScale?: string[];
     /** Переводит компонент в выключенное состояние */

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import SliderDisplayValue from "../components/SliderDisplayValue/SliderDisplayValue";
+import ValueField from "../../ValueField/ValueField";
 import SliderScale from "../components/SliderScale/SliderScale";
 import { getRangeValue, removeFirstZeros } from "../helpers";
 import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
@@ -126,28 +126,26 @@ var SliderRange = function SliderRange(_ref) {
     className: cn('label')
   }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
     className: cn('display-values')
-  }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
-    className: cn('display-value', {
-      left: true
-    }),
+  }, /*#__PURE__*/React.createElement(ValueField, {
+    isControlled: true,
+    position: "left",
     value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayLeftValuePrefix,
-    displayValueUnit: displayValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayLeftValuePrefix,
+    valueUnit: displayValueUnit,
     disabled: disabled,
     onChange: handleLeftInputChange(false),
     onBlur: handleInputBlur(true),
     dataAttrs: {
       input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
     }
-  }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
-    className: cn('display-value', {
-      right: true
-    }),
+  }), /*#__PURE__*/React.createElement(ValueField, {
+    isControlled: true,
+    position: "right",
     value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayRightValuePrefix,
-    displayValueUnit: displayValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayRightValuePrefix,
+    valueUnit: displayValueUnit,
     disabled: disabled,
     onChange: handleRightInputChange(false),
     onBlur: handleInputBlur(false),

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__display-value_left{margin-right:auto}.mfui-slider-ratio__display-value_right{margin-left:auto}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}

package/dist/es/components/Sliders/SliderRatio/SliderRatio.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
 import { ValueType } from './types';
 import './SliderRatio.scss';
 export interface ISliderRatio {
@@ -12,7 +11,7 @@ export interface ISliderRatio {
     /** Лейбл */
     label?: string;
     /** Тип выводимого значения */
-    displayValueType?: DisplayValueType;
+    displayValueType?: 'input' | 'line';
     /** Префикс для выводимого значения слева */
     displayLeftValuePrefix?: string;
     /** Префикс для выводимого значения справа */

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

@@ -8,7 +8,7 @@ import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
+import ValueField from "../../ValueField/ValueField";
 import { getTrackSize, removeFirstZeros } from "../helpers";
 import { findClosestValue, getIndexByRangeValue, getRangeStepValue, inputReducer, getRangeValueByPageX } from "./helpers";
 import { KeyValueEnum } from "./types";
@@ -21,7 +21,7 @@ var SliderRatio = function SliderRatio(_ref) {
   var className = _ref.className,
     label = _ref.label,
     _ref$displayValueType = _ref.displayValueType,
-    displayValueType = _ref$displayValueType === void 0 ? DisplayValue.LINE : _ref$displayValueType,
+    displayValueType = _ref$displayValueType === void 0 ? 'line' : _ref$displayValueType,
     displayLeftValuePrefix = _ref.displayLeftValuePrefix,
     displayRightValuePrefix = _ref.displayRightValuePrefix,
     displayLeftValueUnit = _ref.displayLeftValueUnit,
@@ -141,28 +141,26 @@ var SliderRatio = function SliderRatio(_ref) {
     className: cn('label')
   }, label), /*#__PURE__*/React.createElement("div", {
     className: cn('display-values')
-  }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
-    className: cn('display-value', {
-      left: true
-    }),
+  }, /*#__PURE__*/React.createElement(ValueField, {
+    isControlled: true,
+    position: "left",
     value: leftInputValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayLeftValuePrefix,
-    displayValueUnit: displayLeftValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayLeftValuePrefix,
+    valueUnit: displayLeftValueUnit,
     disabled: disabled,
     onChange: handleInputChange(KeyValueEnum.LEFT),
     onBlur: handleInputBlur(KeyValueEnum.LEFT),
     dataAttrs: {
       input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
     }
-  }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
-    className: cn('display-value', {
-      right: true
-    }),
+  }), /*#__PURE__*/React.createElement(ValueField, {
+    isControlled: true,
+    position: "right",
     value: rightInputValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayRightValuePrefix,
-    displayValueUnit: displayRightValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayRightValuePrefix,
+    valueUnit: displayRightValueUnit,
     disabled: disabled,
     onChange: handleInputChange(KeyValueEnum.RIGHT),
     onBlur: handleInputBlur(KeyValueEnum.RIGHT),

package/dist/es/index.d.ts

@@ -53,7 +53,6 @@ export { default as Select } from './components/Select/Select';
 export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Slider } from './components/Sliders/Slider/Slider';
-export { default as SliderDisplayValue } from './components/Sliders/components/SliderDisplayValue/SliderDisplayValue';
 export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
 export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
 export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';

package/dist/es/index.js

@@ -53,7 +53,6 @@ export { default as Select } from "./components/Select/Select";
 export { default as Selector } from "./components/Selector/Selector";
 export { default as selectReducer } from "./components/Select/reducer/selectReducer";
 export { default as Slider } from "./components/Sliders/Slider/Slider";
-export { default as SliderDisplayValue } from "./components/Sliders/components/SliderDisplayValue/SliderDisplayValue";
 export { default as SliderRange } from "./components/Sliders/SliderRange/SliderRange";
 export { default as SliderRatio } from "./components/Sliders/SliderRatio/SliderRatio";
 export { default as SliderScale } from "./components/Sliders/components/SliderScale/SliderScale";

package/dist/lib/components/Modal/_ModalContent/ModalContent.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--base);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:15px;font-weight:500;line-height:24px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/lib/components/Search/Search.d.ts

@@ -79,6 +79,8 @@ export interface ISearchProps {
         label?: string;
         input?: string;
         listItemTitle?: string;
+        list?: string;
+        listInner?: string;
         control?: string;
         icon?: string;
         submitButton?: string;
@@ -103,6 +105,8 @@ export interface ISearchProps {
     minTextareaHeight?: MinTextareaHeightType;
     /** Показать хендлер для ресайза текстового поля */
     showResizer?: boolean;
+    /** Ref обработчик */
+    inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */

package/dist/lib/components/Search/Search.js

@@ -109,6 +109,7 @@ var Search = function Search(_ref) {
     _ref$minTextareaHeigh = _ref.minTextareaHeight,
     minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
     showResizer = _ref.showResizer,
+    inputRef = _ref.inputRef,
     onChange = _ref.onChange,
     onSubmit = _ref.onSubmit,
     onBlur = _ref.onBlur,
@@ -164,6 +165,7 @@ var Search = function Search(_ref) {
       return;
     }
     fieldRef.current = node;
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
   };
   var textareaResize = React.useCallback(function () {
     if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
@@ -424,10 +426,10 @@ var Search = function Search(_ref) {
   };
   var renderList = function renderList() {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('list'),
+      className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list]),
       ref: listRef
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner')
+      className: cn('list-inner', [classes === null || classes === void 0 ? void 0 : classes.listInner])
     }, items.map(function (_ref2, i) {
       var itemValue = _ref2.value,
         searchView = _ref2.searchView,

package/dist/lib/components/Select/Select.d.ts

@@ -84,6 +84,8 @@ export interface ISelectProps<T extends SelectItemValueType> {
         listItemTitle?: Record<string, string>;
         notFound?: Record<string, string>;
     };
+    /** Ref обработчик */
+    inputRef?: (node: HTMLDivElement) => void;
     /** Обработчик выбора элемента селекта */
     onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
     /** Обработчик при открытом селекте */
@@ -91,5 +93,5 @@ export interface ISelectProps<T extends SelectItemValueType> {
     /** Обработчик при закрытом селекте */
     onClosed?: () => void;
 }
-declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
+declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
 export default Select;

package/dist/lib/components/Select/Select.js

@@ -84,6 +84,7 @@ var Select = function Select(_ref) {
     currentValue = _ref.currentValue,
     _ref$shortList = _ref.shortList,
     shortList = _ref$shortList === void 0 ? false : _ref$shortList,
+    inputRef = _ref.inputRef,
     onClosed = _ref.onClosed,
     onOpened = _ref.onOpened,
     onSelect = _ref.onSelect;
@@ -103,6 +104,13 @@ var Select = function Select(_ref) {
   var currentIndex = itemsList.findIndex(function (elem) {
     return elem.value === currentValue;
   });
+  var getFieldNode = function getFieldNode(node) {
+    if (!node) {
+      return;
+    }
+    selectNode.current = node;
+    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
+  };
   var handleClickOutside = (0, _react.useCallback)(function (e) {
     var _a;
     if (e.target instanceof Node && ((_a = selectNode.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) || !isOpened) {
@@ -393,7 +401,7 @@ var Select = function Select(_ref) {
       valid: verification === Verification.VALID,
       error: verification === Verification.ERROR
     }, [className, classes.root]),
-    ref: selectNode
+    ref: getFieldNode
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__display-value{margin-left:auto}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-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{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-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{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}

package/dist/lib/components/Sliders/Slider/Slider.d.ts

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
-import { ScaleType } from '../components/SliderScale/SliderScale';
 import './Slider.scss';
 export interface ISlider {
     /** Дополнительный класс корневого элемента */
@@ -14,7 +12,7 @@ export interface ISlider {
     /** Лейбл */
     label?: string;
     /** Тип выводимого значения */
-    displayValueType?: DisplayValueType;
+    displayValueType?: 'input' | 'line';
     /** Единица измерения выводимого значения */
     displayValueUnit?: string;
     /** Переводит компонент в контролируемое состояние */
@@ -22,7 +20,7 @@ export interface ISlider {
     /** Шаг */
     step?: number;
     /** Тип встроенной шкалы */
-    scale?: ScaleType;
+    scale?: 'interval' | 'base';
     /** Кастомная шкала */
     customScale?: string[];
     /** Переводит компонент в выключенное состояние */

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

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
-var _SliderDisplayValue = _interopRequireDefault(require("../components/SliderDisplayValue/SliderDisplayValue"));
+var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
 var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
 var _helpers = require("../helpers");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -67,11 +67,12 @@ var Slider = function Slider(_ref) {
     className: cn('head')
   }, !!label && /*#__PURE__*/React.createElement("div", {
     className: cn('label')
-  }, label), !!displayValueType && /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
-    className: cn('display-value'),
+  }, label), !!displayValueType && /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "right",
     value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
-    displayValueType: displayValueType,
-    displayValueUnit: displayValueUnit,
+    fieldType: displayValueType,
+    valueUnit: displayValueUnit,
     disabled: disabled,
     onChange: handleInputChange(false),
     onBlur: handleInputBlur,

package/dist/lib/components/Sliders/SliderRange/SliderRange.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__display-value_left{margin-right:auto}.mfui-slider-range__display-value_right{margin-left:auto}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__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-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__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-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}

package/dist/lib/components/Sliders/SliderRange/SliderRange.d.ts

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
-import { ScaleType } from '../components/SliderScale/SliderScale';
 import './SliderRange.scss';
 export interface ISliderRange {
     /** Дополнительный класс корневого элемента */
@@ -16,7 +14,7 @@ export interface ISliderRange {
     /** Лейбл */
     label?: string;
     /** Тип выводимого значения */
-    displayValueType?: DisplayValueType;
+    displayValueType?: 'input' | 'line';
     /** Префикс для выводимого значения слева */
     displayLeftValuePrefix?: string;
     /** Префикс для выводимого значения справа */
@@ -28,7 +26,7 @@ export interface ISliderRange {
     /** Шаг */
     step?: number;
     /** Тип встроенной шкалы */
-    scale?: ScaleType;
+    scale?: 'interval' | 'base';
     /** Кастомная шкала */
     customScale?: string[];
     /** Переводит компонент в выключенное состояние */

package/dist/lib/components/Sliders/SliderRange/SliderRange.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
-var _SliderDisplayValue = _interopRequireDefault(require("../components/SliderDisplayValue/SliderDisplayValue"));
+var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
 var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
 var _helpers = require("../helpers");
 var _helpers2 = require("./helpers");
@@ -135,28 +135,26 @@ var SliderRange = function SliderRange(_ref) {
     className: cn('label')
   }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
     className: cn('display-values')
-  }, /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
-    className: cn('display-value', {
-      left: true
-    }),
+  }, /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "left",
     value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayLeftValuePrefix,
-    displayValueUnit: displayValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayLeftValuePrefix,
+    valueUnit: displayValueUnit,
     disabled: disabled,
     onChange: handleLeftInputChange(false),
     onBlur: handleInputBlur(true),
     dataAttrs: {
       input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
     }
-  }), /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
-    className: cn('display-value', {
-      right: true
-    }),
+  }), /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "right",
     value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayRightValuePrefix,
-    displayValueUnit: displayValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayRightValuePrefix,
+    valueUnit: displayValueUnit,
     disabled: disabled,
     onChange: handleRightInputChange(false),
     onBlur: handleInputBlur(false),

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__display-value_left{margin-right:auto}.mfui-slider-ratio__display-value_right{margin-left:auto}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
 import { ValueType } from './types';
 import './SliderRatio.scss';
 export interface ISliderRatio {
@@ -12,7 +11,7 @@ export interface ISliderRatio {
     /** Лейбл */
     label?: string;
     /** Тип выводимого значения */
-    displayValueType?: DisplayValueType;
+    displayValueType?: 'input' | 'line';
     /** Префикс для выводимого значения слева */
     displayLeftValuePrefix?: string;
     /** Префикс для выводимого значения справа */

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.js

@@ -15,7 +15,7 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
-var _SliderDisplayValue = _interopRequireWildcard(require("../components/SliderDisplayValue/SliderDisplayValue"));
+var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
 var _helpers = require("../helpers");
 var _helpers2 = require("./helpers");
 var _types = require("./types");
@@ -30,7 +30,7 @@ var SliderRatio = function SliderRatio(_ref) {
   var className = _ref.className,
     label = _ref.label,
     _ref$displayValueType = _ref.displayValueType,
-    displayValueType = _ref$displayValueType === void 0 ? _SliderDisplayValue.DisplayValue.LINE : _ref$displayValueType,
+    displayValueType = _ref$displayValueType === void 0 ? 'line' : _ref$displayValueType,
     displayLeftValuePrefix = _ref.displayLeftValuePrefix,
     displayRightValuePrefix = _ref.displayRightValuePrefix,
     displayLeftValueUnit = _ref.displayLeftValueUnit,
@@ -150,28 +150,26 @@ var SliderRatio = function SliderRatio(_ref) {
     className: cn('label')
   }, label), /*#__PURE__*/React.createElement("div", {
     className: cn('display-values')
-  }, /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
-    className: cn('display-value', {
-      left: true
-    }),
+  }, /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "left",
     value: leftInputValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayLeftValuePrefix,
-    displayValueUnit: displayLeftValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayLeftValuePrefix,
+    valueUnit: displayLeftValueUnit,
     disabled: disabled,
     onChange: handleInputChange(_types.KeyValueEnum.LEFT),
     onBlur: handleInputBlur(_types.KeyValueEnum.LEFT),
     dataAttrs: {
       input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
     }
-  }), /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
-    className: cn('display-value', {
-      right: true
-    }),
+  }), /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "right",
     value: rightInputValue,
-    displayValueType: displayValueType,
-    displayValuePrefix: displayRightValuePrefix,
-    displayValueUnit: displayRightValueUnit,
+    fieldType: displayValueType,
+    valuePrefix: displayRightValuePrefix,
+    valueUnit: displayRightValueUnit,
     disabled: disabled,
     onChange: handleInputChange(_types.KeyValueEnum.RIGHT),
     onBlur: handleInputBlur(_types.KeyValueEnum.RIGHT),

package/dist/lib/index.d.ts

@@ -53,7 +53,6 @@ export { default as Select } from './components/Select/Select';
 export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Slider } from './components/Sliders/Slider/Slider';
-export { default as SliderDisplayValue } from './components/Sliders/components/SliderDisplayValue/SliderDisplayValue';
 export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
 export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
 export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';

package/dist/lib/index.js

@@ -315,12 +315,6 @@ Object.defineProperty(exports, "Slider", {
     return _Slider["default"];
   }
 });
-Object.defineProperty(exports, "SliderDisplayValue", {
-  enumerable: true,
-  get: function get() {
-    return _SliderDisplayValue["default"];
-  }
-});
 Object.defineProperty(exports, "SliderRange", {
   enumerable: true,
   get: function get() {
@@ -538,7 +532,6 @@ var _Select = _interopRequireDefault(require("./components/Select/Select"));
 var _Selector = _interopRequireDefault(require("./components/Selector/Selector"));
 var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
 var _Slider = _interopRequireDefault(require("./components/Sliders/Slider/Slider"));
-var _SliderDisplayValue = _interopRequireDefault(require("./components/Sliders/components/SliderDisplayValue/SliderDisplayValue"));
 var _SliderRange = _interopRequireDefault(require("./components/Sliders/SliderRange/SliderRange"));
 var _SliderRatio = _interopRequireDefault(require("./components/Sliders/SliderRatio/SliderRatio"));
 var _SliderScale = _interopRequireDefault(require("./components/Sliders/components/SliderScale/SliderScale"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "7.6.0",
+    "version": "7.7.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.4.0",
+        "@megafon/ui-icons": "^3.5.0",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "327dfbd92bc2d6dfd02455d92527ae27d9944207"
+    "gitHead": "a573f87db1256b45a663aa9acc352edc61a58004"
 }

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

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-display-value{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-slider-display-value_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-slider-display-value_interactive.mfui-slider-display-value:hover,.mfui-slider-display-value_interactive.mfui-slider-display-value_focus{border-color:var(--content)}.mfui-slider-display-value_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-slider-display-value_disabled.mfui-slider-display-value_interactive:hover{border-color:var(--spbSky0)}.mfui-slider-display-value__box{overflow:hidden}.mfui-slider-display-value__line{font-weight:500}.mfui-slider-display-value__unit{margin-left:4px}.mfui-slider-display-value_interactive .mfui-slider-display-value__line{height:0;opacity:0;visibility:hidden}.mfui-slider-display-value__prefix{color:var(--spbSky3);margin-right:4px}.mfui-slider-display-value__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;cursor:text;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-slider-display-value__input::-webkit-inner-spin-button,.mfui-slider-display-value__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-slider-display-value__input[type=number]{-moz-appearance:textfield}

package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import './SliderDisplayValue.scss';
-export declare const DisplayValue: {
-    readonly LINE: "line";
-    readonly INPUT: "input";
-};
-export type DisplayValueType = (typeof DisplayValue)[keyof typeof DisplayValue];
-export interface ISliderDisplayValue {
-    className?: string;
-    value: string | number;
-    displayValueType?: DisplayValueType;
-    displayValuePrefix?: string;
-    displayValueUnit?: string;
-    disabled?: boolean;
-    dataAttrs?: {
-        root?: Record<string, string>;
-        input?: Record<string, string>;
-    };
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onBlur: () => void;
-}
-declare const SliderDisplayValue: React.FC<ISliderDisplayValue>;
-export default SliderDisplayValue;

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

@@ -1,78 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "core-js/modules/es.array.includes.js";
-import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import "./SliderDisplayValue.css";
-export var DisplayValue = {
-  LINE: 'line',
-  INPUT: 'input'
-};
-var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
-var cn = cnCreate('mfui-slider-display-value');
-var SliderDisplayValue = function SliderDisplayValue(_ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    displayValueType = _ref.displayValueType,
-    displayValuePrefix = _ref.displayValuePrefix,
-    displayValueUnit = _ref.displayValueUnit,
-    disabled = _ref.disabled,
-    dataAttrs = _ref.dataAttrs,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur;
-  var inputRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setIsFocused = _React$useState2[1];
-  var isDisplayValueInput = displayValueType === DisplayValue.INPUT;
-  var handleInputBlur = function handleInputBlur() {
-    setIsFocused(false);
-    onBlur();
-  };
-  var handleInputFocus = function handleInputFocus() {
-    setIsFocused(true);
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    var _a;
-    if (e.key === 'Enter') {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      onBlur();
-      return;
-    }
-    if (charsAllowedByNumberInput.includes(e.key)) {
-      e.preventDefault();
-    }
-  };
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    React.createElement("label", _extends({
-      className: cn({
-        interactive: isDisplayValueInput,
-        focus: isFocused,
-        disabled: disabled
-      }, [className])
-    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!displayValuePrefix && /*#__PURE__*/React.createElement("div", {
-      className: cn('prefix')
-    }, displayValuePrefix), /*#__PURE__*/React.createElement("div", {
-      className: cn('box')
-    }, isDisplayValueInput && /*#__PURE__*/React.createElement("input", _extends({
-      className: cn('input'),
-      type: "number",
-      value: value,
-      onChange: onChange,
-      onBlur: handleInputBlur,
-      onFocus: handleInputFocus,
-      onKeyDown: handleKeyDown,
-      disabled: disabled
-    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
-      ref: inputRef
-    })), /*#__PURE__*/React.createElement("div", {
-      className: cn('line')
-    }, value)), !!displayValueUnit && /*#__PURE__*/React.createElement("div", {
-      className: cn('unit')
-    }, displayValueUnit))
-  );
-};
-export default SliderDisplayValue;

package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-display-value{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-slider-display-value_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-slider-display-value_interactive.mfui-slider-display-value:hover,.mfui-slider-display-value_interactive.mfui-slider-display-value_focus{border-color:var(--content)}.mfui-slider-display-value_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-slider-display-value_disabled.mfui-slider-display-value_interactive:hover{border-color:var(--spbSky0)}.mfui-slider-display-value__box{overflow:hidden}.mfui-slider-display-value__line{font-weight:500}.mfui-slider-display-value__unit{margin-left:4px}.mfui-slider-display-value_interactive .mfui-slider-display-value__line{height:0;opacity:0;visibility:hidden}.mfui-slider-display-value__prefix{color:var(--spbSky3);margin-right:4px}.mfui-slider-display-value__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;cursor:text;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-slider-display-value__input::-webkit-inner-spin-button,.mfui-slider-display-value__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-slider-display-value__input[type=number]{-moz-appearance:textfield}

package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import './SliderDisplayValue.scss';
-export declare const DisplayValue: {
-    readonly LINE: "line";
-    readonly INPUT: "input";
-};
-export type DisplayValueType = (typeof DisplayValue)[keyof typeof DisplayValue];
-export interface ISliderDisplayValue {
-    className?: string;
-    value: string | number;
-    displayValueType?: DisplayValueType;
-    displayValuePrefix?: string;
-    displayValueUnit?: string;
-    disabled?: boolean;
-    dataAttrs?: {
-        root?: Record<string, string>;
-        input?: Record<string, string>;
-    };
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onBlur: () => void;
-}
-declare const SliderDisplayValue: React.FC<ISliderDisplayValue>;
-export default SliderDisplayValue;

package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js

@@ -1,86 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.DisplayValue = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.array.includes.js");
-var React = _interopRequireWildcard(require("react"));
-var _uiHelpers = require("@megafon/ui-helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var DisplayValue = exports.DisplayValue = {
-  LINE: 'line',
-  INPUT: 'input'
-};
-var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
-var cn = (0, _uiHelpers.cnCreate)('mfui-slider-display-value');
-var SliderDisplayValue = function SliderDisplayValue(_ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    displayValueType = _ref.displayValueType,
-    displayValuePrefix = _ref.displayValuePrefix,
-    displayValueUnit = _ref.displayValueUnit,
-    disabled = _ref.disabled,
-    dataAttrs = _ref.dataAttrs,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur;
-  var inputRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setIsFocused = _React$useState2[1];
-  var isDisplayValueInput = displayValueType === DisplayValue.INPUT;
-  var handleInputBlur = function handleInputBlur() {
-    setIsFocused(false);
-    onBlur();
-  };
-  var handleInputFocus = function handleInputFocus() {
-    setIsFocused(true);
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    var _a;
-    if (e.key === 'Enter') {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      onBlur();
-      return;
-    }
-    if (charsAllowedByNumberInput.includes(e.key)) {
-      e.preventDefault();
-    }
-  };
-  return /*#__PURE__*/(
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    React.createElement("label", (0, _extends2["default"])({
-      className: cn({
-        interactive: isDisplayValueInput,
-        focus: isFocused,
-        disabled: disabled
-      }, [className])
-    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!displayValuePrefix && /*#__PURE__*/React.createElement("div", {
-      className: cn('prefix')
-    }, displayValuePrefix), /*#__PURE__*/React.createElement("div", {
-      className: cn('box')
-    }, isDisplayValueInput && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
-      className: cn('input'),
-      type: "number",
-      value: value,
-      onChange: onChange,
-      onBlur: handleInputBlur,
-      onFocus: handleInputFocus,
-      onKeyDown: handleKeyDown,
-      disabled: disabled
-    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
-      ref: inputRef
-    })), /*#__PURE__*/React.createElement("div", {
-      className: cn('line')
-    }, value)), !!displayValueUnit && /*#__PURE__*/React.createElement("div", {
-      className: cn('unit')
-    }, displayValueUnit))
-  );
-};
-var _default = exports["default"] = SliderDisplayValue;