@megafon/ui-lk-vas 0.10.9 → 0.10.12

package/dist/es/components/Header/components/_HeaderButton/HeaderButton.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./HeaderButton.css";
+var ProfileIcon = function ProfileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+var SupportIcon = function SupportIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M26.71 11.65h-1.53A8.43 8.43 0 0016.76 4h-1.52A8.18 8.18 0 007 11.65H5.29A3.22 3.22 0 002 14.94V18a3.19 3.19 0 003.29 3.29H9v-8.64A7.56 7.56 0 019.19 11 19.33 19.33 0 0019 13.65h4.24L23 21.82c0 1.87-.56 3.84-2.06 4.12A3.5 3.5 0 0017.5 23h-2a3.5 3.5 0 000 7h2a3.5 3.5 0 003.15-2c2.64 0 4.35-2.45 4.35-6.15v-.56h1.69A3.19 3.19 0 0030 18v-3.06a3.22 3.22 0 00-3.29-3.29zM7 19.29H5.29A1.3 1.3 0 014 18v-3.06a1.3 1.3 0 011.29-1.29H7zm12-7.65a17.31 17.31 0 01-9.09-2.55A6 6 0 0115.24 6h1.53a6.44 6.44 0 016.4 5.65zM17.5 28h-2a1.5 1.5 0 010-3h2a1.5 1.5 0 010 3zM28 18a1.3 1.3 0 01-1.29 1.29h-1.64l.14-5.65h1.5a1.3 1.3 0 011.29 1.3z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 12.5,
+    cy: 16.5,
+    r: 1.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 19.5,
+    cy: 16.5,
+    r: 1.5
+  }));
+};
+var ArrowIcon = function ArrowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+var cn = cnCreate('mfui-lkvas-button');
+var HeaderButton = function HeaderButton(_ref) {
+  var className = _ref.className,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    icon = _ref.icon,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'green' : _ref$color,
+    isOpened = _ref.isOpened,
+    dataAttrs = _ref.dataAttrs;
+  var showText = !!title || !!subtitle;
+  var renderIcon = function renderIcon() {
+    switch (icon) {
+      case 'support':
+        return /*#__PURE__*/React.createElement(SupportIcon, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.supportIcon), {
+          className: cn('support-svg')
+        }));
+      case 'profile':
+        return /*#__PURE__*/React.createElement(ProfileIcon, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.profileIcon), {
+          className: cn('profile-svg')
+        }));
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      color: color,
+      opened: isOpened,
+      'has-icon': !!icon
+    }, [className]),
+    type: "button"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, renderIcon(), showText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text')
+  }), !!title && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
+    className: cn('title')
+  }), title), !!subtitle && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtitle), {
+    className: cn('subtitle')
+  }), subtitle)), /*#__PURE__*/React.createElement("div", {
+    className: cn('arrow')
+  }, /*#__PURE__*/React.createElement(ArrowIcon, {
+    className: cn('arrow-svg')
+  }))));
+};
+export default HeaderButton;

package/dist/es/components/Header/components/_HeaderFavorites/HeaderFavorites.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-favorites{max-width:256px;min-width:100px}

package/dist/es/components/Header/components/_HeaderFavorites/HeaderFavorites.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ItemType } from '../../../_DropdownItem/DropdownItem';
+import './HeaderFavorites.scss';
+export type FavoritesType = {
+    /** Заголовок */
+    title: string;
+    /** Элементы основного списка */
+    items: ItemType[];
+    /** Элементы списка действий */
+    actions: ItemType[];
+};
+export interface IHeaderFavoritesProps extends FavoritesType {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const HeaderFavorites: React.FC<IHeaderFavoritesProps>;
+export default HeaderFavorites;

package/dist/es/components/Header/components/_HeaderFavorites/HeaderFavorites.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Dropdown from "../../../_Dropdown/Dropdown";
+import DropdownItem from "../../../_DropdownItem/DropdownItem";
+import HeaderButton from "../_HeaderButton/HeaderButton";
+import "./HeaderFavorites.css";
+var cn = cnCreate('mfui-lkvas-favorites');
+var HeaderFavorites = function HeaderFavorites(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    title = _ref.title,
+    items = _ref.items,
+    actions = _ref.actions;
+  var renderTrigger = function renderTrigger(isOpened) {
+    return /*#__PURE__*/React.createElement(HeaderButton, {
+      title: title,
+      color: "green",
+      isOpened: isOpened
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    className: cn('dropdown'),
+    renderTrigger: renderTrigger
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, item, {
+      key: item.id + item.title
+    }));
+  }), actions.map(function (action, i) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, action, {
+      color: "green",
+      hasTopBorder: i === 0,
+      key: action.id + action.title
+    }));
+  })));
+};
+export default HeaderFavorites;

package/dist/es/components/Header/components/_HeaderFinance/HeaderFinance.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-finance{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.mfui-lkvas-finance__item{white-space:nowrap}.mfui-lkvas-finance__value{font-weight:500}

package/dist/es/components/Header/components/_HeaderFinance/HeaderFinance.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import './HeaderFinance.scss';
+export type FinanceType = {
+    /** Баланс */
+    balance?: {
+        /** Заголовок */
+        title: string;
+        /** Значение */
+        value: string;
+    };
+    /** Бонусы */
+    bonuses?: {
+        /** Заголовок */
+        title: string;
+        /** Значение */
+        value: string;
+    };
+};
+export interface IHeaderFinanceProps extends FinanceType {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        balance?: Record<string, string>;
+        bonuses?: Record<string, string>;
+    };
+}
+declare const HeaderFinance: React.FC<IHeaderFinanceProps>;
+export default HeaderFinance;

package/dist/es/components/Header/components/_HeaderFinance/HeaderFinance.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./HeaderFinance.css";
+var cn = cnCreate('mfui-lkvas-finance');
+var HeaderFinance = function HeaderFinance(_ref) {
+  var className = _ref.className,
+    balance = _ref.balance,
+    bonuses = _ref.bonuses,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), !!balance && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.balance), {
+    className: cn('item')
+  }), balance.title, ": ", /*#__PURE__*/React.createElement("b", {
+    className: cn('value')
+  }, balance.value)), !!bonuses && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.bonuses), {
+    className: cn('item')
+  }), bonuses.title, ": ", /*#__PURE__*/React.createElement("b", {
+    className: cn('value')
+  }, bonuses.value)));
+};
+export default HeaderFinance;

package/dist/es/components/Header/components/_HeaderLkSelect/HeaderLkSelect.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-lk-select{margin-right:auto;position:relative}.mfui-lkvas-lk-select:before{border-left:1px solid var(--spbSky3);content:"";height:20px;left:-8px;position:absolute;top:50%;translate:0 -50%;width:1px}.mfui-lkvas-lk-select__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-weight:500;-webkit-transition:color .3s;transition:color .3s;white-space:nowrap}@media (pointer:fine){.mfui-lkvas-lk-select__title:hover{color:var(--brandGreen)}}.mfui-lkvas-lk-select__title:active{color:var(--content)}.mfui-lkvas-lk-select__arrow-svg{-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;-webkit-transition:rotate .3s;transition:rotate .3s;width:20px;fill:currentColor}.mfui-lkvas-lk-select__arrow-svg_opened{rotate:-180deg}

package/dist/es/components/Header/components/_HeaderLkSelect/HeaderLkSelect.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ItemType } from '../../../_DropdownItem/DropdownItem';
+import './HeaderLkSelect.scss';
+export type LkSelectType = {
+    /** Заголовок */
+    title: string;
+    /** Элементы основного списка */
+    items: ItemType[];
+    /** Элементы списка действий */
+    actions: ItemType[];
+};
+export interface IHeaderLkSelectProps extends LkSelectType {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const HeaderLkSelect: React.FC<IHeaderLkSelectProps>;
+export default HeaderLkSelect;

package/dist/es/components/Header/components/_HeaderLkSelect/HeaderLkSelect.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Dropdown from "../../../_Dropdown/Dropdown";
+import DropdownItem from "../../../_DropdownItem/DropdownItem";
+import "./HeaderLkSelect.css";
+var ArrowIcon = function ArrowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+var cn = cnCreate('mfui-lkvas-lk-select');
+var HeaderLkSelect = function HeaderLkSelect(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    title = _ref.title,
+    items = _ref.items,
+    actions = _ref.actions;
+  var renderTrigger = function renderTrigger(isOpened) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('title')
+    }, title, /*#__PURE__*/React.createElement(ArrowIcon, {
+      className: cn('arrow-svg', {
+        opened: isOpened
+      })
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    className: cn('dropdown'),
+    position: "left",
+    renderTrigger: renderTrigger
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, item, {
+      key: item.id + item.title
+    }));
+  }), actions.map(function (action, i) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, action, {
+      color: "green",
+      hasTopBorder: i === 0,
+      key: action.id + action.title
+    }));
+  })));
+};
+export default HeaderLkSelect;

package/dist/es/components/Header/components/_HeaderLogo/HeaderLogo.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-lk-logo{display:block;-ms-flex-negative:0;flex-shrink:0;height:20px;width:113px}.mfui-lkvas-lk-logo_clickable{cursor:pointer}.mfui-lkvas-lk-logo__svg{display:block;height:100%;width:100%}

package/dist/es/components/Header/components/_HeaderLogo/HeaderLogo.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import './HeaderLogo.scss';
+export type LogoType = {
+    /** Ссылка */
+    href?: string;
+    /** Обработчик клика */
+    onClick?: () => void;
+    /** Функция рендера компонента-обертки */
+    renderWrapper?: (node: React.ReactNode) => React.ReactNode;
+};
+export interface IHeaderLogoProps extends LogoType {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const HeaderLogo: React.FC<IHeaderLogoProps>;
+export default HeaderLogo;

package/dist/es/components/Header/components/_HeaderLogo/HeaderLogo.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./HeaderLogo.css";
+var LogoSvg = function LogoSvg(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 113,
+    height: 20,
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#LogoSvg__clip0_694_495)"
+  }, /*#__PURE__*/React.createElement("mask", {
+    id: "LogoSvg__a",
+    style: {
+      maskType: 'luminance'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 0,
+    y: 0,
+    width: 113,
+    height: 20
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h113v20H0V0z",
+    fill: "#fff"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#LogoSvg__a)",
+    fill: "#00B956"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16.746 15.453a1.23 1.23 0 01-.687-.213 1.264 1.264 0 01-.188-1.925 1.236 1.236 0 011.118-.342 1.233 1.233 0 01.903.75 1.263 1.263 0 01-.562 1.582c-.18.097-.38.148-.584.148zm-2.89 0c-.329 0-.644-.132-.876-.367a1.259 1.259 0 010-1.77 1.232 1.232 0 011.752 0 1.258 1.258 0 010 1.77 1.232 1.232 0 01-.876.367zm-2.89 0c-.328 0-.643-.132-.875-.367a1.258 1.258 0 010-1.77 1.232 1.232 0 011.752 0 1.258 1.258 0 010 1.77 1.233 1.233 0 01-.876.367zm.202-15.38v10.314a.816.816 0 01-.238.57.8.8 0 01-.567.236H9.099a.112.112 0 00-.077.033.114.114 0 00-.032.076v8.655a9.856 9.856 0 007.698-2.673 10.02 10.02 0 002.813-4.808c.466-1.84.404-3.776-.179-5.582a10.002 10.002 0 00-3.114-4.614A9.845 9.845 0 0011.129.073"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.005 8.262a1.23 1.23 0 01-.688-.212 1.27 1.27 0 01-.19-1.928 1.231 1.231 0 011.743.01 1.262 1.262 0 01.01 1.763 1.231 1.231 0 01-.875.367zM9.9 0a9.842 9.842 0 00-6.616 2.568A10.034 10.034 0 00.414 7.155a10.135 10.135 0 00-.084 5.43 10.043 10.043 0 002.727 4.677 9.86 9.86 0 004.738 2.549v-8.992a.82.82 0 01.23-.556.801.801 0 01.546-.244h1.25a.11.11 0 00.109-.103V0h-.029zm17.654 0h-.682v20h.682V0zm7.074 15.593h1.901V5.61h4.762v9.983h1.9V3.884h-8.563v11.709zm17.297-6.775a3.716 3.716 0 00-1.245-.895 3.863 3.863 0 00-1.604-.311c-.469.003-.93.117-1.348.333-.424.202-.782.52-1.034.92V7.8H44.89v11.693h1.806v-4.938c.252.4.61.72 1.034.921.417.216.879.33 1.347.333a3.932 3.932 0 001.605-.325 3.765 3.765 0 001.245-.929c.53-.59.886-1.319 1.029-2.103a4.34 4.34 0 00-.218-2.337 4.126 4.126 0 00-.81-1.297zm-.863 3.83a2.224 2.224 0 01-1.178 1.32c-.29.136-.607.205-.928.2a2.184 2.184 0 01-1.306-.407 2.226 2.226 0 01-.818-1.11 2.899 2.899 0 01-.155-.953c-.003-.325.05-.648.155-.954.15-.448.435-.837.817-1.11.382-.272.84-.415 1.307-.406.32-.006.638.063.928.2a2.23 2.23 0 011.178 1.313 2.927 2.927 0 010 1.907zm10.07-3.83a3.816 3.816 0 00-1.29-.895 4.124 4.124 0 00-1.676-.326c-.572-.01-1.14.1-1.669.326a3.794 3.794 0 00-1.275.895c-.353.38-.63.825-.817 1.311a4.396 4.396 0 000 3.136c.19.477.467.915.817 1.29.355.387.784.696 1.26.91a4.138 4.138 0 001.67.326 4.182 4.182 0 001.676-.326 3.87 3.87 0 001.304-.91c.358-.376.64-.818.827-1.304a4.396 4.396 0 000-3.136 3.93 3.93 0 00-.827-1.297zm-.85 3.83c-.104.288-.26.555-.462.785a2.225 2.225 0 01-.722.534 2.146 2.146 0 01-.936.2 2.06 2.06 0 01-.924-.2 2.203 2.203 0 01-.724-.536 2.237 2.237 0 01-.454-.783 2.894 2.894 0 01-.156-.955c-.002-.324.05-.647.156-.953a2.204 2.204 0 011.178-1.32c.289-.137.605-.206.924-.2.323-.004.642.064.936.2.274.127.52.31.722.535.202.23.36.496.462.785a2.816 2.816 0 010 1.907zm10.203-2.843a3.311 3.311 0 00-1.084-.732 3.38 3.38 0 00-1.39-.277h-2.479v-3.19h5.04V3.884h-6.93v11.693h4.38c.476.008.949-.084 1.39-.267a3.17 3.17 0 001.067-.729c.302-.314.538-.688.693-1.097.317-.84.317-1.77 0-2.61a3.125 3.125 0 00-.687-1.07zm-1.38 3.577a1.342 1.342 0 01-1.084.492h-2.478v-3.368h2.478a1.328 1.328 0 011.084.493 1.962 1.962 0 010 2.39v-.007zM78.041 8.5l-3.426 4.4V7.796h-1.798v7.796h1.798v-.655l3.426-4.363v5.018h1.798V7.798h-1.798V8.5zm7.618 3.077a1.92 1.92 0 001.131-.544 1.73 1.73 0 00.437-1.28 1.89 1.89 0 00-.759-1.557 3.389 3.389 0 00-2.135-.584 3.226 3.226 0 00-2.168.701 2.352 2.352 0 00-.823 1.857h1.752a1.235 1.235 0 01.264-.793 1.181 1.181 0 01.96-.329 1.28 1.28 0 01.868.278.852.852 0 01.321.694 1.058 1.058 0 01-.281.768 1.39 1.39 0 01-1.008.284h-.777v1.273h.877c.37-.034.738.073 1.034.299a1.009 1.009 0 01.322.771.734.734 0 01-.361.683c-.261.154-.56.23-.86.22a1.674 1.674 0 01-1.11-.31 1.002 1.002 0 01-.36-.812H81.23a2.424 2.424 0 00.802 1.9 3.348 3.348 0 002.287.709c.394.002.787-.05 1.167-.157.347-.098.676-.25.975-.453.276-.19.504-.439.668-.731.17-.3.256-.641.25-.987a1.758 1.758 0 00-.506-1.33 2.076 2.076 0 00-1.214-.57zm8.39-.702h-3.523V7.798h-1.799v7.795h1.799v-3.198h3.522v3.198h1.803V7.798h-1.803v3.077zm9.342-2.266a3.53 3.53 0 00-1.142-.73 3.618 3.618 0 00-1.394-.267 4.051 4.051 0 00-1.622.307c-.46.187-.87.477-1.204.848a3.83 3.83 0 00-.721 1.304 5.018 5.018 0 00-.257 1.622 5.26 5.26 0 00.238 1.605c.15.48.396.924.722 1.304.332.376.741.674 1.2.87.537.223 1.114.331 1.694.318a4.04 4.04 0 001.341-.209 3.548 3.548 0 001.04-.558 2.885 2.885 0 001.084-1.777h-1.807a1.796 1.796 0 01-.513.732 1.687 1.687 0 01-1.122.303 2.459 2.459 0 01-.943-.161 1.603 1.603 0 01-.618-.434 1.836 1.836 0 01-.362-.643 3.633 3.633 0 01-.148-.787h5.506c.039-.218.064-.44.076-.661v-.475a3.469 3.469 0 00-1.033-2.5l-.015-.011zM98.835 10.9A1.794 1.794 0 0199.4 9.44a2.06 2.06 0 011.406-.487 1.748 1.748 0 011.376.54 1.8 1.8 0 01.491 1.408h-3.837zm12.381 2.013a2.016 2.016 0 01-.542.91c-.335.25-.749.369-1.164.333a2.236 2.236 0 01-.993-.2 1.852 1.852 0 01-.675-.535 2.178 2.178 0 01-.42-.774 3.615 3.615 0 01-.122-.955c-.003-.32.038-.638.122-.946.08-.284.212-.55.391-.785a1.844 1.844 0 011.553-.731c.476-.044.951.095 1.329.39.277.276.45.64.488 1.031h1.806a3.67 3.67 0 00-.274-1.096 2.851 2.851 0 00-.661-.969 3.347 3.347 0 00-1.106-.694 4.326 4.326 0 00-1.611-.267 3.749 3.749 0 00-1.655.344 3.615 3.615 0 00-1.199.91c-.324.384-.57.83-.723 1.311a4.857 4.857 0 000 3.07c.154.479.4.922.723 1.305.335.386.746.695 1.207.91a3.796 3.796 0 001.661.343 4.65 4.65 0 001.482-.215c.395-.134.763-.341 1.084-.61.298-.256.543-.57.722-.922.176-.355.298-.736.361-1.129l-1.784-.029z"
+  }))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "LogoSvg__clip0_694_495"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h113v20H0z"
+  }))));
+};
+var cn = cnCreate('mfui-lkvas-lk-logo');
+var HeaderLogo = function HeaderLogo(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    href = _ref.href,
+    onClick = _ref.onClick,
+    renderWrapper = _ref.renderWrapper;
+  var Element = href ? 'a' : 'div';
+  var isClickableElement = !!href || !!onClick;
+  var rootElement = /*#__PURE__*/React.createElement(Element, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      clickable: isClickableElement
+    }, [className]),
+    href: href,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(LogoSvg, {
+    className: cn('svg')
+  }));
+  return renderWrapper ? renderWrapper(rootElement) : rootElement;
+};
+export default HeaderLogo;

package/dist/es/components/Header/components/_HeaderSupport/HeaderSupport.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ItemType } from '../../../_DropdownItem/DropdownItem';
+export type SupportType = {
+    /** Элементы основного списка */
+    items: ItemType[];
+    /** Элементы информационного списка */
+    info: {
+        title: string;
+        subtitle: string;
+    }[];
+};
+export interface IHeaderSupportProps extends SupportType {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const HeaderSupport: React.FC<IHeaderSupportProps>;
+export default HeaderSupport;

package/dist/es/components/Header/components/_HeaderSupport/HeaderSupport.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Dropdown from "../../../_Dropdown/Dropdown";
+import DropdownInfo from "../../../_DropdownInfo/DropdownInfo";
+import DropdownItem from "../../../_DropdownItem/DropdownItem";
+import HeaderButton from "../_HeaderButton/HeaderButton";
+var cn = cnCreate('mfui-lkvas-support');
+var HeaderSupport = function HeaderSupport(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    items = _ref.items,
+    info = _ref.info;
+  var renderTrigger = function renderTrigger(isOpened) {
+    return /*#__PURE__*/React.createElement(HeaderButton, {
+      icon: "support",
+      color: "green-soft",
+      isOpened: isOpened
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    className: cn('dropdown'),
+    renderTrigger: renderTrigger
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, item, {
+      key: item.id + item.title
+    }));
+  }), info.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(DropdownInfo, _extends({}, item, {
+      hasTopBorder: i === 0,
+      key: i + item.title
+    }));
+  })));
+};
+export default HeaderSupport;

package/dist/es/components/Layout/Layout.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-layout{font-family:inherit;font-size:15px;height:100vh;line-height:24px;overflow-x:auto;overflow-y:hidden}.mfui-lkvas-layout ::-webkit-scrollbar{width:12px}.mfui-lkvas-layout ::-webkit-scrollbar-track{background-color:var(--spbSky1)}.mfui-lkvas-layout ::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-lkvas-layout__container{background-color:var(--base);-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-areas:"header header" "navbar main";grid-template-columns:264px auto;grid-template-rows:72px minmax(0,auto);height:100%;min-width:1280px}.mfui-lkvas-layout__header{-webkit-box-sizing:border-box;box-sizing:border-box;grid-area:header}.mfui-lkvas-layout__navbar{-webkit-box-sizing:border-box;box-sizing:border-box;grid-area:navbar}.mfui-lkvas-layout__main{-webkit-box-sizing:border-box;box-sizing:border-box;grid-area:main;overflow-y:auto}.mfui-lkvas-layout__content{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:1656px;padding:32px 32px 96px}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './Layout.scss';
+export interface ILayoutProps {
+    /** Компонент шапки */
+    header: React.ReactNode;
+    /** Компонент боковой панели */
+    navBar: React.ReactNode;
+}
+declare const Header: React.FC<React.PropsWithChildren<ILayoutProps>>;
+export default Header;

package/dist/es/components/Layout/Layout.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./Layout.css";
+var cn = cnCreate('mfui-lkvas-layout');
+var Header = function Header(_ref) {
+  var header = _ref.header,
+    navBar = _ref.navBar,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, header), /*#__PURE__*/React.createElement("div", {
+    className: cn('navbar')
+  }, navBar), /*#__PURE__*/React.createElement("main", {
+    className: cn('main')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children))));
+};
+export default Header;

package/dist/es/components/NavBar/NavBar.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-navbar{-webkit-box-pack:justify;-ms-flex-pack:justify;background-color:var(--spbSky0);-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:space-between;max-width:264px;padding:20px 20px 32px;width:100%}.mfui-lkvas-navbar,.mfui-lkvas-navbar__nav{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-lkvas-navbar__nav{gap:2px;overflow-y:auto}.mfui-lkvas-navbar__nav::-webkit-scrollbar{width:12px}.mfui-lkvas-navbar__nav::-webkit-scrollbar-track{background-color:var(--spbSky1)}.mfui-lkvas-navbar__nav::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-lkvas-navbar__button{-ms-flex-negative:0;flex-shrink:0;margin-top:24px}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { INavBarItem } from './components/_NavBarItem/NavBarItem';
+import './NavBar.scss';
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export interface INavBar {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Элементы списка */
+    items: INavBarItem[];
+    /** Кнопка */
+    button?: ButtonType;
+}
+declare const NavBar: React.FC<INavBar>;
+export default NavBar;

package/dist/es/components/NavBar/NavBar.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import NavBarItem from "./components/_NavBarItem/NavBarItem";
+import "./NavBar.css";
+var cn = cnCreate('mfui-lkvas-navbar');
+var NavBar = function NavBar(_ref) {
+  var className = _ref.className,
+    items = _ref.items,
+    button = _ref.button;
+  return /*#__PURE__*/React.createElement("aside", {
+    className: cn([className])
+  }, /*#__PURE__*/React.createElement("nav", {
+    className: cn('nav'),
+    role: "navigation"
+  }, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(NavBarItem, _extends({
+      key: item.title + index
+    }, item));
+  })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement(Button, {
+    className: cn('button'),
+    type: "outline",
+    fullWidth: true,
+    href: button.href,
+    target: button.target,
+    rel: button.rel
+  }, button.title));
+};
+export default NavBar;

package/dist/es/components/NavBar/components/_NavBarItem/NavBarItem.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-navbar-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;justify-content:flex-start;padding:10px;text-decoration:none;-webkit-transition:background-color;transition:background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-lkvas-navbar-item:hover{background-color:var(--base);text-decoration:none}.mfui-lkvas-navbar-item__icon{display:block;height:32px;max-width:32px;-o-object-fit:cover;object-fit:cover;width:32px}.mfui-lkvas-navbar-item__title{font-size:15px;font-weight:500;line-height:24px;line-height:18px}.mfui-lkvas-navbar-item_active{background-color:var(--base)}

package/dist/es/components/NavBar/components/_NavBarItem/NavBarItem.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './NavBarItem.scss';
+export interface INavBarItem {
+    /** Заголовок */
+    title: string;
+    /** Ссылка на иконку в формате .png */
+    iconSrc: string;
+    /** Статус активности  */
+    isActive?: boolean;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Функция рендера компонента-обертки */
+    renderWrapper?: (item: React.ReactNode) => React.ReactNode;
+}
+declare const NavBarItem: React.FC<INavBarItem>;
+export default NavBarItem;

package/dist/es/components/NavBar/components/_NavBarItem/NavBarItem.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../../helpers/setRelAttribute";
+import "./NavBarItem.css";
+var cn = cnCreate('mfui-lkvas-navbar-item');
+var NavBarItem = function NavBarItem(_ref) {
+  var title = _ref.title,
+    iconSrc = _ref.iconSrc,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    onClick = _ref.onClick,
+    renderWrapper = _ref.renderWrapper;
+  var ElementType = href ? 'a' : 'div';
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  var item = /*#__PURE__*/React.createElement(ElementType, {
+    className: cn({
+      active: isActive
+    }),
+    tabIndex: 0,
+    href: href,
+    rel: setRelAttribute(rel, target),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('icon'),
+    src: iconSrc,
+    alt: "icon"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, title));
+  return renderWrapper ? renderWrapper(item) : item;
+};
+export default NavBarItem;

package/dist/es/components/Table/Table.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-table{position:relative}.mfui-lkvas-table:after,.mfui-lkvas-table:before{height:18px;left:0;position:absolute;right:0;z-index:2}.mfui-lkvas-table:not(.mfui-lkvas-table_v-scroll_start):not(.mfui-lkvas-table_v-scroll_none):before{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));content:"";top:0}.mfui-lkvas-table_h-scroll_none:not(.mfui-lkvas-table_v-scroll_end):not(.mfui-lkvas-table_v-scroll_none):after{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(0deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;content:""}.mfui-lkvas-table__inner{border-radius:12px 12px 0 0;overflow:auto;position:relative;z-index:1}.mfui-lkvas-table__inner::-webkit-scrollbar{height:12px;width:12px}.mfui-lkvas-table__inner::-webkit-scrollbar,.mfui-lkvas-table__inner::-webkit-scrollbar-track{background-color:var(--spbSky1);border-radius:100px}.mfui-lkvas-table__inner::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-lkvas-table__table{background-color:var(--base);border-collapse:collapse;border-spacing:0;border-width:0;width:100%}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import './Table.scss';
+export interface ITable {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Высота таблицы */
+    height?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
+}
+declare const Table: React.FC<React.PropsWithChildren<ITable>>;
+export default Table;