@megafon/ui-core 9.2.2 → 9.4.0

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;
     /** Дочерние элементы */

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

@@ -4,13 +4,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChipThemes = exports.ChipColors = exports.ChipArrow = void 0;
+exports["default"] = exports.ChipType = exports.ChipThemes = exports.ChipColors = exports.ChipArrow = void 0;
 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 TurnOn = function TurnOn(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.352 12a2 2 0 110 4 2 2 0 010-4zm-2.828 1.25c-.06.24-.094.49-.094.75s.034.51.094.75H2.73A.74.74 0 012 14a.74.74 0 01.729-.75h6.795zm7.747 0A.74.74 0 0118 14a.74.74 0 01-.729.75h-2.108c.06-.24.096-.49.096-.75s-.036-.51-.096-.75h2.108zM7.46 4a2 2 0 110 4 2 2 0 010-4zM4.667 5.25c-.06.24-.095.49-.095.75s.035.51.095.75H2.729A.74.74 0 012 6a.74.74 0 01.729-.75h1.938zm12.604 0A.74.74 0 0118 6a.74.74 0 01-.729.75h-6.965c.06-.24.094-.49.094-.75s-.034-.51-.094-.75h6.966z"
+  }));
+};
 var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
@@ -33,6 +40,11 @@ var ChipThemes = exports.ChipThemes = {
   WHITE: 'white',
   GRAY: 'gray'
 };
+var ChipType = exports.ChipType = {
+  DEFAULT: 'default',
+  FILTER: 'filter'
+};
+// DEPRECATED -------------------------------------------------------
 var ChipArrow = exports.ChipArrow = {
   UP: 'up',
   DOWN: 'down'
@@ -41,17 +53,22 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-9-chip');
 var Chip = function Chip(_ref) {
   var id = _ref.id,
     title = _ref.title,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
     _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$opened = _ref.opened,
+    opened = _ref$opened === void 0 ? false : _ref$opened,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     icon = _ref.icon,
     counterValue = _ref.counterValue,
     arrow = _ref.arrow,
+    showArrow = _ref.showArrow,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -60,6 +77,9 @@ var Chip = function Chip(_ref) {
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
   var checkedClass = checked ? classes.checked : undefined;
+  var filterIcon = type === 'filter' ? /*#__PURE__*/React.createElement(TurnOn, null) : undefined;
+  var finalIcon = icon || filterIcon;
+  var content = children || title;
   var handleClick = React.useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
   }, [onClick, id]);
@@ -67,10 +87,14 @@ var Chip = function Chip(_ref) {
     type: "button",
     className: cn({
       color: color,
+      type: type,
       theme: theme,
       checked: checked,
+      opened: opened,
       disabled: disabled,
-      'with-icon': !!icon
+      'with-arrow': !!arrow || showArrow,
+      'with-counter': !!counterValue,
+      'with-icon': !!finalIcon
     }, [className, classes.root, checkedClass])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     disabled: disabled,
@@ -78,14 +102,16 @@ var Chip = function Chip(_ref) {
     ref: rootRef
   }, checked && {
     tabIndex: -1
-  }), !!icon && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+  }), !!finalIcon && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
     className: cn('icon', [classes.icon])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), finalIcon), !!content && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
     className: cn('inner', [classes.inner])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children || title), !!counterValue && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), content), !!counterValue && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
     className: cn('counter', [classes.counter])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.counter)), counterValue), !!arrow && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('icon-arrow', [classes.arrow])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)), showArrow && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('icon-arrow', [classes.arrow])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 var _default = exports["default"] = Chip;

package/dist/lib/components/Chips/Chips/ChipBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-badge__badge{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-bottom:-4px;margin-left:auto}.mfui-9-chip-badge__chip{width:100%}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IChipProps } from './Chip';
+import './ChipBadge.scss';
+export interface IChipBadgeProps extends IChipProps {
+    badge?: React.ReactNode;
+}
+declare const ChipBadge: React.FC<IChipBadgeProps>;
+export default ChipBadge;

package/dist/lib/components/Chips/Chips/ChipBadge.js

@@ -0,0 +1,38 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.index-of.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Chip = _interopRequireDefault(require("./Chip"));
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-9-chip-badge');
+var ChipBadge = function ChipBadge(_a) {
+  var badge = _a.badge,
+    className = _a.className,
+    chipProps = __rest(_a, ["badge", "className"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, !!badge && /*#__PURE__*/React.createElement("div", {
+    className: cn('badge')
+  }, badge), /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({
+    className: cn('chip', [className])
+  }, chipProps)));
+};
+var _default = exports["default"] = ChipBadge;

package/dist/lib/components/Chips/Chips/Chips.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;width:100%}@media screen and (max-width:767px){.mfui-9-chips{gap:8px}}.mfui-9-chips_hidden{display:grid;grid-template-columns:repeat(auto-fit,minMax(0,-webkit-min-content));grid-template-columns:repeat(auto-fit,minMax(0,min-content))}.mfui-9-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;width:100%}@media screen and (max-width:767px){.mfui-9-chips{gap:8px}}.mfui-9-chips_hidden{display:grid;grid-template-columns:repeat(auto-fit,minMax(0,-webkit-min-content));grid-template-columns:repeat(auto-fit,minMax(0,min-content))}.mfui-9-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { DropdownItemsPaddingType } from '../../Dropdown/Dropdown';
-import { ChipColorsType, ChipIdType, IChipProps, ChipsThemeType } from './Chip';
+import { IChipBadgeProps } from './ChipBadge';
 import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
-    items: IChipProps[];
+    items: IChipBadgeProps[];
     /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
-    value?: ChipIdType;
+    value?: IChipBadgeProps['id'];
     /** Цвет активного элемента */
-    color?: ChipColorsType;
+    color?: IChipBadgeProps['color'];
     /** Цвет неактивных элементов */
-    theme?: ChipsThemeType;
+    theme?: IChipBadgeProps['theme'];
     /** Горизонтальное выравнивание */
     align?: 'left' | 'center';
     /** Переводит компонент в контролируемое состояние */
@@ -32,7 +32,7 @@ export interface IChipsProps {
     /** Отступы элементов списка выпадающего списка */
     dropdownPaddings?: DropdownItemsPaddingType;
     /** Обработчик изменения значения */
-    onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
+    onChange?: (id: IChipBadgeProps['id'], e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/lib/components/Chips/Chips/Chips.js

@@ -15,7 +15,7 @@ var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _throttleTime = _interopRequireDefault(require("../../../constants/throttleTime"));
-var _Chip = _interopRequireDefault(require("./Chip"));
+var _ChipBadge = _interopRequireDefault(require("./ChipBadge"));
 var _ChipsDropdown = _interopRequireDefault(require("./components/ChipsDropdown/ChipsDropdown"));
 var _ChipsScrollPanel = _interopRequireDefault(require("./components/ChipsScrollPanel/ChipsScrollPanel"));
 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); }
@@ -109,7 +109,7 @@ var Chips = function Chips(_ref) {
       var id = _a.id,
         children = _a.children,
         rest = __rest(_a, ["id", "children"]);
-      return /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({
+      return /*#__PURE__*/React.createElement(_ChipBadge["default"], (0, _extends2["default"])({
         key: id,
         id: id,
         checked: id === selectedId,

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

@@ -1 +1 @@
-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)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.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/lib/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.d.ts

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

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

@@ -13,7 +13,7 @@ require("core-js/modules/es.object.to-string.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _Dropdown = _interopRequireDefault(require("../../../../Dropdown/Dropdown"));
-var _Chip = _interopRequireDefault(require("../../Chip"));
+var _ChipBadge = _interopRequireDefault(require("../../ChipBadge"));
 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 }; }
@@ -31,7 +31,6 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     onClick = _ref.onClick;
-  var _a;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
@@ -74,17 +73,14 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn([classes.root]),
     ref: dropdownRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({}, currentItem, {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_ChipBadge["default"], (0, _extends2["default"])({}, currentItem, {
     className: cn('button', [currentItem.className]),
-    classes: (0, _extends2["default"])((0, _extends2["default"])({}, currentItem.classes), {
-      arrow: cn('arrow', {
-        open: isDropdownOpen
-      }, [(_a = currentItem.classes) === null || _a === void 0 ? void 0 : _a.arrow])
-    }),
+    classes: currentItem.classes,
     color: color,
     theme: theme,
+    opened: isDropdownOpen,
     checked: !!currentItem.id,
-    arrow: "down",
+    showArrow: true,
     onClick: handleOpenItemList
   })), /*#__PURE__*/React.createElement(_Dropdown["default"], {
     items: dropdownItems,

package/dist/lib/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-scroll-panel{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.mfui-9-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-9-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;height:100%}@media screen and (max-width:767px){.mfui-9-chips-scroll-panel__inner{gap:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-scroll-panel{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.mfui-9-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-9-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;height:100%}@media screen and (max-width:767px){.mfui-9-chips-scroll-panel__inner{gap:8px}}

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

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

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

@@ -12,7 +12,7 @@ require("core-js/modules/es.array.index-of.js");
 require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
-var _Chip = _interopRequireDefault(require("../../Chip"));
+var _ChipBadge = _interopRequireDefault(require("../../ChipBadge"));
 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 }; }
@@ -84,7 +84,7 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: id,
       className: cn('slide')
-    }, /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({}, rest, {
+    }, /*#__PURE__*/React.createElement(_ChipBadge["default"], (0, _extends2["default"])({}, rest, {
       id: id,
       checked: checked,
       color: color,

package/dist/lib/components/Modal/Modal.css

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