@megafon/ui-core 6.0.0-beta.3 → 6.0.0

package/dist/lib/components/Selector/Selector.css

@@ -1 +1,132 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-selector__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-selector__label{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;outline:none;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-selector__custom-input,.mfui-selector__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-selector__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;height:28px;justify-content:center;-webkit-transition:background-color,border-color;transition:background-color,border-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:28px}.mfui-selector__icon{display:block;height:12px;opacity:0;-webkit-transition:fill,opacity;transition:fill,opacity;-webkit-transition-duration:.3s;transition-duration:.3s;width:14px}.mfui-selector__label_dark .mfui-selector__custom-input{background-color:var(--base);border-color:var(--spbSky2)}.mfui-selector__label_dark .mfui-selector__icon{fill:var(--stcWhite)}.mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input{border-color:var(--buttonHoverGreen)}.mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input{border-color:var(--buttonDown)}.mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-selector__label_dark:not(.mfui-selector__label_disabled) .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-selector__label_light .mfui-selector__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-selector__label_light .mfui-selector__icon{fill:var(--stcWhite)}.mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon{fill:var(--stcWhite)}.mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon{fill:var(--stcBlack)}.mfui-selector__label_lightk.mfui-selector__label_disabled .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon{fill:var(--stcWhite)}.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon,.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon,.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon,.mfui-selector__label_disabled .mfui-selector__input:checked+.mfui-selector__custom-input .mfui-selector__icon{opacity:1}.mfui-selector__label_disabled{cursor:default}.mfui-selector__label_disabled .mfui-selector__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-selector__label_disabled .mfui-selector__input:checked+.mfui-selector__custom-input{background-color:var(--spbSky2)}.mfui-selector__label_error .mfui-selector__custom-input{border-color:var(--fury)}
+.mfui-selector__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.mfui-selector__label {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.mfui-selector__custom-input {
+  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;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  border: 2px solid;
+  border-radius: 50%;
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-selector__icon {
+  display: block;
+  width: 14px;
+  height: 12px;
+  opacity: 0;
+  -webkit-transition: fill, opacity;
+  transition: fill, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-selector__label_dark .mfui-selector__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--base);
+}
+.mfui-selector__label_dark .mfui-selector__icon {
+  fill: var(--stcWhite);
+}
+.mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+}
+.mfui-selector__label_dark:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label_dark:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label_dark:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-selector__label_light .mfui-selector__custom-input {
+  border-color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-selector__label_light .mfui-selector__icon {
+  fill: var(--stcWhite);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGrey);
+  background-color: var(--buttonHoverGrey);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGrey);
+  background-color: var(--buttonHoverGrey);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  fill: var(--stcWhite);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-selector__label_light:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  fill: var(--stcBlack);
+}
+.mfui-selector__label_lightk.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  fill: var(--stcWhite);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon,
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label_disabled {
+  cursor: default;
+}
+.mfui-selector__label_disabled .mfui-selector__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-selector__label_error .mfui-selector__custom-input {
+  border-color: var(--fury);
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './Selector.scss';
+import './Selector.less';
 export interface ISelectorProps {
     /** Цвет селектора */
     color?: 'dark' | 'light';

package/dist/lib/components/Selector/Selector.js

@@ -1,24 +1,40 @@
 "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); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.includes.js");
+
 require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.includes.js");
+
 require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.concat.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 && Object.prototype.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; }
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 14 12"
@@ -26,41 +42,48 @@ var CheckedIcon = function CheckedIcon(props) {
     d: "M4.523 8.368L12.386 0 14 1.914 4.523 12 0 7.187l1.614-1.914 2.909 3.095z"
   }));
 };
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-selector');
+
 var Selector = function Selector(_ref) {
+  var _cn;
+
   var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'dark' : _ref$color,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'radio' : _ref$type,
-    value = _ref.value,
-    name = _ref.name,
-    checked = _ref.checked,
-    _ref$checkedOptions = _ref.checkedOptions,
-    checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    error = _ref.error,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs,
-    children = _ref.children,
-    onChange = _ref.onChange,
-    inputRef = _ref.inputRef;
+      color = _ref$color === void 0 ? 'dark' : _ref$color,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type,
+      value = _ref.value,
+      name = _ref.name,
+      checked = _ref.checked,
+      _ref$checkedOptions = _ref.checkedOptions,
+      checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      inputRef = _ref.inputRef;
+
   var handleChange = function handleChange() {
     if (type === 'radio') {
       return onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }
+
     var isChecked = checkedOptions.includes(value);
     var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
       return option !== value;
     }) : [].concat((0, _toConsumableArray2["default"])(checkedOptions), [value]);
     return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
   };
+
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('', className)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({
-    className: cn('label', (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, color, true), "disabled", disabled), "error", error), classes.label)
+    className: cn('label', (_cn = {}, (0, _defineProperty2["default"])(_cn, color, true), (0, _defineProperty2["default"])(_cn, "disabled", disabled), (0, _defineProperty2["default"])(_cn, "error", error), _cn), classes.label)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
     className: cn('input'),
     type: type,
@@ -76,4 +99,24 @@ var Selector = function Selector(_ref) {
     className: cn('icon')
   })), children));
 };
-var _default = exports["default"] = Selector;
+
+Selector.propTypes = {
+  color: PropTypes.oneOf(['dark', 'light']),
+  type: PropTypes.oneOf(['radio', 'checkbox']),
+  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
+  error: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+var _default = Selector;
+exports["default"] = _default;

package/dist/lib/components/Selector/doc/Selector.example.css

@@ -0,0 +1,17 @@
+.top-right {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+}
+.bottom-left {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}

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

@@ -1 +1,128 @@
-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}
+.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 {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: grid;
+  grid-template-columns: auto 55%;
+  margin-bottom: 8px;
+}
+.mfui-slider__display-value {
+  margin-left: auto;
+}
+.mfui-slider__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 12px;
+  margin: 6px 0;
+  border-radius: 100px;
+  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;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-slider__range-input:focus {
+  outline: none;
+}
+.mfui-slider__range-input::-webkit-slider-thumb {
+  width: 24px;
+  height: 24px;
+  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;
+}
+.mfui-slider__range-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-ms-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-webkit-slider-runnable-track {
+  border: none;
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-moz-range-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-ms-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: 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 {
+  width: 24px;
+  height: 24px;
+  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;
+  background-color: var(--spbSky2);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+  box-shadow: none;
+}
+.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+  box-shadow: none;
+}

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

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

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

@@ -1,52 +1,73 @@
 "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); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.object.values.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-var _SliderDisplayValue = _interopRequireDefault(require("../components/SliderDisplayValue/SliderDisplayValue"));
-var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _SliderDisplayValue = _interopRequireWildcard(require("../components/SliderDisplayValue/SliderDisplayValue"));
+
+var _SliderScale = _interopRequireWildcard(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); }
-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 && Object.prototype.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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-slider');
+
 var Slider = function Slider(_ref) {
   var className = _ref.className,
-    label = _ref.label,
-    displayValueType = _ref.displayValueType,
-    displayValueUnit = _ref.displayValueUnit,
-    _ref$value = _ref.value,
-    outerValue = _ref$value === void 0 ? 0 : _ref$value,
-    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,
+      displayValueUnit = _ref.displayValueUnit,
+      _ref$value = _ref.value,
+      outerValue = _ref$value === void 0 ? 0 : _ref$value,
+      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 outerRangeValue = (0, _helpers.getRangeValue)(outerValue, minValue, maxValue, step);
+
   var _React$useState = React.useState(null),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    rawInputValue = _React$useState2[0],
-    setRawInputValue = _React$useState2[1];
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      rawInputValue = _React$useState2[0],
+      setRawInputValue = _React$useState2[1];
+
   var _React$useState3 = React.useState(outerRangeValue),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    innerRangeValue = _React$useState4[0],
-    setInnerRangeValue = _React$useState4[1];
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      innerRangeValue = _React$useState4[0],
+      setInnerRangeValue = _React$useState4[1];
+
   var rangeValue = isControlled ? outerRangeValue : innerRangeValue;
   var trackSize = (0, _helpers.getTrackSize)(rangeValue, minValue, maxValue);
   var showHead = !!label || !!displayValueType;
+
   var handleInputChange = function handleInputChange(isRange) {
     return function (e) {
       var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
@@ -56,9 +77,11 @@ var Slider = function Slider(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue);
     };
   };
+
   var handleInputBlur = function handleInputBlur() {
     setRawInputValue(null);
   };
+
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
       disabled: disabled
@@ -100,4 +123,27 @@ var Slider = function Slider(_ref) {
     }
   }));
 };
-var _default = exports["default"] = Slider;
+
+Slider.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.number,
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayValueType: PropTypes.oneOf(Object.values(_SliderDisplayValue.DisplayValue)),
+  displayValueUnit: PropTypes.string,
+  isControlled: PropTypes.bool,
+  step: PropTypes.number,
+  scale: PropTypes.oneOf(Object.values(_SliderScale.Scale)),
+  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    rangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    scale: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = Slider;
+exports["default"] = _default;