@megafon/ui-core 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.array.find.js";
 import "core-js/modules/es.array.find-index.js";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.regexp.constructor.js";
 import "core-js/modules/es.regexp.exec.js";
@@ -12,13 +10,12 @@ import "core-js/modules/es.regexp.sticky.js";
 import "core-js/modules/es.regexp.test.js";
 import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.string.replace.js";
-import "core-js/modules/es.string.split.js";
-import "core-js/modules/es.string.trim.js";
 import * as React from 'react';
-import { Fragment, useEffect, useReducer, useCallback } from 'react';
+import { useEffect, useReducer, useCallback } from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import "./Select.css";
+import Dropdown from "../Dropdown/Dropdown";
 import selectReducer, { initialState, SelectActions } from "./reducer/selectReducer";
 var UPDATE_ITEMS_LIST = SelectActions.UPDATE_ITEMS_LIST,
   UPDATE_VALUE_FROM_PROPS = SelectActions.UPDATE_VALUE_FROM_PROPS,
@@ -27,10 +24,6 @@ var UPDATE_ITEMS_LIST = SelectActions.UPDATE_ITEMS_LIST,
   TOGGLE_DROPDOWN = SelectActions.TOGGLE_DROPDOWN,
   UPDATE_SELECT_VALUE = SelectActions.UPDATE_SELECT_VALUE,
   SET_HOVERED_ITEM_INDEX = SelectActions.SET_HOVERED_ITEM_INDEX;
-export var SelectItemsPaddings = {
-  SMALL: 'small',
-  LARGE: 'large'
-};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -78,7 +71,8 @@ var Select = function Select(_ref) {
     inputRef = _ref.inputRef,
     onClosed = _ref.onClosed,
     onOpened = _ref.onOpened,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    renderHeaderContent = _ref.renderHeaderContent;
   var _useReducer = useReducer(selectReducer, initialState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     selectState = _useReducer2[0],
@@ -87,7 +81,6 @@ var Select = function Select(_ref) {
   var itemsNodeList = React.useRef([]);
   var selectNode = React.useRef(null);
   var itemsList = selectState.itemsList,
-    filterValue = selectState.comparableInputValue,
     isOpened = selectState.isOpened,
     hoveredItemIndex = selectState.hoveredItemIndex,
     inputValue = selectState.inputValue;
@@ -200,15 +193,6 @@ var Select = function Select(_ref) {
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     };
   };
-  var handleHoverItem = function handleHoverItem(index) {
-    return function (e) {
-      e.preventDefault();
-      changeSelectState({
-        type: SET_HOVERED_ITEM_INDEX,
-        hoveredItemIndex: index
-      });
-    };
-  };
   var handleComboboxFocus = function handleComboboxFocus(e) {
     e.stopPropagation();
     changeSelectState({
@@ -253,7 +237,7 @@ var Select = function Select(_ref) {
       return false;
     }
     if (e.key === 'Enter' && isOpened) {
-      var _nextIndex2 = hoveredItemIndex - 1;
+      var _nextIndex2 = hoveredItemIndex;
       handleSelectItem(_nextIndex2)(e);
       return false;
     }
@@ -274,41 +258,13 @@ var Select = function Select(_ref) {
     }
     return true;
   };
-  var highlightString = function highlightString(title, isItemActive, view) {
-    if (type === SelectTypes.CLASSIC) {
-      if (typeof view === 'function' && ! /*#__PURE__*/React.isValidElement(view)) {
-        return view({
-          filterValue: inputValue,
-          isItemActive: isItemActive
-        });
-      }
-      return view || title;
-    }
-    if (type === SelectTypes.COMBOBOX && view) {
-      if (typeof view === 'function' && ! /*#__PURE__*/React.isValidElement(view)) {
-        return view({
-          filterValue: inputValue,
-          isItemActive: isItemActive
-        });
-      }
-      return view;
-    }
-    var stringFragments = title.split(RegExp("(".concat(filterValue, ")"), 'ig'));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: i
-      }, fragment.toLowerCase() === filterValue.toLowerCase() && fragment !== '' ? /*#__PURE__*/React.createElement("span", {
-        className: cn('highlighted-fragment')
-      }, fragment) : fragment);
-    }));
-  };
-  var getNodeList = useCallback(function (node) {
-    if (filterValue.trim()) {
-      itemsNodeList.current = [];
-      return;
-    }
-    !filterValue && node && itemsNodeList.current.push(node);
-  }, [filterValue]);
+  var handleDropdownClose = useCallback(function () {
+    changeSelectState({
+      type: TOGGLE_DROPDOWN,
+      isOpened: false
+    });
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+  }, [onClosed]);
   var renderLabel = function renderLabel() {
     return /*#__PURE__*/React.createElement("label", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
       htmlFor: labelId,
@@ -328,7 +284,7 @@ var Select = function Select(_ref) {
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
       className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
       role: "button",
-      tabIndex: 0,
+      tabIndex: disabled ? -1 : 0,
       onClick: handleSelectClick
     }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleInner), {
       className: cn('title-inner', {
@@ -352,37 +308,33 @@ var Select = function Select(_ref) {
   };
   var renderChildren = function renderChildren() {
     var currentItems = type === SelectTypes.COMBOBOX ? itemsList : items;
-    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
-      className: cn('list', [classes.list])
-    }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listInner), {
-      className: cn('list-inner', {
-        "short": shortList
-      }, [classes.listInner]),
-      ref: itemWrapperNode
-    }), currentItems.map(function (_ref3, i) {
-      var title = _ref3.title,
-        value = _ref3.value,
-        view = _ref3.view,
-        _ref3$paddings = _ref3.paddings,
-        paddings = _ref3$paddings === void 0 ? SelectItemsPaddings.LARGE : _ref3$paddings;
-      var isItemActive = currentValue === value;
-      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
-        className: cn('list-item', {
-          hovered: hoveredItemIndex === i,
-          paddings: paddings
-        }, [classes.listItem]),
-        key: "".concat(i, "_").concat(value),
-        onClick: handleSelectItem(i),
-        onMouseEnter: !isTouch ? handleHoverItem(i) : undefined,
-        ref: getNodeList
-      }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItemTitle, i + 1), {
-        className: cn('item-title', {
-          active: isItemActive && !view
-        }, [classes.listItemTitle])
-      }), highlightString(title, isItemActive, view)));
-    }), type === SelectTypes.COMBOBOX && !currentItems.length && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notFound), {
-      className: cn('not-found')
-    }), notFoundText)));
+    var headerContent = renderHeaderContent === null || renderHeaderContent === void 0 ? void 0 : renderHeaderContent({
+      items: currentItems,
+      selectedValue: currentValue,
+      searchValue: inputValue,
+      onClose: handleDropdownClose
+    });
+    return /*#__PURE__*/React.createElement(Dropdown, {
+      isOpen: isOpened,
+      targetRef: itemWrapperNode,
+      items: currentItems,
+      value: currentValue,
+      "short": shortList,
+      emptyText: notFoundText,
+      headerContent: headerContent,
+      hoveredIndex: hoveredItemIndex,
+      onItemClick: handleSelectItem,
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.listInner,
+        list: classes === null || classes === void 0 ? void 0 : classes.list,
+        item: classes === null || classes === void 0 ? void 0 : classes.listItem
+      },
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listInner,
+        list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list,
+        item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem
+      }
+    });
   };
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({

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

@@ -13,7 +13,7 @@ var isEqualItems = function isEqualItems(newItems, setItems) {
 };
 export var initialState = {
   isOpened: false,
-  hoveredItemIndex: 0,
+  hoveredItemIndex: -1,
   itemsList: [],
   comparableInputValue: '',
   inputValue: ''

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-selector__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-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-9-selector__custom-input,.mfui-9-selector__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-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-9-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-9-selector__label_dark .mfui-9-selector__custom-input{background-color:var(--base);border-color:var(--spbSky2)}.mfui-9-selector__label_dark .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__custom-input{border-color:var(--buttonDown)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-selector__label_light .mfui-9-selector__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-selector__label_light .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{fill:var(--stcBlack)}.mfui-9-selector__label_lightk.mfui-9-selector__label_disabled .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon,.mfui-9-selector__label:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon,.mfui-9-selector__label:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon,.mfui-9-selector__label_disabled .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{opacity:1}.mfui-9-selector__label_disabled{cursor:default}.mfui-9-selector__label_disabled .mfui-9-selector__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-selector__label_disabled .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--spbSky2)}.mfui-9-selector__label_error .mfui-9-selector__custom-input{border-color:var(--fury)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-selector__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-selector__input:focus-visible+.mfui-9-selector__custom-input{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-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-9-selector__custom-input,.mfui-9-selector__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-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-9-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-9-selector__label_dark .mfui-9-selector__custom-input{background-color:var(--base);border-color:var(--spbSky2)}.mfui-9-selector__label_dark .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__custom-input{border-color:var(--buttonDown)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-9-selector__label_dark:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-selector__label_light .mfui-9-selector__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-selector__label_light .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-selector__label_light:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{fill:var(--stcBlack)}.mfui-9-selector__label_lightk.mfui-9-selector__label_disabled .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{fill:var(--stcWhite)}.mfui-9-selector__label:not(.mfui-9-selector__label_disabled) .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon,.mfui-9-selector__label:not(.mfui-9-selector__label_disabled):active .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon,.mfui-9-selector__label:not(.mfui-9-selector__label_disabled):hover .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon,.mfui-9-selector__label_disabled .mfui-9-selector__input:checked+.mfui-9-selector__custom-input .mfui-9-selector__icon{opacity:1}.mfui-9-selector__label_disabled{cursor:default}.mfui-9-selector__label_disabled .mfui-9-selector__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-selector__label_disabled .mfui-9-selector__input:checked+.mfui-9-selector__custom-input{background-color:var(--spbSky2)}.mfui-9-selector__label_error .mfui-9-selector__custom-input{border-color:var(--fury)}

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-9-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-9-slider__range-input:focus{outline:none}.mfui-9-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-9-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-9-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-9-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-9-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider_disabled .mfui-9-slider__head{color:var(--spbSky3)}.mfui-9-slider_disabled .mfui-9-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-9-slider_disabled .mfui-9-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-9-slider_disabled .mfui-9-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-9-slider_disabled .mfui-9-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-9-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-9-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-9-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;width:100%}.mfui-9-slider__range-input:focus{outline:none}.mfui-9-slider__range-input:focus-visible::-webkit-slider-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider__range-input:focus-visible::-moz-range-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider__range-input:focus-visible::-ms-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-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-9-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-9-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-9-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-9-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider__range-container{position:relative}.mfui-9-slider__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:12px;position:absolute;right:12px;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-9-slider__scale-item{background-color:var(--base);border-radius:50%;height:4px;width:4px}.mfui-9-slider__scale-item:first-child{margin-left:-2px}.mfui-9-slider__scale-item:last-child{margin-right:-2px}.mfui-9-slider_disabled .mfui-9-slider__head{color:var(--spbSky3)}.mfui-9-slider_disabled .mfui-9-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-9-slider_disabled .mfui-9-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-9-slider_disabled .mfui-9-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-9-slider_disabled .mfui-9-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,8 +1,16 @@
 import * as React from 'react';
+import { SizeFontScaleType } from '../components/SliderScale/SliderScale';
 import './Slider.scss';
 export interface ISlider {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        head?: string;
+        input?: string;
+        label?: string;
+        valueField?: string;
+    };
     /** Текущее значение */
     value?: number;
     /** Минимальное значение */
@@ -19,10 +27,14 @@ export interface ISlider {
     isControlled?: boolean;
     /** Шаг */
     step?: number;
+    /** Включает отображение шкалы */
+    showScale?: boolean;
     /** Тип встроенной шкалы */
     scale?: 'interval' | 'base';
     /** Кастомная шкала */
     customScale?: string[];
+    /** Размер шрифта у элементов шкалы */
+    sizeFontScale?: SizeFontScaleType;
     /** Переводит компонент в выключенное состояние */
     disabled?: boolean;
     /** Дополнительные data атрибуты к внутренним элементам */

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

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import ValueField from "../../ValueField/ValueField";
-import SliderScale from "../components/SliderScale/SliderScale";
-import { getRangeValue, getTrackSize, removeFirstZeros } from "../helpers";
+import SliderScale, { SizeFontScale } from "../components/SliderScale/SliderScale";
+import { generateRange, getRangeValue, getTrackSize, removeFirstZeros } from "../helpers";
 import "./Slider.css";
 var cn = cnCreate('mfui-9-slider');
 var Slider = function Slider(_ref) {
   var className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
     label = _ref.label,
     displayValueType = _ref.displayValueType,
     displayValueUnit = _ref.displayValueUnit,
@@ -20,8 +23,12 @@ var Slider = function Slider(_ref) {
     isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
     _ref$step = _ref.step,
     step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$showScale = _ref.showScale,
+    showScale = _ref$showScale === void 0 ? false : _ref$showScale,
     scale = _ref.scale,
     customScale = _ref.customScale,
+    _ref$sizeFontScale = _ref.sizeFontScale,
+    sizeFontScale = _ref$sizeFontScale === void 0 ? SizeFontScale.SMALL : _ref$sizeFontScale,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     dataAttrs = _ref.dataAttrs,
@@ -36,6 +43,7 @@ var Slider = function Slider(_ref) {
     innerRangeValue = _React$useState4[0],
     setInnerRangeValue = _React$useState4[1];
   var rangeValue = isControlled ? outerRangeValue : innerRangeValue;
+  var rangeValues = generateRange(minValue, maxValue, step);
   var trackSize = getTrackSize(rangeValue, minValue, maxValue);
   var showHead = !!label || !!displayValueType;
   var handleInputChange = function handleInputChange(isRange) {
@@ -55,10 +63,11 @@ var Slider = function Slider(_ref) {
       disabled: disabled
     }, [className])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), showHead && /*#__PURE__*/React.createElement("div", {
-    className: cn('head')
+    className: cn('head', classes.head)
   }, !!label && /*#__PURE__*/React.createElement("div", {
-    className: cn('label')
+    className: cn('label', classes.label)
   }, label), !!displayValueType && /*#__PURE__*/React.createElement(ValueField, {
+    className: classes.valueField,
     isControlled: true,
     position: "right",
     value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
@@ -70,8 +79,10 @@ var Slider = function Slider(_ref) {
     dataAttrs: {
       input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input
     }
-  })), /*#__PURE__*/React.createElement("input", _extends({
-    className: cn('range-input'),
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-container')
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('range-input', classes.input),
     type: "range",
     value: rangeValue,
     min: minValue,
@@ -81,10 +92,18 @@ var Slider = function Slider(_ref) {
     style: {
       backgroundSize: "".concat(trackSize, "% 100%")
     }
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput))), (!!scale || !!customScale) && /*#__PURE__*/React.createElement(SliderScale, {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput))), showScale && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('scale')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale)), rangeValues.map(function (_, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('scale-item'),
+      key: i
+    });
+  }))), (!!scale || !!customScale) && /*#__PURE__*/React.createElement(SliderScale, {
     minValue: minValue,
     maxValue: maxValue,
     scale: scale,
+    sizeFontScale: sizeFontScale,
     customScale: customScale,
     disabled: disabled,
     dataAttrs: {

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-9-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-9-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-9-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-9-slider-range__range-input_left{z-index:1}.mfui-9-slider-range__range-input_left.mfui-9-slider-range__range-input_over{z-index:3}.mfui-9-slider-range__range-input_right{z-index:2}.mfui-9-slider-range__range-input:focus{outline:none}.mfui-9-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-9-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-9-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-9-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-9-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-9-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-9-slider-range_disabled .mfui-9-slider-range__head{color:var(--spbSky3)}.mfui-9-slider-range_disabled .mfui-9-slider-range__range-track{cursor:default}.mfui-9-slider-range_disabled .mfui-9-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-9-slider-range_disabled .mfui-9-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-9-slider-range_disabled .mfui-9-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-9-slider-range_disabled .mfui-9-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-9-slider-range_disabled .mfui-9-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-9-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-9-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-9-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-9-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-9-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-9-slider-range__range-input_left{z-index:1}.mfui-9-slider-range__range-input_left.mfui-9-slider-range__range-input_over{z-index:3}.mfui-9-slider-range__range-input_right{z-index:2}.mfui-9-slider-range__range-input:focus{outline:none}.mfui-9-slider-range__range-input:focus-visible::-webkit-slider-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider-range__range-input:focus-visible::-moz-range-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider-range__range-input:focus-visible::-ms-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-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-9-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-9-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-9-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-9-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-9-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-9-slider-range_disabled .mfui-9-slider-range__head{color:var(--spbSky3)}.mfui-9-slider-range_disabled .mfui-9-slider-range__range-track{cursor:default}.mfui-9-slider-range_disabled .mfui-9-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-9-slider-range_disabled .mfui-9-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-9-slider-range_disabled .mfui-9-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-9-slider-range_disabled .mfui-9-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-9-slider-range_disabled .mfui-9-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,4 +1,5 @@
 import * as React from 'react';
+import { SizeFontScaleType } from '../components/SliderScale/SliderScale';
 import './SliderRange.scss';
 export interface ISliderRange {
     /** Дополнительный класс корневого элемента */
@@ -29,6 +30,8 @@ export interface ISliderRange {
     scale?: 'interval' | 'base';
     /** Кастомная шкала */
     customScale?: string[];
+    /** Размер шрифта у элементов шкалы */
+    sizeFontScale?: SizeFontScaleType;
     /** Переводит компонент в выключенное состояние */
     disabled?: boolean;
     /** Дополнительные data атрибуты к внутренним элементам */

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import ValueField from "../../ValueField/ValueField";
-import SliderScale from "../components/SliderScale/SliderScale";
+import SliderScale, { SizeFontScale } from "../components/SliderScale/SliderScale";
 import { getRangeValue, removeFirstZeros } from "../helpers";
 import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
 import "./SliderRange.css";
@@ -26,6 +26,8 @@ var SliderRange = function SliderRange(_ref) {
     step = _ref$step === void 0 ? 1 : _ref$step,
     scale = _ref.scale,
     customScale = _ref.customScale,
+    _ref$sizeFontScale = _ref.sizeFontScale,
+    sizeFontScale = _ref$sizeFontScale === void 0 ? SizeFontScale.SMALL : _ref$sizeFontScale,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     dataAttrs = _ref.dataAttrs,
@@ -198,6 +200,7 @@ var SliderRange = function SliderRange(_ref) {
     maxValue: maxValue,
     scale: scale,
     customScale: customScale,
+    sizeFontScale: sizeFontScale,
     disabled: disabled,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-9-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-9-slider-ratio__range-container{position:relative;width:100%}.mfui-9-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-9-slider-ratio__range-input:focus{outline:none}.mfui-9-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/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-9-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/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-9-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/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-9-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-9-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-9-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-9-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-9-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-9-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-9-slider-ratio_disabled .mfui-9-slider-ratio__head{color:var(--spbSky3)}.mfui-9-slider-ratio_disabled .mfui-9-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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-track{cursor:default}.mfui-9-slider-ratio_disabled .mfui-9-slider-ratio__scale{display:none}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-9-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-9-slider-ratio__range-container{position:relative;width:100%}.mfui-9-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-9-slider-ratio__range-input:focus{outline:none}.mfui-9-slider-ratio__range-input:focus-visible::-webkit-slider-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider-ratio__range-input:focus-visible::-moz-range-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider-ratio__range-input:focus-visible::-ms-thumb{outline:4px solid var(--137C);outline-offset:2px}.mfui-9-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/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-9-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/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-9-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/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-9-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-9-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-9-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-9-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-9-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-9-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-9-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-9-slider-ratio_disabled .mfui-9-slider-ratio__head{color:var(--spbSky3)}.mfui-9-slider-ratio_disabled .mfui-9-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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/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-9-slider-ratio_disabled .mfui-9-slider-ratio__range-track{cursor:default}.mfui-9-slider-ratio_disabled .mfui-9-slider-ratio__scale{display:none}

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-slider-scale{font-size:12px;height:18px;line-height:18px;margin:8px 12px 0;position:relative}.mfui-9-slider-scale_disabled{color:var(--spbSky3)}.mfui-9-slider-scale__item{position:absolute;translate:-50% 0;white-space:nowrap}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-slider-scale{height:18px;margin:8px 0 0;position:relative}.mfui-9-slider-scale_disabled{color:var(--spbSky3)}.mfui-9-slider-scale_size_small{font-size:12px;line-height:18px}.mfui-9-slider-scale_size_large{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-9-slider-scale_size_large{font-size:20px;line-height:28px}}.mfui-9-slider-scale__item{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.mfui-9-slider-scale__item:first-child{-webkit-transform:translateX(0);transform:translateX(0)}.mfui-9-slider-scale__item:last-child{-webkit-transform:translateX(-100%);transform:translateX(-100%)}

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

@@ -4,11 +4,17 @@ export declare const Scale: {
     readonly BASE: "base";
     readonly INTERVAL: "interval";
 };
+export declare const SizeFontScale: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
 export type ScaleType = (typeof Scale)[keyof typeof Scale];
+export type SizeFontScaleType = (typeof SizeFontScale)[keyof typeof SizeFontScale];
 export interface ISliderScale {
     minValue: number;
     maxValue: number;
     scale?: ScaleType;
+    sizeFontScale?: SizeFontScaleType;
     customScale?: string[];
     disabled?: boolean;
     dataAttrs?: {

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

@@ -8,12 +8,18 @@ export var Scale = {
   BASE: 'base',
   INTERVAL: 'interval'
 };
+export var SizeFontScale = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
 var cn = cnCreate('mfui-9-slider-scale');
 var SliderScale = function SliderScale(_ref) {
   var minValue = _ref.minValue,
     maxValue = _ref.maxValue,
     _ref$scale = _ref.scale,
     scale = _ref$scale === void 0 ? 'base' : _ref$scale,
+    _ref$sizeFontScale = _ref.sizeFontScale,
+    sizeFontScale = _ref$sizeFontScale === void 0 ? SizeFontScale.SMALL : _ref$sizeFontScale,
     customScale = _ref.customScale,
     disabled = _ref.disabled,
     dataAttrs = _ref.dataAttrs;
@@ -22,7 +28,8 @@ var SliderScale = function SliderScale(_ref) {
   var leftOffset = 100 / (currentScale.length - 1);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      disabled: disabled
+      disabled: disabled,
+      size: sizeFontScale
     })
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), currentScale.map(function (item, i) {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -1,3 +1,4 @@
 export declare const getRangeValue: (value: string | number, minValue: number, maxValue: number, step: number) => number;
+export declare const generateRange: (minValue: number, maxValue: number, step: number) => number[];
 export declare const getTrackSize: (value: number | undefined, minValue: number, maxValue: number) => number;
 export declare const removeFirstZeros: (targetValue: string) => string;

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

@@ -18,6 +18,13 @@ export var getRangeValue = function getRangeValue(value, minValue, maxValue, ste
   var valueWithStep = step * stepPosition;
   return valueWithStep < minValue ? minValue : valueWithStep;
 };
+export var generateRange = function generateRange(minValue, maxValue, step) {
+  var result = [];
+  for (var value = minValue; value <= maxValue; value += step) {
+    result.push(value);
+  }
+  return result;
+};
 export var getTrackSize = function getTrackSize() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var minValue = arguments.length > 1 ? arguments[1] : undefined;

package/dist/es/components/Snackbar/Snackbar.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-snackbar{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:480px;z-index:1}@-webkit-keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@media screen and (max-width:767px){.mfui-9-snackbar{width:304px}}.mfui-9-snackbar_move{-webkit-transition:none;transition:none}.mfui-9-snackbar .mfui-9-snackbar__tile{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;-webkit-animation:snackbar-show .2s linear .2s 1 forwards;animation:snackbar-show .2s linear .2s 1 forwards;background-color:var(--content);border:2px solid var(--stcWhite10);justify-content:space-between;min-height:64px;opacity:0;padding:12px 16px 12px 12px}@media screen and (max-width:767px){.mfui-9-snackbar .mfui-9-snackbar__tile{min-height:48px}}.mfui-9-snackbar__tile_closed{-webkit-animation:snackbar-hide .1s linear 1;animation:snackbar-hide .1s linear 1}.mfui-9-snackbar__tile_type_success .mfui-9-snackbar__icon-container svg{fill:var(--brandGreen)}.mfui-9-snackbar__tile_type_attention .mfui-9-snackbar__icon-container svg{fill:var(--fury80)}.mfui-9-snackbar__icon-container{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;height:32px;justify-content:center;margin-right:8px;min-width:32px;width:32px}.mfui-9-snackbar__icon-container svg{fill:var(--base)}@media screen and (max-width:767px){.mfui-9-snackbar__icon-container{height:20px;min-width:20px;width:20px}}.mfui-9-snackbar__icon-container_desktop{display:none}@media screen and (min-width:768px){.mfui-9-snackbar__icon-container_desktop{display:block}}.mfui-9-snackbar__icon-container_mobile{display:none}@media screen and (max-width:767px){.mfui-9-snackbar__icon-container_mobile{display:block}}.mfui-9-snackbar__text-wrapper{-webkit-box-flex:1;-ms-flex-positive:1;color:var(--base);flex-grow:1}.mfui-9-snackbar__text{display:none;overflow:hidden}@media screen and (min-width:768px){.mfui-9-snackbar__text_desktop{display:block;max-height:48px}}@media screen and (max-width:767px){.mfui-9-snackbar__text_mobile{display:block;max-height:36px}}.mfui-9-snackbar__text_short{max-width:272px}.mfui-9-snackbar__text-button{margin-left:12px;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.mfui-9-snackbar__close-button{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;background-color:transparent;border:none;border-radius:40px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:32px;justify-content:center;margin-left:24px;padding:0;width:32px}@media screen and (max-width:767px){.mfui-9-snackbar__close-button{display:none}}.mfui-9-snackbar__close-button:hover{background-color:hsla(0,0%,60%,.2)}.mfui-9-snackbar__close-button:active{background-color:hsla(0,0%,60%,.4)}.mfui-9-snackbar__close-button-icon{height:40px;min-width:40px;width:40px;fill:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-snackbar{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:480px;z-index:1}@-webkit-keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@media screen and (max-width:767px){.mfui-9-snackbar{width:304px}}.mfui-9-snackbar_move{-webkit-transition:none;transition:none}.mfui-9-snackbar .mfui-9-snackbar__tile{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;-webkit-animation:snackbar-show .2s linear .2s 1 forwards;animation:snackbar-show .2s linear .2s 1 forwards;background-color:var(--content);border:2px solid var(--stcWhite10);justify-content:space-between;min-height:64px;opacity:0;padding:12px 16px 12px 12px}@media screen and (max-width:767px){.mfui-9-snackbar .mfui-9-snackbar__tile{min-height:48px}}.mfui-9-snackbar__tile_closed{-webkit-animation:snackbar-hide .1s linear 1;animation:snackbar-hide .1s linear 1}.mfui-9-snackbar__tile_type_success .mfui-9-snackbar__icon-container svg{fill:var(--brandGreen)}.mfui-9-snackbar__tile_type_attention .mfui-9-snackbar__icon-container svg{fill:var(--fury80)}.mfui-9-snackbar__icon-container{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;height:32px;justify-content:center;margin-right:8px;min-width:32px;width:32px}.mfui-9-snackbar__icon-container svg{fill:var(--base)}@media screen and (max-width:767px){.mfui-9-snackbar__icon-container{height:20px;min-width:20px;width:20px}}.mfui-9-snackbar__icon-container_desktop{display:none}@media screen and (min-width:768px){.mfui-9-snackbar__icon-container_desktop{display:block}}.mfui-9-snackbar__icon-container_mobile{display:none}@media screen and (max-width:767px){.mfui-9-snackbar__icon-container_mobile{display:block}}.mfui-9-snackbar__text-wrapper{-webkit-box-flex:1;-ms-flex-positive:1;color:var(--base);flex-grow:1}@media screen and (max-width:767px){.mfui-9-snackbar__text-wrapper{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}}.mfui-9-snackbar__text{display:none;overflow:hidden}@media screen and (min-width:768px){.mfui-9-snackbar__text_desktop{display:block;max-height:48px}}@media screen and (max-width:767px){.mfui-9-snackbar__text_mobile{display:block;max-height:36px}}.mfui-9-snackbar__text_short{max-width:272px}.mfui-9-snackbar__text-button{margin-left:12px;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.mfui-9-snackbar__close-button{margin-left:24px}