@megafon/ui-shared 6.4.0 → 6.5.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.5.0...@megafon/ui-shared@6.5.1) (2024-09-24)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [6.5.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.4.0...@megafon/ui-shared@6.5.0) (2024-09-17)
+
+
+### Features
+
+* **container:** add default margin for k27 (dark-gradient-cards) ([06438e6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/06438e62c49683b61b20261684e31a1f38c76667))
+* **darkgradientcards:** create component DarkGradientCards ([09626dd](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/09626ddb47c71f5502210958268fb768ca05cdc1))
+* **imagebanner:** add fetchpriority to ImageBanner ([db83e1a](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/db83e1a63af693ca1a6e594011b1e9f39407c6b1))
+
+
+
+
+
 # [6.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.3.0...@megafon/ui-shared@6.4.0) (2024-09-10)
 
 

package/dist/es/components/Container/Container.css

@@ -3723,6 +3723,9 @@ h5 {
 .mfui-container .mfui-dark-gradient-cards + .mfui-side-picture-cards {
   margin-top: 56px;
 }
+.mfui-container .mfui-dark-gradient-cards + .mfui-info-cards {
+  margin-top: 56px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-dark-gradient-cards + .mfui-benefits-icons {
     margin-top: 48px;
@@ -3784,6 +3787,9 @@ h5 {
   .mfui-container .mfui-dark-gradient-cards + .mfui-side-picture-cards {
     margin-top: 48px;
   }
+  .mfui-container .mfui-dark-gradient-cards + .mfui-info-cards {
+    margin-top: 48px;
+  }
 }
 @media screen and (max-width: 767px) {
   .mfui-container .mfui-dark-gradient-cards + .mfui-benefits-icons {
@@ -3840,6 +3846,9 @@ h5 {
   .mfui-container .mfui-dark-gradient-cards + .mfui-side-picture-cards {
     margin-top: 40px;
   }
+  .mfui-container .mfui-dark-gradient-cards + .mfui-info-cards {
+    margin-top: 40px;
+  }
 }
 .mfui-container .mfui-side-picture-cards + .mfui-benefits-icons {
   margin-top: 56px;
@@ -3901,6 +3910,9 @@ h5 {
 .mfui-container .mfui-side-picture-cards + .mfui-dark-gradient-cards {
   margin-top: 56px;
 }
+.mfui-container .mfui-side-picture-cards + .mfui-info-cards {
+  margin-top: 56px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-side-picture-cards + .mfui-benefits-icons {
     margin-top: 48px;
@@ -3962,6 +3974,9 @@ h5 {
   .mfui-container .mfui-side-picture-cards + .mfui-dark-gradient-cards {
     margin-top: 48px;
   }
+  .mfui-container .mfui-side-picture-cards + .mfui-info-cards {
+    margin-top: 48px;
+  }
 }
 @media screen and (max-width: 767px) {
   .mfui-container .mfui-side-picture-cards + .mfui-benefits-icons {
@@ -4018,6 +4033,9 @@ h5 {
   .mfui-container .mfui-side-picture-cards + .mfui-dark-gradient-cards {
     margin-top: 40px;
   }
+  .mfui-container .mfui-side-picture-cards + .mfui-info-cards {
+    margin-top: 40px;
+  }
 }
 .mfui-container .mfui-info-cards + .mfui-benefits-icons {
   margin-top: 56px;
@@ -4070,6 +4088,12 @@ h5 {
 .mfui-container .mfui-info-cards + .mfui-steps {
   margin-top: 56px;
 }
+.mfui-container .mfui-info-cards + .mfui-dark-gradient-cards {
+  margin-top: 56px;
+}
+.mfui-container .mfui-info-cards + .mfui-side-picture-cards {
+  margin-top: 56px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-info-cards + .mfui-benefits-icons {
     margin-top: 48px;
@@ -4122,6 +4146,12 @@ h5 {
   .mfui-container .mfui-info-cards + .mfui-steps {
     margin-top: 48px;
   }
+  .mfui-container .mfui-info-cards + .mfui-dark-gradient-cards {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-info-cards + .mfui-side-picture-cards {
+    margin-top: 48px;
+  }
 }
 @media screen and (max-width: 767px) {
   .mfui-container .mfui-info-cards + .mfui-benefits-icons {
@@ -4175,4 +4205,10 @@ h5 {
   .mfui-container .mfui-info-cards + .mfui-steps {
     margin-top: 40px;
   }
+  .mfui-container .mfui-info-cards + .mfui-dark-gradient-cards {
+    margin-top: 40px;
+  }
+  .mfui-container .mfui-info-cards + .mfui-side-picture-cards {
+    margin-top: 40px;
+  }
 }

package/dist/es/components/DarkGradientCards/DarkGradientCards.css

@@ -0,0 +1,18 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-dark-gradient-cards__cards {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 20px;
+}
+.mfui-dark-gradient-cards__cards .mfui-dark-gradient-cards__card {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { ItemType } from './types';
+import './DarkGradientCards.less';
+declare type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface IDarkGradientCards {
+    /** Карточки. Минимальное количество 3 карточки */
+    items: ItemType[];
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        carousel?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+}
+declare const DarkGradientCards: React.FC<IDarkGradientCards>;
+export default DarkGradientCards;

package/dist/es/components/DarkGradientCards/DarkGradientCards.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import useResolutions from "../../hooks/useResolutions";
+import DarkGradientCard from "./components/DarkGradientCard";
+import "./DarkGradientCards.css";
+
+var carouselParams = _defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 'auto',
+  spaceBetween: 20
+});
+
+var CAROUSEL_THRESHOLD = 5;
+var MIN_ITEMS_COUNT = 3;
+var cn = cnCreate('mfui-dark-gradient-cards');
+
+var DarkGradientCards = function DarkGradientCards(_ref) {
+  var items = _ref.items,
+      _ref$carouselGradient = _ref.carouselGradientColor,
+      carouselGradientColor = _ref$carouselGradient === void 0 ? 'default' : _ref$carouselGradient,
+      _ref$carouselNavTheme = _ref.carouselNavTheme,
+      carouselNavTheme = _ref$carouselNavTheme === void 0 ? 'light' : _ref$carouselNavTheme,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useResolutions = useResolutions(),
+      isDesktopWide = _useResolutions.isDesktopWide;
+
+  var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
+  var cards = items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(DarkGradientCard, _extends({
+      className: cn('card')
+    }, item, {
+      key: item.title + i,
+      size: i === 0 ? 'big' : 'small',
+      classes: {
+        root: classes.item
+      },
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+      }
+    }));
+  });
+
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root])
+  }), isCarouselActive ? /*#__PURE__*/React.createElement(Carousel, {
+    dataAttrs: {
+      root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
+    },
+    slidesSettings: carouselParams,
+    navTheme: carouselNavTheme,
+    threshold: CAROUSEL_THRESHOLD,
+    gradient: true,
+    gradientColor: carouselGradientColor
+  }, cards) : /*#__PURE__*/React.createElement("div", {
+    className: cn('cards')
+  }, cards));
+};
+
+DarkGradientCards.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    imageSrc: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+    moreIcon: PropTypes.element,
+    moreText: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  }).isRequired).isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  carouselNavTheme: PropTypes.oneOf(['light', 'green']),
+  carouselGradientColor: PropTypes.oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2'])
+};
+export default DarkGradientCards;

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css

@@ -0,0 +1,175 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-dark-gradient-card {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 298px;
+  min-height: 420px;
+  padding: 24px;
+  border-radius: 24px;
+  color: var(--stcWhite);
+  text-decoration: none;
+  background-position: center;
+  background-size: cover;
+}
+@media screen and (max-width: 359px) {
+  .mfui-dark-gradient-card {
+    width: 265px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-dark-gradient-card {
+    width: 211px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-dark-gradient-card {
+    min-height: 520px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-dark-gradient-card {
+    width: 285px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-dark-gradient-card {
+    width: 265px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-dark-gradient-card {
+    padding: 32px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-dark-gradient-card {
+    width: 345px;
+  }
+}
+.mfui-dark-gradient-card:hover {
+  text-decoration: none;
+}
+.mfui-dark-gradient-card:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: inherit;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
+}
+.mfui-dark-gradient-card_active:hover.mfui-dark-gradient-card:before {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 441px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 591px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 550px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 710px;
+  }
+}
+.mfui-dark-gradient-card__inner {
+  position: relative;
+  z-index: 1;
+  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;
+  width: 100%;
+}
+.mfui-dark-gradient-card__title {
+  margin-top: auto;
+}
+.mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+.mfui-dark-gradient-card__subtitle {
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-dark-gradient-card__more {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-dark-gradient-card__more-icon {
+  display: block;
+  width: 24px;
+  min-width: 24px;
+  max-height: 24px;
+}
+.mfui-dark-gradient-card__more-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--stcWhite);
+}

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ItemType } from '../types';
+import './DarkGradientCard.less';
+export declare type DarkGradientCardType = ItemType & {
+    size?: 'small' | 'big';
+    className?: string;
+    classes?: {
+        root?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+};
+declare const DarkGradientCard: React.FC<DarkGradientCardType>;
+export default DarkGradientCard;

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cnCreate, convert } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import "./DarkGradientCard.css";
+var cn = cnCreate('mfui-dark-gradient-card');
+
+var DarkGradientCard = function DarkGradientCard(_ref) {
+  var imageSrc = _ref.imageSrc,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      moreIcon = _ref.moreIcon,
+      moreText = _ref.moreText,
+      href = _ref.href,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+  var isLink = !!href;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = setRelAttribute(rel, target);
+  return /*#__PURE__*/React.createElement(ElementType, _extends({
+    className: cn({
+      size: size,
+      active: isLink
+    }, [className, classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
+    href: href,
+    target: isLink ? target : undefined,
+    rel: isLink ? currentRel : undefined,
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, convert(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle')
+  }, convert(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {
+    className: cn('more')
+  }, !!moreIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('more-icon')
+  }, moreIcon), convert(moreText, {}))));
+};
+
+export default DarkGradientCard;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export declare type ItemType = {
+    /** Изображение */
+    imageSrc: string;
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Иконка */
+    moreIcon?: JSX.Element;
+    /** Текст */
+    moreText?: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export {};

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

@@ -72,6 +72,8 @@ export interface IImageBannerProps {
     imageDesktop2x?: string;
     /** Значение тега alt для изображения */
     imageAlt?: string;
+    /** Приоритет загрузки изображения */
+    fetchPriority?: 'auto' | 'high' | 'low';
     /** Выравнивание изображения по вертикали (по умолчанию center) */
     imageVerticalAlign?: ImageVerticalAlignType;
     /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -72,6 +72,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
       _ref2$imageAlt = _ref2.imageAlt,
       imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
+      _ref2$fetchPriority = _ref2.fetchPriority,
+      fetchPriority = _ref2$fetchPriority === void 0 ? 'auto' : _ref2$fetchPriority,
       _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
       imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
       title = _ref2.title,
@@ -148,7 +150,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
-    alt: imageAlt
+    alt: imageAlt,
+    fetchPriority: fetchPriority
   })));
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
@@ -197,6 +200,7 @@ ImageBanner.propTypes = {
   imageDesktop: PropTypes.string,
   imageDesktop2x: PropTypes.string,
   imageAlt: PropTypes.string,
+  fetchPriority: PropTypes.oneOf(['auto', 'high', 'low']),
   imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

package/dist/es/hooks/useResolutions.d.ts

@@ -1,4 +1,5 @@
 export declare type useResolutionsReturnType = {
+    isDesktopWide: boolean;
     isDesktop: boolean;
     isMobile: boolean;
     isTablet: boolean;

package/dist/es/hooks/useResolutions.js

@@ -5,7 +5,8 @@ import { breakpoints } from '@megafon/ui-helpers';
 var MOBILE_MIDDLE_END = breakpoints.MOBILE_MIDDLE_END,
     MOBILE_BIG_START = breakpoints.MOBILE_BIG_START,
     MOBILE_BIG_END = breakpoints.MOBILE_BIG_END,
-    DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START;
+    DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START,
+    DESKTOP_MIDDLE_START = breakpoints.DESKTOP_MIDDLE_START;
 
 var useResolutions = function useResolutions() {
   var _React$useState = React.useState(false),
@@ -23,6 +24,11 @@ var useResolutions = function useResolutions() {
       isDesktop = _React$useState6[0],
       setIsDesktop = _React$useState6[1];
 
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isDesktopWide = _React$useState8[0],
+      setIsDesktopWide = _React$useState8[1];
+
   React.useEffect(function () {
     if (typeof window === 'undefined') {
       return undefined;
@@ -33,24 +39,29 @@ var useResolutions = function useResolutions() {
     var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
     var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
     var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
+    var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
 
     var handleResize = function handleResize() {
       setIsMobile(mobileQuery.matches);
       setIsTablet(tabletQuery.matches);
       setIsDesktop(desktopQuery.matches);
+      setIsDesktopWide(desktopWideQuery.matches);
     };
 
     handleResize();
     mobileQuery.addEventListener('change', handleResize);
     tabletQuery.addEventListener('change', handleResize);
     desktopQuery.addEventListener('change', handleResize);
+    desktopWideQuery.addEventListener('change', handleResize);
     return function () {
       mobileQuery.removeEventListener('change', handleResize);
       tabletQuery.removeEventListener('change', handleResize);
       desktopQuery.removeEventListener('change', handleResize);
+      desktopWideQuery.addEventListener('change', handleResize);
     };
   }, []);
   return {
+    isDesktopWide: isDesktopWide,
     isDesktop: isDesktop,
     isMobile: isMobile,
     isTablet: isTablet

package/dist/es/index.d.ts

@@ -17,6 +17,8 @@ export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
 export { default as Container } from './components/Container/Container';
+export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
+export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';
 export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
 export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
 export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';

package/dist/es/index.js

@@ -17,6 +17,8 @@ export { default as Card } from "./components/Card/Card";
 export { default as CardsBox } from "./components/CardsBox/CardsBox";
 export { default as CarouselBox } from "./components/CarouselBox/CarouselBox";
 export { default as Container } from "./components/Container/Container";
+export { default as DarkGradientCard } from "./components/DarkGradientCards/components/DarkGradientCard";
+export { default as DarkGradientCards } from "./components/DarkGradientCards/DarkGradientCards";
 export { default as DownloadLink } from "./components/DownloadLinks/DownloadLink";
 export { default as DownloadLinks } from "./components/DownloadLinks/DownloadLinks";
 export { default as FaqWrapper } from "./components/FaqWrapper/FaqWrapper";