@megafon/ui-core 9.0.0-alpha.8 → 9.0.0

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

@@ -37,6 +37,8 @@ export interface IDropdownProps<T extends DropdownItemValueType> {
     hoveredIndex?: number;
     /** Текст при отсутствии элементов */
     emptyText?: string;
+    /** Контент, отображаемый в шапке дропдауна */
+    headerContent?: React.ReactNode;
     /** Отключение компонента */
     disabled?: boolean;
     /** Отображать короткий выпадающий список */
@@ -60,5 +62,5 @@ export interface IDropdownProps<T extends DropdownItemValueType> {
     /** Обработчик закрытия списка */
     onClose?: () => void;
 }
-declare const Dropdown: <T extends DropdownItemValueType>({ items, value, filterValue, isOpen, hoveredIndex, targetRef, emptyText, disabled, short, className, classes, dataAttrs, onItemClick, onClose, }: IDropdownProps<T>) => JSX.Element | null;
+declare const Dropdown: <T extends DropdownItemValueType>({ items, value, filterValue, isOpen, hoveredIndex, targetRef, emptyText, headerContent, disabled, short, className, classes, dataAttrs, onItemClick, onClose, }: IDropdownProps<T>) => JSX.Element | null;
 export default Dropdown;

package/dist/lib/components/Dropdown/Dropdown.js

@@ -29,6 +29,7 @@ var Dropdown = function Dropdown(_ref) {
     targetRef = _ref.targetRef,
     _ref$emptyText = _ref.emptyText,
     emptyText = _ref$emptyText === void 0 ? 'Нет элементов' : _ref$emptyText,
+    headerContent = _ref.headerContent,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$short = _ref["short"],
@@ -43,6 +44,10 @@ var Dropdown = function Dropdown(_ref) {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isVisible = _React$useState2[0],
     setIsVisible = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    mouseOverIndex = _React$useState4[0],
+    setMouseOverIndex = _React$useState4[1];
   var dropdownRef = React.useRef(null);
   var handleOutsideClick = React.useCallback(function (event) {
     var target = event.target;
@@ -60,6 +65,7 @@ var Dropdown = function Dropdown(_ref) {
     } else {
       document.removeEventListener('mousedown', handleOutsideClick);
       setIsVisible(false);
+      setMouseOverIndex(null);
     }
     return function () {
       document.removeEventListener('mousedown', handleOutsideClick);
@@ -77,9 +83,19 @@ var Dropdown = function Dropdown(_ref) {
     }
     return item.view;
   };
+  var handleKeyDown = React.useCallback(function (e, index) {
+    if (e.code === 'Enter') {
+      onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(index)(e);
+    }
+  }, [onItemClick]);
+  var handleItemMouseEnter = React.useCallback(function (index) {
+    return function () {
+      setMouseOverIndex(index);
+    };
+  }, []);
   var renderItem = function renderItem(item, index) {
     var isActive = item.value === value;
-    var isHovered = index === hoveredIndex;
+    var isHovered = index === (mouseOverIndex !== null && mouseOverIndex !== void 0 ? mouseOverIndex : hoveredIndex);
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
       key: item.value
     }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1), {
@@ -91,7 +107,11 @@ var Dropdown = function Dropdown(_ref) {
       onClick: onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(index),
       role: "option",
       "aria-selected": isActive,
-      tabIndex: -1
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        return handleKeyDown(e, index);
+      },
+      onMouseEnter: handleItemMouseEnter(index)
     }), getItemContent(item, isActive));
   };
   if (!isOpen) {
@@ -105,8 +125,10 @@ var Dropdown = function Dropdown(_ref) {
       "short": _short
     }, [className, classes.root]),
     role: "listbox",
-    tabIndex: 0
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    tabIndex: -1
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!headerContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, headerContent), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
     className: cn('list', [classes.list])
   }), items.length > 0 ? items.map(renderItem) : /*#__PURE__*/React.createElement("div", {
     className: cn('empty')

package/dist/lib/components/ErrorLoad/ErrorLoad.css

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

package/dist/lib/components/ErrorLoad/ErrorLoad.js

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

package/dist/lib/components/Link/Link.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-link{border-radius:8px}.mfui-9-link:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-link:focus{outline:none}

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

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

package/dist/lib/components/Link/Link.js

@@ -11,6 +11,7 @@ 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 cn = (0, _uiHelpers.cnCreate)('mfui-9-link');
 var Link = function Link(_ref) {
   var target = _ref.target,
     href = _ref.href,
@@ -22,7 +23,7 @@ var Link = function Link(_ref) {
     children = _ref.children,
     dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("a", (0, _extends2["default"])({
-    className: className,
+    className: cn([className]),
     href: href,
     target: target,
     rel: rel,

package/dist/lib/components/ListData/ListData.css

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

package/dist/lib/components/ListData/ListData.js

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

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

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

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

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

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

@@ -6,6 +6,11 @@ declare const ModalMobileViews: {
     readonly BOTTOM: "bottom";
 };
 type ModalMobileViewsType = (typeof ModalMobileViews)[keyof typeof ModalMobileViews];
+export declare const HeaderButtonsTheme: {
+    readonly DEFAULT: "default";
+    readonly WHITE: "white";
+};
+export type HeaderButtonsThemeType = (typeof HeaderButtonsTheme)[keyof typeof HeaderButtonsTheme];
 export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
     INITIAL_STEP = "initial-step",
     MOVE_STEP = "move-step",
@@ -44,13 +49,17 @@ export type ModalHeaderPropsType = {
     showBackButton?: boolean;
     /** Скрыть крестик */
     hideCloseButton?: boolean;
-    /** Отобразить дополнительный контент в шапке */
+    /** Дополнительный контент в шапке */
     headerAdditionalContent?: JSX.Element | JSX.Element[] | string | null;
+    /** Кастомный контент в шапке */
+    headerCustomContent?: JSX.Element | JSX.Element[] | string | null;
+    /** Цветовая тема кнопок */
+    buttonsTheme?: HeaderButtonsThemeType;
     /** Отобразить тень у шапки */
     hasHeaderShadow?: boolean;
     /** Закрепленная шапка */
     isStickyHeader?: boolean;
-    /** Кнопки находятся вне основной шапке */
+    /** Кнопки находятся вне основной шапки */
     isOutSideHeaderButtons?: boolean;
     /** Использовать серый фон в шапке */
     isGrayColorHeader?: boolean;

package/dist/lib/components/Modal/Modal.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = void 0;
+exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = exports.HeaderButtonsTheme = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
@@ -27,6 +27,10 @@ var ModalMobileViews = {
   // use camelCase for simple using in props from backend
   BOTTOM: 'bottom'
 };
+var HeaderButtonsTheme = exports.HeaderButtonsTheme = {
+  DEFAULT: 'default',
+  WHITE: 'white'
+};
 var MODAL_TRANSITIONS_STEPS_ENUM;
 (function (MODAL_TRANSITIONS_STEPS_ENUM) {
   MODAL_TRANSITIONS_STEPS_ENUM["INITIAL_STEP"] = "initial-step";

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__header_gray{background-color:var(--backgroundGray);border-top-left-radius:32px;border-top-right-radius:32px}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-modal-content__header-main{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;justify-content:center;min-height:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}.mfui-9-modal-content__header-button_close{right:18px}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;position:relative;width:32px}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}.mfui-9-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__header_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-modal-content__header-main{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;justify-content:center;min-height:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-modal-content__header-custom-content{width:100%}.mfui-9-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}@media screen and (max-width:767px){.mfui-9-modal-content__header-button_back{left:10px;top:10px}}.mfui-9-modal-content__header-button_close{right:18px}@media screen and (max-width:767px){.mfui-9-modal-content__header-button_close{right:10px;top:10px}}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;width:32px}.mfui-9-modal-content__header-inner: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-modal-content__header-inner:focus{outline:none}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}.mfui-9-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-9-modal-content__container-body{padding-bottom:24px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-9-modal-content__children{padding-left:24px;padding-right:6px}}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner{background-color:var(--stcWhite);position:relative}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:after{background-color:var(--stcBlack);border-radius:12px;bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:hover:after{opacity:.1}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:active:after{opacity:.2}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-icon{fill:var(--stcBlack)}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/lib/components/Modal/_ModalContent/ModalContent.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _reactTransitionGroup = require("react-transition-group");
-var _ButtonClose = _interopRequireDefault(require("../../Buttons/ButtonClose/ButtonClose"));
 var _ScrollBar = _interopRequireDefault(require("../../ScrollBar/ScrollBar"));
 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; }
@@ -19,7 +18,14 @@ var ArrowLeft24 = function ArrowLeft24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
+    d: "M13.906 9.114a1.25 1.25 0 111.764 1.772l-3.871 3.853H23a1.25 1.25 0 110 2.5H11.777l3.893 3.875a1.25 1.25 0 01-1.764 1.772l-5.618-5.592a1.825 1.825 0 010-2.588l5.618-5.592z"
+  }));
+};
+var Cancel24 = function Cancel24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-modal-content');
@@ -33,6 +39,8 @@ var ModalContent = function ModalContent(_ref) {
     showBackButton = _ref$headerProps2.showBackButton,
     hideCloseButton = _ref$headerProps2.hideCloseButton,
     headerAdditionalContent = _ref$headerProps2.headerAdditionalContent,
+    headerCustomContent = _ref$headerProps2.headerCustomContent,
+    buttonsTheme = _ref$headerProps2.buttonsTheme,
     hasHeaderShadow = _ref$headerProps2.hasHeaderShadow,
     _ref$headerProps2$isS = _ref$headerProps2.isStickyHeader,
     isStickyHeaderProps = _ref$headerProps2$isS === void 0 ? true : _ref$headerProps2$isS,
@@ -50,6 +58,7 @@ var ModalContent = function ModalContent(_ref) {
     footerRef = _ref$refs.footerRef,
     containerInnerRef = _ref$refs.containerInnerRef,
     containerBodyRef = _ref$refs.containerBodyRef,
+    containerWrapRef = _ref$refs.containerWrapRef,
     isEnabledNativeScroll = _ref.isEnabledNativeScroll,
     isGrayColorModal = _ref.isGrayColorModal,
     isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
@@ -69,7 +78,7 @@ var ModalContent = function ModalContent(_ref) {
     showHeaderShadow = _React$useState2[0],
     setShowHeaderShadow = _React$useState2[1];
   var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
-  var showHeader = showHeaderMain || !!headerAdditionalContent;
+  var showHeader = showHeaderMain || !!headerAdditionalContent || !!headerCustomContent;
   var isStickyHeader = showHeader && isStickyHeaderProps;
   var isStaticHeader = showHeader && !isStickyHeaderProps;
   var isStickyFooter = !!footer && !!isStickyFooterProps;
@@ -80,22 +89,34 @@ var ModalContent = function ModalContent(_ref) {
   }, []);
   var renderBackButton = /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerBackButton), {
     className: cn('header-button', {
-      back: true
+      back: true,
+      theme: buttonsTheme
     }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
     type: "button",
-    onClick: onBackButtonClick
+    onClick: onBackButtonClick,
+    tabIndex: -1
   }), /*#__PURE__*/React.createElement("div", {
-    className: cn('header-inner')
+    className: cn('header-inner'),
+    role: "button",
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement(ArrowLeft24, {
     className: cn('header-icon')
   })));
-  var renderCloseButton = /*#__PURE__*/React.createElement(_ButtonClose["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
+  var renderCloseButton = /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
     className: cn('header-button', {
-      close: true
+      close: true,
+      theme: buttonsTheme
     }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
-    size: "medium",
-    onClick: onPopupClose
-  }));
+    type: "button",
+    onClick: onPopupClose,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header-inner'),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Cancel24, {
+    className: cn('header-icon')
+  })));
   var renderHeader = /*#__PURE__*/React.createElement("div", {
     className: cn('header', {
       shadow: showHeaderShadow,
@@ -105,11 +126,13 @@ var ModalContent = function ModalContent(_ref) {
     ref: headerRef
   }, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
     className: cn('header-main')
-  }, showBackButton && renderBackButton, !!headerTitle && /*#__PURE__*/React.createElement("div", {
+  }, showBackButton && renderBackButton, !!headerCustomContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('header-custom-content')
+  }, headerCustomContent), !!headerTitle && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
     className: cn('title-area', classes === null || classes === void 0 ? void 0 : classes.titleArea)
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('title', classes === null || classes === void 0 ? void 0 : classes.title)
-  }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && /*#__PURE__*/React.createElement("div", {
+  }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
     className: cn('header-additional')
   }, headerAdditionalContent));
   var renderFooter = /*#__PURE__*/React.createElement("div", {
@@ -159,6 +182,7 @@ var ModalContent = function ModalContent(_ref) {
     className: cn('background', classes === null || classes === void 0 ? void 0 : classes.background),
     onClick: isDisabledBackgroundClick ? undefined : onPopupClose
   })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: containerWrapRef,
     "in": isBottomTransitionIn,
     timeout: 190,
     onExited: onTransitionExited

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px;overflow:hidden}

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto;overflow:hidden}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}

package/dist/lib/components/Modal/_ModalMobile/ModalMobile.js

@@ -109,12 +109,11 @@ var ModalMobile = function ModalMobile(_a) {
       return;
     }
     window.cancelAnimationFrame(animationFrameId.current);
-    var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
-    var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
+    var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) - (initialTouchPosition || 0) > offsetHeightCenter;
     setInitialTouchPosition(null);
     onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
     onChangeTransitionStep(isMoreHalfClosed ? _Modal.MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : _Modal.MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
-  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, initialTouchPosition, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
   React.useEffect(function () {
     if (isSwipeDisabled) {
       return undefined;

package/dist/lib/components/NavArrow/NavArrow.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-9-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-9-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-9-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-9-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-9-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-9-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-9-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-9-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-9-nav-arrow_theme_white .mfui-9-nav-arrow__icon{fill:var(--stcBlack)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-nav-arrow: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-nav-arrow:focus{outline:none}.mfui-9-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-9-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-9-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-9-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-9-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-9-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-9-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-9-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-9-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-9-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-9-nav-arrow_theme_white .mfui-9-nav-arrow__icon{fill:var(--stcBlack)}

package/dist/lib/components/NavArrow/NavArrow.js

@@ -15,28 +15,28 @@ var ArrowLeft24 = function ArrowLeft24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
+    d: "M13.906 9.114a1.25 1.25 0 111.764 1.772l-3.871 3.853H23a1.25 1.25 0 110 2.5H11.777l3.893 3.875a1.25 1.25 0 01-1.764 1.772l-5.618-5.592a1.825 1.825 0 010-2.588l5.618-5.592z"
   }));
 };
 var ArrowRight24 = function ArrowRight24(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+    d: "M16.326 9.118a1.25 1.25 0 011.768-.004l5.618 5.592a1.825 1.825 0 010 2.588l-5.618 5.592a1.25 1.25 0 01-1.764-1.772l3.871-3.853H9a1.25 1.25 0 010-2.5h11.223l-3.893-3.875a1.25 1.25 0 01-.004-1.768z"
   }));
 };
 var ArrowLeft32 = function ArrowLeft32(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
+    d: "M16.964 10.562a1.972 1.972 0 112.757 2.822l-4.732 4.628h14.538a1.973 1.973 0 010 3.947H14.96l4.762 4.657a1.973 1.973 0 11-2.757 2.822l-7.633-7.465a2.76 2.76 0 010-3.946l7.633-7.465z"
   }));
 };
 var ArrowRight32 = function ArrowRight32(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
+    d: "M19.996 10.594a1.972 1.972 0 012.79-.032l7.633 7.465a2.759 2.759 0 010 3.946l-7.634 7.465a1.972 1.972 0 11-2.756-2.822l4.732-4.628H10.223a1.973 1.973 0 010-3.947H24.79l-4.761-4.657a1.974 1.974 0 01-.033-2.79z"
   }));
 };
 var Theme = exports.Theme = {

package/dist/lib/components/Notification/Notification.js

@@ -22,46 +22,50 @@ var ErrorIcon = function ErrorIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15 20.72V23h2v-2.28a2 2 0 10-2 0z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.5 13.008a1.5 1.5 0 011.5 1.5v7.513a6 6 0 01-6 6h-6a6 6 0 01-6-6v-7.513a1.5 1.5 0 011.5-1.5h15zm-7.501 4.398a1.501 1.501 0 00-.702 2.825v2.493a.751.751 0 001.5 0v-2.55a1.498 1.498 0 00-.798-2.768z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M16 4a6 6 0 00-6 6v2H8v8a8 8 0 0016 0v-8h-2v-2a6 6 0 00-6-6zm-4 6a4 4 0 018 0v2h-8zm10 10a6 6 0 01-12 0v-6h12z"
+    d: "M16 4.022a5.25 5.25 0 015.25 5.25v2.255h-1.5V9.272a3.75 3.75 0 00-7.5 0v2.255h-1.5V9.272A5.25 5.25 0 0116 4.022z"
   }));
 };
 var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M6 8h8l-4 5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
   }));
 };
 var RightArrow = function RightArrow(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
+    d: "M10.084 5.282a1 1 0 011.414.022l3.61 3.726c.522.54.523 1.4 0 1.94l-3.61 3.726a1 1 0 01-1.436-1.392l2.225-2.297H5.5a1 1 0 010-2h6.8l-2.239-2.31a1 1 0 01.023-1.415z"
   }));
 };
 var WarningIcon = function WarningIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.373 6.516c1.128-2.018 4.041-2.023 5.176-.008l9.067 16.094C28.725 24.571 27.296 27 25.03 27H6.97c-2.263 0-3.691-2.42-2.591-4.389l8.994-16.095zM16 21.163c-.829 0-1.5.657-1.5 1.467s.671 1.466 1.5 1.466c.828 0 1.5-.656 1.5-1.466 0-.81-.672-1.467-1.5-1.467zm0-10.3a1.5 1.5 0 00-1.5 1.5v5.867a1.5 1.5 0 003 0v-5.867a1.5 1.5 0 00-1.5-1.5z"
   }));
 };
 var SuccessIcon = function SuccessIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+    d: "M11.033 15.1l3.39 3.39 6.817-6.742c.578-.572 1.483-.595 2.02-.051.538.544.504 1.449-.075 2.021l-7.858 7.773c-.576.57-1.476.595-2.015.056L8.95 17.185c-.54-.541-.512-1.446.063-2.021.576-.576 1.48-.604 2.021-.063z"
   }));
 };
 var InfoIcon = function InfoIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15 12h2v-2h-2v2zm0 10h2v-8h-2v8zm1 6C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zm0-22C10.5 6 6 10.5 6 16s4.5 10 10 10 10-4.5 10-10S21.5 6 16 6z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 9.25c-.78 0-1.412.633-1.412 1.412v7.059a1.412 1.412 0 102.824 0v-7.059c0-.78-.632-1.412-1.412-1.412zm-.144-4.477a1.412 1.412 0 100 2.824 1.412 1.412 0 000-2.824z"
   }));
 };
 var TIMEOUT_DELAY = 400;

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-pagination-button{display:-webkit-box;display:-ms-flexbox;display:flex;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;background-color:transparent;border:1px solid transparent;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:32px;justify-content:center;padding:0;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-pagination-button svg{width:100%}.mfui-9-pagination-button:disabled{pointer-events:none}.mfui-9-pagination-button_auto-width{min-width:32px;padding:0 8px;width:auto}.mfui-9-pagination-button_active{border-color:var(--brandGreen);pointer-events:none}.mfui-9-pagination-button_theme_default{color:var(--content)}.mfui-9-pagination-button_theme_default svg{fill:var(--content)}.mfui-9-pagination-button_theme_default:hover{background-color:var(--spbSky0)}.mfui-9-pagination-button_theme_default.mfui-9-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}.mfui-9-pagination-button_theme_light{color:var(--stcWhite)}.mfui-9-pagination-button_theme_light svg{fill:var(--stcWhite)}.mfui-9-pagination-button_theme_light:hover{background-color:var(--stcWhite20)}.mfui-9-pagination-button_theme_light.mfui-9-pagination-button_active{border-color:var(--stcWhite)}.mfui-9-pagination-button_theme_gray{color:var(--content)}.mfui-9-pagination-button_theme_gray svg{fill:var(--content)}.mfui-9-pagination-button_theme_gray:hover{background-color:var(--base)}.mfui-9-pagination-button_theme_gray.mfui-9-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-pagination-button{display:-webkit-box;display:-ms-flexbox;display:flex;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;background-color:transparent;border:1px solid transparent;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:32px;justify-content:center;padding:0;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-pagination-button: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-pagination-button:focus{outline:none}.mfui-9-pagination-button svg{width:100%}.mfui-9-pagination-button:disabled{pointer-events:none}.mfui-9-pagination-button_auto-width{min-width:32px;padding:0 8px;width:auto}.mfui-9-pagination-button_active{border-color:var(--brandGreen);pointer-events:none}.mfui-9-pagination-button_theme_default{color:var(--content)}.mfui-9-pagination-button_theme_default svg{fill:var(--content)}.mfui-9-pagination-button_theme_default:hover{background-color:var(--spbSky0)}.mfui-9-pagination-button_theme_default.mfui-9-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}.mfui-9-pagination-button_theme_light{color:var(--stcWhite)}.mfui-9-pagination-button_theme_light svg{fill:var(--stcWhite)}.mfui-9-pagination-button_theme_light:hover{background-color:var(--stcWhite20)}.mfui-9-pagination-button_theme_light.mfui-9-pagination-button_active{border-color:var(--stcWhite)}.mfui-9-pagination-button_theme_gray{color:var(--content)}.mfui-9-pagination-button_theme_gray svg{fill:var(--content)}.mfui-9-pagination-button_theme_gray:hover{background-color:var(--base)}.mfui-9-pagination-button_theme_gray.mfui-9-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}

package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-pagination-navigation__icon{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-pagination-navigation__skip-icon-hover{height:20px;left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-9-pagination-navigation__button_direction_left .mfui-9-pagination-navigation__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-pagination-navigation__button:disabled .mfui-9-pagination-navigation__arrow-icon{opacity:.25}.mfui-9-pagination-navigation__button:not(:disabled):hover .mfui-9-pagination-navigation__skip-icon-base{opacity:0}.mfui-9-pagination-navigation__button:not(:disabled):hover .mfui-9-pagination-navigation__skip-icon-hover{opacity:1}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-pagination-navigation__icon{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-pagination-navigation__skip-icon-base{height:20px;width:20px}.mfui-9-pagination-navigation__skip-icon-hover{height:20px;left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-9-pagination-navigation__button_direction_left .mfui-9-pagination-navigation__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-pagination-navigation__button:disabled .mfui-9-pagination-navigation__arrow-icon{opacity:.25}.mfui-9-pagination-navigation__button:not(:disabled):hover .mfui-9-pagination-navigation__skip-icon-base{opacity:0}.mfui-9-pagination-navigation__button:not(:disabled):hover .mfui-9-pagination-navigation__skip-icon-hover{opacity:1}