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

package/dist/lib/components/Row/Row.js

@@ -17,7 +17,7 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+    d: "M16.326 9.118a1.25 1.25 0 011.768-.004l5.618 5.592a1.825 1.825 0 010 2.588l-5.618 5.592a1.25 1.25 0 01-1.764-1.772l3.871-3.853H9a1.25 1.25 0 010-2.5h11.223l-3.893-3.875a1.25 1.25 0 01-.004-1.768z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-row');
@@ -65,6 +65,8 @@ var Row = function Row(_ref) {
     target: href ? target : undefined,
     rel: rel,
     onClick: handleClick
+  }, !!onClick && {
+    tabIndex: 0
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!icon && /*#__PURE__*/React.createElement("div", {
@@ -79,9 +81,9 @@ var Row = function Row(_ref) {
     className: cn('title', [classes.title]),
     as: isSmallSize ? 'h5' : 'h3',
     space: isSmallSize ? 'tight' : 'wide'
-  }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
-  }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.convert)(subTitle, _uiHelpers.textConvertConfig))), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cn('children')
   }, children), showArrow && /*#__PURE__*/React.createElement(ArrowRight, (0, _extends2["default"])({
     className: cn('arrow')

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

@@ -32,6 +32,8 @@ export interface IScrollBarProps {
     getScrollBar?: (node: HTMLElement) => void;
     /** Ref обработчик для Scrollable element */
     getScrollable?: (node: HTMLElement) => void;
+    /** Событие скролла */
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
     children?: React.ReactNode;
 }
 declare const ScrollBar: React.FC<IScrollBarProps>;

package/dist/lib/components/ScrollBar/ScrollBar.js

@@ -26,6 +26,7 @@ var ScrollBar = function ScrollBar(_ref) {
     showAlways = _ref.showAlways,
     getScrollBar = _ref.getScrollBar,
     getScrollable = _ref.getScrollable,
+    onScroll = _ref.onScroll,
     children = _ref.children;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -59,6 +60,9 @@ var ScrollBar = function ScrollBar(_ref) {
     var scrollContentOffsetHeight = scrollContentNode.offsetHeight;
     setIsInitialHide(scrollContentOffsetHeight <= maxHeight);
   }, [maxHeight]);
+  var handleScroll = function handleScroll(event) {
+    onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+  };
   React.useEffect(function () {
     if (!scrollBarInitNode.current || !maxHeight) {
       return undefined;
@@ -96,7 +100,8 @@ var ScrollBar = function ScrollBar(_ref) {
     forceVisible: "y",
     ref: handleGetScrollBarRef,
     scrollableNodeProps: {
-      ref: handleGetScrollableRef
+      ref: handleGetScrollableRef,
+      onScroll: handleScroll
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('children-wrap', [classes === null || classes === void 0 ? void 0 : classes.childrenWrap])

package/dist/lib/components/Search/Search.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-search{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;min-height:40px;position:relative;z-index:auto}.mfui-9-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-9-search__control{border:1px solid;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.mfui-9-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-9-search__field:focus::-moz-placeholder{opacity:1}.mfui-9-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-9-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-9-search__field:focus::placeholder{opacity:1}.mfui-9-search__field{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;-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;caret-color:var(--brandGreen);color:var(--content);cursor:text;flex-grow:1;font-family:inherit;font-size:100%;height:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100%}@media screen and (max-width:767px){.mfui-9-search__field{width:90%}}.mfui-9-search__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;-webkit-transition:scale .5s,top .01s,-webkit-transform .5s;transition:scale .5s,top .01s,-webkit-transform .5s;transition:transform .5s,scale .5s,top .01s;transition:transform .5s,scale .5s,top .01s,-webkit-transform .5s;z-index:1}.mfui-9-search__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;left:-1px;position:absolute;right:-1px;top:calc(100% + 1px);z-index:0}.mfui-9-search__clear,.mfui-9-search__submit-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;cursor:pointer;height:100%;justify-content:center;padding:0;text-align:center}.mfui-9-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px;scrollbar-width:none}.mfui-9-search__list-inner::-webkit-scrollbar{display:none}.mfui-9-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-9-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-9-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-9-search__popular-item{background-color:var(--base);border-radius:16px;cursor:pointer;min-height:48px;padding-left:12px;padding-right:16px;text-decoration:none}.mfui-9-search__popular-icon,.mfui-9-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-search__popular-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:16px;width:32px}.mfui-9-search__list-item_active,.mfui-9-search__popular-item_active{background-color:var(--spbSky0)}.mfui-9-search__item-title,.mfui-9-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-9-search__item-title:after,.mfui-9-search__popular-item-title:after{background:var(--base);bottom:0;content:"";-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--base) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);position:absolute;right:0;top:0;width:40px}.mfui-9-search__list-item_active .mfui-9-search__item-title:after,.mfui-9-search__popular-item_active .mfui-9-search__popular-item-title:after{background:var(--spbSky0);-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%)}.mfui-9-search__notice{font-size:12px;line-height:16px;margin-top:4px}.mfui-9-search__notice_error{color:var(--fury)}.mfui-9-search__notice_success{color:var(--brandGreen)}.mfui-9-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-9-search__list_not-found{cursor:default}.mfui-9-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-9-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-9-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-9-search_open{z-index:12}.mfui-9-search_open .mfui-9-search__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-search_type_textfield .mfui-9-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:16px;height:60px;padding:0 16px}.mfui-9-search_type_textfield .mfui-9-search__control:hover,.mfui-9-search_type_textfield .mfui-9-search__control_focused{border-color:var(--content)}.mfui-9-search_type_textfield .mfui-9-search__label{top:17px}.mfui-9-search_type_textfield .mfui-9-search__field:focus+.mfui-9-search__label,.mfui-9-search_type_textfield .mfui-9-search__field_filled+.mfui-9-search__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition:scale .2s,top .01s,-webkit-transform .2s;transition:scale .2s,top .01s,-webkit-transform .2s;transition:transform .2s,scale .2s,top .01s;transition:transform .2s,scale .2s,top .01s,-webkit-transform .2s}.mfui-9-search_type_textfield .mfui-9-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-9-search_type_textfield .mfui-9-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-9-search_textarea .mfui-9-search__control{height:auto;min-height:60px}.mfui-9-search_textarea .mfui-9-search__field{-webkit-box-sizing:content-box;box-sizing:content-box;max-height:204px;padding-bottom:9px;padding-top:17px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-search_textarea .mfui-9-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-9-search_textarea .mfui-9-search__icons{height:58px;margin-left:8px}.mfui-9-search_textarea .mfui-9-search__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-9-search__textarea-wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;width:100%}.mfui-9-search_type_textfield.mfui-9-search_disabled .mfui-9-search__control{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-9-search_type_textfield.mfui-9-search_disabled .mfui-9-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-search_type_compact .mfui-9-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:12px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-9-search_type_compact .mfui-9-search__control:hover{background-color:var(--spbSky1)}.mfui-9-search_type_compact .mfui-9-search__field{height:100%;padding:8px 0 8px 12px}.mfui-9-search_type_compact .mfui-9-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-9-search_type_compact .mfui-9-search__field:focus+.mfui-9-search__label,.mfui-9-search_type_compact .mfui-9-search__field_filled+.mfui-9-search__label{opacity:0}.mfui-9-search_type_compact .mfui-9-search__submit-icon{height:20px;width:20px;fill:var(--spbSky3)}.mfui-9-search_type_compact .mfui-9-search__clear{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;cursor:pointer;height:24px;justify-content:center;margin-left:12px;padding:0;width:24px}.mfui-9-search_type_compact .mfui-9-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-9-search_type_compact .mfui-9-search__clear-icon:hover{fill:var(--content)}.mfui-9-search_type_compact .mfui-9-search__clear-icon:active{fill:var(--buttonDown)}.mfui-9-search_type_compact.mfui-9-search_open .mfui-9-search__control{background-color:var(--spbSky1)}.mfui-9-search_type_compact.mfui-9-search_open .mfui-9-search__submit-icon{fill:var(--content)}.mfui-9-search_disabled .mfui-9-search__control{cursor:default;pointer-events:none}.mfui-9-search_disabled .mfui-9-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-search_error .mfui-9-search__control{border-color:var(--fury)}.mfui-9-search_success .mfui-9-search__control{border-color:var(--brandGreen)}.mfui-9-search__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-9-search__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-9-search__resizer:active svg,.mfui-9-search__resizer:hover svg{stroke:var(--spbSky3)}
+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-search{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;min-height:40px;position:relative;z-index:auto}.mfui-9-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-9-search__control{border:1px solid;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.mfui-9-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-9-search__field:focus::-moz-placeholder{opacity:1}.mfui-9-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-9-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-9-search__field:focus::placeholder{opacity:1}.mfui-9-search__field{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;-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;caret-color:var(--brandGreen);color:var(--content);cursor:text;flex-grow:1;font-family:inherit;font-size:100%;height:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100%}@media screen and (max-width:767px){.mfui-9-search__field{width:90%}}.mfui-9-search__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;-webkit-transition:scale .5s,top .01s,-webkit-transform .5s;transition:scale .5s,top .01s,-webkit-transform .5s;transition:transform .5s,scale .5s,top .01s;transition:transform .5s,scale .5s,top .01s,-webkit-transform .5s;z-index:1}.mfui-9-search__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;left:-1px;position:absolute;right:-1px;top:calc(100% + 1px);z-index:0}.mfui-9-search__clear,.mfui-9-search__submit-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;cursor:pointer;height:100%;justify-content:center;padding:0;text-align:center}.mfui-9-search__submit-button:focus-visible{outline:none}.mfui-9-search__submit-button:focus-visible .mfui-9-search__submit-icon{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;border-radius:12px;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-search__clear:focus-visible{outline:none}.mfui-9-search__clear:focus-visible .mfui-9-search__clear-icon{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;border-radius:12px;outline-offset:2px}.mfui-9-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px;scrollbar-width:none}.mfui-9-search__list-inner::-webkit-scrollbar{display:none}.mfui-9-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-9-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-9-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-9-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border-radius:16px;cursor:pointer;min-height:48px;padding-left:12px;padding-right:16px;text-decoration:none}.mfui-9-search__popular-item:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-search__popular-item:focus{outline:none}.mfui-9-search__popular-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-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:16px;width:32px}.mfui-9-search__list-item_active,.mfui-9-search__popular-item_active{background-color:var(--spbSky0)}.mfui-9-search__item-title,.mfui-9-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-9-search__item-title:after,.mfui-9-search__popular-item-title:after{background:var(--base);bottom:0;content:"";-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--base) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);position:absolute;right:0;top:0;width:40px}.mfui-9-search__list-item_active .mfui-9-search__item-title:after,.mfui-9-search__popular-item_active .mfui-9-search__popular-item-title:after{background:var(--spbSky0);-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%)}.mfui-9-search__notice{color:var(--spbSky3);font-size:12px;line-height:16px;margin-top:4px}.mfui-9-search__notice_error{color:var(--fury)}.mfui-9-search__notice_success{color:var(--brandGreen)}.mfui-9-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-9-search__list_not-found{cursor:default}.mfui-9-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-9-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-9-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-9-search_open{z-index:12}.mfui-9-search_open .mfui-9-search__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-search_type_textfield .mfui-9-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:16px;height:60px;padding:0 16px}.mfui-9-search_type_textfield .mfui-9-search__control:hover,.mfui-9-search_type_textfield .mfui-9-search__control_focused{border-color:var(--content)}.mfui-9-search_type_textfield .mfui-9-search__label{top:17px}.mfui-9-search_type_textfield .mfui-9-search__field:focus+.mfui-9-search__label,.mfui-9-search_type_textfield .mfui-9-search__field_filled+.mfui-9-search__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition:scale .2s,top .01s,-webkit-transform .2s;transition:scale .2s,top .01s,-webkit-transform .2s;transition:transform .2s,scale .2s,top .01s;transition:transform .2s,scale .2s,top .01s,-webkit-transform .2s}.mfui-9-search_type_textfield .mfui-9-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-9-search_type_textfield .mfui-9-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-9-search_textarea .mfui-9-search__control{height:auto;min-height:60px}.mfui-9-search_textarea .mfui-9-search__field{-webkit-box-sizing:content-box;box-sizing:content-box;max-height:204px;padding-bottom:9px;padding-top:17px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-search_textarea .mfui-9-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-9-search_textarea .mfui-9-search__icons{height:58px;margin-left:8px}.mfui-9-search_textarea .mfui-9-search__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-9-search__textarea-wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;width:100%}.mfui-9-search_type_textfield.mfui-9-search_disabled .mfui-9-search__control{background-color:var(--spbSky0);border-color:var(--spbSky2)}.mfui-9-search_type_textfield.mfui-9-search_disabled .mfui-9-search__submit-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:var(--spbSky2)}.mfui-9-search_type_compact .mfui-9-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:12px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-9-search_type_compact .mfui-9-search__control:hover{background-color:var(--spbSky1)}.mfui-9-search_type_compact .mfui-9-search__field{height:100%;padding:8px 0 8px 12px}.mfui-9-search_type_compact .mfui-9-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-9-search_type_compact .mfui-9-search__field:focus+.mfui-9-search__label,.mfui-9-search_type_compact .mfui-9-search__field_filled+.mfui-9-search__label{opacity:0}.mfui-9-search_type_compact .mfui-9-search__submit-icon{height:20px;width:20px;fill:var(--content)}.mfui-9-search_type_compact .mfui-9-search__clear{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;cursor:pointer;height:24px;justify-content:center;margin-left:12px;padding:0;width:24px}.mfui-9-search_type_compact .mfui-9-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-9-search_type_compact .mfui-9-search__clear-icon:hover{fill:var(--content)}.mfui-9-search_type_compact .mfui-9-search__clear-icon:active{fill:var(--buttonDown)}.mfui-9-search_type_compact.mfui-9-search_open .mfui-9-search__control{background-color:var(--spbSky1)}.mfui-9-search_type_compact.mfui-9-search_disabled .mfui-9-search__field{color:var(--spbSky3)}.mfui-9-search_compact-theme_white .mfui-9-search__control{background-color:var(--base);border-color:var(--base)}.mfui-9-search_compact-theme_white .mfui-9-search__control:hover{background-color:var(--base)}.mfui-9-search_compact-theme_white.mfui-9-search_disabled .mfui-9-search__control{background-color:var(--spbSky0);border-color:var(--spbSky2)}.mfui-9-search_compact-theme_white.mfui-9-search_open .mfui-9-search__control{background-color:var(--base)}.mfui-9-search_disabled .mfui-9-search__control{cursor:default;pointer-events:none}.mfui-9-search_disabled .mfui-9-search__submit-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:var(--spbSky2)}.mfui-9-search_error .mfui-9-search__control{border-color:var(--fury)}.mfui-9-search_success .mfui-9-search__control{border-color:var(--brandGreen)}.mfui-9-search__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-9-search__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-9-search__resizer:active svg,.mfui-9-search__resizer:hover svg{stroke:var(--spbSky3)}

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

@@ -50,6 +50,8 @@ export interface ISearchProps {
     value?: string;
     /** Вид отображения */
     type?: 'textfield' | 'compact';
+    /** Цветовая тема для типа compact */
+    compactTheme?: 'default' | 'white';
     /** Включить режим textarea */
     textarea?: boolean;
     /** Заголовок поля */

package/dist/lib/components/Search/Search.js

@@ -28,28 +28,32 @@ var SearchIcon16 = function SearchIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M17 9a7 7 0 10-3.32 6l2.49 3 .77-.64-2.47-3A7 7 0 0017 9zM4 9a6 6 0 116 6 6 6 0 01-6-6z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.055 2.305a6.5 6.5 0 014.698 10.989l2.657 2.657a.5.5 0 01-.707.707l-2.695-2.695A6.5 6.5 0 119.055 2.305zm0 1a5.5 5.5 0 000 11 5.476 5.476 0 003.587-1.334.5.5 0 01.136-.12 5.5 5.5 0 00-3.723-9.547z"
   }));
 };
 var SearchIcon = function SearchIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 24a9.94 9.94 0 005.7-1.8l4.83 5.8L28 26.72l-4.78-5.82A10 10 0 1016 24zm0-18a8 8 0 11-8 8 8 8 0 018-8z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.336 3.68c5.668 0 10.262 4.595 10.263 10.263 0 2.79-1.115 5.317-2.921 7.167l4.166 4.208a.801.801 0 01-1.137 1.126l-4.232-4.275a10.216 10.216 0 01-6.14 2.038c-5.667 0-10.263-4.596-10.263-10.264 0-5.668 4.596-10.262 10.264-10.262zm0 1.6a8.664 8.664 0 000 17.327 8.626 8.626 0 005.601-2.058.832.832 0 01.15-.128 8.664 8.664 0 00-5.751-15.14z"
   }));
 };
 var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ClearIcon__st0",
-    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+    d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
   }));
 };
 var ResizeIcon = function ResizeIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 12,
-    height: 12
+    height: 12,
+    viewBox: "0 0 12 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M1 11L11 1M7 11l4-4"
   }));
@@ -95,6 +99,7 @@ var Search = function Search(_ref) {
     classes = _ref.classes,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'textfield' : _ref$type,
+    compactTheme = _ref.compactTheme,
     textarea = _ref.textarea,
     showLoader = _ref.showLoader,
     showNotFound = _ref.showNotFound,
@@ -552,14 +557,16 @@ var Search = function Search(_ref) {
     ref: getFieldRef
   })), label && renderLabel));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn({
+    className: cn((0, _extends2["default"])({
       open: isFocused,
       disabled: disabled,
       type: type,
       textarea: isTextarea,
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
-    }, [className])
+    }, isCompact && {
+      'compact-theme': compactTheme
+    }), [className])
   }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
     className: cn('control', {
       focused: isTextareaResizing

package/dist/lib/components/SectionAccordionGroup/SectionAccordionGroup.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-section-accordion-group{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-section-accordion-group__item{background-color:var(--base);overflow:hidden;-webkit-transition:margin-top .3s ease-out,border-radius .3s ease-out;transition:margin-top .3s ease-out,border-radius .3s ease-out}.mfui-9-section-accordion-group__item:has(.mfui-9-section-accordion-group__header:focus-visible){-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px;position:relative;z-index:1}@-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-section-accordion-group__item_closed-single{border-radius:24px}.mfui-9-section-accordion-group__item_closed-single .mfui-9-section-accordion-group__header{padding:20px 16px}.mfui-9-section-accordion-group__item_closed-top{border-radius:24px 24px 8px 8px}.mfui-9-section-accordion-group__item_closed-top .mfui-9-section-accordion-group__header{padding:20px 16px 16px}.mfui-9-section-accordion-group__item_closed-middle{border-radius:8px}.mfui-9-section-accordion-group__item_closed-middle .mfui-9-section-accordion-group__header{padding:16px}.mfui-9-section-accordion-group__item_closed-bottom{border-radius:8px 8px 24px 24px}.mfui-9-section-accordion-group__item_closed-bottom .mfui-9-section-accordion-group__header{padding:16px 16px 20px}.mfui-9-section-accordion-group__item_opened{border-radius:24px}.mfui-9-section-accordion-group__item_opened .mfui-9-section-accordion-group__header{padding:20px 16px 16px}.mfui-9-section-accordion-group__item_closed+.mfui-9-section-accordion-group__item_closed{margin-top:1px}.mfui-9-section-accordion-group__item_closed+.mfui-9-section-accordion-group__item_opened,.mfui-9-section-accordion-group__item_opened+.mfui-9-section-accordion-group__item_closed{margin-top:12px}@media screen and (min-width:1024px){.mfui-9-section-accordion-group__item_closed+.mfui-9-section-accordion-group__item_opened,.mfui-9-section-accordion-group__item_opened+.mfui-9-section-accordion-group__item_closed{margin-top:24px}}.mfui-9-section-accordion-group__header{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;cursor:pointer;justify-content:space-between;width:100%;-webkit-tap-highlight-color:transparent;-webkit-transition:background-color .3s ease-out;transition:background-color .3s ease-out}.mfui-9-section-accordion-group__header:focus,.mfui-9-section-accordion-group__header:focus-visible{outline:none}@media screen and (max-width:767px){.mfui-9-section-accordion-group__header:active{background-color:var(--spbSky1)}}@media screen and (min-width:1024px){.mfui-9-section-accordion-group__header:hover{background-color:var(--spbSky1)}.mfui-9-section-accordion-group__header:hover+.mfui-9-section-accordion-group__divider{background-color:var(--spbSky1);margin:0;opacity:1}.mfui-9-section-accordion-group__header:hover+.mfui-9-section-accordion-group__divider_visible{opacity:0}}.mfui-9-section-accordion-group__header-left,.mfui-9-section-accordion-group__header-right{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-section-accordion-group__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:24px;justify-content:center;width:24px}.mfui-9-section-accordion-group__icon svg{fill:var(--brandGreen)}.mfui-9-section-accordion-group__title{font-size:15px;font-weight:500;line-height:24px}.mfui-9-section-accordion-group__arrow-wrapper{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:var(--spbSky0);border-radius:50%;height:24px;justify-content:center;width:24px}@media screen and (min-width:768px){.mfui-9-section-accordion-group__arrow-wrapper{height:32px;width:32px}}.mfui-9-section-accordion-group__arrow-icon{-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}.mfui-9-section-accordion-group__item_opened .mfui-9-section-accordion-group__arrow-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-section-accordion-group__divider{background-color:var(--spbSky1);height:1px;opacity:0;-webkit-transition:opacity .3s ease-out,height .3s ease-out,margin .3s ease-out;transition:opacity .3s ease-out,height .3s ease-out,margin .3s ease-out}@media screen and (max-width:767px){.mfui-9-section-accordion-group__divider{margin:0 16px}}.mfui-9-section-accordion-group__divider_visible{margin:0 16px;opacity:1}.mfui-9-section-accordion-group__content-inner{padding:12px 16px 16px}.mfui-9-section-accordion-group__body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { PromoBadgeColors } from '../Badges/PromoBadge/PromoBadge';
+import './SectionAccordionGroup.scss';
+export interface ISectionAccordionBadge {
+    color: (typeof PromoBadgeColors)[keyof typeof PromoBadgeColors];
+    label: string;
+}
+export interface ISectionAccordion {
+    id: string;
+    title: string;
+    icon?: React.ReactNode;
+    badge?: ISectionAccordionBadge;
+    content: React.ReactNode;
+    tabIndex?: number;
+}
+export interface ISectionAccordionGroupClasses {
+    item?: string;
+    header?: string;
+    icon?: string;
+    title?: string;
+    badge?: string;
+    arrowWrapper?: string;
+    content?: string;
+    contentInner?: string;
+    body?: string;
+}
+export interface ISectionAccordionGroupDataAttrs {
+    root?: Record<string, string>;
+    item?: Record<string, string>;
+    header?: Record<string, string>;
+    title?: Record<string, string>;
+    content?: Record<string, string>;
+}
+export interface ISectionAccordionGroupProps {
+    /** Массив секций аккордеона */
+    sections: ISectionAccordion[];
+    /** Дополнительные классы для внутренних элементов */
+    classes?: ISectionAccordionGroupClasses;
+    /** Дополнительные data-атрибуты для внутренних элементов */
+    dataAttrs?: ISectionAccordionGroupDataAttrs;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+}
+declare const SectionAccordionGroup: React.FC<ISectionAccordionGroupProps>;
+export default SectionAccordionGroup;

package/dist/lib/components/SectionAccordionGroup/SectionAccordionGroup.js

@@ -0,0 +1,170 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.find-index.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/web.timers.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
+var _Collapse = _interopRequireDefault(require("../_Collapse/Collapse"));
+var _PromoBadge = _interopRequireWildcard(require("../Badges/PromoBadge/PromoBadge"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    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 = (0, _uiHelpers.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 = (0, _useResolution2["default"])(),
+    isMobile = _useResolution.isMobile;
+  var _React$useState = React.useState(null),
+    _React$useState2 = (0, _slicedToArray2["default"])(_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 (!(0, _uiHelpers.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", (0, _extends2["default"])({}, (0, _uiHelpers.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', (0, _defineProperty2["default"])({
+      opened: isOpened,
+      closed: !isOpened
+    }, variant, true), [classes.item]);
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      key: id
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item), {
+      className: itemClassName
+    }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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", (0, _extends2["default"])({}, (0, _uiHelpers.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["default"], {
+      color: badge.color,
+      size: isMobile ? _PromoBadge.PromoBadgeSize.SMALL : _PromoBadge.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["default"], (0, _extends2["default"])({}, (0, _uiHelpers.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)));
+  }));
+};
+var _default = exports["default"] = SectionAccordionGroup;

package/dist/lib/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/lib/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/lib/components/Select/Select.js

@@ -80,7 +80,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 = (0, _react.useReducer)(_selectReducer["default"], _selectReducer.initialState),
     _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
     selectState = _useReducer2[0],
@@ -266,6 +267,13 @@ var Select = function Select(_ref) {
     }
     return true;
   };
+  var handleDropdownClose = (0, _react.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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
       htmlFor: labelId,
@@ -285,7 +293,7 @@ var Select = function Select(_ref) {
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleInner), {
       className: cn('title-inner', {
@@ -309,6 +317,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["default"], {
       isOpen: isOpened,
       targetRef: itemWrapperNode,
@@ -316,6 +330,7 @@ var Select = function Select(_ref) {
       value: currentValue,
       "short": shortList,
       emptyText: notFoundText,
+      headerContent: headerContent,
       hoveredIndex: hoveredItemIndex,
       onItemClick: handleSelectItem,
       classes: {

package/dist/lib/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/lib/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/lib/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)}