@megafon/ui-core 8.17.1 → 8.17.4

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import GridColumn from '../Grid/GridColumn';
+type GridColumnPropsType = React.ComponentProps<typeof GridColumn>;
+type GridColumnConfigType = Partial<Pick<GridColumnPropsType, 'all' | 'wide' | 'desktop' | 'tablet' | 'mobile'>>;
+export declare const getColumnConfig: (isFullWidth: boolean) => GridColumnConfigType;
+export {};

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

@@ -0,0 +1,10 @@
+export var getColumnConfig = function getColumnConfig(isFullWidth) {
+  return isFullWidth ? {
+    all: '12'
+  } : {
+    wide: '8',
+    desktop: '10',
+    tablet: '12',
+    mobile: '12'
+  };
+};

package/dist/es/components/Preloader/Preloader.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-preloader{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-preloader_size-all_small .mfui-preloader__item{height:6px;width:6px}.mfui-preloader_size-all_small .mfui-preloader__item:not(:last-child){margin-right:3px}.mfui-preloader_size-all_medium .mfui-preloader__item{height:12px;width:12px}.mfui-preloader_size-all_medium .mfui-preloader__item:not(:last-child){margin-right:6px}@media screen and (min-width:1280px){.mfui-preloader_size-wide_small .mfui-preloader__item{height:6px;width:6px}.mfui-preloader_size-wide_small .mfui-preloader__item:not(:last-child){margin-right:3px}.mfui-preloader_size-wide_medium .mfui-preloader__item{height:12px;width:12px}.mfui-preloader_size-wide_medium .mfui-preloader__item:not(:last-child){margin-right:6px}}@media screen and (min-width:1024px){.mfui-preloader_size-desktop_small .mfui-preloader__item{height:6px;width:6px}.mfui-preloader_size-desktop_small .mfui-preloader__item:not(:last-child){margin-right:3px}.mfui-preloader_size-desktop_medium .mfui-preloader__item{height:12px;width:12px}.mfui-preloader_size-desktop_medium .mfui-preloader__item:not(:last-child){margin-right:6px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-preloader_size-tablet_small .mfui-preloader__item{height:6px;width:6px}.mfui-preloader_size-tablet_small .mfui-preloader__item:not(:last-child){margin-right:3px}.mfui-preloader_size-tablet_medium .mfui-preloader__item{height:12px;width:12px}.mfui-preloader_size-tablet_medium .mfui-preloader__item:not(:last-child){margin-right:6px}}@media screen and (max-width:767px){.mfui-preloader_size-mobile_small .mfui-preloader__item{height:6px;width:6px}.mfui-preloader_size-mobile_small .mfui-preloader__item:not(:last-child){margin-right:3px}.mfui-preloader_size-mobile_medium .mfui-preloader__item{height:12px;width:12px}.mfui-preloader_size-mobile_medium .mfui-preloader__item:not(:last-child){margin-right:6px}}.mfui-preloader__item{position:relative}.mfui-preloader__item:before{border-radius:50px;content:"";height:100%;left:0;position:absolute;top:0;width:100%;will-change:transform}.mfui-preloader_color_default .mfui-preloader__item:before{-webkit-animation:scaling 1s linear infinite;animation:scaling 1s linear infinite}.mfui-preloader_color_default .mfui-preloader__item_first:before{background-color:var(--brandGreen)}.mfui-preloader_color_default .mfui-preloader__item_second:before{-webkit-animation-delay:.166s;animation-delay:.166s;background-color:var(--brandGreen)}.mfui-preloader_color_default .mfui-preloader__item_third:before{-webkit-animation-delay:.33s;animation-delay:.33s;background-color:var(--brandPurple)}.mfui-preloader_color_black .mfui-preloader__item:before{-webkit-animation:opacityScaling 1s linear infinite;animation:opacityScaling 1s linear infinite;background-color:var(--stcBlack);opacity:.35}.mfui-preloader_color_black .mfui-preloader__item_second:before{-webkit-animation-delay:.166s;animation-delay:.166s}.mfui-preloader_color_black .mfui-preloader__item_third:before{-webkit-animation-delay:.33s;animation-delay:.33s}.mfui-preloader_color_white .mfui-preloader__item:before{-webkit-animation:scaling 1s linear infinite;animation:scaling 1s linear infinite;background-color:var(--stcWhite)}.mfui-preloader_color_white .mfui-preloader__item_second:before{-webkit-animation-delay:.166s;animation-delay:.166s}.mfui-preloader_color_white .mfui-preloader__item_third:before{-webkit-animation-delay:.33s;animation-delay:.33s}.mfui-preloader_disable-animate .mfui-preloader__item:before{-webkit-animation:none;animation:none}@-webkit-keyframes scaling{0%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(1.4);transform:scale(1.4)}66%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scaling{0%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(1.4);transform:scale(1.4)}66%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes opacityScaling{0%{opacity:.35;-webkit-transform:scale(1);transform:scale(1)}33%{opacity:.65;-webkit-transform:scale(1.4);transform:scale(1.4)}66%{opacity:.35;-webkit-transform:scale(1);transform:scale(1)}to{opacity:.35;-webkit-transform:scale(1);transform:scale(1)}}@keyframes opacityScaling{0%{opacity:.35;-webkit-transform:scale(1);transform:scale(1)}33%{opacity:.65;-webkit-transform:scale(1.4);transform:scale(1.4)}66%{opacity:.35;-webkit-transform:scale(1);transform:scale(1)}to{opacity:.35;-webkit-transform:scale(1);transform:scale(1)}}

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import './Preloader.scss';
+export declare const PreloaderColors: {
+    readonly DEFAULT: "default";
+    readonly WHITE: "white";
+    readonly BLACK: "black";
+};
+export type PreloaderColorsType = (typeof PreloaderColors)[keyof typeof PreloaderColors];
+export declare const PreloaderSizes: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+};
+export type PreloaderSizesType = (typeof PreloaderSizes)[keyof typeof PreloaderSizes];
+export interface IPreloaderProps {
+    /** Задержка отрисовки  */
+    delay?: boolean;
+    /** Цветовая тема */
+    color?: PreloaderColorsType;
+    /** Размер на всех разрешениях экрана */
+    sizeAll?: PreloaderSizesType;
+    /** Размер на разрешении экрана 1280+ */
+    sizeWide?: PreloaderSizesType;
+    /** Размер на разрешении экрана 1024+ */
+    sizeDesktop?: PreloaderSizesType;
+    /** Размер на разрешении экрана 768-1023 */
+    sizeTablet?: PreloaderSizesType;
+    /** Размер на разрешении экрана 0-767 */
+    sizeMobile?: PreloaderSizesType;
+    /** Отмена анимации  */
+    disableAnimate?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Preloader: React.FC<IPreloaderProps>;
+export default Preloader;

package/dist/es/components/Preloader/Preloader.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/web.timers.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Preloader.css";
+export var PreloaderColors = {
+  DEFAULT: 'default',
+  WHITE: 'white',
+  BLACK: 'black'
+};
+export var PreloaderSizes = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+var cn = cnCreate('mfui-preloader');
+var Preloader = function Preloader(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$sizeAll = _ref.sizeAll,
+    sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? true : _ref$delay,
+    _ref$disableAnimate = _ref.disableAnimate,
+    disableAnimate = _ref$disableAnimate === void 0 ? false : _ref$disableAnimate,
+    sizeWide = _ref.sizeWide,
+    sizeDesktop = _ref.sizeDesktop,
+    sizeTablet = _ref.sizeTablet,
+    sizeMobile = _ref.sizeMobile,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  var _React$useState = React.useState(!delay),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isShowed = _React$useState2[0],
+    setIsShowed = _React$useState2[1];
+  React.useEffect(function () {
+    if (isShowed) {
+      return undefined;
+    }
+    var timerId = setTimeout(function () {
+      setIsShowed(true);
+    }, 250);
+    return function () {
+      clearTimeout(timerId);
+    };
+  }, [isShowed]);
+  return isShowed ? /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      color: color,
+      'size-all': sizeAll,
+      'size-wide': sizeWide,
+      'size-desktop': sizeDesktop,
+      'size-tablet': sizeTablet,
+      'size-mobile': sizeMobile,
+      'disable-animate': disableAnimate
+    }, className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('item', {
+      first: true
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('item', {
+      second: true
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('item', {
+      third: true
+    })
+  })) : null;
+};
+export default Preloader;

package/dist/es/components/RadioButton/RadioButton.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-radio-button__input{left:0;opacity:0;position:absolute;top:0}.mfui-radio-button__label{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;outline:none;position:relative}.mfui-radio-button__custom-input,.mfui-radio-button__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-radio-button__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:6px;width:32px}.mfui-radio-button__custom-input:before{border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;content:"";display:block;height:22px;-webkit-transition:background-color,border-color;transition:background-color,border-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:22px}.mfui-radio-button__label_dark{color:var(--content)}.mfui-radio-button__label_dark .mfui-radio-button__custom-input:before{background-color:var(--base);border:2px solid var(--spbSky2)}.mfui-radio-button__input_dark:checked+.mfui-radio-button__custom-input:before{border:7px solid var(--brandGreen)}@media (hover:hover){.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before{border-color:var(--buttonHoverGreen)}}.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before{border-color:var(--buttonDown)}.mfui-radio-button__label_dark.mfui-radio-button__label_disabled{color:var(--spbSky3);cursor:default}.mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,.mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-radio-button__label_light{color:var(--stcWhite)}.mfui-radio-button__label_light .mfui-radio-button__custom-input:before{background-color:var(--stcWhite);border:2px solid var(--stcWhite)}.mfui-radio-button__input_light:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcBlack);border:7px solid var(--stcWhite)}@media (hover:hover){.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcBlack)}}.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcWhite)}.mfui-radio-button__label_light.mfui-radio-button__label_disabled{color:var(--stcWhite50);cursor:default}.mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,.mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcWhite);border-color:var(--spbSky2)}.mfui-radio-button__text_size_small{font-size:12px;line-height:18px}.mfui-radio-button__text_size_medium{font-size:15px;font-weight:400;line-height:24px}

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import './RadioButton.scss';
+export interface IRadioButtonProps {
+    /** Тема кнопки */
+    color?: 'dark' | 'light';
+    /** Значение */
+    value: string;
+    /** Имя для тега form */
+    name?: string;
+    /** Размер текста лейбла */
+    textSize?: 'small' | 'medium';
+    /** Отключение радио-кнопки */
+    disabled?: boolean;
+    /** Управление состоянием вкл/выкл компонента */
+    isChecked?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string | string[];
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        label?: string;
+        customInput?: string;
+        labelText?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        text?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: string) => void;
+    /** Ссылка на input */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare const RadioButton: React.FC<IRadioButtonProps>;
+export default RadioButton;

package/dist/es/components/RadioButton/RadioButton.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.function.name.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./RadioButton.css";
+var cn = cnCreate('mfui-radio-button');
+var RadioButton = function RadioButton(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'dark' : _ref$color,
+    isChecked = _ref.isChecked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    name = _ref.name,
+    value = _ref.value,
+    _ref$textSize = _ref.textSize,
+    textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+    children = _ref.children,
+    inputRef = _ref.inputRef,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange;
+  var checkedProp = isChecked !== undefined ? {
+    checked: isChecked
+  } : {};
+  var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
+  var handleChange = function handleChange() {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn(rootClassNames)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", {
+    className: cn('label', _defineProperty(_defineProperty({}, color, true), "disabled", disabled), classes.label)
+  }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input', _defineProperty({}, color, true)),
+    type: "radio",
+    name: name,
+    value: value,
+    onChange: handleChange,
+    disabled: disabled,
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('custom-input', classes.customInput)
+  }), children && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text', {
+      size: textSize
+    }, classes.labelText)
+  }), children)));
+};
+export default RadioButton;

package/dist/es/components/Row/Row.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './Row.scss';
+export interface IRowProps {
+    /** Заголовок */
+    title: string;
+    /** Дополнительный текст */
+    subTitle?: string;
+    /** Размер компонента */
+    size?: 'big' | 'small';
+    /** Визуальный эффект фона */
+    backgroundView?: 'shadow' | 'stroke';
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Фоновая заливка у иконки */
+    isIconColored?: boolean;
+    /** Показать стелку */
+    showArrow?: boolean;
+    /** Показать загрузку */
+    showLoader?: boolean;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут для открытия ссылки */
+    target?: '_self' | '_blank';
+    /** rel - аргумент тега <a> */
+    rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дочерние элементы: Badges, Switcher, Selector */
+    children?: React.ReactNode | string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        arrow?: Record<string, string>;
+        preloader?: Record<string, string>;
+    };
+}
+declare const Row: React.FC<IRowProps>;
+export default Row;

package/dist/es/components/Row/Row.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, convert, filterDataAttrs, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import Header from "../Header/Header";
+import Preloader from "../Preloader/Preloader";
+import "./Row.css";
+var ArrowRight = function ArrowRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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"
+  }));
+};
+var cn = cnCreate('mfui-row');
+var Row = function Row(_ref) {
+  var title = _ref.title,
+    subTitle = _ref.subTitle,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'big' : _ref$size,
+    _ref$backgroundView = _ref.backgroundView,
+    backgroundView = _ref$backgroundView === void 0 ? 'shadow' : _ref$backgroundView,
+    icon = _ref.icon,
+    _ref$isIconColored = _ref.isIconColored,
+    isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+    _ref$showLoader = _ref.showLoader,
+    showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+    href = _ref.href,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    rel = _ref.rel,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var ElementType = href ? 'a' : 'div';
+  var isActive = !showLoader && (!!href || !!onClick);
+  var isSmallSize = size === 'small';
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      size: size,
+      view: backgroundView,
+      pointer: isActive,
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
+    }, [className, classes.root]),
+    href: href,
+    target: href ? target : undefined,
+    rel: rel,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, !!icon && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container', {
+      colored: isIconColored
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('icon')
+  }, icon)), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes.title]),
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
+  }, convert(title, titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title', [classes.subtitle])
+  }, convert(subTitle, textConvertConfig))), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('children')
+  }, children), showArrow && /*#__PURE__*/React.createElement(ArrowRight, _extends({
+    className: cn('arrow')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)))) : /*#__PURE__*/React.createElement(Preloader, {
+    delay: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.preloader
+    }
+  })));
+};
+export default Row;

package/dist/es/components/ScrollBar/ScrollBar.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-scroll-bar_hide-all .simplebar-vertical{display:none}@media screen and (min-width:1280px){.mfui-scroll-bar_hide-wide .simplebar-vertical{display:none}}@media screen and (min-width:1024px){.mfui-scroll-bar_hide-desktop .simplebar-vertical{display:none}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-scroll-bar_hide-tablet .simplebar-vertical{display:none}}@media screen and (max-width:767px){.mfui-scroll-bar_hide-mobile .simplebar-vertical{display:none}}.mfui-scroll-bar_initial-hide .simplebar-vertical{display:none}.mfui-scroll-bar__init{position:relative}.mfui-scroll-bar__scroll-track{bottom:0;overflow:hidden;position:absolute;right:0}.mfui-scroll-bar .simplebar-horizontal{display:none}.mfui-scroll-bar .simplebar-vertical{-webkit-animation:hide-track .2s linear 3s forwards;animation:hide-track .2s linear 3s forwards;background-color:var(--spbSky1);border-radius:4px;opacity:1;top:0;width:6px}.mfui-scroll-bar_show-always .simplebar-vertical{-webkit-animation:none;animation:none}.mfui-scroll-bar__scroll-track-bar{min-height:10px;position:relative;z-index:1}.mfui-scroll-bar__scroll-track-bar:before{background:var(--spbSky2);border-radius:4px;content:"";display:block;height:100%;width:100%}.mfui-scroll-bar__init-scrolling .simplebar-vertical,.mfui-scroll-bar__scroll-track-hover.simplebar-vertical{-webkit-animation:none;animation:none;opacity:1}.mfui-scroll-bar__scroll-content:after,.mfui-scroll-bar__scroll-content:before{-webkit-box-sizing:border-box;box-sizing:border-box;content:" ";display:table}.mfui-scroll-bar__children-wrap{height:100%;padding-right:6px}@-webkit-keyframes hide-track{0%{opacity:1}to{opacity:0}}@keyframes hide-track{0%{opacity:1}to{opacity:0}}

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import 'simplebar-react/dist/simplebar.min.css';
+import './ScrollBar.scss';
+export interface IScrollBarProps {
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        init?: string;
+        scrollContent?: string;
+        childrenWrap?: string;
+    };
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        init?: Record<string, string>;
+    };
+    /** Максимальная высота контента */
+    maxHeight: number | null;
+    /** Не отображать на всех разрешениях экрана */
+    hideAll?: boolean;
+    /** Не отображать на разрешении экрана 1280+ */
+    hideWide?: boolean;
+    /** Не отображать на разрешении экрана 1024+ */
+    hideDesktop?: boolean;
+    /** Не отображать на разрешении экрана 768-1023 */
+    hideTablet?: boolean;
+    /** Не отображать на разрешении экрана 0-767 */
+    hideMobile?: boolean;
+    /** Отображать скролл всегда */
+    showAlways?: boolean;
+    /** Ref обработчик */
+    getScrollBar?: (node: HTMLElement) => void;
+    /** Ref обработчик для Scrollable element */
+    getScrollable?: (node: HTMLElement) => void;
+    children?: React.ReactNode;
+}
+declare const ScrollBar: React.FC<IScrollBarProps>;
+export default ScrollBar;

package/dist/es/components/ScrollBar/ScrollBar.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+import "./ScrollBar.css";
+var cn = cnCreate('mfui-scroll-bar');
+var ScrollBar = function ScrollBar(_ref) {
+  var classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    maxHeight = _ref.maxHeight,
+    hideAll = _ref.hideAll,
+    hideWide = _ref.hideWide,
+    hideDesktop = _ref.hideDesktop,
+    hideTablet = _ref.hideTablet,
+    hideMobile = _ref.hideMobile,
+    showAlways = _ref.showAlways,
+    getScrollBar = _ref.getScrollBar,
+    getScrollable = _ref.getScrollable,
+    children = _ref.children;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isInitialHide = _React$useState2[0],
+    setIsInitialHide = _React$useState2[1];
+  var scrollBarInitNode = React.useRef(null);
+  var scrollableNode = React.useRef(null);
+  var resizeObserver = React.useRef(null);
+  function handleGetScrollBarRef(node) {
+    if (!node) {
+      return;
+    }
+    var scrollInitEl = node.el;
+    scrollBarInitNode.current = scrollInitEl;
+    getScrollBar === null || getScrollBar === void 0 ? void 0 : getScrollBar(scrollInitEl);
+  }
+  function handleGetScrollableRef(node) {
+    scrollableNode.current = node;
+    getScrollable === null || getScrollable === void 0 ? void 0 : getScrollable(node);
+  }
+  var handleSetInitialHide = React.useCallback(function () {
+    if (!scrollBarInitNode.current || !maxHeight) {
+      setIsInitialHide(false);
+      return;
+    }
+    var scrollContentNode = scrollBarInitNode.current.querySelector(".".concat(cn('scroll-content')));
+    if (!scrollContentNode) {
+      setIsInitialHide(false);
+      return;
+    }
+    var scrollContentOffsetHeight = scrollContentNode.offsetHeight;
+    setIsInitialHide(scrollContentOffsetHeight <= maxHeight);
+  }, [maxHeight]);
+  React.useEffect(function () {
+    if (!scrollBarInitNode.current || !maxHeight) {
+      return undefined;
+    }
+    resizeObserver.current = new ResizeObserver(handleSetInitialHide);
+    resizeObserver.current.observe(scrollBarInitNode.current);
+    return function () {
+      if (resizeObserver.current && scrollBarInitNode.current) {
+        resizeObserver.current.unobserve(scrollBarInitNode.current);
+      }
+    };
+  }, [handleSetInitialHide, maxHeight]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'initial-hide': isInitialHide,
+      'hide-all': hideAll,
+      'hide-wide': hideWide,
+      'hide-desktop': hideDesktop,
+      'hide-tablet': hideTablet,
+      'hide-mobile': hideMobile,
+      'show-always': showAlways
+    }, [classes === null || classes === void 0 ? void 0 : classes.root])
+  }), /*#__PURE__*/React.createElement(SimpleBar, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.init), {
+    className: cn('init', [classes === null || classes === void 0 ? void 0 : classes.init]),
+    classNames: {
+      track: cn('scroll-track'),
+      scrollbar: cn('scroll-track-bar'),
+      hover: cn('scroll-track-hover'),
+      scrolling: cn('init-scrolling'),
+      contentEl: cn('scroll-content', [classes === null || classes === void 0 ? void 0 : classes.scrollContent])
+    },
+    style: {
+      maxHeight: "".concat(maxHeight, "px")
+    },
+    forceVisible: "y",
+    ref: handleGetScrollBarRef,
+    scrollableNodeProps: {
+      ref: handleGetScrollableRef
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('children-wrap', [classes === null || classes === void 0 ? void 0 : classes.childrenWrap])
+  }, children)));
+};
+export default ScrollBar;

package/dist/es/components/Search/Search.css

@@ -0,0 +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-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-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-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-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-search__field:focus::-moz-placeholder{opacity:1}.mfui-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-search__field:focus::placeholder{opacity:1}.mfui-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-search__field{width:90%}}.mfui-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-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-search__clear,.mfui-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-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px;scrollbar-width:none}.mfui-search__list-inner::-webkit-scrollbar{display:none}.mfui-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-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-search__popular-icon,.mfui-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-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-search__list-item_active,.mfui-search__popular-item_active{background-color:var(--spbSky0)}.mfui-search__item-title,.mfui-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-search__item-title:after,.mfui-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-search__list-item_active .mfui-search__item-title:after,.mfui-search__popular-item_active .mfui-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-search__highlighted-fragment{font-weight:700}.mfui-search__notice{font-size:12px;line-height:16px;margin-top:4px}.mfui-search__notice_error{color:var(--fury)}.mfui-search__notice_success{color:var(--brandGreen)}.mfui-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-search__list_not-found{cursor:default}.mfui-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-search_open{z-index:12}.mfui-search_open .mfui-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-search_type_textfield .mfui-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:12px;height:60px;padding:0 16px}.mfui-search_type_textfield .mfui-search__control:hover,.mfui-search_type_textfield .mfui-search__control_focused{border-color:var(--content)}.mfui-search_type_textfield .mfui-search__label{top:17px}.mfui-search_type_textfield .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_textfield .mfui-search__field_filled+.mfui-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-search_type_textfield .mfui-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-search_type_textfield .mfui-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-search_textarea .mfui-search__control{height:auto;min-height:60px}.mfui-search_textarea .mfui-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-search_textarea .mfui-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-search_textarea .mfui-search__icons{height:58px;margin-left:8px}.mfui-search_textarea .mfui-search__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-search__textarea-wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;width:100%}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_type_compact .mfui-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:24px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-search_type_compact .mfui-search__control:hover{background-color:var(--spbSky1)}.mfui-search_type_compact .mfui-search__field{height:100%;padding:8px 0 8px 12px}.mfui-search_type_compact .mfui-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-search_type_compact .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_compact .mfui-search__field_filled+.mfui-search__label{opacity:0}.mfui-search_type_compact .mfui-search__submit-icon{height:20px;width:20px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-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-search_type_compact .mfui-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear-icon:hover{fill:var(--content)}.mfui-search_type_compact .mfui-search__clear-icon:active{fill:var(--buttonDown)}.mfui-search_type_compact.mfui-search_open .mfui-search__control{background-color:var(--spbSky1)}.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon{fill:var(--content)}.mfui-search_disabled .mfui-search__control{cursor:default;pointer-events:none}.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_error .mfui-search__control{border-color:var(--fury)}.mfui-search_success .mfui-search__control{border-color:var(--brandGreen)}.mfui-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-search__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-search__resizer:active svg,.mfui-search__resizer:hover svg{stroke:var(--spbSky3)}