@megafon/ui-core 9.2.1 → 9.3.0

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import './MultipleSelect.scss';
+export type ItemValueType = number | string | undefined;
+export type ItemType = {
+    /** Заголовок элемента */
+    title: string;
+    /** Уникальный идентификатор элемента */
+    value: ItemValueType;
+};
+export interface IMultipleSelectProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Элементы выпадающего списка */
+    items: ItemType[];
+    /** Список выбранных элементов */
+    selectedItems?: ItemType[];
+    /** Ограничение количества выбранных элементов */
+    selectLimit?: number;
+    /** Текст внутри поля по умолчанию */
+    placeholder?: string;
+    /** Максимальное вводимое количество символов */
+    maxLength?: number;
+    /** Текст при отсутствии результатов поиска */
+    notFoundText?: string;
+    /** Дополнительный текст под полем */
+    noticeText?: string;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Пользовательская функция поиска */
+    customSearchFilter?: (item: ItemType, searchQuery: string) => boolean;
+    /** Обработчик выбора элемента селекта */
+    onSelect?: (items: ItemType[]) => void;
+    /** Обработчик выхода из фокуса */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик входа в фокус */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик изменения поля при поиске */
+    onSearch?: (query: string) => void;
+    /** Использование функции debounce для onSearch */
+    searchDelay?: number;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        input?: string;
+        list?: string;
+        listItem?: string;
+        tag?: string;
+        tagButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        list?: Record<string, string>;
+        listItem?: Record<string, string>;
+        tag?: Record<string, string>;
+        tagButton?: Record<string, string>;
+    };
+}
+declare const MultipleSelect: React.FC<IMultipleSelectProps>;
+export default MultipleSelect;

package/dist/es/components/MultipleSelect/MultipleSelect.js

@@ -0,0 +1,235 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.includes.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import debounce from 'lodash.debounce';
+import Dropdown from "../Dropdown/Dropdown";
+import "./MultipleSelect.css";
+var ClearIcon = function ClearIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
+  }));
+};
+var ArrowIcon = function ArrowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16.774 18.697a1.092 1.092 0 01-1.51 0l-3.953-3.82c-.682-.66-.165-1.877.794-1.877h7.798c.96 0 1.465 1.217.783 1.876l-3.912 3.82z"
+  }));
+};
+var isItemSelected = function isItemSelected(item, selectedItems) {
+  return selectedItems.some(function (selectedItem) {
+    return selectedItem.value === item.value;
+  });
+};
+var cn = cnCreate('mfui-9-multiple-select');
+var MultipleSelect = function MultipleSelect(_ref) {
+  var items = _ref.items,
+    _ref$selectedItems = _ref.selectedItems,
+    selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
+    placeholder = _ref.placeholder,
+    selectLimit = _ref.selectLimit,
+    maxLength = _ref.maxLength,
+    className = _ref.className,
+    _ref$notFoundText = _ref.notFoundText,
+    notFoundText = _ref$notFoundText === void 0 ? 'Ничего не нашлось' : _ref$notFoundText,
+    noticeText = _ref.noticeText,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    customSearchFilter = _ref.customSearchFilter,
+    onSelect = _ref.onSelect,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onSearch = _ref.onSearch,
+    searchDelay = _ref.searchDelay,
+    isControlled = _ref.isControlled,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isDropdownOpen = _React$useState2[0],
+    setIsDropdownOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(selectedItems),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    innerSelectedItems = _React$useState4[0],
+    setInnerSelectedItems = _React$useState4[1];
+  var _React$useState5 = React.useState(items),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    innerCurrentItems = _React$useState6[0],
+    setInnerCurrentItems = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    searchQuery = _React$useState8[0],
+    setSearchQuery = _React$useState8[1];
+  var containerRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var currentItems = isControlled ? items : innerCurrentItems;
+  var currentSelectedItems = isControlled ? selectedItems : innerSelectedItems;
+  var isSelectActive = !selectLimit || currentSelectedItems.length < selectLimit;
+  var filteredItems = currentSelectedItems.length ? currentItems.filter(function (item) {
+    return !isItemSelected(item, currentSelectedItems);
+  }) : currentItems;
+  var showItemsList = isDropdownOpen && isSelectActive;
+  var debouncedSearch = React.useMemo(function () {
+    return debounce(function (query) {
+      return onSearch === null || onSearch === void 0 ? void 0 : onSearch(query);
+    }, searchDelay);
+  }, [onSearch, searchDelay]);
+  var filterItemsBySearch = React.useCallback(function (itemsToFilter, query) {
+    if (!query) {
+      return itemsToFilter;
+    }
+    if (customSearchFilter) {
+      return itemsToFilter.filter(function (item) {
+        return customSearchFilter(item, query);
+      });
+    }
+    return itemsToFilter.filter(function (item) {
+      return item.title.toLowerCase().includes(query.toLowerCase());
+    });
+  }, [customSearchFilter]);
+  var handleInputChange = React.useCallback(function (e) {
+    var _e$target$value = e.target.value,
+      inputValue = _e$target$value === void 0 ? '' : _e$target$value;
+    setSearchQuery(inputValue);
+    if (!isControlled) {
+      var matchesItems = filterItemsBySearch(items, inputValue);
+      setInnerCurrentItems(matchesItems);
+    }
+    if (!searchDelay) {
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
+    } else {
+      debouncedSearch(inputValue);
+    }
+  }, [debouncedSearch, filterItemsBySearch, isControlled, items, onSearch, searchDelay]);
+  var handleSelectItem = React.useCallback(function (item) {
+    if (!isSelectActive) {
+      return;
+    }
+    var newSelectedItems = [].concat(_toConsumableArray(currentSelectedItems), [item]);
+    !isControlled && setInnerSelectedItems(newSelectedItems);
+    setSearchQuery('');
+    inputRef.current && inputRef.current.focus();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelectedItems);
+  }, [isControlled, isSelectActive, onSelect, currentSelectedItems]);
+  var handleSelect = function handleSelect(index) {
+    return function () {
+      var targetItem = filteredItems[index];
+      handleSelectItem(targetItem);
+    };
+  };
+  var handleFocus = React.useCallback(function (e) {
+    setIsDropdownOpen(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }, [onFocus]);
+  var handleBlur = React.useCallback(function (e) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  }, [onBlur]);
+  var removeSelectedItem = React.useCallback(function (itemToRemove) {
+    return function () {
+      var newSelectedItems = currentSelectedItems.filter(function (item) {
+        return item.value !== itemToRemove.value;
+      });
+      !isControlled && setInnerSelectedItems(newSelectedItems);
+      setIsDropdownOpen(true);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelectedItems);
+    };
+  }, [currentSelectedItems, isControlled, onSelect]);
+  var handleToggleDropdown = React.useCallback(function () {
+    setIsDropdownOpen(function (prev) {
+      return !prev;
+    });
+  }, []);
+  var handleDropdownClose = function handleDropdownClose() {
+    setIsDropdownOpen(false);
+  };
+  React.useEffect(function () {
+    if (!searchQuery && !isControlled) {
+      setInnerCurrentItems(items);
+    }
+  }, [isControlled, items, searchQuery]);
+  var renderList = function renderList() {
+    return /*#__PURE__*/React.createElement(Dropdown, {
+      isOpen: showItemsList,
+      targetRef: containerRef,
+      items: filteredItems,
+      emptyText: notFoundText,
+      onItemClick: handleSelect,
+      onClose: handleDropdownClose,
+      classes: {
+        list: classes === null || classes === void 0 ? void 0 : classes.list,
+        item: classes === null || classes === void 0 ? void 0 : classes.listItem
+      },
+      dataAttrs: {
+        list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list,
+        item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem
+      }
+    });
+  };
+  var renderItemTag = function renderItemTag(item, i) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      key: item.value,
+      className: cn('tag', [classes === null || classes === void 0 ? void 0 : classes.tag])
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tag, i + 1)), /*#__PURE__*/React.createElement("span", {
+      className: cn('tag-title')
+    }, item.title), /*#__PURE__*/React.createElement("button", _extends({
+      className: cn('tag-button', [classes === null || classes === void 0 ? void 0 : classes.tagButton])
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tagButton, i + 1), {
+      type: "button",
+      disabled: disabled,
+      onClick: removeSelectedItem(item)
+    }), /*#__PURE__*/React.createElement(ClearIcon, {
+      className: cn('tag-button-icon')
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      open: showItemsList,
+      disabled: disabled
+    }, [className, classes.root])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('control', {
+      active: isSelectActive
+    }),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('input-container')
+  }, currentSelectedItems === null || currentSelectedItems === void 0 ? void 0 : currentSelectedItems.map(function (item, i) {
+    return renderItemTag(item, i);
+  }), isSelectActive && /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('input', [classes.input])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    id: "search",
+    placeholder: placeholder,
+    value: searchQuery,
+    maxLength: maxLength,
+    disabled: disabled,
+    onChange: handleInputChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    type: "text",
+    autoComplete: "off",
+    ref: inputRef
+  }))), /*#__PURE__*/React.createElement("button", {
+    className: cn('arrow-button'),
+    type: "button",
+    disabled: !isSelectActive || disabled,
+    onClick: handleToggleDropdown
+  }, /*#__PURE__*/React.createElement(ArrowIcon, {
+    className: cn('arrow-icon')
+  })), renderList()), noticeText && /*#__PURE__*/React.createElement("div", {
+    className: cn('notice-text')
+  }, noticeText));
+};
+export default MultipleSelect;

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

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

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

@@ -43,7 +43,7 @@ var Row = function Row(_ref) {
   var ElementType = href ? 'a' : 'div';
   var isActive = !showLoader && (!!href || !!onClick);
   var isSmallSize = size === 'small';
-  var isGraySimpleIcon = !isIconColored && (backgroundView === 'stroke' || backgroundView === 'shadow');
+  var isGraySimpleIcon = !isIconColored && (backgroundView === 'stroke' || backgroundView === 'shadow' || backgroundView === 'white');
   var _useResolution = useResolution(),
     isMobile = _useResolution.isMobile;
   var getTitleStyle = function getTitleStyle() {

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

@@ -58,6 +58,12 @@ export interface ITooltipProps {
     title?: string;
     /** Текст кнопки */
     buttonText?: string;
+    /** Ссылка кнопки */
+    buttonHref?: string;
+    /** Target - свойство тега <a> кнопки */
+    buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> кнопки */
+    buttonRel?: string;
     /** Текст */
     text?: string;
     /** Наличие кнопки-крестика "Закрыть" */

package/dist/es/components/Tooltip/Tooltip.js

@@ -98,6 +98,10 @@ var Tooltip = function Tooltip(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'big' : _ref$size,
     buttonText = _ref.buttonText,
+    buttonHref = _ref.buttonHref,
+    _ref$buttonTarget = _ref.buttonTarget,
+    buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
+    buttonRel = _ref.buttonRel,
     hasCloseButton = _ref.hasCloseButton,
     _ref$colorTheme = _ref.colorTheme,
     theme = _ref$colorTheme === void 0 ? 'white' : _ref$colorTheme,
@@ -316,25 +320,34 @@ var Tooltip = function Tooltip(_ref) {
   var renderedFullContent = useMemo(function () {
     var hasButtonMargin = !!title || !!text;
     var hasChildrenMargin = hasButtonMargin || !!buttonText;
+    var isLink = !!buttonHref;
+    var ButtonElementType = isLink ? 'a' : 'button';
+    var linkProps = {
+      href: buttonHref,
+      target: buttonTarget,
+      rel: buttonRel,
+      onClick: onClick
+    };
+    var buttonProps = {
+      onClick: onClick,
+      type: 'button'
+    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(Header, {
       className: cn('title'),
       as: "h5",
       space: "tight"
-    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
-      type: "button",
+    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement(ButtonElementType, _extends({
       className: cn('button', {
         margin: hasButtonMargin
       }, [buttonClassName])
-    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
-      onClick: onClick
-    }), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), isLink ? linkProps : buttonProps), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
       className: cn('button-arrow')
     })), !!children && /*#__PURE__*/React.createElement("div", {
       className: cn('addititonal-content', {
         margin: hasChildrenMargin
       })
     }, children));
-  }, [title, text, buttonText, children, dataAttrs, renderedText, onClick, buttonClassName]);
+  }, [title, text, buttonText, buttonHref, buttonTarget, buttonRel, onClick, renderedText, buttonClassName, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, children]);
   var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       theme: theme,

package/dist/es/index.d.ts

@@ -10,6 +10,7 @@ export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
 export { default as Chip } from './components/Chips/Chips/Chip';
+export { default as ChipBadge } from './components/Chips/Chips/ChipBadge';
 export { default as Chips } from './components/Chips/Chips/Chips';
 export { default as ChipsDropdown } from './components/Chips/Chips/components/ChipsDropdown/ChipsDropdown';
 export { default as ChipsScrollPanel } from './components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel';
@@ -40,6 +41,7 @@ export { default as ModalContent } from './components/Modal/_ModalContent/ModalC
 export { default as ModalDesktop } from './components/Modal/_ModalDesktop/ModalDesktop';
 export { default as ModalMobile } from './components/Modal/_ModalMobile/ModalMobile';
 export { default as Month } from './components/Calendar/components/_Month/Month';
+export { default as MultipleSelect } from './components/MultipleSelect/MultipleSelect';
 export { default as NavArrow } from './components/NavArrow/NavArrow';
 export { default as Notification } from './components/Notification/Notification';
 export { default as NotificationBadge } from './components/Badges/NotificationBadge/NotificationBadge';

package/dist/es/index.js

@@ -10,6 +10,7 @@ export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as checkBreakpointsPropTypes } from "./components/Carousel/checkBreakpointsPropTypes";
 export { default as Chip } from "./components/Chips/Chips/Chip";
+export { default as ChipBadge } from "./components/Chips/Chips/ChipBadge";
 export { default as Chips } from "./components/Chips/Chips/Chips";
 export { default as ChipsDropdown } from "./components/Chips/Chips/components/ChipsDropdown/ChipsDropdown";
 export { default as ChipsScrollPanel } from "./components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel";
@@ -40,6 +41,7 @@ export { default as ModalContent } from "./components/Modal/_ModalContent/ModalC
 export { default as ModalDesktop } from "./components/Modal/_ModalDesktop/ModalDesktop";
 export { default as ModalMobile } from "./components/Modal/_ModalMobile/ModalMobile";
 export { default as Month } from "./components/Calendar/components/_Month/Month";
+export { default as MultipleSelect } from "./components/MultipleSelect/MultipleSelect";
 export { default as NavArrow } from "./components/NavArrow/NavArrow";
 export { default as Notification } from "./components/Notification/Notification";
 export { default as NotificationBadge } from "./components/Badges/NotificationBadge/NotificationBadge";

package/dist/lib/components/Badges/PromoBadge/PromoBadge.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-promo-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--stcWhite);padding:4px 12px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-promo-badge_color_berry{background-color:var(--berry)}.mfui-9-promo-badge_color_brand-purple-20{background-color:var(--brandPurple20);color:var(--brandPurple)}.mfui-9-promo-badge_color_brand-purple{background-color:var(--brandPurple)}.mfui-9-promo-badge_color_night{background-color:var(--night)}.mfui-9-promo-badge_color_sky{background-color:var(--sky)}.mfui-9-promo-badge_color_flamingo{background-color:var(--flamingo)}.mfui-9-promo-badge_color_gradient-purple{background:var(--gradientPurple1);color:var(--stcWhite)}.mfui-9-promo-badge_color_gray{background:var(--spbSky1);color:var(--content)}.mfui-9-promo-badge_size_small{border-radius:8px;height:18px;padding:0 8px}.mfui-9-promo-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-promo-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--stcWhite);padding:3px 10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-promo-badge_color_berry{background-color:var(--berry)}.mfui-9-promo-badge_color_brand-purple-20{background-color:var(--brandPurple20);color:var(--brandPurple)}.mfui-9-promo-badge_color_brand-purple{background-color:var(--brandPurple)}.mfui-9-promo-badge_color_night{background-color:var(--night)}.mfui-9-promo-badge_color_sky{background-color:var(--sky)}.mfui-9-promo-badge_color_flamingo{background-color:var(--flamingo)}.mfui-9-promo-badge_color_gradient-purple{background:var(--gradientPurple1);color:var(--stcWhite)}.mfui-9-promo-badge_color_gray{background:var(--spbSky0);color:var(--content)}.mfui-9-promo-badge_color_white{background:var(--base);color:var(--content)}.mfui-9-promo-badge_icon{padding:3px 8px}.mfui-9-promo-badge_size_small{border-radius:8px;height:20px;padding:0 8px}.mfui-9-promo-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px}.mfui-9-promo-badge__text_size_small{font-size:10px;line-height:12px}.mfui-9-promo-badge__icon{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:4px}.mfui-9-promo-badge__icon_size_small{margin-left:-4px;margin-right:2px}

package/dist/lib/components/Badges/PromoBadge/PromoBadge.d.ts

@@ -9,6 +9,7 @@ export declare const PromoBadgeColors: {
     readonly FLAMINGO: "flamingo";
     readonly GRADIENT_PURPLE: "gradient-purple";
     readonly GRAY: "gray";
+    readonly WHITE: "white";
 };
 type PromoBadgeColorsType = (typeof PromoBadgeColors)[keyof typeof PromoBadgeColors];
 export declare const PromoBadgeSize: {
@@ -16,11 +17,17 @@ export declare const PromoBadgeSize: {
     readonly MEDIUM: "medium";
 };
 type PromoBadgeSizeType = (typeof PromoBadgeSize)[keyof typeof PromoBadgeSize];
+export declare const PromoBadgeIcon: {
+    readonly PERSONAL: "personal";
+};
+type PromoBadgeIconType = (typeof PromoBadgeIcon)[keyof typeof PromoBadgeIcon];
 export interface IPromoBadgeProps {
     /** Цвет промо-бэйджа */
     color?: PromoBadgeColorsType;
     /** Размер промо-бэйджа */
     size?: PromoBadgeSizeType;
+    /** Иконка промо-бэйджа */
+    icon?: PromoBadgeIconType;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data-атрибуты к внутренним элементам */

package/dist/lib/components/Badges/PromoBadge/PromoBadge.js

@@ -4,13 +4,39 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.PromoBadgeSize = exports.PromoBadgeColors = void 0;
+exports["default"] = exports.PromoBadgeSize = exports.PromoBadgeIcon = exports.PromoBadgeColors = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var PersonalIcon = function PersonalIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    width: 14,
+    height: 14,
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.287 7.7a.2.2 0 01.193.15l.26 1.036c.053.215.071.278.102.326a.4.4 0 00.12.121c.05.03.112.049.327.103l1.035.258a.2.2 0 010 .387l-1.035.259c-.215.054-.278.072-.326.102a.4.4 0 00-.121.121c-.03.049-.049.112-.103.327l-.259 1.035a.2.2 0 01-.385 0l-.26-1.035c-.053-.216-.072-.278-.103-.327a.397.397 0 00-.12-.12c-.048-.031-.11-.05-.326-.103l-1.035-.259a.2.2 0 01-.151-.193.2.2 0 01.151-.194l1.035-.258c.215-.054.278-.072.326-.103a.398.398 0 00.12-.121c.031-.048.05-.11.104-.326l.259-1.035a.199.199 0 01.192-.15zM8.75 2.45c.146 0 .273.1.309.241l.414 1.657c.086.345.115.445.165.522.05.077.115.143.192.192.077.05.178.08.522.166l1.657.414a.318.318 0 010 .617l-1.657.414c-.344.086-.445.115-.522.165a.636.636 0 00-.192.192c-.05.078-.08.178-.165.523l-.414 1.656a.318.318 0 01-.618 0l-.414-1.656c-.086-.345-.115-.445-.165-.523a.636.636 0 00-.192-.192c-.077-.05-.178-.079-.523-.165l-1.656-.414a.318.318 0 010-.617l1.656-.414c.345-.087.446-.116.523-.165a.636.636 0 00.192-.193c.05-.077.08-.177.165-.522l.414-1.657a.318.318 0 01.309-.24zM4.2 1.4c.058 0 .109.04.123.096l.166.663c.035.138.046.178.066.21.02.03.046.057.077.076.03.02.071.031.209.066l.663.166a.128.128 0 010 .247l-.663.165c-.138.034-.178.047-.21.066a.256.256 0 00-.076.077c-.02.031-.031.071-.066.208l-.166.664a.127.127 0 01-.247 0l-.165-.664c-.034-.137-.047-.177-.066-.208a.254.254 0 00-.077-.077c-.031-.02-.071-.032-.21-.066l-.662-.165a.127.127 0 010-.247l.663-.166c.137-.035.178-.046.209-.066a.257.257 0 00.077-.077c.02-.03.032-.071.066-.209l.165-.663A.128.128 0 014.2 1.4z",
+    fill: "url(#PersonalIcon__paint0_linear_30332_1078)"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "PersonalIcon__paint0_linear_30332_1078",
+    x1: 11.873,
+    y1: 2.079,
+    x2: 6.33,
+    y2: 3.363,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#3CB9FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#AA5AFF"
+  }))));
+};
 var PromoBadgeColors = exports.PromoBadgeColors = {
   BERRY: 'berry',
   BRAND_PURPLE_20: 'brand-purple-20',
@@ -19,28 +45,42 @@ var PromoBadgeColors = exports.PromoBadgeColors = {
   SKY: 'sky',
   FLAMINGO: 'flamingo',
   GRADIENT_PURPLE: 'gradient-purple',
-  GRAY: 'gray'
+  GRAY: 'gray',
+  WHITE: 'white'
 };
 var PromoBadgeSize = exports.PromoBadgeSize = {
   SMALL: 'small',
   MEDIUM: 'medium'
 };
+var PromoBadgeIcon = exports.PromoBadgeIcon = {
+  PERSONAL: 'personal'
+};
+var iconMap = (0, _defineProperty2["default"])({}, PromoBadgeIcon.PERSONAL, PersonalIcon);
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-promo-badge');
 var PromoBadge = function PromoBadge(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? PromoBadgeColors.SKY : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? PromoBadgeSize.MEDIUM : _ref$size,
+    icon = _ref.icon,
     className = _ref.className,
     children = _ref.children,
     dataAttrs = _ref.dataAttrs;
+  var IconComponent = icon ? iconMap[icon] : null;
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
-      size: size
+      size: size,
+      icon: !!IconComponent
     }, className)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn('text')
+  }), IconComponent && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon', {
+      size: size
+    })
+  }, /*#__PURE__*/React.createElement(IconComponent, null)), /*#__PURE__*/React.createElement("span", {
+    className: cn('text', {
+      size: size
+    })
   }, children));
 };
 var _default = exports["default"] = PromoBadge;

package/dist/lib/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: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}}
+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;-webkit-box-pack:center;-ms-flex-pack:center;border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);justify-content:center;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}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.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;margin:2px 0;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;-webkit-transition:fill .3s;transition:fill .3s;width:100%;fill:var(--content)}.mfui-9-chip__icon-arrow{-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s}.mfui-9-chip_with-icon .mfui-9-chip__inner{margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip_with-icon .mfui-9-chip__inner{margin-left:4px}}.mfui-9-chip_with-arrow{padding-right:14px}@media screen and (max-width:767px){.mfui-9-chip_with-arrow{padding-right:6px}}.mfui-9-chip_type_filter .mfui-9-chip__counter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:32px;font-size:12px;height:24px;justify-content:center;line-height:14px;min-width:24px;padding:0 4px 2px}@media screen and (min-width:768px){.mfui-9-chip_type_filter .mfui-9-chip__counter{height:32px;min-width:32px;padding-left:6px;padding-right:6px}}.mfui-9-chip_type_default .mfui-9-chip__icon svg{fill:var(--spbSky3)}.mfui-9-chip_theme_white{background-color:var(--spbSky0)}.mfui-9-chip_theme_gray,.mfui-9-chip_theme_white.mfui-9-chip_opened,.mfui-9-chip_theme_white:hover{background-color:var(--spbSky1)}.mfui-9-chip_theme_gray.mfui-9-chip_opened,.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.mfui-9-chip_opened .mfui-9-chip__icon-arrow{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.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 .mfui-9-chip__icon svg,.mfui-9-chip_disabled:hover .mfui-9-chip__icon svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__icon-arrow svg,.mfui-9-chip_disabled:hover .mfui-9-chip__icon-arrow svg{fill:var(--spbSky2)}.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:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter){background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) svg{fill:var(--stcWhite)}.mfui-9-chip_checked:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter){background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black:not(.mfui-9-chip_type_filter.mfui-9-chip_with-counter) .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_type_filter.mfui-9-chip_with-counter{padding-bottom:4px;padding-right:4px;padding-top:4px}.mfui-9-chip_checked.mfui-9-chip_type_filter .mfui-9-chip__counter{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_type_filter.mfui-9-chip_color_black .mfui-9-chip__counter{background-color:var(--content);color:var(--base)}

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

@@ -11,6 +11,11 @@ export declare const ChipThemes: {
     readonly GRAY: "gray";
 };
 export type ChipsThemeType = (typeof ChipThemes)[keyof typeof ChipThemes];
+export declare const ChipType: {
+    readonly DEFAULT: "default";
+    readonly FILTER: "filter";
+};
+export type ChipTypeType = (typeof ChipType)[keyof typeof ChipType];
 export declare const ChipArrow: {
     readonly UP: "up";
     readonly DOWN: "down";
@@ -21,20 +26,26 @@ export interface IChipProps {
     id: ChipIdType;
     /** Заголовок */
     title?: string;
+    /** Тип */
+    type?: ChipTypeType;
     /** Цвет активного элемента компонента */
     color?: ChipColorsType;
-    /** Цвета неактивных элементов компонента */
+    /** Цветовая тема */
     theme?: ChipsThemeType;
-    /** Отображение в отмеченном (зажатом) состоянии */
+    /** Активное состояние */
     checked?: boolean;
+    /** Открытое состояние */
+    opened?: boolean;
     /** Отключенное состояние */
     disabled?: boolean;
     /** Иконка */
     icon?: JSX.Element;
     /** Значение счетчика */
     counterValue?: number;
-    /** Стрелка вверх или вниз */
+    /** DEPRECATED Стрелка вверх или вниз (Используйте opened и showArrow) */
     arrow?: ChipArrowType;
+    /** Показать стрелку */
+    showArrow?: boolean;
     /** Обработчик нажатия */
     onClick?: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
     /** Дочерние элементы */