@megafon/ui-lk-vas 0.2.0 → 0.4.0

package/dist/es/components/Cards/CardBig/CardBig.css

@@ -0,0 +1,57 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-card-big {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--spbSky2);
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: var(--base);
+}
+.mfui-lkvas-card-big__item {
+  padding: 16px 12px;
+}
+.mfui-lkvas-card-big__item:first-child {
+  padding-right: 24px;
+  padding-left: 24px;
+}
+.mfui-lkvas-card-big__item:nth-child(2) {
+  padding-left: 24px;
+}
+.mfui-lkvas-card-big__item:last-child {
+  padding-right: 24px;
+}
+.mfui-lkvas-card-big_multiline {
+  grid-template-rows: repeat(2, -webkit-min-content);
+  grid-template-rows: repeat(2, min-content);
+}
+.mfui-lkvas-card-big_multiline .mfui-lkvas-card-big__item:nth-child(2) {
+  padding-right: 24px;
+  padding-left: 24px;
+}
+.mfui-lkvas-card-big_multiline .mfui-lkvas-card-big__item:nth-child(3) {
+  padding-left: 24px;
+}
+.mfui-lkvas-card-big_multiline .mfui-lkvas-card-big__item:nth-child(4) {
+  padding-left: 24px;
+}
+.mfui-lkvas-card-big_multiline .mfui-lkvas-card-big__item:nth-last-child(2) {
+  padding-right: 24px;
+}
+.mfui-lkvas-card-big_multiline .mfui-lkvas-card-big__item:nth-child(2n) {
+  padding-top: 6px;
+}
+.mfui-lkvas-card-big_multiline .mfui-lkvas-card-big__item:nth-child(2n+1) {
+  padding-bottom: 6px;
+}

package/dist/es/components/Cards/CardBig/CardBig.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type CardCellType } from '../components/_CardCell/CardCell';
+import './CardBig.scss';
+export interface ICardBig {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Массив элементов */
+    items: CardCellType[];
+    /** Расположение элементов в 2 строки. Элементы размещаются последовательно по каждому столбцу, начиная с первого.  */
+    isTwoLine?: boolean;
+}
+declare const CardSmall: React.FC<ICardBig>;
+export default CardSmall;

package/dist/es/components/Cards/CardBig/CardBig.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 { cnCreate } from '@megafon/ui-helpers';
+import CardCell from "../components/_CardCell/CardCell";
+import "./CardBig.css";
+var cn = cnCreate('mfui-lkvas-card-big');
+var CardSmall = function CardSmall(_ref) {
+  var className = _ref.className,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$isTwoLine = _ref.isTwoLine,
+    isTwoLine = _ref$isTwoLine === void 0 ? false : _ref$isTwoLine;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      multiline: isTwoLine
+    }, [className])
+  }, items.map(function (item, index) {
+    var isFirstItem = index === 0;
+    var isSecondItem = index === 1;
+    var isFirstColumn = isFirstItem || isTwoLine && isSecondItem;
+    return /*#__PURE__*/React.createElement(CardCell, _extends({
+      key: index,
+      className: cn('item')
+    }, item, {
+      isFirstCell: isFirstItem,
+      hasBackgroundFill: isFirstColumn
+    }));
+  }));
+};
+export default CardSmall;

package/dist/es/components/Cards/CardSmall/CardSmall.css

@@ -0,0 +1,84 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-card-small {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 233px;
+  padding: 16px;
+  border: 1px solid var(--spbSky2);
+  border-radius: 12px;
+  background-color: var(--base);
+}
+.mfui-lkvas-card-small_adaptive {
+  width: 100%;
+  max-width: 100%;
+}
+.mfui-lkvas-card-small__close-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 4px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--spbSky0);
+  cursor: pointer;
+}
+.mfui-lkvas-card-small__close-icon {
+  width: 100%;
+  height: 100%;
+  fill: var(--spbSky3);
+}
+.mfui-lkvas-card-small__items, .mfui-lkvas-card-small__buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 12px;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-lkvas-card-small__item:first-child {
+  padding-right: 28px;
+}
+.mfui-lkvas-card-small__buttons {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--spbSky1);
+}
+.mfui-lkvas-card-small__button {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: none;
+  color: var(--systemBlue);
+  font: inherit;
+  text-decoration: none;
+  background-color: transparent;
+  cursor: pointer;
+}

package/dist/es/components/Cards/CardSmall/CardSmall.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { type CardCellType } from '../components/_CardCell/CardCell';
+import './CardSmall.scss';
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export type CardSmallCellType = Pick<CardCellType, 'title' | 'titleColor' | 'subtitle'>;
+export interface ICardSmall {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Массив элементов */
+    items: CardSmallCellType[];
+    /** Кнопки действий */
+    actionButtons: ButtonType[];
+    /** Обработчик клика по кнопке-крестику "Закрыть" */
+    onCloseButtonClick?: () => void;
+    /** Растягивать компонент на всю ширину */
+    isAdaptive?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        actionButton?: Record<string, string>;
+        closeButton?: Record<string, string>;
+    };
+}
+declare const CardSmall: React.FC<ICardSmall>;
+export default CardSmall;

package/dist/es/components/Cards/CardSmall/CardSmall.js

@@ -0,0 +1,68 @@
+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 { setRelAttribute } from "../../../helpers/setRelAttribute";
+import CardCell from "../components/_CardCell/CardCell";
+import "./CardSmall.css";
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    className: "CancelIcon__st0",
+    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+  }));
+};
+var cn = cnCreate('mfui-lkvas-card-small');
+var CardSmall = function CardSmall(_ref) {
+  var className = _ref.className,
+    _ref$actionButtons = _ref.actionButtons,
+    actionButtons = _ref$actionButtons === void 0 ? [] : _ref$actionButtons,
+    onCloseButtonClick = _ref.onCloseButtonClick,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$isAdaptive = _ref.isAdaptive,
+    isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
+    dataAttrs = _ref.dataAttrs;
+  var hasCloseButton = !!onCloseButtonClick;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      adaptive: isAdaptive
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({
+    className: cn('close-button')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton), {
+    type: "button",
+    onClick: onCloseButtonClick
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('close-icon')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('items')
+  }, items.map(function (item, index) {
+    var isFirstItem = index === 0;
+    return /*#__PURE__*/React.createElement(CardCell, _extends({
+      key: index,
+      className: cn('item')
+    }, item, {
+      isFirstCell: isFirstItem
+    }));
+  })), !!(actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.length) && /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons')
+  }, actionButtons.map(function (_ref2, index) {
+    var title = _ref2.title,
+      href = _ref2.href,
+      target = _ref2.target,
+      rel = _ref2.rel,
+      onClick = _ref2.onClick;
+    var ElementType = href ? 'a' : 'button';
+    return /*#__PURE__*/React.createElement(ElementType, _extends({
+      key: title + index,
+      className: cn('button')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actionButton, index + 1), {
+      href: href,
+      rel: setRelAttribute(rel, target),
+      onClick: onClick
+    }), title);
+  })));
+};
+export default CardSmall;

package/dist/es/components/Cards/components/_CardCell/CardCell.css

@@ -0,0 +1,101 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-card-cell {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: left;
+      -ms-flex-pack: left;
+          justify-content: left;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+}
+.mfui-lkvas-card-cell__text-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  overflow: hidden;
+}
+.mfui-lkvas-card-cell__switcher-box, .mfui-lkvas-card-cell__actions-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 9px 0;
+}
+.mfui-lkvas-card-cell__text-box, .mfui-lkvas-card-cell__switcher-box {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--spbSky3);
+  font-weight: 400;
+}
+.mfui-lkvas-card-cell__actions-box {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: end;
+}
+.mfui-lkvas-card-cell__text-box-title {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 4px;
+  color: var(--content);
+}
+.mfui-lkvas-card-cell__text-box-title_color_green {
+  color: var(--brandGreen);
+}
+.mfui-lkvas-card-cell__text-box_highlight {
+  font-weight: 500;
+}
+.mfui-lkvas-card-cell__text-box_highlight .mfui-lkvas-card-cell__text-box-title {
+  font-weight: 500;
+}
+.mfui-lkvas-card-cell__actions-box-button {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 4px;
+  border: none;
+  border-radius: 50%;
+  color: inherit;
+  font: inherit;
+  background-color: var(--spbSky0);
+  cursor: pointer;
+}
+.mfui-lkvas-card-cell__actions-box-icon {
+  width: 100%;
+  height: 100%;
+  fill: var(--content);
+}
+.mfui-lkvas-card-cell__actions-box-icon_type_cancel {
+  fill: var(--spbSky3);
+}
+.mfui-lkvas-card-cell_fill {
+  background-color: var(--spbSky0);
+}
+.mfui-lkvas-card-cell_align_center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.mfui-lkvas-card-cell_align_right {
+  -webkit-box-pack: right;
+      -ms-flex-pack: right;
+          justify-content: right;
+}

package/dist/es/components/Cards/components/_CardCell/CardCell.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Switcher } from '@megafon/ui-core';
+import './CardCell.scss';
+type SwitcherPropsType = React.ComponentProps<typeof Switcher>;
+export type ActionItemIconType = 'settings' | 'edit' | 'cancel';
+export type ActionItemType = {
+    /** Тип иконки */
+    iconType: ActionItemIconType;
+    /** Обработчик клика */
+    onClick: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export type CardCellType = {
+    /** Тип */
+    type?: 'default' | 'switcher' | 'actions';
+    /** Заголовок */
+    title?: string;
+    /** Цвет заголовка */
+    titleColor?: 'default' | 'green';
+    /** Дополнительный текст */
+    subtitle?: string;
+    /** Параметры переключателя (Switcher ui-core) */
+    switcherProps?: SwitcherPropsType;
+    /** Текст переключателя */
+    switcherText?: string;
+    /** Элементы действий */
+    actionsItems?: ActionItemType[];
+    /** Горизонтальное выравнивание для 'switcher' | 'actions' */
+    align?: 'left' | 'center' | 'right';
+};
+interface ICardCell extends CardCellType {
+    className?: string;
+    isFirstCell?: boolean;
+    hasBackgroundFill?: boolean;
+    dataAttrs?: {
+        default?: Record<string, string>;
+        switcher?: Record<string, string>;
+        actions?: Record<string, string>;
+    };
+}
+declare const CardCell: React.FC<ICardCell>;
+export default CardCell;

package/dist/es/components/Cards/components/_CardCell/CardCell.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Switcher } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./CardCell.css";
+var EditIcon = function EditIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M17.1 2.9c-1.2-1.2-3.2-1.2-4.5 0L3.5 12 2 17l1 1 5-1.5 9.1-9.1c.6-.6.9-1.4.9-2.3s-.3-1.6-.9-2.2zM7.5 15.5l-4.3 1.3-.1-.1 1.3-4.3L11 5.8l3 3-6.5 6.7zm8.9-8.8l-1.5 1.5-3-3 1.5-1.5c.8-.8 2.2-.8 3 0 .4.3.6.9.6 1.4 0 .6-.2 1.2-.6 1.6z"
+  }));
+};
+var SettingsIcon = function SettingsIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 13a3 3 0 113-3 3 3 0 01-3 3zm0-5a2 2 0 102 2 2 2 0 00-2-2zm1.37 10H8.63L8 16.89a1.3 1.3 0 00-1.54-.64l-1.19.37-1.9-1.94.37-1.19a1.3 1.3 0 00-.64-1.54L2 11.37V8.62L3.1 8a1.3 1.3 0 00.64-1.5l-.37-1.19 1.94-1.94 1.19.37A1.3 1.3 0 008 3.1L8.63 2h2.75L12 3.1a1.31 1.31 0 001.54.64l1.19-.37 1.94 1.94-.41 1.19A1.3 1.3 0 0016.9 8l1.1.58v2.75l-1.1.58a1.3 1.3 0 00-.64 1.54l.37 1.19-1.94 1.94-1.19-.37a1.31 1.31 0 00-1.54.64zm-2.14-1h1.54l.3-.57a2.3 2.3 0 012.73-1.13l.61.19 1.09-1.09-.19-.61a2.3 2.3 0 011.13-2.73l.57-.3V9.23l-.57-.3A2.3 2.3 0 0115.3 6.2l.19-.61-1.08-1.09-.61.19a2.3 2.3 0 01-2.73-1.13l-.3-.56H9.23l-.3.57a2.3 2.3 0 01-2.72 1.12l-.62-.19-1.08 1.09.19.61a2.3 2.3 0 01-1.13 2.73l-.57.3v1.54l.57.3a2.3 2.3 0 011.13 2.72l-.19.61 1.09 1.09.61-.19a2.3 2.3 0 012.73 1.13z"
+  }));
+};
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    className: "CancelIcon__st0",
+    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+  }));
+};
+var cn = cnCreate('mfui-lkvas-card-cell');
+var CardCell = function CardCell(_ref) {
+  var className = _ref.className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    title = _ref.title,
+    _ref$titleColor = _ref.titleColor,
+    titleColor = _ref$titleColor === void 0 ? 'default' : _ref$titleColor,
+    subtitle = _ref.subtitle,
+    switcherProps = _ref.switcherProps,
+    switcherText = _ref.switcherText,
+    actionsItems = _ref.actionsItems,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    isFirstCell = _ref.isFirstCell,
+    _ref$hasBackgroundFil = _ref.hasBackgroundFill,
+    hasBackgroundFill = _ref$hasBackgroundFil === void 0 ? false : _ref$hasBackgroundFil,
+    dataAttrs = _ref.dataAttrs;
+  var currentAlign = type !== 'default' ? align : 'left';
+  var getActionIcon = function getActionIcon(iconType) {
+    switch (iconType) {
+      case 'settings':
+        return SettingsIcon;
+      case 'edit':
+        return EditIcon;
+      default:
+        return CancelIcon;
+    }
+  };
+  var renderActionsContent = function renderActionsContent() {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('actions-box')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actions)), !!(actionsItems === null || actionsItems === void 0 ? void 0 : actionsItems.length) && actionsItems.map(function (_ref2, index) {
+      var iconType = _ref2.iconType,
+        onClick = _ref2.onClick;
+      var CurrentIcon = getActionIcon(iconType);
+      return /*#__PURE__*/React.createElement("button", {
+        key: iconType + index,
+        className: cn('actions-box-button'),
+        type: "button",
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement(CurrentIcon, {
+        className: cn('actions-box-icon', {
+          type: iconType
+        })
+      }));
+    }));
+  };
+  var renderTextContent = function renderTextContent() {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('text-box', {
+        highlight: isFirstCell
+      })
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs["default"])), /*#__PURE__*/React.createElement("div", null, subtitle), /*#__PURE__*/React.createElement("div", {
+      className: cn('text-box-title', {
+        color: titleColor
+      })
+    }, title));
+  };
+  var renderSwitcherContent = function renderSwitcherContent() {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('switcher-box')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.switcher)), switcherText, /*#__PURE__*/React.createElement(Switcher, switcherProps));
+  };
+  var renderContent = function renderContent() {
+    switch (type) {
+      case 'switcher':
+        return renderSwitcherContent();
+      case 'actions':
+        return renderActionsContent();
+      default:
+        return renderTextContent();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      align: currentAlign,
+      fill: hasBackgroundFill
+    }, [className])
+  }, renderContent());
+};
+export default CardCell;

package/dist/es/components/Charts/Chart/Chart.css

@@ -0,0 +1,73 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-chart {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 24px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 24px 32px 32px 32px;
+  border-radius: 12px;
+  background-color: var(--base);
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.mfui-lkvas-chart__header {
+  display: grid;
+  grid-template-columns: 1fr auto minmax(-webkit-min-content, 1fr);
+  grid-template-columns: 1fr auto minmax(min-content, 1fr);
+  gap: 20px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.mfui-lkvas-chart__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  grid-column-start: 2;
+  text-align: center;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-lkvas-chart__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-lkvas-chart__button {
+  grid-column-start: 3;
+  justify-self: end;
+}
+.mfui-lkvas-chart__image {
+  display: block;
+  width: 96px;
+  height: 96px;
+  background-image: url("./img/chart.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.mfui-lkvas-chart__empty-text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}

package/dist/es/components/Charts/Chart/Chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IChart } from './types';
+import './Chart.scss';
+declare const Chart: React.FC<IChart>;
+export default Chart;