@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { Button, TextLink } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./ButtonLinkBox.css";
+var cn = cnCreate('mfui-button-link-box');
+var ButtonLinkBox = function ButtonLinkBox(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef,
+    buttonTitle = _ref.buttonTitle,
+    buttonUrl = _ref.buttonUrl,
+    buttonDownload = _ref.buttonDownload,
+    _ref$buttonColor = _ref.buttonColor,
+    buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+    _ref$buttonType = _ref.buttonType,
+    buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
+    buttonRel = _ref.buttonRel,
+    linkTitle = _ref.linkTitle,
+    linkUrl = _ref.linkUrl,
+    linkDownload = _ref.linkDownload,
+    linkRel = _ref.linkRel,
+    align = _ref.align,
+    className = _ref.className,
+    buttonTarget = _ref.buttonTarget,
+    linkTarget = _ref.linkTarget,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    onButtonClick = _ref.onButtonClick,
+    onLinkClick = _ref.onLinkClick;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'h-align': align
+    }, [className, classes.root]),
+    ref: rootRef
+  }), buttonTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('row')
+  }, /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: classes.button,
+    href: buttonUrl,
+    theme: buttonColor,
+    type: buttonType,
+    onClick: onButtonClick,
+    target: buttonTarget,
+    download: buttonDownload,
+    rel: buttonRel
+  }, buttonTitle)), linkTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('row')
+  }, /*#__PURE__*/React.createElement(TextLink, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+    },
+    className: classes.link,
+    href: linkUrl,
+    download: linkDownload,
+    underlineVisibility: "always",
+    target: linkTarget,
+    rel: linkRel,
+    onClick: onLinkClick
+  }, linkTitle)));
+};
+export default ButtonLinkBox;

package/dist/es/components/ButtonsBox/ButtonsBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-buttons-box{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-buttons-box__buttons_equal-width{display:grid;gap:20px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}@media screen and (max-width:767px){.mfui-buttons-box__buttons_equal-width{grid-template-rows:repeat(2,1fr)}}@media screen and (min-width:768px){.mfui-buttons-box__buttons_equal-width{grid-template-columns:repeat(2,1fr)}}.mfui-buttons-box_h-align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './ButtonsBox.scss';
+export type ButtonType = {
+    /** Тип */
+    type?: 'primary' | 'outline';
+    /** Иконка */
+    icon?: React.JSX.Element;
+    /** Название */
+    title?: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Задает атрибут download для тега <a> */
+    download?: boolean;
+    /** Показать стелку */
+    showArrow?: boolean;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IButtonsBox {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Кнопка */
+    button: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Горизонтальное выравнивание */
+    align?: 'center' | 'left';
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const ButtonsBox: React.FC<IButtonsBox>;
+export default ButtonsBox;

package/dist/es/components/ButtonsBox/ButtonsBox.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../helpers/setRelAttribute";
+import "./ButtonsBox.css";
+var cn = cnCreate('mfui-buttons-box');
+var ButtonsBox = function ButtonsBox(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    align = _ref.align,
+    rootRef = _ref.rootRef;
+  var showTwoButtons = !!button && !!extraButton;
+  var renderButton = function renderButton(btnProps, btnClassName, dataAttr) {
+    return /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttr
+      },
+      className: btnClassName,
+      fullWidth: showTwoButtons,
+      type: btnProps.type,
+      theme: "green",
+      icon: btnProps.icon,
+      href: btnProps.href,
+      target: btnProps.target,
+      download: btnProps.download,
+      showArrow: btnProps.showArrow,
+      rel: setRelAttribute(btnProps.rel, btnProps.target),
+      onClick: btnProps.onClick
+    }, btnProps.title);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'h-align': align
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons', {
+      'equal-width': showTwoButtons
+    })
+  }, !!button && renderButton(button, classes.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), !!extraButton && renderButton(extraButton, classes.extraButton, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton)));
+};
+export default ButtonsBox;

package/dist/es/components/Card/Card.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-card{padding:24px 24px 32px}}.mfui-card_full-height{height:100%}.mfui-card_link{cursor:pointer}.mfui-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-card_link.mfui-card_view_hover-shadow:hover,.mfui-card_link.mfui-card_view_shadow: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-card_view_background{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover{background-color:var(--spbSky1)}.mfui-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-card_only-title{padding:32px}}.mfui-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-card_link:hover .mfui-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-card__marker-item{padding-left:20px;position:relative}.mfui-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-card__marker-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:0;opacity:.8;position:absolute;top:7px;width:6px}.mfui-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-card__texts{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;margin-top:16px}.mfui-card__texts ol,.mfui-card__texts ul{margin:0;padding-left:24px}.mfui-card__texts ol{list-style-type:decimal}.mfui-card__texts ul{list-style-type:disc}.mfui-card__texts-item_center .mfui-card__texts-desc,.mfui-card__texts-item_center .mfui-card__texts-title{text-align:center}.mfui-card__texts-title{font-weight:500}.mfui-card__features{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;margin-top:16px;overflow:hidden}.mfui-card__features-list{list-style:none;margin:0;padding:0}.mfui-card__features-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__features-item:before{background-image:radial-gradient(circle,var(--spbSky3) 1px,transparent 1px);background-size:6px 2px;bottom:.4em;content:"";height:2px;position:absolute;width:100%}.mfui-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-card_view_background .mfui-card__features-item-text{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover .mfui-card__features-item-text{background-color:var(--spbSky1)}.mfui-card__features-item-title .mfui-card__features-item-text{padding-right:4px}.mfui-card__features-item-value .mfui-card__features-item-text{padding-left:4px}.mfui-card__icons{margin-top:16px}.mfui-card__icons-desc{margin-bottom:12px}.mfui-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-card__icons-item,.mfui-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-card__icons-item-text{margin-top:4px}.mfui-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;border-top:1px solid var(--spbSky1);justify-content:center;margin-top:24px;padding-top:24px}@media screen and (min-width:1280px){.mfui-card__price{margin-top:32px}}.mfui-card__img-box+.mfui-card__price{border:none;padding-top:0}.mfui-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-card__price-value{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-card__price-value{font-size:32px;line-height:40px}}.mfui-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-card__price+.mfui-card__buttons{margin-top:24px}.mfui-card__buttons_centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-card__button{-ms-flex-preferred-size:190px;flex-basis:190px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;max-width:320px}.mfui-card__footer{margin-top:auto}

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import './Card.scss';
+import { ExtraButtonType, FeaturesList, IconsList, Image, Link, MainButtonType, MarkerList, Price, TextsList, Title } from './types';
+export interface ICard {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        icon?: Record<string, string>;
+        imgBox?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement | HTMLAnchorElement>;
+    isFullHeight?: boolean;
+    isCenteredText?: boolean;
+    /** Вид */
+    view?: 'shadow' | 'hover-shadow' | 'background';
+    /** Ссылка для карточки */
+    link?: Link;
+    /** Изображение */
+    image?: Image;
+    /** Иконка */
+    icon?: React.ReactNode;
+    /** Заголовок */
+    title: Title;
+    /** Маркированный список */
+    markerList?: MarkerList;
+    /** Список текстов */
+    textsList?: TextsList;
+    /** Список характеристик */
+    featuresList?: FeaturesList;
+    /** Список иконок */
+    iconsList?: IconsList;
+    /** Цена */
+    price?: Price;
+    /** Кнопка */
+    button?: MainButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ExtraButtonType;
+    /** Бейдж */
+    badge?: React.ReactElement;
+    /** Обработчик клика по карточке */
+    onClick?: () => void;
+}
+declare const Card: React.FC<ICard>;
+export default Card;

package/dist/es/components/Card/Card.js

@@ -0,0 +1,229 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { Button, Header } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
+import "./Card.css";
+var textsConvertConfig = _extends(_extends({}, textConvertConfig), {
+  ul: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement("ul", null, children);
+    }
+  },
+  ol: {
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/React.createElement("ol", null, children);
+    }
+  },
+  li: {
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/React.createElement("li", null, children);
+    }
+  },
+  p: {
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React.createElement("p", null, children);
+    }
+  }
+});
+var cn = cnCreate('mfui-card');
+var Card = function Card(_ref5) {
+  var dataAttrs = _ref5.dataAttrs,
+    className = _ref5.className,
+    classes = _ref5.classes,
+    rootRef = _ref5.rootRef,
+    _ref5$isFullHeight = _ref5.isFullHeight,
+    isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
+    _ref5$isCenteredText = _ref5.isCenteredText,
+    isCenteredText = _ref5$isCenteredText === void 0 ? false : _ref5$isCenteredText,
+    link = _ref5.link,
+    _ref5$view = _ref5.view,
+    view = _ref5$view === void 0 ? 'shadow' : _ref5$view,
+    image = _ref5.image,
+    icon = _ref5.icon,
+    title = _ref5.title,
+    markerList = _ref5.markerList,
+    textsList = _ref5.textsList,
+    featuresList = _ref5.featuresList,
+    iconsList = _ref5.iconsList,
+    price = _ref5.price,
+    button = _ref5.button,
+    extraButton = _ref5.extraButton,
+    badge = _ref5.badge,
+    onClick = _ref5.onClick;
+  var isOnlyTitle = !image && !icon && !markerList && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
+  var isLink = (link === null || link === void 0 ? void 0 : link.href) && !button && !extraButton;
+  var isBottomImage = (image === null || image === void 0 ? void 0 : image.position) === 'bottom';
+  var ElementType = isLink ? 'a' : 'div';
+  var renderImage = function renderImage() {
+    if (!image) {
+      return null;
+    }
+    var _image$position = image.position,
+      position = _image$position === void 0 ? 'top' : _image$position,
+      src = image.src,
+      alt = image.alt;
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.imgBox), {
+      className: cn('img-box', {
+        position: position
+      })
+    }), /*#__PURE__*/React.createElement("img", {
+      className: cn('img'),
+      src: src,
+      alt: alt
+    }));
+  };
+  var renderIcon = function renderIcon() {
+    if (!icon) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon), {
+      className: cn('icon')
+    }), icon);
+  };
+  var renderContent = function renderContent() {
+    if (markerList) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('marker-list')
+      }, markerList.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("li", {
+          className: cn('marker-item'),
+          key: i
+        }, convert(item.title, {}), !!item.note && /*#__PURE__*/React.createElement("span", {
+          className: cn('marker-note')
+        }, convert(item.note, {})));
+      }));
+    }
+    if (textsList) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('texts')
+      }, textsList.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cn('texts-item', {
+            center: isCenteredText
+          }),
+          key: i
+        }, !!item.title && /*#__PURE__*/React.createElement("div", {
+          className: cn('texts-title')
+        }, convert(item.title, textsConvertConfig)), /*#__PURE__*/React.createElement("div", {
+          className: cn('texts-desc')
+        }, convert(item.desc, textsConvertConfig)));
+      }));
+    }
+    if (featuresList) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('features')
+      }, /*#__PURE__*/React.createElement("ul", {
+        className: cn('features-list')
+      }, featuresList.items.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("li", {
+          className: cn('features-item'),
+          key: i
+        }, /*#__PURE__*/React.createElement("div", {
+          className: cn('features-item-title')
+        }, /*#__PURE__*/React.createElement("span", {
+          className: cn('features-item-text')
+        }, item.title)), /*#__PURE__*/React.createElement("div", {
+          className: cn('features-item-value')
+        }, /*#__PURE__*/React.createElement("span", {
+          className: cn('features-item-text')
+        }, item.value)));
+      })), featuresList.desc);
+    }
+    if (iconsList) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('icons')
+      }, !!iconsList.desc && /*#__PURE__*/React.createElement("div", {
+        className: cn('icons-desc')
+      }, iconsList.desc), /*#__PURE__*/React.createElement("div", {
+        className: cn('icons-list')
+      }, iconsList.items.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cn('icons-item'),
+          key: i
+        }, /*#__PURE__*/React.createElement("div", {
+          className: cn('icons-item-icon')
+        }, item.icon), /*#__PURE__*/React.createElement("div", {
+          className: cn('icons-item-text')
+        }, item.text));
+      })));
+    }
+    return null;
+  };
+  var renderPrice = function renderPrice() {
+    if (!price) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('price')
+    }, !!price.oldValue && /*#__PURE__*/React.createElement("div", {
+      className: cn('price-old-value')
+    }, price.oldValue), /*#__PURE__*/React.createElement("div", {
+      className: cn('price-value')
+    }, price.value), !!price.period && /*#__PURE__*/React.createElement("div", {
+      className: cn('price-period')
+    }, price.period));
+  };
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    var extraButtonType = (button === null || button === void 0 ? void 0 : button.type) === 'outline' ? 'text' : extraButton === null || extraButton === void 0 ? void 0 : extraButton.type;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('buttons', {
+        centered: (button === null || button === void 0 ? void 0 : button.isCentered) || (extraButton === null || extraButton === void 0 ? void 0 : extraButton.isCentered)
+      })
+    }, !!button && /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
+      href: button.href,
+      target: button.target,
+      type: button.type || 'primary',
+      theme: button.theme || 'green',
+      onClick: button === null || button === void 0 ? void 0 : button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
+      href: extraButton.href,
+      target: extraButton.target,
+      type: extraButtonType || 'outline',
+      onClick: extraButton === null || extraButton === void 0 ? void 0 : extraButton.onClick
+    }, extraButton.title));
+  };
+  var renderFooter = function renderFooter() {
+    if (!price && !button && !extraButton && !image) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('footer')
+    }, isBottomImage && renderImage(), renderPrice(), renderButtons());
+  };
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'only-title': isOnlyTitle,
+      view: view,
+      link: isLink,
+      'full-height': isFullHeight
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    href: isLink ? link === null || link === void 0 ? void 0 : link.href : undefined,
+    target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
+    onClick: isLink ? onClick : undefined,
+    ref: rootRef
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('title'),
+    as: "h3",
+    align: title.align
+  }, title.text), badge), renderContent(), renderFooter());
+};
+export default Card;

package/dist/es/components/Card/types.d.ts

@@ -0,0 +1,86 @@
+type Target = '_self' | '_blank' | '_parent' | '_top';
+export type Link = {
+    /** Ссылка */
+    href?: string;
+    /** Target свойство ссылки */
+    target?: Target;
+};
+export type Image = {
+    /** Ссылка на изображение */
+    src: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Позиция изображения */
+    position?: 'top' | 'bottom';
+};
+export type Title = {
+    /** Текст */
+    text: string;
+    /** Выравнивание */
+    align?: 'left' | 'center';
+};
+export type MarkerList = {
+    /** Заголовок */
+    title: string;
+    /** Примечание */
+    note?: string;
+}[];
+export type TextsList = {
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    desc: string;
+}[];
+export type FeaturesList = {
+    /** Список */
+    items: {
+        /** Заголовок */
+        title: string;
+        /** Значение */
+        value: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export type IconsList = {
+    /** Список */
+    items: {
+        /** Иконка */
+        icon: React.ReactNode;
+        /** Текст */
+        text: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export type Price = {
+    /** Старая цена */
+    oldValue?: string;
+    /** Текущая цена */
+    value: string;
+    /** Период */
+    period?: string;
+};
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: Target;
+    /** Центрировать кнопку */
+    isCentered?: boolean;
+    /** Обработчик клика по кнопке */
+    onClick?: () => void;
+};
+export type MainButtonType = ButtonType & {
+    /** Тип кнопки */
+    type?: 'primary' | 'outline';
+    /** Тема кнопки */
+    theme?: 'green' | 'green-soft';
+};
+export type ExtraButtonType = ButtonType & {
+    /** Тип кнопки */
+    type?: 'outline' | 'text';
+};
+export {};

package/dist/es/components/Card/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ICard } from '../Card/Card';
+interface ICardsBoxProps {
+    /** Выводить по две колонки в ряду для 2 или 4 карточек */
+    renderTwoColumnsInRow?: boolean;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        column?: Record<string, string>;
+    };
+    children: Array<React.ReactElement<ICard>> | React.ReactElement<ICard>;
+}
+declare const CardsBox: React.FC<ICardsBoxProps>;
+export default CardsBox;

package/dist/es/components/CardsBox/CardsBox.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import getColumnConfig from "./helpers";
+var cn = cnCreate('mfui-cards-box');
+var CardsBox = function CardsBox(_ref) {
+  var _ref$renderTwoColumns = _ref.renderTwoColumnsInRow,
+    renderTwoColumnsInRow = _ref$renderTwoColumns === void 0 ? false : _ref$renderTwoColumns,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn()
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, {
+    guttersBottom: "medium",
+    guttersLeft: "medium"
+  }, React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.column
+      }
+    }, getColumnConfig(React.Children.count(children), i, renderTwoColumnsInRow)), child);
+  })));
+};
+export default CardsBox;

package/dist/es/components/CardsBox/helpers.d.ts

@@ -0,0 +1,10 @@
+type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+type GridConfig = {
+    all?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    mobile?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+};
+declare const getColumnConfig: (count: number, index: number, renderTwoColumnsInRow: boolean) => GridConfig;
+export default getColumnConfig;

package/dist/es/components/CardsBox/helpers.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+var getColumnConfig = function getColumnConfig(count, index, renderTwoColumnsInRow) {
+  var offset = renderTwoColumnsInRow ? '2' : undefined;
+  var offsetForEvenColumn = index % 2 ? undefined : offset;
+  var columnSize = {
+    all: '4',
+    tablet: '6',
+    mobile: '12'
+  };
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: offsetForEvenColumn,
+        leftOffsetDesktop: offsetForEvenColumn
+      });
+    default:
+      return _extends({}, columnSize);
+  }
+};
+export default getColumnConfig;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+type CarouselPropsTypes = React.ComponentProps<typeof Carousel>;
+type DesktopSlidesPerView = 3 | 4;
+interface ICarouselBox extends CarouselPropsTypes {
+    /** Количество видимых слайдов на разрешении 1280 и выше */
+    desktopSlidesPerView?: DesktopSlidesPerView;
+}
+declare const CarouselBox: React.FC<ICarouselBox>;
+export default CarouselBox;