@megafon/ui-core 7.6.1 → 7.8.0

package/dist/es/components/ErrorLoad/ErrorLoad.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-error-load{background:inherit}.mfui-error-load_cardinal_vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-error-load_cardinal_horizontal,.mfui-error-load_cardinal_vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-error-load_cardinal_horizontal{gap:8px;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-error-load__header{text-align:center}.mfui-error-load__text .mfui-error-load__caption_background_on-color,.mfui-error-load__text .mfui-error-load__header_background_on-color{color:var(--stcWhite)}.mfui-error-load__text .mfui-error-load__caption_background_on-base{color:var(--spbSky3)}.mfui-error-load__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.mfui-error-load__text_cardinal_vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IButtonProps } from '../Button/Button';
+import './ErrorLoad.scss';
+type ButtonProps = Pick<IButtonProps, 'disabled' | 'showLoader' | 'onClick'>;
+export interface IErrorLoadProps {
+    /** Размер блока */
+    big?: boolean;
+    /** Цветовая тема */
+    background?: 'on-base' | 'on-color';
+    /** Ориентация блока */
+    cardinalDirection?: 'vertical' | 'horizontal';
+    /** Параметры кнопки */
+    buttonParams?: ButtonProps;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const ErrorLoad: React.FC<IErrorLoadProps>;
+export default ErrorLoad;

package/dist/es/components/ErrorLoad/ErrorLoad.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.big.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Button from "../Button/Button";
+import Caption from "../Caption/Caption";
+import Header from "../Header/Header";
+import "./ErrorLoad.css";
+var RefreshIcon24 = function RefreshIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.064 8C11.604 8 8 11.588 8 16s3.604 8 8.064 8c4.1 0 7.478-3.033 7.995-6.948l1.983.262C25.393 22.223 21.17 26 16.064 26 10.513 26 6 21.53 6 16S10.513 6 16.064 6c3.456 0 6.507 1.731 8.32 4.371l.704-2.345 1.915.575-1.419 4.726a1 1 0 01-1.228.675l-4.855-1.364.541-1.925 2.664.748A8.074 8.074 0 0016.064 8z"
+  }));
+};
+var cn = cnCreate('mfui-error-load');
+var ErrorLoad = function ErrorLoad(_ref) {
+  var _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'on-base' : _ref$background,
+    _ref$big = _ref.big,
+    big = _ref$big === void 0 ? true : _ref$big,
+    _ref$cardinalDirectio = _ref.cardinalDirection,
+    cardinalDirection = _ref$cardinalDirectio === void 0 ? 'horizontal' : _ref$cardinalDirectio,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    buttonParams = _ref.buttonParams;
+  var isBaseBackground = background === 'on-base';
+  var isSmallIconSize = cardinalDirection === 'horizontal' || !big;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      cardinal: cardinalDirection
+    }, className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('text', {
+      cardinal: cardinalDirection
+    })
+  }, /*#__PURE__*/React.createElement(Header, {
+    as: big ? 'h3' : 'h5',
+    className: cn('header', {
+      background: background
+    })
+  }, "\u0414\u0430\u043D\u043D\u044B\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043B\u0438\u0441\u044C"), big && /*#__PURE__*/React.createElement(Caption, {
+    hasMargin: false,
+    className: cn('caption', {
+      background: background
+    })
+  }, "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0439\u0434\u0438\u0442\u0435 \u043F\u043E\u0437\u0436\u0435")), /*#__PURE__*/React.createElement(Button, _extends({
+    icon: /*#__PURE__*/React.createElement(RefreshIcon24, null),
+    theme: isBaseBackground ? 'green' : 'white',
+    sizeAll: isSmallIconSize ? 'small' : 'medium'
+  }, buttonParams, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    }
+  })));
+};
+export default ErrorLoad;

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

@@ -68,6 +68,8 @@ export interface ISearchProps {
     verification?: VerificationType;
     /** Дополнительный текст под полем. Свойство verification влияет на цвет текста. */
     noticeText?: string | JSX.Element;
+    /** Максимальное вводимое количество текста */
+    maxLength?: number;
     /** Отключение поля ввода */
     disabled?: boolean;
     /** Делает поле обязательным */
@@ -79,6 +81,8 @@ export interface ISearchProps {
         label?: string;
         input?: string;
         listItemTitle?: string;
+        list?: string;
+        listInner?: string;
         control?: string;
         icon?: string;
         submitButton?: string;
@@ -103,6 +107,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

@@ -85,6 +85,7 @@ var Search = function Search(_ref) {
     disabled = _ref.disabled,
     required = _ref.required,
     noticeText = _ref.noticeText,
+    maxLength = _ref.maxLength,
     className = _ref.className,
     classes = _ref.classes,
     _ref$type = _ref.type,
@@ -100,6 +101,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 +157,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 +418,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,
@@ -498,6 +501,7 @@ var Search = function Search(_ref) {
     }, [classes === null || classes === void 0 ? void 0 : classes.input]),
     placeholder: placeholder,
     value: searchQuery,
+    maxLength: maxLength,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -524,6 +528,7 @@ var Search = function Search(_ref) {
     },
     placeholder: placeholder,
     value: searchQuery,
+    maxLength: maxLength,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur,

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

@@ -18,6 +18,7 @@ export { default as Counter } from './components/Counter/Counter';
 export { default as CounterBadge } from './components/Badges/CounterBadge/CounterBadge';
 export { default as countGraphemes } from './components/TextField/utils/countGraphemes';
 export { default as Day } from './components/Calendar/components/_Day/Day';
+export { default as ErrorLoad } from './components/ErrorLoad/ErrorLoad';
 export { default as Grid } from './components/Grid/Grid';
 export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
@@ -53,7 +54,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

@@ -18,6 +18,7 @@ export { default as Counter } from "./components/Counter/Counter";
 export { default as CounterBadge } from "./components/Badges/CounterBadge/CounterBadge";
 export { default as countGraphemes } from "./components/TextField/utils/countGraphemes";
 export { default as Day } from "./components/Calendar/components/_Day/Day";
+export { default as ErrorLoad } from "./components/ErrorLoad/ErrorLoad";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as GridColumn } from "./components/Grid/GridColumn";
 export { default as Header } from "./components/Header/Header";
@@ -53,7 +54,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/ErrorLoad/ErrorLoad.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-error-load{background:inherit}.mfui-error-load_cardinal_vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-error-load_cardinal_horizontal,.mfui-error-load_cardinal_vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-error-load_cardinal_horizontal{gap:8px;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-error-load__header{text-align:center}.mfui-error-load__text .mfui-error-load__caption_background_on-color,.mfui-error-load__text .mfui-error-load__header_background_on-color{color:var(--stcWhite)}.mfui-error-load__text .mfui-error-load__caption_background_on-base{color:var(--spbSky3)}.mfui-error-load__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.mfui-error-load__text_cardinal_vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IButtonProps } from '../Button/Button';
+import './ErrorLoad.scss';
+type ButtonProps = Pick<IButtonProps, 'disabled' | 'showLoader' | 'onClick'>;
+export interface IErrorLoadProps {
+    /** Размер блока */
+    big?: boolean;
+    /** Цветовая тема */
+    background?: 'on-base' | 'on-color';
+    /** Ориентация блока */
+    cardinalDirection?: 'vertical' | 'horizontal';
+    /** Параметры кнопки */
+    buttonParams?: ButtonProps;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const ErrorLoad: React.FC<IErrorLoadProps>;
+export default ErrorLoad;

package/dist/lib/components/ErrorLoad/ErrorLoad.js

@@ -0,0 +1,68 @@
+"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"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.big.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+var _Header = _interopRequireDefault(require("../Header/Header"));
+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 RefreshIcon24 = function RefreshIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.064 8C11.604 8 8 11.588 8 16s3.604 8 8.064 8c4.1 0 7.478-3.033 7.995-6.948l1.983.262C25.393 22.223 21.17 26 16.064 26 10.513 26 6 21.53 6 16S10.513 6 16.064 6c3.456 0 6.507 1.731 8.32 4.371l.704-2.345 1.915.575-1.419 4.726a1 1 0 01-1.228.675l-4.855-1.364.541-1.925 2.664.748A8.074 8.074 0 0016.064 8z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-error-load');
+var ErrorLoad = function ErrorLoad(_ref) {
+  var _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'on-base' : _ref$background,
+    _ref$big = _ref.big,
+    big = _ref$big === void 0 ? true : _ref$big,
+    _ref$cardinalDirectio = _ref.cardinalDirection,
+    cardinalDirection = _ref$cardinalDirectio === void 0 ? 'horizontal' : _ref$cardinalDirectio,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    buttonParams = _ref.buttonParams;
+  var isBaseBackground = background === 'on-base';
+  var isSmallIconSize = cardinalDirection === 'horizontal' || !big;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      cardinal: cardinalDirection
+    }, className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('text', {
+      cardinal: cardinalDirection
+    })
+  }, /*#__PURE__*/React.createElement(_Header["default"], {
+    as: big ? 'h3' : 'h5',
+    className: cn('header', {
+      background: background
+    })
+  }, "\u0414\u0430\u043D\u043D\u044B\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043B\u0438\u0441\u044C"), big && /*#__PURE__*/React.createElement(_Caption["default"], {
+    hasMargin: false,
+    className: cn('caption', {
+      background: background
+    })
+  }, "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0439\u0434\u0438\u0442\u0435 \u043F\u043E\u0437\u0436\u0435")), /*#__PURE__*/React.createElement(_Button["default"], (0, _extends2["default"])({
+    icon: /*#__PURE__*/React.createElement(RefreshIcon24, null),
+    theme: isBaseBackground ? 'green' : 'white',
+    sizeAll: isSmallIconSize ? 'small' : 'medium'
+  }, buttonParams, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    }
+  })));
+};
+var _default = exports["default"] = ErrorLoad;