@megafon/ui-core 9.0.0-alpha.9 → 9.0.0

package/dist/es/components/SectionAccordionGroup/SectionAccordionGroup.js

@@ -0,0 +1,161 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.find-index.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/web.timers.js";
+import * as React from 'react';
+import { cnCreate, checkEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolution from "../../hooks/useResolution";
+import Collapse from "../_Collapse/Collapse";
+import PromoBadge, { PromoBadgeSize } from "../Badges/PromoBadge/PromoBadge";
+import "./SectionAccordionGroup.css";
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
+  }));
+};
+var SCROLL_PADDING = 20;
+var COLLAPSE_DURATION = 300;
+var getItemVariant = function getItemVariant(index, length, openedIndex) {
+  if (index === openedIndex) {
+    return 'opened';
+  }
+  var isPrevOpened = openedIndex >= 0 && openedIndex === index - 1;
+  var isNextOpened = openedIndex >= 0 && openedIndex === index + 1;
+  var isPrevClosed = index > 0 && !isPrevOpened;
+  var isNextClosed = index < length - 1 && !isNextOpened;
+  switch (true) {
+    case !isPrevClosed && !isNextClosed:
+      return 'closed-single';
+    case !isPrevClosed:
+      return 'closed-top';
+    case !isNextClosed:
+      return 'closed-bottom';
+    default:
+      return 'closed-middle';
+  }
+};
+var scrollToItem = function scrollToItem(el) {
+  return setTimeout(function () {
+    var _el$getBoundingClient = el.getBoundingClientRect(),
+      top = _el$getBoundingClient.top,
+      bottom = _el$getBoundingClient.bottom;
+    if (top < 0) {
+      window.scrollBy({
+        top: top - SCROLL_PADDING,
+        behavior: 'smooth'
+      });
+      return;
+    }
+    if (bottom > window.innerHeight - SCROLL_PADDING) {
+      window.scrollBy({
+        top: bottom - window.innerHeight + SCROLL_PADDING,
+        behavior: 'smooth'
+      });
+    }
+  }, COLLAPSE_DURATION);
+};
+var cn = cnCreate('mfui-9-section-accordion-group');
+var SectionAccordionGroup = function SectionAccordionGroup(_ref) {
+  var sections = _ref.sections,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className;
+  var _useResolution = useResolution(),
+    isMobile = _useResolution.isMobile;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    openedId = _React$useState2[0],
+    setOpenedId = _React$useState2[1];
+  var scrollTimerRef = React.useRef(null);
+  var openedIndex = React.useMemo(function () {
+    return sections.findIndex(function (section) {
+      return section.id === openedId;
+    });
+  }, [sections, openedId]);
+  React.useEffect(function () {
+    return function () {
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current);
+      }
+    };
+  }, []);
+  var handleHeaderClick = function handleHeaderClick(id) {
+    return function (event) {
+      if (!checkEventIsClickOrEnterPress(event)) {
+        return;
+      }
+      setOpenedId(function (prev) {
+        return prev === id ? null : id;
+      });
+      if (openedId !== id && isMobile) {
+        var itemEl = event.currentTarget.closest(".".concat(cn('item')));
+        if (itemEl) {
+          scrollTimerRef.current = scrollToItem(itemEl);
+        }
+      }
+    };
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), sections.map(function (_ref2, index) {
+    var id = _ref2.id,
+      title = _ref2.title,
+      icon = _ref2.icon,
+      badge = _ref2.badge,
+      content = _ref2.content,
+      _ref2$tabIndex = _ref2.tabIndex,
+      tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;
+    var isOpened = id === openedId;
+    var variant = getItemVariant(index, sections.length, openedIndex);
+    var itemClassName = cn('item', _defineProperty({
+      opened: isOpened,
+      closed: !isOpened
+    }, variant, true), [classes.item]);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      key: id
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item), {
+      className: itemClassName
+    }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header), {
+      className: cn('header', [classes.header]),
+      role: "button",
+      tabIndex: tabIndex,
+      onClick: handleHeaderClick(id),
+      onKeyDown: handleHeaderClick(id)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('header-left')
+    }, icon && /*#__PURE__*/React.createElement("div", {
+      className: cn('icon', [classes.icon])
+    }, icon), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
+      className: cn('title', [classes.title])
+    }), title)), /*#__PURE__*/React.createElement("div", {
+      className: cn('header-right')
+    }, badge && /*#__PURE__*/React.createElement(PromoBadge, {
+      color: badge.color,
+      size: isMobile ? PromoBadgeSize.SMALL : PromoBadgeSize.MEDIUM,
+      className: cn('badge', [classes.badge])
+    }, badge.label), /*#__PURE__*/React.createElement("span", {
+      className: cn('arrow-wrapper', [classes.arrowWrapper])
+    }, /*#__PURE__*/React.createElement(ArrowDown, {
+      width: 24,
+      height: 24,
+      className: cn('arrow-icon')
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: cn('divider', {
+        visible: isOpened
+      })
+    }), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
+      className: cn('content', [classes.content]),
+      classNameContainer: cn('content-inner', [classes.contentInner]),
+      isOpened: isOpened,
+      animationDuration: COLLAPSE_DURATION
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('body', [classes.body])
+    }, content)));
+  }));
+};
+export default SectionAccordionGroup;

package/dist/es/components/Select/Select.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;font-weight:400;line-height:24px;min-height:40px;z-index:1}.mfui-9-select,.mfui-9-select__inner{position:relative}.mfui-9-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;cursor:pointer;height:60px;overflow:hidden;-webkit-transition:border-color .3s;transition:border-color .3s}.mfui-9-select__combobox,.mfui-9-select__control{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;width:100%}.mfui-9-select__combobox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;font-size:15px;font-weight:400;height:100%;line-height:24px;opacity:1;overflow:auto;padding:0 45px 0 16px;position:relative;z-index:1}.mfui-9-select_no-touch .mfui-9-select__control:focus-within,.mfui-9-select_no-touch .mfui-9-select__control:hover{border-color:var(--content)}.mfui-9-select__title{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;outline:none;width:100%}.mfui-9-select__title:after{border:5px solid transparent;border-bottom:none;border-top:6px solid;color:var(--content);content:"";cursor:pointer;display:block;position:absolute;right:27px;top:50%;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;z-index:1}.mfui-9-select__title-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3)}.mfui-9-select__title-inner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden;padding:0 45px 0 16px;white-space:nowrap}.mfui-9-select__title-inner:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--base));bottom:0;content:"";position:absolute;right:40px;top:0;width:40px}.mfui-9-select__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-9-select__not-found{opacity:.5;padding:8px 32px}.mfui-9-select__text{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:8px}.mfui-9-select__highlighted-fragment{font-weight:700}.mfui-9-select__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:17px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-select__combobox+.mfui-9-select__label{left:16px}.mfui-9-select__combobox::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__title-inner:not(.mfui-9-select__title-inner_hide-value) .mfui-9-select__label,.mfui-9-select_open .mfui-9-select__label{-webkit-transform:scale(.8) translate(-12%,-75%);transform:scale(.8) translate(-12%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__combobox:not(.mfui-9-select__combobox_hide-value)+.mfui-9-select__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__control_labeled .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__control_labeled .mfui-9-select__combobox,.mfui-9-select__control_labeled .mfui-9-select__title-inner{padding-top:22px}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-webkit-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus:-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-moz-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::placeholder{opacity:1}.mfui-9-select_open{z-index:12}.mfui-9-select_open .mfui-9-select__title:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-select_open .mfui-9-select__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;display:block}.mfui-9-select_open .mfui-9-select__control{border-color:var(--content)}.mfui-9-select_open .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{opacity:1}.mfui-9-select_valid .mfui-9-select__control{border-color:var(--brandGreen)!important}.mfui-9-select_error .mfui-9-select__control{border-color:var(--fury)!important}.mfui-9-select_error .mfui-9-select__text{color:var(--fury)}.mfui-9-select_disabled .mfui-9-select__control{background-color:var(--spbSky1);border-color:var(--spbSky1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-select_disabled .mfui-9-select__title-inner:after{display:none}.mfui-9-select_disabled .mfui-9-select__title:after{color:var(--content);opacity:.5}
+h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;font-weight:400;line-height:24px;min-height:40px;z-index:1}.mfui-9-select,.mfui-9-select__inner{position:relative}.mfui-9-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:60px;outline:none;overflow:hidden;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-9-select__control:focus-within:has(.mfui-9-select__title:focus-visible){-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-select__combobox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:text;font-size:15px;font-weight:400;height:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0 45px 0 16px;position:relative;width:100%;z-index:1}.mfui-9-select_no-touch .mfui-9-select__control:focus-within,.mfui-9-select_no-touch .mfui-9-select__control:hover{border-color:var(--content)}.mfui-9-select__title{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;outline:none;width:100%}.mfui-9-select__title:after{border:5px solid transparent;border-bottom:none;border-top:6px solid;color:var(--content);content:"";cursor:pointer;display:block;position:absolute;right:27px;top:50%;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;z-index:1}.mfui-9-select__title-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;width:100%}.mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3)}.mfui-9-select__title-inner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden;padding:0 45px 0 16px;white-space:nowrap}.mfui-9-select__title-inner:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--base));bottom:0;content:"";position:absolute;right:40px;top:0;width:40px}.mfui-9-select__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-9-select__not-found{opacity:.5;padding:8px 32px}.mfui-9-select__text{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:8px}.mfui-9-select__highlighted-fragment{font-weight:700}.mfui-9-select__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:17px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-select__combobox+.mfui-9-select__label{left:16px}.mfui-9-select__combobox::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__title-inner:not(.mfui-9-select__title-inner_hide-value) .mfui-9-select__label,.mfui-9-select_open .mfui-9-select__label{-webkit-transform:scale(.8) translate(-12%,-75%);transform:scale(.8) translate(-12%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__combobox:not(.mfui-9-select__combobox_hide-value)+.mfui-9-select__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__control_labeled .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__control_labeled .mfui-9-select__combobox,.mfui-9-select__control_labeled .mfui-9-select__title-inner{padding-top:22px}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-webkit-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus:-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-moz-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::placeholder{opacity:1}.mfui-9-select_open{z-index:12}.mfui-9-select_open .mfui-9-select__title:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-select_open .mfui-9-select__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;display:block}.mfui-9-select_open .mfui-9-select__control{border-color:var(--content)}.mfui-9-select_open .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{opacity:1}.mfui-9-select_valid .mfui-9-select__control{border-color:var(--brandGreen)!important}.mfui-9-select_error .mfui-9-select__control{border-color:var(--fury)!important}.mfui-9-select_error .mfui-9-select__text{color:var(--fury)}.mfui-9-select_disabled .mfui-9-select__control{background-color:var(--spbSky0);border-color:var(--spbSky2);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-select_disabled .mfui-9-select__title-inner:after{display:none}.mfui-9-select_disabled .mfui-9-select__title:after{color:var(--spbSky2)}

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

@@ -76,6 +76,13 @@ export interface ISelectProps<T extends SelectItemValueType> {
     onOpened?: () => void;
     /** Обработчик при закрытом селекте */
     onClosed?: () => void;
+    /** Функция рендера контента в шапке выпадающего списка */
+    renderHeaderContent?: (props: {
+        items: Array<ISelectItem<T>>;
+        selectedValue?: T;
+        searchValue?: string;
+        onClose: () => void;
+    }) => React.ReactNode;
 }
-declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
+declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, renderHeaderContent, }: ISelectProps<T>) => JSX.Element;
 export default Select;

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

@@ -71,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],
@@ -257,6 +258,13 @@ var Select = function Select(_ref) {
     }
     return true;
   };
+  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,
@@ -276,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', {
@@ -300,6 +308,12 @@ var Select = function Select(_ref) {
   };
   var renderChildren = function renderChildren() {
     var currentItems = type === SelectTypes.COMBOBOX ? itemsList : items;
+    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,
@@ -307,6 +321,7 @@ var Select = function Select(_ref) {
       value: currentValue,
       "short": shortList,
       emptyText: notFoundText,
+      headerContent: headerContent,
       hoveredIndex: hoveredItemIndex,
       onItemClick: handleSelectItem,
       classes: {

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;width:100%}.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__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}
+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/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/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/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}@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{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}

package/dist/es/components/Snackbar/Snackbar.js

@@ -4,8 +4,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/web.timers.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolution from "../../hooks/useResolution";
 import useSwipe, { TransitionSteps } from "../../hooks/useSwipe";
 import Button from "../Buttons/Button/Button";
+import ButtonClose from "../Buttons/ButtonClose/ButtonClose";
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import Tile from "../Tile/Tile";
@@ -15,49 +17,46 @@ var HeartIcon16 = function HeartIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M13.25 3A3.78 3.78 0 0010 4.82 3.78 3.78 0 006.75 3C4.6 3 3 5.18 3 7.13a3.42 3.42 0 00.49 1.77c1.2 2 5 7.64 5.15 7.88l.15.22h2.51l.15-.22c.16-.24 4-5.83 5.1-7.92A4.14 4.14 0 0017 7.13C17 5.18 15.4 3 13.25 3zm2.41 5.4c-.94 1.81-4.16 6.53-4.89 7.59H9.32c-.73-1.09-3.92-5.87-5-7.62A2.42 2.42 0 014 7.13C4 5.71 5.23 4 6.75 4a2.73 2.73 0 012.67 2h1.15a2.73 2.73 0 012.67-2C14.77 4 16 5.71 16 7.13a3.14 3.14 0 01-.34 1.27z"
+    d: "M13.463 2.75c.603 0 1.2.122 1.752.359a4.363 4.363 0 011.456 1.017A4.841 4.841 0 0118 7.45c0 1.433-.65 2.621-1.586 3.59l.003.004-5.694 5.9a1.004 1.004 0 01-1.443 0l-5.95-6.166A4.84 4.84 0 012 7.454 4.84 4.84 0 013.33 4.13c.408-.434.903-.78 1.455-1.017a4.445 4.445 0 013.503 0A4.364 4.364 0 019.745 4.13l.253.263.257-.267a4.37 4.37 0 011.457-1.017 4.443 4.443 0 011.75-.359z"
   }));
 };
 var HeartIcon24 = function HeartIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20.5 6A5.55 5.55 0 0016 8.27 5.55 5.55 0 0011.5 6C8.35 6 6 9.18 6 12a5 5 0 00.73 2.61c1.67 2.77 6.92 10.59 7.14 10.93l.3.44H18l.3-.43c.23-.33 5.58-8.09 7.09-11A6 6 0 0026 12c0-2.82-2.35-6-5.5-6zm3.07 7.65c-1.25 2.42-5.5 8.65-6.66 10.35h-1.68c-1.16-1.73-5.37-8-6.79-10.4A3 3 0 018 12c0-1.82 1.56-4 3.5-4a3.47 3.47 0 013.38 2.51h2.24A3.47 3.47 0 0120.5 8c1.94 0 3.5 2.2 3.5 4a4 4 0 01-.43 1.65z"
+    d: "M21.195 7c.904 0 1.798.18 2.626.526a6.55 6.55 0 012.186 1.487C27.288 10.336 28 12.071 28 13.873c0 2.094-.975 3.831-2.379 5.249l.005.005-8.197 8.28a2.01 2.01 0 01-2.853 0l-8.583-8.67A6.978 6.978 0 014 13.879c0-1.801.712-3.536 1.993-4.859A6.55 6.55 0 018.18 7.531a6.814 6.814 0 015.253 0 6.55 6.55 0 012.185 1.488l.38.383.386-.389a6.55 6.55 0 012.185-1.487A6.813 6.813 0 0121.195 7z"
   }));
 };
 var AttentionIcon16 = function AttentionIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M9 5h2v6H9V5zm1 8c-.2 0-.5.1-.7.3s-.3.4-.3.7.1.5.3.7.5.3.7.3.5-.1.7-.3.3-.4.3-.7-.1-.5-.3-.7c-.1-.2-.4-.3-.7-.3zm0 4c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm-8-7c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.249 3.014a1.96 1.96 0 013.45-.006l6.045 10.973c.739 1.342-.213 2.999-1.724 2.999H3.979c-1.508 0-2.46-1.651-1.727-2.993L8.25 3.014zM9.999 13a1 1 0 100 2 1 1 0 000-2zm0-7a1 1 0 00-1 1v4a1 1 0 002 0V7a1 1 0 00-1-1z"
   }));
 };
 var CheckedIcon16 = function CheckedIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
+    d: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
   }));
 };
 var AttentionIcon24 = function AttentionIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.373 6.516c1.128-2.018 4.041-2.023 5.176-.008l9.067 16.094C28.725 24.571 27.296 27 25.03 27H6.97c-2.263 0-3.691-2.42-2.591-4.389l8.994-16.095zM16 21.163c-.829 0-1.5.657-1.5 1.467s.671 1.466 1.5 1.466c.828 0 1.5-.656 1.5-1.466 0-.81-.672-1.467-1.5-1.467zm0-10.3a1.5 1.5 0 00-1.5 1.5v5.867a1.5 1.5 0 003 0v-5.867a1.5 1.5 0 00-1.5-1.5z"
   }));
 };
 var CheckedIcon24 = function CheckedIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
-  }));
-};
-var CancelIcon = function CancelIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+    d: "M11.033 15.1l3.39 3.39 6.817-6.742c.578-.572 1.483-.595 2.02-.051.538.544.504 1.449-.075 2.021l-7.858 7.773c-.576.57-1.476.595-2.015.056L8.95 17.185c-.54-.541-.512-1.446.063-2.021.576-.576 1.48-.604 2.021-.063z"
   }));
 };
 var DEFAULT_MAX_TIMER_SECONDS = 4;
@@ -110,6 +109,8 @@ var Snackbar = function Snackbar(_ref) {
     dataAttrs = _ref.dataAttrs,
     onClose = _ref.onClose,
     onButtonClick = _ref.onButtonClick;
+  var _useResolution = useResolution(),
+    isMobile = _useResolution.isMobile;
   var _React$useState = React.useState(true),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpened = _React$useState2[0],
@@ -221,13 +222,11 @@ var Snackbar = function Snackbar(_ref) {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.textButton
     },
     onClick: handleTextButtonClick
-  }, currentButtonText), /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
-    className: cn('close-button')
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton), {
+  }, currentButtonText), !isMobile && /*#__PURE__*/React.createElement(ButtonClose, _extends({
+    className: cn('close-button'),
+    size: "medium",
+    theme: "black",
     onClick: handleClose
-  }), /*#__PURE__*/React.createElement(CancelIcon, {
-    className: cn('close-button-icon')
-  }))));
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton)))));
 };
 export default Snackbar;

package/dist/es/components/Stepper/Stepper.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-stepper{gap:16px}.mfui-9-stepper,.mfui-9-stepper__items-wrap{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-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-9-stepper::-webkit-scrollbar{height:8px}.mfui-9-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-9-stepper_is-horizontal .mfui-9-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { IStepperItemProps } from './StepperItem';
+import './Stepper.scss';
+export type StepperItemType = Pick<IStepperItemProps, 'title' | 'text' | 'icon' | 'linkText' | 'linkUrl'>;
+export interface IStepperProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы элементов */
+    classes?: {
+        root?: string;
+        itemsWrap?: string;
+        item?: string;
+        itemIconButton?: string;
+        itemTitle?: string;
+        itemText?: string;
+        itemLink?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Индекс активного шага */
+    activeStep?: number;
+    /** Количество шагов */
+    stepCount?: number;
+    /** Шаги */
+    items?: StepperItemType[];
+    /** Направление */
+    isHorizontal?: boolean;
+    /** Цифры вместо галочек */
+    isNumeric?: boolean;
+    /** Отключение кнопок */
+    isDisabled?: boolean;
+    /** Все шаги пройдены */
+    isAllChecked?: boolean;
+    /** Отображение контента только активного шага */
+    showActiveStepContent?: boolean;
+    /** Выравнивание */
+    align?: 'center' | 'left';
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        itemsWrap?: Record<string, string>;
+        item?: Record<string, string>;
+        itemIconButton?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        itemText?: Record<string, string>;
+        itemLink?: Record<string, string>;
+    };
+    /** Обработчик события смены шага */
+    onChange?: (index: number) => void;
+}
+declare const Stepper: React.FC<IStepperProps>;
+export default Stepper;