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

package/dist/es/components/ContentArea/ContentArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-content-area_background-color_transparent{background-color:transparent}.mfui-9-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-9-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-9-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-9-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-9-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-9-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-9-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-9-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-9-content-area__inner_background-color_transparent{background-color:transparent}.mfui-9-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-content-area_background-color_transparent{background-color:transparent}.mfui-9-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-9-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-9-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-9-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-9-content-area__inner_disable-indents_mobile-desktop-small,.mfui-9-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner_disable-indents_mobile-desktop-small{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-9-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-9-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-9-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-9-content-area__inner_background-color_transparent{background-color:transparent}.mfui-9-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}

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

@@ -14,6 +14,7 @@ export type BackgroundColorType = (typeof BACKGROUND_COLORS)[keyof typeof BACKGR
 declare const DisableIndents: {
     readonly MOBILE: "mobile";
     readonly MOBILE_TABLET: "mobile-tablet";
+    readonly MOBILE_DESKTOP_SMALL: "mobile-desktop-small";
     readonly TABLET_DESKTOP: "tablet-desktop";
     readonly ALL: "all";
 };
@@ -22,7 +23,7 @@ declare const Indents: {
 };
 type DisableIndentsType = (typeof DisableIndents)[keyof typeof DisableIndents];
 type IndentsType = (typeof Indents)[keyof typeof Indents];
-export interface IConrentAreaProps {
+export interface IContentAreaProps {
     /** Фоновый цвет внешнего контейнера */
     outerBackgroundColor?: BackgroundColorType;
     /** Фоновый цвет внутреннего контейнера */
@@ -45,5 +46,5 @@ export interface IConrentAreaProps {
     };
     children: React.ReactNode;
 }
-declare const ContentArea: React.FC<IConrentAreaProps>;
+declare const ContentArea: React.FC<IContentAreaProps>;
 export default ContentArea;

package/dist/es/components/ContentArea/ContentArea.js

@@ -14,8 +14,13 @@ var BACKGROUND_COLORS = {
 };
 var DisableIndents = {
   MOBILE: 'mobile',
+  // <= 767
   MOBILE_TABLET: 'mobile-tablet',
+  // <= 1023
+  MOBILE_DESKTOP_SMALL: 'mobile-desktop-small',
+  // <= 1279
   TABLET_DESKTOP: 'tablet-desktop',
+  // >= 768
   ALL: 'all'
 };
 var Indents = {

package/dist/es/components/ContentView/ContentView.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-9-content-view__image{display:inline-block;margin-bottom:24px;max-width:144px;vertical-align:top}.mfui-9-content-view__bg-image{background-repeat:no-repeat;background-size:100%;display:inline-block;height:144px;margin-bottom:24px;vertical-align:top;width:144px}.mfui-9-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-9-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-9-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-9-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-9-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-9-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-9-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-9-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-9-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-9-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-9-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-9-content-view__buttons{gap:12px;padding-top:32px}.mfui-9-content-view__buttons,.mfui-9-content-view_fullscreen{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-content-view_fullscreen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-9-content-view_fullscreen .mfui-9-content-view__content{margin-top:auto}.mfui-9-content-view_fullscreen .mfui-9-content-view__buttons{margin-top:auto;padding-bottom:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-9-content-view__image{display:inline-block;margin-bottom:24px;max-width:144px;vertical-align:top}.mfui-9-content-view__bg-image{background-repeat:no-repeat;background-size:100%;display:inline-block;height:144px;margin-bottom:24px;vertical-align:top;width:144px}.mfui-9-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-9-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-9-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-9-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-9-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-9-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-9-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-9-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-9-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-9-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-9-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-9-content-view__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:32px}@media screen and (min-width:768px){.mfui-9-content-view__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}.mfui-9-content-view__buttons_fullwidth{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width:768px){.mfui-9-content-view__link_indent{margin-left:16px}}.mfui-9-content-view_fullscreen{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-9-content-view_fullscreen .mfui-9-content-view__content{margin-top:auto}.mfui-9-content-view_fullscreen .mfui-9-content-view__buttons{margin-top:auto;padding-bottom:24px}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './ContentView.scss';
-type ElementType = {
+type ButtonParamsType = {
     /** Текст */
     text?: string;
     /** Атрибут href */
@@ -14,12 +14,19 @@ type ElementType = {
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };
+type LinkParamsType = ButtonParamsType & {
+    /** Тема */
+    theme?: 'green' | 'gray';
+    /** Тип */
+    type?: 'primary' | 'text';
+};
 export interface IContentViewProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         title?: string;
+        buttons?: string;
         button?: string;
         link?: string;
         bgImage?: string;
@@ -33,9 +40,13 @@ export interface IContentViewProps {
     /** Ссылка на изображение */
     src?: string;
     /** Параметры кнопки */
-    buttonParams?: ElementType;
-    /** Параметры ссылки */
-    linkParams?: ElementType;
+    buttonParams?: ButtonParamsType;
+    /** Параметры дополнительной кнопки (ссылки) */
+    linkParams?: LinkParamsType;
+    /** Растянуть кнопки на всю ширину контейнера */
+    isFullwidthButtons?: boolean;
+    /** Ограничить ширину кнопок на разрешении экрана 0-767 */
+    limitButtonsWidthOnMobile?: boolean;
     /** Полноэкранный режим */
     isFullscreen?: boolean;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/es/components/ContentView/ContentView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
 import { cnCreate, convert, filterDataAttrs, titleConvertConfig } from '@megafon/ui-helpers';
-import Button from "../Button/Button";
+import Button from "../Buttons/Button/Button";
 import "./ContentView.css";
 var cn = cnCreate('mfui-9-content-view');
 var ContentView = function ContentView(_ref) {
@@ -16,6 +16,10 @@ var ContentView = function ContentView(_ref) {
     src = _ref.src,
     buttonParams = _ref.buttonParams,
     linkParams = _ref.linkParams,
+    _ref$isFullwidthButto = _ref.isFullwidthButtons,
+    isFullwidthButtons = _ref$isFullwidthButto === void 0 ? false : _ref$isFullwidthButto,
+    _ref$limitButtonsWidt = _ref.limitButtonsWidthOnMobile,
+    limitButtonsWidthOnMobile = _ref$limitButtonsWidt === void 0 ? false : _ref$limitButtonsWidt,
     isFullscreen = _ref.isFullscreen,
     dataAttrs = _ref.dataAttrs,
     children = _ref.children;
@@ -39,24 +43,33 @@ var ContentView = function ContentView(_ref) {
   }, convert(title, titleConvertConfig)), !!children && /*#__PURE__*/React.createElement("div", {
     className: cn('text')
   }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
-    className: cn('buttons')
+    className: cn('buttons', {
+      fullwidth: isFullwidthButtons
+    }, [classes.buttons])
   }, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(Button, {
     className: cn('button', [classes.button]),
     href: buttonParams.href,
     target: buttonParams.target,
     disabled: buttonParams.disabled,
     showLoader: buttonParams.showLoader,
+    fullWidth: isFullwidthButtons,
+    fullWidthMobile: !limitButtonsWidthOnMobile,
     onClick: buttonParams.onClick,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
     }
   }, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(Button, {
-    className: cn('link', [classes.link]),
-    type: "text",
+    className: cn('link', {
+      indent: linkParams.type === 'text'
+    }, [classes.link]),
+    type: linkParams.type || 'primary',
+    theme: linkParams.theme || 'gray',
     href: linkParams.href,
     target: linkParams.target,
     disabled: linkParams.disabled,
     showLoader: linkParams.showLoader,
+    fullWidth: isFullwidthButtons,
+    fullWidthMobile: !limitButtonsWidthOnMobile,
     onClick: linkParams.onClick,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link

package/dist/es/components/Counter/Counter.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-counter{-webkit-box-pack:justify;-ms-flex-pack:justify;height:32px;justify-content:space-between;width:120px}.mfui-9-counter,.mfui-9-counter__btn{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-counter__btn{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-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;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);cursor:pointer;font-size:20px;height:100%;justify-content:center;margin:0;max-width:32px;outline:none;padding:0;text-decoration:none;width:100%;fill:var(--content);-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-counter__btn:hover{background-color:var(--spbSky0)}.mfui-9-counter__btn:disabled{background-color:var(--spbSky1);cursor:default}.mfui-9-counter__btn:disabled .mfui-9-counter__icon{fill:var(--spbSky2)}.mfui-9-counter__btn_left{border-bottom-left-radius:50px;border-top-left-radius:50px}.mfui-9-counter__btn_right{border-bottom-right-radius:50px;border-top-right-radius:50px}.mfui-9-counter__icon{display:block;height:20px;width:20px}.mfui-9-counter__input-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--spbSky2);border-top:1px solid var(--spbSky2);overflow:hidden}.mfui-9-counter__input,.mfui-9-counter__input-box{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mfui-9-counter__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--base);border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;margin:0;outline:none;overflow:auto;padding:0;text-align:center;width:100%}.mfui-9-counter_disabled .mfui-9-counter__btn{background-color:var(--spbSky1);cursor:default}.mfui-9-counter_disabled .mfui-9-counter__input{background-color:var(--spbSky1);color:var(--spbSky3);cursor:default}.mfui-9-counter_disabled .mfui-9-counter__icon{fill:var(--spbSky2)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-counter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:space-between;width:120px}.mfui-9-counter_size_small{height:32px}.mfui-9-counter_size_medium{height:40px}.mfui-9-counter_size_large{height:52px}.mfui-9-counter__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-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;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:20px;height:100%;justify-content:center;margin:0;max-width:32px;outline:none;padding:0;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;width:100%;fill:var(--content);-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-counter__btn: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-counter__btn:focus{outline:none}@media screen and (min-width:768px){.mfui-9-counter__btn:hover{background-color:var(--spbSky1)}}.mfui-9-counter__btn:disabled{cursor:default}.mfui-9-counter__btn:disabled .mfui-9-counter__icon{fill:var(--spbSky2)}.mfui-9-counter__btn:disabled:hover{background-color:var(--spbSky0)}.mfui-9-counter__btn_left{border-bottom-left-radius:16px;border-top-left-radius:16px}.mfui-9-counter__btn_left:focus-visible{z-index:1}.mfui-9-counter__btn_right{border-bottom-right-radius:16px;border-top-right-radius:16px}.mfui-9-counter__icon{display:block;height:20px;width:20px}.mfui-9-counter__input-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mfui-9-counter__input,.mfui-9-counter__input-box{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mfui-9-counter__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;margin:0;outline:none;overflow:auto;padding:0;text-align:center;width:100%}.mfui-9-counter_disabled .mfui-9-counter__btn{cursor:default}.mfui-9-counter_disabled .mfui-9-counter__input{color:var(--spbSky3);cursor:default}.mfui-9-counter_disabled .mfui-9-counter__icon{fill:var(--spbSky2)}

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

@@ -8,6 +8,8 @@ export interface ICounterProps {
         plus?: Record<string, string>;
         input?: Record<string, string>;
     };
+    /** Размер компонента */
+    size?: 'small' | 'medium' | 'large';
     /** Переводит компонент в контролируемое состояние */
     isControlled?: boolean;
     /** Внешнее значение для контролируемого компонента */

package/dist/es/components/Counter/Counter.js

@@ -10,19 +10,21 @@ var IconMinus = function IconMinus(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M5 9h10v2H5z"
+    d: "M14 9a1 1 0 110 2H6a1 1 0 110-2h8z"
   }));
 };
 var IconPlus = function IconPlus(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11 5H9v4H5v2h4v4h2v-4h4V9h-4V5z"
+    d: "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
   }));
 };
 var cn = cnCreate('mfui-9-counter');
 var Counter = function Counter(_ref) {
   var dataAttrs = _ref.dataAttrs,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$isControlled = _ref.isControlled,
     isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
     _ref$value = _ref.value,
@@ -88,7 +90,8 @@ var Counter = function Counter(_ref) {
   }, [handleValueChange, min, max]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
-      disabled: disabled
+      disabled: disabled,
+      size: size
     }, [className, classes.root])
   }), /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.minus), {
     className: cn('btn', {

package/dist/es/components/Dropdown/Dropdown.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-dropdown{background-color:var(--base);border-radius:16px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.08);left:0;opacity:0;padding:16px;pointer-events:none;position:absolute;right:0;top:calc(100% + 8px);-webkit-transform:translateY(-25px);transform:translateY(-25px);-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;z-index:1000}.mfui-9-dropdown_visible{opacity:1;pointer-events:auto;-webkit-transform:translateY(0);transform:translateY(0)}.mfui-9-dropdown_short .mfui-9-dropdown__list{max-height:200px}.mfui-9-dropdown__list{max-height:300px;overflow-y:auto;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-dropdown__list::-webkit-scrollbar{width:8px}.mfui-9-dropdown__item{border-radius:8px;color:var(--content);cursor:pointer;padding:12px 32px;-webkit-transition:background-color .2s;transition:background-color .2s}.mfui-9-dropdown__item:hover,.mfui-9-dropdown__item_hovered{background-color:var(--spbSky0)}.mfui-9-dropdown__item_active{color:var(--brandGreen);font-weight:500}.mfui-9-dropdown__item_paddings_small{padding:8px 12px}.mfui-9-dropdown__item_paddings_large{padding:16px 20px}.mfui-9-dropdown__empty{color:var(--spbSky3);padding:12px 16px;text-align:center}.mfui-9-dropdown_disabled{opacity:.5;pointer-events:none}
+h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-dropdown{background-color:var(--base);border-radius:16px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.08);left:0;opacity:0;padding:16px;pointer-events:none;position:absolute;right:0;top:calc(100% + 1px);-webkit-transform:translateY(-25px);transform:translateY(-25px);-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;z-index:1000}.mfui-9-dropdown_visible{opacity:1;pointer-events:auto;-webkit-transform:translateY(0);transform:translateY(0)}.mfui-9-dropdown_short .mfui-9-dropdown__list{max-height:200px}.mfui-9-dropdown__list{max-height:300px;overflow-y:auto;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-dropdown__list::-webkit-scrollbar{width:8px}.mfui-9-dropdown__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--content);cursor:pointer;padding:12px 32px;-webkit-transition:background-color .2s;transition:background-color .2s}.mfui-9-dropdown__item:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-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-dropdown__item:focus{outline:none}.mfui-9-dropdown__item:hover,.mfui-9-dropdown__item_hovered{background-color:var(--spbSky0)}.mfui-9-dropdown__item_active{font-weight:500}.mfui-9-dropdown__item_paddings_small{padding:8px 12px}.mfui-9-dropdown__item_paddings_large{padding:16px 20px}.mfui-9-dropdown__empty{color:var(--spbSky3);padding:12px 16px;text-align:center}.mfui-9-dropdown__header{overflow:hidden;width:100%}.mfui-9-dropdown_disabled{opacity:.5;pointer-events:none}

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

@@ -9,7 +9,7 @@ type ViewCallbackArguments = {
     isItemActive: boolean;
     filterValue?: string;
 };
-type DropdownItemsPaddingType = (typeof DropdownItemsPaddings)[keyof typeof DropdownItemsPaddings];
+export type DropdownItemsPaddingType = (typeof DropdownItemsPaddings)[keyof typeof DropdownItemsPaddings];
 export type DropdownItemType<T extends DropdownItemValueType> = {
     /** Заголовок элемента */
     title: string;
@@ -33,8 +33,12 @@ export interface IDropdownProps<T extends DropdownItemValueType> {
     isOpen?: boolean;
     /** Реф элемента, к которому привязывается дропдаун */
     targetRef: React.RefObject<HTMLElement>;
+    /** Индекс выделенного элемента */
+    hoveredIndex?: number;
     /** Текст при отсутствии элементов */
     emptyText?: string;
+    /** Контент, отображаемый в шапке дропдауна */
+    headerContent?: React.ReactNode;
     /** Отключение компонента */
     disabled?: boolean;
     /** Отображать короткий выпадающий список */
@@ -58,5 +62,5 @@ export interface IDropdownProps<T extends DropdownItemValueType> {
     /** Обработчик закрытия списка */
     onClose?: () => void;
 }
-declare const Dropdown: <T extends DropdownItemValueType>({ items, value, filterValue, isOpen, targetRef, emptyText, disabled, short, className, classes, dataAttrs, onItemClick, onClose, }: IDropdownProps<T>) => JSX.Element | null;
+declare const Dropdown: <T extends DropdownItemValueType>({ items, value, filterValue, isOpen, hoveredIndex, targetRef, emptyText, headerContent, disabled, short, className, classes, dataAttrs, onItemClick, onClose, }: IDropdownProps<T>) => JSX.Element | null;
 export default Dropdown;

package/dist/es/components/Dropdown/Dropdown.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "core-js/modules/es.array.find-index.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
@@ -17,9 +16,11 @@ var Dropdown = function Dropdown(_ref) {
     filterValue = _ref.filterValue,
     _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    hoveredIndex = _ref.hoveredIndex,
     targetRef = _ref.targetRef,
     _ref$emptyText = _ref.emptyText,
     emptyText = _ref$emptyText === void 0 ? 'Нет элементов' : _ref$emptyText,
+    headerContent = _ref.headerContent,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$short = _ref["short"],
@@ -30,14 +31,14 @@ var Dropdown = function Dropdown(_ref) {
     dataAttrs = _ref.dataAttrs,
     onItemClick = _ref.onItemClick,
     onClose = _ref.onClose;
-  var _React$useState = React.useState(-1),
+  var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    hoveredIndex = _React$useState2[0],
-    setHoveredIndex = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
+    isVisible = _React$useState2[0],
+    setIsVisible = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isVisible = _React$useState4[0],
-    setIsVisible = _React$useState4[1];
+    mouseOverIndex = _React$useState4[0],
+    setMouseOverIndex = _React$useState4[1];
   var dropdownRef = React.useRef(null);
   var handleOutsideClick = React.useCallback(function (event) {
     var target = event.target;
@@ -45,17 +46,9 @@ var Dropdown = function Dropdown(_ref) {
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
   }, [onClose, targetRef]);
-  var handleItemHover = function handleItemHover(index) {
-    return function () {
-      setHoveredIndex(index);
-    };
-  };
   React.useEffect(function () {
     if (isOpen) {
       document.addEventListener('mousedown', handleOutsideClick);
-      setHoveredIndex(items.findIndex(function (item) {
-        return item.value === value;
-      }));
       // Добавляем небольшую задержку перед показом для корректной анимации
       requestAnimationFrame(function () {
         setIsVisible(true);
@@ -63,6 +56,7 @@ var Dropdown = function Dropdown(_ref) {
     } else {
       document.removeEventListener('mousedown', handleOutsideClick);
       setIsVisible(false);
+      setMouseOverIndex(null);
     }
     return function () {
       document.removeEventListener('mousedown', handleOutsideClick);
@@ -80,9 +74,19 @@ var Dropdown = function Dropdown(_ref) {
     }
     return item.view;
   };
+  var handleKeyDown = React.useCallback(function (e, index) {
+    if (e.code === 'Enter') {
+      onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(index)(e);
+    }
+  }, [onItemClick]);
+  var handleItemMouseEnter = React.useCallback(function (index) {
+    return function () {
+      setMouseOverIndex(index);
+    };
+  }, []);
   var renderItem = function renderItem(item, index) {
     var isActive = item.value === value;
-    var isHovered = index === hoveredIndex;
+    var isHovered = index === (mouseOverIndex !== null && mouseOverIndex !== void 0 ? mouseOverIndex : hoveredIndex);
     return /*#__PURE__*/React.createElement("div", _extends({
       key: item.value
     }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1), {
@@ -92,25 +96,30 @@ var Dropdown = function Dropdown(_ref) {
         paddings: item.paddings
       }, [classes.item]),
       onClick: onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(index),
-      onMouseEnter: handleItemHover(index),
       role: "option",
       "aria-selected": isActive,
-      tabIndex: -1
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        return handleKeyDown(e, index);
+      },
+      onMouseEnter: handleItemMouseEnter(index)
     }), getItemContent(item, isActive));
   };
   if (!isOpen) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: dropdownRef,
     className: cn({
       visible: isVisible,
       disabled: disabled,
       "short": _short
     }, [className, classes.root]),
     role: "listbox",
-    tabIndex: 0,
-    ref: dropdownRef
-  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    tabIndex: -1
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!headerContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, headerContent), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
     className: cn('list', [classes.list])
   }), items.length > 0 ? items.map(renderItem) : /*#__PURE__*/React.createElement("div", {
     className: cn('empty')

package/dist/es/components/ErrorLoad/ErrorLoad.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-error-load{background:inherit}.mfui-9-error-load_cardinal_vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-9-error-load_cardinal_horizontal,.mfui-9-error-load_cardinal_vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-9-error-load_cardinal_horizontal{gap:8px;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-error-load__header{text-align:center}.mfui-9-error-load__text .mfui-9-error-load__caption_background_on-color,.mfui-9-error-load__text .mfui-9-error-load__header_background_on-color{color:var(--stcWhite)}.mfui-9-error-load__text .mfui-9-error-load__caption_background_on-base{color:var(--spbSky3)}.mfui-9-error-load__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.mfui-9-error-load__text_cardinal_vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-error-load{background:inherit}.mfui-9-error-load_cardinal_vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-9-error-load_cardinal_horizontal,.mfui-9-error-load_cardinal_vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-9-error-load_cardinal_horizontal{gap:8px;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-error-load_cardinal_horizontal .mfui-9-error-load__header{text-align:left}.mfui-9-error-load__header{text-align:center}.mfui-9-error-load__text .mfui-9-error-load__caption_background_on-color,.mfui-9-error-load__text .mfui-9-error-load__header_background_on-color{color:var(--stcWhite)}.mfui-9-error-load__text .mfui-9-error-load__caption_background_on-base{color:var(--spbSky3)}.mfui-9-error-load__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.mfui-9-error-load__text_cardinal_vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IButtonProps } from '../Button/Button';
+import { IButtonProps } from '../Buttons/Button/Button';
 import './ErrorLoad.scss';
 type ButtonProps = Pick<IButtonProps, 'disabled' | 'showLoader' | 'onClick'>;
 export interface IErrorLoadProps {

package/dist/es/components/ErrorLoad/ErrorLoad.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.big.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import Button from "../Button/Button";
+import Button from "../Buttons/Button/Button";
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import "./ErrorLoad.css";
@@ -10,9 +10,7 @@ var RefreshIcon24 = function RefreshIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M16.064 8C11.604 8 8 11.588 8 16s3.604 8 8.064 8c4.1 0 7.478-3.033 7.995-6.948l1.983.262C25.393 22.223 21.17 26 16.064 26 10.513 26 6 21.53 6 16S10.513 6 16.064 6c3.456 0 6.507 1.731 8.32 4.371l.704-2.345 1.915.575-1.419 4.726a1 1 0 01-1.228.675l-4.855-1.364.541-1.925 2.664.748A8.074 8.074 0 0016.064 8z"
+    d: "M15.698 5.172a11.6 11.6 0 019.24 4.562l.079-.83a1.547 1.547 0 013.083.285l-.353 3.797a2.323 2.323 0 01-2.526 2.098l-3.796-.352a1.549 1.549 0 01.286-3.083l.854.079a8.508 8.508 0 00-6.867-3.46c-4.703 0-8.493 3.776-8.493 8.406 0 4.63 3.79 8.405 8.493 8.405 3.787 0 6.989-2.452 8.086-5.828a1.549 1.549 0 012.946.957c-1.505 4.628-5.879 7.968-11.032 7.968-6.387 0-11.588-5.137-11.589-11.502 0-6.365 5.202-11.502 11.59-11.502z"
   }));
 };
 var cn = cnCreate('mfui-9-error-load');

package/dist/es/components/Link/Link.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-link{border-radius:8px}.mfui-9-link: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-link:focus{outline:none}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import './Link.scss';
 export interface ILinkProps {
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/Link/Link.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Link.css";
+var cn = cnCreate('mfui-9-link');
 var Link = function Link(_ref) {
   var target = _ref.target,
     href = _ref.href,
@@ -12,7 +14,7 @@ var Link = function Link(_ref) {
     children = _ref.children,
     dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("a", _extends({
-    className: className,
+    className: cn([className]),
     href: href,
     target: target,
     rel: rel,

package/dist/es/components/ListData/ListData.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-list-data{background-color:transparent;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:8px 16px 8px 12px;position:relative;text-decoration:none;-webkit-transition:background-color,opacity;transition:background-color,opacity;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-list-data,.mfui-9-list-data__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-list-data__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}.mfui-9-list-data__icon-container svg{fill:var(--content)}.mfui-9-list-data__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-9-list-data__icon-container_colored svg{fill:var(--brandGreen)}.mfui-9-list-data__icon{height:32px;min-width:32px;width:32px}.mfui-9-list-data__icon_small{height:20px;min-width:20px;width:20px}.mfui-9-list-data__header{display:grid;grid-template-columns:100%;margin-right:auto;padding-left:4px}.mfui-9-list-data__header_gap{padding-right:8px}.mfui-9-list-data__header_align{-ms-flex-item-align:end;align-self:flex-end}.mfui-9-list-data__title{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500;line-height:18px}.mfui-9-list-data__title-link{color:var(--content)}.mfui-9-list-data__sub-title{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-list-data__value-container{align-self:flex-start;display:grid;grid-template-columns:-webkit-min-content;grid-template-columns:min-content;padding-left:12px}.mfui-9-list-data__value{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:18px;max-width:110px}.mfui-9-list-data__value_color_green{color:var(--brandGreen)}.mfui-9-list-data__sub-value{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-list-data__action-icon{fill:var(--spbSky3)}.mfui-9-list-data__action-icon_active{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:fill .3s;transition:fill .3s}.mfui-9-list-data__action-icon_active:hover{fill:var(--content)}.mfui-9-list-data__children_event-none{pointer-events:none}.mfui-9-list-data_active:not(.mfui-9-list-data_disabled){border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-list-data_active:not(.mfui-9-list-data_disabled):hover{background-color:var(--spbSky0)}.mfui-9-list-data_disabled{opacity:.5}.mfui-9-list-data_disabled .mfui-9-list-data__title-link{pointer-events:none}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-list-data{border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px 12px 12px;position:relative;text-decoration:none;-webkit-transition:background-color,opacity,-webkit-box-shadow;transition:background-color,opacity,-webkit-box-shadow;transition:background-color,opacity,box-shadow;transition:background-color,opacity,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-list-data,.mfui-9-list-data__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-list-data__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;height:40px;justify-content:center;margin-right:8px;width:40px}.mfui-9-list-data__icon-container svg{fill:var(--content)}.mfui-9-list-data__icon-container_colored{background-color:var(--brandGreen20)}.mfui-9-list-data__icon-container_colored svg{fill:var(--brandGreen)}.mfui-9-list-data__icon{border-radius:8px;height:32px;min-width:32px;width:32px}.mfui-9-list-data__icon: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-list-data__icon:focus{outline:none}.mfui-9-list-data__icon_small{border-radius:8px;height:20px;min-width:20px;width:20px}.mfui-9-list-data__header{display:grid;grid-template-columns:100%;margin-right:auto;padding-left:4px}.mfui-9-list-data__header_gap{padding-right:8px}.mfui-9-list-data__header_align{-ms-flex-item-align:end;align-self:flex-end}.mfui-9-list-data__title{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500;line-height:18px}.mfui-9-list-data__title-link{color:var(--content)}.mfui-9-list-data__sub-title{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-list-data__value-container{align-self:flex-start;display:grid;grid-template-columns:-webkit-min-content;grid-template-columns:min-content;padding-left:12px}.mfui-9-list-data__value{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:18px;max-width:110px}.mfui-9-list-data__value_color_green{color:var(--brandGreen)}.mfui-9-list-data__sub-value{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-list-data__action-icon{fill:var(--spbSky3)}.mfui-9-list-data__action-icon_active{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:fill .3s;transition:fill .3s}.mfui-9-list-data__action-icon_active:hover{fill:var(--content)}.mfui-9-list-data__children{display:-webkit-box;display:-ms-flexbox;display:flex;gap:4px}.mfui-9-list-data__children_event-none{pointer-events:none}.mfui-9-list-data_active:not(.mfui-9-list-data_disabled){cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-list-data_active:not(.mfui-9-list-data_disabled):hover{background-color:var(--spbSky0)}.mfui-9-list-data_active:not(.mfui-9-list-data_disabled).mfui-9-list-data_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-list-data_active:not(.mfui-9-list-data_disabled).mfui-9-list-data_view_white:hover{background-color:var(--base);-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-list-data_disabled{opacity:.5}.mfui-9-list-data_disabled .mfui-9-list-data__title-link{pointer-events:none}.mfui-9-list-data_view_default{background-color:transparent}.mfui-9-list-data_view_gray{background-color:var(--spbSky0)}.mfui-9-list-data_view_gray .mfui-9-list-data__icon-container,.mfui-9-list-data_view_white{background-color:var(--base)}

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

@@ -16,6 +16,12 @@ declare const ValueColors: {
     readonly GREEN: "green";
 };
 export type ValueColorsType = (typeof ValueColors)[keyof typeof ValueColors];
+declare const BackgroundViewColors: {
+    readonly DEFAULT: "default";
+    readonly GRAY: "gray";
+    readonly WHITE: "white";
+};
+export type BackgroundViewColorsType = (typeof BackgroundViewColors)[keyof typeof BackgroundViewColors];
 declare const Actions: {
     readonly DELETE: "delete";
     readonly CONTROL: "control";
@@ -28,6 +34,8 @@ export interface IListDataProps {
     subTitle?: string;
     /** Значение */
     value?: string;
+    /** Визуальный эффект фона */
+    backgroundView?: BackgroundViewColorsType;
     /** Цвет */
     valueColor?: ValueColorsType;
     /** Дополнительное значение */
@@ -59,7 +67,7 @@ export interface IListDataProps {
         root?: Record<string, string>;
         actionIcon?: Record<string, string>;
     };
-    /** Дочерние элементы: Button, Selector */
+    /** Дочерние элементы: Button, Selector, Badge */
     children?: React.ReactNode;
 }
 declare const ListData: React.FC<IListDataProps>;

package/dist/es/components/ListData/ListData.js

@@ -9,24 +9,20 @@ var DeleteIcon = function DeleteIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 4h-3.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2H4v4h1l1 10h8l1-10h1V4zM5 5h3v-.4C8.2 3.7 9.1 3 10 3s1.8.7 2 1.6V5h3v2H5V5zm8 12H7l-.9-9H14l-1 9z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.009 14.31c-.137 1.75-.205 2.626-.78 3.158-.574.532-1.452.532-3.207.532H8.98c-1.755 0-2.633 0-3.208-.532-.574-.532-.642-1.407-.779-3.158l-.571-7.326H15.58l-.571 7.326zm-2.846-4.97a.499.499 0 00-.706 0l-1.388 1.391-1.386-1.39a.498.498 0 00-.706 0 .502.502 0 000 .709l1.386 1.39-1.396 1.4a.502.502 0 000 .709.498.498 0 00.706 0l1.396-1.401 1.398 1.4a.498.498 0 00.706 0 .502.502 0 000-.707l-1.398-1.401 1.388-1.391a.502.502 0 000-.708z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.006 4a1 1 0 010 2h-12a1 1 0 110-2h12zm-3.979-2c.551 0 .997.446.997.997H6.977c0-.55.446-.997.997-.997h4.053z"
   }));
 };
 var NothingIcon = function NothingIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("circle", {
-    cx: 21,
-    cy: 16,
-    r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 16,
-    cy: 16,
-    r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 11,
-    cy: 16,
-    r: 1.5
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28 16c0 6.627-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4s12 5.373 12 12zM9.6 17.6a1.6 1.6 0 100-3.2 1.6 1.6 0 000 3.2zm6.4 0a1.6 1.6 0 100-3.2 1.6 1.6 0 000 3.2zm6.4 0a1.6 1.6 0 100-3.2 1.6 1.6 0 000 3.2z"
   }));
 };
 var LINE_COUNT = 2;
@@ -34,6 +30,11 @@ var ValueColors = {
   DEFAULT: 'default',
   GREEN: 'green'
 };
+var BackgroundViewColors = {
+  DEFAULT: 'default',
+  GRAY: 'gray',
+  WHITE: 'white'
+};
 var Actions = {
   DELETE: 'delete',
   CONTROL: 'control'
@@ -43,6 +44,8 @@ var ListData = function ListData(_ref) {
   var title = _ref.title,
     subTitle = _ref.subTitle,
     value = _ref.value,
+    _ref$backgroundView = _ref.backgroundView,
+    backgroundView = _ref$backgroundView === void 0 ? 'default' : _ref$backgroundView,
     valueColor = _ref.valueColor,
     subValue = _ref.subValue,
     icon = _ref.icon,
@@ -133,7 +136,9 @@ var ListData = function ListData(_ref) {
           small: isDelete
         })
       }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actionIcon), {
-        onClick: handleAction
+        onClick: handleAction,
+        tabIndex: disabled ? -1 : 0,
+        role: "button"
       }), /*#__PURE__*/React.createElement(ActionIcon, {
         className: cn('action-icon', {
           active: !disabled
@@ -145,6 +150,7 @@ var ListData = function ListData(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
+      view: backgroundView,
       disabled: disabled
     }, [className, classes.root]),
     onClick: handleClick

package/dist/es/components/ListData/components/ListDataSortable.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-list-data-sortable{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-list-data-sortable__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:12px;justify-content:space-between}.mfui-9-list-data-sortable__item{padding-right:0}.mfui-9-list-data-sortable__control{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;justify-content:center;margin:12px 16px 12px 8px}.mfui-9-list-data-sortable__icon{height:32px;width:32px;fill:var(--spbSky2)}.mfui-9-list-data-sortable_gap_small{padding:2px 0}.mfui-9-list-data-sortable_gap_medium{padding:4px 0}.mfui-9-list-data-sortable_gap_large{padding:6px 0}.mfui-9-list-data-sortable_dragging{opacity:0}.mfui-9-list-data-sortable_drag-overlay .mfui-9-list-data-sortable__wrapper{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;background-color:var(--spbSky0)}.mfui-9-list-data-sortable_activator_cell:not(.mfui-9-list-data-sortable_disabled){cursor:-webkit-grab;cursor:grab}.mfui-9-list-data-sortable_activator_cell:not(.mfui-9-list-data-sortable_disabled).mfui-9-list-data-sortable_drag-overlay{cursor:-webkit-grabbing;cursor:grabbing}.mfui-9-list-data-sortable_activator_control:not(.mfui-9-list-data-sortable_disabled) .mfui-9-list-data-sortable__control{cursor:-webkit-grab;cursor:grab}.mfui-9-list-data-sortable_activator_control:not(.mfui-9-list-data-sortable_disabled).mfui-9-list-data-sortable_drag-overlay .mfui-9-list-data-sortable__control{cursor:-webkit-grabbing;cursor:grabbing}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-list-data-sortable{border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-list-data-sortable:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-6px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-list-data-sortable:focus{outline:none}.mfui-9-list-data-sortable__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:12px;justify-content:space-between}.mfui-9-list-data-sortable__item{padding-right:0}.mfui-9-list-data-sortable__control{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;border-radius:8px;justify-content:center;margin:12px 16px 12px 8px}.mfui-9-list-data-sortable__control: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-list-data-sortable__control:focus{outline:none}.mfui-9-list-data-sortable__icon{height:32px;width:32px;fill:var(--spbSky2)}.mfui-9-list-data-sortable_gap_small{padding:2px 0}.mfui-9-list-data-sortable_gap_medium{padding:4px 0}.mfui-9-list-data-sortable_gap_large{padding:6px 0}.mfui-9-list-data-sortable_dragging{opacity:0}.mfui-9-list-data-sortable_drag-overlay .mfui-9-list-data-sortable__wrapper{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;background-color:var(--spbSky0)}.mfui-9-list-data-sortable_activator_cell:not(.mfui-9-list-data-sortable_disabled){cursor:-webkit-grab;cursor:grab}.mfui-9-list-data-sortable_activator_cell:not(.mfui-9-list-data-sortable_disabled).mfui-9-list-data-sortable_drag-overlay{cursor:-webkit-grabbing;cursor:grabbing}.mfui-9-list-data-sortable_activator_control:not(.mfui-9-list-data-sortable_disabled) .mfui-9-list-data-sortable__control{cursor:-webkit-grab;cursor:grab}.mfui-9-list-data-sortable_activator_control:not(.mfui-9-list-data-sortable_disabled).mfui-9-list-data-sortable_drag-overlay .mfui-9-list-data-sortable__control{cursor:-webkit-grabbing;cursor:grabbing}

package/dist/es/components/ListData/components/ListDataSortable.js

@@ -12,9 +12,7 @@ var DragIcon = function DragIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M24 14H8v-2h16v2zm0 6H8v-2h16v2z"
+    d: "M22.4 17.799a1.6 1.6 0 110 3.199H9.6a1.6 1.6 0 110-3.2h12.8zm0-6.797a1.6 1.6 0 110 3.2H9.6a1.6 1.6 0 110-3.2h12.8z"
   }));
 };
 export var ActivatorNodes = {

package/dist/es/components/Modal/Modal.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:0}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0;-ms-touch-action:none;touch-action:none}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden;-ms-touch-action:pan-y;touch-action:pan-y}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}