@megafon/ui-core 6.2.1 → 7.0.0

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

@@ -1,169 +1 @@
-.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;
-  line-height: 24px;
-  font-weight: 500;
-  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;
-  width: 100%;
-  margin-top: 8px;
-}
-.mfui-slider-range__display-value_left {
-  margin-right: auto;
-}
-.mfui-slider-range__display-value_right {
-  margin-left: auto;
-}
-.mfui-slider-range__range-container {
-  position: relative;
-  height: 12px;
-  margin: 6px 0;
-  cursor: pointer;
-}
-.mfui-slider-range__range-input {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  height: 0;
-  margin: 0;
-  border: none;
-  background: none;
-  outline: none;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  pointer-events: none;
-}
-.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 {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-}
-.mfui-slider-range__range-input::-moz-range-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-}
-.mfui-slider-range__range-input::-ms-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-}
-.mfui-slider-range__range-track {
-  position: absolute;
-  right: 0;
-  left: 0;
-  z-index: 0;
-  height: 100%;
-  padding: 0 12px;
-  border-radius: 100px;
-  background-color: var(--spbSky0);
-  cursor: pointer;
-}
-.mfui-slider-range__range-track-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.mfui-slider-range__range-track-segment {
-  position: absolute;
-  height: 100%;
-  border-radius: 100px;
-  background-color: var(--brandGreen);
-}
-.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 {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-  background-color: var(--spbSky2);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-  background-color: var(--spbSky2);
-  box-shadow: none;
-}
-.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-  background-color: var(--spbSky2);
-  box-shadow: none;
-}
+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)}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
 import { ScaleType } from '../components/SliderScale/SliderScale';
-import './SliderRange.less';
+import './SliderRange.scss';
 export interface ISliderRange {
     /** Дополнительный класс корневого элемента */
     className?: string;

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

@@ -1,80 +1,69 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
-import SliderScale, { Scale } from "../components/SliderScale/SliderScale";
+import SliderDisplayValue from "../components/SliderDisplayValue/SliderDisplayValue";
+import SliderScale from "../components/SliderScale/SliderScale";
 import { getRangeValue, removeFirstZeros } from "../helpers";
 import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
 import "./SliderRange.css";
 var THUMB_SIZE = 24;
 var cn = cnCreate('mfui-slider-range');
-
 var SliderRange = function SliderRange(_ref) {
   var className = _ref.className,
-      label = _ref.label,
-      displayValueType = _ref.displayValueType,
-      displayLeftValuePrefix = _ref.displayLeftValuePrefix,
-      displayRightValuePrefix = _ref.displayRightValuePrefix,
-      displayValueUnit = _ref.displayValueUnit,
-      outerLeftValue = _ref.leftValue,
-      outerRightValue = _ref.rightValue,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      _ref$isControlled = _ref.isControlled,
-      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
-      _ref$step = _ref.step,
-      step = _ref$step === void 0 ? 1 : _ref$step,
-      scale = _ref.scale,
-      customScale = _ref.customScale,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      dataAttrs = _ref.dataAttrs,
-      onChange = _ref.onChange;
+    label = _ref.label,
+    displayValueType = _ref.displayValueType,
+    displayLeftValuePrefix = _ref.displayLeftValuePrefix,
+    displayRightValuePrefix = _ref.displayRightValuePrefix,
+    displayValueUnit = _ref.displayValueUnit,
+    outerLeftValue = _ref.leftValue,
+    outerRightValue = _ref.rightValue,
+    minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    scale = _ref.scale,
+    customScale = _ref.customScale,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange;
   var outerLeftRangeValue = getRangeValue(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
   var outerRightRangeValue = getRangeValue(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
   var leftRangeInputRef = React.useRef(null);
   var rightRangeInputRef = React.useRef(null);
   var rangeTrackRef = React.useRef(null);
   var rangeTrackInnerRef = React.useRef(null);
-
   var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      rawLeftInputValue = _React$useState2[0],
-      setRawLeftInputValue = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    rawLeftInputValue = _React$useState2[0],
+    setRawLeftInputValue = _React$useState2[1];
   var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      rawRightInputValue = _React$useState4[0],
-      setRawRightInputValue = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    rawRightInputValue = _React$useState4[0],
+    setRawRightInputValue = _React$useState4[1];
   var _React$useState5 = React.useState(outerLeftRangeValue),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      innerLeftRangeValue = _React$useState6[0],
-      setInnerLeftRangeValue = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    innerLeftRangeValue = _React$useState6[0],
+    setInnerLeftRangeValue = _React$useState6[1];
   var _React$useState7 = React.useState(outerRightRangeValue),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      innerRightRangeValue = _React$useState8[0],
-      setInnerRightRangeValue = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    innerRightRangeValue = _React$useState8[0],
+    setInnerRightRangeValue = _React$useState8[1];
   var leftRangeValue = isControlled ? outerLeftRangeValue : innerLeftRangeValue;
   var rightRangeValue = isControlled ? outerRightRangeValue : innerRightRangeValue;
   var trackSize = getTrackSize(leftRangeValue, rightRangeValue, minValue, maxValue);
   var isThumbAtEndOfTrack = checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, THUMB_SIZE);
   var showHead = !!label || !!displayValueType;
-
   var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
     if (!rangeTrackInnerRef.current || disabled) {
       return;
     }
-
     var clickValue = getRangeValueByPageX(e.pageX, minValue, maxValue, rangeTrackInnerRef.current);
     var newRangeValue = getRangeValue(clickValue, minValue, maxValue, step);
     var leftHalfTrack = leftRangeValue + (rightRangeValue - leftRangeValue) / 2;
-
     if (newRangeValue < leftHalfTrack) {
       !isControlled && setInnerLeftRangeValue(newRangeValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
@@ -83,25 +72,19 @@ var SliderRange = function SliderRange(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
     }
   };
-
   var handleRangeTrackPointerLeave = React.useCallback(function () {
     var _a, _b, _c;
-
     (_a = leftRangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     (_b = rightRangeInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
     (_c = rangeTrackRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
   }, []);
-
   var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
     var _a;
-
     if (disabled) {
       return;
     }
-
     (_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
   };
-
   var handleLeftInputChange = function handleLeftInputChange(isRange) {
     return function (e) {
       var targetValue = removeFirstZeros(e.target.value);
@@ -111,7 +94,6 @@ var SliderRange = function SliderRange(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
     };
   };
-
   var handleRightInputChange = function handleRightInputChange(isRange) {
     return function (e) {
       var targetValue = removeFirstZeros(e.target.value);
@@ -121,7 +103,6 @@ var SliderRange = function SliderRange(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
     };
   };
-
   var handleInputBlur = function handleInputBlur(isLeft) {
     return function () {
       if (isLeft) {
@@ -131,7 +112,6 @@ var SliderRange = function SliderRange(_ref) {
       }
     };
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       disabled: disabled
@@ -226,31 +206,4 @@ var SliderRange = function SliderRange(_ref) {
     }
   }));
 };
-
-SliderRange.propTypes = {
-  className: PropTypes.string,
-  leftValue: PropTypes.number,
-  rightValue: PropTypes.number,
-  minValue: PropTypes.number.isRequired,
-  maxValue: PropTypes.number.isRequired,
-  label: PropTypes.string,
-  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
-  displayLeftValuePrefix: PropTypes.string,
-  displayRightValuePrefix: PropTypes.string,
-  displayValueUnit: PropTypes.string,
-  isControlled: PropTypes.bool,
-  step: PropTypes.number,
-  scale: PropTypes.oneOf(Object.values(Scale)),
-  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    leftInput: PropTypes.objectOf(PropTypes.string.isRequired),
-    rightInput: PropTypes.objectOf(PropTypes.string.isRequired),
-    leftRangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
-    rightRangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
-    scale: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
 export default SliderRange;

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

@@ -6,14 +6,12 @@ export var getTrackSize = function getTrackSize() {
   var minValue = arguments.length > 2 ? arguments[2] : undefined;
   var maxValue = arguments.length > 3 ? arguments[3] : undefined;
   var valueDifference = maxValue - minValue;
-
   if (valueDifference <= 0) {
     return {
       left: 0,
       right: 0
     };
   }
-
   var leftPercent = (vleftValue - minValue) * 100 / valueDifference;
   var rightPercent = (maxValue - rightValue) * 100 / valueDifference;
   return {

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

@@ -1,219 +1 @@
-.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;
-  line-height: 24px;
-  font-weight: 500;
-  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;
-  width: 100%;
-  margin-top: 8px;
-}
-.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);
-  position: relative;
-  z-index: 1;
-  display: block;
-  width: 100%;
-  height: 12px;
-  margin: 6px 0;
-  border-radius: 100px;
-  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;
-  outline: none;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  pointer-events: none;
-}
-.mfui-slider-ratio__range-input:focus {
-  outline: none;
-}
-.mfui-slider-ratio__range-input::-webkit-slider-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  background-image: url('./i/thumb.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-}
-.mfui-slider-ratio__range-input::-moz-range-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  background-image: url('./i/thumb.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-}
-.mfui-slider-ratio__range-input::-ms-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  background-image: url('./i/thumb.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-}
-.mfui-slider-ratio__range-input::-webkit-slider-runnable-track {
-  border: none;
-  background: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  -webkit-appearance: none;
-}
-.mfui-slider-ratio__range-input::-moz-range-track {
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  -webkit-appearance: none;
-}
-.mfui-slider-ratio__range-input::-ms-track {
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  -webkit-appearance: none;
-}
-.mfui-slider-ratio__range-track {
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-.mfui-slider-ratio__scale {
-  position: absolute;
-  top: 0;
-  right: calc(var(--thumbSize) / 2);
-  bottom: 0;
-  left: calc(var(--thumbSize) / 2);
-  z-index: 2;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -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 {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-}
-.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 {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  background-image: url('./i/thumb.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-  background-color: var(--spbSky2);
-  background-image: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  background-image: url('./i/thumb.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-  background-color: var(--spbSky2);
-  background-image: none;
-  box-shadow: none;
-}
-.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb {
-  width: var(--thumbSize);
-  height: var(--thumbSize);
-  border: none;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  background-image: url('./i/thumb.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
-  -webkit-appearance: none;
-  pointer-events: auto;
-  background-color: var(--spbSky2);
-  background-image: none;
-  box-shadow: none;
-}
-.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__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}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
 import { ValueType } from './types';
-import './SliderRatio.less';
+import './SliderRatio.scss';
 export interface ISliderRatio {
     /** Дополнительный класс корневого элемента */
     className?: string;