@alfalab/core-components-product-cover 1.0.0

package/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SingleProps, StackProps } from "./typings";
+declare const Single: FC<SingleProps>;
+declare const ProductCover: {
+    Single: FC<SingleProps>;
+    Stack: FC<StackProps>;
+};
+export { Single, ProductCover };

package/Component.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var single_Component = require('./single/Component.js');
+var stack_Component = require('./stack/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var Single = function (props) { return React__default.default.createElement(single_Component.Single, tslib.__assign({}, props)); };
+var ProductCover = {
+    Single: Single,
+    Stack: stack_Component.Stack,
+};
+
+exports.ProductCover = ProductCover;
+exports.Single = Single;

package/components/image-card/Component.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+type ImageCardProps = {
+    /**
+     * Идентификатор карты
+     * (например: RM, SQ, SR)
+     */
+    cardId?: string;
+    /**
+     * Базовый URL сервиса с изображениями
+     * https://online.alfabank.ru/cards-images/cards/
+     */
+    baseUrl?: string;
+    /**
+     * Какие слои показывать, через запятую без пробелов
+     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
+     */
+    layers?: string;
+    /**
+     * Ширина карты
+     */
+    width?: number;
+    /**
+     * Высота карты
+     */
+    height?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+};
+declare const ImageCard: FC<ImageCardProps>;
+export { ImageCardProps, ImageCard };

package/components/image-card/Component.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks = require('@alfalab/hooks');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"cardMack":"product-cover__cardMack_yebu3","cardImage":"product-cover__cardImage_yebu3"};
+require('./index.css')
+
+var ImageCard = function (_a) {
+    var baseUrl = _a.baseUrl, cardId = _a.cardId, layers = _a.layers, width = _a.width, height = _a.height, numberOfСards = _a.numberOfСards;
+    var imagePatternId = hooks.useId();
+    var cardImageUrl = "".concat(baseUrl).concat(cardId, "/images?layers=").concat(layers, "&width=").concat(width);
+    var cardImageUrl2x = width && "".concat(baseUrl).concat(cardId, "/images?layers=").concat(layers, "&width=").concat(width * 2);
+    var imageLoadingState = hooks.useImageLoadingState({ src: cardImageUrl || '' });
+    var imageLoadingState2x = hooks.useImageLoadingState({ src: cardImageUrl2x || '' });
+    var imageFailed = imageLoadingState === 'error' || imageLoadingState2x === 'error';
+    var renderCardMack = function () { return (React__default.default.createElement("svg", { width: '24', height: '16', viewBox: '0 0 24 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: styles.cardMack },
+        !imageFailed && (React__default.default.createElement("defs", null,
+            React__default.default.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
+                React__default.default.createElement("image", { href: cardImageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' })))),
+        React__default.default.createElement("path", { style: {
+                fill: imageFailed
+                    ? 'var(--color-light-graphic-tertiary)'
+                    : "url(#".concat(imagePatternId, ")"),
+            }, d: 'M0 13V14C0 15.1046 0.89543 16 2 16H22C23.1046 16 24 15.1046 24 14V2C24 0.895431 23.1046 0 22 0H21V10C21 11.6569 19.6569 13 18 13H0Z' }))); };
+    var renderImageCard = function () {
+        if (!imageFailed) {
+            return (React__default.default.createElement("img", { alt: 'card', className: styles.cardImage, width: width, height: height, src: cardImageUrl, srcSet: "".concat(cardImageUrl2x, " 2x") }));
+        }
+        return null;
+    };
+    return height === 16 && numberOfСards ? renderCardMack() : renderImageCard();
+};
+
+exports.ImageCard = ImageCard;

package/components/image-card/index.css

@@ -0,0 +1,32 @@
+/* hash: 10zgi */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-graphic-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-xs: 2px;
+} :root {
+} :root {
+} :root {
+} .product-cover__cardMack_yebu3 {
+    background-color: var(--color-light-graphic-primary-inverted);
+    border-radius: var(--border-radius-xs);
+} .product-cover__cardImage_yebu3 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    max-width: 100%;
+    height: 100%;
+    border-radius: inherit;
+}

package/components/image-card/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/components/image-card/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_imageCard_Component = require('./Component.js');
+
+
+
+exports.ImageCard = components_imageCard_Component.ImageCard;

package/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./overlay/index";
+export * from "./text/index";
+export * from "./image-card/index";

package/components/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_overlay_Component = require('./overlay/Component.js');
+var components_text_Component = require('./text/Component.js');
+var components_imageCard_Component = require('./image-card/Component.js');
+
+
+
+exports.Overlay = components_overlay_Component.Overlay;
+exports.Text = components_text_Component.Text;
+exports.ImageCard = components_imageCard_Component.ImageCard;

package/components/overlay/Component.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { OverlayProps } from "../../typings";
+declare const Overlay: FC<OverlayProps>;
+export { Overlay };

package/components/overlay/Component.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"overlay":"product-cover__overlay_1l1ze","visible":"product-cover__visible_1l1ze","default":"product-cover__default_1l1ze","inverted":"product-cover__inverted_1l1ze"};
+require('./index.css')
+
+var Overlay = function (_a) {
+    var _b;
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, visible = _a.visible;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.overlay, styles[colors], (_b = {},
+            _b[styles.visible] = visible,
+            _b)) }));
+};
+
+exports.Overlay = Overlay;

package/components/overlay/index.css

@@ -0,0 +1,35 @@
+/* hash: 5c9cf */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-static-neutral-translucent-700: rgba(4, 4, 21, 0.47);
+    --color-static-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .product-cover__overlay_1l1ze {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 3;
+    opacity: 0;
+} .product-cover__visible_1l1ze {
+    opacity: 1;
+} .product-cover__default_1l1ze {
+    background: var(--color-static-neutral-translucent-700-inverted);
+} .product-cover__inverted_1l1ze {
+    background: var(--color-static-neutral-translucent-700);
+}

package/components/overlay/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/components/overlay/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_overlay_Component = require('./Component.js');
+
+
+
+exports.Overlay = components_overlay_Component.Overlay;

package/components/text/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { Size } from "../../typings";
+type TextProps = {
+    /**
+     * Кнопка показать номер карты
+     */
+    eyeButton?: boolean;
+    /**
+     * Размер
+     */
+    size?: Size;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Имя владельца карты в верхнем регистре
+     */
+    cardholderNameUppercase?: boolean;
+    /**
+     * Имя владельца карты
+     */
+    cardholderName?: string;
+    /**
+     * Номер карты
+     */
+    cardNumber?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Управление ориентацией стопки карт компонента
+     */
+    align?: 'bottom' | 'default';
+    /**
+     * Обработчик клика по иконке 'показать номер карты'
+     */
+    onEyeIconClick?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+};
+declare const Text: React.FC<TextProps>;
+export { TextProps, Text };

package/components/text/Component.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var desktop = require('@alfalab/core-components-button/desktop');
+var coreComponentsShared = require('@alfalab/core-components-shared');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
+var EyeMIcon = require('@alfalab/icons-glyph/EyeMIcon');
+var utils = require('@alfalab/utils');
+var consts = require('../../consts.js');
+var utils_index = require('../../utils/index.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"product-cover__component_15nup","cardholderName":"product-cover__cardholderName_15nup","cardNumber":"product-cover__cardNumber_15nup","buttonEye":"product-cover__buttonEye_15nup"};
+require('./index.css')
+
+var Text = function (_a) {
+    var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 164 : _b, onEyeIconClick = _a.onEyeIconClick;
+    var maxSize = size === 164;
+    var visibleNumberOfСards = utils_index["showNumberOfСards"](size, numberOfСards, align);
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component), "data-test-id": dataTestId },
+        maxSize && cardholderName ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles.cardholderName }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
+        cardNumber && !visibleNumberOfСards ? (React__default.default.createElement("div", { className: styles.cardNumber },
+            React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light' },
+                [164, 128].includes(size) && '··\u2009',
+                String(cardNumber).slice(-4)),
+            eyeButton && maxSize && (React__default.default.createElement(desktop.ButtonDesktop, { view: 'text', className: cn__default.default(styles.buttonEye), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'eye-btn'), onClick: onEyeIconClick, colors: 'inverted' },
+                React__default.default.createElement(EyeMIcon.EyeMIcon, null))))) : null,
+        visibleNumberOfСards && (React__default.default.createElement("div", { className: styles.cardNumber },
+            React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark' }, "+".concat(numberOfСards, "\u00A0"),
+                utils.pluralize(numberOfСards || 0, 'карта', 'карты', 'карт'))))));
+};
+
+exports.Text = Text;

package/components/text/index.css

@@ -0,0 +1,48 @@
+/* hash: nlylc */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-static-text-primary-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-3xs: 2px;
+} :root {
+} :root {
+} .product-cover__component_15nup {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    grid-gap: var(--gap-3xs);
+    grid-gap: var(--gap-3xs);
+    gap: var(--gap-3xs);
+} .product-cover__cardholderName_15nup {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+} .product-cover__cardNumber_15nup {
+    display: flex;
+    align-items: center;
+} .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup {
+    margin-left: 5px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    color: var(--color-static-text-primary-light)
+} .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup:hover {
+        color: var(--color-static-text-primary-light);
+    } .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup:active {
+        color: var(--color-static-text-primary-light);
+    } .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup > span {
+        display: flex;
+        align-items: center;
+    }

package/components/text/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/components/text/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_text_Component = require('./Component.js');
+
+
+
+exports.Text = components_text_Component.Text;

package/consts.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from "@alfalab/core-components-typography";
+declare const WIDTH_TO_SIZE: Record<number, number>;
+declare const TYPOGRAPHY_VIEW_FOR_SIZE: Record<number, TextProps['view']>;
+declare const SECOND_CARD_SIZE: Record<number, number>;
+export { WIDTH_TO_SIZE, TYPOGRAPHY_VIEW_FOR_SIZE, SECOND_CARD_SIZE };

package/consts.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var WIDTH_TO_SIZE = {
+    16: 24,
+    32: 51,
+    40: 65,
+    48: 76,
+    96: 152,
+    128: 205,
+    164: 264,
+};
+var TYPOGRAPHY_VIEW_FOR_SIZE = {
+    16: 'secondary-small',
+    32: 'secondary-small',
+    40: 'secondary-medium',
+    48: 'secondary-medium',
+    96: 'secondary-medium',
+    128: 'primary-small',
+    164: 'primary-medium',
+};
+var SECOND_CARD_SIZE = {
+    16: 16,
+    32: 32,
+    40: 40,
+    128: 96,
+};
+
+exports.SECOND_CARD_SIZE = SECOND_CARD_SIZE;
+exports.TYPOGRAPHY_VIEW_FOR_SIZE = TYPOGRAPHY_VIEW_FOR_SIZE;
+exports.WIDTH_TO_SIZE = WIDTH_TO_SIZE;

package/cssm/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SingleProps, StackProps } from "./typings";
+declare const Single: FC<SingleProps>;
+declare const ProductCover: {
+    Single: FC<SingleProps>;
+    Stack: FC<StackProps>;
+};
+export { Single, ProductCover };

package/cssm/Component.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var single_Component = require('./single/Component.js');
+var stack_Component = require('./stack/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var Single = function (props) { return React__default.default.createElement(single_Component.Single, tslib.__assign({}, props)); };
+var ProductCover = {
+    Single: Single,
+    Stack: stack_Component.Stack,
+};
+
+exports.ProductCover = ProductCover;
+exports.Single = Single;

package/cssm/components/image-card/Component.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+type ImageCardProps = {
+    /**
+     * Идентификатор карты
+     * (например: RM, SQ, SR)
+     */
+    cardId?: string;
+    /**
+     * Базовый URL сервиса с изображениями
+     * https://online.alfabank.ru/cards-images/cards/
+     */
+    baseUrl?: string;
+    /**
+     * Какие слои показывать, через запятую без пробелов
+     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
+     */
+    layers?: string;
+    /**
+     * Ширина карты
+     */
+    width?: number;
+    /**
+     * Высота карты
+     */
+    height?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+};
+declare const ImageCard: FC<ImageCardProps>;
+export { ImageCardProps, ImageCard };

package/cssm/components/image-card/Component.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks = require('@alfalab/hooks');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var ImageCard = function (_a) {
+    var baseUrl = _a.baseUrl, cardId = _a.cardId, layers = _a.layers, width = _a.width, height = _a.height, numberOfСards = _a.numberOfСards;
+    var imagePatternId = hooks.useId();
+    var cardImageUrl = "".concat(baseUrl).concat(cardId, "/images?layers=").concat(layers, "&width=").concat(width);
+    var cardImageUrl2x = width && "".concat(baseUrl).concat(cardId, "/images?layers=").concat(layers, "&width=").concat(width * 2);
+    var imageLoadingState = hooks.useImageLoadingState({ src: cardImageUrl || '' });
+    var imageLoadingState2x = hooks.useImageLoadingState({ src: cardImageUrl2x || '' });
+    var imageFailed = imageLoadingState === 'error' || imageLoadingState2x === 'error';
+    var renderCardMack = function () { return (React__default.default.createElement("svg", { width: '24', height: '16', viewBox: '0 0 24 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: styles__default.default.cardMack },
+        !imageFailed && (React__default.default.createElement("defs", null,
+            React__default.default.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
+                React__default.default.createElement("image", { href: cardImageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' })))),
+        React__default.default.createElement("path", { style: {
+                fill: imageFailed
+                    ? 'var(--color-light-graphic-tertiary)'
+                    : "url(#".concat(imagePatternId, ")"),
+            }, d: 'M0 13V14C0 15.1046 0.89543 16 2 16H22C23.1046 16 24 15.1046 24 14V2C24 0.895431 23.1046 0 22 0H21V10C21 11.6569 19.6569 13 18 13H0Z' }))); };
+    var renderImageCard = function () {
+        if (!imageFailed) {
+            return (React__default.default.createElement("img", { alt: 'card', className: styles__default.default.cardImage, width: width, height: height, src: cardImageUrl, srcSet: "".concat(cardImageUrl2x, " 2x") }));
+        }
+        return null;
+    };
+    return height === 16 && numberOfСards ? renderCardMack() : renderImageCard();
+};
+
+exports.ImageCard = ImageCard;

package/cssm/components/image-card/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/cssm/components/image-card/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_imageCard_Component = require('./Component.js');
+
+
+
+exports.ImageCard = components_imageCard_Component.ImageCard;

package/cssm/components/image-card/index.module.css

@@ -0,0 +1,31 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-graphic-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-xs: 2px;
+} :root {
+} :root {
+} :root {
+} .cardMack {
+    background-color: var(--color-light-graphic-primary-inverted);
+    border-radius: var(--border-radius-xs);
+} .cardImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    max-width: 100%;
+    height: 100%;
+    border-radius: inherit;
+}

package/cssm/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./overlay/index";
+export * from "./text/index";
+export * from "./image-card/index";

package/cssm/components/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_overlay_Component = require('./overlay/Component.js');
+var components_text_Component = require('./text/Component.js');
+var components_imageCard_Component = require('./image-card/Component.js');
+
+
+
+exports.Overlay = components_overlay_Component.Overlay;
+exports.Text = components_text_Component.Text;
+exports.ImageCard = components_imageCard_Component.ImageCard;