@megafon/ui-shared 9.0.0-alpha.15 → 9.0.0-alpha.17

package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-benefit-card{border:none;border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;line-height:24px;min-height:100%;overflow:hidden;padding:16px;position:relative;-webkit-transition:.3s;transition:.3s;width:100%}@media screen and (min-width:1280px){.mfui-9-benefit-card{padding:24px}}.mfui-9-benefit-card:after{background:var(--stcWhite5);border-radius:24px;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-benefit-card_interactive:hover:after{opacity:1}.mfui-9-benefit-card_background_gray{background-color:var(--spbSky0)}.mfui-9-benefit-card_background_white{background-color:var(--base)}.mfui-9-benefit-card_background_outline{background-color:var(--base);border:1px solid var(--spbSky2)}.mfui-9-benefit-card_background_soft-purple{background-color:var(--brandPurple20);border:none}.mfui-9-benefit-card_background_soft-green{background-color:var(--brandGreen20);border:none}.mfui-9-benefit-card_background_soft-night{background-color:var(--night20);border:none}.mfui-9-benefit-card_background_soft-sky{background-color:var(--sky20);border:none}.mfui-9-benefit-card_background_soft-flamingo{background-color:var(--flamingo20);border:none}.mfui-9-benefit-card_background_soft-berry{background-color:var(--berry20);border:none}.mfui-9-benefit-card_background_gradient-berry1{background:var(--gradientBerry1);border:none}.mfui-9-benefit-card_background_gradient-berry2{background:var(--gradientBerry2);border:none}.mfui-9-benefit-card_background_gradient-purple1{background:var(--gradientPurple1);border:none}.mfui-9-benefit-card_background_gradient-purple2{background:var(--gradientPurple2);border:none}.mfui-9-benefit-card_background_gradient-purple3{background:var(--gradientPurple3);border:none}.mfui-9-benefit-card_background_gray.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_outline.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_white.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--spbSky3);box-shadow:0 0 0 1px var(--spbSky3)}.mfui-9-benefit-card_background_soft-green.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--brandGreen80);box-shadow:0 0 0 1px var(--brandGreen80)}.mfui-9-benefit-card_background_soft-purple.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--brandPurple80);box-shadow:0 0 0 1px var(--brandPurple80)}.mfui-9-benefit-card_background_soft-night.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--night80);box-shadow:0 0 0 1px var(--night80)}.mfui-9-benefit-card_background_soft-berry.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--berry80);box-shadow:0 0 0 1px var(--berry80)}.mfui-9-benefit-card_background_soft-flamingo.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--flamingo80);box-shadow:0 0 0 1px var(--flamingo80)}.mfui-9-benefit-card_background_soft-sky.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--sky80);box-shadow:0 0 0 1px var(--sky80)}.mfui-9-benefit-card_background_gradient-berry1.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-berry2.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple1.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple2.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple3.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--berry);box-shadow:0 0 0 1px var(--berry)}.mfui-9-benefit-card_background_outline.mfui-9-benefit-card_interactive:hover:after,.mfui-9-benefit-card_background_white.mfui-9-benefit-card_interactive:hover:after{opacity:0}.mfui-9-benefit-card_gradient{color:var(--stcWhite)}.mfui-9-benefit-card__content{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-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-right:86px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-benefit-card__content{margin-right:64px}}@media screen and (min-width:1280px){.mfui-9-benefit-card__content{margin-right:136px}}.mfui-9-benefit-card__content b{font-weight:500}.mfui-9-benefit-card__image{bottom:0;height:85px;-o-object-fit:contain;object-fit:contain;-o-object-position:right bottom;object-position:right bottom;position:absolute;right:0;width:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-benefit-card__image{height:68px;width:88px}}@media screen and (min-width:1280px){.mfui-9-benefit-card__image{height:124px;width:160px}}.mfui-9-benefit-card__pseudo-link{color:var(--systemBlue);text-decoration:none}.mfui-9-benefit-card_gradient .mfui-9-benefit-card__pseudo-link{color:var(--stcWhite);font-weight:500}.mfui-9-benefit-card_interactive:hover .mfui-9-benefit-card__pseudo-link{text-decoration:underline}

package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ExtraBackgroundType, IBenefitCardData, MainBackgroundType } from '../types';
+import './BenefitCard.scss';
+export interface IBenefitCard extends IBenefitCardData {
+    className?: string;
+    background?: MainBackgroundType | ExtraBackgroundType;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        pseudoLink?: Record<string, string>;
+    };
+}
+declare const BenefitCard: React.FC<IBenefitCard>;
+export default BenefitCard;

package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { Header, Paragraph } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import "./BenefitCard.css";
+var typographyConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement("b", null, children);
+    }
+  }
+};
+var cn = cnCreate('mfui-9-benefit-card');
+var BenefitCard = function BenefitCard(_ref2) {
+  var title = _ref2.title,
+    description = _ref2.description,
+    imageSrc = _ref2.imageSrc,
+    link = _ref2.link,
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? 'gray' : _ref2$background,
+    dataAttrs = _ref2.dataAttrs,
+    className = _ref2.className;
+  var isLink = !!link;
+  var Element = isLink ? 'a' : 'div';
+  var isGradientBackground = !!background && background.includes('gradient');
+  return /*#__PURE__*/React.createElement(Element, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    href: link === null || link === void 0 ? void 0 : link.href,
+    target: link === null || link === void 0 ? void 0 : link.target,
+    rel: isLink ? setRelAttribute(link.rel, link.target) : undefined,
+    className: cn({
+      background: background,
+      interactive: isLink,
+      gradient: isGradientBackground
+    }, [className]),
+    tabIndex: isLink ? 0 : -1
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement(Header, {
+    as: "h3",
+    color: "inherit"
+  }, convert(title, {})), /*#__PURE__*/React.createElement(Paragraph, {
+    hasMargin: false,
+    color: "inherit"
+  }, convert(description, typographyConfig), !!(link === null || link === void 0 ? void 0 : link.pseudoLinkText) && /*#__PURE__*/React.createElement(React.Fragment, null, ' ', /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pseudoLink), {
+    className: cn('pseudo-link')
+  }), link.pseudoLinkText)))), /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    alt: title,
+    className: cn('image')
+  }));
+};
+export default BenefitCard;

package/dist/es/components/BenefitCards/BenefitCards.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-benefit-cards{display:grid;gap:20px;grid-template-columns:repeat(6,1fr)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(3)) .mfui-9-benefit-cards__item:nth-child(-n+3){grid-column:span 3}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(3)) .mfui-9-benefit-cards__item:first-child{grid-column:span 6}}@media screen and (min-width:1024px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(3)) .mfui-9-benefit-cards__item:nth-child(-n+3){grid-column:span 2}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(3)) .mfui-9-benefit-cards__item{grid-column:span 6}@media screen and (min-width:768px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(4)) .mfui-9-benefit-cards__item:nth-child(-n+4){grid-column:span 3}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(4)) .mfui-9-benefit-cards__item{grid-column:span 6}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(5)) .mfui-9-benefit-cards__item:first-child{grid-column:span 6}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(5)) .mfui-9-benefit-cards__item:nth-child(n+2){grid-column:span 3}}@media screen and (min-width:1024px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(5)) .mfui-9-benefit-cards__item:nth-child(-n+2){grid-column:span 3}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(5)) .mfui-9-benefit-cards__item:nth-child(n+3){grid-column:span 2}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(5)) .mfui-9-benefit-cards__item{grid-column:span 6}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(6)) .mfui-9-benefit-cards__item:nth-child(-n+6){grid-column:span 3}}@media screen and (min-width:1024px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(6)) .mfui-9-benefit-cards__item:nth-child(-n+6){grid-column:span 2}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(6)) .mfui-9-benefit-cards__item{grid-column:span 6}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(7)) .mfui-9-benefit-cards__item:first-child{grid-column:span 6}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(7)) .mfui-9-benefit-cards__item:nth-child(n+2){grid-column:span 3}}@media screen and (min-width:1024px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(7)) .mfui-9-benefit-cards__item:nth-child(-n+2){grid-column:span 3}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(7)) .mfui-9-benefit-cards__item:nth-child(n+3){grid-column:span 2}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(7)) .mfui-9-benefit-cards__item:nth-child(n+6){grid-column:span 3}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(7)) .mfui-9-benefit-cards__item{grid-column:span 6}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(8)) .mfui-9-benefit-cards__item:nth-child(-n+8){grid-column:span 3}}@media screen and (min-width:1024px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(8)) .mfui-9-benefit-cards__item:nth-child(-n+2){grid-column:span 3}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(8)) .mfui-9-benefit-cards__item:nth-child(n+3){grid-column:span 2}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(8)) .mfui-9-benefit-cards__item{grid-column:span 6}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(9)) .mfui-9-benefit-cards__item:first-child{grid-column:span 6}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(9)) .mfui-9-benefit-cards__item:nth-child(n+2){grid-column:span 3}}@media screen and (min-width:1024px){.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(9)) .mfui-9-benefit-cards__item:nth-child(-n+9){grid-column:span 2}}.mfui-9-benefit-cards:has(.mfui-9-benefit-cards__item:nth-child(9)) .mfui-9-benefit-cards__item{grid-column:span 6}.mfui-9-benefit-cards__item{grid-column:span 3}@media screen and (max-width:767px){.mfui-9-benefit-cards__item{grid-column:span 6}}

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ExtraBackgroundType, IBenefitCardData, MainBackgroundType } from './types';
+import './BenefitCards.scss';
+export interface IBenefitCards {
+    /** Список карточек */
+    items: IBenefitCardData[];
+    /** Основной фон карточек  */
+    mainBackground?: MainBackgroundType;
+    /** Дополнительный фон карточек */
+    extraBackground?: ExtraBackgroundType;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        card?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const BenefitCards: React.FC<IBenefitCards>;
+export default BenefitCards;

package/dist/es/components/BenefitCards/BenefitCards.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import BenefitCard from "./BenefitCard/BenefitCard";
+import { checkIsExtraColoredCard } from "./helpers";
+import "./BenefitCards.css";
+var cn = cnCreate('mfui-9-benefit-cards');
+var BenefitCards = function BenefitCards(_ref) {
+  var className = _ref.className,
+    items = _ref.items,
+    mainBackground = _ref.mainBackground,
+    extraBackground = _ref.extraBackground,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), items.map(function (item, i) {
+    var isExtraColored = !!extraBackground && checkIsExtraColoredCard(i, items.length);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      key: "".concat(item.title, "_").concat(i)
+    }, /*#__PURE__*/React.createElement(BenefitCard, _extends({}, item, {
+      background: isExtraColored ? extraBackground : mainBackground,
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
+      },
+      className: classes === null || classes === void 0 ? void 0 : classes.card
+    })));
+  }));
+};
+export default BenefitCards;

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

@@ -0,0 +1 @@
+export declare const checkIsExtraColoredCard: (index: number, total: number) => boolean;

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

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+var ONE_CARDS = '1';
+var TWO_CARDS = '2';
+var THREE_CARDS = '3';
+var FOUR_CARDS = '4';
+var FIVE_CARDS = '5';
+var SIX_CARDS = '6';
+var FIRST_CARD_INDEX = 0;
+var THIRD_CARD_INDEX = 2;
+var FOURTH_CARD_INDEX = 3;
+var FIFTH_CARD_INDEX = 4;
+var INDEXES_MAP = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ONE_CARDS, [FIRST_CARD_INDEX]), TWO_CARDS, [FIRST_CARD_INDEX]), THREE_CARDS, [FIRST_CARD_INDEX]), FOUR_CARDS, [FIRST_CARD_INDEX, FOURTH_CARD_INDEX]), FIVE_CARDS, [FIRST_CARD_INDEX, FIFTH_CARD_INDEX]), SIX_CARDS, [FIRST_CARD_INDEX, THIRD_CARD_INDEX, FIFTH_CARD_INDEX]);
+export var checkIsExtraColoredCard = function checkIsExtraColoredCard(index, total) {
+  var _a;
+  var indexes = (_a = INDEXES_MAP[String(total)]) !== null && _a !== void 0 ? _a : INDEXES_MAP[SIX_CARDS];
+  return indexes.includes(index);
+};

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

@@ -0,0 +1,24 @@
+type SoftBackgroundType = 'soft-purple' | 'soft-green' | 'soft-night' | 'soft-sky' | 'soft-flamingo' | 'soft-berry';
+export type MainBackgroundType = SoftBackgroundType | 'outline' | 'white' | 'gray';
+export type ExtraBackgroundType = SoftBackgroundType | 'gradient-berry1' | 'gradient-berry2' | 'gradient-purple1' | 'gradient-purple2' | 'gradient-purple3';
+export type LinkType = {
+    /** Атрибут ссылки href */
+    href: string;
+    /** Атрибут ссылки target */
+    target: '_self' | '_blank';
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Текст псевдоссылки внутри карточки */
+    pseudoLinkText: string;
+};
+export interface IBenefitCardData {
+    /** Заголовок */
+    title: string;
+    /** Описание */
+    description: string;
+    /** Изображение */
+    imageSrc: string;
+    /** Ссылка */
+    link?: LinkType;
+}
+export {};

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

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

package/dist/es/components/BlogBox/components/BlogBoxTile.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-blog-box-tile{color:var(--content);display:block;position:relative;text-decoration:none}.mfui-9-blog-box-tile:hover{text-decoration:none}.mfui-9-blog-box-tile:hover .mfui-9-blog-box-tile__title{color:var(--brandGreen)}.mfui-9-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-9-blog-box-tile__picture{display:block}.mfui-9-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-9-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-9-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__picture{-ms-flex-negative:0;flex-shrink:0;height:102px;width:133px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__picture{height:130px;width:170px}}@media screen and (min-width:1440px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__picture{height:170px;width:233px}}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__content{-ms-flex-item-align:center;align-self:center}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__date{font-size:12px;line-height:18px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__date{font-size:15px;line-height:24px}}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__title{font-size:20px;line-height:28px}}.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__picture{height:358px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__picture{height:438px}}@media screen and (min-width:1440px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__picture{height:558px}}.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:8px;left:8px;padding:16px;position:absolute;right:8px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{padding:24px}}@media screen and (min-width:768px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{bottom:12px;left:12px;right:12px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{padding:16px}}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{padding:24px}}.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:32px;line-height:40px}}.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__picture{height:233px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__picture{height:288px}}@media screen and (min-width:1440px){.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__picture{height:367px}}.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:12px;left:12px;padding:16px;position:absolute;right:12px}.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__title{font-size:20px;line-height:28px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-blog-box-tile{border-radius:24px;color:var(--content);display:block;position:relative;text-decoration:none}.mfui-9-blog-box-tile:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-blog-box-tile:focus{outline:none}.mfui-9-blog-box-tile:hover{text-decoration:none}.mfui-9-blog-box-tile:hover .mfui-9-blog-box-tile__title{color:var(--brandGreen)}.mfui-9-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-9-blog-box-tile__picture{display:block}.mfui-9-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-9-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-transition:color .3s;transition:color .3s;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4}.mfui-9-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__picture{-ms-flex-negative:0;flex-shrink:0;height:102px;width:133px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__picture{height:130px;width:170px}}@media screen and (min-width:1440px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__picture{height:170px;width:233px}}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__content{-ms-flex-item-align:center;align-self:center}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__date{font-size:12px;line-height:18px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__date{font-size:15px;line-height:24px}}.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_thumbnail .mfui-9-blog-box-tile__title{font-size:20px;line-height:28px}}.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__picture{height:358px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__picture{height:438px}}@media screen and (min-width:1440px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__picture{height:558px}}.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:8px;left:8px;padding:16px;position:absolute;right:8px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{padding:24px}}@media screen and (min-width:768px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{bottom:12px;left:12px;right:12px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{padding:16px}}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__content{padding:24px}}.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_full .mfui-9-blog-box-tile__title{font-size:32px;line-height:40px}}.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__picture{height:233px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__picture{height:288px}}@media screen and (min-width:1440px){.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__picture{height:367px}}.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:12px;left:12px;padding:16px;position:absolute;right:12px}.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-9-blog-box-tile_view_compact .mfui-9-blog-box-tile__title{font-size:20px;line-height:28px}}

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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}.mfui-9-card:focus-visible{-webkit-animation:focus-outline-shrink .6s ease-out forwards;animation:focus-outline-shrink .6s ease-out forwards;outline-offset:2px;-webkit-transition:none;transition:none}@-webkit-keyframes focus-outline-shrink{0%{outline:6px solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:6px solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card:focus{outline:none}@media screen and (min-width:1280px){.mfui-9-card{padding:24px 24px 32px}}.mfui-9-card_full-height{height:100%}.mfui-9-card_link{cursor:pointer}.mfui-9-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-9-card_link.mfui-9-card_view_hover-shadow:hover,.mfui-9-card_link.mfui-9-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-9-card_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-card_link.mfui-9-card_view_stroke:hover{border:1px solid var(--brandGreen)}.mfui-9-card_view_background{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover{background-color:var(--spbSky1)}.mfui-9-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-9-card_only-title{padding:32px}}.mfui-9-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-9-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-9-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-9-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-9-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-9-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-9-card_link:hover .mfui-9-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-9-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-9-card__marker-item{padding-left:20px;position:relative}.mfui-9-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-9-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-9-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-9-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-9-card__texts ol,.mfui-9-card__texts ul{margin:0;padding-left:24px}.mfui-9-card__texts ol{list-style-type:decimal}.mfui-9-card__texts ul{list-style-type:disc}.mfui-9-card__texts-item_center .mfui-9-card__texts-desc,.mfui-9-card__texts-item_center .mfui-9-card__texts-title{text-align:center}.mfui-9-card__texts-title{font-weight:500}.mfui-9-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-9-card__features-list{list-style:none;margin:0;padding:0}.mfui-9-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-9-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-9-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-9-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-9-card_view_background .mfui-9-card__features-item-text{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover .mfui-9-card__features-item-text{background-color:var(--spbSky1)}.mfui-9-card__features-item-title .mfui-9-card__features-item-text{padding-right:4px}.mfui-9-card__features-item-value .mfui-9-card__features-item-text{padding-left:4px}.mfui-9-card__icons{margin-top:16px}.mfui-9-card__icons-desc{margin-bottom:12px}.mfui-9-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-9-card__icons-item,.mfui-9-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-9-card__icons-item-text{margin-top:4px}.mfui-9-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-9-card__price{margin-top:32px}}.mfui-9-card__img-box+.mfui-9-card__price{border:none;padding-top:0}.mfui-9-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-9-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-9-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-9-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-card__price-value{font-size:32px;line-height:40px}}.mfui-9-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-9-card__price+.mfui-9-card__buttons{margin-top:24px}.mfui-9-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}.mfui-9-card__footer{margin-top:auto}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-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}.mfui-9-card:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card:focus{outline:none}@media screen and (min-width:1280px){.mfui-9-card{padding:24px 24px 32px}}.mfui-9-card_full-height{height:100%}.mfui-9-card_link{cursor:pointer}.mfui-9-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-9-card_link.mfui-9-card_view_hover-shadow:hover,.mfui-9-card_link.mfui-9-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-9-card_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-card_link.mfui-9-card_view_stroke:hover{border:1px solid var(--brandGreen)}.mfui-9-card_view_background{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover{background-color:var(--spbSky1)}.mfui-9-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-9-card_only-title{padding:32px}}.mfui-9-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-9-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-9-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-9-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-9-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-9-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-9-card_link:hover .mfui-9-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-9-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-9-card__marker-item{padding-left:20px;position:relative}.mfui-9-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-9-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-9-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-9-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-9-card__texts ol,.mfui-9-card__texts ul{margin:0;padding-left:24px}.mfui-9-card__texts ol{list-style-type:decimal}.mfui-9-card__texts ul{list-style-type:disc}.mfui-9-card__texts-item_center .mfui-9-card__texts-desc,.mfui-9-card__texts-item_center .mfui-9-card__texts-title{text-align:center}.mfui-9-card__texts-title{font-weight:500}.mfui-9-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-9-card__features-list{list-style:none;margin:0;padding:0}.mfui-9-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-9-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-9-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-9-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-9-card_view_background .mfui-9-card__features-item-text{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover .mfui-9-card__features-item-text{background-color:var(--spbSky1)}.mfui-9-card__features-item-title .mfui-9-card__features-item-text{padding-right:4px}.mfui-9-card__features-item-value .mfui-9-card__features-item-text{padding-left:4px}.mfui-9-card__icons{margin-top:16px}.mfui-9-card__icons-desc{margin-bottom:12px}.mfui-9-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-9-card__icons-item,.mfui-9-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-9-card__icons-item-text{margin-top:4px}.mfui-9-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-9-card__price{margin-top:32px}}.mfui-9-card__img-box+.mfui-9-card__price{border:none;padding-top:0}.mfui-9-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-9-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-9-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-9-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-card__price-value{font-size:32px;line-height:40px}}.mfui-9-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-9-card__price+.mfui-9-card__buttons{margin-top:24px}.mfui-9-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}.mfui-9-card__footer{margin-top:auto}

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

@@ -218,8 +218,9 @@ var Card = function Card(_ref5) {
     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,
-    tabIndex: isLink || onClick ? 0 : -1
+    ref: rootRef
+  }, !!onClick && {
+    tabIndex: 0
   }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(Header, {

package/dist/es/components/CardsOnBackground/components/CardOnBackground.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-card-on-background{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:100%;justify-content:center;min-width:240px;padding:16px 16px 0;text-decoration:none}@media screen and (min-width:768px){.mfui-9-card-on-background{padding:24px 24px 0}}.mfui-9-card-on-background:hover{text-decoration:none}.mfui-9-card-on-background_active:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-card-on-background__content{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-align:center;-ms-flex-align:center;align-items:center;max-width:520px;width:100%}.mfui-9-card-on-background__description{font-size:15px;font-weight:400;line-height:24px;margin-top:8px;text-align:center}.mfui-9-card-on-background__image-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:150px;justify-content:center;overflow:hidden;width:150px}@media screen and (min-width:768px){.mfui-9-card-on-background__image-wrapper{height:200px;width:200px}}.mfui-9-card-on-background__image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.mfui-9-card-on-background__buttons{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-flex:1;-ms-flex-positive:1;flex-grow:1;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-bottom:16px;width:100%}@media screen and (min-width:768px){.mfui-9-card-on-background__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:24px}}.mfui-9-card-on-background__button{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-card-on-background{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:100%;justify-content:center;min-width:240px;padding:16px 16px 0;text-decoration:none}.mfui-9-card-on-background:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card-on-background:focus{outline:none}@media screen and (min-width:768px){.mfui-9-card-on-background{padding:24px 24px 0}}.mfui-9-card-on-background:hover{text-decoration:none}.mfui-9-card-on-background_active:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-card-on-background__content{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-align:center;-ms-flex-align:center;align-items:center;max-width:520px;width:100%}.mfui-9-card-on-background__description{font-size:15px;font-weight:400;line-height:24px;margin-top:8px;text-align:center}.mfui-9-card-on-background__image-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:150px;justify-content:center;overflow:hidden;width:150px}@media screen and (min-width:768px){.mfui-9-card-on-background__image-wrapper{height:200px;width:200px}}.mfui-9-card-on-background__image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.mfui-9-card-on-background__buttons{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-flex:1;-ms-flex-positive:1;flex-grow:1;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-bottom:16px;width:100%}@media screen and (min-width:768px){.mfui-9-card-on-background__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:24px}}.mfui-9-card-on-background__button{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}

package/dist/es/components/CardsOnBackground/useUniformHeights.js

@@ -6,6 +6,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import React from 'react';
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
 var useUniformHeights = function useUniformHeights(itemsCount) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _options$disabled = options.disabled,
@@ -30,7 +31,7 @@ var useUniformHeights = function useUniformHeights(itemsCount) {
       setMaxHeight(newMaxHeight);
     }
   }, [disabled]);
-  React.useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (disabled) {
       return undefined;
     }
@@ -46,7 +47,7 @@ var useUniformHeights = function useUniformHeights(itemsCount) {
       (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
     };
   }, [disabled, updateMaxHeight]);
-  React.useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     var _a;
     if (disabled) {
       (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();