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

package/dist/es/components/Checkbox/Checkbox.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-checkbox_bottom-margin{margin-bottom:12px}.mfui-9-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-9-checkbox_single .mfui-9-checkbox__inner{padding-left:32px}.mfui-9-checkbox__label{cursor:pointer;display:inline}.mfui-9-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-9-checkbox__custom-input:focus{outline:none}.mfui-9-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{border:none}.mfui-9-checkbox_checked .mfui-9-checkbox__icon{opacity:1}.mfui-9-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-9-checkbox_font-size_regular .mfui-9-checkbox__inner{padding-top:3px}.mfui-9-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-9-checkbox_font-size_small .mfui-9-checkbox__inner{padding-top:6px}.mfui-9-checkbox_color_dark .mfui-9-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_light{color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-checkbox_disabled .mfui-9-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-checkbox_disabled .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_disabled.mfui-9-checkbox_color_light .mfui-9-checkbox__label{color:var(--stcWhite50)}.mfui-9-checkbox_checked.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-9-checkbox_error .mfui-9-checkbox__custom-input{border-color:var(--fury)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-checkbox_bottom-margin{margin-bottom:12px}.mfui-9-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-9-checkbox_single .mfui-9-checkbox__inner{padding-left:32px}.mfui-9-checkbox__label{cursor:pointer;display:inline}.mfui-9-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-9-checkbox__custom-input: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-checkbox__custom-input:focus{outline:none}.mfui-9-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{border:none}.mfui-9-checkbox_checked .mfui-9-checkbox__icon{opacity:1}.mfui-9-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-9-checkbox_font-size_regular .mfui-9-checkbox__inner{padding-top:3px}.mfui-9-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-9-checkbox_font-size_small .mfui-9-checkbox__inner{padding-top:6px}.mfui-9-checkbox_color_dark .mfui-9-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_light{color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-checkbox_disabled .mfui-9-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-checkbox_disabled .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_disabled.mfui-9-checkbox_color_light .mfui-9-checkbox__label{color:var(--stcWhite50)}.mfui-9-checkbox_checked.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-9-checkbox_error .mfui-9-checkbox__custom-input{border-color:var(--fury)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}

package/dist/es/components/Checkbox/Checkbox.js

@@ -8,7 +8,7 @@ var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
+    d: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
   }));
 };
 var CHANGE_KEY = 'change';
@@ -72,9 +72,10 @@ var Checkbox = function Checkbox(_ref) {
     onChange: handleChange,
     disabled: disabled
   })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     role: "checkbox",
     "aria-checked": isChecked,
+    "aria-disabled": disabled,
     className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
     onKeyDown: handleChange
   }), /*#__PURE__*/React.createElement(CheckedIcon, {

package/dist/es/components/Chips/Chips/Chip.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip: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-chip:focus{outline:none}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_theme_gray{background-color:var(--spbSky1)}.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_disabled.mfui-9-chip_theme_gray,.mfui-9-chip_disabled.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky1)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}

package/dist/es/components/Chips/Chips/Chip.d.ts

@@ -6,6 +6,11 @@ export declare const ChipColors: {
     readonly BLACK: "black";
 };
 export type ChipColorsType = (typeof ChipColors)[keyof typeof ChipColors];
+export declare const ChipThemes: {
+    readonly WHITE: "white";
+    readonly GRAY: "gray";
+};
+export type ChipsThemeType = (typeof ChipThemes)[keyof typeof ChipThemes];
 export declare const ChipArrow: {
     readonly UP: "up";
     readonly DOWN: "down";
@@ -16,8 +21,10 @@ export interface IChipProps {
     id: ChipIdType;
     /** Заголовок */
     title?: string;
-    /** Набор цветов для компонента */
+    /** Цвет активного элемента компонента */
     color?: ChipColorsType;
+    /** Цвета неактивных элементов компонента */
+    theme?: ChipsThemeType;
     /** Отображение в отмеченном (зажатом) состоянии */
     checked?: boolean;
     /** Отключенное состояние */
@@ -41,6 +48,7 @@ export interface IChipProps {
         inner?: string;
         icon?: string;
         counter?: string;
+        arrow?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Chips/Chips/Chip.js

@@ -6,24 +6,24 @@ var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M6 8h8l-4 5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
   }));
 };
 var ArrowUp = function ArrowUp(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M14 12H6l4-5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M9.535 8.202a.609.609 0 01.907 0l2.371 2.547c.41.44.1 1.251-.476 1.251H7.658c-.576 0-.879-.811-.47-1.25l2.347-2.548z"
   }));
 };
 export var ChipColors = {
   DEFAULT: 'default',
   BLACK: 'black'
 };
+export var ChipThemes = {
+  WHITE: 'white',
+  GRAY: 'gray'
+};
 export var ChipArrow = {
   UP: 'up',
   DOWN: 'down'
@@ -34,6 +34,8 @@ var Chip = function Chip(_ref) {
     title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'white' : _ref$theme,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     _ref$disabled = _ref.disabled,
@@ -56,6 +58,7 @@ var Chip = function Chip(_ref) {
     type: "button",
     className: cn({
       color: color,
+      theme: theme,
       checked: checked,
       disabled: disabled,
       'with-icon': !!icon
@@ -64,6 +67,8 @@ var Chip = function Chip(_ref) {
     disabled: disabled,
     onClick: handleClick,
     ref: rootRef
+  }, checked && {
+    tabIndex: -1
   }), !!icon && /*#__PURE__*/React.createElement("span", _extends({
     className: cn('icon', [classes.icon])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
@@ -71,7 +76,7 @@ var Chip = function Chip(_ref) {
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children || title), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
     className: cn('counter', [classes.counter])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.counter)), counterValue), !!arrow && /*#__PURE__*/React.createElement("div", _extends({
-    className: cn('icon-arrow')
+    className: cn('icon-arrow', [classes.arrow])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 export default Chip;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from './Chip';
+import { DropdownItemsPaddingType } from '../../Dropdown/Dropdown';
+import { ChipColorsType, ChipIdType, IChipProps, ChipsThemeType } from './Chip';
 import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
@@ -8,6 +9,8 @@ export interface IChipsProps {
     value?: ChipIdType;
     /** Цвет активного элемента */
     color?: ChipColorsType;
+    /** Цвет неактивных элементов */
+    theme?: ChipsThemeType;
     /** Горизонтальное выравнивание */
     align?: 'left' | 'center';
     /** Переводит компонент в контролируемое состояние */
@@ -24,6 +27,10 @@ export interface IChipsProps {
     visibleItemsCountWide?: number;
     /** Название дополнительной кнопки */
     moreTitle?: string;
+    /** Попап выпадающего списка короче в высоту */
+    isDropdownShort?: boolean;
+    /** Отступы элементов списка выпадающего списка */
+    dropdownPaddings?: DropdownItemsPaddingType;
     /** Обработчик изменения значения */
     onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
@@ -32,13 +39,21 @@ export interface IChipsProps {
     classes?: {
         root?: string;
         dropdown?: string;
+        dropdownPopup?: string;
         dropdownList?: string;
+        dropdownItem?: string;
+        scroll?: string;
+        scrollInner?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         dropdown?: Record<string, string>;
+        dropdownPopup?: Record<string, string>;
         dropdownList?: Record<string, string>;
+        dropdownItem?: Record<string, string>;
+        scroll?: Record<string, string>;
+        scrollInner?: Record<string, string>;
     };
 }
 declare const Chips: React.FC<IChipsProps>;

package/dist/es/components/Chips/Chips/Chips.js

@@ -29,8 +29,13 @@ var Chips = function Chips(_ref) {
     value = _ref.value,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'white' : _ref$theme,
     _ref$moreTitle = _ref.moreTitle,
     moreTitle = _ref$moreTitle === void 0 ? 'Еще' : _ref$moreTitle,
+    _ref$isDropdownShort = _ref.isDropdownShort,
+    isDropdownShort = _ref$isDropdownShort === void 0 ? false : _ref$isDropdownShort,
+    dropdownPaddings = _ref.dropdownPaddings,
     visibleItemsCountAll = _ref.visibleItemsCountAll,
     visibleItemsCountTablet = _ref.visibleItemsCountTablet,
     visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
@@ -76,9 +81,18 @@ var Chips = function Chips(_ref) {
   var renderItems = function renderItems() {
     if (isScrollableMode) {
       return /*#__PURE__*/React.createElement(ChipsScrollPanel, {
+        classes: {
+          root: classes.scroll,
+          inner: classes.scrollInner
+        },
+        dataAttrs: {
+          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scroll,
+          inner: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scrollInner
+        },
         value: selectedId,
         items: visibleItems,
         color: color,
+        theme: theme,
         onClick: handleClick
       });
     }
@@ -91,6 +105,7 @@ var Chips = function Chips(_ref) {
         id: id,
         checked: id === selectedId,
         color: color,
+        theme: theme,
         onClick: handleClick
       }, rest), !!children && children);
     });
@@ -137,19 +152,26 @@ var Chips = function Chips(_ref) {
       align: align
     }, [className, classes.root])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderItems(), !!hiddenItems && /*#__PURE__*/React.createElement(ChipsDropdown, {
-    value: selectedId,
     items: hiddenItems,
-    moreTitle: moreTitle,
     color: color,
-    onClick: handleClick,
+    theme: theme,
+    moreTitle: moreTitle,
+    "short": isDropdownShort,
+    value: selectedId,
+    paddings: dropdownPaddings,
     classes: {
       root: classes.dropdown,
-      list: classes.dropdownList
+      popup: classes.dropdownPopup,
+      list: classes.dropdownList,
+      item: classes.dropdownItem
     },
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdown,
-      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList
-    }
+      popup: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownPopup,
+      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList,
+      item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownItem
+    },
+    onClick: handleClick
   }));
 };
 export default Chips;

package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.mfui-9-chips-dropdown__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;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:block;left:0;position:absolute;top:100%;z-index:100}.mfui-9-chips-dropdown__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:320px;max-width:256px;overflow-wrap:normal;overflow-y:auto;padding:16px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar{width:16px}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--spbSky2);border:6px solid transparent;border-radius:16px}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar-thumb:hover{background-color:var(--spbSky3)}.mfui-9-chips-dropdown__list-item{background-color:transparent;border-radius:12px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;padding:12px 32px}.mfui-9-chips-dropdown__list-item:hover{background-color:var(--spbSky0)}.mfui-9-chips-dropdown__list-item_with-icon{padding-left:16px;padding-right:16px}.mfui-9-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-9-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.mfui-9-chips-dropdown__arrow{-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s}.mfui-9-chips-dropdown__arrow_open{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-chips-dropdown__dropdown{max-width:256px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mfui-9-chips-dropdown__list-item{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-9-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}

package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.d.ts

@@ -1,20 +1,28 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import { DropdownItemsPaddingType } from '../../../../Dropdown/Dropdown';
+import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
-    moreTitle: string;
-    value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
-    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    theme: ChipsThemeType;
+    moreTitle: string;
+    short: boolean;
+    value?: ChipIdType;
+    paddings?: DropdownItemsPaddingType;
     classes?: {
         root?: string;
+        popup?: string;
         list?: string;
+        item?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;
+        popup?: Record<string, string>;
         list?: Record<string, string>;
+        item?: Record<string, string>;
     };
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
 }
 declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
 export default ChipsDropdown;

package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.js

@@ -5,25 +5,42 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.to-string.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Dropdown from "../../../../Dropdown/Dropdown";
 import Chip from "../../Chip";
 import "./ChipsDropdown.css";
 var cn = cnCreate('mfui-9-chips-dropdown');
 var ChipsDropdown = function ChipsDropdown(_ref) {
-  var color = _ref.color,
-    moreTitle = _ref.moreTitle,
-    _ref$items = _ref.items,
+  var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
+    color = _ref.color,
+    theme = _ref.theme,
+    moreTitle = _ref.moreTitle,
+    _short = _ref["short"],
     value = _ref.value,
-    onClick = _ref.onClick,
+    paddings = _ref.paddings,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    onClick = _ref.onClick;
+  var _a;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
     setIsDropdownOpen = _React$useState2[1];
   var dropdownRef = React.useRef(null);
-  var listRef = React.useRef(null);
+  var dropdownItems = items.map(function (item) {
+    var _a, _b, _c, _d;
+    return {
+      title: item.title || '',
+      value: item.id,
+      view: /*#__PURE__*/React.createElement("div", _extends({
+        className: cn('list-item', [item.className, (_a = item.classes) === null || _a === void 0 ? void 0 : _a.root])
+      }, filterDataAttrs((_b = item === null || item === void 0 ? void 0 : item.dataAttrs) === null || _b === void 0 ? void 0 : _b.root)), !!item.icon && /*#__PURE__*/React.createElement("span", _extends({
+        className: cn('icon', [(_c = item.classes) === null || _c === void 0 ? void 0 : _c.icon])
+      }, filterDataAttrs((_d = item === null || item === void 0 ? void 0 : item.dataAttrs) === null || _d === void 0 ? void 0 : _d.icon)), item.icon), item.children || item.title || ''),
+      paddings: paddings
+    };
+  });
   var currentItem = React.useMemo(function () {
     return items.find(function (item) {
       return item.id === value;
@@ -32,61 +49,52 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
       children: moreTitle
     };
   }, [items, value, moreTitle]);
-  var handleOutsideClick = React.useCallback(function (event) {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsDropdownOpen(false);
-    }
-  }, []);
   var handleOpenItemList = function handleOpenItemList() {
     setIsDropdownOpen(true);
-    document.addEventListener('mousedown', handleOutsideClick);
   };
-  var handleItemClick = React.useCallback(function (item) {
+  var handleDropdownItemClick = React.useCallback(function (index) {
     return function (e) {
       e.persist();
       setIsDropdownOpen(false);
-      onClick(e, item.id);
+      onClick(e, items[index].id);
     };
-  }, [onClick]);
-  React.useEffect(function () {
-    if (!isDropdownOpen) {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    }
-  }, [handleOutsideClick, isDropdownOpen]);
-  React.useEffect(function () {
-    return function () {
-      return document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  }, [handleOutsideClick]);
+  }, [items, onClick]);
+  var handleDropdownClose = function handleDropdownClose() {
+    setIsDropdownOpen(false);
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn([classes.root]),
     ref: dropdownRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Chip, _extends({}, currentItem, {
     className: cn('button', [currentItem.className]),
+    classes: _extends(_extends({}, currentItem.classes), {
+      arrow: cn('arrow', {
+        open: isDropdownOpen
+      }, [(_a = currentItem.classes) === null || _a === void 0 ? void 0 : _a.arrow])
+    }),
     color: color,
+    theme: theme,
     checked: !!currentItem.id,
-    arrow: isDropdownOpen ? 'up' : 'down',
+    arrow: "down",
     onClick: handleOpenItemList
-  })), isDropdownOpen && /*#__PURE__*/React.createElement("div", _extends({
-    className: cn('list', [classes.list]),
-    ref: listRef
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list)), /*#__PURE__*/React.createElement("div", {
-    className: cn('list-inner')
-  }, items.map(function (item, key) {
-    var _a, _b;
-    var children = item.children,
-      title = item.title,
-      icon = item.icon;
-    return /*#__PURE__*/React.createElement("div", _extends({
-      key: key,
-      className: cn('list-item', {
-        'with-icon': !!icon
-      }, [item.className, (_a = item.classes) === null || _a === void 0 ? void 0 : _a.root]),
-      onClick: handleItemClick(item),
-      onKeyDown: handleItemClick(item)
-    }, filterDataAttrs((_b = item === null || item === void 0 ? void 0 : item.dataAttrs) === null || _b === void 0 ? void 0 : _b.root)), !!icon && /*#__PURE__*/React.createElement("span", {
-      className: cn('icon')
-    }, icon), children || title);
-  }))));
+  })), /*#__PURE__*/React.createElement(Dropdown, {
+    items: dropdownItems,
+    value: value,
+    isOpen: isDropdownOpen,
+    targetRef: dropdownRef,
+    "short": _short,
+    onItemClick: handleDropdownItemClick,
+    onClose: handleDropdownClose,
+    classes: {
+      root: cn('dropdown', [classes.popup]),
+      list: classes.list,
+      item: classes.item
+    },
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popup,
+      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list,
+      item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item
+    }
+  }));
 };
 export default ChipsDropdown;

package/dist/es/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.d.ts

@@ -1,10 +1,19 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
 import './ChipsScrollPanel.scss';
 export interface IChipsScrollPanelProps {
+    classes?: {
+        root?: string;
+        inner?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
     value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
+    theme: ChipsThemeType;
     onClick: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
 }
 declare const ChipsScrollPanel: React.FC<IChipsScrollPanelProps>;

package/dist/es/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.js

@@ -12,15 +12,19 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import Chip from "../../Chip";
 import "./ChipsScrollPanel.css";
 var HALF_DIVIDER = 2;
 var cn = cnCreate('mfui-9-chips-scroll-panel');
 var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
-  var value = _ref.value,
+  var _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    value = _ref.value,
     items = _ref.items,
     color = _ref.color,
+    theme = _ref.theme,
     onClick = _ref.onClick;
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -57,13 +61,13 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
       setCurrentValue(value);
     }
   }, [value, currentValue, scrollToActiveItem]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(),
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([classes.root]),
     ref: containerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('inner'),
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('inner', [classes.inner]),
     tabIndex: -1
-  }, items.map(function (_a) {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), items.map(function (_a) {
     var id = _a.id,
       children = _a.children,
       rest = __rest(_a, ["id", "children"]);
@@ -75,6 +79,7 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
       id: id,
       checked: checked,
       color: color,
+      theme: theme,
       onClick: handleClick,
       rootRef: checked ? checkedItemRef : null
     }), children));

package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:11px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip-suggest{padding:7px 12px}}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;margin-right:6px;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_with-icon{padding-left:12px}@media screen and (max-width:767px){.mfui-9-chip-suggest_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest: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-chip-suggest:focus{outline:none}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_size_medium{padding:4px 8px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium{padding:8px 12px}}.mfui-9-chip-suggest_size_medium .mfui-9-chip-suggest__icon{margin-right:4px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium .mfui-9-chip-suggest__icon{margin-right:6px}}.mfui-9-chip-suggest_size_medium.mfui-9-chip-suggest_with-icon{padding-right:12px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium.mfui-9-chip-suggest_with-icon{padding-right:20px}}.mfui-9-chip-suggest_size_small{padding:7px 8px}@media screen and (max-width:767px){.mfui-9-chip-suggest_size_small{font-size:12px;line-height:18px}}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_small{padding:4px 8px}}.mfui-9-chip-suggest_size_small .mfui-9-chip-suggest__icon{margin-right:4px}.mfui-9-chip-suggest_size_small.mfui-9-chip-suggest_with-icon{padding-right:12px}

package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.d.ts

@@ -6,6 +6,11 @@ export declare const ChipSuggestThemes: {
     readonly GRAY: "gray";
 };
 export type ChipSuggestThemesType = (typeof ChipSuggestThemes)[keyof typeof ChipSuggestThemes];
+export declare const ChipSuggestSize: {
+    readonly MEDIUM: "medium";
+    readonly SMALL: "small";
+};
+export type ChipSuggestSizeType = (typeof ChipSuggestSize)[keyof typeof ChipSuggestSize];
 export interface IChipSuggestProps {
     /** Идентификатор */
     id: ChipSuggestIdType;
@@ -13,6 +18,8 @@ export interface IChipSuggestProps {
     title?: string;
     /** Цвет компонента */
     theme?: ChipSuggestThemesType;
+    /** Размер компонента */
+    size?: ChipSuggestSizeType;
     /** Иконка */
     icon?: JSX.Element;
     /** Дочерние элементы */

package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.js

@@ -6,12 +6,18 @@ export var ChipSuggestThemes = {
   WHITE: 'white',
   GRAY: 'gray'
 };
+export var ChipSuggestSize = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
 var cn = cnCreate('mfui-9-chip-suggest');
 var ChipSuggest = function ChipSuggest(_ref) {
   var id = _ref.id,
     title = _ref.title,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'white' : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     icon = _ref.icon,
     onClick = _ref.onClick,
     children = _ref.children,
@@ -27,6 +33,7 @@ var ChipSuggest = function ChipSuggest(_ref) {
     type: "button",
     className: cn({
       theme: theme,
+      size: size,
       'with-icon': !!icon
     }, [className, classes.root])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {

package/dist/es/components/Chips/ChipsSuggest/ChipsSuggest.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { ChipSuggestThemesType, ChipSuggestIdType, IChipSuggestProps } from './ChipSuggest';
+import { ChipSuggestThemesType, ChipSuggestSizeType, ChipSuggestIdType, IChipSuggestProps } from './ChipSuggest';
 import './ChipsSuggest.scss';
 export interface IChipsSuggestProps {
     /** Массив элементов */
     items: IChipSuggestProps[];
-    /** Цвет активного элемента */
+    /** Цвет элементов */
     theme?: ChipSuggestThemesType;
+    /** Размер элементов */
+    size?: ChipSuggestSizeType;
     /** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
     isScrollable?: boolean;
     /** Дополнительный класс корневого элемента */

package/dist/es/components/Chips/ChipsSuggest/ChipsSuggest.js

@@ -19,6 +19,8 @@ var ChipsSuggest = function ChipsSuggest(_ref) {
   var items = _ref.items,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'white' : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$isScrollable = _ref.isScrollable,
     isScrollable = _ref$isScrollable === void 0 ? false : _ref$isScrollable,
     onChange = _ref.onChange,
@@ -39,6 +41,7 @@ var ChipsSuggest = function ChipsSuggest(_ref) {
         key: id,
         id: id,
         theme: theme,
+        size: size,
         onClick: handleClick
       }, rest), !!children && children);
     });