@megafon/ui-shared 6.0.0-beta.4 → 6.0.0

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

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import './ButtonBanner.scss';
+import React, { Ref } from 'react';
+import './ButtonBanner.less';
 export declare const ButtonColor: {
     readonly GREEN: "green";
     readonly PURPLE: "purple";
 };
-type ButtonColorType = (typeof ButtonColor)[keyof typeof ButtonColor];
+declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
 export declare const ButtonTypes: {
     readonly PRIMARY: "primary";
     readonly OUTLINE: "outline";
 };
-type ButtonTypesType = (typeof ButtonTypes)[keyof typeof ButtonTypes];
+declare type ButtonTypesType = typeof ButtonTypes[keyof typeof ButtonTypes];
 export declare const ButtonTarget: {
     readonly SELF: "_self";
     readonly BLANK: "_blank";
 };
-type ButtonTargetType = (typeof ButtonTarget)[keyof typeof ButtonTarget];
+declare type ButtonTargetType = typeof ButtonTarget[keyof typeof ButtonTarget];
 export declare const ImageScaling: {
     readonly COVER: "cover";
     readonly CONTAIN: "contain";
 };
-type ImageScalingType = (typeof ImageScaling)[keyof typeof ImageScaling];
+declare type ImageScalingType = typeof ImageScaling[keyof typeof ImageScaling];
 export interface IButtonBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -34,7 +34,7 @@ export interface IButtonBannerProps {
         button?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Заголовок */
     title: string;
     /** Текст */

package/dist/es/components/ButtonBanner/ButtonBanner.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from 'react';
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { Button, Grid, GridColumn, Header } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./ButtonBanner.css";
 export var ButtonColor = {
   GREEN: 'green',
@@ -19,36 +21,39 @@ export var ImageScaling = {
   COVER: 'cover',
   CONTAIN: 'contain'
 };
+
 var getMediaStyle = function getMediaStyle(imageUrl) {
   return imageUrl ? {
     backgroundImage: "url(".concat(imageUrl, ")")
   } : undefined;
 };
+
 var cn = cnCreate('mfui-button-banner');
 var testIdPrefix = 'ButtonBanner';
+
 var ButtonBanner = function ButtonBanner(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    rootRef = _ref.rootRef,
-    title = _ref.title,
-    text = _ref.text,
-    _ref$imageUrl = _ref.imageUrl,
-    imageUrl = _ref$imageUrl === void 0 ? '' : _ref$imageUrl,
-    buttonText = _ref.buttonText,
-    buttonUrl = _ref.buttonUrl,
-    buttonDownload = _ref.buttonDownload,
-    _ref$buttonTarget = _ref.buttonTarget,
-    buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
-    _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,
-    _ref$imageScaling = _ref.imageScaling,
-    imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
-    onButtonClick = _ref.onButtonClick;
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      title = _ref.title,
+      text = _ref.text,
+      _ref$imageUrl = _ref.imageUrl,
+      imageUrl = _ref$imageUrl === void 0 ? '' : _ref$imageUrl,
+      buttonText = _ref.buttonText,
+      buttonUrl = _ref.buttonUrl,
+      buttonDownload = _ref.buttonDownload,
+      _ref$buttonTarget = _ref.buttonTarget,
+      buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
+      _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,
+      _ref$imageScaling = _ref.imageScaling,
+      imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
+      onButtonClick = _ref.onButtonClick;
   var buttonElem = /*#__PURE__*/React.createElement(Button, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
@@ -93,4 +98,30 @@ var ButtonBanner = function ButtonBanner(_ref) {
     "data-testid": "".concat(testIdPrefix, "-media")
   }, !imageUrl && buttonElem))));
 };
+
+ButtonBanner.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  imageUrl: PropTypes.string,
+  buttonText: PropTypes.string.isRequired,
+  buttonUrl: PropTypes.string,
+  buttonDownload: PropTypes.bool,
+  buttonTarget: PropTypes.oneOf(Object.values(ButtonTarget)),
+  buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+  buttonType: PropTypes.oneOf(Object.values(ButtonTypes)),
+  buttonRel: PropTypes.string,
+  onButtonClick: PropTypes.func
+};
 export default ButtonBanner;

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css

@@ -1 +1,19 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-button-link-box{font-family:inherit;font-size:15px;font-weight:400;line-height:24px}.mfui-button-link-box__row:not(:last-child){margin-bottom:32px}.mfui-button-link-box_h-align_center{text-align:center}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-button-link-box {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-button-link-box__row:not(:last-child) {
+  margin-bottom: 32px;
+}
+.mfui-button-link-box_h-align_center {
+  text-align: center;
+}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './ButtonLinkBox.scss';
+import React, { Ref } from 'react';
+import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -16,7 +16,7 @@ export interface IButtonLinkBoxProps {
         link?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Заголовок кнопки */
     buttonTitle?: string;
     /** Ссылка кнопки */

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

@@ -1,31 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.link.js";
-import * as React from 'react';
+import React from 'react';
 import { Button, TextLink } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 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,
-    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;
+      rootRef = _ref.rootRef,
+      buttonTitle = _ref.buttonTitle,
+      buttonUrl = _ref.buttonUrl,
+      buttonDownload = _ref.buttonDownload,
+      _ref$buttonColor = _ref.buttonColor,
+      buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+      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
@@ -59,4 +61,33 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     onClick: onLinkClick
   }, linkTitle)));
 };
+
+ButtonLinkBox.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  buttonTitle: PropTypes.string,
+  buttonUrl: PropTypes.string,
+  buttonDownload: PropTypes.bool,
+  buttonColor: PropTypes.oneOf(['green', 'purple']),
+  buttonRel: PropTypes.string,
+  linkTitle: PropTypes.string,
+  linkUrl: PropTypes.string,
+  linkDownload: PropTypes.bool,
+  linkRel: PropTypes.string,
+  align: PropTypes.oneOf(['center', 'left']),
+  onButtonClick: PropTypes.func,
+  onLinkClick: PropTypes.func
+};
 export default ButtonLinkBox;

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

@@ -1 +1,354 @@
-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;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: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(--stcBlack20);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 ul{list-style-type:disc}.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(--warmRedC);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}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-card {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 16px 16px 24px;
+  border-radius: 24px;
+  color: var(--content);
+  text-decoration: none !important;
+  background-color: var(--base);
+  -webkit-transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, box-shadow, 0.3s;
+  transition: background-color 0.3s, box-shadow, 0.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, 0.1);
+          box-shadow: 0 2px 12px 0 rgba(0, 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, 0.1);
+          box-shadow: 0 8px 28px 0 rgba(0, 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: start;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.mfui-card__icon {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 32px;
+}
+.mfui-card__img-box {
+  position: relative;
+  padding-bottom: 56.25%;
+  border-radius: 24px;
+  overflow: hidden;
+}
+.mfui-card__img-box_position_top {
+  margin: -6px -6px 24px -6px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__img-box_position_top {
+    margin: -12px -12px 32px -12px;
+  }
+}
+.mfui-card__img-box_position_bottom {
+  margin: 24px -6px 0 -6px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__img-box_position_bottom {
+    margin: 32px -12px 0 -12px;
+  }
+}
+.mfui-card__img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.mfui-card_link:hover .mfui-card__img {
+  -webkit-transform: scale(1.2);
+          transform: scale(1.2);
+}
+.mfui-card__marker-list {
+  margin: 16px 0 0 0;
+  padding: 0;
+  list-style-type: none;
+}
+.mfui-card__marker-item {
+  position: relative;
+  padding-left: 20px;
+}
+.mfui-card__marker-item:not(:last-child) {
+  margin-bottom: 12px;
+}
+.mfui-card__marker-item:before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--stcBlack20);
+  opacity: 0.8;
+}
+.mfui-card__marker-note {
+  display: block;
+  margin: 4px 0 0 0;
+  padding: 0;
+  font-weight: 500;
+}
+.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 ul {
+  list-style-type: disc;
+}
+.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 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mfui-card__features-item {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -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 {
+  content: '';
+  position: absolute;
+  bottom: 0.4em;
+  width: 100%;
+  height: 2px;
+  background-image: radial-gradient(circle, var(--spbSky3) 1px, transparent 1px);
+  background-size: 6px 2px;
+}
+.mfui-card__features-item-value {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  text-align: end;
+}
+.mfui-card__features-item-text {
+  position: relative;
+  z-index: 1;
+  background-color: var(--base);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.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 {
+  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;
+}
+.mfui-card__icons-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-card__icons-item-icon {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+}
+.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;
+          justify-content: center;
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--spbSky1);
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__price {
+    margin-top: 32px;
+  }
+}
+.mfui-card__img-box + .mfui-card__price {
+  padding-top: 0;
+  border: none;
+}
+.mfui-card__price-old-value {
+  position: relative;
+  color: var(--spbSky3);
+}
+.mfui-card__price-old-value:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: -1px;
+  left: -1px;
+  height: 1px;
+  background-color: var(--warmRedC);
+}
+.mfui-card__price-value {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+@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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './Card.scss';
+import React, { ReactElement, Ref } from 'react';
+import './Card.less';
 import { ButtonType, FeaturesList, IconsList, Image, Link, MarkerList, Price, TextsList, Title } from './types';
 export interface ICard {
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -19,7 +19,7 @@ export interface ICard {
         extraButton?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement | HTMLAnchorElement>;
+    rootRef?: Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
     /** Вид */
     view?: 'shadow' | 'hover-shadow' | 'background';
@@ -46,7 +46,7 @@ export interface ICard {
     /** Дополнительная кнопка */
     extraButton?: ButtonType;
     /** Бейдж */
-    badge?: React.ReactElement;
+    badge?: ReactElement;
     /** Обработчик клика по карточке */
     onClick?: () => void;
 }